/* AiMEX Data Storage — shared styling. Same palette as the approved mockup. */
:root{
  --navy:#1a3a5c; --muted:#5c6878; --line:#e3e7ee; --bg:#eef1f5;
  --g:#0F6E56; --g-bg:#E1F5EE; --g-line:#bfe3cd;
  --b:#1565c0; --b-bg:#E6F1FB;
  --i:#4527a0; --i-bg:#ede7f6;
  --amb:#8a4b00; --amb-bg:#fff3e0; --amb-line:#ffcc80;
  --r:#c0392b;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#222;}
.topbar{background:var(--navy);color:#fff;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;}
.brand{font-weight:700;font-size:16px;}
.brand span{opacity:.7;font-weight:400;}
.topbar .who{font-size:12px;opacity:.85;}
.topbar .who button{margin-left:10px;background:rgba(255,255,255,.15);border:none;color:#fff;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:11px;}
.wrap{max-width:1080px;margin:0 auto;padding:18px;}
.wrap.narrow{max-width:420px;}
h1{font-size:19px;color:var(--navy);margin:4px 0 12px;}
.field-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:10px 0 3px;}
.field-label:first-child{margin-top:0;}
.field,.fsel,.finput{width:100%;background:#f7f8fa;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;color:#333;font-family:inherit;}
.fsel{cursor:pointer;}
.finput:focus,.fsel:focus{outline:none;border-color:var(--b);background:#fff;}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;}
.row{display:flex;align-items:center;gap:8px;}
.row.between{justify-content:space-between;}
.row.wrap{flex-wrap:wrap;}
.btn{display:inline-block;font-size:13px;font-weight:700;border-radius:7px;padding:9px 16px;border:none;cursor:pointer;user-select:none;}
.btn.g{background:var(--g);color:#fff;}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line);}
.btn.b{background:var(--b);color:#fff;}
.btn.r{background:var(--r);color:#fff;}
.btn.i{background:var(--i);color:#fff;}
.btn:disabled{opacity:.5;cursor:default;}
.chip{display:inline-block;font-size:11.5px;padding:5px 10px;border-radius:14px;border:1px solid var(--line);color:var(--muted);margin:2px 4px 2px 0;background:#fff;cursor:pointer;user-select:none;}
.chip.on{background:var(--g-bg);border-color:var(--g-line);color:var(--g);font-weight:700;}
.chip.static{cursor:default;}
.callout{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5;}
.callout.win{color:var(--g);font-weight:600;}
.callout.err{color:var(--r);font-weight:600;}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;}
.tabs button{background:none;border:none;padding:10px 16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;}
.tabs button.active{color:var(--navy);border-bottom-color:var(--g);}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.thumb{background:#dde3ec;border-radius:8px;aspect-ratio:4/3;position:relative;overflow:hidden;border:1px solid var(--line);cursor:pointer;background-size:cover;background-position:center;}
.thumb .tag{position:absolute;left:5px;bottom:5px;background:rgba(26,58,92,.85);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;}
.thumb .cap{position:absolute;right:5px;top:5px;left:5px;background:rgba(255,255,255,.9);color:var(--navy);font-size:9px;font-weight:700;padding:2px 5px;border-radius:5px;max-width:fit-content;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.thumb .filebadge{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#eef1f5;}
.thumb .rm{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;cursor:pointer;}
.pill{display:inline-block;font-size:11px;padding:4px 9px;border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--muted);margin-right:6px;}
.dropzone{border:2px dashed var(--line);border-radius:8px;padding:20px;text-align:center;font-size:13px;color:var(--muted);cursor:pointer;transition:background .15s,border-color .15s;}
.dropzone.over{border-color:var(--b);background:var(--b-bg);}
.lb-overlay{position:fixed;inset:0;background:rgba(10,20,30,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.lb-overlay.show{display:flex;}
.lb-box{background:#fff;border-radius:12px;overflow:hidden;width:100%;max-width:420px;height:500px;max-height:90vh;box-shadow:0 12px 30px rgba(0,0,0,.28);position:relative;display:flex;flex-direction:column;}
.lb-box.maximized{width:96vw!important;max-width:96vw!important;height:92vh!important;max-height:92vh!important;}
.lb-img{flex:1 1 auto;min-height:0;position:relative;background:#111;overflow:hidden;}
.lb-stage{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#111;}
.lb-close{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.92);color:var(--navy);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-weight:700;cursor:pointer;z-index:2;}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;cursor:pointer;z-index:2;user-select:none;}
.lb-arrow:hover{background:rgba(255,255,255,.38);}
.lb-arrow.lb-arrow-l{left:8px;}
.lb-arrow.lb-arrow-r{right:8px;}
.lb-arrow.hide{display:none;}
.lb-count{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;z-index:2;}
.lb-frame{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff;}
.lb-video{position:absolute;inset:0;width:100%;height:100%;background:#111;object-fit:contain;}
.lb-nopreview{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#aab1bc;background:#1a222c;}
.lb-nopreview .ic{font-size:32px;}
.lb-nopreview .ext{font-size:11px;font-weight:800;color:#fff;}
.lb-nopreview .msg{font-size:10.5px;color:#8a93a1;}
.lb-max{position:absolute;top:8px;right:42px;background:rgba(255,255,255,.92);color:var(--navy);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;z-index:2;}
.lb-resize-handle{position:absolute;right:2px;bottom:2px;width:20px;height:20px;cursor:nwse-resize;display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;color:#aab1bc;z-index:3;}
.lb-box.maximized .lb-resize-handle{display:none;}
.lb-edit-btn{cursor:pointer;color:var(--muted);font-size:14px;padding:2px 4px;flex:0 0 auto;}
.lb-edit-btn:hover{color:var(--navy);}
.lb-body{padding:16px;flex:0 0 auto;overflow-y:auto;max-height:45%;}
table{width:100%;border-collapse:collapse;font-size:12.5px;}
th{text-align:left;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--line);}
td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle;}
.toggle{width:34px;height:19px;border-radius:10px;background:var(--g);position:relative;display:inline-block;cursor:pointer;}
.toggle i{position:absolute;top:2px;right:2px;width:15px;height:15px;background:#fff;border-radius:50%;}
.toggle.off{background:#d7dce3;}
.toggle.off i{left:2px;right:auto;}

/* ---- Settings: standout section headings, collapsible chip lists, Plants/Units
   master-detail layout (2026-08-08, tidy-up of the rev-421 Settings screen) ---- */
.settings-panel{padding:24px 26px;}
.sec{margin-bottom:38px;}
.sec:last-child{margin-bottom:0;}
.sec-h{display:flex;align-items:center;gap:9px;margin:0 0 16px;padding-bottom:11px;border-bottom:2px solid var(--line);}
.sec-h .bar{width:5px;height:18px;border-radius:3px;flex:0 0 auto;background:var(--navy);}
.sec-h .sec-title{font-size:14px;font-weight:800;color:var(--navy);letter-spacing:.01em;flex:1;}
.sec-h .cnt{font-size:10px;font-weight:700;color:#fff;background:var(--navy);border-radius:20px;padding:3px 9px;}
.sec.green .bar,.sec.green .cnt{background:var(--g);}
.sec.blue .bar,.sec.blue .cnt{background:var(--b);}
.sec.indigo .bar,.sec.indigo .cnt{background:var(--i);}
.sec.amber .bar,.sec.amber .cnt{background:var(--amb);}
.sec>.row+.row{margin-top:10px;}

.cfg-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;background:#f5f7fa;border:1px solid var(--line);border-radius:8px;padding:10px 14px;user-select:none;margin-top:4px;}
.cfg-toggle .lbl{font-size:12px;font-weight:700;color:var(--navy);}
.cfg-toggle .lbl small{font-weight:500;color:var(--muted);margin-left:4px;text-transform:none;letter-spacing:0;}
.cfg-toggle .chev{font-size:11px;color:var(--muted);transition:transform .15s;flex:0 0 auto;margin-left:8px;}
.cfg-toggle.open .chev{transform:rotate(180deg);}
.cfg-body{padding-top:4px;}
.cfg-body.closed{display:none;}

.mdgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:14px;}
.mdcol .mdh{font-size:10.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:6px;}
.mdcol .mdh .cnt2{background:var(--bg);color:var(--muted);border-radius:20px;padding:1px 8px;font-size:10px;font-weight:700;flex:0 0 auto;}
.mdempty{border:1px dashed var(--line);border-radius:8px;padding:18px 12px;text-align:center;font-size:11.5px;color:#aab1bc;}
@media (max-width:640px){.mdgrid{grid-template-columns:1fr;gap:20px;}}

/* ---- Configured-items tables (2026-08-08): replaces the wrapped chip-wall inside each
   collapsible section, and inside the Plants/Units master-detail columns, with an orderly
   row-per-item table -- easier to scan than chips wrapping across several lines. ---- */
.cfgtable-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px;}
.cfgtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.cfgtable td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;background:#fff;}
.cfgtable tr:last-child td{border-bottom:none;}
.cfgtable tr:hover td{background:#f7f8fa;}
.cfgtable tr.sel td{background:var(--i-bg);color:var(--i);font-weight:700;}
.cfgtable tr.selectable{cursor:pointer;}
.cfgtable td.actions{width:1%;white-space:nowrap;text-align:right;color:var(--muted);}
.cfgtable td.actions span{cursor:pointer;margin-left:10px;padding:2px;}
.cfgtable td.actions span:hover{color:var(--navy);}
.cfgtable td.empty-row{color:#aab1bc;font-size:11.5px;text-align:center;padding:14px 8px;background:#fff;}
.tabs.sub{margin-bottom:0;}
.tabs.sub button{padding:8px 14px;font-size:12.5px;}

/* ---- Single on/off setting with a label + helper text (2026-08-08, "Show original file
   date" in Settings > General) -- reuses the existing .toggle component, just adds a row
   frame around it so the label/sub-text has somewhere to live. ---- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fbfcfd;}
.toggle-row .tr-lbl{font-size:12.5px;font-weight:700;color:var(--navy);}
.toggle-row .tr-sub{font-size:11px;color:var(--muted);margin-top:2px;line-height:1.4;}

/* ---- Upload tab tag-picker fields (2026-08-08): Gary asked for the Customer/Vessel/Plant/
   Unit labels to stand out more, and for the selected value text inside those boxes to use a
   different colour -- distinguishes "this is a field you're filling in" from the plain grey
   .field-label style used everywhere else (Library filters, Settings inputs, etc.), without
   changing that shared style globally. ---- */
.field-label.hd{font-size:11px;font-weight:800;color:var(--navy);letter-spacing:.02em;}
.fsel.tagsel{color:var(--b);font-weight:600;}

/* ---- Bordered section variant (2026-08-08): a visible outline around each .sec block, so it's
   unambiguous where one section ends and the next begins -- opt-in via .bordered rather than
   changing the base .sec (shared with Settings' sub-tabs, which didn't ask for this and already
   have their own visual separation via being on separate tabs). ---- */
.sec.bordered{border:1px solid var(--line);border-radius:10px;padding:16px 18px;}
.sec.bordered:last-child{margin-bottom:0;}

/* ---- Searchable, alphabetically-grouped dropdowns & Settings lists (2026-08-08, approved
   /mockup: "Where we have dropdown selectors and lists is it possible to have free text type
   search and also potentially alphabetical grouping? i.e go to W for items starting with W
   that group under the W"). Below SETTINGS.searchGroupThreshold items, a picker/list stays a
   plain simple <select>/table with none of this UI at all -- see combo.js. ---- */
/* min-width is load-bearing, not decorative: .ahc-wrap is the flex ITEM in some contexts
   (Library filters, Vessel Profile, Settings' own Customer/Vessel pickers) and an ordinary
   block child of a flex:1 parent in others (Upload's own tag pickers) -- in the former case a
   flex item with no explicit width defaults to shrinking toward its content's min-content size,
   and .ahc-trigger-label's overflow:hidden (needed for the ellipsis) resets that min-content
   floor to ~0 per the flexbox spec, so without this the whole trigger (and therefore the panel,
   which is width-locked to the wrap via left:0/right:0 below) could collapse to a sliver a few
   px wide with every result line wrapping letter-by-letter. Found via a real screenshot after
   shipping (2026-08-08) -- the Upload pickers looked fine because they aren't direct flex items
   there, which is exactly why this wasn't caught by node --check or the automated tests. */
.ahc-wrap{position:relative;min-width:190px;}
.ahc-trigger{background:#f7f8fa;border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-size:13px;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;}
.ahc-trigger:hover{border-color:var(--g-line);}
.ahc-trigger:focus{outline:none;border-color:var(--b);background:#fff;}
.ahc-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.ahc-trigger-car{color:var(--muted);font-size:10px;flex:0 0 auto;}
.ahc-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:#fff;border:1px solid var(--g-line);border-radius:8px;box-shadow:0 8px 22px rgba(0,0,0,.16);overflow:hidden;}
.ahc-search-row{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line);}
.ahc-search-row .ahc-search-ic{color:var(--g);font-size:12px;}
.ahc-search-input{border:none;outline:none;font-size:12.5px;flex:1;font-family:inherit;color:#222;background:none;}
.ahc-search-input::placeholder{color:#aab1bc;}
.ahc-body{display:flex;align-items:flex-start;}
/* The A-Z strip (27 short rows, ~270px tall) must always show every letter in full -- it isn't
   meant to scroll. Only the RESULTS list scrolls, so max-height/overflow live there only; giving
   .ahc-body itself a max-height used to clip the strip's own content, forcing IT to grow its own
   internal scrollbar too and squeezing every letter down to an illegible sliver (the "just a
   blank scroll bar, no visible letters" screenshot). */
.ahc-list{flex:1;overflow:auto;min-width:0;max-height:260px;}
.ahc-grp-head{position:sticky;top:0;background:var(--g-bg);color:var(--g);font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:3px 10px;}
.ahc-grp-head.active{background:var(--g);color:#fff;}
.ahc-row{padding:6px 10px 6px 16px;font-size:12.5px;color:#222;cursor:pointer;}
.ahc-row:hover{background:#f7f8fa;}
.ahc-row.sel{background:var(--b-bg);color:var(--b);font-weight:700;}
.ahc-row b{color:var(--g);}
.ahc-empty{padding:14px 10px;font-size:11.5px;color:#aab1bc;text-align:center;}
.ahc-az{width:20px;flex:0 0 auto;background:#fafbfc;border-left:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:4px 0;}
.ahc-az-l{font-size:8.5px;line-height:10px;color:#c3c9d2;padding:1.5px 0;width:100%;text-align:center;}
.ahc-az-l.on{color:var(--g);font-weight:800;cursor:pointer;}
.ahc-az-l.on:hover{background:var(--g-bg);}
.ahc-az-l.now{background:var(--g);color:#fff;border-radius:3px;}

/* Settings management-table variant of the same search + A-Z grouping, rendered as sticky
   divider rows inside the existing .cfgtable rather than a floating panel -- see
   renderCfgList() in app.js. Reuses .ahc-az from above for the side jump strip. */
.cfglist-search{display:flex;align-items:center;gap:7px;border:1px solid var(--g-line);border-radius:7px;padding:7px 10px;margin-top:8px;background:#fff;}
.cfglist-search .ic{color:var(--g);font-size:12px;}
.cfglist-search input{border:none;outline:none;font-size:12.5px;flex:1;font-family:inherit;color:#222;background:none;}
.cfglist-search input::placeholder{color:#aab1bc;}
.cfglist-frame{display:flex;margin-top:8px;}
.cfglist-frame .cfgtable-wrap{flex:1;min-width:0;max-height:280px;overflow:auto;margin-top:0;}
.cfglist-frame .ahc-az{border-radius:0 8px 8px 0;}
.cfgtable tr.divider td{position:sticky;top:0;background:var(--g-bg);color:var(--g);font-size:9.5px;font-weight:800;letter-spacing:.05em;padding:3px 10px;}

/* ---- Library multi-select + bulk delete (2026-08-08) ---- */
.thumb.selected{outline:3px solid var(--b);outline-offset:-3px;}
.thumb .sel-check{position:absolute;top:5px;left:5px;width:19px;height:19px;border-radius:5px;background:rgba(255,255,255,.92);border:2px solid #aab1bc;z-index:2;}
.thumb .sel-check.on{background:var(--b);border-color:var(--b);}
.thumb .sel-check.on::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;}


/* ---- Mobile Library (2026-08-08): bottom tab bar (Capture/Library) + Customer/Vessel/Plant/
   Unit filter bottom sheet + active-filter chip row. Class names match the approved
   AiMEX_DataStorage_MobileLibraryFilters_Mockup.html 1:1 so the build can be checked directly
   against the mockup. Fixed-position (not absolute, unlike the mockup's bounded phone-frame
   demo) since the real mobile page is the whole viewport, not a framed preview. ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);z-index:20;}
.tabbar .t{flex:1;text-align:center;padding:8px 4px 9px;font-size:10px;font-weight:700;color:#9aa4b2;cursor:pointer;user-select:none;background:none;border:none;font-family:inherit;}
.tabbar .t .ic{display:block;font-size:19px;margin-bottom:2px;}
.tabbar .t.active{color:var(--g);}

.fab-filter{position:fixed;right:18px;bottom:78px;width:50px;height:50px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 6px 14px rgba(0,0,0,.25);cursor:pointer;z-index:25;}

.activef{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0 0;}
.activef .af{font-size:11px;font-weight:700;background:#fff;border:1px solid var(--line);color:var(--navy);padding:4px 8px 4px 9px;border-radius:12px;display:flex;align-items:center;gap:5px;}
.activef .af .x{color:var(--r);font-weight:800;cursor:pointer;}
.activef .clearall{font-size:11px;font-weight:700;color:var(--b);padding:4px 4px;cursor:pointer;align-self:center;}
.resultcount{margin:6px 0 0;font-size:11px;color:#8a94a3;font-weight:700;}

.backdrop{position:fixed;inset:0;background:rgba(10,20,30,.42);z-index:45;display:none;}
.backdrop.open{display:block;}
.sheet{position:fixed;left:0;right:0;bottom:0;background:#fff;border-radius:16px 16px 0 0;z-index:46;box-shadow:0 -8px 24px rgba(0,0,0,.2);transform:translateY(100%);transition:transform .18s ease;max-height:82vh;display:flex;flex-direction:column;}
.sheet.open{transform:translateY(0);}
.sheet .grabber{width:34px;height:4px;background:var(--line);border-radius:3px;margin:9px auto 4px;flex:0 0 auto;}
.sheet .shead{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 10px;border-bottom:1px solid var(--line);flex:0 0 auto;}
.sheet .shead .t{font-weight:800;font-size:14px;color:var(--navy);}
.sheet .shead .clear{font-size:12px;font-weight:700;color:var(--b);cursor:pointer;}
.sheet .sbody{padding:10px 16px 6px;overflow-y:auto;flex:1;}
.sfl{font-size:10px;font-weight:800;color:#8a94a3;text-transform:uppercase;letter-spacing:.03em;margin:12px 0 4px;}
.sfl:first-child{margin-top:0;}
.shint{font-size:11px;color:#aab1bc;margin-top:3px;}
.sfoot{display:flex;gap:8px;padding:10px 16px 16px;border-top:1px solid var(--line);flex:0 0 auto;}
.sfoot button{flex:1;border:none;border-radius:9px;padding:12px 0;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;}
.sfoot .apply{background:var(--g);color:#fff;}
.sfoot .cancel{background:#f1f3f6;color:var(--muted);}


/* ---- Generic confirm/action modal (2026-08-08, "Apply defaults to existing vessels") ----
   Deliberately separate from .lb-overlay/.lb-box (the lightbox's own overlay) rather than
   reusing them -- those carry lightbox-specific children (.lb-img/.lb-body/etc) and JS state
   (currentLightboxPhoto, lbIndex...) this has nothing to do with. Same visual language (dark
   backdrop, centered white card, navy header) so it still looks like it belongs. */
.confirm-overlay{position:fixed;inset:0;background:rgba(10,20,30,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:20px;}
.confirm-overlay.show{display:flex;}
.confirm-box{background:#fff;border-radius:12px;overflow:hidden;width:100%;max-width:400px;box-shadow:0 12px 30px rgba(0,0,0,.28);}
.confirm-head{background:var(--navy);color:#fff;font-size:13px;font-weight:700;padding:11px 14px;}
.confirm-body{padding:14px;}
.confirm-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line);}
.scope-opt{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;cursor:pointer;margin-top:6px;}
.scope-opt:first-child{margin-top:0;}
.scope-opt.on{border-color:var(--i);background:var(--i-bg);color:var(--i);font-weight:700;}