:root{--ink:#111715;--muted:#687873;--line:#dce8e1;--mint:#11b77d;--deep:#082119;--soft:#eef8f2;--danger:#b73535;--shadow:0 22px 60px rgba(20,65,43,.14);font-family:Pretendard,"Noto Sans KR",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,#ddf8e8,transparent 36%),linear-gradient(135deg,#fbfdf8,#edf6f0);color:var(--ink)}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer;font-weight:900}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;padding:14px;outline:0}input:focus,select:focus,textarea:focus{border-color:var(--mint);box-shadow:0 0 0 4px rgba(17,183,125,.12)}h1,h2,h3,p{letter-spacing:-.045em}h1{margin:0;font-size:clamp(34px,5vw,52px)}h2{margin:0;font-size:clamp(24px,3vw,34px)}.layout{display:grid;grid-template-columns:292px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:rgba(255,255,255,.78);backdrop-filter:blur(18px);padding:28px 24px;display:flex;flex-direction:column;gap:28px}.side b{font-size:30px;letter-spacing:-.06em}.side span,header p,.head span{color:var(--muted);font-weight:900}.side nav{display:grid;gap:10px}.side nav button{background:transparent;text-align:left;border-radius:16px;padding:18px 20px;font-size:19px}.side nav button.on{background:#dff6eb;color:#087c54}.side.dark{background:#111816;color:#fff;border-right:0}.side.dark span{color:#9be7c5}.side.dark button{color:#dfe9e4}.side.dark button.on{background:#1e3a31;color:#9be7c5}.adminKey{display:grid;gap:8px;color:#dfe9e4;font-weight:900}.side.dark input{background:#1a2420;border-color:#30463c;color:#fff}.me{margin-top:auto;border:1px solid var(--line);border-radius:22px;background:#fff;padding:18px;display:grid;gap:10px}.me button,header button{border-radius:14px;background:#f1f6f2;padding:12px}.main{padding:34px 38px 90px;min-width:0}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.stack{display:grid;gap:24px}.hero,.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:24px}.hero form{display:grid;grid-template-columns:1fr 120px;gap:14px}.hero input{height:70px;font-size:25px;font-weight:950;border-radius:22px}.primary,.hero form button{background:linear-gradient(135deg,#19ca8e,#078458);color:white;border-radius:22px;min-height:60px;box-shadow:0 18px 32px rgba(7,132,88,.22)}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.metrics article,.metrics button{border:1px solid var(--line);background:white;border-radius:22px;padding:18px;display:grid;gap:6px;text-align:left;box-shadow:0 12px 32px rgba(30,50,40,.08)}.metrics span{color:var(--muted);font-weight:900}.metrics b{font-size:25px}.metrics small{color:var(--muted)}.metrics button{background:var(--deep);color:white;font-size:22px;align-content:center}.split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr);gap:22px;align-items:start}.head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}.result{border:1px solid var(--line);border-radius:22px;background:linear-gradient(#fff,#f9fffb);padding:18px;margin-top:14px;display:grid;gap:15px}.result:hover{border-color:var(--mint);transform:translateY(-2px)}.result>div:first-child{display:flex;justify-content:space-between;gap:10px}.result mark{background:#dff6eb;color:#087c54;border-radius:999px;padding:6px 10px;font-weight:900}.result em{font-style:normal;color:var(--muted);font-weight:900}.result h3{font-size:28px;margin:0}.result dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.result dl span{background:#f4f9f5;border:1px solid var(--line);border-radius:14px;padding:12px;min-width:0}.result dt{color:var(--muted);font-weight:900}.result dd{margin:4px 0 0;font-weight:900;overflow:hidden;text-overflow:ellipsis}.result button{justify-self:start;background:var(--deep);color:white;border-radius:14px;padding:10px 14px}.detail{position:sticky;top:22px;display:grid;gap:16px}.detail.mute{color:var(--muted)}.detail section{border-top:1px solid var(--line);padding-top:14px}.memo{white-space:pre-wrap;line-height:1.65}.empty{border:1px dashed #bcd7c9;border-radius:22px;background:#fbfffc;padding:24px;display:grid;gap:8px;color:var(--muted)}.empty b{font-size:22px;color:var(--ink)}.error{display:block;color:var(--danger);background:#fff1f1;border:1px solid #ffd1d1;border-radius:16px;padding:13px 15px;margin:12px 0}.auth{min-height:100vh;display:grid;grid-template-columns:1fr 430px;gap:22px;padding:30px;place-content:center}.authHero,.authForm{background:white;border:1px solid var(--line);border-radius:34px;box-shadow:var(--shadow);padding:36px}.authHero{min-height:540px;background:linear-gradient(135deg,#092019,#0b8d61);color:white;display:grid;align-content:end}.authHero b{color:#bdeed8}.authHero h1{font-size:clamp(38px,6vw,64px)}.authHero p{color:#d7f5e8;font-size:20px}.authForm{display:grid;gap:14px;align-content:center}.authForm label,.form label,.phones label{display:grid;gap:7px;font-weight:900;color:var(--muted)}.switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f2f7f3;padding:6px;border-radius:18px}.switch button{padding:14px;border-radius:14px;background:transparent}.switch button.on{background:white;color:#087c54}.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.check{grid-template-columns:auto 1fr!important;align-items:center;color:var(--ink)!important}.check input,.checks input{width:18px;height:18px}.phones{margin:20px 0;display:grid;gap:12px}.phones label{grid-template-columns:90px 1fr;align-items:center}.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.checks label{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:8px;align-items:center;font-weight:900}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.actions button{border-radius:18px;padding:16px 20px;background:#eef5ef}.actions .primary{background:linear-gradient(135deg,#19ca8e,#078458);color:white}.case{border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:130px 1fr auto;gap:12px;margin-top:10px}.case b{color:#087c54}.case em{font-style:normal;font-weight:900}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}.toolbar input{max-width:380px}.toolbar button{background:var(--deep);color:white;border-radius:14px;padding:12px 16px}.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}table{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}th{position:sticky;top:0;background:#e9f4ed;color:#153228;text-align:left;padding:12px;border-bottom:1px solid #bfd8cb;white-space:nowrap}td{padding:12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap}tr:hover td{background:#f7fcf8}pre{white-space:pre-wrap;word-break:break-word;background:#f5faf6;border:1px solid var(--line);border-radius:16px;padding:14px}.bottom{display:none}@media(max-width:1100px){.layout{grid-template-columns:1fr}.side{display:none}.main{padding:22px 18px 86px}.split{grid-template-columns:1fr}.detail{position:static}.metrics{grid-template-columns:1fr}.bottom{position:fixed;left:14px;right:14px;bottom:14px;z-index:20;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:var(--shadow);backdrop-filter:blur(16px)}.bottom button{border-radius:16px;padding:13px 8px;background:transparent}.bottom button.on{background:var(--mint);color:white}}@media(max-width:720px){.auth{grid-template-columns:1fr;padding:14px}.authHero{min-height:260px}.hero form,.result dl,.formGrid,.checks{grid-template-columns:1fr}.phones label,.case{grid-template-columns:1fr}.actions{flex-direction:column}.actions button{width:100%}}


/* modular operation surfaces */
.summaryLine{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}.summaryLine article,.settingsBlock{border:1px solid var(--line,#dce7e2);border-radius:20px;background:#fff;padding:16px;box-shadow:0 14px 36px rgba(23,42,33,.06)}.settingsBlock{display:grid;gap:12px}.settingsBlock h3{margin:4px 0;font-size:22px}.settingsBlock label{display:grid;gap:6px;font-weight:800}.settingsBlock input,.settingsBlock select,.settingsBlock textarea,.reportDialog textarea,.reportDialog select{border:1px solid var(--line,#dce7e2);border-radius:14px;padding:12px;font:inherit}.floatingReport{position:fixed;right:20px;bottom:22px;z-index:40;border:0;border-radius:999px;background:#0aa66a;color:white;padding:14px 18px;font-weight:900;box-shadow:0 16px 34px rgba(10,166,106,.28)}.modalLite{position:fixed;inset:0;background:rgba(8,18,14,.35);z-index:60;display:grid;place-items:center;padding:18px}.reportDialog{max-width:460px;width:100%;display:grid;gap:12px}.reportDialog .close{justify-self:end}.miniToast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:70;background:#09251a;color:#fff;border-radius:999px;padding:12px 16px;font-weight:900}.reportRow{cursor:pointer}.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.case button{justify-self:end}.adminWork{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.adminWork .wide{min-width:0}.buttonGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.actionPanel{position:sticky;top:18px}.pointAdminWork{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.pointAdminWork .wide{grid-column:1/-1}.pointAdminWork .actionPanel{position:static;top:auto;align-self:stretch}.compareBox{display:grid;grid-template-columns:90px 1fr 1fr;gap:8px;border:1px solid var(--line,#dce7e2);border-radius:16px;padding:12px;background:#fbfdfb}.compareBox span,.compareBox b{border-bottom:1px solid #edf3ef;padding:7px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.toolbar input,.toolbar select{border:1px solid var(--line,#dce7e2);border-radius:14px;padding:10px}.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.formGrid label,.phones label{display:grid;gap:6px;font-weight:800}.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0}.phones b{grid-column:1/-1}.checks{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.checks label{background:#f4faf6;border-radius:999px;padding:8px 12px;font-weight:800}.memo{white-space:pre-wrap;background:#f6faf7;border-radius:14px;padding:12px}@media(max-width:900px){.adminWork{grid-template-columns:1fr}.actionPanel{position:static}.pointAdminWork .wide{grid-column:auto}.floatingReport{right:14px;bottom:78px}.compareBox{grid-template-columns:72px 1fr 1fr;font-size:13px}}
.adminTabs{display:flex;gap:8px;overflow:auto;margin:-8px 0 18px;padding-bottom:6px}.adminTabs button{white-space:nowrap;border-radius:999px;background:#edf6f1;color:#17362b;padding:11px 15px}.adminTabs button.on{background:#10241b;color:#9be7c5}.adminMetrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.adminMetrics article{border:1px solid var(--line);background:#fff;border-radius:22px;padding:18px;box-shadow:var(--shadow);display:grid;gap:8px}.adminMetrics span{color:var(--muted);font-weight:900}.adminMetrics b{font-size:28px}
.adminTokenBar{display:grid;gap:7px;margin:-8px 0 14px;font-weight:900;color:var(--muted)}.adminTokenBar input{max-width:560px}
.adminGuardPanel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:8px;background:#fff;box-shadow:var(--shadow)}
.adminGuardPanel>b,.adminGuardPanel b{display:block;color:var(--ink)}
.adminGuardPanel span,.adminGuardPanel small{color:var(--muted);font-size:13px}
.adminGuardPanel.ok{border-color:#bbf7d0;background:#f0fdf4}
.adminGuardPanel.hold{border-color:#fde68a;background:#fffbeb}
.adminGuardPanel.fail{border-color:#fecaca;background:#fef2f2}
.adminGuardChips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.adminGuardChips span{display:inline-flex;align-items:center;min-height:26px;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--muted);font-weight:700}
.adminGuardChips span.ok{border-color:#86efac;color:#166534;background:#dcfce7}
.adminGuardChips span.hold{border-color:#fde68a;color:#92400e;background:#fef3c7}
.adminGuardChips span.fail{border-color:#fca5a5;color:#991b1b;background:#fee2e2}
.adminGuardPanel ul{margin:0;padding-left:18px;color:#991b1b;font-size:12px}
.adminGuardPanel li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inlineMiniBtn{border:1px solid #fca5a5;background:#fff;color:#991b1b;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900}
.legacyPeriodDetail{width:100%;display:grid;gap:8px;border:1px solid #fde68a;background:#fff7ed;border-radius:10px;padding:10px;color:#5f370e}
.legacyPeriodDetail>b{color:#92400e}
.legacyPeriodRows{display:grid;gap:6px;max-height:260px;overflow:auto}
.legacyPeriodRows article{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(90px,.6fr) minmax(170px,1.2fr) minmax(110px,.65fr) minmax(120px,.8fr) auto;gap:8px;align-items:center;border:1px solid #fed7aa;background:#fff;border-radius:8px;padding:8px}
.legacyPeriodRows article span,.legacyPeriodRows article em{font-size:12px;color:#7c5c39;font-style:normal;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis}
.legacyPeriodRows article strong{color:#991b1b;font-size:13px}
.warnText{color:#b45309;font-weight:900}
.dangerText{color:#991b1b;font-weight:950}

/* admin upgrade surfaces */
.dashboardStack{display:grid;gap:18px}.adminMetrics.rich article{position:relative;overflow:hidden}.adminMetrics.rich article i{display:block;height:7px;border-radius:999px;background:linear-gradient(90deg,#10b981,#0f766e);margin-top:8px}.adminMetrics.rich small{color:var(--muted);font-weight:800}.chartCard{min-height:280px}.barChart{height:250px;display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:14px;align-items:end}.barChart>div{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:8px;text-align:center}.barChart b{font-size:13px;color:var(--muted)}.barChart span{display:flex;align-items:end;justify-content:center;border-radius:18px;background:#edf7f1;padding:8px;min-height:150px}.barChart i{display:block;width:100%;max-width:42px;border-radius:14px 14px 6px 6px;background:linear-gradient(180deg,#16c784,#087c54);box-shadow:0 14px 28px rgba(8,124,84,.22)}.barChart em{font-style:normal;font-weight:950}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pillList{display:flex;gap:8px;flex-wrap:wrap}.pillList span,.pillList em{border:1px solid var(--line);background:#f6fbf7;border-radius:999px;padding:9px 12px;font-style:normal;font-weight:900}.activityList{display:grid;gap:8px;max-height:360px;overflow:auto}.activityList article{display:grid;grid-template-columns:92px 110px 1fr;gap:10px;border-bottom:1px solid var(--line);padding:10px 0}.activityList b{color:#087c54}.activityList span{font-weight:900}.activityList em{font-style:normal;color:var(--muted)}.memberOps{display:grid;gap:14px}.opBlock{border:1px solid var(--line);background:#fbfefb;border-radius:18px;padding:14px;display:grid;gap:10px}.opBlock b{font-size:18px}.opBlock button{border-radius:14px;background:#10241b;color:#fff;padding:12px}.checkManager{display:grid;gap:8px;max-height:360px;overflow:auto}.checkManager article{display:grid;grid-template-columns:1fr 56px 72px;gap:8px;align-items:center;border-bottom:1px solid var(--line);padding:9px 0}.checkManager button{border-radius:12px;background:#edf6f1;color:#0f5138;padding:9px}.hint{color:var(--muted);font-weight:800}.subjectChecks label{background:#fff;border:1px solid var(--line);border-radius:999px}.tableWrap tr.selected td{background:#dff6eb!important;color:#063d2d;font-weight:900}.compareBox{display:block}.compareHead,.compareRow{display:grid;grid-template-columns:92px 1fr 1fr;gap:8px}.compareHead span{font-weight:950;background:#e9f4ed;border-radius:10px;padding:8px}.compareRow b,.compareRow span{border-bottom:1px solid var(--line);padding:9px;min-width:0;white-space:pre-wrap}.diffs{display:grid;gap:6px;margin-top:10px}.diffs em{font-style:normal;background:#f2f8f4;border-radius:12px;padding:8px;color:#285143}@media(max-width:900px){.grid-2{grid-template-columns:1fr}.activityList article{grid-template-columns:1fr}.compareHead,.compareRow{grid-template-columns:1fr}.barChart{height:auto;grid-template-columns:1fr}.barChart>div{grid-template-columns:110px 1fr 60px;grid-template-rows:auto;height:auto;align-items:center}.barChart span{min-height:42px;align-items:center;justify-content:flex-start}.barChart i{height:24px!important;max-width:none}}
.branchLock{display:grid;grid-template-columns:1fr auto;gap:8px 14px;align-items:center;margin:0 0 18px;padding:14px 16px;border:1px solid #b9dfcf;background:#eefaf4;border-radius:18px;color:#075f42}
.branchLock b{font-size:16px}
.branchLock span{grid-column:1;color:#547064;font-size:13px}
.branchLock button{grid-column:2;grid-row:1 / span 2;border:1px solid #0fa56b;background:#fff;color:#08744c;border-radius:999px;padding:10px 14px;font-weight:900}
.form input:disabled,.form select:disabled,.form textarea:disabled{background:#f1f5f3;color:#798982;border-color:#dce8e2;cursor:not-allowed}
.subjectChecks input:disabled+span{opacity:.72}
@media(max-width:720px){.branchLock{grid-template-columns:1fr}.branchLock span,.branchLock button{grid-column:1;grid-row:auto}.branchLock button{width:100%}}
.branchPath{display:grid;gap:8px;margin:14px 0;padding:14px;border:1px solid #dbe7e1;background:#f7fbf8;border-radius:18px}
.branchPath span{font-size:12px;font-weight:900;color:#6b7d76;text-transform:uppercase;letter-spacing:.02em}
.branchPath b{font-size:18px;color:#071b14}
.branchPath i{width:2px;height:18px;background:#16a56c;border-radius:99px;margin-left:10px}
.branchPath em{font-style:normal;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:7px 10px;font-weight:800;font-size:12px}
.adminSearch{display:grid;gap:20px}
.adminSearch .searchBar{display:grid;grid-template-columns:1fr minmax(260px,520px) auto;align-items:end;gap:14px}
.adminSearch .searchBar input{min-height:54px;border-radius:16px;border:1px solid #d9e4de;padding:0 18px;font-size:18px;font-weight:800}
.adminSearch .searchBar button,.dangerSave{border:0;border-radius:16px;background:#0c9f67;color:#fff;font-weight:950;padding:16px 22px;box-shadow:0 16px 30px rgba(10,120,81,.18)}
.adminSearchGrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);gap:20px;align-items:start}
.adminSearch .editor{position:sticky;top:18px}
.editGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.editGrid label,.editor label{display:grid;gap:6px;font-size:13px;font-weight:900;color:#66756e}
.editGrid input,.editGrid select,.editor textarea,.editPhones input{border:1px solid #dbe7e1;border-radius:12px;padding:12px 13px;font-size:15px;font-weight:800;background:#fff;color:#071b14}
.editPhones{margin:14px 0;padding:14px;border:1px solid #edf2ee;border-radius:18px;background:#fbfdfb}
.dangerSave{width:100%;margin-top:14px;background:#111827}
.detailBundle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.detailBundle h3{grid-column:1/-1;margin:0}
.subBox{display:grid;gap:8px;border:1px solid #e4ece8;border-radius:18px;padding:14px;background:#fbfdfb;align-content:start}
.subBox b{font-size:15px;color:#0b6b49}.subBox span{color:#7a8a83;font-weight:800}.miniRows{display:grid;gap:6px;max-height:220px;overflow:auto}.miniRows p{margin:0;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid #edf2ee;font-size:12px;font-weight:800;color:#25342e}
.notice.ok{border:1px solid #b9dfcf;background:#effaf4;color:#08744c;border-radius:16px;padding:12px 14px;font-weight:900}
@media(max-width:980px){.adminSearch .searchBar,.adminSearchGrid,.detailBundle{grid-template-columns:1fr}.adminSearch .editor{position:static}.editGrid{grid-template-columns:1fr}}

.subjectLineage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.subjectLineage article{min-width:0;border:1px solid #dfeae4;border-radius:16px;background:linear-gradient(135deg,#fff,#f8fcf9);padding:12px;display:grid;gap:5px}
.subjectLineage span{color:#6a7b73;font-size:12px;font-weight:900}
.subjectLineage b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#102018;font-size:15px;font-weight:950}
.adminSearch .tableWrap table{min-width:1680px}
.subjectSheet{padding:16px}
.subjectEditSheet{max-height:calc(100vh - 260px);overflow:auto}
.subjectEditSheet th{top:0;z-index:2}
.subjectEditSheet td{padding:7px;vertical-align:middle;background:#fff}
.subjectEditSheet tr.dirtyRow td{background:#fffdf2}
.subjectEditSheet .fixedId{font-weight:950;color:#0b6b49;background:#f3fbf7;position:sticky;left:0;z-index:1}
.subjectEditSheet input,.subjectEditSheet select,.subjectEditSheet textarea{width:100%;min-width:120px;border:1px solid #dbe7e1;border-radius:9px;background:#fff;padding:8px 9px;font-size:13px;font-weight:800;color:#102018}
.subjectEditSheet textarea{min-width:260px;resize:vertical;line-height:1.35}
.subjectEditSheet select{min-width:150px}
.subjectEditSheet .sheetSave{min-width:72px;border-radius:10px;background:#10241b;color:#fff;padding:9px 12px;font-size:13px;font-weight:950}
.subjectEditSheet .sheetSave:disabled{background:#d4ded8;color:#7a8a83;cursor:not-allowed}
body:has(.adminFullWidth) .layout{grid-template-columns:1fr}
body:has(.adminFullWidth){overflow-x:hidden}
body:has(.adminFullWidth) .layout{max-width:100vw;overflow:hidden}
body:has(.adminFullWidth) .layout,.layout:has(.adminFullWidth){display:block!important;grid-template-columns:none!important;width:100vw;max-width:100vw}
body:has(.adminFullWidth) .side{display:none}
body:has(.adminFullWidth) .side b{font-size:23px}
body:has(.adminFullWidth) .side nav button{padding:13px 14px;font-size:16px;border-radius:14px}
body:has(.adminFullWidth) .main{width:100%;max-width:100vw;min-width:0;overflow:hidden;padding:20px 18px 72px}
.layout:has(.adminFullWidth) .main{display:block!important;width:100%!important;max-width:100vw!important;min-width:0!important;overflow:hidden!important}
body:has(.adminFullWidth) .layout.admin > .main > header{margin-bottom:16px}
body:has(.adminFullWidth) .adminTabs{margin-bottom:12px}
.adminSearch .searchBar{grid-template-columns:minmax(170px,260px) minmax(240px,1fr) auto;padding:16px;border-radius:22px}
.structuredSearch{display:grid;grid-template-columns:minmax(180px,260px) repeat(3,minmax(120px,1fr)) auto auto;align-items:end;gap:10px;padding:14px 16px;border-radius:22px}
.structuredSearch div{display:grid;gap:4px}
.structuredSearch span,.structuredSearch label{color:#66756e;font-size:12px;font-weight:900}
.structuredSearch b{font-size:16px;color:#102018}
.structuredSearch label{display:grid;gap:5px}
.structuredSearch input{min-height:42px;border-radius:12px;padding:9px 11px;font-size:14px;font-weight:850}
.structuredSearch button{min-height:42px;border-radius:12px;background:#0c9f67;color:#fff;padding:0 14px;font-size:13px;font-weight:950}
.structuredSearch .softButton{background:#eef5ef;color:#273a31}
.adminSearch{width:100%;max-width:100%;min-width:0;overflow:hidden}
.subjectSheet{width:100%;max-width:100%;min-width:0;overflow:hidden;padding:12px;border-radius:22px}
.subjectSheet h3{margin:0 0 10px;font-size:20px}
.subjectEditSheet{width:100%;max-width:100%;min-width:0;max-height:calc(100vh - 230px);overflow:auto;border-radius:14px}
.subjectEditSheet table{width:100%;min-width:1180px;table-layout:fixed;font-size:11px}
.subjectEditSheet th{padding:8px 6px;font-size:12px}
.subjectEditSheet td{padding:5px}
.subjectEditSheet input,.subjectEditSheet select,.subjectEditSheet textarea{min-width:0;border-radius:7px;padding:5px 6px;font-size:11px}
.subjectEditSheet textarea{min-width:0;height:46px}
.subjectEditSheet .sheetSave{min-width:0;width:100%;padding:7px 6px;font-size:12px}
.subjectEditSheet th:nth-child(1),.subjectEditSheet td:nth-child(1){width:58px}
.subjectEditSheet th:nth-child(2),.subjectEditSheet td:nth-child(2){width:68px}
.subjectEditSheet th:nth-child(3),.subjectEditSheet td:nth-child(3){width:88px}
.subjectEditSheet th:nth-child(4),.subjectEditSheet td:nth-child(4){width:88px}
.subjectEditSheet th:nth-child(5),.subjectEditSheet td:nth-child(5){width:78px}
.subjectEditSheet th:nth-child(6),.subjectEditSheet td:nth-child(6){width:72px}
.subjectEditSheet th:nth-child(7),.subjectEditSheet td:nth-child(7){width:78px}
.subjectEditSheet th:nth-child(8),.subjectEditSheet td:nth-child(8){width:92px}
.subjectEditSheet th:nth-child(9),.subjectEditSheet td:nth-child(9),.subjectEditSheet th:nth-child(10),.subjectEditSheet td:nth-child(10){width:60px}
.subjectEditSheet th:nth-child(11),.subjectEditSheet td:nth-child(11){width:106px}
.subjectEditSheet .checkCell{width:34px;text-align:center}
.subjectEditSheet .checkCell input{width:16px;min-width:16px;height:16px;padding:0;accent-color:#0c9f67}
.subjectEditSheet .memoCell{width:150px}
.subjectEditSheet .sourceCell{width:68px;overflow:hidden;text-overflow:ellipsis}
.subjectEditSheet .saveCell{width:50px}
.subjectEditSheet th:nth-child(1),.subjectEditSheet td:nth-child(1){width:54px}
.subjectEditSheet th:nth-child(2),.subjectEditSheet td:nth-child(2){width:60px}
.subjectEditSheet th:nth-child(3),.subjectEditSheet td:nth-child(3){width:60px}
.subjectEditSheet th:nth-child(4),.subjectEditSheet td:nth-child(4){width:58px}
.subjectEditSheet th:nth-child(5),.subjectEditSheet td:nth-child(5){width:72px}
.subjectEditSheet th:nth-child(6),.subjectEditSheet td:nth-child(6){width:72px}
.subjectEditSheet th:nth-child(7),.subjectEditSheet td:nth-child(7){width:70px}
.subjectEditSheet th:nth-child(8),.subjectEditSheet td:nth-child(8){width:64px}
.subjectEditSheet th:nth-child(9),.subjectEditSheet td:nth-child(9){width:72px}
.subjectEditSheet th:nth-child(10),.subjectEditSheet td:nth-child(10){width:84px}
.subjectEditSheet th:nth-child(11),.subjectEditSheet td:nth-child(11),.subjectEditSheet th:nth-child(12),.subjectEditSheet td:nth-child(12){width:54px}
.subjectEditSheet th:nth-child(13),.subjectEditSheet td:nth-child(13),.subjectEditSheet th:nth-child(14),.subjectEditSheet td:nth-child(14){width:82px}
.subjectEditSheet .checkCell{padding:2px;text-align:center}
.subjectEditSheet .checkCell input{width:13px;min-width:13px;height:13px}
.subjectEditSheet .memoCell textarea{width:100%;min-width:0}
.subjectEditSheet .sourceCell input{width:100%;min-width:0}
.subjectEditSheet .saveCell button{width:100%;min-width:0}
@media(max-width:980px){.subjectLineage{grid-template-columns:1fr 1fr}}
@media(max-width:980px){body:has(.adminFullWidth) .layout{grid-template-columns:1fr}body:has(.adminFullWidth) .side{display:none}.adminSearch .searchBar,.structuredSearch{grid-template-columns:1fr}.subjectEditSheet table{min-width:1080px}}
@media(max-width:620px){.subjectLineage{grid-template-columns:1fr}.subjectEditSheet table{min-width:980px}.subjectEditSheet th,.subjectEditSheet td{padding:4px}.subjectEditSheet input,.subjectEditSheet select,.subjectEditSheet textarea{font-size:11px;padding:5px}}

/* charge/accrual split */
.segmented {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 1px solid #dce7df;
  border-radius: 16px;
  background: #f7fbf8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.segmented button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: transparent;
  color: #496158;
  font-weight: 900;
  cursor: pointer;
}
.segmented button.active {
  background: #0fa56b;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15,165,107,.24);
}
.segmented.compact button {
  padding: 8px 11px;
  font-size: 13px;
}
.calcBox {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #cfe9dc;
  border-radius: 18px;
  background: linear-gradient(135deg, #f3fff8 0%, #ffffff 100%);
  box-shadow: 0 14px 32px rgba(25,89,60,.08);
}
.calcBox.small {
  padding: 12px;
  border-radius: 14px;
}
.calcBox .calcTitle {
  margin-bottom: 10px;
  color: #047448;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.02em;
}
.calcRows {
  display: grid;
  gap: 8px;
}
.calcRows .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #53645d;
  font-size: 13px;
  font-weight: 800;
}
.calcRows .row strong {
  color: #07130d;
  font-size: 14px;
}
.calcRows .row.total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #dcefe4;
  color: #003d27;
}
.calcRows .row.total strong {
  color: #008b57;
  font-size: 17px;
}
.calcHint {
  margin-top: 10px;
  color: #6e7f77;
  font-size: 12px;
  font-weight: 750;
}
@media (max-width: 760px) {
  .segmented {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .segmented button {
    padding: 9px 7px;
  }
}

.metricGrid.compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.metricGrid.compact > div {
  padding: 12px;
  border: 1px solid #dbe9e1;
  border-radius: 14px;
  background: #f8fcfa;
}
.metricGrid.compact span {
  display: block;
  color: #6c7b74;
  font-size: 12px;
  font-weight: 800;
}
.metricGrid.compact strong {
  display: block;
  margin-top: 4px;
  color: #07130d;
  font-size: 20px;
  font-weight: 950;
}

.segmented button.on {
  background: var(--ink);
  color: #fff;
}

.evidenceImage {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.inlineToggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-weight: 850;
}

.inlineToggle input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--mint);
}

.depositAdminWork {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.depositListCard,
.depositActionPanel {
  min-width: 0;
}

.depositTableWrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.depositTableWrap table {
  width: max(760px, 100%);
  table-layout: fixed;
}

.depositTableWrap th,
.depositTableWrap td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.depositTableWrap td b,
.depositTableWrap td small {
  display: block;
}

.depositTableWrap th:nth-child(1) { width: 76px; }
.depositTableWrap th:nth-child(2) { width: 190px; }
.depositTableWrap th:nth-child(3) { width: 88px; }
.depositTableWrap th:nth-child(4) { width: 124px; }
.depositTableWrap th:nth-child(5) { width: 112px; }
.depositTableWrap th:nth-child(6) { width: 66px; }
.depositTableWrap th:nth-child(7) { width: 104px; }

.depositActionPanel .kv {
  min-width: 0;
}

.depositActionPanel .kv b {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .depositAdminWork {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* premium user typography pass */
:root {
  --font-ui: "SUIT", "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ink: #0b1511;
  --muted: #66736d;
  --line: #dce7e1;
  --mint: #0fa56b;
  --deep: #071a14;
  --soft: #f3faf6;
  --shadow: 0 24px 70px rgba(18, 54, 38, .12);
}
html {
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-ui);
  font-weight: 720;
  letter-spacing: -.025em;
  background:
    radial-gradient(circle at 8% 4%, rgba(16, 185, 129, .16), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(6, 95, 70, .09), transparent 28%),
    linear-gradient(145deg, #fbfdf8 0%, #eef7f1 48%, #f8fbf7 100%);
}
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  letter-spacing: -.026em;
}
button {
  font-weight: 820;
}
input,
select,
textarea {
  min-height: 52px;
  border-radius: 18px;
  padding: 14px 16px;
  color: #0b1511;
  font-size: 16px;
  font-weight: 720;
}
h1,
h2,
h3,
p {
  letter-spacing: -.045em;
}
h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.04;
  font-weight: 900;
}
h2 {
  font-size: clamp(23px, 2.3vw, 32px);
  line-height: 1.12;
  font-weight: 880;
}
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(340px, 430px);
  align-items: stretch;
  justify-content: center;
  gap: 18px;
  padding: clamp(18px, 4vw, 44px);
}
.authHero,
.authForm {
  border: 1px solid rgba(220, 231, 225, .9);
  border-radius: 34px;
  box-shadow: 0 28px 76px rgba(13, 43, 30, .14);
}
.authHero {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 52px);
  color: #fff;
  background:
    radial-gradient(circle at 22% 18%, rgba(185, 255, 220, .26), transparent 28%),
    linear-gradient(138deg, #071913 0%, #0b4734 46%, #0ea56c 100%);
  align-content: end;
}
.authHero::before,
.authHero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.authHero::before {
  width: 280px;
  height: 280px;
  right: -80px;
  top: -70px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}
.authHero::after {
  width: 180px;
  height: 180px;
  left: 48px;
  bottom: 58px;
  background: rgba(255, 255, 255, .08);
  filter: blur(2px);
}
.authBrand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.authBrand b {
  color: #fff;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
  font-weight: 930;
  letter-spacing: -.075em;
}
.authMark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: #fff;
  color: #08744c;
  font-size: 29px;
  font-weight: 950;
  box-shadow: 0 20px 42px rgba(0, 0, 0, .18);
}
.authLines {
  position: absolute;
  left: clamp(28px, 5vw, 52px);
  right: clamp(28px, 5vw, 52px);
  top: clamp(28px, 5vw, 52px);
  display: grid;
  gap: 10px;
  opacity: .78;
}
.authLines i {
  display: block;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255,255,255,.72), rgba(255,255,255,0));
}
.authLines i:nth-child(2) {
  width: 72%;
}
.authLines i:nth-child(3) {
  width: 48%;
}
.authForm {
  align-content: center;
  gap: 16px;
  padding: clamp(24px, 4vw, 38px);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
}
.authForm label,
.form label,
.phones label {
  gap: 9px;
  color: #56635d;
  font-size: 14px;
  font-weight: 790;
}
.authForm input {
  height: 58px;
  border-radius: 18px;
  background: #fbfdfb;
  font-size: 17px;
  font-weight: 760;
}
.switch {
  gap: 6px;
  padding: 5px;
  border-radius: 18px;
  background: #eef6f1;
}
.switch button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
  color: #587067;
  font-size: 15px;
  font-weight: 840;
}
.switch button.on {
  color: #063d2d;
  background: #fff;
  box-shadow: 0 10px 26px rgba(13, 72, 49, .1);
}
.authSubmit {
  display: grid;
  place-items: center;
  min-height: 58px;
  margin-top: 2px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 880;
}
.authSubmit.disabled {
  opacity: .72;
  cursor: progress;
}
.side:not(.dark) {
  width: 292px;
  padding: 30px 24px;
  background: rgba(255, 255, 255, .84);
}
.side:not(.dark) b {
  font-size: 26px;
  line-height: 1;
  font-weight: 920;
}
.side:not(.dark) nav button {
  min-height: 54px;
  padding: 0 18px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 820;
}
.main {
  padding: 32px clamp(22px, 3vw, 42px) 90px;
}
header {
  margin-bottom: 26px;
}
header p {
  margin: 0;
  font-size: 14px;
  font-weight: 820;
}
header button,
.me button {
  min-height: 44px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 820;
}
.hero,
.card {
  border-radius: 30px;
  padding: clamp(20px, 2.2vw, 28px);
}
.hero input {
  height: 66px;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 840;
}
.hero form button,
.primary {
  min-height: 58px;
  border-radius: 20px;
  font-weight: 880;
}
.result h3 {
  font-size: clamp(23px, 2.2vw, 28px);
  line-height: 1.12;
  font-weight: 900;
}
.result dl span,
.metrics article,
.metrics button {
  border-radius: 20px;
}
.result dt,
.metrics span,
.detail span {
  font-size: 13px;
  font-weight: 780;
}
.result dd,
.metrics b {
  font-weight: 860;
}
@media(max-width: 900px) {
  .auth {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .authHero {
    min-height: 210px;
    border-radius: 28px;
  }
  .authBrand b {
    font-size: 38px;
  }
  .authMark {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }
}

/* Toss/KakaoBank/Daangn inspired user app pass */
body {
  background:
    radial-gradient(circle at 6% 0%, rgba(40, 199, 129, .12), transparent 32%),
    linear-gradient(180deg, #f7faf8 0%, #f2f6f4 100%);
}
.layout {
  grid-template-columns: 260px minmax(0, 1fr);
}
.side:not(.dark) {
  margin: 18px 0 18px 18px;
  height: calc(100vh - 36px);
  border: 1px solid rgba(220, 231, 225, .9);
  border-radius: 30px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 22px 55px rgba(25, 50, 38, .08);
}
.side:not(.dark) b {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 23px;
}
.side:not(.dark) b::before {
  content: "";
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: linear-gradient(135deg, #22c878, #0b7c55);
  box-shadow: 0 12px 26px rgba(12, 139, 91, .22);
}
.side:not(.dark) nav {
  gap: 6px;
}
.side:not(.dark) nav button {
  min-height: 50px;
  border-radius: 16px;
  color: #4e5d56;
  font-size: 16px;
  font-weight: 760;
}
.side:not(.dark) nav button.on {
  background: #e8f7ef;
  color: #05724d;
  box-shadow: inset 0 0 0 1px rgba(11, 124, 85, .06);
}
.me {
  border: 0;
  border-radius: 24px;
  background: #f7fbf8;
  box-shadow: none;
}
.me strong {
  font-size: 16px;
  font-weight: 840;
}
.main {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 34px clamp(24px, 4vw, 54px) 96px;
}
header {
  align-items: flex-start;
  margin-bottom: 22px;
}
header p {
  margin-top: 6px;
  color: #7a8881;
  font-size: 13px;
  font-weight: 760;
}
header h1 {
  font-size: clamp(34px, 4vw, 50px);
  letter-spacing: -.07em;
}
header button,
.me button {
  background: #fff;
  border: 1px solid #e2ebe6;
  box-shadow: 0 10px 28px rgba(30, 55, 42, .08);
}
.stack {
  gap: 18px;
}
.hero {
  border: 0;
  border-radius: 34px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.86)),
    radial-gradient(circle at 10% 12%, rgba(21, 181, 116, .15), transparent 28%);
  box-shadow: 0 26px 70px rgba(20, 60, 42, .11);
}
.hero form {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px;
}
.hero input {
  height: 64px;
  border: 1px solid #e3ece7;
  border-radius: 24px;
  background: #f8fbf9;
  color: #121a16;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 760;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.hero form button {
  min-height: 64px;
  border-radius: 24px;
  background: #111b16;
  box-shadow: 0 18px 34px rgba(17, 27, 22, .18);
}
.metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.metrics article,
.metrics button {
  min-height: 94px;
  border: 0;
  border-radius: 26px;
  padding: 18px 18px 16px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(26, 51, 38, .075);
}
.metrics span {
  color: #77857f;
  font-size: 13px;
  font-weight: 740;
}
.metrics b {
  margin-top: 4px;
  color: #111a16;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  font-weight: 890;
  letter-spacing: -.055em;
}
.metrics small {
  font-size: 12px;
  font-weight: 680;
}
.metrics button {
  align-content: center;
  background: linear-gradient(135deg, #111b16, #203529);
  color: #fff;
  font-size: 18px;
}
.split {
  grid-template-columns: minmax(0, 1fr) minmax(310px, 380px);
  gap: 18px;
}
.card {
  border: 0;
  border-radius: 32px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 22px 58px rgba(29, 53, 40, .09);
}
.head {
  margin-bottom: 14px;
}
.head span {
  font-size: 13px;
  font-weight: 720;
}
.empty {
  border: 0;
  border-radius: 28px;
  background: #f8fbf9;
  color: #6f7f77;
}
.empty b {
  font-size: 21px;
  font-weight: 850;
}
.result {
  border: 0;
  border-radius: 28px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(22, 48, 35, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.result:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(22, 48, 35, .12);
}
.result mark {
  background: #eef9f3;
  color: #047448;
}
.detail {
  top: 22px;
}
.bottom {
  border-radius: 26px;
}
@media(max-width:1100px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .main {
    padding: 24px 16px 96px;
  }
  header h1 {
    font-size: 36px;
  }
  .hero {
    border-radius: 30px;
  }
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split {
    grid-template-columns: 1fr;
  }
}
@media(max-width:720px) {
  header {
    align-items: center;
  }
  header p {
    display: none;
  }
  .hero form {
    grid-template-columns: 1fr;
  }
  .hero form button {
    min-height: 56px;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .metrics article,
  .metrics button {
    min-height: 86px;
    border-radius: 22px;
  }
}

.searchHero {
  display: grid;
  gap: 18px;
}
.onestopAdBanner {
  width: 100%;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(22, 163, 116, .26);
  border-radius: clamp(18px, 2.6vw, 30px);
  background: #eafff5;
  box-shadow: 0 18px 44px rgba(7, 132, 88, .14);
  text-align: left;
}
.onestopAdBanner picture,
.onestopAdBanner img {
  display: block;
  width: 100%;
}
.onestopAdBanner img {
  height: auto;
  object-fit: contain;
}
.onestopAdBanner:focus-visible {
  outline: 4px solid rgba(17, 183, 125, .32);
  outline-offset: 4px;
}
.onestopAdBanner:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 52px rgba(7, 132, 88, .2);
}
.accountSplit {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
  gap: 12px;
}
.accountCard {
  min-width: 0;
  border-radius: 28px;
  padding: 18px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1px rgba(226, 235, 230, .88);
}
.accountTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.accountTop span {
  color: #66736d;
  font-size: 13px;
  font-weight: 790;
}
.accountTop button {
  min-height: 34px;
  border-radius: 999px;
  background: #111b16;
  color: #fff;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 820;
}
.accountStats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.accountStats.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.accountStats article {
  min-width: 0;
  display: grid;
  gap: 6px;
  border-radius: 22px;
  padding: 15px 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(26, 51, 38, .06);
}
.accountStats b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0d1712;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.055em;
}
.accountStats small {
  color: #7b8982;
  font-size: 12px;
  font-weight: 760;
}
.resultPanel {
  display: grid;
  gap: 12px;
}
.resultCard {
  display: grid;
  gap: 14px;
  border-radius: 28px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(22, 48, 35, .08);
  cursor: pointer;
}
.resultCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.resultCardTop button {
  min-height: 34px;
  border-radius: 999px;
  background: #eef7f2;
  color: #05724d;
  padding: 0 13px;
  font-size: 13px;
}
.resultCard .badge {
  width: fit-content;
  border-radius: 999px;
  background: #eef9f3;
  color: #047448;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 840;
}
.resultCard h3 {
  margin: 0;
  color: #101914;
  font-size: clamp(24px, 2.4vw, 31px);
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -.06em;
}
.resultCard dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}
.resultCard dl span {
  min-width: 0;
  border-radius: 18px;
  background: #f7faf8;
  padding: 13px;
}
.resultCard dt {
  color: #7b8982;
  font-size: 12px;
  font-weight: 760;
}
.resultCard dd {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 5px 0 0;
  color: #111a16;
  font-weight: 850;
}
.searchNotice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 18px;
  padding: 10px 14px;
  background: #f4faf6;
  color: #596960;
  font-size: 13px;
  font-weight: 780;
}
.searchNotice b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: #e4f6ed;
  color: #05724d;
  font-size: 12px;
  font-weight: 860;
}
.searchReadiness {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  border: 1px solid #ddebe4;
  border-radius: 18px;
  padding: 11px 13px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(24, 65, 45, .06);
}
.searchReadiness span {
  display: grid;
  place-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #edf7f1;
  color: #087c54;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}
.searchReadiness b {
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #263b31;
  font-size: 13px;
  font-weight: 900;
}
.searchReadiness.blocked {
  border-color: #ffd3d3;
  background: #fff8f8;
}
.searchReadiness.blocked span {
  background: #ffe7e7;
  color: #b42318;
}
.searchReadiness.blocked b {
  color: #9f1d1d;
}
.activityWarningBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -8px 0 22px;
  border: 1px solid #ffe0b5;
  border-radius: 18px;
  background: #fff8eb;
  color: #5d3b04;
  padding: 14px 16px;
  box-shadow: 0 14px 34px rgba(96, 58, 6, .08);
}
.activityWarningBox.restricted {
  border-color: #ffc6c6;
  background: #fff1f1;
  color: #872525;
}
.activityWarningBox div {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.activityWarningBox span,
.activityWarningBox small {
  font-weight: 900;
}
.activityWarningBox strong {
  font-size: 15px;
  line-height: 1.45;
}
.activityWarningBox small {
  color: rgba(60, 39, 8, .72);
}
.activityWarningBox button {
  flex: 0 0 auto;
  border-radius: 14px;
  background: #111a16;
  color: white;
  padding: 12px 15px;
}
@media(max-width:720px) {
  .activityWarningBox {
    display: grid;
    margin: 0 0 18px;
  }
  .activityWarningBox button {
    width: 100%;
  }
}
.resultTags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.resultTags span {
  border-radius: 999px;
  padding: 7px 10px;
  background: #f3f8f5;
  color: #50645a;
  font-size: 12px;
  font-weight: 800;
}
.resultBatchStatus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  border: 1px solid #e1ece6;
  border-radius: 18px;
  padding: 10px 12px;
  background: #fbfefc;
  color: #51645b;
  font-size: 13px;
  font-weight: 850;
}
.resultBatchStatus button {
  border-radius: 999px;
  padding: 9px 13px;
  background: #10241b;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
}
.referenceHint {
  margin: 0;
  border-radius: 16px;
  padding: 11px 12px;
  background: #fff8ed;
  color: #98570a;
  font-size: 13px;
  font-weight: 820;
}
@media(max-width: 900px) {
  .accountSplit {
    grid-template-columns: 1fr;
  }
  .accountStats,
  .accountStats.two {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media(max-width: 560px) {
  .accountStats,
  .accountStats.two,
  .resultCard dl {
    grid-template-columns: 1fr;
  }
  .accountStats article {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .accountStats small {
    justify-self: end;
  }
}

.actionCard,
.settingsBlock {
  gap: 14px;
  align-content: start;
}
.actionCard h3,
.settingsBlock h3 {
  margin: 4px 0 0;
  color: #101914;
  font-size: 22px;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.055em;
}
.actionCard span,
.settingsBlock span,
.actionCard label,
.settingsBlock label {
  color: #68776f;
  font-size: 13px;
  font-weight: 780;
}
.actionCard input,
.actionCard select,
.settingsBlock input {
  min-height: 50px;
  border-radius: 16px;
  background: #fbfdfb;
  font-size: 15px;
  font-weight: 740;
}
.actionCard .primary,
.settingsBlock button {
  width: 100%;
  min-height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  padding: 0 18px;
  background: #111b16;
  color: #fff;
  font-size: 15px;
  font-weight: 860;
  box-shadow: 0 14px 30px rgba(17, 27, 22, .15);
}
.actionCard .primary:disabled,
.settingsBlock button:disabled {
  background: #cfdad4;
  color: #fff;
  box-shadow: none;
  cursor: not-allowed;
}
.depositPolicySummary {
  display: grid;
  grid-template-columns: minmax(84px, auto) minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbf8;
  padding: 12px;
}
.depositPolicySummary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}
.depositPolicySummary b,
.depositPolicySummary code {
  min-width: 0;
  color: #10241b;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.depositImagePicker {
  display: grid;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7fbf8;
  padding: 12px;
}
.depositImagePicker button {
  min-height: 42px;
  border-radius: 14px;
  background: #10241b;
  color: #fff;
  font-weight: 850;
}
.depositImagePicker button:disabled {
  background: #cfdad4;
}
.depositImagePicker small,
.depositImagePicker em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
  line-height: 1.45;
}
.depositImagePicker img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.quickRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.quickRow button {
  min-height: 40px;
  border-radius: 14px;
  background: #f2f7f4;
  color: #5f6f67;
  font-size: 14px;
  font-weight: 820;
}
.quickRow button.active {
  background: #e4f6ed;
  color: #05724d;
  box-shadow: inset 0 0 0 1px rgba(5, 114, 77, .08);
}
.notice,
.notice.ok {
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: #eef9f3;
  color: #047448;
  font-size: 13px;
  font-weight: 820;
}

.richDetail{max-height:calc(100vh - 48px);overflow:auto}.detailFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.detailFacts p{margin:0;border:1px solid var(--line);border-radius:16px;background:#f8fbf9;padding:12px;display:grid;gap:4px}.detailFacts b{font-size:12px;color:var(--muted)}.detailSummary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.detailSummary article{border:1px solid var(--line);border-radius:16px;background:#fbfefb;padding:12px;display:grid;gap:5px}.detailSummary b{font-size:22px}.detailChips{display:flex;flex-wrap:wrap;gap:8px}.detailChips b{border-radius:999px;background:#10241b;color:#d5f6e7;padding:9px 12px;font-size:13px}.detailFeed{display:grid;gap:10px}.detailFeed article{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px;display:grid;gap:5px}.detailFeed article b{color:#087c54}.detailFeed article span{color:var(--muted)}.detailFeed article p{margin:0;white-space:pre-wrap;line-height:1.5}.detailFeed.compact article{background:#f8fbf9}.richDetail .hint{margin:0;color:var(--muted);font-weight:850}

.resultOnly{grid-template-columns:1fr}.detailOverlay{position:fixed;inset:0;z-index:80;background:rgba(8,18,14,.38);display:grid;place-items:center;padding:22px}.detailSheet{position:relative;width:min(720px,calc(100vw - 28px));max-height:calc(100vh - 34px);display:grid}.detailOverlay .richDetail{position:static;max-height:calc(100vh - 34px);overflow:auto;border-radius:30px}.detailClose{position:absolute;right:16px;top:16px;z-index:2;border-radius:999px;background:#10241b;color:#fff;padding:10px 14px;box-shadow:0 12px 28px rgba(0,0,0,.18)}.compactChips b{padding:7px 10px;font-size:12px}.richDetail .memo{margin:0;background:#f8fbf9;border:1px solid var(--line);border-radius:16px;padding:12px;line-height:1.58}@media(max-width:720px){.detailOverlay{align-items:end;padding:10px}.detailSheet{width:100%;max-height:86vh}.detailOverlay .richDetail{max-height:86vh;border-radius:26px 26px 18px 18px;padding-top:52px}.detailClose{top:12px;right:12px}.detailFacts,.detailSummary{grid-template-columns:1fr}}

.resultRelation{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:-4px}.resultRelation b,.resultRelation span{border-radius:999px;padding:8px 11px;font-size:13px;font-weight:900}.resultRelation b{background:#10241b;color:#d5f6e7}.resultRelation span{background:#fff7ed;color:#9a4b08;border:1px solid #fed7aa}

.linkedItem{cursor:pointer;position:relative}.linkedItem:hover{border-color:#0ca66d;background:#f0fbf5}.linkedItem em{position:absolute;right:12px;top:12px;font-style:normal;border-radius:999px;background:#10241b;color:#fff;padding:6px 9px;font-size:11px;font-weight:900}

.separatedSection{border:1px solid var(--line);border-radius:22px;padding:14px;background:#fff}.separatedSection h3{margin-bottom:10px}.commentSection{border-color:#d8f3e4;background:#fbfffc}.linkedSection{border-color:#fde6bf;background:#fffaf0}.historySection{border-color:#dbeafe;background:#f8fbff}.historySection .detailFeed article b{color:#1d4ed8}.commentSection .detailFeed article b{color:#087c54}.linkedSection .detailFeed article b{padding-right:64px;color:#9a4b08}
.commentComposer{display:grid;gap:10px;margin:0 0 12px}.commentComposer textarea{min-height:92px;resize:vertical;background:#fff}.commentComposer>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.commentComposer span{color:var(--muted);font-size:13px;font-weight:850}.commentComposer button{border-radius:14px;background:#10241b;color:#fff;padding:11px 15px;white-space:nowrap}.commentComposer button:disabled{cursor:not-allowed;background:#dbe7df;color:#6f8078}.commentComposer .error{margin:0}@media(max-width:720px){.commentComposer>div{display:grid}.commentComposer button{width:100%}}

.searchFilterRail{display:flex;gap:8px;overflow:auto;padding:2px 0 4px;scrollbar-width:none}.searchFilterRail::-webkit-scrollbar{display:none}.searchFilterRail button{display:grid;grid-template-columns:auto auto;align-items:center;gap:3px 7px;flex:0 0 auto;max-width:min(320px,72vw);border:1px solid var(--line);border-radius:18px;background:#fff;color:#20312a;padding:10px 13px;font-weight:950;text-align:left;box-shadow:0 10px 24px rgba(22,74,54,.06)}.searchFilterRail button em{grid-column:1/3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;color:var(--muted);font-size:12px;font-weight:850}.searchFilterRail button b{min-width:24px;border-radius:999px;background:#edf7f1;color:#087c54;padding:3px 7px;font-size:12px;text-align:center}.searchFilterRail button.active{background:#10241b;color:#fff;border-color:#10241b}.searchFilterRail button.active em{color:#bfe7d2}.searchFilterRail button.active b{background:#20c987;color:#052016}.resultCardTop .badge{font-variant-numeric:tabular-nums}

.scrollTopButton{position:fixed;left:50%;right:auto;bottom:86px;transform:translateX(-50%);z-index:60;border-radius:999px;background:#10241b;color:#fff;padding:14px 19px;font-weight:950;box-shadow:0 18px 42px rgba(0,0,0,.22)}@media(max-width:720px){.scrollTopButton{bottom:82px;padding:13px 18px}}

.resultGroup{display:grid;gap:12px;margin-bottom:18px}.resultGroupHead{position:sticky;top:8px;z-index:3;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);padding:12px 14px;box-shadow:0 12px 30px rgba(20,55,42,.08)}.resultGroupHead b{font-size:18px}.resultGroupHead span{border-radius:999px;background:#edf7f1;color:#087c54;padding:6px 10px;font-weight:950}


/* search insight filter refinement */
.searchInsightPanel{display:grid;gap:12px;border:1px solid rgba(216,231,224,.92);border-radius:26px;background:linear-gradient(135deg,#ffffff,#f6fbf8);padding:16px;box-shadow:0 18px 42px rgba(24,65,45,.08)}
.insightHead{display:flex;align-items:center;justify-content:space-between;gap:12px}.insightHead span{color:#6c7c74;font-size:13px;font-weight:850}.insightHead strong{border-radius:999px;background:#10241b;color:#fff;padding:7px 11px;font-size:13px;font-weight:950}.insightValues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.insightValues button{position:relative;min-width:0;display:grid;gap:5px;text-align:left;border:1px solid #e1ece6;border-radius:20px;background:#fff;padding:14px 40px 14px 14px;box-shadow:0 12px 28px rgba(27,57,41,.055)}.insightValues button span{color:#6f8078;font-size:12px;font-weight:850}.insightValues button b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#101914;font-size:17px;font-weight:930;letter-spacing:-.055em}.insightValues button em{position:absolute;right:12px;top:12px;display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#edf7f1;color:#047448;font-style:normal;font-size:12px;font-weight:950}.insightValues button.active{border-color:#10241b;background:#10241b}.insightValues button.active span,.insightValues button.active b{color:#fff}.insightValues button.active em{background:#20c987;color:#052016}.insightSegments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.insightSegments button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;border-radius:18px;padding:0 14px;background:#fff;border:1px solid #e1ece6;color:#18261f;font-weight:920}.insightSegments button span{font-size:14px}.insightSegments button b{display:grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:#f0f6f3;color:#0b6b49;font-size:13px}.insightSegments button.match{border-color:#bbf7d0;background:#f4fff8}.insightSegments button.similar{border-color:#fde68a;background:#fffdf3}.insightSegments button.forgery{border-color:#fecaca;background:#fff7f7}.insightSegments button.active{background:#10241b;color:#fff;border-color:#10241b;box-shadow:0 14px 30px rgba(16,36,27,.18)}.insightSegments button.active b{background:#20c987;color:#052016}.resultGroup-match .resultGroupHead{border-color:#bbf7d0}.resultGroup-similar .resultGroupHead{border-color:#fde68a}.resultGroup-forgery .resultGroupHead{border-color:#fecaca}
@media(max-width:720px){.insightValues{grid-template-columns:1fr}.insightSegments{grid-template-columns:repeat(2,minmax(0,1fr))}.searchInsightPanel{border-radius:24px;padding:14px}}

/* visible request progress */
.progressBoxWrap{
  position:fixed;
  right:22px;
  top:22px;
  z-index:120;
  width:min(360px,calc(100vw - 28px));
  pointer-events:none;
}
.progressBox{
  display:grid;
  gap:11px;
  border:1px solid rgba(189,219,205,.95);
  border-radius:24px;
  padding:16px;
  background:rgba(255,255,255,.96);
  box-shadow:0 24px 70px rgba(18,47,33,.18);
  backdrop-filter:blur(18px);
}
.progressBoxTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.progressBoxTop span{
  flex:0 0 auto;
  border-radius:999px;
  padding:7px 10px;
  background:#e8f8ef;
  color:#05724d;
  font-size:12px;
  font-weight:920;
}
.progressBoxTop b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#0d1712;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.04em;
}
.progressTrack,.detailProgressBox i,.inlineProgress i{
  display:block;
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#edf5f0;
}
.progressTrack i,.detailProgressBox em,.inlineProgress em{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#18c985,#087c54);
  box-shadow:0 0 18px rgba(24,201,133,.26);
}
.progressTrack i{
  transition:width .28s ease;
}
.progressMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#5f7068;
  font-size:13px;
  font-weight:820;
}
.progressMeta em{
  font-style:normal;
  color:#087c54;
  font-weight:950;
}
.progressBox p{
  margin:0;
  color:#7a8881;
  font-size:12px;
  font-weight:760;
  text-align:left;
}
.inlineProgress{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  border-radius:20px;
  padding:14px;
  background:#f7fbf8;
  color:#50645b;
  font-weight:850;
}
.inlineProgress b{
  color:#0e1c15;
}
.inlineProgress span{
  font-size:13px;
}
.inlineProgress i em{
  width:68%;
  animation:progressPulse 1.2s ease-in-out infinite alternate;
}
.detailLoading{
  min-height:320px;
  align-content:start;
}
.detailQuickFacts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}
.detailQuickFacts span{
  border:1px solid #dcebe3;
  border-radius:999px;
  background:#f8fbf9;
  padding:8px 11px;
  color:#334b40;
  font-size:13px;
  font-weight:850;
}
.detailProgressBox{
  display:grid;
  gap:12px;
  margin-top:8px;
  border:1px solid #dcebe3;
  border-radius:22px;
  padding:18px;
  background:linear-gradient(135deg,#fbfffc,#f1faf5);
}
.detailProgressBox b{
  color:#0f1d16;
  font-size:18px;
  font-weight:950;
}
.detailProgressBox i{
  height:12px;
}
.detailProgressBox em{
  width:72%;
  animation:progressPulse 1.05s ease-in-out infinite alternate;
}
.detailProgressBox p{
  margin:0;
  color:#687873;
  text-align:left;
  font-size:13px;
  font-weight:800;
}
@keyframes progressPulse{
  from{width:28%}
  to{width:92%}
}
@media(max-width:720px){
  .progressBoxWrap{
    left:12px;
    right:12px;
    top:12px;
    width:auto;
  }
  .progressBox{
    border-radius:20px;
    padding:14px;
  }
  .inlineProgress{
    grid-template-columns:1fr;
    gap:9px;
  }
}

.loadingStateBox {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid rgba(16, 185, 129, .26);
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff, #f4fbf7);
  box-shadow: 0 18px 42px rgba(19, 78, 52, .10);
}
.loadingStateBox div {
  display: grid;
  gap: 5px;
}
.loadingStateBox b {
  color: #102018;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.04em;
}
.loadingStateBox span {
  color: #5d7067;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.025em;
}
.loadingStateBox i {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #dcebe4;
}
.loadingStateBox i em {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12b76a, #079455);
  animation: progressPulse 1.25s ease-in-out infinite;
}
.detailProgressBox b {
  letter-spacing: -.04em;
}

.dashboardToolbar {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rangeTabs {
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid #dcebe4;
  border-radius: 999px;
  background: #f7fbf8;
}
.rangeTabs button {
  min-width: 62px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5d7067;
  font-weight: 900;
  letter-spacing: -.03em;
}
.rangeTabs button.on {
  background: #102018;
  color: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 24, .18);
}
.periodGraph .wideBars {
  display: grid;
  gap: 12px;
}
.periodGraph .wideBars article {
  display: grid;
  grid-template-columns: 130px 1fr 88px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #e2eee7;
  border-radius: 18px;
  background: #fff;
}
.periodGraph .wideBars b {
  color: #203228;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.035em;
}
.periodGraph .wideBars span {
  overflow: hidden;
  height: 13px;
  border-radius: 999px;
  background: #e6f0eb;
}
.periodGraph .wideBars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #12b76a, #087443);
}
.periodGraph .wideBars em {
  color: #0f2118;
  font-style: normal;
  font-size: 13px;
  font-weight: 950;
  text-align: right;
}
@media (max-width: 720px) {
  .periodGraph .wideBars article {
    grid-template-columns: 1fr;
  }
  .periodGraph .wideBars em {
    text-align: left;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .register .phones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .register .phones label {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}

.registerPreview {
  position: sticky;
  top: 22px;
  display: grid;
  gap: 16px;
}

@media (max-width: 1100px) {
  .registerPreview {
    position: static;
  }
}

@media (max-width: 720px) {
  .register .phones {
    grid-template-columns: 1fr;
  }
  .register .phones label {
    grid-template-columns: 1fr;
  }
}
/* Admin members: legacy-style full Excel sheet */
.adminMembers {
  display: grid;
  gap: 18px;
}

.memberSheetCard {
  width: 100%;
  max-width: 100%;
  border: 1px solid rgba(15, 70, 47, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 20px 54px rgba(22, 62, 44, 0.1);
  padding: 16px;
  overflow: hidden;
}

.memberFilterBar {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) 120px 120px 140px 150px 86px;
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
}

.memberFilterBar label {
  display: grid;
  gap: 5px;
  color: #52645d;
  font-size: 12px;
  font-weight: 900;
}

.memberFilterBar input,
.memberFilterBar select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d9e8df;
  border-radius: 12px;
  background: #fbfffc;
  color: #13251e;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 850;
  outline: none;
}

.memberFilterBar button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #13251e, #087b57);
  color: #fff;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
}

.memberSheetMeta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 4px 0 12px;
  color: #63776e;
  font-size: 13px;
  font-weight: 850;
}

.memberMoreBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #cfe4d8;
  border-radius: 16px;
  background: #f6fcf8;
  color: #436358;
  font-size: 13px;
  font-weight: 900;
}

.memberMoreBar button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: #10241b;
  color: #fff;
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
}

@media (max-width: 980px) {
  .memberFilterBar {
    grid-template-columns: 1fr;
  }

  .memberSheetMeta {
    display: grid;
  }

}

/* Admin members: task-first list and selected-member workspace */
.memberWorkspaceShell {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.memberFilterBar button,
.adminMembers .heroActions button,
.memberDetailPane button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.memberPriorityBand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: 12px;
  align-items: stretch;
}

.memberPrioritySummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.memberPrioritySummary button {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-content: center;
  text-align: left;
  border: 1px solid #d7e0dc;
  border-left: 4px solid #84928b;
  border-radius: 8px;
  background: #fff;
  color: #26332d;
  padding: 10px 12px;
  cursor: pointer;
}

.memberPrioritySummary button.critical { border-left-color: #c53b3b; }
.memberPrioritySummary button.attention { border-left-color: #c98218; }
.memberPrioritySummary button.normal { border-left-color: #27835e; }
.memberPrioritySummary button.all { border-left-color: #3567b7; }
.memberPrioritySummary button.active { border-color: #173f77; box-shadow: 0 0 0 2px rgba(53, 103, 183, .14); }
.memberPrioritySummary button span { font-size: 12px; font-weight: 900; }
.memberPrioritySummary button b { font-size: 22px; font-variant-numeric: tabular-nums; }
.memberPrioritySummary button small { grid-column: 1 / -1; color: #637169; font-size: 11px; font-weight: 750; }

.memberAiBoundary {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #cbd9e8;
  border-radius: 8px;
  background: #f3f7fc;
  color: #244f88;
  padding: 12px 14px;
}

.memberAiBoundary > span { display: grid; gap: 3px; }
.memberAiBoundary b { font-size: 13px; }
.memberAiBoundary small { color: #53677d; font-size: 11px; font-weight: 750; line-height: 1.45; }
.adminMembers .operationalAiAssistPanel { margin: 0; border-radius: 8px !important; }

.memberWorkspace {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid #d9e2de;
  border-radius: 8px;
  background: #fff;
}

.memberListPane {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-right: 1px solid #dfe6e2;
  background: #f5f7f6;
}

.memberPaneHead {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-bottom: 1px solid #dfe6e2;
  background: #fff;
}

.memberPaneHead > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.memberPaneHead span { color: #53615a; font-size: 12px; font-weight: 850; }
.memberPaneHead b { font-size: 14px; }
.memberPaneHead small { color: #6b7771; font-size: 11px; line-height: 1.4; }

.memberList {
  min-height: 0;
  max-height: calc(100vh - 330px);
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  scrollbar-color: #aab8b1 #eef2f0;
}

.memberListItem {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 108px;
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid #d9e2de;
  border-left: 4px solid #829088;
  border-radius: 8px;
  background: #fff;
  color: #1f2b25;
  padding: 11px 34px 11px 11px;
  cursor: pointer;
}

.memberListItem.priority-critical { border-left-color: #c53b3b; }
.memberListItem.priority-attention { border-left-color: #c98218; }
.memberListItem.priority-normal { border-left-color: #27835e; }
.memberListItem.selected { border-color: #3567b7; background: #f2f6fd; box-shadow: 0 0 0 2px rgba(53, 103, 183, .12); }
.memberListItem:focus-visible { outline: 3px solid rgba(53, 103, 183, .32); outline-offset: 1px; }
.memberListItem > svg { position: absolute; right: 10px; top: calc(50% - 9px); color: #66736d; }

.memberListIdentity { min-width: 0; display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.memberListIdentity > span { min-width: 0; display: grid; gap: 2px; }
.memberListIdentity strong { overflow-wrap: anywhere; font-size: 14px; }
.memberListIdentity small { overflow-wrap: anywhere; color: #68766f; font-size: 11px; }
.memberListIdentity em { flex: 0 0 auto; border-radius: 999px; background: #eef2f0; color: #4d5b54; padding: 4px 7px; font-size: 10px; font-style: normal; font-weight: 900; }
.priority-critical .memberListIdentity em { background: #fff0f0; color: #a92c2c; }
.priority-attention .memberListIdentity em { background: #fff6e7; color: #966013; }
.priority-normal .memberListIdentity em { background: #edf8f3; color: #1d6d4d; }

.memberListFacts { display: flex; flex-wrap: wrap; gap: 5px; }
.memberListFacts span { border: 1px solid #e0e6e3; border-radius: 999px; background: #f8faf9; color: #435149; padding: 3px 6px; font-size: 10px; font-weight: 800; }
.memberListReason { overflow-wrap: anywhere; color: #4f5e56; font-size: 11px; font-weight: 800; line-height: 1.4; }

.memberListPane .memberMoreBar { margin: 0; border-width: 1px 0 0; border-radius: 0; background: #fff; }

.memberDetailPane {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-content: start;
  background: #fff;
}

.memberDetailHead {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid #e1e7e4;
}

.memberBackButton { display: none !important; }
.memberDetailIdentity { min-width: 0; flex: 1; display: flex; align-items: center; gap: 10px; }
.memberDetailIdentity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.memberDetailIdentity small { color: #5c6a63; font-size: 11px; font-weight: 900; }
.memberDetailIdentity h2 { margin: 0; overflow-wrap: anywhere; font-size: 22px; letter-spacing: 0; }
.memberDetailIdentity p { margin: 0; overflow-wrap: anywhere; color: #66746d; font-size: 12px; font-weight: 750; }
.memberPrioritySignal { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #edf8f3; color: #1d6d4d; }
.memberPrioritySignal.priority-critical { background: #fff0f0; color: #b12e2e; }
.memberPrioritySignal.priority-attention { background: #fff6e7; color: #9a6415; }

.memberDetailBadges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.memberDetailBadges span { border: 1px solid #dbe3df; border-radius: 999px; background: #f6f8f7; color: #3d4b44; padding: 5px 8px; font-size: 11px; font-weight: 850; }
.memberDetailBadges span.danger { border-color: #efc7c7; background: #fff1f1; color: #a92c2c; }

.memberDetailTabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #dfe6e2;
  background: #f5f7f6;
}

.memberDetailTabs button {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-right: 1px solid #dfe6e2;
  border-radius: 0;
  background: transparent;
  color: #54635b;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.memberDetailTabs button:last-child { border-right: 0; }
.memberDetailTabs button.active { background: #fff; color: #244f88; box-shadow: inset 0 -3px 0 #3567b7; }
.memberConfirmBox { margin: 12px 18px 0; }

.memberDetailBody { min-height: 0; padding: 18px; }
.memberDetailSection { display: grid; gap: 16px; }
.memberSectionHead { display: flex; gap: 10px; align-items: flex-start; }
.memberSectionHead > span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 7px; background: #edf3fa; color: #315f9b; }
.memberSectionHead h3 { margin: 0 0 3px; font-size: 17px; letter-spacing: 0; }
.memberSectionHead p { margin: 0; color: #66746d; font-size: 12px; line-height: 1.45; }

.memberDecisionBox { border: 1px solid #d9e2de; border-left: 5px solid #27835e; border-radius: 8px; background: #f8faf9; padding: 14px 16px; }
.memberDecisionBox.priority-critical { border-left-color: #c53b3b; background: #fff8f8; }
.memberDecisionBox.priority-attention { border-left-color: #c98218; background: #fffaf2; }
.memberDecisionBox > span { color: #66746d; font-size: 11px; font-weight: 900; }
.memberDecisionBox h3 { margin: 4px 0; font-size: 18px; letter-spacing: 0; }
.memberDecisionBox p { margin: 0; color: #435149; font-size: 13px; }
.memberDecisionBox ul { margin: 9px 0 0; padding-left: 18px; color: #5a665f; font-size: 12px; }

.memberFactGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid #e1e7e4;
  border-left: 1px solid #e1e7e4;
}

.memberFactGrid.compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.memberFactGrid > div { min-width: 0; display: grid; gap: 4px; padding: 12px; border-right: 1px solid #e1e7e4; border-bottom: 1px solid #e1e7e4; }
.memberFactGrid dt { color: #66746d; font-size: 11px; font-weight: 850; }
.memberFactGrid dd { margin: 0; overflow-wrap: anywhere; color: #26332d; font-size: 13px; font-weight: 850; }
.memberFactGrid dd small { display: block; margin-top: 3px; font-size: 10px; }

.memberStatusRows { margin: 0; border-top: 1px solid #e1e7e4; }
.memberStatusRows > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 11px 2px; border-bottom: 1px solid #e1e7e4; }
.memberStatusRows dt { color: #65736c; font-size: 12px; font-weight: 850; }
.memberStatusRows dd { margin: 0; font-size: 13px; font-weight: 900; }

.memberActionRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.memberActionRow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.memberActionRow button,
.memberFormBlock > button,
.memberTelegramRow > button {
  min-height: 42px;
  border: 0;
  border-radius: 7px;
  background: #263f6d;
  color: #fff;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.memberActionRow button:disabled,
.memberTelegramRow > button:disabled { background: #d8e0dc; color: #738079; cursor: not-allowed; }
.memberSafetyNote { margin: 0; border-left: 4px solid #c98218; background: #fff8ec; color: #675432; padding: 10px 12px; font-size: 12px; font-weight: 750; line-height: 1.5; }

.memberField,
.memberFormBlock label { display: grid; gap: 6px; color: #53615a; font-size: 12px; font-weight: 900; }
.memberField input,
.memberFormBlock input,
.memberFormBlock textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #ced9d3;
  border-radius: 7px;
  background: #fff;
  color: #1d2923;
  padding: 9px 10px;
  font: inherit;
  outline: none;
}

.memberFormBlock textarea { min-height: 88px; resize: vertical; }
.memberField input:focus,
.memberFormBlock input:focus,
.memberFormBlock textarea:focus { border-color: #3567b7; box-shadow: 0 0 0 3px rgba(53, 103, 183, .12); }

.memberFormBlock { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 9px; align-items: end; padding-top: 14px; border-top: 1px solid #e1e7e4; }
.memberFormBlock.message { grid-template-columns: minmax(180px, .45fr) minmax(240px, 1fr) 132px; }
.memberTelegramRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #e1e7e4; border-bottom: 1px solid #e1e7e4; padding: 12px 0; }
.memberTelegramRow > span { min-width: 0; display: grid; gap: 3px; }
.memberTelegramRow small { color: #65736c; font-size: 11px; font-weight: 850; }
.memberTelegramRow b { overflow-wrap: anywhere; font-size: 13px; }
.memberTelegramRow em { width: fit-content; border-radius: 999px; background: #f0f3f2; color: #58665f; padding: 3px 7px; font-size: 10px; font-style: normal; font-weight: 900; }
.memberTelegramRow em.status-connected { background: #edf8f3; color: #1d6d4d; }
.memberTelegramRow em.status-pending { background: #fff6e7; color: #966013; }
.memberTelegramRow em.status-rejected,
.memberTelegramRow em.status-disconnected { background: #fff0f0; color: #a92c2c; }

@media (max-width: 1180px) {
  .memberPriorityBand { grid-template-columns: 1fr; }
  .memberWorkspace { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); }
  .memberFactGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memberFactGrid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .memberFormBlock.message { grid-template-columns: 1fr 1fr; }
  .memberFormBlock.message > button { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .memberPrioritySummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .memberWorkspace { grid-template-columns: 1fr; min-height: 0; overflow: visible; }
  .memberListPane { border-right: 0; border-bottom: 1px solid #dfe6e2; }
  .memberList { max-height: 54vh; }
  .memberDetailPane { scroll-margin-top: 12px; }
  .memberBackButton { display: inline-flex !important; align-self: flex-start; border: 0; background: transparent; color: #315f9b; padding: 6px 0; font-size: 12px; font-weight: 900; }
  .memberDetailHead { display: grid; }
  .memberDetailBadges { justify-content: flex-start; }
  .memberDetailTabs { display: flex; overflow-x: auto; }
  .memberDetailTabs button { flex: 0 0 auto; min-width: 112px; }
}

@media (max-width: 560px) {
  .memberPrioritySummary { grid-template-columns: 1fr 1fr; }
  .memberPrioritySummary button { min-height: 72px; padding: 9px; }
  .memberWorkspaceShell { gap: 12px; }
  .memberDetailBody { padding: 14px; }
  .memberFactGrid,
  .memberFactGrid.compact { grid-template-columns: 1fr; }
  .memberStatusRows > div { grid-template-columns: 108px minmax(0, 1fr); }
  .memberActionRow,
  .memberActionRow.three,
  .memberFormBlock,
  .memberFormBlock.message { grid-template-columns: 1fr; }
  .memberFormBlock.message > button { grid-column: auto; }
  .memberTelegramRow { display: grid; }
  .memberTelegramRow > button { width: 100%; }
}

@media (max-width: 720px) {
  .memberMoreBar {
    display: grid;
  }

  .memberMoreBar button {
    width: 100%;
  }
}
/* Login brand image */
.authBrand .authLogoImage {
  display: block;
  width: min(300px, 72vw);
  height: auto;
  max-height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.18));
}

.authBrand .authMark {
  display: none;
}
/* Login brand image sizing fix */
.authHero .authBrand {
  width: 100%;
  min-height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}

.authHero .authBrand .authLogoImage {
  display: block;
  width: min(420px, 82%) !important;
  max-width: 420px !important;
  max-height: 420px !important;
  height: auto !important;
  object-fit: contain;
  border-radius: 76px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  filter: none !important;
}

@media (max-width: 720px) {
  .authHero .authBrand .authLogoImage {
    width: min(250px, 70vw) !important;
    max-height: 250px !important;
    border-radius: 48px;
  }
}
/* Login hero: remove green background card */
.authHero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  padding: 0 !important;
}

.authHero::before,
.authHero::after,
.authHero .authLines {
  display: none !important;
}

.authHero .authBrand {
  min-height: 540px;
  border: 1px solid rgba(15, 70, 47, 0.08);
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 70px rgba(20, 65, 43, 0.10);
  backdrop-filter: blur(16px);
}

.authHero .authBrand .authLogoImage {
  box-shadow: 0 22px 54px rgba(17, 183, 125, 0.14) !important;
}

@media (max-width: 720px) {
  .authHero .authBrand {
    min-height: 260px;
  }
}

/* Responsive workbench contract: data-heavy admin screens use explicit wide mode, not feature-specific class leakage. */
:root {
  --admin-standard-workbench-max: 1540px;
  --admin-wide-workbench-max: 4480px;
}

.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .main {
  width: min(var(--admin-standard-workbench-max), 100%);
}

.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) > .main > header,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .adminTokenBar,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .adminGuardPanel,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .adminTabs,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .dashboardStack,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .adminGrid,
.layout.admin:not(:has(.adminFullWidth)):not(:has(.reviewSheetPage)) .adminWork {
  width: 100%;
  max-width: var(--admin-standard-workbench-max);
  margin-left: auto;
  margin-right: auto;
}

body:has(.adminFullWidth) .main {
  padding-left: clamp(16px, 1.8vw, 40px);
  padding-right: clamp(16px, 1.8vw, 40px);
}

body:has(.adminFullWidth) .layout.admin > .main > header {
  width: min(calc(100vw - clamp(32px, 3vw, 120px)), var(--admin-wide-workbench-max));
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 6px;
}

body:has(.adminFullWidth) .layout.admin > .main > header h1 {
  justify-self: start;
  letter-spacing: 0;
}

body:has(.adminFullWidth) .adminTokenBar,
body:has(.adminFullWidth) .adminGuardPanel,
body:has(.adminFullWidth) .adminTabs,
.adminFullWidth {
  width: min(calc(100vw - clamp(32px, 3vw, 120px)), var(--admin-wide-workbench-max));
  max-width: var(--admin-wide-workbench-max);
  margin-left: auto;
  margin-right: auto;
}

.adminFullWidth {
  min-width: 0;
}

.adminMembers .adminHero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.adminMembers .memberFilterBar {
  grid-template-columns: minmax(320px, 1fr) repeat(4, minmax(112px, 160px)) minmax(84px, 100px);
}

.adminMembers .memberSheetCard {
  width: 100%;
  max-width: var(--admin-wide-workbench-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px) {
  .adminMembers .adminHero {
    display: grid;
    align-items: start;
    justify-content: stretch;
  }

  .adminMembers .heroActions {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .adminMembers .heroActions .ghostBtn {
    min-width: 96px;
    white-space: nowrap;
  }

  .adminMembers .memberFilterBar {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 3840px) {
  body:has(.adminFullWidth) .main {
    padding-left: clamp(40px, 2vw, 80px);
    padding-right: clamp(40px, 2vw, 80px);
  }
}

/* Admin review: full Excel-style queue with cross-check window */
.reviewSheetPage{display:grid;gap:14px;width:100%;min-width:0}.reviewTop{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}.reviewTop span,.reviewCompareHead span,.reviewSheetHead span{color:var(--muted);font-weight:900}.reviewTop h2{font-size:26px;margin:2px 0 0}.reviewToolbar,.reviewActions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:flex-end}.reviewToolbar button,.reviewActions button,.reviewEditSheet .sheetSelect,.reviewEditSheet .sheetSave{border-radius:11px;background:#10241b;color:#fff;padding:9px 12px;font-size:12px;font-weight:950}.reviewToolbar .softButton,.reviewActions button:first-child{background:#eaf5ef;color:#0c6648}.reviewActions .dangerButton{background:#b73535;color:#fff}.reviewToolbar button:disabled,.reviewActions button:disabled{background:#d7e0dc;color:#7c8b84;cursor:not-allowed}.reviewSummary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.reviewSummary article{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(22,50,37,.06);padding:14px;display:grid;gap:4px}.reviewSummary span{font-size:12px;color:var(--muted);font-weight:900}.reviewSummary b{font-size:24px;color:#09251a}.reviewSummary small{color:var(--muted);font-weight:800}.reviewComparePanel{display:grid;gap:12px;padding:16px}.reviewCompareHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.reviewCompareHead h3{margin:2px 0 0;font-size:22px}.reviewCompareHead small{font-size:13px;color:#0b6b49;margin-left:8px}.reviewSheetHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.reviewSheetHead h3{margin:0;font-size:20px}.reviewEditSheet{width:100%;max-width:100%;max-height:calc(100vh - 430px);overflow:auto;border-radius:14px}.reviewEditSheet table{width:100%;min-width:1320px;table-layout:fixed;font-size:11px}.reviewEditSheet th{top:0;z-index:2;padding:8px 6px;font-size:12px}.reviewEditSheet td{padding:5px 6px;vertical-align:middle;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reviewEditSheet tr.selected td{background:#dff6eb!important;color:#06291d;font-weight:900}.reviewEditSheet .fixedId{position:sticky;left:0;z-index:1;background:#f3fbf7;color:#0b6b49;font-weight:950}.reviewEditSheet .wideText{white-space:normal;line-height:1.35}.reviewEditSheet .memoCell{white-space:normal;line-height:1.35;color:#31483f}.reviewEditSheet .sheetSelect{width:100%;min-width:0;background:#eaf5ef;color:#0c6648;padding:7px 6px}.reviewEditSheet .sheetSave{width:100%;min-width:0;padding:7px 6px}.reviewEditSheet th:nth-child(1),.reviewEditSheet td:nth-child(1){width:58px}.reviewEditSheet th:nth-child(2),.reviewEditSheet td:nth-child(2){width:120px}.reviewEditSheet th:nth-child(3),.reviewEditSheet td:nth-child(3){width:82px}.reviewEditSheet th:nth-child(4),.reviewEditSheet td:nth-child(4){width:82px}.reviewEditSheet th:nth-child(5),.reviewEditSheet td:nth-child(5){width:82px}.reviewEditSheet th:nth-child(6),.reviewEditSheet td:nth-child(6){width:118px}.reviewEditSheet th:nth-child(7),.reviewEditSheet td:nth-child(7),.reviewEditSheet th:nth-child(8),.reviewEditSheet td:nth-child(8){width:190px}.reviewEditSheet th:nth-child(9),.reviewEditSheet td:nth-child(9),.reviewEditSheet th:nth-child(10),.reviewEditSheet td:nth-child(10){width:110px}.reviewEditSheet th:nth-child(11),.reviewEditSheet td:nth-child(11){width:250px}.reviewEditSheet th:nth-child(12),.reviewEditSheet td:nth-child(12),.reviewEditSheet th:nth-child(13),.reviewEditSheet td:nth-child(13),.reviewEditSheet th:nth-child(14),.reviewEditSheet td:nth-child(14){width:50px;text-align:center}.reviewEditSheet th:nth-child(15),.reviewEditSheet td:nth-child(15){width:58px}@media(max-width:980px){body:has(.reviewSheetPage) .layout{grid-template-columns:1fr}body:has(.reviewSheetPage) .side{display:none}.reviewTop,.reviewCompareHead,.reviewSheetHead{display:grid}.reviewActions,.reviewToolbar{justify-content:start}.reviewEditSheet{max-height:calc(100vh - 360px)}.reviewEditSheet table{min-width:1180px}}

/* Review sheet should use the available browser width, not a narrow card width */
body:has(.reviewSheetPage) .main{max-width:none;width:100%;padding-left:24px;padding-right:24px}
.reviewSheetPage,.reviewSheetPage .subjectSheet,.reviewSheetPage .card{max-width:none;width:100%;min-width:0}
.reviewSheetPage .subjectSheet{overflow:hidden}
.reviewEditSheet{width:100%;max-width:none;min-width:0}
.reviewEditSheet table{width:100%;min-width:max(1320px,100%)}
.reviewComparePanel{width:100%;max-width:none}
@media(min-width:1280px){body:has(.reviewSheetPage) .main{padding-left:26px;padding-right:26px}.reviewEditSheet table{min-width:max(1500px,100%)}}
@media(max-width:980px){body:has(.reviewSheetPage) .main{padding-left:14px;padding-right:14px}.reviewEditSheet table{min-width:1180px}}

/* Review ID columns: separate review key from actual information IDs */
.reviewEditSheet table{min-width:max(1460px,100%)}
.reviewEditSheet th:nth-child(2),.reviewEditSheet td:nth-child(2){width:128px}
.reviewEditSheet th:nth-child(3),.reviewEditSheet td:nth-child(3),.reviewEditSheet th:nth-child(4),.reviewEditSheet td:nth-child(4){width:82px;text-align:center}
.reviewEditSheet th:nth-child(5),.reviewEditSheet td:nth-child(5){width:82px}
.reviewEditSheet th:nth-child(6),.reviewEditSheet td:nth-child(6){width:82px}
.reviewEditSheet th:nth-child(7),.reviewEditSheet td:nth-child(7){width:82px}
.reviewEditSheet th:nth-child(8),.reviewEditSheet td:nth-child(8){width:118px}
.reviewEditSheet th:nth-child(9),.reviewEditSheet td:nth-child(9),.reviewEditSheet th:nth-child(10),.reviewEditSheet td:nth-child(10){width:190px}
.reviewEditSheet th:nth-child(11),.reviewEditSheet td:nth-child(11),.reviewEditSheet th:nth-child(12),.reviewEditSheet td:nth-child(12){width:110px}
.reviewEditSheet th:nth-child(13),.reviewEditSheet td:nth-child(13){width:250px}
.reviewEditSheet th:nth-child(14),.reviewEditSheet td:nth-child(14),.reviewEditSheet th:nth-child(15),.reviewEditSheet td:nth-child(15),.reviewEditSheet th:nth-child(16),.reviewEditSheet td:nth-child(16){width:50px;text-align:center}
.reviewEditSheet th:nth-child(17),.reviewEditSheet td:nth-child(17){width:58px}
@media(min-width:1280px){.reviewEditSheet table{min-width:max(1580px,100%)}}

.rewardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  white-space: normal;
  line-height: 1.35;
}

.rewardMeta b {
  color: #10241b;
  font-weight: 950;
}

.rewardMeta small,
.case .rewardMeta {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.pointBookBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 4px 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  border: 1px solid #bcd9ca;
  background: #f2fbf6;
  color: #0b6b49;
  white-space: nowrap;
}

.pointBookBadge.th {
  border-color: #b8d7ff;
  background: #eef6ff;
  color: #1d4f91;
}

.pointBookHint {
  border: 1px solid #cfe9dc;
  border-radius: 14px;
  background: #f3fbf7;
  padding: 11px 13px;
  margin: 10px 0 12px;
  color: #1e5f46;
}

.reviewEditSheet .rewardCell {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.reviewEditSheet th:nth-child(8),
.reviewEditSheet td:nth-child(8) {
  width: 178px;
}

.confirmBox {
  display: grid;
  gap: 7px;
  border: 1px solid #cfe5da;
  border-radius: 14px;
  background: #f6fbf8;
  padding: 12px;
}

.confirmBox b {
  color: #063d2d;
}

.confirmBox code {
  display: block;
  max-width: 100%;
  overflow: auto;
  border-radius: 10px;
  background: #10241b;
  color: #d5f6e7;
  padding: 9px;
  font-size: 12px;
}

.confirmBox span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.alertCase {
  align-items: start;
}

.alertCase button {
  min-height: 38px;
  border-radius: 12px;
  background: #10241b;
  color: #fff;
  padding: 0 12px;
  white-space: nowrap;
}

.messageDetail {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  border: 1px solid #d8e8df;
  border-radius: 14px;
  background: #f8fcf9;
  padding: 13px;
  white-space: pre-wrap;
}

.messageDetail strong {
  color: #063d2d;
}

.messageDetail p {
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0;
}

.messageDetail small {
  color: var(--muted);
  font-weight: 850;
}

.chatCard {
  display: grid;
  gap: 16px;
}

.chatFrame {
  min-height: 280px;
  max-height: 540px;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f7fbf8;
  padding: 16px;
}

.chatBubble {
  max-width: min(78%, 620px);
  display: grid;
  gap: 6px;
  border: 1px solid #d5e6dd;
  border-radius: 18px;
  background: #fff;
  padding: 13px 15px;
  justify-self: start;
}

.chatBubble.me {
  justify-self: end;
  background: #e4f8ee;
  border-color: #b8e8d0;
}

.chatBubble strong {
  color: #075f3c;
  font-size: 13px;
}

.chatBubble p {
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0;
  white-space: pre-wrap;
}

.chatBubble small {
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.chatComposer {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.chatComposer select,
.chatComposer textarea {
  min-height: 58px;
}

.chatComposer .notice {
  grid-column: 1 / -1;
  margin: 0;
  color: #075f3c;
  font-weight: 850;
}

@media(max-width:720px) {
  .chatFrame {
    min-height: 260px;
    max-height: 500px;
  }

  .chatBubble {
    max-width: 92%;
  }

  .chatComposer {
    grid-template-columns: 1fr;
  }
}

@media(max-width:1100px) {
  .bottom {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
}

.inlineLoading {
  border: 1px solid #bfe8d4;
  background: #f2fbf6;
  color: #075f3c;
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
}

.inlineLoading div {
  display: grid;
  gap: 4px;
}

.inlineLoading b {
  font-size: 16px;
}

.inlineLoading span {
  color: #30745a;
  font-weight: 800;
}

.inlineLoading i {
  width: 64px;
  height: 8px;
  border-radius: 999px;
  background: #d9f3e6;
  overflow: hidden;
}

.inlineLoading i em {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: #13b77d;
  animation: inlineLoadingMove 1.1s infinite ease-in-out;
}

.inlineLoading.compact {
  padding: 12px 14px;
}

@keyframes inlineLoadingMove {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(230%); }
}

.noticePreview,
.noticeAdminRow {
  grid-template-columns: minmax(0, 1fr) minmax(110px, 180px);
  align-items: start;
}

.noticePreview img,
.noticeAdminRow img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f7fbf8;
}

.noticePreview > div,
.noticeAdminRow > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.noticeAdminRow .confirmBox,
.noticeAdminRow label,
.noticeAdminRow .buttonGrid {
  grid-column: 1 / -1;
}

.noticeListPanel {
  align-content: start;
}

.noticeListControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f6fbf8;
}

.noticeListControls button,
.noticeMoreButton {
  border-radius: 999px;
  background: #eef8f3;
  color: #0b5f43;
  padding: 10px 13px;
}

.noticeListControls button.on {
  background: #0b2b20;
  color: #fff;
}

.noticeListControls span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.noticeMoreButton {
  width: 100%;
  border-radius: 16px;
  font-weight: 950;
}

.adminQuickOps {
  display: grid;
  gap: 12px;
}

.adminQuickGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.adminQuickGrid button {
  display: grid;
  gap: 7px;
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f3fbf7);
  color: #102018;
  padding: 15px;
  text-align: left;
}

.adminQuickGrid button:hover {
  border-color: var(--mint);
  box-shadow: 0 12px 30px rgba(8, 124, 84, .12);
}

.adminQuickGrid b {
  font-size: 17px;
  color: #087c54;
}

.adminQuickGrid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.noticeImagePicker {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #f8fcf9;
  padding: 14px;
}

.noticeImagePicker > div:first-child {
  display: grid;
  gap: 4px;
}

.noticeImagePicker > div:first-child span,
.noticeImagePicker em {
  color: var(--muted);
  font-style: normal;
  font-weight: 800;
}

.noticeImageActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.noticeImageActions input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.noticeImageActions button {
  border-radius: 14px;
  background: #10241b;
  color: #fff;
  padding: 11px 14px;
}

.noticeImagePicker img {
  width: min(100%, 520px);
  max-height: 320px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

@media(max-width:720px) {
  html,
  body,
  .layout,
  .main {
    max-width: 100vw;
    overflow-x: hidden;
  }

  input,
  select,
  textarea {
    min-width: 0;
  }

  .adminTabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .adminGuardPanel {
    align-items: stretch;
    flex-direction: column;
  }

  .adminGuardPanel span,
  .adminGuardPanel small,
  .noticeImagePicker span,
  .noticeImagePicker em,
  .noticeImagePicker input {
    overflow-wrap: anywhere;
  }

  .adminGuardChips {
    justify-content: flex-start;
  }

  .adminWork .formGrid {
    grid-template-columns: 1fr !important;
  }

  .adminWork .card,
  .adminWork .actionPanel {
    min-width: 0;
    width: 100%;
  }

  .noticeImagePicker {
    padding: 12px;
  }

  .noticeImagePicker img {
    width: 100%;
  }

  .toggleLine label {
    flex: 1 1 100%;
    border-radius: 18px;
  }
}

.toggleLine {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}

.toggleLine label {
  display: inline-flex;
  width: auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fcf9;
  padding: 10px 13px;
  color: #26372f;
  font-weight: 900;
}

.toggleLine input {
  appearance: none;
  display: inline-block;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  padding: 0 !important;
  border: 2px solid #9bc8b5;
  border-radius: 5px;
  background: #fff;
  flex: 0 0 18px;
  accent-color: #0a8b61;
}

.toggleLine input:checked {
  border-color: #0a8b61;
  background: #0a8b61;
  box-shadow: inset 0 0 0 4px #fff;
}

.compactToggle {
  margin-top: 0;
}

.compactToggle label {
  width: 100%;
  border-radius: 16px;
}

.noticePopupBackdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(10px, 3vw, 28px);
  background: rgba(7, 21, 15, .48);
}

.noticePopup {
  width: min(920px, 100%);
  max-height: min(860px, calc(100vh - 24px));
  overflow: auto;
  display: grid;
  gap: clamp(10px, 1.8vw, 16px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: clamp(18px, 2.4vw, 26px);
  background: #fff;
  padding: clamp(14px, 2.2vw, 22px);
  box-shadow: 0 28px 80px rgba(3, 20, 13, .28);
}

.noticePopupHead,
.noticePopupActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.noticePopupHead span {
  border-radius: 999px;
  background: #e8f8ef;
  color: #08744c;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 950;
}

.noticePopupHead button,
.noticePopupActions button {
  border-radius: 14px;
  background: #eef5ef;
  color: #17261f;
  padding: 12px 15px;
}

.noticePopup img {
  width: 100%;
  max-height: min(62vh, 620px);
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.8vw, 18px);
  background: #f7fbf8;
}

.noticePopup h2 {
  font-size: clamp(21px, 3.2vw, 30px);
  line-height: 1.2;
}

.noticePopup p {
  margin: 0;
  color: #24352d;
  line-height: 1.65;
  white-space: pre-wrap;
  letter-spacing: 0;
}

.messageAttachBox {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fbf9;
  padding: 12px;
}

.adminGrid {
  display: grid;
  gap: 18px;
}
.adminGrid .wide {
  min-width: 0;
}
.summaryCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.summaryCards article {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 4px;
}
.summaryCards span {
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}
.summaryCards b {
  font-size: 26px;
}
.adminSearchBar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.adminSearchBar button {
  min-height: 50px;
  border-radius: 14px;
  background: #10241b;
  color: #fff;
  padding: 0 18px;
}
.adminRecordScope {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  margin: 2px 0 8px;
}
.adminRecordScopeSummary {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.adminTableWrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.adminTable {
  min-width: 980px;
}
.behaviorInsightsPanel {
  display: grid;
  gap: 14px;
}
.behaviorFilters {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(130px, 170px)) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
}
.behaviorFilters label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.behaviorFilters input {
  min-height: 44px;
  border-radius: 12px;
  padding: 10px 12px;
}
.behaviorFilters > button {
  min-height: 44px;
  border-radius: 12px;
  background: #10241b;
  color: #fff;
  padding: 0 18px;
}
.behaviorSummaryCards article {
  min-height: 86px;
}
.behaviorRedesignDecision {
  display: grid;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid #d7e8de;
  border-bottom: 1px solid #d7e8de;
}
.behaviorRedesignDecision .head.compact {
  display: grid;
  gap: 4px;
}
.behaviorRedesignDecision .head.compact h3,
.behaviorRedesignDecision p {
  margin: 0;
}
.reviewLinkageNotice {
  display: grid;
  gap: 6px;
  line-height: 1.55;
}
.reviewLinkageNotice b,
.reviewLinkageNotice span,
.reviewLinkageNotice small {
  display: block;
}
.reviewLinkageNotice small {
  opacity: 0.82;
}
.behaviorDropoutSection {
  display: grid;
  gap: 12px;
  border: 1px solid #d7e8de;
  border-radius: 20px;
  background: #f7fcf9;
  padding: 16px;
}
.behaviorDropoutSection .head.compact {
  display: grid;
  gap: 4px;
}
.behaviorDropoutSection .head.compact h3 {
  margin: 0;
  font-size: 22px;
}
.insightGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}
.insightGrid section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfefb;
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.insightGrid h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
.insightList {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
}
.insightList article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e6f0eb;
  border-radius: 12px;
  background: #fff;
  padding: 9px 10px;
}
.insightList b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #143227;
  font-size: 13px;
}
.insightList span {
  color: #087c54;
  font-weight: 950;
  font-size: 13px;
}
.behaviorEventTable {
  min-width: 1180px;
}
.behaviorDropoutTable {
  min-width: 1320px;
}
.behaviorEventTable td:nth-child(3),
.behaviorEventTable td:nth-child(4),
.behaviorEventTable td:nth-child(5),
.behaviorEventTable td:nth-child(6),
.behaviorDropoutTable td:nth-child(6),
.behaviorDropoutTable td:nth-child(7) {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bannerClickTable td:nth-child(3),
.bannerClickTable td:nth-child(5) {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reportDecisionCards article,
.securitySummaryCards article {
  min-height: 86px;
}
.reportDecisionBox {
  display: grid;
  gap: 6px;
  border: 1px solid #d7e8de;
  border-radius: 14px;
  background: #f6fbf8;
  padding: 12px;
  margin-bottom: 12px;
}
.reportDecisionBox b {
  color: #0a5f3f;
  font-size: 16px;
}
.reportDecisionBox span,
.reportDecisionBox small {
  color: #34453c;
  line-height: 1.45;
}
.detailList {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
}
.detailList div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.detailList dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.detailList dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}
.securityPanel {
  min-width: 0;
}
.securityInsightGrid {
  grid-template-columns: 1fr;
}
.securityInsightGrid .case {
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto;
  align-items: start;
}
.securityInsightGrid .case span,
.securityInsightGrid .case em {
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.securityEventTable {
  min-width: 1060px;
}
.securityEventTable td:nth-child(6) {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.securityAccountSharingCase small {
  color: var(--muted);
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
@media(max-width:720px) {
  .adminRecordScope {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .adminSearchBar {
    grid-template-columns: 1fr;
  }
  .behaviorFilters {
    grid-template-columns: 1fr;
  }
  .insightGrid {
    grid-template-columns: 1fr;
  }
  .securityInsightGrid .case {
    grid-template-columns: 1fr;
  }
}

.messageAttachActions {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.messageAttachActions input {
  min-width: 0;
}

.messageAttachActions button,
.attachmentChips button {
  white-space: nowrap;
}

.messageAttachBox small {
  color: #56675e;
  line-height: 1.45;
}

.messageAttachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.messageAttachments a {
  display: block;
  width: 92px;
  height: 92px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.messageAttachments img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachmentChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@media(max-width:720px) {
  .noticePreview,
  .noticeAdminRow {
    grid-template-columns: 1fr;
  }

  .noticePopupActions {
    display: grid;
  }

  .noticePopup {
    width: 100%;
    max-height: calc(100vh - 20px);
  }

  .noticePopup img {
    max-height: 54vh;
  }

  .messageAttachActions {
    grid-template-columns: 1fr;
  }
}

.layout-messages .floatingReport {
  position: static;
  grid-column: 2 / -1;
  justify-self: end;
  margin: 0 38px 24px;
  width: max-content;
}

@media(max-width:1100px) {
  .layout-messages .main {
    padding-bottom: 28px;
  }

  .layout-messages .bottom {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    grid-column: 1 / -1;
    margin: 0 16px 16px;
    width: auto;
  }

  .layout-messages .floatingReport {
    grid-column: 1 / -1;
    margin: 0 16px 18px;
  }
}

@media(max-width:720px) {
  .layout-messages .main {
    padding-bottom: 18px;
  }

  .layout-messages .floatingReport {
    justify-self: stretch;
    width: auto;
    text-align: center;
  }
}

.adminMetrics.rich .metricCard {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  text-align: left;
  color: var(--ink);
  min-height: 138px;
  align-content: start;
}

.adminMetrics.rich .metricCard:hover,
.adminMetrics.rich .metricCard:focus-visible {
  border-color: var(--mint);
  box-shadow: 0 18px 42px rgba(8, 124, 84, .16);
  outline: 0;
  transform: translateY(-1px);
}

.adminMetrics.rich .metricCard.on {
  border-color: #087c54;
  background: #f2fbf6;
}

.adminMetrics.rich .metricCard span {
  color: var(--muted);
  font-weight: 900;
}

.adminMetrics.rich .metricCard b {
  font-size: 28px;
}

.adminMetrics.rich .metricCard small {
  color: var(--muted);
  font-weight: 800;
}

.adminMetrics.rich .metricCard i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #0f766e);
  margin-top: 8px;
}

.metricDetailPanel {
  display: grid;
  gap: 14px;
}

.metricDetailHeader {
  align-items: center;
}

.metricDetailHeader h2 {
  font-size: clamp(22px, 2.2vw, 30px);
}

.metricDetailHeader small {
  color: var(--muted);
  font-weight: 900;
}

.periodControl {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 180px 180px 120px;
  gap: 12px;
  align-items: end;
}

.periodControl div,
.periodControl label {
  display: grid;
  gap: 7px;
}

.periodControl span,
.periodControl label {
  color: var(--muted);
  font-weight: 900;
}

.periodControl b {
  font-size: 18px;
}

.periodControl input {
  min-height: 48px;
  border-radius: 14px;
  padding: 10px 12px;
}

.periodControl button {
  min-height: 48px;
  border-radius: 14px;
  background: #10241b;
  color: #fff;
  padding: 10px 14px;
}

.metricDetailHeader button {
  border-radius: 14px;
  background: #edf6f1;
  color: #0f5138;
  padding: 10px 14px;
}

.metricDetailList {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.metricDetailRow {
  display: grid;
  grid-template-columns: 150px 130px 86px 110px minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.metricDetailRow:last-child {
  border-bottom: 0;
}

.metricDetailRow.headRow {
  background: #e9f4ed;
  color: #153228;
  font-weight: 950;
}

.metricDetailRow span,
.metricDetailRow em,
.metricDetailRow strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metricDetailRow .pointBookCell {
  color: #0f5138;
  font-weight: 950;
}

.metricDetailRow em {
  font-style: normal;
  color: #334155;
}

.metricDetailRow strong {
  text-align: right;
  color: #0f5138;
}

.empty.compact {
  box-shadow: none;
}

@media(max-width:900px) {
  .periodControl {
    grid-template-columns: 1fr;
  }

  .metricDetailList {
    border-radius: 16px;
  }

  .metricDetailRow {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .metricDetailRow.headRow {
    display: none;
  }

  .metricDetailRow span,
  .metricDetailRow em,
  .metricDetailRow strong {
    white-space: normal;
  }

  .metricDetailRow span:nth-child(1)::before {
    content: "시간 ";
    font-weight: 950;
    color: var(--muted);
  }

  .metricDetailRow span:nth-child(2)::before {
    content: "회원 ";
    font-weight: 950;
    color: var(--muted);
  }

  .metricDetailRow span:nth-child(3)::before {
    content: "장부 ";
    font-weight: 950;
    color: var(--muted);
  }

  .metricDetailRow span:nth-child(4)::before {
    content: "구분 ";
    font-weight: 950;
    color: var(--muted);
  }

  .metricDetailRow em::before {
    content: "내용 ";
    font-weight: 950;
    color: var(--muted);
  }

  .metricDetailRow strong {
    text-align: left;
  }

  .metricDetailRow strong::before {
    content: "금액 ";
    font-weight: 950;
    color: var(--muted);
  }
}

.adminTabs {
  max-width: 100%;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 721px) and (max-width: 1100px) {
  .adminTabs {
    flex-wrap: wrap;
    overflow: visible;
    row-gap: 8px;
    padding-bottom: 0;
  }

  .adminTabs button {
    white-space: nowrap;
  }
}

.operationalAiPanel {
  margin: 14px 0;
  overflow: hidden;
  border: 1px solid #d8dee5;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(31, 41, 55, 0.08), 0 2px 8px rgba(31, 41, 55, 0.05);
}

.operationalAiPanel.compact {
  padding: 16px;
}

.operationalAiHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.operationalAiHead span {
  display: block;
  color: #52606d;
  font-size: 12px;
  font-weight: 800;
}

.operationalAiHead h3 {
  margin: 4px 0 0;
  color: #18212b;
  font-size: 18px;
  line-height: 1.3;
}

.operationalAiHead p {
  max-width: 720px;
  margin: 6px 0 0;
  color: #697684;
  font-size: 12px;
  line-height: 1.55;
}

.operationalAiActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.operationalAiActions button {
  min-height: 36px;
  border: 1px solid #ccd4dc;
  border-radius: 7px;
  background: #f7f9fb;
  color: #26323e;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 4px rgba(31, 41, 55, 0.06);
}

.operationalAiActions button:hover:not(:disabled) {
  border-color: #9aa7b4;
  background: #ffffff;
}

.operationalAiCadence {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(56px, 1fr));
  gap: 3px;
  margin: 0 0 16px;
  padding: 3px;
  border-radius: 8px;
  background: #e9edf1;
}

.operationalAiCadence button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #586674;
  font-size: 12px;
  font-weight: 850;
}

.operationalAiCadence button.active {
  background: #ffffff;
  color: #14202b;
  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.12);
}

.aiBadge {
  border: 1px solid #d4dbe2;
  border-radius: 999px;
  padding: 8px 10px;
  background: #f2f4f7;
  color: #4b5563;
  font-size: 12px;
  font-weight: 800;
}

.aiBadge.on {
  border-color: #b7d5c5;
  background: #e8f5ee;
  color: #17613f;
}

.operationalDecision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 20px;
  align-items: center;
  margin: 0 -16px;
  border-top: 1px solid #e1e6eb;
  border-bottom: 1px solid #e1e6eb;
  border-left: 5px solid #718096;
  background: #f6f8fa;
  padding: 18px 20px 18px 15px;
}

.operationalDecision.is-act {
  border-left-color: #d23f3f;
  background: #fff7f6;
}

.operationalDecision.is-watch {
  border-left-color: #d69220;
  background: #fffaf0;
}

.operationalDecision.is-stable {
  border-left-color: #25835a;
  background: #f3faf6;
}

.operationalDecision.is-insufficient {
  border-left-color: #66788a;
  background: #f5f7f9;
}

.operationalDecision span,
.operationalDecisionConfidence span {
  display: block;
  color: #687684;
  font-size: 11px;
  font-weight: 800;
}

.operationalDecision h4 {
  margin: 5px 0 0;
  color: #15202b;
  font-size: 18px;
  line-height: 1.35;
}

.operationalDecision p {
  margin: 6px 0 0;
  color: #53616f;
  font-size: 13px;
  line-height: 1.55;
}

.operationalDecisionConfidence {
  border-left: 1px solid #d8dee5;
  padding-left: 16px;
}

.operationalDecisionConfidence b {
  display: block;
  margin-top: 5px;
  color: #25313d;
  font-size: 15px;
}

.operationalRange {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 11px 0 0;
  color: #536170;
  font-size: 11px;
  font-weight: 750;
}

.operationalRange span {
  color: #7a8794;
}

.operationalMetricSection,
.operationalActionSection,
.operationalTrendSection {
  margin-top: 20px;
}

.operationalSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.operationalSectionHead h4 {
  margin: 0;
  color: #1d2833;
  font-size: 14px;
}

.operationalSectionHead span {
  color: #798592;
  font-size: 11px;
}

.operationalMetricTable {
  overflow: hidden;
  border-top: 1px solid #dce2e8;
  border-bottom: 1px solid #dce2e8;
}

.operationalMetricRow {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(70px, 0.55fr) minmax(70px, 0.55fr) minmax(82px, 0.6fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  border-top: 1px solid #edf0f3;
  padding: 8px 10px;
  color: #4d5b68;
  font-size: 12px;
}

.operationalMetricRow:first-child {
  border-top: 0;
}

.operationalMetricRow.header {
  min-height: 32px;
  background: #f5f7f9;
  color: #7a8794;
  font-size: 10px;
  font-weight: 800;
}

.operationalMetricRow > span:first-child {
  min-width: 0;
}

.operationalMetricRow b,
.operationalMetricRow strong {
  color: #1d2833;
  font-size: 12px;
  font-weight: 850;
}

.operationalMetricRow small {
  display: block;
  margin-top: 2px;
  color: #7a8794;
  font-size: 10px;
}

.operationalMetricRow em {
  color: #52606d;
  font-style: normal;
  font-weight: 800;
}

.operationalMetricRow em.up {
  color: #b13b35;
}

.operationalMetricRow em.down {
  color: #18714a;
}

.operationalTrendList {
  display: grid;
  gap: 10px;
}

.operationalTrendRow {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.operationalTrendRow > b {
  color: #343a40;
  font-size: 13px;
}

.operationalTrendValues {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.operationalTrendValues > span {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid #d8dde3;
  border-radius: 4px;
  background: #f6f7f9;
  color: #343a40;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 750;
}

.operationalTrendValues > span i {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  max-width: 100%;
  background: #d9efe7;
}

.operationalTrendValues > span.secondary i {
  background: #e3e7eb;
}

.operationalActionList {
  border-top: 1px solid #dce2e8;
}

.operationalActionList article {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid #e7ebef;
  padding: 13px 4px;
}

.operationalActionList .priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  border-radius: 6px;
  background: #edf1f4;
  color: #53616f;
  font-size: 10px;
  font-weight: 850;
}

.operationalActionList .priority.is-high {
  background: #fae5e3;
  color: #9b312d;
}

.operationalActionList .priority.is-medium {
  background: #fff0cf;
  color: #875c10;
}

.operationalActionList .priority.is-low {
  background: #e3f1e9;
  color: #226444;
}

.operationalActionList b {
  color: #1d2833;
  font-size: 13px;
}

.operationalActionList p,
.operationalActionList em {
  display: block;
  margin: 4px 0 0;
  color: #5c6976;
  font-size: 12px;
  line-height: 1.5;
}

.operationalActionList em {
  color: #263440;
  font-style: normal;
  font-weight: 750;
}

.operationalEvidenceGrid {
  display: grid;
  grid-template-columns: minmax(180px, 0.75fr) minmax(0, 1.25fr);
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid #dce2e8;
  border-bottom: 1px solid #dce2e8;
  background: #f8f9fb;
}

.operationalEvidenceGrid section {
  min-width: 0;
  padding: 14px;
}

.operationalEvidenceGrid section + section {
  border-left: 1px solid #dce2e8;
}

.operationalEvidenceGrid h4,
.operationalEvidenceGrid p,
.operationalEvidenceGrid ul {
  margin: 0;
}

.operationalEvidenceGrid h4 {
  color: #6a7784;
  font-size: 11px;
}

.operationalEvidenceGrid b {
  display: block;
  margin-top: 5px;
  color: #1f2a35;
  font-size: 13px;
}

.operationalEvidenceGrid p,
.operationalEvidenceGrid li {
  margin-top: 5px;
  color: #5b6875;
  font-size: 11px;
  line-height: 1.5;
}

.operationalEvidenceGrid ul {
  padding-left: 16px;
}

.operationalAiNarrative {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
  border-left: 4px solid #3574a6;
  background: #f3f7fb;
  padding: 14px;
}

.operationalAiNarrative span {
  color: #35698f;
  font-size: 10px;
  font-weight: 850;
}

.operationalAiNarrative h4,
.operationalAiNarrative p {
  margin: 3px 0 0;
}

.operationalAiNarrative h4 {
  color: #203242;
  font-size: 13px;
}

.operationalAiNarrative p {
  color: #4d5d6c;
  font-size: 12px;
  line-height: 1.6;
}

.operationalAiReport {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  color: #74808c;
  font-size: 10px;
}

.operationalAiReport span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  border-radius: 50%;
  background: #8996a2;
  vertical-align: 1px;
}

.operationalEmpty {
  margin: 12px 0 0;
  border: 1px dashed #cdd5dd;
  background: #f8fafb;
  color: #667481;
  padding: 14px;
  font-size: 12px;
  line-height: 1.5;
}

.operationalAiAssistPanel {
  display: grid;
  gap: 12px;
  margin: 14px 0;
  border: 1px solid #cfe4d8;
  background: #fbfffd;
}

.operationalAiAssistPanel.compact {
  padding: 14px;
}

.operationalAiAssistHead,
.operationalAiAssistActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.operationalAiAssistHead span {
  display: block;
  color: #5d756b;
  font-size: 12px;
  font-weight: 900;
}

.operationalAiAssistHead h3 {
  margin: 3px 0 0;
  color: #10241b;
  font-size: 18px;
}

.operationalAiAssistActions button {
  border: 1px solid #cfe4d8;
  border-radius: 10px;
  background: #eef8f3;
  color: #0d6246;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 950;
}

.operationalAiAssistMain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.operationalAiAssistMain article {
  display: grid;
  gap: 5px;
  border: 1px solid #dcebe4;
  border-radius: 12px;
  background: #fff;
  padding: 11px;
}

.operationalAiAssistMain span {
  color: #60786d;
  font-size: 11px;
  font-weight: 900;
}

.operationalAiAssistMain b {
  color: #10241b;
  font-size: 13px;
  line-height: 1.45;
}

.operationalAiAssistMain small {
  color: #586b63;
  font-size: 11px;
  line-height: 1.4;
}

.operationalAiAssistCases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.operationalAiAssistCases article {
  display: grid;
  gap: 4px;
  border-left: 4px solid #18a66d;
  border-radius: 10px;
  background: #f5fbf8;
  padding: 10px;
}

.operationalAiAssistCases b {
  color: #0b3b2b;
  font-size: 13px;
}

.operationalAiAssistCases span {
  color: #405b50;
  font-size: 12px;
  line-height: 1.45;
}

.operationalAiAssistCases em {
  color: #0b6b49;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

@media (max-width: 860px) {
  .operationalAiHead,
  .operationalDecision,
  .operationalEvidenceGrid,
  .operationalAiNarrative,
  .operationalAiAssistHead {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operationalAiActions,
  .operationalAiAssistActions {
    justify-content: flex-start;
  }

  .operationalAiCadence {
    display: grid;
    width: 100%;
  }

  .operationalDecision {
    gap: 12px;
  }

  .operationalDecisionConfidence {
    border-top: 1px solid #d8dee5;
    border-left: 0;
    padding-top: 10px;
    padding-left: 0;
  }

  .operationalRange,
  .operationalSectionHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .operationalMetricRow.header {
    display: none;
  }

  .operationalMetricRow {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 12px;
    padding: 12px 8px;
  }

  .operationalMetricRow > span:first-child {
    grid-column: 1 / -1;
  }

  .operationalMetricRow > strong::before,
  .operationalMetricRow > span:nth-child(3)::before {
    color: #88939e;
    font-size: 10px;
    font-weight: 700;
  }

  .operationalMetricRow > strong::before {
    content: "현재 ";
  }

  .operationalMetricRow > span:nth-child(3)::before {
    content: "직전 ";
  }

  .operationalMetricRow > em {
    grid-column: 1 / -1;
  }

  .operationalTrendRow {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
  }

  .operationalTrendValues {
    grid-template-columns: 1fr;
  }

  .operationalEvidenceGrid section + section {
    border-top: 1px solid #dce2e8;
    border-left: 0;
  }
}

/* Contextual guidance and final interaction polish */
body {
  background: #f4f7f5;
}

h1,
h2,
h3,
p,
.head span,
.side b,
.side nav button {
  letter-spacing: 0;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }

button {
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 5px rgba(15, 23, 42, 0.18);
}

.hero,
.card,
.adminMetrics article,
.summaryLine article,
.settingsBlock {
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(24, 39, 32, 0.08);
}

.layout.admin .main {
  background: #f7f9f8;
}

.adminGuideWorkspace {
  min-width: 0;
}

.coverageSummaryCards,
.simpleSummaryList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.coverageSummaryCards article,
.simpleSummaryList article {
  min-width: 0;
  display: grid;
  gap: 4px;
  border: 1px solid #dce7e1;
  border-radius: 8px;
  background: #fff;
  padding: 11px;
}

.coverageSummaryCards span,
.simpleSummaryList span,
.coverageSummaryCards small {
  color: #607269;
  font-size: 11px;
  font-weight: 800;
}

.coverageSummaryCards b,
.simpleSummaryList b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #14271f;
  font-size: 15px;
}

.featureGuideButton {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 950;
  width: auto;
  min-width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: #075c41;
  box-shadow: 0 5px 0 rgba(7, 92, 65, 0.12), 0 16px 34px rgba(15, 23, 42, 0.16);
  font-size: 23px;
  font-weight: 950;
}

.featureGuideButton span {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.featureGuideButton.admin {
  right: 22px;
  bottom: 22px;
}

.featureGuideButton:hover {
  background: #eaf8f1;
  box-shadow: 0 4px 0 rgba(7, 92, 65, 0.12), 0 18px 36px rgba(8, 112, 78, 0.2);
  transform: translateY(-1px);
}

.featureGuideButton:active {
  box-shadow: 0 1px 0 rgba(7, 92, 65, 0.14), 0 8px 18px rgba(8, 112, 78, 0.16);
  transform: translateY(3px) scale(0.98);
}

.featureGuideMapBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 22px;
  background: rgba(13, 19, 16, 0.62);
  animation: feature-guide-backdrop-in 180ms ease-out both;
}

.featureGuideMap {
  width: min(720px, 100%);
  max-height: min(84vh, 820px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background: #f9fbfa;
  box-shadow: 0 34px 90px rgba(4, 17, 11, 0.36), 0 -1px 0 rgba(255, 255, 255, 0.7);
  padding: 10px 22px 24px;
  animation: feature-guide-sheet-up 220ms ease-out both;
}

.featureGuideSheetHandle {
  width: 48px;
  height: 5px;
  display: block;
  margin: 0 auto 8px;
  border-radius: 999px;
  background: #dce2df;
}

.featureGuideMap > header {
  position: sticky;
  top: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -22px;
  padding: 12px 22px 15px;
  border-bottom: 1px solid #e1e9e5;
  background: rgba(248, 250, 249, 0.97);
}

.featureGuideMap header span {
  color: #4f665c;
  font-size: 13px;
  font-weight: 850;
}

.featureGuideMap header h2 {
  margin-top: 4px;
  font-size: 24px;
}

.featureGuideMap header button,
.featureGuideBubbleHead button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #d7e3dd;
  border-radius: 50%;
  background: #fff;
  color: #31453c;
  padding: 0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.featureGuideCurrentMap {
  display: grid;
  gap: 16px;
  margin: 18px 0 14px;
  border: 1px solid #cfe0da;
  border-radius: 18px;
  background: #eef7f3;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.featureGuideCurrentSummary {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.featureGuideCurrentSummary > div > span {
  color: #087c54;
  font-size: 12px;
  font-weight: 950;
}

.featureGuideIcon {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #cce4da;
  border-radius: 14px;
  background: #fff;
  color: #087c54;
  box-shadow: 0 5px 12px rgba(8, 124, 84, 0.09);
}

.featureGuideCurrentMap h3 {
  margin: 3px 0 4px;
  color: #17342a;
  font-size: 20px;
}

.featureGuideCurrentMap p {
  margin: 0;
  color: #52685e;
  font-size: 13px;
  line-height: 1.55;
}

.featureGuideCurrentSteps {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.featureGuideCurrentSteps button {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #d8e6e0;
  border-radius: 12px;
  background: #fff;
  color: #182b23;
  padding: 10px 12px;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}

.featureGuideCurrentSteps button:hover {
  border-color: #5db996;
  box-shadow: 0 7px 16px rgba(12, 119, 78, 0.1);
}

.featureGuideCurrentSteps button:active,
.featureGuideMapGrid > button:active,
.featureGuideAllToggle:active,
.featureGuideIntroActions button:active,
.featureGuideActions button:active {
  transform: translateY(2px) scale(0.99);
}

.featureGuideCurrentSteps em,
.featureGuideIntroFlow em {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dff3eb;
  color: #087c54;
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
}

.featureGuideCurrentSteps span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.featureGuideCurrentSteps b {
  font-size: 13px;
}

.featureGuideCurrentSteps > li > button > svg {
  color: #84968e;
}

.featureGuideAllToggle {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #d8e4de;
  border-radius: 14px;
  background: #fff;
  color: #20352c;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(19, 47, 35, 0.06);
  transition: box-shadow 150ms ease, transform 100ms ease;
}

.featureGuideAllToggle > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f665c;
  font-size: 12px;
  font-weight: 850;
}

.featureGuideAllToggle > span:first-child {
  color: #20352c;
  font-size: 14px;
}

.featureGuideMapGroups {
  display: grid;
  gap: 20px;
  margin-top: 18px;
  animation: feature-guide-content-in 160ms ease-out both;
}

.featureGuideMapGroups > section > h3 {
  margin: 0 0 10px;
  color: #1d352b;
  font-size: 16px;
}

.featureGuideMapGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.featureGuideMapGrid > button {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 1px solid #dbe6e0;
  border-radius: 14px;
  background: #fff;
  color: #182b23;
  padding: 10px 12px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(19, 47, 35, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}

.featureGuideMapGrid > button:hover {
  border-color: #4cbd91;
  box-shadow: 0 8px 20px rgba(12, 119, 78, 0.12);
}

.featureGuideMapGrid > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.featureGuideMapGrid b {
  font-size: 14px;
}

.featureGuideMapGrid small {
  overflow: hidden;
  color: #607269;
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featureGuideMapGrid > button > svg {
  color: #8a9a93;
}

.featureGuideIntroBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1180;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 18, 15, 0.58);
}

.featureGuideIntroSheet {
  width: min(480px, 100%);
  max-height: min(82vh, 720px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 24px;
  background: #fff;
  color: #15271f;
  padding: 12px 22px 22px;
  box-shadow: 0 28px 80px rgba(4, 17, 11, 0.34), 0 -1px 0 rgba(255, 255, 255, 0.6);
  animation: feature-guide-sheet-up 220ms ease-out both;
}

.featureGuideIntroHandle {
  width: 52px;
  height: 5px;
  display: block;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: #dce2df;
}

.featureGuideIntroVisual {
  display: grid;
  place-items: center;
  margin: 2px 0 14px;
}

.featureGuideIntroVisual > span {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid #cce7dc;
  border-radius: 24px;
  background: #e9f7f1;
  color: #087c54;
  box-shadow: 0 8px 0 rgba(8, 124, 84, 0.08), 0 16px 30px rgba(8, 124, 84, 0.12);
}

.featureGuideIntroSheet > header {
  display: block;
  margin-bottom: 0;
}

.featureGuideIntroSheet > header > span {
  color: #087c54;
  font-size: 12px;
  font-weight: 950;
}

.featureGuideIntroSheet > header h2 {
  margin: 7px 0 8px;
  color: #15271f;
  font-size: 25px;
  text-align: center;
}

.featureGuideIntroSheet > header p {
  margin: 0;
  color: #52665d;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.featureGuideIntroSheet > header > span {
  display: block;
  text-align: center;
}

.featureGuideIntroFlow {
  display: grid;
  gap: 0;
  margin: 20px 0 22px;
  padding: 0;
  list-style: none;
}

.featureGuideIntroFlow li {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border: 1px solid #e0e9e4;
  border-radius: 12px;
  background: #f8faf9;
}

.featureGuideIntroFlow li:last-child {
  padding-bottom: 10px;
}

.featureGuideIntroFlow div {
  min-width: 0;
}

.featureGuideIntroFlow b {
  display: block;
  margin: 0;
  color: #1a3027;
  font-size: 15px;
}

.featureGuideIntroActions {
  display: grid;
  grid-template-columns: minmax(112px, 0.7fr) minmax(180px, 1.3fr);
  gap: 10px;
}

.featureGuideIntroActions button {
  min-height: 50px;
  border: 1px solid #d8e4de;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  background: #f5f8f6;
  color: #40564c;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 900;
  transition: box-shadow 150ms ease, transform 100ms ease;
}

.featureGuideIntroActions button.primary {
  border-color: #087c54;
  background: #087c54;
  color: #fff;
  box-shadow: 0 9px 22px rgba(8, 124, 84, 0.22);
}

@keyframes feature-guide-sheet-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes feature-guide-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes feature-guide-content-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.featureGuideLayer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.featureGuideSpotlight {
  position: fixed;
  border: 3px solid #16a36d;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(12, 23, 18, 0.58), 0 0 0 6px rgba(93, 225, 169, 0.22);
  transition: top 160ms ease, left 160ms ease, width 160ms ease, height 160ms ease;
}

.featureGuideSpotlight::before,
.featureGuideSpotlight::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.featureGuideSpotlight::before {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(7, 124, 84, 0.34);
}

.featureGuideSpotlight::after {
  width: 8px;
  height: 8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #087c54;
  box-shadow: 0 0 0 2px #087c54;
}

.featureGuideSpotlight.anchor-below::before,
.featureGuideSpotlight.anchor-above::before {
  left: calc(50% - 1px);
  width: 2px;
  height: 17px;
}

.featureGuideSpotlight.anchor-below::before { bottom: -19px; }
.featureGuideSpotlight.anchor-above::before { top: -19px; }
.featureGuideSpotlight.anchor-below::after { bottom: -7px; left: calc(50% - 7px); }
.featureGuideSpotlight.anchor-above::after { top: -7px; left: calc(50% - 7px); }

.featureGuideSpotlight.anchor-right::before,
.featureGuideSpotlight.anchor-left::before {
  top: calc(50% - 1px);
  width: 17px;
  height: 2px;
}

.featureGuideSpotlight.anchor-right::before { right: -19px; }
.featureGuideSpotlight.anchor-left::before { left: -19px; }
.featureGuideSpotlight.anchor-right::after { right: -7px; top: calc(50% - 7px); }
.featureGuideSpotlight.anchor-left::after { left: -7px; top: calc(50% - 7px); }

.featureGuideBubble {
  position: fixed;
  display: grid;
  gap: 9px;
  min-height: 0;
  max-height: calc(100vh - 24px);
  overflow: auto;
  border: 1px solid #cfe0d7;
  border-radius: 16px;
  background: #fff;
  color: #15271f;
  padding: 15px;
  box-shadow: 0 7px 0 rgba(3, 24, 15, 0.08), 0 22px 54px rgba(3, 24, 15, 0.28);
  outline: 0;
  pointer-events: auto;
  animation: feature-guide-bubble-in 170ms ease-out both;
}

@keyframes feature-guide-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.featureGuideBubble::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: solid #cfe0d7;
  background: #fff;
  transform: rotate(45deg);
}

.featureGuideBubble.arrow-below::before {
  top: -9px;
  left: calc(var(--guide-arrow-x) - 8px);
  border-width: 1px 0 0 1px;
}

.featureGuideBubble.arrow-above::before {
  bottom: -9px;
  left: calc(var(--guide-arrow-x) - 8px);
  border-width: 0 1px 1px 0;
}

.featureGuideBubble.arrow-right::before {
  top: calc(var(--guide-arrow-y) - 8px);
  left: -9px;
  border-width: 0 0 1px 1px;
}

.featureGuideBubble.arrow-left::before {
  top: calc(var(--guide-arrow-y) - 8px);
  right: -9px;
  border-width: 1px 1px 0 0;
}

.featureGuideBubbleHead,
.featureGuideActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.featureGuideBubbleHead span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #087c54;
  font-size: 12px;
  font-weight: 950;
}

.featureGuideBubble h3 {
  margin: 0;
  font-size: 18px;
}

.featureGuideBubble p {
  margin: 0;
  color: #4c6158;
  font-size: 13px;
  line-height: 1.5;
}

.featureGuideProgress {
  display: flex;
  gap: 5px;
}

.featureGuideProgress i {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #dce7e1;
}

.featureGuideProgress i.on {
  background: #0ca66e;
}

.featureGuideActions button {
  min-width: 82px;
  min-height: 42px;
  border: 1px solid #d8e4de;
  border-radius: 11px;
  background: #f6f9f7;
  color: #31483e;
  padding: 10px 14px;
  transition: box-shadow 150ms ease, transform 100ms ease;
}

.featureGuideActions button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-color: #087c54;
  background: #087c54;
  color: #fff;
  box-shadow: 0 7px 16px rgba(8, 124, 84, 0.2);
}

.searchEmptyAction button {
  justify-self: start;
  min-height: 44px;
  margin-top: 6px;
  border-radius: 10px;
  background: #087c54;
  color: #fff;
  padding: 11px 16px;
  box-shadow: 0 7px 16px rgba(8, 124, 84, 0.2);
}

@media (max-width: 900px) {
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }

  .featureGuideButton {
    right: 14px;
    bottom: 136px;
  }

  .featureGuideButton.admin {
    right: 14px;
    bottom: 14px;
  }

  .featureGuideMapBackdrop {
    padding: 10px;
  }

  .featureGuideMap {
    max-height: 92vh;
    padding: 10px 18px 20px;
  }

  .featureGuideMap > header {
    top: -10px;
    margin: 0 -18px;
    padding: 12px 18px 15px;
  }

  .featureGuideMapGrid {
    grid-template-columns: 1fr;
  }

  .featureGuideMapGrid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .featureGuideButton,
  .featureGuideButton.admin {
    width: 48px;
    min-width: 48px;
    padding: 0;
    border-radius: 50%;
  }

  .featureGuideButton span {
    display: none;
  }

  .featureGuideMapBackdrop {
    align-items: end;
    padding: 8px 0 0;
  }

  .featureGuideMap {
    width: 100%;
    max-height: calc(100svh - 8px);
    border-radius: 28px 28px 0 0;
  }

  .featureGuideBubble {
    width: calc(100vw - 24px) !important;
    font-size: 13px;
  }

  .featureGuideMap header h2 {
    font-size: 22px;
  }

  .featureGuideCurrentMap {
    padding: 14px;
  }

  .featureGuideIntroBackdrop {
    padding: 8px 0 0;
  }

  .featureGuideIntroSheet {
    width: 100%;
    max-height: calc(100svh - 8px);
    border-radius: 28px 28px 0 0;
    padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
  }

  .featureGuideIntroSheet > header h2 {
    font-size: 23px;
  }

  .featureGuideIntroActions {
    grid-template-columns: 1fr;
  }

  .featureGuideIntroActions button.primary {
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .featureGuideSpotlight,
  .featureGuideIntroSheet {
    transition: none;
    animation: none;
  }
}


/* Whole-product visual system. Functional component styles live in style.css; this file owns the final UI contract. */
:root {
  --ui-bg: #f1f3f5;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8f9fa;
  --ui-surface-muted: #e9ecef;
  --ui-ink: #212529;
  --ui-muted: #495057;
  --ui-border: #dee2e6;
  --ui-border-strong: #ced4da;
  --ui-primary: #087a55;
  --ui-primary-bright: #16b879;
  --ui-primary-strong: #065c40;
  --ui-primary-soft: #dff7ed;
  --ui-blue: #2f6fd6;
  --ui-blue-bright: #4c8dff;
  --ui-blue-soft: #dceaff;
  --ui-coral: #b74040;
  --ui-coral-bright: #ef6a6a;
  --ui-coral-soft: #ffe4e4;
  --ui-amber: #855700;
  --ui-amber-bright: #f4b740;
  --ui-amber-soft: #fff0d6;
  --ui-shadow-1: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 12px rgba(33, 37, 41, .07);
  --ui-shadow-2: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 28px rgba(33, 37, 41, .1);
  --ui-shadow-lift: inset 0 1px 0 rgba(255, 255, 255, .96), 0 14px 36px rgba(33, 37, 41, .12);
  --ui-shadow-control: 0 3px 0 #ced4da, 0 8px 18px rgba(33, 37, 41, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
  --ui-shadow-primary: 0 4px 0 #065c40, 0 12px 24px rgba(8, 122, 85, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
  --ui-press: 0 1px 0 #ced4da, 0 4px 9px rgba(33, 37, 41, .08), inset 0 2px 3px rgba(33, 37, 41, .09);
  --ui-ease-out: cubic-bezier(.2, .78, .2, 1);
  --ui-ease-spring: cubic-bezier(.18, .89, .32, 1.18);
  --ui-radius: 8px;
  --ui-sidebar: 228px;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
}

* {
  letter-spacing: 0 !important;
}

html {
  color-scheme: light;
  background: var(--ui-bg);
}

body {
  min-width: 320px;
  background: var(--ui-bg) !important;
  color: var(--ui-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  transform: translateZ(0);
  transition: transform .2s var(--ui-ease-spring), box-shadow .2s var(--ui-ease-out), background-color .16s ease, border-color .16s ease, color .16s ease;
}

button:not(:disabled):active {
  transform: translateY(2px) scale(.985);
  box-shadow: var(--ui-press);
}

button:disabled {
  cursor: not-allowed;
  opacity: .52;
}

:focus-visible {
  outline: 3px solid rgba(76, 141, 255, .3) !important;
  outline-offset: 2px;
}

.productShell {
  width: 100%;
  min-height: 100vh;
  display: grid !important;
  grid-template-columns: var(--ui-sidebar) minmax(0, 1fr) !important;
  background: var(--ui-bg);
  overflow: visible !important;
}

.productShell .main {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 28px 72px !important;
  overflow: visible !important;
}

.productShell .mainContent {
  width: min(100%, 1360px);
  margin: 0 auto;
}

.productShell .appSidebar {
  position: sticky;
  top: 0;
  z-index: 24;
  width: var(--ui-sidebar);
  height: 100vh;
  margin: 0;
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 0;
  border-right: 1px solid var(--ui-border);
  border-radius: 0;
  background: #f8f9fa;
  box-shadow: 8px 0 30px rgba(33, 37, 41, .045), inset -1px 0 0 rgba(255, 255, 255, .8);
  backdrop-filter: none;
}

.appBrand {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px;
}

.appBrandMark {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  border-radius: 8px;
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 7px 18px rgba(11, 143, 97, .22), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.appBrand b {
  font-size: 20px !important;
  font-weight: 900;
  line-height: 1.1;
}

.appBrand b::before {
  content: none !important;
}

.appBrand small {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 750;
}

.productShell .appNav {
  display: grid;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.productShell .appNav button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px !important;
  border: 1px solid transparent;
  border-radius: var(--ui-radius) !important;
  background: transparent !important;
  color: #495057 !important;
  font-size: 14px !important;
  font-weight: 760 !important;
  text-align: left;
  transition: transform .2s var(--ui-ease-spring), box-shadow .2s var(--ui-ease-out), background-color .16s ease, border-color .16s ease, color .16s ease;
}

.productShell .appNav button svg {
  flex: 0 0 auto;
  color: #868e96;
}

.productShell .appNav button:hover {
  background: #e9ecef !important;
  color: var(--ui-ink) !important;
}

.productShell .appNav button.on {
  border-color: #c9e7d8;
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-strong) !important;
  transform: translateX(3px);
  box-shadow: inset 3px 0 0 var(--ui-primary), 0 5px 12px rgba(11, 143, 97, .11);
}

.productShell .appNav button.on svg {
  color: var(--ui-primary);
}

.productShell .accountSummary {
  min-height: 62px;
  margin-top: auto;
  padding: 9px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
}

.accountAvatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #dceaff;
  color: var(--ui-blue);
  font-weight: 900;
}

.accountSummary div {
  min-width: 0;
}

.accountSummary small,
.accountSummary strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountSummary small {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 700;
}

.accountSummary strong {
  margin-top: 2px;
  font-size: 13px !important;
}

.accountSummary button,
.iconButton {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: #4d5a54;
  box-shadow: var(--ui-shadow-control) !important;
}

.productShell .appTopbar {
  width: min(100%, 1360px);
  min-height: 84px;
  margin: 0 auto 18px !important;
  padding: 18px 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbarTitle span {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
}

.productShell .appTopbar h1 {
  margin: 0;
  font-size: 28px !important;
  line-height: 1.18;
  font-weight: 900;
}

.topbarTitle {
  min-width: 0;
}

.topbarActions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.documentHandoffButton {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px !important;
  border: 1px solid #087c54 !important;
  border-radius: var(--ui-radius) !important;
  background: #087c54 !important;
  color: #fff !important;
  box-shadow: var(--ui-shadow-control) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  white-space: nowrap;
}

.documentHandoffButton:disabled {
  cursor: wait;
  opacity: .72;
}

.documentHandoffMessage {
  margin: 0 0 12px;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #ffd8a8;
  border-radius: var(--ui-radius);
  background: #fff9db;
  color: #5f3d00;
  font-size: 13px;
  font-weight: 760;
}

.documentHandoffMessage button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: var(--ui-radius);
  background: #fff;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.topbarContext {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
}

.productShell input,
.productShell select,
.productShell textarea,
.auth input {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 0 2px 4px rgba(18, 24, 22, .055), 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform .18s var(--ui-ease-out), box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.productShell input:hover,
.productShell select:hover,
.productShell textarea:hover,
.auth input:hover {
  border-color: #adb5bd !important;
}

.productShell input:focus,
.productShell select:focus,
.productShell textarea:focus,
.auth input:focus {
  border-color: var(--ui-blue) !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(76, 141, 255, .14), 0 8px 20px rgba(47, 111, 214, .1) !important;
}

.productShell .card,
.productShell .hero,
.productShell .settingsBlock,
.productShell .summaryLine article,
.productShell .opBlock,
.productShell .subBox,
.productShell .metricCard,
.productShell .adminMetrics article {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-1) !important;
  transition: border-color .2s ease, box-shadow .24s var(--ui-ease-out), transform .24s var(--ui-ease-out);
}

.productShell .head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.productShell .head span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
}

.productShell .head h2,
.productShell .card h2 {
  margin-top: 3px;
  font-size: 22px !important;
  line-height: 1.3;
  font-weight: 900;
}

.productShell .primary,
.productShell .hero form button,
.productShell .toolbar button,
.productShell .actions .primary,
.productShell .sheetSave,
.productShell .dangerSave {
  border: 1px solid var(--ui-primary-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: var(--ui-shadow-primary) !important;
}

.productShell .actions button,
.productShell .buttonGrid button,
.productShell .ghostBtn,
.productShell .softButton,
.productShell .inlineMiniBtn {
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  color: #324039 !important;
  box-shadow: var(--ui-shadow-control) !important;
}

.productShell .error,
.productShell .dangerText {
  color: #a12f24 !important;
}

.productShell .error {
  border: 1px solid #f1b6ae !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-coral-soft) !important;
}

.productShell .empty {
  border: 1px dashed var(--ui-border-strong) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface-soft) !important;
}

/* User product */
.userShell .mainContent {
  width: min(100%, 1120px);
}

.userShell .appTopbar {
  width: min(100%, 1120px);
}

.userShell .stack {
  gap: 20px;
}

.userShell .searchHero {
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "search"
    "notice"
    "filter"
    "metrics";
  gap: 14px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.searchHero > form {
  grid-area: search;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-1);
}

.searchHero > form input {
  height: 54px !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  font-weight: 780 !important;
}

.searchHero > form button {
  min-height: 54px !important;
}

.servicesHub .serviceHeroBanner {
  align-self: start;
  aspect-ratio: 1600 / 560;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid #b9dcca !important;
  border-radius: var(--ui-radius) !important;
  background: #f8f9fa !important;
  box-shadow: var(--ui-shadow-2) !important;
  transition: transform .28s var(--ui-ease-spring), box-shadow .28s var(--ui-ease-out), border-color .2s ease;
}

.searchHero .searchNotice,
.searchHero .searchReadiness {
  grid-area: notice;
  margin: 0;
}

.searchHero .searchFilterBar,
.searchHero .searchFlowTable {
  grid-area: filter;
}

.searchHero .metrics {
  grid-area: metrics;
  margin: 0;
}

.searchHero .accountSplit {
  grid-area: metrics;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: 10px;
  margin: 0;
}

.searchHero .accountCard {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.searchHero .accountStats article {
  min-width: 0;
}

.searchHero .accountStats b {
  max-width: none !important;
  overflow: visible !important;
  color: var(--ui-ink);
  font-size: 20px !important;
  text-overflow: clip !important;
  white-space: nowrap;
}

.userShell .metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.userShell .metrics article,
.userShell .metrics button {
  min-height: 82px;
  padding: 13px 14px;
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.userShell .metrics span {
  font-size: 11px;
}

.userShell .metrics b {
  font-size: 20px;
}

.userShell .metrics button {
  background: #17211d !important;
  color: #fff;
  font-size: 14px;
}

.userShell .resultOnly {
  display: block !important;
}

.userShell .resultPanel {
  min-height: 220px;
  padding: 22px;
}

.userShell .result {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 2px 0 #d6e0db, 0 8px 20px rgba(18, 24, 22, .055) !important;
  animation: ui-result-enter .38s var(--ui-ease-out) both;
}

.userShell .result:hover {
  border-color: #91cbb0 !important;
  background: #fbfefd !important;
  box-shadow: var(--ui-shadow-lift) !important;
}

.userShell .result mark,
.productShell .pillList span,
.productShell .resultTags span,
.productShell .checkLabels span {
  border-radius: 999px !important;
}

.detailOverlay,
.modalLite,
.noticePopupBackdrop,
.featureGuideMapBackdrop {
  background: rgba(18, 24, 22, .48) !important;
  backdrop-filter: blur(4px);
}

.detailSheet,
.reportDialog,
.noticePopup,
.featureGuideMap,
.featureGuideBubble {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-2) !important;
  animation: ui-modal-enter .34s var(--ui-ease-spring) both;
}

.activityWarningBox {
  border-radius: var(--ui-radius) !important;
  box-shadow: none !important;
}

.userShell .register,
.userShell .myInfoLayout,
.userShell .messageLayout {
  gap: 16px;
}

.userShell .checkGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}

.userShell .checkGrid label {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-soft);
  font-size: 13px;
  font-weight: 760;
  box-shadow: 0 2px 0 #dbe4df;
  transition: transform .18s var(--ui-ease-spring), border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.userShell .checkGrid label:has(input:checked) {
  transform: translateY(-1px);
  border-color: #91cbb0;
  background: var(--ui-primary-soft);
  color: var(--ui-primary-strong);
  box-shadow: 0 3px 0 #8dc6aa, 0 9px 18px rgba(11, 143, 97, .1);
}

.userShell .checkGrid input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.registerMode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 14px 0 18px;
  padding: 4px;
}

.registerMode button {
  min-height: 44px;
  border: 0 !important;
  font-weight: 850;
}

.falseReportFinder,
.falseReportTargetCard,
.falseReportBoundary,
.ordinaryChangeRoute,
.fraudInvestigationPanel,
.falseRegistrationAdminReview {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid #cfe0d8;
  border-radius: var(--ui-radius);
  background: #f7fbf9;
}

.falseReportFinder > div:first-child,
.falseRegistrationAdminReview > div:first-child {
  display: grid;
  gap: 4px;
  margin-bottom: 13px;
}

.falseReportFinder span,
.falseReportBoundary span,
.ordinaryChangeRoute span,
.falseRegistrationAdminReview span,
.falseReportEditHeading span {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.5;
}

.falseReportLookup {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(130px, .55fr) auto;
  align-items: end;
  gap: 10px;
}

.falseReportLookup label,
.falseReportReason,
.falseReportEvidence > label,
.falseRegistrationDecisionReason {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.falseReportLookup button {
  min-height: 46px;
  white-space: nowrap;
}

.falseReportNotice {
  margin: 12px 0 0;
  color: #476359;
  font-size: 13px;
  font-weight: 750;
}

.falseReportCandidates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.falseReportCandidates button {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 12px;
  text-align: left;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 2px 0 #d6e0db !important;
}

.falseReportCandidates button:hover {
  border-color: #91cbb0 !important;
  transform: translateY(-1px);
}

.falseReportCandidates span,
.falseReportCandidates small {
  color: var(--ui-muted);
}

.falseReportTargetCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #eef9f3;
  border-color: #9fcdb7;
}

.falseReportTargetCard > div {
  display: grid;
  gap: 4px;
}

.falseReportTargetCard > div > span {
  color: var(--ui-primary-strong);
  font-size: 12px;
  font-weight: 850;
}

.falseReportTargetCard small {
  color: var(--ui-muted);
}

.falseReportEditHeading {
  display: grid;
  gap: 3px;
  margin: 4px 0 12px;
}

.falseReportBoundary,
.ordinaryChangeRoute {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  margin-bottom: 14px;
  background: #fffaf1;
  border-color: #ead7ac;
}

.falseReportBoundary b,
.falseReportBoundary span,
.ordinaryChangeRoute b,
.ordinaryChangeRoute span {
  grid-column: 1;
}

.falseReportBoundary button,
.ordinaryChangeRoute button {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
}

.falseReportEvidence {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.3fr);
  align-items: start;
  gap: 12px;
  margin-top: 14px;
}

.falseReportEvidence .falseReportReason {
  margin-top: 0;
}

.falseReportReason {
  margin-top: 14px;
}

.falseRegistrationReportButton {
  width: 100%;
  margin-top: 12px;
  color: #a23636 !important;
  border-color: #e5bdbd !important;
  background: #fff7f7 !important;
}

.falseRegistrationComparison {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
}

.falseRegistrationComparison .compareHead,
.falseRegistrationComparison .compareRow {
  display: grid;
  grid-template-columns: minmax(110px, .35fr) minmax(180px, 1fr) minmax(180px, 1fr);
}

.falseRegistrationComparison .compareHead > *,
.falseRegistrationComparison .compareRow > * {
  min-width: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-right: 1px solid var(--ui-border);
}

.falseRegistrationComparison .compareHead > *:last-child,
.falseRegistrationComparison .compareRow > *:last-child {
  border-right: 0;
}

.falseRegistrationComparison .compareHead {
  background: #eef4f1;
  font-size: 12px;
  font-weight: 850;
}

.falseRegistrationComparison .compareRow + .compareRow {
  border-top: 1px solid var(--ui-border);
}

.falseRegistrationAdminReview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-top: 14px;
  background: #fffaf1;
  border-color: #ead7ac;
}

.falseRegistrationAdminReview > div:first-child,
.falseRegistrationDecisionReason {
  grid-column: 1 / -1;
}

.falseRegistrationAdminReview > label:not(.falseRegistrationDecisionReason) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #eadfc7;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 760;
}

.falseRegistrationAdminReview > label.falseRegistrationSelect {
  display: grid;
  align-content: start;
  gap: 7px;
}

.falseRegistrationAdminReview input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.fraudInvestigationPanel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  background: #f5f9ff;
  border-color: #cbd8eb;
}

.fraudInvestigationPanel header {
  display: grid;
  gap: 5px;
}

.fraudInvestigationPanel header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fraudInvestigationPanel header span,
.fraudInvestigationPanel header small,
.fraudInvestigationPanel article span,
.fraudInvestigationPanel article small {
  color: var(--ui-muted);
  font-size: 12px;
}

.fraudInvestigationPanel header p {
  margin: 0;
  line-height: 1.55;
}

.fraudInvestigationGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fraudInvestigationGrid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
}

.userShell .phones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.userShell .phones b {
  grid-column: 1 / -1;
}

.userShell .phones label {
  grid-template-columns: 58px minmax(0, 1fr);
}

.userShell .grid-3,
.pointAdminWork {
  align-items: start !important;
}

.userShell .grid-3 > *,
.pointAdminWork .actionPanel {
  align-self: start !important;
  height: auto !important;
}

.userShell .form,
.userShell .detail,
.userShell .settingsBlock {
  padding: 20px;
}

.userShell .checks label,
.userShell .subjectChecks label {
  border-radius: var(--ui-radius) !important;
}

.appBottomNav {
  display: none;
}

.floatingReport {
  right: 20px;
  bottom: 18px;
  min-height: 42px;
  border-radius: 999px !important;
  background: #17211d !important;
  color: #fff;
  box-shadow: var(--ui-shadow-2) !important;
  animation: ui-float-in .48s var(--ui-ease-spring) both;
}

.productShell.layout-messages .floatingReport {
  position: fixed !important;
  grid-column: auto !important;
  justify-self: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  width: max-content !important;
  height: auto !important;
}

.featureGuideButton {
  right: 20px !important;
  bottom: 70px !important;
  width: 42px !important;
  height: 42px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow-2) !important;
  animation: ui-guide-pulse 3.6s ease-in-out 1.2s infinite;
}

.featureGuideButton svg {
  filter: drop-shadow(0 4px 7px rgba(8, 122, 85, .16));
}

/* Administrator product */
.adminShell {
  --ui-sidebar: 220px;
}

.adminShell .adminSidebar {
  background: #212529 !important;
  color: #eef4f1;
  border-right-color: #343a40;
  box-shadow: 10px 0 30px rgba(33, 37, 41, .12), inset -1px 0 0 rgba(255, 255, 255, .05);
}

.adminShell .adminSidebar .appBrand small,
.adminShell .adminCredential span {
  color: #aab8b1 !important;
}

.adminShell .adminNav button {
  color: #c6d0cb !important;
}

.adminShell .adminNav button svg {
  color: #8fa099;
}

.adminShell .adminNav button:hover {
  background: #343a40 !important;
  color: #fff !important;
}

.adminShell .adminNav button.on {
  border-color: #376b57;
  background: #29483c !important;
  color: #a8efd0 !important;
  transform: translateX(3px);
  box-shadow: inset 3px 0 0 #32c98b, 0 7px 16px rgba(0, 0, 0, .2);
}

.adminShell .adminNav button.on svg {
  color: #6de0ae;
}

.adminCredential {
  margin-top: auto;
  display: grid;
  gap: 7px;
  font-size: 11px;
  font-weight: 760;
}

.adminCredential > span,
.mobileCredential > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adminCredential input {
  height: 40px;
  border-color: #36433d !important;
  background: #343a40 !important;
  color: #fff !important;
}

.adminCredential button,
.mobileCredential button {
  min-height: 38px;
  border: 1px solid #376b57;
  background: #29483c;
  color: #e8fff5;
}

.mobileCredential {
  display: none !important;
}

.adminShell .mainContent,
.adminShell .appTopbar {
  width: min(100%, 1600px);
}

body:has(.adminFullWidth) .adminShell,
.adminShell:has(.adminFullWidth),
body:has(.reviewSheetPage) .adminShell,
.adminShell:has(.reviewSheetPage) {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: var(--ui-sidebar) minmax(0, 1fr) !important;
  overflow: visible !important;
}

body:has(.adminFullWidth) .adminShell .side,
.adminShell:has(.adminFullWidth) .side,
body:has(.reviewSheetPage) .adminShell .side,
.adminShell:has(.reviewSheetPage) .side {
  display: flex !important;
}

body:has(.adminFullWidth) .adminShell .main,
.adminShell:has(.adminFullWidth) .main,
body:has(.reviewSheetPage) .adminShell .main,
.adminShell:has(.reviewSheetPage) .main {
  width: 100% !important;
  max-width: none !important;
  padding: 0 24px 64px !important;
}

body:has(.adminFullWidth) .adminShell .mainContent,
.adminShell:has(.adminFullWidth) .mainContent,
body:has(.reviewSheetPage) .adminShell .mainContent,
.adminShell:has(.reviewSheetPage) .mainContent,
body:has(.adminFullWidth) .adminShell .appTopbar,
.adminShell:has(.adminFullWidth) .appTopbar,
body:has(.reviewSheetPage) .adminShell .appTopbar,
.adminShell:has(.reviewSheetPage) .appTopbar {
  width: min(100%, 3000px) !important;
}

body:has(.adminFullWidth) .adminShell .adminGuardPanel,
.adminShell:has(.adminFullWidth) .adminGuardPanel {
  width: min(100%, 3000px) !important;
  max-width: 3000px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.adminShell .adminFullWidth,
.adminShell .reviewSheetPage {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.adminShell .adminMembers .memberSheetCard,
.adminShell .adminSearch,
.adminShell .reviewSheetPage {
  max-width: 100% !important;
}

.adminTabs {
  display: none !important;
}

.progressBoxWrap {
  right: 18px !important;
  top: 18px !important;
  width: min(320px, calc(100vw - 24px)) !important;
}

.progressBox {
  gap: 8px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: var(--ui-shadow-2) !important;
}

.progressTop,
.progressMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.progressTop strong {
  font-size: 13px;
}

.progressTop span,
.progressMeta {
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 760;
}

.progressTrack {
  height: 6px !important;
}

.progressFill {
  height: 100%;
  border-radius: inherit;
  background: var(--ui-primary);
  transition: width .18s ease;
}

.adminGuideWorkspace {
  width: 100%;
  min-width: 0;
}

.operationStatus {
  display: block !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-left: 4px solid var(--ui-primary) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.operationStatus.fail {
  border-left-color: var(--ui-coral) !important;
}

.operationStatus.hold {
  border-left-color: var(--ui-amber-bright) !important;
}

.operationStatusSummary {
  min-height: 64px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.operationStatusIcon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
}

.operationStatus.fail .operationStatusIcon {
  background: var(--ui-coral-soft);
  color: var(--ui-coral);
}

.operationStatus.hold .operationStatusIcon {
  background: var(--ui-amber-soft);
  color: var(--ui-amber);
}

.operationStatusCopy b,
.operationStatusCopy span {
  display: block;
}

.operationStatusCopy b {
  font-size: 14px;
}

.operationStatusCopy span {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
}

.statusRefreshButton {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  color: #35423c;
  font-size: 12px;
  font-weight: 800;
}

.adminGuardDetails {
  border-top: 1px solid var(--ui-border);
}

.adminGuardDetails > summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
  list-style: none;
}

.adminGuardDetails > summary::-webkit-details-marker {
  display: none;
}

.adminGuardDetails[open] > summary svg {
  transform: rotate(90deg);
}

.adminGuardDetailBody {
  display: grid;
  gap: 12px;
  padding: 4px 12px 14px;
}

.adminGuardDetailText {
  display: grid;
  gap: 5px;
}

.adminGuardDetailText small {
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.5;
}

.adminGuardChips {
  justify-content: flex-start !important;
}

.adminGuardChips span {
  min-height: 24px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
}

.adminShell .dashboardStack,
.adminShell .adminGrid,
.adminShell .adminWork {
  gap: 14px;
}

.phoneDevicesWork {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.phoneAdminTaskNav {
  grid-column: 1 / -1;
  min-height: 52px;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 4px;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface);
}

.phoneAdminTaskNav button {
  min-width: 132px;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ui-muted);
  font-weight: 850;
}

.phoneAdminTaskNav button.on {
  border-bottom-color: var(--ui-primary);
  color: var(--ui-primary-strong);
}

.phoneDevicesWork.view-members > .phoneAdminMain,
.phoneDevicesWork.view-operations > .phoneAdminMain {
  grid-column: 1 / -1;
}

.phoneDevicesWork.view-members .phoneUserAccessPanel {
  margin-top: 14px;
  padding-top: 0;
  border-top: 0;
}

.phoneDevicesWork > .operationalAiAssistPanel {
  grid-column: 1 / -1;
  margin-top: 0;
}

.phoneAdminOperationDevice {
  display: grid;
  grid-template-columns: minmax(260px, .7fr) auto auto minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.phoneAdminOperationDevice label {
  display: grid;
  gap: 5px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 800;
}

.phoneAdminOperationDevice select {
  width: 100%;
  min-height: 40px;
}

.phoneAdminOperationDevice small {
  align-self: center;
  color: var(--ui-muted);
  overflow-wrap: anywhere;
}

.phoneAdminOperationLead {
  display: grid;
  gap: 1px;
  min-width: 68px;
}

.phoneAdminOperationLead small,
.phoneAdminOperationLead b {
  display: block;
}

.phoneAdminOperationLead b {
  font-size: 12px;
}

.phoneDevicesWork .head {
  display: grid;
  gap: 3px;
}

.phoneDevicesWork .head h2 {
  margin-top: 0;
  font-size: 20px !important;
}

.phoneDeviceInstall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.phoneDeviceInstall > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phoneDeviceInstall span,
.phoneDeviceInstall small {
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneDeviceInstall b {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.phoneDeviceInstall a,
.phoneDeviceInstall > button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
  color: var(--ui-ink);
  font-size: 11px;
  font-weight: 820;
  text-decoration: none;
}

.phoneDeviceInstall a {
  padding: 0 12px;
  background: #173f35;
  color: #fff;
}

.phoneDeviceInstall > button {
  width: 38px;
  padding: 0;
}

.phoneDeviceToolbar {
  justify-content: space-between;
}

.phoneDeviceToolbar > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.phoneDeviceNotice {
  margin: 0 0 12px;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
}

.phoneDeviceNotice.warn,
.phoneDeviceSchemaState {
  color: #8a4c0e;
}

.phoneDeviceSchemaState {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e9c68f;
  border-radius: var(--ui-radius);
  background: #fff8e8;
}

.phoneDeviceSchemaState span {
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.phoneDeviceTable table {
  min-width: 820px;
}

.phoneDeviceTable td b,
.phoneDeviceTable td small {
  display: block;
}

.phoneDeviceTable td small {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneOperationProgress {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}

.phoneOperationProgressSummary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.phoneOperationProtocolList {
  border-top: 1px solid var(--ui-border);
}

.phoneOperationProtocol {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ui-border);
}

.phoneOperationProtocolHead,
.phoneOperationDevice,
.phoneOperationNextAction {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phoneOperationProtocolHead > div,
.phoneOperationDevice > span:first-child,
.phoneOperationDevice > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phoneOperationProtocolHead small,
.phoneOperationDevice small,
.phoneOperationNextAction small {
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.phoneOperationProtocolMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  overflow: hidden;
}

.phoneOperationProtocolMetrics > span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-right: 1px solid var(--ui-border);
}

.phoneOperationProtocolMetrics > span:last-child {
  border-right: 0;
}

.phoneOperationProtocolMetrics small {
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneOperationProtocolMetrics b {
  font-size: 15px;
}

.phoneOperationDeviceList {
  display: grid;
  border-top: 1px solid var(--ui-border);
}

.phoneOperationDevice {
  min-height: 48px;
  padding: 7px 0;
  border-bottom: 1px solid var(--ui-border);
}

.phoneOperationDevice > span:first-child {
  flex: 1 1 42%;
}

.phoneOperationDevice > span:nth-child(2) {
  flex: 0 1 190px;
  text-align: right;
}

.phoneOperationNextAction {
  align-items: baseline;
}

.phoneOperationNextAction > span {
  min-width: 0;
  display: flex;
  gap: 7px;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.phoneOperationNextAction > span b {
  flex: 0 0 auto;
}

.phoneCallTestPanel,
.phoneCallCyclePanel {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border);
}

.phoneCallCycleControls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.phoneCallCycleControls > label,
.phoneCallCycleStop label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 800;
}

.phoneCallCycleControls select,
.phoneCallCycleControls input,
.phoneCallCycleStop input {
  width: 100%;
  min-width: 0;
}

.phoneCallCycleStop {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
}

.phoneCallCycleStop .segmented {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phoneCallCycleDevices {
  display: grid;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.phoneCallCycleDevicesHead,
.phoneCallCycleDevice {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phoneCallCycleDevicesHead {
  min-height: 42px;
}

.phoneCallCycleDevicesHead > div {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.phoneCallCycleDevicesHead span {
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneCallCycleDevicesHead > button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}

.phoneCallCycleDevice {
  min-height: 50px;
  border-top: 1px solid var(--ui-border);
}

.phoneCallCycleDevice.selected {
  background: #f5faf7;
}

.phoneCallCycleDevice > label {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 18px 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  cursor: pointer;
}

.phoneCallCycleDevice > label > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phoneCallCycleDevice b,
.phoneCallCycleDevice small {
  overflow-wrap: anywhere;
}

.phoneCallCycleDevice b {
  font-size: 11px;
}

.phoneCallCycleDevice small {
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneCallCycleOrder {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  background: #fff;
  font-size: 10px;
  font-weight: 850;
}

.phoneCallCycleMove {
  display: grid;
  grid-template-columns: repeat(2, 30px);
  gap: 4px;
}

.phoneCallCycleMove button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: #fff;
}

.phoneCallCycleActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.phoneCallCycleActions button {
  min-height: 40px;
}

.phoneCallCyclePanel .confirmBox {
  margin: 0;
}

.phoneCallTestHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phoneCallTestHead > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.phoneCallTestHead span:not(.pill) {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 800;
}

.phoneCallTestHead h3 {
  margin: 0;
  font-size: 16px;
}

.phoneManagedState {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.phoneManagedState div {
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid var(--ui-border);
}

.phoneManagedState dt {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 760;
}

.phoneManagedState dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 820;
}

.phoneManagedEvents {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--ui-muted);
  font-size: 10px;
}

.phoneCallTestControls {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, .7fr);
  gap: 10px;
  align-items: end;
}

.phoneCallTestControls > label,
.phoneCallMode {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 800;
}

.phoneCallTestControls select,
.phoneCallTestControls input {
  width: 100%;
  min-width: 0;
}

.phoneCallConfigInput {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.phoneCallConfigInput button {
  white-space: nowrap;
}

.phoneCallMode .segmented {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.phoneCallMode .segmented button {
  min-width: 0;
}

.phoneCallQueue {
  width: 100%;
  min-height: 40px;
}

.phoneCallTestPanel .confirmBox {
  margin: 0;
}

.phoneCallTestState {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.phoneCallTestState div {
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid var(--ui-border);
}

.phoneCallTestState dt {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 760;
}

.phoneCallTestState dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  font-weight: 820;
}

.phoneDeviceIdentity {
  display: grid;
  gap: 4px;
  margin: 10px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ui-border);
}

.phoneDeviceIdentity b {
  font-size: 16px;
}

.phoneDeviceIdentity span {
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.45;
}

.phoneDeviceDiagnostics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin: 0 0 16px;
}

.phoneDeviceDiagnostics div {
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--ui-border);
}

.phoneDeviceDiagnostics dt {
  color: var(--ui-muted);
  font-size: 10px;
  font-weight: 760;
}

.phoneDeviceDiagnostics dd {
  margin: 3px 0 0;
  color: var(--ui-ink);
  font-size: 12px;
  font-weight: 850;
}

.phoneDeviceProfile {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.phoneDeviceProfile label {
  display: grid;
  gap: 5px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 800;
}

.phoneDeviceProfile input,
.phoneDeviceProfile textarea {
  width: 100%;
}

.phoneDeviceTimingGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.phoneDeviceProfileSave {
  min-height: 40px;
}

.phoneDeviceAction .confirmBox {
  margin-top: 12px;
}

.phoneDeviceActions {
  margin-top: 12px;
}

.phoneDeviceActions .dangerText {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .phoneDevicesWork {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneAdminTaskNav {
    overflow-x: auto;
    padding: 0;
  }

  .phoneAdminTaskNav button {
    min-width: 116px;
    flex: 1 0 auto;
    padding: 0 10px;
  }

  .phoneAdminOperationDevice {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .phoneCallCycleDevices,
  .phoneCallCycleActions,
  .phoneCallCycleState {
    margin-right: 46px;
  }

  .phoneDeviceTimingGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneCallTestControls,
  .phoneCallCycleControls,
  .phoneCallCycleStop,
  .phoneCallCycleActions,
  .phoneManagedState,
  .phoneCallTestState {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneOperationProgressSummary {
    justify-content: flex-start;
  }

  .phoneOperationProtocolMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneOperationProtocolMetrics > span:nth-child(2) {
    border-right: 0;
  }

  .phoneOperationProtocolMetrics > span:nth-child(-n + 2) {
    border-bottom: 1px solid var(--ui-border);
  }

  .phoneOperationDevice,
  .phoneOperationNextAction {
    align-items: flex-start;
    flex-direction: column;
  }

  .phoneOperationDevice > span:nth-child(2) {
    flex-basis: auto;
    text-align: left;
  }

  .phoneCallCycleDevice {
    align-items: stretch;
  }

  .phoneCallCycleMove {
    align-content: center;
  }

  .phoneDeviceToolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneDeviceToolbar .segmented {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .phoneDeviceToolbar .segmented button,
  .phoneDeviceToolbar > button {
    width: 100%;
    min-width: 0;
  }

  .phoneDeviceToolbar > button {
    justify-content: center;
  }

  .phoneDeviceInstall {
    grid-template-columns: minmax(0, 1fr) 38px;
  }

  .phoneDeviceInstall > div {
    grid-column: 1 / -1;
  }

  .phoneDeviceInstall a {
    width: 100%;
  }
}

.adminShell .dashboardStack {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.adminShell .dashboardStack > * {
  min-width: 0;
  max-width: 100%;
}

.adminQuickOps {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.adminQuickGrid {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.adminQuickGrid button {
  min-height: 76px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-1) !important;
  transition: transform .22s var(--ui-ease-spring), box-shadow .22s var(--ui-ease-out), border-color .18s ease;
}

.adminMetrics,
.adminMetrics.rich {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.adminMetrics article,
.adminMetrics .metricCard {
  min-height: 104px;
  padding: 14px !important;
}

.adminMetrics b {
  font-size: 23px !important;
}

.chartCard {
  min-height: 0 !important;
}

.barChart {
  min-height: 210px;
}

.productShell .tableWrap,
.productShell .adminTableWrap,
.productShell .gridTable,
.productShell .subjectEditSheet,
.productShell .reviewEditSheet {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface);
  box-shadow: 0 2px 0 #d8e1dc, 0 10px 24px rgba(18, 24, 22, .055) !important;
  scrollbar-color: #aab8b1 #eef2f0;
}

.productShell table {
  background: var(--ui-surface);
  font-variant-numeric: tabular-nums;
}

.productShell th {
  background: #eef3f1 !important;
  color: #34413b !important;
  border-color: #d5dfda !important;
  font-size: 11px !important;
  font-weight: 850 !important;
}

.productShell td {
  border-color: #e5ebe8 !important;
  color: #28332e;
  font-size: 12px;
}

.productShell tr:hover td {
  background: #f7faf8 !important;
  transition: background-color .16s ease, color .16s ease;
}

.productShell tr.selected td {
  background: var(--ui-blue-soft) !important;
  color: #173e8f !important;
}

.adminMembers .adminHero,
.adminSearch .searchBar,
.structuredSearch,
.memberFilterBar,
.reviewFilterBar {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.adminMembers .memberFilterBar {
  grid-template-columns: minmax(220px, 1fr) repeat(5, minmax(96px, 126px)) minmax(76px, 88px) !important;
}

.adminMembers .memberFilterBar > * {
  min-width: 0;
}

.adminMembers .memberSheetCard,
.adminSearch .subjectSheet,
.reviewSheetPage .reviewSheetCard {
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-1) !important;
}

.segmented,
.rangeTabs {
  border-radius: var(--ui-radius) !important;
  background: #edf2f0 !important;
}

.segmented button,
.rangeTabs button {
  border-radius: 6px !important;
}

.productShell .toolbar .segmented button {
  background: transparent !important;
  color: #53615a !important;
  box-shadow: none !important;
}

.segmented button.active,
.segmented button.on,
.rangeTabs button.on,
.productShell .toolbar .segmented button.active,
.productShell .toolbar .segmented button.on {
  background: var(--ui-surface) !important;
  color: var(--ui-primary-strong) !important;
  transform: translateY(-1px);
  box-shadow: 0 3px 0 #cbd6d0, 0 7px 15px rgba(18, 24, 22, .1) !important;
}

.operationalAiCadence button.active:active:not(:disabled),
.operationalAiCadence button:active:not(:disabled) {
  transform: translateY(2px) scale(.98) !important;
  box-shadow: 0 1px 0 #cbd6d0, inset 0 2px 4px rgba(18, 24, 22, .16) !important;
}

.adminRecordScope button:active:not(:disabled) {
  transform: translateY(2px) scale(.98) !important;
  box-shadow: 0 1px 0 #cbd6d0, inset 0 2px 4px rgba(18, 24, 22, .16) !important;
}

.featureGuideMap {
  max-height: min(82vh, 760px) !important;
}

.featureGuideMapGrid > button {
  border-radius: var(--ui-radius) !important;
  box-shadow: var(--ui-shadow-control) !important;
}

.featureGuideBubble {
  width: min(400px, calc(100vw - 24px)) !important;
  padding: 18px !important;
  border-color: #cfe0d7 !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(33, 37, 41, .16), inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

.featureGuideBubble::before {
  border-color: #cfe0d7 !important;
  background: #fff !important;
}

.featureGuideSpotlight {
  border-color: var(--ui-primary-bright) !important;
  box-shadow: 0 0 0 9999px rgba(33, 37, 41, .5), 0 0 0 7px rgba(22, 184, 121, .15), 0 8px 24px rgba(8, 122, 85, .2) !important;
}

.featureGuideBubbleHead span {
  color: var(--ui-primary) !important;
}

.featureGuideBubbleHead button {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-soft) !important;
  color: var(--ui-muted) !important;
  box-shadow: var(--ui-shadow-control) !important;
}

.featureGuideBubble h3 {
  color: var(--ui-ink) !important;
  line-height: 1.35;
}

.featureGuideBubble p {
  color: var(--ui-muted) !important;
  line-height: 1.62;
}

.featureGuideActions button {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-soft) !important;
  color: #343a40 !important;
  box-shadow: var(--ui-shadow-control) !important;
}

.featureGuideActions button.primary {
  border-color: var(--ui-primary-strong) !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  box-shadow: var(--ui-shadow-primary) !important;
}

/* Authentication */
.auth {
  min-height: 100vh;
  display: grid !important;
  grid-template-columns: minmax(360px, 520px) minmax(340px, 420px) !important;
  gap: 28px !important;
  place-content: center;
  padding: 28px !important;
  background: var(--ui-bg) !important;
}

.authHero,
.authForm {
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-2) !important;
  animation: ui-auth-enter .5s var(--ui-ease-out) both;
}

.authForm {
  animation-delay: .08s;
}

.authHero {
  min-height: 560px !important;
  padding: 36px !important;
  display: grid !important;
  place-items: center;
}

.authLogoImage {
  width: min(100%, 390px) !important;
  max-height: 420px !important;
  object-fit: contain;
}

.authLines {
  display: none !important;
}

.authForm {
  align-content: center;
  gap: 13px !important;
  padding: 28px !important;
}

.authForm label {
  gap: 6px !important;
  color: #36423d !important;
  font-size: 13px;
}

.authForm input {
  min-height: 48px;
}

.auth .switch {
  padding: 4px;
  border-radius: var(--ui-radius) !important;
  background: #edf2f0 !important;
}

.auth .switch button {
  min-height: 42px;
  border-radius: 6px !important;
}

.auth .switch button.on {
  background: var(--ui-surface) !important;
  color: var(--ui-primary-strong) !important;
  box-shadow: 0 1px 4px rgba(18, 24, 22, .12);
}

.authSubmit {
  min-height: 50px !important;
  border-radius: var(--ui-radius) !important;
  background: var(--ui-primary) !important;
  box-shadow: var(--ui-shadow-primary) !important;
}

/* Tactile motion layer: shared across every user and administrator surface. */
.screenStage {
  min-width: 0;
  animation: ui-screen-enter .42s var(--ui-ease-out) both;
  transform-origin: 50% 0;
}

.userScreenStage > .stack,
.adminScreenStage > * {
  min-width: 0;
}

.userShell .accountStats article,
.userShell .metrics article,
.adminMetrics article,
.adminMetrics .metricCard {
  --ui-card-accent: var(--ui-primary);
  position: relative;
  overflow: hidden;
}

.userShell .accountStats article::before,
.userShell .metrics article::before,
.adminMetrics article::before,
.adminMetrics .metricCard::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--ui-card-accent);
  opacity: .72;
  transform: scaleX(.28);
  transform-origin: left;
  transition: transform .28s var(--ui-ease-out), opacity .2s ease;
}

.userShell .accountStats article:nth-child(2),
.userShell .metrics article:nth-child(2),
.adminMetrics article:nth-child(4n + 2),
.adminMetrics .metricCard:nth-child(4n + 2) { --ui-card-accent: var(--ui-blue); }

.userShell .accountStats article:nth-child(3),
.userShell .metrics article:nth-child(3),
.adminMetrics article:nth-child(4n + 3),
.adminMetrics .metricCard:nth-child(4n + 3) { --ui-card-accent: var(--ui-amber); }

.adminMetrics article:nth-child(4n),
.adminMetrics .metricCard:nth-child(4n) { --ui-card-accent: var(--ui-coral); }

.userShell .accountStats article:nth-child(2),
.userShell .metrics article:nth-child(2),
.adminMetrics article:nth-child(4n + 2),
.adminMetrics .metricCard:nth-child(4n + 2) {
  background: #f5f8ff !important;
}

.userShell .accountStats article:nth-child(3),
.userShell .metrics article:nth-child(3),
.adminMetrics article:nth-child(4n + 3),
.adminMetrics .metricCard:nth-child(4n + 3) {
  background: #fffbf3 !important;
}

.userShell .metrics article:nth-child(4),
.adminMetrics article:nth-child(4n),
.adminMetrics .metricCard:nth-child(4n) {
  background: #fff7f7 !important;
}

.userShell .accountStats article:hover::before,
.userShell .metrics article:hover::before,
.adminMetrics article:hover::before,
.adminMetrics .metricCard:hover::before {
  transform: scaleX(1);
  opacity: 1;
}

.miniToast {
  animation: ui-toast-enter .4s var(--ui-ease-spring) both;
  box-shadow: var(--ui-shadow-2);
}

.detailOverlay,
.modalLite,
.noticePopupBackdrop,
.featureGuideMapBackdrop {
  animation: ui-backdrop-enter .22s ease-out both;
}

.loadingStateBox,
.progressBox {
  animation: ui-soft-pulse 1.8s ease-in-out infinite;
}

@media (hover: hover) and (pointer: fine) {
  .productShell .appNav button:hover {
    transform: translateX(3px);
  }

  .productShell .primary:hover,
  .productShell .hero form button:hover,
  .productShell .toolbar button:hover,
  .productShell .actions .primary:hover,
  .productShell .sheetSave:hover,
  .productShell .dangerSave:hover,
  .authSubmit:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 0 #056143, 0 18px 32px rgba(11, 143, 97, .27), inset 0 1px 0 rgba(255, 255, 255, .36) !important;
  }

  .productShell .actions button:hover,
  .productShell .buttonGrid button:hover,
  .productShell .ghostBtn:hover,
  .productShell .softButton:hover,
  .productShell .inlineMiniBtn:hover,
  .accountSummary button:hover,
  .iconButton:hover,
  .featureGuideMapGrid > button:hover {
    transform: translateY(-2px);
    border-color: #aebdb6 !important;
    box-shadow: 0 5px 0 #c6d2cc, 0 14px 24px rgba(18, 24, 22, .12), inset 0 1px 0 #fff !important;
  }

  .adminQuickGrid button:hover,
  .userShell .result:hover,
  .productShell .reportRow:hover {
    transform: translateY(-3px);
    border-color: #a9caba !important;
    box-shadow: var(--ui-shadow-lift) !important;
  }

  .servicesHub .serviceHeroBanner:hover {
    transform: translateY(-3px) scale(1.003);
    border-color: #7fc9aa !important;
    box-shadow: var(--ui-shadow-lift) !important;
  }

  .servicesHub .serviceHeroBanner:hover img {
    transform: scale(1.008);
  }
}

.productShell .primary:not(:disabled):active,
.productShell .hero form button:not(:disabled):active,
.productShell .toolbar button:not(:disabled):active,
.productShell .actions .primary:not(:disabled):active,
.productShell .sheetSave:not(:disabled):active,
.productShell .dangerSave:not(:disabled):active,
.authSubmit:not(:disabled):active {
  transform: translateY(4px) scale(.985);
  box-shadow: 0 1px 0 #056143, 0 4px 8px rgba(11, 143, 97, .16), inset 0 2px 4px rgba(0, 0, 0, .1) !important;
}

.productShell button.on:not(:disabled):active {
  transform: translateY(2px) scale(.98) !important;
  box-shadow: var(--ui-press) !important;
}

@keyframes ui-screen-enter {
  from { opacity: 0; transform: translateY(10px) scale(.992); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-result-enter {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-modal-enter {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-auth-enter {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-toast-enter {
  0% { opacity: 0; transform: translate(-50%, 14px) scale(.92); }
  72% { opacity: 1; transform: translate(-50%, -2px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes ui-float-in {
  from { opacity: 0; transform: translateY(14px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-guide-pulse {
  0%, 82%, 100% { transform: translateY(0) scale(1); box-shadow: var(--ui-shadow-2); }
  88% { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 30px rgba(11, 143, 97, .2); }
  94% { transform: translateY(0) scale(1); box-shadow: var(--ui-shadow-2); }
}

@keyframes ui-soft-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .78; }
}

@media (min-width: 1600px) {
  .userShell .mainContent,
  .userShell .appTopbar {
    width: min(100%, 1240px);
  }
}

@media (max-width: 1180px) {
  .productShell,
  body:has(.adminFullWidth) .adminShell,
  .adminShell:has(.adminFullWidth),
  body:has(.reviewSheetPage) .adminShell,
  .adminShell:has(.reviewSheetPage) {
    grid-template-columns: 1fr !important;
  }

  .productShell .appSidebar,
  body:has(.adminFullWidth) .adminShell .side,
  .adminShell:has(.adminFullWidth) .side,
  body:has(.reviewSheetPage) .adminShell .side,
  .adminShell:has(.reviewSheetPage) .side {
    display: none !important;
  }

  .productShell .main,
  body:has(.adminFullWidth) .adminShell .main,
  .adminShell:has(.adminFullWidth) .main,
  body:has(.reviewSheetPage) .adminShell .main,
  .adminShell:has(.reviewSheetPage) .main {
    padding: 0 18px 92px !important;
  }

  .adminTabs {
    display: flex !important;
    gap: 6px;
    margin: 0 0 16px !important;
    padding: 4px 0 8px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  .adminTabs button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 0 11px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    color: #46524d !important;
    scroll-snap-align: center;
  }

  .adminTabs button.on {
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    color: #fff !important;
  }

  .mobileCredential {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 12px !important;
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 760;
  }

  .mobileCredential input {
    max-width: none !important;
    min-height: 42px;
  }

  .mobileCredential > button,
  .mobileCredential > input + button {
    grid-column: 2;
  }

  .searchHero {
    grid-template-columns: minmax(0, 1fr);
  }

  .servicesHub .serviceHeroBanner {
    min-height: 420px;
    aspect-ratio: auto;
  }

  .searchHero .accountSplit {
    grid-template-columns: minmax(0, 1fr) 280px;
  }

  .userShell .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .productShell .main,
  body:has(.adminFullWidth) .adminShell .main,
  .adminShell:has(.adminFullWidth) .main,
  body:has(.reviewSheetPage) .adminShell .main,
  .adminShell:has(.reviewSheetPage) .main {
    padding: 0 12px 108px !important;
  }

  .productShell .appTopbar {
    min-height: 68px;
    margin-bottom: 10px !important;
    padding: 12px 2px 8px;
  }

  .productShell .appTopbar h1 {
    font-size: 24px !important;
  }

  .topbarActions {
    gap: 6px;
  }

  .documentHandoffButton {
    min-height: 38px;
    padding: 0 10px !important;
    font-size: 13px !important;
  }

  .topbarTitle span,
  .topbarContext {
    display: none;
  }

  .searchHero {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  .servicesHub .serviceHeroBanner {
    min-height: 650px;
    aspect-ratio: auto;
  }

  .searchHero > form {
    order: 1;
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .searchHero > form input,
  .searchHero > form button {
    min-height: 50px !important;
    height: 50px !important;
  }

  .searchHero .searchNotice,
  .searchHero .searchReadiness {
    order: 2;
  }

  .searchHero .searchFilterBar,
  .searchHero .searchFlowTable {
    order: 3;
  }

  .searchHero .metrics {
    order: 4;
  }

  .searchHero .accountSplit {
    order: 4;
    grid-template-columns: 1fr;
  }

  .userShell .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .userShell .metrics article,
  .userShell .metrics button {
    min-height: 76px;
    padding: 11px;
  }

  .userShell .resultPanel,
  .userShell .form,
  .userShell .detail,
  .userShell .settingsBlock,
  .productShell .card {
    padding: 16px;
  }

  .userShell .checkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .userShell .checkGrid .check {
    min-height: 68px;
    align-content: center;
    overflow-wrap: anywhere;
  }

  .userShell .phones {
    grid-template-columns: 1fr;
  }

  .userShell .phones b {
    grid-column: auto;
  }

  .appBottomNav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 42;
    min-height: 62px;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--ui-border);
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .96);
    box-shadow: var(--ui-shadow-2);
    backdrop-filter: blur(16px);
  }

  .appBottomNav button {
    min-width: 0;
    min-height: 50px;
    display: grid;
    place-items: center;
    gap: 2px;
    padding: 5px 2px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #596660;
    font-size: 10px;
    font-weight: 760;
  }

  .appBottomNav button.on {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-strong) !important;
  }

  .floatingReport,
  .productShell.layout-messages .floatingReport {
    right: 12px;
    bottom: 84px;
    min-height: 38px;
    padding: 0 12px;
    font-size: 11px;
  }

  .featureGuideButton {
    right: 12px !important;
    bottom: 128px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .mobileCredential {
    grid-template-columns: 1fr;
  }

  .operationStatusSummary {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .statusRefreshButton {
    grid-column: 1 / -1;
    justify-self: stretch;
    justify-content: center;
  }

  .adminGuardDetailBody {
    overflow-wrap: anywhere;
  }

  .adminMetrics,
  .adminMetrics.rich {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminMetrics article,
  .adminMetrics .metricCard {
    min-height: 94px;
  }

  .adminMembers .memberFilterBar {
    grid-template-columns: 1fr !important;
  }

  .featureGuideButton.admin {
    right: 2px !important;
    bottom: 18px !important;
  }

  .adminScreenStage {
    padding-right: 14px;
  }

  .auth {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .authHero {
    min-height: 210px !important;
    padding: 22px !important;
  }

  .authLogoImage {
    max-height: 180px !important;
  }

  .authForm {
    padding: 20px 16px !important;
  }
}

@media (max-width: 430px) {
  .adminMetrics,
  .adminMetrics.rich {
    grid-template-columns: 1fr;
  }

  .productShell .head h2,
  .productShell .card h2 {
    font-size: 20px !important;
  }

  .featureGuideMapGrid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 350px) {
  .userShell .checkGrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Isolated OAuth consent surface. It never mounts the user workspace side effects. */
.oauthConsentShell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--ui-bg);
  color: var(--ui-ink);
}

.oauthConsentCard,
.oauthConsentIntro {
  width: min(100%, 520px);
}

.oauthConsentCard {
  display: grid;
  gap: 22px;
  padding: 30px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-2);
}

.oauthConsentBrand,
.oauthConsentAccount,
.oauthConsentActions,
.oauthConsentStatus {
  display: flex;
  align-items: center;
}

.oauthConsentBrand {
  gap: 10px;
  color: var(--ui-primary-strong);
  font-size: 13px;
  font-weight: 850;
}

.oauthConsentBrand img {
  width: 88px;
  height: auto;
}

.oauthConsentAccount {
  justify-content: space-between;
  gap: 16px;
  padding: 13px 15px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface-soft);
}

.oauthConsentAccount small,
.oauthConsentCopy > span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 760;
}

.oauthConsentCopy h1,
.oauthConsentIntro h1 {
  margin: 7px 0 10px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: 0;
  word-break: keep-all;
}

.oauthConsentCopy p,
.oauthConsentIntro p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 15px;
  line-height: 1.7;
}

.oauthConsentScope {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-primary-soft);
}

.oauthConsentScope > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
}

.oauthConsentScope dt {
  color: var(--ui-muted);
  font-size: 13px;
}

.oauthConsentScope dd {
  margin: 0;
  font-weight: 800;
}

.oauthConsentActions {
  gap: 10px;
}

.oauthConsentActions button,
.oauthConsentRestart {
  min-height: 48px;
  flex: 1;
  border-radius: var(--ui-radius);
  font-weight: 850;
  text-align: center;
}

.oauthConsentDeny {
  border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface);
  color: var(--ui-muted);
  box-shadow: var(--ui-shadow-control);
}

.oauthConsentApprove,
.oauthConsentRestart {
  border: 1px solid var(--ui-primary-strong);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: var(--ui-shadow-primary);
}

.oauthConsentMessage {
  margin: 0;
  padding: 13px 14px;
  border: 1px solid #f1b6ae;
  border-radius: var(--ui-radius);
  background: var(--ui-coral-soft);
  color: #8f2c24;
  line-height: 1.55;
}

.oauthConsentStatus {
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  color: var(--ui-muted);
}

.oauthConsentStatus i {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ui-border-strong);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: oauth-consent-spin .8s linear infinite;
}

.oauthConsentRestart {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.oauthConsentLogin {
  align-content: center;
  justify-content: center;
  grid-template-columns: minmax(280px, 420px) minmax(360px, 520px);
  gap: 28px;
}

.oauthConsentLogin .auth {
  min-height: 0;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  place-content: stretch;
  padding: 0 !important;
  background: transparent !important;
}

.oauthConsentLogin .authHero {
  display: none !important;
}

@keyframes oauth-consent-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 820px) {
  .oauthConsentShell,
  .oauthConsentLogin {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }

  .oauthConsentLogin .oauthConsentIntro {
    width: min(100%, 520px);
    justify-self: center;
  }

  .oauthConsentCard {
    padding: 22px;
  }

  .oauthConsentCopy h1,
  .oauthConsentIntro h1 {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oauthConsentStatus i {
    animation: none;
  }
}

/* Automatic call control stays inside the Search Click shell; desktop can detach the same route. */
.phoneUserAccessPanel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ui-border);
}

.phoneUserAccessRoster {
  margin-top: 16px;
}

.phoneUserAccessSectionHead {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.phoneUserAccessRoster > .phoneUserAccessSectionHead {
  margin-top: 0;
}

.phoneUserAccessSectionHead > div,
.phoneUserAccessSectionHead b,
.phoneUserAccessSectionHead small {
  display: block;
}

.phoneUserAccessSectionHead b {
  font-size: 14px;
}

.phoneUserAccessSectionHead small,
.phoneUserAccessSectionHead > span {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 760;
}

.phoneUserAccessSectionHead > span {
  margin-top: 0;
  white-space: nowrap;
}

.phoneUserAccessForm {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.phoneUserAccessForm.assignment {
  grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(170px, .8fr));
}

.phoneUserAccessForm.policy {
  align-items: end;
}

.phoneUserAccessForm label,
.phoneUserAccessModes > span,
.phoneControlForm label,
.phoneControlMode > span,
.phoneControlStopCondition label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 800;
}

.phoneUserAccessForm input,
.phoneUserAccessForm select,
.phoneControlForm input,
.phoneControlForm select,
.phoneControlStopCondition input {
  width: 100%;
  min-height: 42px;
}

.phoneUserAccessFixedPolicy {
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-soft);
}

.phoneUserAccessFixedPolicy span {
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 800;
}

.phoneUserAccessModes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.phoneUserAccessActions,
.phoneControlActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.phoneUserAccessActions button,
.phoneControlActions button {
  min-width: 180px;
}

.phoneUserAccessTable {
  margin-top: 8px;
}

.phoneUserAccessTable tbody tr {
  cursor: pointer;
}

.phoneUserAccessTable tbody tr.selected td {
  background: #f2f8f5;
}

.phoneUserAccessTable td b,
.phoneUserAccessTable td small {
  display: block;
}

.phoneUserAccessDevices {
  margin-top: 10px;
}

.phoneControlWorkspace {
  width: min(100%, 980px);
  min-height: 620px;
  margin: 0 auto;
  padding: 0 0 36px;
}

.phoneControlWorkspace.detached {
  width: 100%;
  min-height: 100vh;
  padding: 0 20px 36px;
}

@media (min-width: 761px) {
  .phoneControlWorkspace.integrated .phoneControlTitle > span {
    display: none;
  }
}

.screenStage-phone {
  animation-fill-mode: none;
}

.phoneDetachedShell {
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;
  background: var(--ui-bg);
}

.phoneControlHeader {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ui-border);
}

.phoneControlTitle,
.phoneControlTitle > span,
.phoneControlHeaderActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phoneControlTitle > span {
  align-items: flex-start;
  flex-direction: column;
  gap: 1px;
}

.phoneControlTitle small {
  color: var(--ui-primary);
  font-size: 12px;
  font-weight: 900;
}

.phoneControlTitle h2 {
  margin: 0;
  font-size: 22px;
}

.phoneControlHeader > .phoneControlTitle > button,
.phoneControlHeader > .phoneControlHeaderActions > button,
.phoneControlBack,
.phoneControlPopout {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.phoneControlHeaderActions .screenReportInline {
  flex: 0 0 42px;
}

.phoneControlHeaderActions .featureGuideButton.inline {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto;
  flex: 0 0 42px;
  animation: none;
}

.phoneControlNotice,
.phoneControlLock {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ui-blue);
  background: var(--ui-blue-soft);
  color: #194e9f;
  border-radius: var(--ui-radius);
  font-weight: 800;
}

.phoneControlNotice.warn,
.phoneControlLock {
  border-color: var(--ui-amber-bright);
  background: var(--ui-amber-soft);
  color: var(--ui-amber);
}

.phoneControlLock {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phoneControlLock span,
.phoneControlLock b,
.phoneControlLock small {
  display: block;
}

.phoneControlStatus {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(0, 1.5fr);
  gap: 18px;
  margin-top: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}

.phoneControlStatus.idle {
  grid-template-columns: minmax(190px, .7fr) minmax(0, 1fr);
}

.phoneControlStatus.active {
  border-top-color: var(--ui-primary);
}

.phoneControlStatus > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.phoneControlStatus > div span:last-child,
.phoneControlStatus > div small,
.phoneControlStatus > div b {
  display: block;
}

.phoneControlStatus > div small {
  color: var(--ui-muted);
  font-size: 12px;
}

.phoneStatusSignal,
.phoneStatusPulse {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--ui-muted);
  background: var(--ui-surface-muted);
}

.phoneStatusSignal.active,
.phoneStatusPulse {
  color: #fff;
  background: var(--ui-primary);
}

.phoneControlStatus dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--ui-border);
  border: 1px solid var(--ui-border);
}

.phoneControlStatus dl div {
  min-width: 0;
  padding: 10px;
  background: var(--ui-surface);
}

.phoneControlStatus dt,
.phoneControlStatus dd {
  margin: 0;
}

.phoneControlStatus dt {
  color: var(--ui-muted);
  font-size: 12px;
}

.phoneControlStatus dd {
  margin-top: 3px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.phoneControlForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.phoneControlForm .phoneTargetInput {
  grid-column: 1 / -1;
  min-width: 0;
}

.phoneControlMode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phoneControlSetup {
  display: grid;
}

.phoneControlStep {
  padding: 18px 0;
  border-bottom: 1px solid var(--ui-border);
}

.phoneControlStepHead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.phoneControlStepHead > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--ui-primary);
  border-radius: 50%;
  color: var(--ui-primary-strong);
  background: var(--ui-surface);
  font-size: 11px;
  font-weight: 900;
}

.phoneControlStepHead > div,
.phoneControlStepHead b,
.phoneControlStepHead small {
  display: block;
}

.phoneControlStepHead b {
  font-size: 14px;
}

.phoneControlStepHead small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 11px;
  font-weight: 650;
}

.phoneControlTiming {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.phoneControlTiming label {
  display: grid;
  gap: 6px;
  color: var(--ui-muted);
  font-size: 13px;
  font-weight: 800;
}

.phoneControlTiming input {
  width: 100%;
  min-height: 42px;
}

.phoneControlSetup[aria-disabled="true"] {
  opacity: .72;
}

.phoneControlStopCondition {
  display: flex;
  align-items: end;
  gap: 14px;
  margin-top: 10px;
}

.phoneControlStopCondition label {
  width: min(260px, 100%);
}

.phoneControlDevices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.phoneControlActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

.phoneControlActions.active {
  position: sticky;
  top: 0;
  z-index: 12;
  margin-top: 0;
  padding: 12px 0;
  background: var(--ui-bg);
  border-bottom: 1px solid var(--ui-border);
}

.phoneControlActionNote {
  min-width: 0;
}

.phoneControlActionNote b,
.phoneControlActionNote span {
  display: block;
}

.phoneControlActionNote b {
  font-size: 12px;
}

.phoneControlActionNote span {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.45;
}

.phoneControlDevices > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: var(--ui-radius);
}

.phoneControlDevices > div > span:first-child {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ui-blue);
  font-weight: 900;
}

.phoneControlDevices b,
.phoneControlDevices small {
  display: block;
  overflow-wrap: anywhere;
}

.phoneControlDevices small {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 11px;
}

.phoneStatusDock {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  min-width: 280px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ui-primary-strong);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-2);
  color: var(--ui-ink);
  text-align: left;
}

.phoneStatusDock .phoneStatusPulse {
  width: 38px;
  height: 38px;
}

.phoneStatusDock small,
.phoneStatusDock b {
  display: block;
}

.phoneStatusDock small {
  color: var(--ui-muted);
  font-size: 11px;
}

.phoneStatusDock em {
  color: var(--ui-primary-strong);
  font-style: normal;
  font-weight: 900;
}

.phoneStatusDock ~ .floatingReport {
  bottom: 96px;
}

.phoneStatusDock ~ .featureGuideButton {
  bottom: 146px !important;
}

@media (max-width: 900px) {
  .phoneUserAccessForm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneUserAccessForm.assignment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneControlStatus {
    grid-template-columns: 1fr;
  }

  .phoneControlDevices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .layout-phone .appSidebar,
  .layout-phone .appTopbar,
  .layout-phone .appBottomNav {
    display: none !important;
  }

  .layout-phone.productShell {
    display: block !important;
  }

  .layout-phone .main,
  .layout-phone .mainContent,
  .layout-phone .screenStage-phone {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .phoneControlWorkspace,
  .phoneControlWorkspace.detached {
    min-height: 100vh;
    padding: 0 14px 28px;
    background: var(--ui-bg);
  }

  .phoneDetachedShell {
    padding: 0;
  }

  .phoneControlHeader {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(241, 243, 245, .96);
  }

  .phoneControlPopout {
    display: none !important;
  }

  .phoneUserAccessForm,
  .phoneControlForm {
    grid-template-columns: 1fr;
  }

  .phoneUserAccessForm.assignment,
  .phoneControlTiming {
    grid-template-columns: minmax(0, 1fr);
  }

  .phoneControlMode {
    grid-column: auto;
    align-items: stretch;
    flex-direction: column;
  }

  .phoneControlStopCondition,
  .phoneUserAccessModes {
    align-items: stretch;
    flex-direction: column;
  }

  .phoneControlStopCondition label {
    width: 100%;
  }

  .phoneControlStatus dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneControlDevices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .phoneControlActions button,
  .phoneUserAccessActions button {
    width: 100%;
  }

  .phoneControlActions {
    position: sticky;
    bottom: 0;
    z-index: 18;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px 0 max(12px, env(safe-area-inset-bottom));
    background: rgba(241, 243, 245, .98);
  }

  .phoneControlActions.active {
    top: auto;
    bottom: 0;
  }

  .phoneStatusDock {
    right: 10px;
    bottom: 78px;
    left: 10px;
    width: auto;
    min-width: 0;
  }

  .phoneStatusDock ~ .floatingReport {
    bottom: 150px;
  }

  .phoneStatusDock ~ .featureGuideButton {
    bottom: 198px !important;
  }
}

@media (max-width: 430px) {
  .phoneUserAccessForm,
  .phoneControlDevices {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .falseReportLookup,
  .falseReportCandidates,
  .falseReportEvidence,
  .fraudInvestigationGrid,
  .falseRegistrationAdminReview {
    grid-template-columns: 1fr;
  }

  .falseReportTargetCard {
    align-items: stretch;
    flex-direction: column;
  }

  .falseReportBoundary,
  .ordinaryChangeRoute {
    grid-template-columns: 1fr;
  }

  .falseReportBoundary button,
  .ordinaryChangeRoute button {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }

  .falseRegistrationComparison {
    overflow-x: auto;
  }

  .falseRegistrationComparison .compareHead,
  .falseRegistrationComparison .compareRow {
    min-width: 620px;
  }

  .falseRegistrationAdminReview > div:first-child,
  .falseRegistrationDecisionReason {
    grid-column: auto;
  }
}

/* Connected search records and service hub share the current product surface. */
.resultGroupTitle {
  display: grid;
  gap: 4px;
}

.resultGroupTitle em {
  color: #6b7c74;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.resultGroup-connected .resultGroupHead {
  border-color: #a9cfbe;
  background: rgba(246, 253, 249, .96);
}

.connectedResultStack,
.detailConnectionStack {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 4px 8px 18px;
}

.connectedStackToggle,
.detailConnectionToggle {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 142px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #a9cfbe !important;
  border-radius: var(--ui-radius) !important;
  background: #f9fdfb !important;
  color: var(--ui-ink) !important;
  text-align: left;
  box-shadow: 0 3px 0 #bedbce, 0 18px 38px rgba(26, 75, 52, .12) !important;
}

.connectedStackToggle:active,
.detailConnectionToggle:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #bedbce, 0 8px 18px rgba(26, 75, 52, .1) !important;
}

.connectedStackLayers {
  position: relative;
  width: 58px;
  height: 72px;
  border: 1px solid #7db79d;
  border-radius: 10px;
  background: #fff;
  box-shadow: 5px 6px 0 #d9eee3, 10px 12px 0 #bfe0cf;
}

.connectedStackLayers::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 16px;
  height: 4px;
  border-radius: 999px;
  background: #69ae8c;
  box-shadow: 0 13px 0 #b4d9c6, 0 26px 0 #d9eee3;
}

.connectedStackCopy,
.detailConnectionToggle > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.connectedStackCopy b,
.detailConnectionToggle b {
  color: #08724d;
  font-size: 13px;
}

.connectedStackCopy strong,
.detailConnectionToggle strong {
  overflow: hidden;
  color: #14211b;
  font-size: 25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connectedStackCopy small,
.detailConnectionToggle small {
  overflow: hidden;
  color: #65776e;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connectedStackAction,
.detailConnectionToggle em {
  border-radius: 999px;
  background: #17211d;
  color: #fff;
  padding: 10px 13px;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.connectedStackItems,
.detailConnectionRows {
  display: grid;
  gap: 12px;
  padding: 6px 0 0 34px;
}

.connectedStackItem {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.connectedStackOrder {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding-top: 16px;
}

.connectedStackOrder b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #17835b;
  color: #fff;
}

.connectedStackOrder span {
  color: #61736a;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.connectedStackItem .resultCard {
  min-width: 0;
}

.detailConnectionStack {
  margin: 0;
}

.detailConnectionToggle {
  min-height: 118px;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  padding: 16px;
}

.detailConnectionRows {
  padding-left: 0;
}

.detailConnectionRows > button {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(110px, .65fr) minmax(120px, .8fr) minmax(160px, 1.4fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  background: #fff !important;
  color: var(--ui-ink) !important;
  padding: 12px;
  text-align: left;
}

.detailConnectionRows > button > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e8f6ef;
  color: #08724d;
  font-weight: 900;
}

.detailConnectionRows > button > b,
.detailConnectionRows > button > strong,
.detailConnectionRows > button > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detailConnectionRows > button > b {
  color: #8b5b10;
  font-size: 12px;
}

.detailConnectionRows > button > small {
  color: var(--ui-muted);
}

.detailConnectionRows > button > em {
  color: #08724d;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.detailConnectionRows > button:disabled {
  opacity: 1;
  background: #f3f8f5 !important;
  cursor: default;
}

.detailOverlay[data-detail-viewport-portal="true"] {
  z-index: 120 !important;
  isolation: isolate;
}

.detailOverlay[data-detail-viewport-portal="true"] .detailSheet,
.detailOverlay[data-detail-viewport-portal="true"] .richDetail {
  max-height: var(--detail-sheet-max-height, calc(100vh - 34px));
}

.servicesHub {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.servicesIntro {
  display: grid;
  gap: 8px;
  padding: 8px 2px 6px;
}

.servicesIntro > span {
  color: var(--ui-primary-strong);
  font-size: 13px;
  font-weight: 900;
}

.servicesIntro h2 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 32px;
  line-height: 1.15;
}

.servicesIntro p {
  display: block;
  margin: 0;
  color: #5f6d66;
  font-size: 15px;
  font-weight: 760;
}

.servicesCatalog {
  display: grid;
  gap: 18px;
}

.serviceHeroBanner {
  position: relative;
  width: 100%;
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(460px, 1.18fr);
  align-items: center;
  gap: 24px;
  padding: 38px 42px !important;
  isolation: isolate;
  overflow: hidden;
  color: var(--ui-ink) !important;
  text-align: left;
}

.serviceHeroBanner::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 6px;
  background: #f1f3f5;
  box-shadow: inset 0 0 0 1px rgba(8, 122, 85, .06);
}

.serviceHeroCopy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-left: 6px;
}

.serviceHeroCopy > small {
  color: var(--ui-primary);
  font-size: 14px;
  font-weight: 900;
}

.serviceHeroCopy > strong {
  margin: 8px 0 6px;
  color: var(--ui-ink);
  font-size: clamp(38px, 4.3vw, 58px);
  line-height: 1.08;
  font-weight: 950;
}

.serviceHeroCopy > span {
  color: #495057;
  font-size: 17px;
  font-weight: 760;
  line-height: 1.45;
}

.serviceBannerAction {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 48px;
  margin-top: 16px;
  padding: 0 18px;
  border: 1px solid var(--ui-primary-strong);
  border-radius: var(--ui-radius);
  background: var(--ui-primary);
  color: #fff;
  font-size: 15px;
  font-style: normal;
  font-weight: 880;
  box-shadow: var(--ui-shadow-primary);
}

.serviceHeroVisual {
  position: relative;
  min-width: 0;
  min-height: 310px;
  perspective: 1100px;
  transform-style: preserve-3d;
  transition: transform .34s var(--ui-ease-spring);
}

.serviceStage {
  position: absolute;
  left: 10%;
  right: 5%;
  bottom: 2px;
  height: 142px;
  border: 1px solid #495057;
  border-radius: 50%;
  background: #343a40;
  box-shadow: inset 0 7px 16px rgba(255, 255, 255, .12), inset 0 -18px 28px rgba(0, 0, 0, .22), 0 24px 34px rgba(33, 37, 41, .22), 0 0 0 2px rgba(22, 184, 121, .18);
  transform: rotateX(64deg);
}

.serviceDevice {
  position: absolute;
  left: 50%;
  top: 0;
  width: 210px;
  height: 280px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 18px;
  border: 1px solid #5c636a;
  border-radius: 28px;
  background: #343a40;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 10px 0 20px rgba(255, 255, 255, .035), 0 24px 44px rgba(33, 37, 41, .25);
  transform: translateX(-48%) rotateY(-8deg) rotateX(2deg);
  transform-origin: 50% 100%;
  animation: service-device-float 5.8s ease-in-out infinite;
}

.serviceDevice::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 12px;
  width: 22%;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  transform: skewX(-9deg);
  animation: service-device-sheen 5.8s ease-in-out infinite;
}

.serviceDeviceHead,
.serviceDeviceFlow,
.serviceDeviceAction {
  position: relative;
  z-index: 1;
}

.serviceDeviceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.serviceDeviceHead b {
  font-size: 14px;
}

.serviceDeviceHead i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #c9f5df;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.serviceDeviceHead i::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-primary-bright);
  box-shadow: 0 0 10px rgba(22, 184, 121, .8);
}

.serviceDeviceFlow {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #dff7ed;
  font-size: 12px;
  font-weight: 850;
}

.serviceDeviceFlow i {
  width: 22px;
  height: 2px;
  background: var(--ui-primary-bright);
  box-shadow: 0 0 10px rgba(22, 184, 121, .72);
}

.serviceDeviceAction {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #43c995;
  border-radius: 10px;
  background: var(--ui-primary);
  box-shadow: 0 4px 0 #065c40, 0 12px 20px rgba(8, 122, 85, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
  font-size: 13px;
  font-weight: 900;
}

.exchangeChip {
  position: absolute;
  z-index: 3;
  width: 122px;
  height: 108px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 14px;
  color: #fff;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 24px rgba(33, 37, 41, .18);
  animation: service-chip-float 5.2s ease-in-out infinite;
}

.exchangeChip b {
  font-size: 18px;
}

.exchangeChip small {
  font-size: 11px;
  font-weight: 760;
}

.chipKrw {
  background: var(--ui-primary);
}

.chipUsdt {
  left: calc(50% - 61px);
  top: 98px;
  background: var(--ui-blue);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 4px rgba(76, 141, 255, .14), 0 14px 24px rgba(33, 37, 41, .18);
  animation-delay: -.8s;
}

.chipFirst {
  left: 3%;
  top: 120px;
  transform: rotateY(9deg) rotateZ(-3deg);
  animation-delay: -1.6s;
}

.chipLast {
  right: 0;
  top: 120px;
  transform: rotateY(-9deg) rotateZ(3deg);
}

.serviceSuccess {
  position: absolute;
  right: 14%;
  bottom: 34px;
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid #a7e9ca;
  border-radius: 50%;
  background: #dff7ed;
  color: var(--ui-primary);
  box-shadow: 0 0 0 7px rgba(22, 184, 121, .12), 0 12px 24px rgba(8, 122, 85, .22);
  animation: service-success-pulse 3.2s ease-in-out infinite;
}

.serviceHeroBanner:hover .serviceHeroVisual {
  transform: translateY(-4px) scale(1.01);
}

.serviceHeroBanner:active .serviceHeroVisual {
  transform: translateY(2px) scale(.992);
}

.serviceHeroBanner:active .serviceDeviceAction,
.serviceHeroBanner:active .serviceBannerAction {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #065c40, 0 5px 12px rgba(8, 122, 85, .2);
}

.plannedServiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.plannedServiceBanner {
  min-width: 0;
  min-height: 214px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
  align-items: center;
  gap: 20px;
  border: 1px solid #cfded7 !important;
  border-radius: var(--ui-radius) !important;
  background: #f8f9fa !important;
  color: var(--ui-ink) !important;
  padding: 26px !important;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  box-shadow: var(--ui-shadow-1) !important;
  transition: transform .24s var(--ui-ease-spring), box-shadow .24s var(--ui-ease-out), border-color .2s ease;
}

.plannedServiceBanner.document {
  background: #f5f8ff !important;
  border-color: #c5d8fb !important;
}

.plannedServiceBanner.call {
  background: #fffbf3 !important;
  border-color: #efd9ac !important;
}

.plannedServiceBanner:hover,
.plannedServiceBanner.selected {
  transform: translateY(-3px);
  border-color: #77b99c !important;
  box-shadow: var(--ui-shadow-lift) !important;
}

.plannedServiceBanner:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #d9e4df, 0 7px 16px rgba(24, 45, 36, .1) !important;
}

.plannedServiceCopy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.plannedServiceCopy small,
.plannedServiceDetail small {
  color: #6a7b72;
  font-size: 12px;
  font-weight: 850;
}

.plannedServiceCopy strong {
  color: #16221c;
  font-size: 24px;
  line-height: 1.28;
}

.plannedServiceCopy > span {
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.55;
}

.plannedServiceCopy em {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #08724d;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.plannedServiceVisual {
  position: relative;
  width: 100%;
  height: 150px;
  display: grid;
  place-items: center;
  justify-self: end;
}

.documentStack {
  position: relative;
  width: 116px;
  height: 104px;
  transform: rotateY(-10deg) rotateX(3deg);
  transform-style: preserve-3d;
  animation: planned-object-float 5.6s ease-in-out infinite;
}

.documentStack > i {
  position: absolute;
  inset: 10px 4px 0 12px;
  border: 1px solid #b8d1ff;
  border-radius: 10px;
  background: #dceaff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 22px rgba(47, 111, 214, .15);
}

.documentStack > i:nth-child(2) {
  transform: translate(-12px, -10px);
  background: #f8f9fa;
}

.documentStack > i:nth-child(3) {
  transform: translate(-24px, -20px);
  background: #edf4ff;
}

.documentStack > b {
  position: absolute;
  right: -8px;
  bottom: -8px;
  z-index: 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #a7e9ca;
  border-radius: 50%;
  background: var(--ui-primary-soft);
  color: var(--ui-primary);
  box-shadow: 0 10px 22px rgba(8, 122, 85, .18);
}

.callSignal {
  width: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.callSignal > b {
  width: 78px;
  height: 108px;
  display: grid;
  place-items: center;
  border: 1px solid #5c636a;
  border-radius: 34px;
  background: #343a40;
  color: #f8f9fa;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 18px 30px rgba(33, 37, 41, .18), 0 14px 24px rgba(8, 122, 85, .12);
  transform: rotate(-18deg);
  animation: planned-object-float 5.2s ease-in-out infinite;
}

.callSignal > i {
  width: 6px;
  border-radius: 999px;
  background: var(--ui-blue-bright);
  box-shadow: 0 6px 14px rgba(76, 141, 255, .18);
  animation: service-wave 1.5s ease-in-out infinite;
}

.callSignal > i:nth-of-type(1),
.callSignal > i:nth-of-type(5) { height: 18px; }
.callSignal > i:nth-of-type(2),
.callSignal > i:nth-of-type(4) { height: 34px; animation-delay: -.22s; }
.callSignal > i:nth-of-type(3) { height: 52px; background: var(--ui-amber-bright); animation-delay: -.4s; }

.plannedServiceDetail {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  padding: 20px 2px;
}

.plannedServiceDetail > div {
  display: grid;
  gap: 6px;
}

.plannedServiceDetail h3,
.plannedServiceDetail p {
  margin: 0;
}

.plannedServiceDetail p {
  color: #596a61;
  line-height: 1.55;
}

.plannedServiceDetail b {
  color: #08724d;
  font-size: 13px;
}

.plannedServiceDetail > button {
  min-height: 38px;
  border-radius: 999px !important;
  background: #eef5f1 !important;
  color: #30443a !important;
  padding: 0 13px !important;
}

@keyframes service-device-float {
  0%, 100% { transform: translateX(-48%) translateY(0) rotateY(-8deg) rotateX(2deg); }
  50% { transform: translateX(-48%) translateY(-7px) rotateY(-5deg) rotateX(1deg); }
}

@keyframes service-device-sheen {
  0%, 22%, 100% { opacity: .12; transform: translateX(-8px) skewX(-9deg); }
  50% { opacity: .4; transform: translateX(132px) skewX(-9deg); }
}

@keyframes service-chip-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -6px; }
}

@keyframes service-success-pulse {
  0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 7px rgba(22, 184, 121, .1), 0 12px 24px rgba(8, 122, 85, .2); }
  82% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(22, 184, 121, .04), 0 16px 28px rgba(8, 122, 85, .24); }
}

@keyframes planned-object-float {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -7px; }
}

@keyframes service-wave {
  0%, 100% { transform: scaleY(.7); opacity: .65; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

@media (max-width: 920px) {
  .servicesHub .serviceHeroBanner {
    min-height: 430px;
    aspect-ratio: auto;
    grid-template-columns: minmax(280px, .86fr) minmax(390px, 1.14fr);
    padding: 30px !important;
  }

  .serviceHeroCopy > strong {
    font-size: 42px;
  }

  .serviceHeroVisual {
    min-height: 300px;
    transform: scale(.92);
    transform-origin: 100% 50%;
  }

  .plannedServiceGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .appBottomNav button {
    font-size: 9px;
  }

  .servicesIntro h2 {
    font-size: 27px;
  }

  .servicesHub .serviceHeroBanner {
    min-height: 650px;
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 4px;
    padding: 24px 20px !important;
  }

  .serviceHeroBanner::before {
    inset: 8px;
  }

  .serviceHeroCopy {
    position: relative;
    z-index: 5;
    padding: 4px 2px 0;
  }

  .servicesIntro h2,
  .servicesIntro p,
  .serviceHeroCopy > strong,
  .serviceHeroCopy > span,
  .plannedServiceCopy strong,
  .plannedServiceCopy > span {
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .serviceHeroCopy > strong {
    font-size: 38px;
  }

  .serviceHeroCopy > span {
    font-size: 14px;
  }

  .serviceBannerAction {
    min-height: 44px;
    margin-top: 10px;
  }

  .serviceHeroVisual {
    min-height: 300px;
    transform: none;
  }

  .serviceDevice {
    top: 10px;
    width: 178px;
    height: 238px;
    padding: 15px;
  }

  .serviceDeviceFlow {
    font-size: 10px;
  }

  .exchangeChip {
    width: 92px;
    height: 82px;
  }

  .exchangeChip b {
    font-size: 15px;
  }

  .chipFirst,
  .chipLast {
    top: 126px;
  }

  .chipUsdt {
    left: calc(50% - 46px);
    top: 106px;
  }

  .serviceSuccess {
    right: 8%;
    bottom: 24px;
  }

  .plannedServiceBanner {
    min-height: 186px;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
    padding: 18px !important;
  }

  .plannedServiceCopy strong {
    font-size: 19px;
  }

  .plannedServiceCopy > span {
    font-size: 12px;
  }

  .plannedServiceVisual {
    height: 122px;
    transform: scale(.82);
  }

  .callSignal {
    width: 112px;
    gap: 3px;
  }

  .callSignal > b {
    width: 64px;
    height: 96px;
  }

  .callSignal > i {
    width: 5px;
  }

  .connectedResultStack {
    margin-inline: 0;
  }

  .connectedStackToggle,
  .detailConnectionToggle {
    min-height: 124px;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    padding: 15px;
  }

  .connectedStackLayers {
    width: 44px;
    height: 58px;
    box-shadow: 4px 5px 0 #d9eee3, 8px 10px 0 #bfe0cf;
  }

  .connectedStackCopy strong,
  .detailConnectionToggle strong {
    font-size: 21px;
  }

  .connectedStackAction,
  .detailConnectionToggle em {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }

  .connectedStackItems {
    padding-left: 0;
  }

  .connectedStackItem {
    grid-template-columns: 1fr;
  }

  .connectedStackOrder {
    grid-template-columns: 32px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    padding: 0 4px;
  }

  .connectedStackOrder span {
    font-size: 11px;
  }

  .detailConnectionRows > button {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .detailConnectionRows > button > b,
  .detailConnectionRows > button > small {
    grid-column: 2 / -1;
  }

  .detailConnectionRows > button > em {
    grid-column: 3;
    grid-row: 1;
  }

  .plannedServiceDetail {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .plannedServiceDetail > button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .serviceDevice,
  .serviceDevice::after,
  .exchangeChip,
  .serviceSuccess,
  .documentStack,
  .callSignal > b,
  .callSignal > i {
    animation: none !important;
  }
}