/* Screen-only workspace. Printed pages retain their physical dimensions. */
@media screen {
    .print-settings-panel .correction-toggle { flex-wrap: nowrap; margin-bottom: 10px; }
    .correction-toggle small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: var(--text-muted); }
}
@media screen {
    :root {
        --accent: #007aff;
        --accent-dark: #0062cc;
        --text: #1d1d1f;
        --text-muted: #6e6e73;
        --border: rgba(60, 60, 67, .12);
        --border-strong: rgba(60, 60, 67, .2);
    }
    body {
        padding: 16px;
        background: radial-gradient(ellipse at 10% 0%, #e0eaff, transparent 55%),
            radial-gradient(ellipse at 95% 100%, #e6e4f4, transparent 60%), #f2f3f7;
    }
    .app-shell { max-width: 1640px; }
    .hero {
        display: flex;
        align-items: baseline;
        text-align: left;
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 0 6px;
        margin-bottom: 14px;
    }
    .hero .eyebrow { display: none; }
    .hero h1 { font-size: 24px; line-height: 1.4; letter-spacing: -.04em; margin: 0; }
    .hero p { font-size: 13px; margin: 0; max-width: none; }
    .workspace { grid-template-columns: 350px minmax(0, 1fr); gap: 14px; }
    .control-panel, .preview-wrap {
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, .9);
        background: rgba(255, 255, 255, .72);
        box-shadow: 0 8px 32px rgba(31, 38, 60, .07), 0 1px 3px rgba(31, 38, 60, .04);
        backdrop-filter: blur(24px) saturate(140%);
    }
    .control-panel { padding: 12px; }
    .preview-wrap { padding: 12px; }
    .panel-chrome {
        margin: 0 0 12px;
        padding: 5px 4px 12px;
        gap: 12px;
    }
    .traffic-dot { width: 10px; height: 10px; }
    .traffic-lights { gap: 6px; }
    .chrome-title { font-size: 12px; font-weight: 600; }
    .control-title { font-size: 18px; margin-bottom: 5px; }
    .control-sub { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
    .control-scroll { padding-right: 5px; scrollbar-width: thin; }
    .settings-disclosure { margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.65); }
    .settings-disclosure summary { font-size: 12px; }
    .settings-section-title { padding-top: 10px; margin: 14px 0 10px; font-size: 13px; }
    .settings-disclosure > .settings-section-title { border: 0; padding: 0; margin: 0 0 8px; }
    .input-group { margin-bottom: 10px; }
    .input-group > label, .network-header > label:first-child {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: normal;
        text-transform: none;
    }
    .input-group > label, .network-header { margin-bottom: 5px; }
    .control-scroll input[type='text'], .control-scroll input[type='password'], .control-scroll textarea {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
        font-size: 13px;
        padding: 9px 11px;
        border-radius: 10px;
        background: rgba(255,255,255,.9);
        border: 1px solid var(--border);
        box-shadow: 0 1px 2px rgba(0,0,0,.02);
    }
    .control-scroll input:focus, .control-scroll textarea:focus {
        border-color: var(--accent);
        outline: 3px solid rgba(0,122,255,.12);
        outline-offset: 0;
    }
    .band-steering-group {
        padding: 10px;
        border-radius: 12px;
        background: rgba(0,122,255,.045);
        margin: 4px 0 12px;
    }
    .band-steering-desc { font-size: 11px; }
    .password-mode-toggle { gap: 2px; padding: 3px; border-radius: 10px; background: rgba(118,118,128,.1); }
    .mode-option span { font-size: 12px; padding: 7px 8px; border-radius: 8px; background: transparent; }
    .mode-option input:checked + span { background: #fff; box-shadow: 0 1px 4px #00000016; }
    .quick-preview { gap: 6px; margin: 0; }
    .quick-chip { border-radius: 9px; padding: 8px; box-shadow: none; background: #f5f5f7; }
    .quick-chip strong { font-size: 10px; letter-spacing: normal; }
    .quick-chip span { font-size: 12px; margin-top: 3px; }
    .control-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        padding-top: 10px;
    }
    .control-actions .btn-generate, .control-actions .btn-print {
        padding: 11px 6px;
        border-radius: 11px;
        margin: 0;
        font-size: 12px;
        box-shadow: 0 2px 6px rgba(0,122,255,.12);
    }
    .control-actions .btn-generate { background: #e8f1ff; color: #0062cc; box-shadow: none; }
    .control-actions .btn-print { background: #007aff; }
    .control-actions .btn-clear-memory {
        grid-column: 1 / -1;
        padding: 5px;
        margin: 0;
        font-size: 11px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .control-actions .security-note { grid-column: 1 / -1; font-size: 10px; line-height: 1.5; margin: 0; }
    .preview-wrap > .preview-note { padding: 0 4px; margin-bottom: 10px; gap: 10px; }
    .preview-wrap > .preview-note strong { font-size: 14px; }
    .preview-wrap > .preview-note span { font-size: 12px; }
    .print-options { border-radius: 14px; padding: 12px; margin-bottom: 12px; }
    .print-options .preview-note { margin-bottom: 8px; align-items: center; }
    .print-options .preview-note > span { font-size: 12px; }
    .print-layout-toggle { padding: 3px; gap: 2px; }
    .print-layout-toggle span { font-size: 11px; padding: 6px 10px; }
    .print-option-help { font-size: 11px; margin-bottom: 10px; }
    .print-summary { font-size: 12px; padding-top: 9px; }
    .print-summary ol { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 5px 0 0; }
    .preview-stage { border-radius: 12px; background: #e9ecf2; border: 1px solid #dfe3eb; box-shadow: inset 0 1px 4px #00000005; }
    .print-page { border-radius: 2px; }
    .print-options .print-layout-toggle { max-width: 100%; }
    .preview-wrap {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .preview-wrap > .panel-chrome,
    .preview-wrap > .preview-note { flex-shrink: 0; }
    .preview-wrap > .print-options {
        flex-shrink: 0;
        max-height: 38dvh;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .preview-scroll {
        flex: 1;
        min-height: 0;
        overflow: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        border: 1px solid #dfe3eb;
        border-radius: 12px;
        background: #e9ecf2;
    }
    .preview-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .preview-scroll .preview-stage {
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
@media screen and (min-width: 1181px) {
    .app-shell { height: calc(100dvh - 32px); }
    .control-panel > .panel-chrome { padding: 5px 4px 12px; margin-bottom: 10px; }
    .preview-wrap { overflow: hidden; }
}
@media screen and (min-width: 1600px) {
    .workspace { grid-template-columns: 380px minmax(0, 1fr); }
}
@media screen and (max-width: 1180px) {
    .workspace { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
    .control-panel { position: sticky; top: 16px; max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; }
    .control-scroll { min-height: 0; overflow-y: auto; }
    .control-panel > .panel-chrome, .control-actions { flex-shrink: 0; }
    .print-options .preview-note { flex-direction: column; align-items: flex-start; }
    .preview-wrap { height: calc(100dvh - 32px); position: sticky; top: 16px; }
}
@media screen and (max-width: 760px) {
    body { padding: 12px; }
    .hero { gap: 2px; margin-bottom: 12px; }
    .hero h1 { font-size: 21px; }
    .hero p { width: 100%; font-size: 12px; }
    .workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .control-panel { position: static; max-height: none; }
    .control-scroll { overflow: visible; }
    .control-panel, .preview-wrap { border-radius: 16px; }
    .preview-wrap { height: auto; position: static; }
    .preview-scroll { flex: none; max-height: 75dvh; }
    .preview-wrap > .print-options { max-height: none; overflow: visible; }
    .preview-wrap > .preview-note { align-items: flex-start; }
    .password-mode-toggle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quick-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
    .preview-scroll { display: contents; }
}

/* Natural page flow: one page scrollbar, three desktop columns. */
@media screen {
    .app-shell { height: auto; display: block; max-width: 1920px; }
    .workspace { height: auto; min-height: 0; align-items: start; }
    .control-panel, .preview-wrap, .print-settings-panel {
        position: static;
        height: auto;
        max-height: none;
        overflow: visible;
        min-width: 0;
    }
    .control-panel { display: block; }
    .control-scroll { overflow: visible; padding-right: 0; scrollbar-gutter: auto; }
    .preview-scroll {
        flex: none;
        min-height: 0;
        max-height: none;
        overflow: hidden;
        scrollbar-gutter: auto;
        overscroll-behavior: auto;
    }
    .print-settings-panel {
        padding: 12px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,.9);
        background: rgba(255,255,255,.72);
        box-shadow: 0 8px 32px rgba(31,38,60,.07);
        backdrop-filter: blur(24px) saturate(140%);
    }
    .print-settings-panel .print-options { padding: 0; border: 0; background: transparent; }
    .print-settings-panel .preview-note { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
    .print-settings-panel .print-layout-toggle { display: flex; width: 100%; flex-wrap: wrap; border-radius: 14px; }
    .print-settings-panel .print-layout-toggle label { flex: 1; }
    .print-settings-panel .print-layout-toggle span { padding: 8px 6px; border-radius: 11px; }
    .print-settings-panel .print-summary ol { display: block; }
    .print-settings-panel .btn-print { font-size: 13px; padding: 12px; border-radius: 12px; }
    .control-actions .btn-generate { grid-column: 1 / -1; }
}
@media screen and (min-width: 1181px) {
    .workspace { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) 290px; }
}
@media screen and (min-width: 1600px) {
    .workspace { grid-template-columns: 350px minmax(0, 1fr) 320px; }
}
@media screen and (min-width: 761px) and (max-width: 1180px) {
    .workspace { grid-template-columns: 310px minmax(0, 1fr); }
    .control-panel { grid-column: 1; grid-row: 1; }
    .print-settings-panel { grid-column: 1; grid-row: 2; }
    .preview-wrap { grid-column: 2; grid-row: 1 / span 2; }
}
@media screen and (max-width: 760px) {
    .control-panel { order: 0; }
    .print-settings-panel { order: 1; }
    .preview-wrap { order: 2; }
}
@media print {
    .print-settings-panel { display: none !important; }
}
@media screen {
    .print-switch-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }
    .print-switch-row > label:first-child { font-size: 12px; font-weight: 500; cursor: pointer; }
    .print-switch-row.is-unavailable { opacity: .45; }
    .print-switch-row input:focus-visible + .switch-track { outline: 3px solid rgba(0,122,255,.4); outline-offset: 3px; }
    .print-switch-row input:disabled + .switch-track { cursor: default; }
    .print-switch-row + .print-option-help { margin-top: 10px; }
}

@media screen {
    .correction-list {
        margin-bottom: 12px;
        border: 1px solid rgba(60,60,67,.12);
        border-radius: 13px;
        overflow: hidden;
        background: rgba(255,255,255,.8);
    }
    .correction-list label { display: block; position: relative; cursor: pointer; }
    .correction-list label + label { border-top: 1px solid rgba(60,60,67,.08); }
    .correction-list input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .correction-list label > span { display: flex; align-items: center; gap: 11px; padding: 10px 12px; transition: background .15s ease; }
    .correction-list b { width: 26px; text-align: center; font-size: 13px; font-weight: 600; color: #6e6e73; }
    .correction-list label > span > span { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex: 1; font-size: 12px; }
    .correction-list small { font-size: 11px; color: #86868b; }
    .correction-list i { width: 14px; color: #007aff; font-style: normal; font-size: 15px; font-weight: 600; }
    .correction-list input:checked + span { background: rgba(0,122,255,.045); }
    .correction-list input:checked + span b { color: #007aff; }
    .correction-list input:checked + span i::after { content: '✓'; }
    .correction-list label:hover > span { background: rgba(0,0,0,.025); }
    .correction-list input:focus-visible + span { outline: 2px solid #007aff; outline-offset: -2px; }
}
@media screen {
    #pngDownloads { display: grid; gap: 6px; }
    .png-download { width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: #0062cc; font: inherit; font-size: 12px; cursor: pointer; }
    .png-download:disabled { opacity: .45; cursor: default; }
    .png-download:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; }
    #pngStatus { margin-top: 8px; }
}
@media screen {
    #installApp { margin-left: auto; padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.75); color: var(--accent-dark); font: inherit; font-size: 12px; cursor: pointer; }
    #installApp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media print { #installApp { display: none; } }

@media screen {
    .hero .language-picker { position: relative; margin-left: auto; z-index: 20; flex-shrink: 0; align-self: center; }
    .language-picker summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(60,60,67,.14); border-radius: 999px; background: rgba(255,255,255,.8); color: #3a3a3c; font-size: 12px; font-weight: 500; cursor: pointer; box-shadow: 0 1px 3px #00000005; list-style: none; }
    .language-picker summary::-webkit-details-marker { display: none; }
    .language-picker summary { line-height: 20px; }
    .language-picker summary > svg { display: block; flex-shrink: 0; }
    .language-chevron { color: #636366; margin-left: 4px; transition: transform 160ms ease; }
    .language-picker[open] .language-chevron { transform: rotate(180deg); }
    .language-picker[open] summary { background: #fff; border-color: rgba(0,122,255,.3); }
    .language-menu { position: absolute; top: calc(100% + 8px); right: 0; width: 218px; max-width: calc(100vw - 32px); padding: 6px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(250,250,252,.96); backdrop-filter: blur(24px); box-shadow: 0 12px 40px #1d263329, 0 0 0 1px #00000008; }
    .language-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 9px; background: transparent; color: #3a3a3c; padding: 10px 12px; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
    .language-menu button[aria-checked='true'] { color: #007aff; background: #e8f1ff; font-weight: 600; }
    .language-menu button[aria-checked='true']::after { content: '✓'; font-weight: 600; }
    .language-menu button:hover { background: #e9e9ef; }
    .language-menu button:focus-visible, .language-picker summary:focus-visible { outline: 2px solid #007aff; outline-offset: 1px; }
    #installApp { margin-left: 0; }
}
@media print { .language-picker { display: none !important; } }
@media screen and (max-width: 760px) {
    .hero .language-picker { margin-left: auto; margin-top: 6px; }
    .language-picker summary { min-height: 40px; }
    .language-menu button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .language-picker * { transition: none; } }

@media screen {
    .hero .language-picker,
    .hero #installApp { align-self: center; margin-top: 0; }
    .hero .language-picker summary,
    .hero #installApp {
        box-sizing: border-box;
        height: 40px;
        min-height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
    }
    .hero #installApp:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; }
}

/* Saved WiFi: a compact entry point and a dedicated center workspace. */
@media screen {
    .profile-library { margin-bottom: 18px; padding: 12px; border: 1px solid rgba(0,122,255,.12); border-radius: 14px; background: linear-gradient(135deg,#f0f6ff,#f8faff); }
    .profile-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .profile-heading h2 { font-size:14px; font-weight:650; }
    .profile-heading > span { font-size:11px; color:#6e6e73; }
    .profile-help { color:#6e6e73; font-size:12px; line-height:1.6; margin:8px 0 12px; }
    .profile-library button, .profiles-manager button, .app-dialog button {
        appearance:none; border:1px solid #dcdfe5; border-radius:10px; background:#fff; color:#3a3a3c; padding:10px 14px; font:inherit; font-size:12px; font-weight:550; line-height:1.4; cursor:pointer; box-shadow:0 1px 2px #00000004;
    }
    .profile-library button:hover, .profiles-manager button:hover, .app-dialog button:hover { background:#edf3fc; }
    .profile-library .profile-save, #managerSaveProfile, .app-dialog #confirmProfile { background:#007aff; border-color:transparent; color:white; }
    .profile-library .profile-save:hover, #managerSaveProfile:hover, .app-dialog #confirmProfile:hover { background:#0067dd; }
    .profile-library .profile-save, .profile-library .profile-manage { width:100%; margin-top:6px; }
    .profile-library .profile-manage { color:#0062cc; border-color:#cbdcf6; background:#fff; }
    .profile-feedback p { font-size:11px; color:#3a3a3c; margin-top:8px; overflow-wrap:anywhere; }
    .profile-feedback p:empty { display:none; }
    #undoProfileLoad { margin-top:6px; padding:5px 0; color:#0062cc; border:0; background:transparent; box-shadow:none; font-size:11px; }
    .profiles-manager { padding:16px; border:1px solid #ffffffed; border-radius:20px; background:rgba(255,255,255,.76); box-shadow:0 8px 32px #1f263c12; backdrop-filter:blur(24px); min-width:0; container-type:inline-size; }
    .profiles-manager[hidden], #printWorkspace[hidden] { display:none !important; }
    .manager-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:18px 0 10px; }
    .manager-heading h2 { font-size:23px; letter-spacing:-.03em; line-height:1.3; }
    .manager-heading > button { flex-shrink:0; color:#0062cc; background:#f1f6ff; border-color:#dce7f8; }
    .profile-warning { display:flex; gap:12px; padding:14px; border:1px solid #ebd7aa; border-radius:13px; background:#fff9ed; color:#805510; margin-bottom:16px; }
    .profile-warning svg { flex-shrink:0; margin-top:1px; }
    .profile-warning strong { font-size:13px; line-height:1.5; }
    .profile-warning p { font-size:12px; line-height:1.7; margin-top:4px; }
    .manager-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
    .profiles-manager button:disabled { opacity:.45; cursor:default; }
    .profile-search-label { display:block; font-size:12px; font-weight:600; margin-bottom:6px; }
    #profileSearch, #profileName { box-sizing:border-box; width:100%; appearance:none; border:1px solid #dcdfe5; border-radius:11px; background:#f6f7fa; color:#1d1d1f; padding:12px 14px; font:inherit; font-size:14px; }
    #profileSearch::-webkit-search-cancel-button { cursor:pointer; }
    .profile-library button:focus-visible, .profiles-manager button:focus-visible, .app-dialog button:focus-visible, #profileSearch:focus-visible, #profileName:focus-visible { outline:3px solid #007aff44; outline-offset:2px; border-color:#007aff; }
    .profile-privacy { font-size:11px; }
    .profile-list { display:grid; gap:12px; padding-top:4px; }
    .profile-card { position:relative; min-width:0; padding:18px; border:1px solid #e0e3e9; border-radius:16px; background:#fff; box-shadow:0 2px 6px #1f263c05; }
    .profile-card.is-active { border-color:#91bbfb; box-shadow:0 0 0 1px #007aff0d; }
    .profile-card h3 { font-size:17px; line-height:1.4; margin-bottom:6px; overflow-wrap:anywhere; }
    .profile-card > p { font-size:12px; line-height:1.6; color:#6e6e73; overflow-wrap:anywhere; }
    .profile-card .profile-stamp { font-size:11px; margin-top:4px; color:#8e8e93; }
    .profile-badge { display:inline-block; margin-bottom:10px; border-radius:6px; background:#edf4ff; color:#0062cc; font-size:10px; padding:3px 7px; }
    .profile-card-actions { display:flex; align-items:center; gap:8px; margin-top:16px; }
    .profile-card-actions button:first-child { flex:1; background:#edf4ff; color:#0062cc; border-color:transparent; }
    .profile-card-actions .profile-delete { color:#b23434; background:transparent; border:0; box-shadow:none; }
    .profile-empty { border:1px dashed #d5dbe5; border-radius:16px; padding:40px 24px; text-align:center; font-size:13px; line-height:1.8; color:#6e6e73; }
    .app-dialog { margin:auto; padding:26px; width:min(440px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #ffffffcc; border-radius:22px; background:#fafafc; color:#1d1d1f; box-shadow:0 24px 100px #17253e4d; }
    .app-dialog::backdrop { background:#17203350; backdrop-filter:blur(6px); }
    .app-dialog h2 { font-size:22px; letter-spacing:-.03em; margin-bottom:22px; }
    .app-dialog label { display:block; font-size:12px; font-weight:600; margin-bottom:7px; }
    .app-dialog #profileName { background:#fff; }
    .profile-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
    .profile-dialog-actions button { min-width:90px; }
    .profile-field-error { color:#bc3030; font-size:12px; margin-top:6px; }
    .profile-field-error:empty { display:none; }
    #profileName[aria-invalid='true'] { border-color:#bc3030; }
    .workspace.is-managing .profiles-manager { grid-column:2; }
}
@container (min-width:620px) { .profile-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .profile-empty { grid-column:1 / -1; } }
@media screen and (min-width:761px) and (max-width:1180px) { .workspace .profiles-manager { grid-column:2; grid-row:1 / span 2; } }
@media screen and (max-width:760px) {
    .workspace.is-managing .profiles-manager { grid-column:1; order:1; }
    .workspace.is-managing .print-settings-panel { order:2; }
    .manager-heading { flex-direction:column; gap:4px; }
    .manager-heading h2 { font-size:21px; }
    .manager-toolbar button { flex:1 1 auto; }
    .profile-card-actions button, .profile-library button { min-height:42px; }
}
@media print { .profile-library, .profiles-manager, .app-dialog { display:none !important; } #printWorkspace[hidden] { display:block !important; } }
@media screen {
    #managerTitle:focus { outline:none; }
    .profile-card { display:flex; flex-direction:column; }
    .profile-badge { align-self:flex-start; min-height:20px; }
    .profile-badge.is-placeholder { visibility:hidden; }
    .profile-card-actions { margin-top:auto; padding-top:16px; }
}
@media screen {
    .app-dialog #confirmClearMemory { background:#c43b3b; color:#fff; border-color:transparent; }
    .app-dialog #confirmClearMemory:hover { background:#ad3030; }
}

/* Numbers-inspired grouped table and a matching record inspector. */
@media screen {
    .profile-table-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0 8px; font-size:12px; color:#6e6e73; }
    .profile-table-tools button { padding:6px 10px; font-size:11px; }
    .profile-table-tools button[aria-checked='true'] { color:#007aff; background:#edf4ff; border-color:#bbd6ff; }
    .profile-table-container { overflow-x:auto; border:1px solid #dce1e8; border-radius:12px; background:#fff; scrollbar-width:thin; }
    .profile-table { border-collapse:separate; border-spacing:0; width:100%; min-width:850px; font-size:12px; table-layout:fixed; }
    .profile-table th, .profile-table td { padding:12px; border-right:1px solid #e6e9ee; border-bottom:1px solid #e6e9ee; vertical-align:middle; text-align:left; overflow-wrap:anywhere; }
    .profile-table thead th { background:#f0f2f6; color:#6e6e73; font-size:11px; font-weight:600; height:42px; }
    .profile-table thead th:nth-child(1) { width:150px; }
    .profile-table thead th:nth-child(2) { width:110px; }
    .profile-table thead th:nth-child(3) { width:170px; }
    .profile-table thead th:nth-child(4) { width:160px; }
    .profile-table thead th:nth-child(5) { width:130px; }
    .profile-table thead th:nth-child(6) { width:140px; }
    .profile-table th:last-child, .profile-table td:last-child { border-right:0; }
    .profile-table thead button { border:0; padding:0; box-shadow:none; background:transparent; font-size:11px; text-align:left; width:100%; }
    .profile-table tbody { cursor:pointer; }
    .profile-table tbody:nth-child(odd) { background:#fafbfd; }
    .profile-table tbody:hover { background:#f0f6ff; }
    .profile-table tbody.is-selected { background:#eaf3ff; }
    .profile-table tbody.is-selected > tr > th { box-shadow:inset 3px 0 #007aff; }
    .profile-table tr:focus-visible { outline:2px solid #007aff; outline-offset:-2px; }
    .profile-table-name { display:block; color:#1d1d1f; font-size:13px; font-weight:600; }
    .profile-table .profile-badge { display:inline-block; margin:6px 0 0; min-height:0; }
    .profile-band { display:inline-block; padding:3px 7px; border-radius:6px; background:#edf0f6; color:#526078; font-size:10px; }
    .profile-cell-ssid, .profile-cell-password, .inspector-password { font-family:'JetBrains Mono','Noto Sans TC',monospace; font-feature-settings:'zero' 1,'liga' 0; }
    .profile-cell-date { color:#8e8e93; font-size:10px; }
    .profile-table-actions button { display:block; width:100%; padding:7px; font-size:11px; border:0; box-shadow:none; background:#e6f0ff; color:#0062cc; }
    .profile-table-actions .profile-delete { background:transparent; color:#a43b3b; margin-top:4px; }
    .profile-inspector { min-width:0; padding:14px; border:1px solid #ffffffed; border-radius:20px; background:rgba(255,255,255,.8); box-shadow:0 8px 32px #1f263c12; backdrop-filter:blur(24px); }
    .profile-inspector[hidden] { display:none !important; }
    .workspace.is-managing .print-settings-panel { display:none; }
    #profileInspectorBody > h2 { margin:16px 0; font-size:20px; overflow-wrap:anywhere; }
    .profile-inspector button { appearance:none; border:1px solid #dce1e8; border-radius:10px; padding:9px 12px; font:inherit; font-size:12px; cursor:pointer; }
    .profile-inspector .inspector-load { width:100%; background:#007aff; color:#fff; border-color:transparent; }
    .profile-inspector .inspector-reveal { width:100%; background:#fff; color:#0062cc; margin-top:7px; }
    .inspector-section { padding:14px 0; border-bottom:1px solid #e1e5ec; }
    .inspector-section:last-child { border-bottom:0; }
    .inspector-section h3 { font-size:12px; margin-bottom:10px; color:#343944; }
    .inspector-section dl { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:9px 12px; font-size:11px; line-height:1.6; }
    .inspector-section dt { color:#8e8e93; }
    .inspector-section dd { margin:0; color:#343944; overflow-wrap:anywhere; white-space:pre-wrap; }
    .profile-inspector button:focus-visible { outline:2px solid #007aff; outline-offset:2px; }
}
@media screen and (min-width:761px) and (max-width:1180px) { .workspace.is-managing .profile-inspector { grid-column:1; grid-row:2; } }
@media screen and (max-width:760px) { .workspace.is-managing .profile-inspector { grid-column:1; order:2; } }
@media print { .profile-inspector { display:none !important; } }
@media screen {
    .worksheet-dialog { width:min(620px,calc(100vw - 32px)); }
    #worksheetFilename { overflow-wrap:anywhere; color:#1d1d1f; }
    .worksheet-options { display:grid; gap:8px; margin:16px 0; }
    .worksheet-option { display:flex !important; align-items:center; gap:10px; padding:12px 14px; border:1px solid #dce1e8; border-radius:11px; background:#fff; cursor:pointer; font-size:13px !important; }
    .worksheet-option input { position:absolute; width:1px; height:1px; opacity:0; }
    .worksheet-radio { box-sizing:border-box; display:block; width:18px; height:18px; border:1.5px solid #c2c7cf; border-radius:50%; flex-shrink:0; }
    .worksheet-option:has(input:checked) { background:#edf5ff; border-color:#8ebeff; }
    .worksheet-option input:checked + .worksheet-radio { border:5px solid #007aff; }
    .worksheet-option:has(input:focus-visible) { outline:2px solid #007aff; outline-offset:2px; }
    .worksheet-preview-table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:11px; background:#fff; }
    .worksheet-preview-table th, .worksheet-preview-table td { padding:9px; border:1px solid #e1e5ec; text-align:left; overflow-wrap:anywhere; }
    .worksheet-preview-table th { background:#f1f3f7; color:#6e6e73; }
    #confirmWorksheet { background:#007aff; color:#fff; border-color:transparent; }
    #confirmWorksheet:disabled { opacity:.4; cursor:default; }
}
@media screen {
    .profile-entry-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
    .profile-entry-actions .profile-save, .profile-entry-actions .profile-manage { width:100%; margin:0; min-height:40px; height:100%; display:flex; align-items:center; justify-content:center; padding:10px 8px; }
    .internal-note-field { padding:10px; border:1px solid #e0e5ec; border-radius:12px; background:#f7f8fb; }
    .internal-note-field .profile-help { font-size:10px; margin:6px 0 0; }
}

@media screen {
    .app-brand { display:flex; align-items:center; gap:10px; min-width:0; }
    .app-brand img { display:block; width:36px; height:36px; object-fit:contain; flex-shrink:0; }
}
@media screen and (max-width:760px) {
    .app-brand { gap:7px; flex:1 1 auto; }
    .app-brand img { width:30px; height:30px; }
    .hero .app-brand h1 { font-size:18px; line-height:1.3; }
    .mobile-simple .hero > p { display:none; }
    .mobile-simple .hero { align-items:center; gap:8px; }
    .mobile-simple .hero .language-picker { margin:0 0 0 auto; }
    .mobile-simple .control-panel .panel-chrome, .mobile-simple .print-settings-panel > .panel-chrome { display:none; }
    .mobile-simple .control-title { font-size:20px; margin-bottom:8px; }
    .mobile-simple .control-sub { margin-bottom:16px; }
    .mobile-simple .control-scroll > .settings-section-title { display:none; }
    .mobile-simple .control-scroll input[type='text'], .mobile-simple .control-scroll input[type='password'], .mobile-simple .control-scroll textarea { font-size:16px; min-height:44px; }
    .mobile-simple .control-scroll > .input-group { margin-bottom:16px; }
    .mobile-simple .control-actions { margin-top:12px; }
    .mobile-simple .control-actions .security-note { display:none; }
    .mobile-advanced-settings, .mobile-print-options { border:1px solid #e0e5ed; border-radius:12px; background:#f7f9fc; padding:12px; margin-top:10px; }
    .mobile-advanced-settings > summary, .mobile-print-options > summary, .mobile-preview-details > summary { font-size:13px; font-weight:600; color:#4c5970; cursor:pointer; padding:4px 0; }
    .mobile-advanced-settings[open] > summary, .mobile-print-options[open] > summary { margin-bottom:14px; }
    .mobile-simple .print-settings-panel .btn-print { margin:14px 0 0; font-size:15px; padding:13px; }
    .mobile-simple .png-download { min-height:46px; font-size:14px; }
    .mobile-simple .print-settings-panel .settings-section-title { margin-top:16px; font-size:15px; }
    .mobile-simple .print-options { margin:0; }
    .mobile-preview-details { order:2; min-width:0; }
    .mobile-preview-details > summary { padding:14px; border-radius:12px; border:1px solid #e0e5ed; background:#fff; }
    .mobile-preview-details[open] > summary { margin-bottom:10px; }
    .mobile-preview-details[hidden] { display:none !important; }
}
@media print { .mobile-preview-details > summary { display:none; } }
@media screen {
    .settings-disclosure > summary,
    .mobile-advanced-settings > summary,
    .mobile-print-options > summary,
    .mobile-preview-details > summary { display:flex; align-items:center; gap:10px; list-style:none; }
    .settings-disclosure > summary::-webkit-details-marker,
    .mobile-advanced-settings > summary::-webkit-details-marker,
    .mobile-print-options > summary::-webkit-details-marker,
    .mobile-preview-details > summary::-webkit-details-marker { display:none; }
    .settings-disclosure > summary::after,
    .mobile-advanced-settings > summary::after,
    .mobile-print-options > summary::after,
    .mobile-preview-details > summary::after { content:''; width:7px; height:7px; margin-left:auto; margin-right:3px; flex-shrink:0; border-right:1.7px solid #6e7788; border-bottom:1.7px solid #6e7788; transform:rotate(45deg); }
    .settings-disclosure[open] > summary::after,
    .mobile-advanced-settings[open] > summary::after,
    .mobile-print-options[open] > summary::after,
    .mobile-preview-details[open] > summary::after { transform:rotate(225deg); }
}
@media screen {
    .network-download-item { padding:11px; border:1px solid #e1e5ed; border-radius:12px; background:#ffffffb3; }
    .network-download-item > strong { display:block; font-size:12px; }
    .network-download-name { display:block; margin:3px 0 9px; color:#6e6e73; font-size:11px; overflow-wrap:anywhere; }
    .network-download-formats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
    .network-download-formats .png-download { padding:9px 5px; font-size:11px; }
    .network-download-formats .png-download[data-format='png'] { color:#0062cc; background:#edf4ff; border-color:#d3e4fc; }
    .mobile-vector-option { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid #dfe4ec; margin-top:12px; padding-top:12px; }
    .mobile-vector-option > label:first-child { font-size:12px; color:#4c5970; cursor:pointer; }
}
@media screen and (max-width:760px) {
    .mobile-simple .network-download-formats .png-download { font-size:14px; }
}
@media screen {
    .network-download-formats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    /* SVG/EPS stay behind the "show vector downloads" switch on every screen size. */
    body:not(.show-vectors) .png-download[data-format='svg'],
    body:not(.show-vectors) .png-download[data-format='eps'],
    body:not(.show-vectors) .vector-download-help { display:none; }
    .vector-toggle-row { margin-bottom:10px; }
}
/* iOS-style tab bar: edge-to-edge material, tint-only selection, safe-area inset. */
.mobile-function-bar { display:none; }
@media screen and (max-width:760px) {
    body { padding-bottom:calc(94px + env(safe-area-inset-bottom,0px)); }
    .control-panel, .print-settings-panel, #printWorkspace { scroll-margin-top:12px; }
    .mobile-function-bar {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        position:fixed;
        z-index:50;
        left:0;
        right:0;
        bottom:0;
        transform:none;
        width:100%;
        max-width:none;
        padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px));
        border:0;
        border-top:1px solid rgba(60,60,67,.16);
        border-radius:0;
        background:rgba(248,249,252,.92);
        backdrop-filter:blur(28px) saturate(175%);
        box-shadow:0 -2px 12px rgba(30,40,60,.035);
    }
    .mobile-function-bar button,
    .mobile-function-bar #mobileToggleFull,
    .mobile-function-bar #mobileToggleFull[aria-pressed='true'] {
        appearance:none;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        border:0;
        line-height:1.3;
        cursor:pointer;
        min-height:49px;
        padding:3px 2px;
        gap:4px;
        border-radius:0;
        background:transparent;
        color:#8a8a8e;
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
        font-size:10px;
        font-weight:500;
        letter-spacing:0;
    }
    .mobile-function-bar button.is-active { background:transparent; color:#007aff; }
    .mobile-function-bar button svg { display:block; flex-shrink:0; width:23px; height:23px; stroke-width:1.7; }
    .mobile-function-bar button:active { opacity:.55; }
    .mobile-function-bar button:focus-visible { outline:2px solid #007aff; outline-offset:-2px; border-radius:8px; }
}

@media print { .mobile-function-bar { display:none !important; } }
@media screen {
    #imageSharePreview { display:block; width:auto; height:auto; max-width:100%; max-height:42dvh; margin:0 auto 12px; border-radius:14px; }
    #imageShareFilename { overflow-wrap:anywhere; }
    .image-share-actions { display:grid; gap:8px; }
    .image-share-actions #sharePreparedImage { color:#fff; background:#007aff; border-color:transparent; }
    .image-share-actions #downloadPreparedImage { color:#0062cc; background:#edf4ff; }
}
@media screen and (max-width:760px) {
    body[data-platform='ios'], body[data-platform='android'] { -webkit-tap-highlight-color:transparent; }
    body { padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px)); }
    .mobile-function-bar { padding-left:max(12px,env(safe-area-inset-left,0px)); padding-right:max(12px,env(safe-area-inset-right,0px)); }
    body[data-platform='android'] .mobile-function-bar button { position:relative; }
    body[data-platform='android'] .mobile-function-bar button.is-active::before { content:''; position:absolute; top:1px; left:50%; transform:translateX(-50%); width:52px; height:27px; border-radius:16px; background:#dceaff; pointer-events:none; }
    body[data-platform='android'] .mobile-function-bar button svg { position:relative; }
    .mobile-keyboard-open .mobile-function-bar { display:none; }
    .mobile-keyboard-open { padding-bottom:20px; }
    .network-header .network-switch { min-height:40px; min-width:44px; display:grid; place-items:center; }
}
@media screen and (max-width:760px) {
    body[data-platform='ios'] .network-header .network-switch { min-height:44px; }
    body[data-platform='android'] .network-header .network-switch { min-height:48px; }
    body[data-platform='ios'] .app-dialog button { min-height:44px; }
    body[data-platform='android'] .app-dialog button { min-height:48px; }
}

/* Form feedback, grouped network passwords and secondary sections. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media screen {
    .form-status { grid-column:1 / -1; margin:8px 0 0; padding:9px 11px; border-radius:10px; background:#fdecec; color:#a32626; font-size:12px; line-height:1.5; }
    .form-status[hidden] { display:none; }
    .field-warning { margin:6px 0 0; color:#8a5a00; font-size:11px; line-height:1.5; }
    .field-warning[hidden] { display:none; }
    .network-block .network-password { margin:-2px 0 12px 4px; padding-left:10px; border-left:2px solid rgba(0,122,255,.18); }
    #net5Group .network-password { margin:-2px 0 12px 4px; padding-left:10px; border-left:2px solid rgba(0,122,255,.18); }
    .guest-block { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); }
    .control-scroll > .profile-library { margin:18px 0 0; }
}
@media print { .form-status, .field-warning { display:none !important; } }