/* Shared NearDrop visual system. Loaded by both the workspace and sign-in page. */
:root {
  --bg: #f7f6f2;
  --surface: #fff;
  --sidebar: #f0efea;
  --ink: #283326;
  --muted: #687260;
  --line: #e4e3dc;
  --accent: #34432d;
  --accent-dark: #263422;
  --accent-soft: #e6edda;
  --green: #617d48;
  --graphite: #242925;
  --lime: #d5eb98;
  --radius: 14px;
}
body { background: var(--bg); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline-color: #819d5f; }
::selection { background: #d9e8bb; color: #263422; }
.primary, .sidebar-upload { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.primary:hover, .sidebar-upload:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.button { border-color: #dce0d4; color: #405136; }
.button:hover, .icon-button:hover { background: #edf2e5; color: #344b29; }
.text-button, .library-actions .text-button { color: #627157; }
.icon-button { color: #748168; }
.sidebar { background: var(--sidebar); }
.brand-mark { background: var(--accent); color: #edf4e0; box-shadow: none; }
.brand-en, .workspace-label, .nav-label, .profile small { color: #76816c; }
.nav-item { color: #606c58; display: flex; align-items: center; }
.nav-item:hover { background: #e8ecdf; }
.nav-item.active { background: #e2ead6; color: #354b29; }
.nav-count { background: #e3e7dc; color: #637357; }
.nav-item.active .nav-count { background: #d2dfbe; color: #3b532d; }
.nav-divider, .profile { border-color: #dce0d3; }
.nav-divider { background: #dce0d3; }
.local-card { background: #f8faf3; border-color: #dce3d1; }
.local-card-head, .storage-caption, .local-card p { color: #738066; }
.local-card strong { color: #344b29; }
.local-card p { border-color: #e0e6d7; }
.avatar { background: #e2ead6; color: #48603a; }
.topbar { background: #f7f6f2f5; }
.topbar-title, .connection-state { color: #728067; }
.topbar-slash { color: #bbc4b1; }
.page-heading { position: relative; background: var(--graphite); border: 1px solid #323d2e; border-radius: 18px; padding: 27px 32px; margin-bottom: 24px; gap: 24px; color: #f5f3eb; }
.page-heading h1 { color: #f5f3eb; font-size: 30px; letter-spacing: -.035em; }
.page-heading .eyebrow { color: #bcc8af; letter-spacing: .19em; font-size: 10px; }
.page-heading p { color: #c0c5bd; line-height: 1.8; }
.heading-note { color: #b6c3aa; flex-shrink: 0; }
.heading-note .status-dot { background: var(--lime); }
.note-divider { color: #718363; }
.upload-zone { background: #eef2e6; border-color: #b9c8a6; }
.upload-copy h2 { color: #34462c; }
.upload-copy p, .section-kicker, .upload-destination, .intro-grid.compact .upload-destination { color: #748267; }
.art-orbit { border-color: #cdd7bf; }
.art-orbit:after { border-color: #bdcda9; }
.art-file { border-color: #dce3d1; box-shadow: 0 12px 24px #34432d12; }
.art-back { color: #9caf88; background: #f5f8ef; }
.art-front { color: #697f52; background: #fff; }
.art-arrow { border-color: #eef2e6; box-shadow: 0 8px 15px #34432d1a; }
.art-spark { color: #94a579; }
.art-dot { background: #aec294; }
.connect-card { border-color: var(--line); }
.connect-card p { color: #78836f; }
.device-symbol { background: #edf2e6; color: #748d5c; }
.connect-link { color: #60774d; }
.library-heading h2 span { color: #5e7150; background: #e6ebde; }
.filter-tabs button { color: #6d7a60; }
.filter-tabs button.active { color: #354b29; background: #e2ead6; }
.search-field, .view-switch { border-color: #dce0d4; border-radius: 8px; }
.search-field .icon, .sort-control, .sort-control select { color: #75816a; }
.search-field input::placeholder { color: #7e8975; }
.view-switch button.active { background: #e6edda; color: #425b32; }
.breadcrumb-row, .breadcrumb-row > span, .breadcrumb-row button { color: #75816a; }
.breadcrumb-row button:last-child { color: #3a4d30; }
.file-table { border-radius: 12px; }
.table-head { background: #eeefe8; color: #717e65; }
.file-row { border-bottom-color: #edf0e7; }
.file-row:hover { background: #fafbf7; }
.file-row.selected { background: #f0f5e6; }
.file-icon, .file-icon.folder { color: #7d9565; background: #eef2e6; }
.file-icon.video { color: #758966; background: #eaf0e1; }
.file-icon.document { color: #7b8e70; background: #eff3e9; }
.file-icon.image { color: #7d9d82; background: #eaf2e8; }
.file-icon.other { color: #8a8e78; background: #f1f1e9; }
.file-icon.pdf { color: #a16b59; background: #f5ede7; }
.name-text small, .file-size, .file-time { color: #74816b; }
.file-actions .icon-button:hover { background: #eaf0e1; color: #3f582f; }
.visibility { background: #f0f2eb; color: #718064; }
.visibility.shared { background: #eaf2df; color: #57763f; }
.grid-view { background: var(--bg); }
.grid-view .file-row.selected { border-color: #8da572; background: #f2f7e9; }
.grid-view .file-actions { border-color: #e7ebde; }
.empty-state { color: #7c8970; }
.empty-state > .icon { color: #9bb384; }
.empty-state h3 { color: #536449; }
.library-footer, .app-footer { color: #7c8872; }
.section-toolbar { margin: 0 0 20px; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.section-toolbar h2 { color: #374a2e; }
.transfer-overview { background: #eef3e6; border-color: #dce5ce; color: #738167; }
.transfer-overview strong { color: #3e5730; }
.transfer-row, .account-row { border-radius: 12px; }
.transfer-meta small, .transfer-state, .account-row small, .dock-summary small { color: #76836b; }
.progress-track { background: #e8eddf; }
.transfer-dock, .batch-bar { border-color: #dce3d1; box-shadow: 0 8px 32px #25312014; }
.drag-overlay { background: #f3f7ebf5; }
.drag-overlay p { color: #758668; }
.modal { background: #fdfdf9; box-shadow: 0 25px 100px #24292530; }
.modal::backdrop, .preview::backdrop { background: #18211570; }
.modal p, .modal .field, .connect-steps { color: #6b785f; }
.modal .eyebrow { color: #7d906d; }
.modal .field input, .modal .field select, .copy-link input { border-color: #dce3d1; color: #394b30; }
.modal-info, .menu-options button { background: #eff3e8; color: #66785a; }
.copy-link input { background: #f5f8ef; }
.preview:not(.cinema-preview) { background: var(--bg); }
.preview:not(.cinema-preview) header, .preview:not(.cinema-preview) footer { background: #f1f4e9; }
.preview header small, .preview-context > span { color: #78866e; }
.preview-stage pre { color: #4e6042; }
.toast { background: #293625; }
/* Red remains reserved for destructive actions and errors. */
.danger-text, .button.danger-text, .menu-options .danger-text { color: #b64e3d; }
.modal .form-error, .login-form .form-error { color: #b64e3d; }
.connection-guide { margin-top: 18px; padding: 14px 16px; border: 1px solid #dce3d1; border-radius: 10px; background: #f5f8ef; }
.connection-guide summary { cursor: pointer; color: #415a32; font-size: 12px; font-weight: 600; }
.connection-guide ol { padding-left: 18px; margin: 12px 0 0; color: #6b785f; font-size: 12px; line-height: 1.9; }
.connection-guide li + li { margin-top: 6px; }
.connection-guide a { text-decoration: underline; text-underline-offset: 3px; color: #3d5d29; }
/* Sign-in uses the same graphite, paper and lime palette as the video library. */
.login-page { background: var(--bg); }
.login-story { background: var(--graphite); color: #f5f3eb; }
.login-story .brand-mark { background: var(--lime); color: #34432d; }
.login-story .brand-en, .login-story .eyebrow { color: #b9c7aa; }
.login-story h1 { color: #f5f3eb; }
.login-story .accent { color: var(--lime); }
.login-story p, .login-story footer { color: #b6c2aa; }
.login-story .art-orbit, .login-story .art-orbit:after { border-color: #75866866; }
.login-story .art-arrow { background: var(--lime); color: #34432d; border-color: var(--graphite); }
.login-story .art-back { background: #35432f; color: #b7cc9a; border-color: #536749; }
.login-story .art-front { background: #e2eccf; color: #51683f; border-color: #c1d2a9; }
.login-form-area { background: var(--bg); }
.login-form .eyebrow { color: #7a8a6d; }
.login-form h2 { color: #2f4127; }
.login-form > p, .login-form .login-help, .login-secure { color: #77866a; }
.login-form .field { color: #536549; }
.login-form input { background: #fdfef9; border-color: #d7dfcc; color: #34432d; }
.login-form input:focus { border-color: #839d69; }
@media (max-width: 760px) {
  .page-heading { border-radius: 14px; padding: 23px; }
  .page-heading h1 { font-size: 26px; }
  .page-heading p { font-size: 12px; }
  .section-toolbar { padding: 17px; gap: 14px; }
  .transfer-controls { width: 100%; }
  .login-story { padding: 25px 28px; }
  .login-form-area { padding-top: 40px; }
}
/* Shared media uses the same cards as the owner's video library. */
.shared-media-view .file-table { background: transparent; border: 0; overflow: visible; }
.shared-media-view .media-grid { padding: 0; }
.preview-queue { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px; flex-shrink: 0; border-top: 1px solid var(--line); scrollbar-width: thin; }
.preview-queue button { flex-shrink: 0; justify-content: flex-start; max-width: 270px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-height: 40px; border: 1px solid #dce3d1; border-radius: 8px; padding: 9px 13px; font-size: 12px; color: #65755a; }
.preview-queue button > span { display: inline-block; margin-right: 9px; font-size: 10px; opacity: .7; }
.preview-queue button[aria-current] { background: #e6edda; border-color: #b6c99b; color: #354b29; }
.cinema-preview .preview-queue { background: #1c211e; border-color: #ffffff1a; }
.cinema-preview .preview-queue button { background: #293126; border-color: #46503e; color: #c0cdb5; }
.cinema-preview .preview-queue button[aria-current] { background: #d5eb98; border-color: #d5eb98; color: #293322; }
.preview-context { flex-shrink: 0; }
.preview header, .preview footer { flex-shrink: 0; }
.cinema-preview .empty-state h3 { color: #dce7d1; }
.cinema-preview .empty-state p { color: #b3c2a6; }
@media (max-width:760px) {
  main { padding-top: 18px; }
  .page-heading { padding: 18px 20px; margin-bottom: 18px; }
  .page-heading .eyebrow { font-size: 9px; margin-bottom: 8px; }
  .page-heading h1 { font-size: 24px; }
  .page-heading p { font-size: 11px; margin-top: 6px; }
  .intro-grid.compact { margin-bottom: 20px; }
  .intro-grid.compact .upload-zone { padding: 14px 18px; }
  .intro-grid.compact .upload-copy { grid-template-columns: 1fr; gap: 8px; }
  .intro-grid.compact h2 { display: none; }
  .intro-grid.compact .upload-buttons { grid-row: 1; grid-column: 1; }
  .intro-grid.compact .upload-destination { grid-row: 2; grid-column: 1; font-size: 11px; }
  .preview-context { flex-wrap: wrap; gap: 0 10px; padding: 5px 12px; }
  .preview-context #previewFolder { flex: 1 0 100%; justify-content: flex-start; }
  .preview-context .text-button { min-height: 36px; font-size: 11px; }
  .preview-queue { padding: 10px 12px; }
  .preview-queue button { min-height: 44px; max-width: 230px; }
}
@media (min-width:1100px) { .media-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width:761px) and (max-width:1099px) { .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
/* Fit portrait and landscape video inside the available stage, including controls. */
.cinema-preview .preview-stage { overflow: hidden; }
.cinema-preview .preview-stage video { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.cinema-preview { color-scheme: dark; }
.cinema-preview .preview-queue { scrollbar-color: #647852 #1c211e; }
.cinema-preview .preview-queue::-webkit-scrollbar { height: 6px; }
.cinema-preview .preview-queue::-webkit-scrollbar-track { background: #1c211e; }
.cinema-preview .preview-queue::-webkit-scrollbar-thumb { background: #647852; border-radius: 4px; }
/* Download diagnostics share the library's graphite and lime surfaces. */
.storage-available { display: block; text-align: left; color: #647655; font-size: 10px; padding: 8px 0; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; }
.storage-warning { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capacity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.capacity-grid > div { padding: 18px; border-radius: 12px; background: var(--graphite); color: #dce8d0; }
.capacity-grid span { font-size: 11px; }
.capacity-grid strong { display: block; font-size: 25px; color: var(--lime); margin: 16px 0 9px; }
.capacity-grid small { display: block; font-size: 10px; color: #b3bfa9; line-height: 1.8; }
.storage-trash { margin-top: 16px; }
.search-workspace .toolbar-right { flex: 1; justify-content: flex-end; }
.search-workspace .search-field { flex: 1; max-width: 500px; height: 42px; }
.search-workspace .search-field input { font-size: 12px; }
.search-workspace .file-origin { display: block; color: #6e805d; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; }
.search-workspace .name-text { padding: 6px 0; }
.search-empty > .icon { color: #859b6c; }
.move-selection { display: grid; gap: 7px; margin: 16px 0; font-size: 11px; color: #6f7d62; }
.move-selection > span { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.move-selection .icon { width: 14px; flex-shrink: 0; }
.move-browser { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-top: 16px; }
.move-current { display: flex; gap: 9px; align-items: center; padding: 14px; background: #e9efdf; color: #415333; font-size: 12px; }
.move-current strong { overflow-wrap: anywhere; }
.move-current .icon { flex-shrink: 0; }
.move-folders { max-height: 260px; overflow-y: auto; padding: 6px; }
.move-folders button { display: flex; width: 100%; text-align: left; gap: 10px; justify-content: flex-start; min-height: 44px; padding: 11px; color: #5d7050; font-size: 12px; border-radius: 7px; }
.move-folders button:hover { background: #f0f5e8; }
.move-folders button span { flex: 1; overflow-wrap: anywhere; }
.move-folders p, .move-browser > p { padding: 14px; }
@media (max-width:760px) {
  .global-search-button { min-width: 36px; padding: 8px; }
  .global-search-button > span { display: none; }
  .topbar-right { gap: 8px; }
  .search-workspace .search-field { max-width: none; }
  .batch-bar { left: 12px; right: 12px; width: auto; max-width: none; transform: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 12px; }
  .batch-bar > strong { grid-column: 1 / -1; min-height: 28px; display: flex; align-items: center; }
  .batch-bar > .icon-button { position: absolute; right: 8px; top: 8px; }
  .capacity-grid { grid-template-columns: 1fr; }
}
.trash-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 12px; }
.trash-meta { flex: 1; min-width: 0; }
.trash-meta strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.trash-meta small { display: block; color: var(--muted); font-size: 11px; line-height: 1.8; margin-top: 7px; overflow-wrap: anywhere; }
.trash-actions, .recovery-actions { display: flex; gap: 10px; align-items: center; }
.recovery-actions { flex-direction: column; flex-shrink: 0; }
.recovery-actions .text-button { font-size: 11px; }
.recovery-note { padding: 14px 18px; border-radius: 10px; background: #f3eddc; color: #7d6c40; font-size: 12px; line-height: 1.8; margin-bottom: 16px; }
.transfer-row.needsFile, .transfer-row.verify { background: #f9fbf5; border-color: #cfdac2; }
.transfer-row.needsFile .transfer-state, .transfer-row.verify .transfer-state { color: #6b8054; }
#transferOverview { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 10px; }
.transfer-metric { display: flex; flex-direction: column; gap: 5px; padding: 12px 10px; border-radius: 8px; font-size: 11px; }
.transfer-metric strong { margin: 0; font-size: 24px; }
.transfer-metric.attention { background: #f6ecd3; color: #806020; }
.transfer-metric.attention strong { color: #73521a; }
.transfer-metric.complete { background: #e1ebd2; }
.transfer-row.merging .transfer-state { color: #607842; }
.transfer-row.verify .progress-track span { background: #b08a3b; }
@media (max-width:760px) {
  .trash-row { flex-wrap: wrap; padding: 16px; gap: 12px; }
  .trash-actions { width: 100%; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
  .recovery-actions { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .transfer-row.needsFile, .transfer-row.verify { flex-wrap: wrap; }
  .trash-actions button, .recovery-actions button { min-height: 40px; }
  #transferOverview { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
.download-modal { width: min(640px,calc(100vw - 24px)); }
.download-modal .modal-header { margin-bottom: 18px; }
.download-meter { background: var(--graphite); border-radius: 12px; padding: 20px; color: #f4f5ed; }
.download-meter-label { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: #b9c6ae; }
.download-meter-label > span:first-child { display: flex; align-items: center; gap: 6px; }
.download-meter-label .icon { width: 14px; height: 14px; }
.download-meter > code { display: block; color: #a9b49f; font-size: 11px; margin-top: 10px; overflow-wrap: anywhere; }
.download-speed { color: var(--lime); font-size: clamp(26px,6vw,38px); font-weight: 650; letter-spacing: -1px; margin-top: 20px; font-variant-numeric: tabular-nums; }
.download-meter p { color: #c2cdba; margin-top: 8px; font-size: 11px; min-height: 21px; }
.download-sample { display: flex; align-items: center; gap: 12px; padding: 17px 0; }
.download-sample > span { background: #e9efdd; color: #6b8054; padding: 10px; border-radius: 9px; display: flex; }
.download-sample > div { flex: 1; min-width: 0; }
.download-sample strong { display: block; overflow-wrap: anywhere; font-size: 12px; font-weight: 550; }
.download-sample small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.download-sample > a { flex-shrink: 0; }
.download-test-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.download-test-actions button { min-height: 40px; }
.download-modal .download-test-note { font-size: 11px; margin: 12px 0 20px; color: var(--muted); }
.download-route-heading { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 12px; border-top: 1px solid var(--line); padding-top: 20px; }
.download-route-heading h3 { font-size: 13px; font-weight: 600; }
.download-route-heading > span { font-size: 10px; color: var(--muted); }
.download-modal .download-routes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.download-modal .download-route { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce3d1; border-radius: 10px; background: #f9faf5; color: #516447; }
.download-modal a.download-route:hover { background: #eff4e6; border-color: #a4b88a; }
.download-route > span { flex: 1; min-width: 0; }
.download-route > .icon { width: 18px; height: 18px; flex-shrink: 0; }
.download-modal .download-route strong { display: block; font-size: 12px; }
.download-modal .download-route small { display: block; font-size: 10px; line-height: 1.7; margin-top: 5px; color: var(--muted); }
.download-modal .download-route code { display: block; overflow-wrap: anywhere; margin-top: 6px; font-size: 10px; }
.download-modal .current-route { background: #edf3e2; border-color: #b9cba1; }
.download-instructions { padding-left: 18px; margin: 16px 0 0; font-size: 11px; line-height: 1.9; color: var(--muted); }
.download-instructions-panel { margin-top: 14px; font-size: 11px; color: #5f7052; }
.download-instructions-panel summary { cursor: pointer; padding: 8px 0; }
.download-upload-warning { padding: 12px; border-radius: 8px; background: #f3eddc; }
.download-upload-warning p { color: #7d6c40; margin-bottom: 8px; }
.download-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #ffffff26; }
.download-breakdown span { display: block; color: #c1cdb5; font-size: 10px; }
.download-breakdown strong { display: block; color: #e0efcd; font-size: 17px; margin-top: 7px; }
.download-advice { margin: 12px 0; padding: 13px 15px; border: 1px solid #dce5cf; background: #f0f5e8; border-radius: 9px; color: #536448; font-size: 11px; line-height: 1.8; }
@media (max-width: 480px) {
  .download-modal { padding: 20px; }
  .download-modal .download-routes { grid-template-columns: 1fr; }
  .download-meter { padding: 16px; }
  .download-meter-label { flex-wrap: wrap; }
  .download-sample > span { display: none; }
  .download-modal .download-route { padding: 11px; gap: 9px; }
}

/* Match the video library while making the recipient's connection explicit. */
.modal.connection-modal { width: min(680px, calc(100vw - 28px)); padding: 26px; }
.connection-modal .modal-header { margin-bottom: 18px; }
.connection-intro { margin: 0 0 15px; }
.connection-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 16px; }
.connection-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; min-width: 0; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; color: #56664b; }
.connection-option .icon { width: 19px; height: 19px; }
.connection-option strong { font-size: 13px; font-weight: 600; }
.connection-option small { font-size: 10px; color: #6b785f; line-height: 1.5; }
.connection-option[aria-pressed="true"] { background: #eaf0dd; border-color: #7f9866; box-shadow: inset 0 0 0 1px #7f9866; color: #354b29; }
.connection-option:hover { border-color: #7f9866; }
.connection-detail { display: grid; grid-template-columns: minmax(0, 1fr) 152px; align-items: center; gap: 24px; padding: 22px; border-radius: 13px; background: var(--graphite); color: #f5f3eb; }
.connection-detail-copy > span:first-child { font-size: 10px; color: var(--lime); }
.connection-detail h3 { font-size: 23px; line-height: 1.3; margin: 10px 0; letter-spacing: -.03em; }
.connection-detail p { color: #c6cfbe; margin: 0; font-size: 12px; line-height: 1.8; }
.connection-login { display: flex; align-items: center; gap: 6px; margin-top: 14px; color: #c6cfbe; font-size: 10px; line-height: 1.6; }
.connection-login .icon { width: 13px; height: 13px; flex-shrink: 0; }
.connection-qr { padding: 7px 7px 10px; background: #fff; border-radius: 9px; text-align: center; }
.connection-qr svg { display: block; width: 100%; height: auto; }
.connection-qr small { display: block; font-size: 10px; color: #536449; margin-top: 2px; }
.connection-modal .copy-link { margin-top: 14px; }
.connection-modal .copy-link input { min-height: 44px; font-size: 12px; }
.connection-modal .copy-link .primary { min-height: 44px; flex-shrink: 0; }
.connection-message-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.connection-message-row .text-button { font-size: 12px; min-height: 42px; }
.connection-message-row > span { font-size: 10px; color: #718064; }
.connection-route-note { margin: 0 0 13px; font-size: 11px !important; }
.connection-permission { display: flex; gap: 9px; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 12px; }
.connection-permission > .icon { flex-shrink: 0; width: 16px; margin-top: 3px; color: #758668; }
.connection-permission p { margin: 0; font-size: 11px; }
.connection-permission-action { margin-top: 12px; }
.connection-file { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.connection-file > .icon { width: 27px; height: 27px; flex-shrink: 0; color: #738961; }
.connection-file > span { min-width: 0; }
.connection-file strong { display: block; font-size: 14px; overflow-wrap: anywhere; line-height: 1.6; }
.connection-file small { display: block; margin-top: 3px; font-size: 11px; color: #6b785f; }
.connection-command-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.connection-command-actions .button { min-height: 42px; }
.connection-diagnostics dl { margin: 12px 0; display: grid; gap: 10px; }
.connection-diagnostics dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.connection-diagnostics dt { font: 11px/1.8 ui-monospace, monospace; color: #354b29; }
.connection-diagnostics dd { margin: 0; font-size: 11px; line-height: 1.8; color: #6b785f; }
@media (max-width: 600px) {
  .modal.connection-modal { padding: 20px 16px; }
  .connection-option { padding: 11px 8px; gap: 5px; }
  .connection-option strong { font-size: 11px; }
  .connection-option small { font-size: 9px; }
  .connection-options { gap: 6px; }
  .connection-detail { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; padding: 16px 12px; }
  .connection-detail h3 { font-size: 19px; }
  .connection-detail p { font-size: 11px; }
  .connection-detail-copy > span:first-child { font-size: 9px; }
  .connection-login { font-size: 9px; margin-top: 10px; }
  .connection-qr { padding: 4px 4px 7px; }
  .connection-qr small { font-size: 9px; }
  .connection-message-row { flex-wrap: wrap; gap: 0; }
  .connection-message-row > span { margin-left: auto; }
  .connection-diagnostics dl > div { grid-template-columns: 1fr; gap: 2px; }
}