/* piLe support design system: one type scale, one spacing rhythm. */
:root {
  --hb-primary:#147d78; --hb-primary-hover:#0f625e;
  --hb-sidebar:#e1ede9; --hb-sidebar-muted:#49635f;
  --hb-canvas:#f5f7fb; --hb-surface:#fff; --hb-border:#e4e9f1;
  --hb-text:#1e293b; --hb-muted:#67758a;
  --hb-shadow:0 2px 8px rgba(24,39,75,.025); --hb-radius:14px;
  --bg:var(--hb-canvas); --bg-wash:none; --panel:#fff; --panel-2:#f8fafc; --panel-3:#f0f4fa;
  --line:var(--hb-border); --line-strong:#d2dbe8; --text:var(--hb-text);
  --text-2:#526178; --text-3:#67758a; --text-4:#97a4b7;
  --ink:var(--text); --muted:var(--text-3); --border:var(--line); --surface:var(--panel);
  --side-bg:var(--hb-sidebar); --side-bg-2:#d5e5df; --side-line:#c7dbd3;
  --side-text:#334f4c; --side-text-strong:#163f3b; --side-muted:var(--hb-sidebar-muted);
  --side-on-bg:#c5e1d7; --side-on-text:#0c625a;
  --accent:var(--hb-primary); --accent-2:var(--hb-primary-hover); --accent-text:var(--hb-primary);
  --accent-weak:#eaf5f2; --accent-soft:#eaf5f2;
  --ok:#148260; --ok-weak:#eaf7f1; --warn:#a2660b; --warn-weak:#fff6e6;
  --danger:#ce3f53; --danger-weak:#fff0f2; --info:#3563e9; --info-weak:#eef3ff;
  --side-w:240px; --top-h:80px; --r:8px; --r-lg:14px; --r-xl:18px;
  --shadow-1:0 1px 3px rgba(24,39,75,.035); --shadow-2:var(--hb-shadow);
  --shadow-3:0 24px 80px rgba(15,23,42,.18);
  --f-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --f-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --ui-space-1:4px; --ui-space-2:8px; --ui-space-3:12px; --ui-space-4:16px;
  --ui-space-5:20px; --ui-space-6:24px; --ui-space-7:28px; --ui-space-8:32px;
  --ui-font-caption:12px; --ui-font-body:14px; --ui-font-section:16px; --ui-font-title:24px;
}
html { font-size:14px; scroll-padding-top:100px; }
body { background:var(--bg); color:var(--text); font:400 14px/1.6 var(--f-sans); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font-family:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
a { color:var(--accent-text); text-underline-offset:3px; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #8bc6bd; outline-offset:3px; }
::selection { background:#d5eee7; color:#164c44; }
.small { font-size:12px; line-height:1.65; }
.muted { color:var(--text-3); }
.mono { font-variant-numeric:tabular-nums; letter-spacing:-.015em; }
h1,h2,h3,h4 { color:var(--text); text-wrap:balance; }
h1 { font-size:24px; line-height:1.35; font-weight:650; }
h2 { font-size:20px; line-height:1.4; font-weight:650; }
h3 { font-size:16px; line-height:1.5; font-weight:600; }
p { line-height:1.75; }
.app { padding:0; gap:0; isolation:isolate; grid-template-columns:var(--side-w) minmax(0,1fr); transition:grid-template-columns .2s ease; }
.app::before { display:none; }
.main { min-width:0; background:var(--bg); }
.content { padding:28px 28px 48px; width:100%; max-width:1840px; margin:0 auto; min-width:0; container:workspace / inline-size; }
.content > * { min-width:0; }
.content > .panel + .panel { margin-top:24px; }
.content > p.small { max-width:110ch; margin:0 0 20px; }
.page-head { margin-bottom:24px; align-items:center; gap:16px; }
.page-head h1 { font-size:24px; font-weight:650; line-height:1.35; }
.page-head p { font-size:13px; line-height:1.7; }
/* Navigation: quiet hierarchy and a stable active state. */
.sidebar { display:flex; width:var(--side-w); min-width:var(--side-w); background:var(--side-bg); border:0; border-right:1px solid var(--side-line); border-radius:0; box-shadow:none; color:var(--side-text); transition:transform .2s ease; font:400 14px/1.5 var(--f-sans); }
.brand { position:relative; display:flex; align-items:center; justify-content:flex-start; min-height:80px; height:80px; padding:0 20px; gap:0; border-bottom:1px solid var(--side-line); }
.cs-brand-link { display:flex; align-items:center; gap:12px; padding:0; height:100%; color:var(--side-text-strong); text-decoration:none; }
.cs-brand-link:hover { color:var(--accent); text-decoration:none; }
.brand .logo,.login-brand .logo { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; color:#fff; background:linear-gradient(145deg,#168b80,#42aaa0); border-radius:12px; box-shadow:0 4px 14px rgba(15,85,190,.18); font-size:22px; font-weight:650; line-height:1; }
.brand .logo::after,.login-brand .logo::after { display:none; }
.brand .txt { font-size:14px; line-height:1.4; font-weight:600; letter-spacing:.04em; white-space:nowrap; }
.brand .cs-nav-close { position:absolute; right:8px; top:24px; }
.sidebar .nav { padding:16px 12px 24px; scrollbar-width:thin; scrollbar-color:#bccfc9 transparent; }
.sidebar .nav .group { margin:0 0 8px; }
.sidebar .nav .group-label { padding:0; margin:0; color:var(--side-text); font-size:15px; font-weight:600; letter-spacing:0; text-transform:none; }
.sidebar .nav .group-label::after { display:none; }
.cs-nav-group-toggle { position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:42px; margin:0; padding:10px 12px; border:0; border-radius:8px; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .15s,color .15s; }
.cs-nav-group-toggle > span { padding:0; font-size:15px; font-weight:600; line-height:22px; }
.cs-nav-group-toggle > i.ic,.sidebar .nav a i.ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; min-width:18px; max-width:18px; margin:0; font-size:16px; color:inherit; }
.cs-nav-arrow { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:11px; transition:transform .2s; }
.cs-nav-group-toggle[aria-expanded="true"] .cs-nav-arrow { transform:translateY(-50%) rotate(90deg); }
.cs-nav-group-toggle:hover,.cs-nav-group-toggle:focus-visible { background:#e5eeeb; color:var(--side-text-strong); transform:none; }
.cs-nav-children { margin:4px 0 8px 20px; padding:0 0 0 12px; border-left:1px solid #ccddd7; }
.cs-nav-children[hidden] { display:none; }
.sidebar .nav .cs-nav-children > a { display:flex; align-items:center; gap:10px; min-height:38px; margin:2px 0; padding:8px 12px; border-radius:8px; color:var(--side-muted); font-size:14px; line-height:22px; font-weight:400; transition:background .15s,color .15s; }
.sidebar .nav .cs-nav-children > a > span:not(.badge) { font-size:14px; line-height:22px; }
.sidebar .nav .cs-nav-children > a:hover { color:var(--side-text-strong); background:#e5eeeb; text-decoration:none; transform:none; }
.sidebar .nav .cs-nav-children > a.on { color:var(--side-on-text); background:var(--side-on-bg); box-shadow:inset 3px 0 var(--accent); font-weight:600; }
.sidebar .nav a.on::before { display:none; }
.sidebar .nav .badge { min-width:22px; margin-left:auto; padding:1px 6px; border-radius:5px; background:#d9e8e3; color:#345c54; font-size:11px; }
.cs-nav-mask { display:none; }
.cs-nav-toggle { display:inline-flex; }
.cs-nav-close { display:none; }
/* Header */
.topbar { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px; min-height:80px; height:auto; padding:16px 28px; background:rgba(255,255,255,.98); border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; backdrop-filter:none; }
.crumb { display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin:0; min-width:0; line-height:1.35; }
.crumb .cs-page-context-caption { font-size:12px; font-weight:400; color:var(--text-3); }
.crumb b { font-size:18px; line-height:1.4; font-weight:650; color:var(--text); }
.topbar-meta { font-size:12px; }
.topbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.cs-topbar-account { display:flex; align-items:center; gap:10px; padding-left:16px; border-left:1px solid var(--line); flex:0 0 auto; }
.cs-topbar-account .avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#eaf5f2; color:var(--accent); font-size:14px; font-weight:650; }
.cs-topbar-account .who { display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.35; }
.cs-topbar-account .who b { font-weight:600; }
.cs-topbar-account .who > span { font-size:11px; color:var(--text-3); }
.cs-topbar-account .logout-form { margin:0; }
i.ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; flex:0 0 18px; font-size:16px; line-height:1; font-style:normal; }
.ibtn { width:34px; height:34px; border-radius:8px; color:var(--text-2); }
.ibtn:hover { background:var(--panel-3); }
/* Cards and surfaces */
.panel { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-1); overflow:visible; }
.panel-head { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:64px; padding:16px 24px; border-bottom:1px solid var(--line); border-radius:14px 14px 0 0; }
.panel-head h2,.panel-head h3 { margin:0; font-size:16px; line-height:1.5; font-weight:600; }
.panel-head .sub { font-size:12px; line-height:1.6; }
.panel-body { padding:24px; min-width:0; }
.panel-body.tight { padding:0; }
.panel-foot,.pager { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px 24px; font-size:12px; line-height:1.6; color:var(--text-3); background:#fff; border-top:1px solid var(--line); border-radius:0 0 14px 14px; }
.content > .panel-foot { margin-top:16px; border:1px solid var(--line); border-radius:12px; }
.panel-body > p:first-child { margin-top:0; }
.panel-body > p:last-child { margin-bottom:0; }
.sec { margin:32px 0 16px; gap:12px; }
.sec h2 { font-size:16px; }
.grid { gap:24px; }
.grid > * { min-width:0; }
/* Controls share a 40px baseline. */
.field { min-width:0; margin-bottom:20px; }
.field > label,.field > .label { margin-bottom:8px; color:var(--text-2); font-size:12px; font-weight:550; line-height:20px; }
.field .hint,.field .err { font-size:12px; line-height:1.65; margin-top:8px; }
.input,.select,.textarea,select.input { max-width:100%; min-width:0; height:40px; min-height:40px; padding:0 12px; border:1px solid var(--line-strong); border-radius:8px; background-color:#fff; color:var(--text); font:400 14px/1.5 var(--f-sans); box-shadow:none; transition:border-color .15s,box-shadow .15s; }
.input::placeholder,.textarea::placeholder { color:#8996a9; opacity:1; font-size:13px; }
.input:hover,.select:hover,.textarea:hover { border-color:#b4c2d7; }
.input:focus,.select:focus,.textarea:focus { border-color:#7798f6; box-shadow:0 0 0 3px rgba(53,99,233,.10); }
.input:disabled,.select:disabled,.textarea:disabled { color:var(--text-3); background-color:#f4f6f9; border-color:var(--line); }
textarea.input,.textarea { height:auto; min-height:112px; padding:12px 14px; line-height:1.75; resize:vertical; }
select.select { padding-right:34px; }
.input-group .addon { font-size:12px; padding:0 12px; }
.form-grid { gap:0 24px; }
.form-grid .field { margin-bottom:20px; }
.btn { height:40px; min-height:40px; max-width:100%; padding:0 16px; gap:8px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--text-2); font:550 13px/1.4 var(--f-sans); white-space:nowrap; box-shadow:none; transition:background .15s,border-color .15s,color .15s; }
.btn:hover { background:#f7f9fc; border-color:#b7c6dc; text-decoration:none; filter:none; }
.btn.primary { color:#fff; background:var(--accent); border-color:var(--accent); box-shadow:0 1px 2px rgba(34,75,186,.12); }
.btn.primary:hover { background:var(--accent-2); border-color:var(--accent-2); filter:none; }
.btn.ghost { background:transparent; border-color:transparent; color:var(--text-2); box-shadow:none; }
.btn.ghost:hover { background:var(--panel-3); color:var(--text); }
.btn.danger { color:#fff; background:var(--danger); border-color:var(--danger); }
.btn.sm { height:32px; min-height:32px; padding:0 12px; font-size:12px; }
.btn.lg { height:44px; min-height:44px; padding:0 20px; font-size:14px; }
.btn:disabled { opacity:.46; cursor:not-allowed; box-shadow:none; }
.btn-group { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px; }
.check { gap:8px; line-height:1.6; font-size:13px; }
.check input,input[type=checkbox],input[type=radio] { accent-color:var(--accent); }
.check input { width:16px; height:16px; }
input[type=file].input { height:auto; min-height:40px; padding:5px 8px; font-size:12px; }
input[type=file].input::file-selector-button { height:28px; border-radius:6px; font:500 12px var(--f-sans); margin-right:12px; }
.filterbar { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; padding:24px; background:#fff; }
.filterbar .field { flex:1 1 168px; min-width:0; width:auto!important; margin:0; }
.filterbar .field:first-of-type { flex-grow:2; }
.filterbar .field > label { white-space:normal; }
.filterbar > .spacer { display:none; }
.filterbar > .btn-group { flex:0 0 auto; margin-left:auto; align-self:flex-end; }
.filterbar .input,.filterbar .select { width:100%; }
/* Tables: readable rows, restrained chrome, contained horizontal scrolling. */
.table-wrap { min-width:0; max-width:100%; overflow:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#ccd6e4 transparent; }
.panel > .table-wrap:last-child { border-radius:0 0 14px 14px; }
table.tbl { width:100%; margin:0; border-collapse:separate; border-spacing:0; font:400 14px/1.6 var(--f-sans); }
table.tbl th { padding:13px 16px; border-bottom:1px solid var(--line); background:#f8fafc; color:var(--text-3); font-size:12px; line-height:20px; font-weight:550; letter-spacing:.015em; white-space:nowrap; }
table.tbl td { padding:16px; border-bottom:1px solid #edf0f5; color:var(--text); vertical-align:middle; font-size:14px; line-height:1.6; }
table.tbl th:first-child,table.tbl td:first-child { padding-left:24px; }
table.tbl th:last-child,table.tbl td:last-child { padding-right:24px; }
table.tbl tbody tr:hover { background:#f7f9ff; }
table.tbl tbody tr:last-child td { border-bottom:0; }
table.tbl .small { font-size:12px; }
table.tbl .mono,table.tbl .num { font-size:13px; letter-spacing:-.02em; }
table.tbl td b,table.tbl td strong { font-weight:600; }
table.tbl td .small + .small { margin-top:3px; }
table.tbl td .btn + .btn,table.tbl td form + form { margin-left:4px; }
table.tbl td .btn.ghost { min-height:30px; height:30px; padding:0 8px; font-size:12px; }
table.tbl td[colspan]:only-child { padding:48px 24px; text-align:center; color:var(--text-3); font-size:14px; }
table.tbl.dense td { padding-top:12px; padding-bottom:12px; }
/* Navigation inside workspaces */
.tabs,.cs-exception-tabs,.cs-customer-tabs { display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding:0 20px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.tabs > a,.tabs > button,.cs-exception-tab,.cs-customer-tabs a { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:8px; min-height:48px; padding:12px 12px; border-bottom:2px solid transparent; color:var(--text-3); font:500 13px/1.6 var(--f-sans); text-decoration:none; white-space:nowrap; }
.tabs > .on,.cs-exception-tab.is-active,.cs-customer-tabs a.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; background:transparent; }
.tabs > a:hover,.cs-exception-tab:hover,.cs-customer-tabs a:hover { color:var(--accent); background:#f8faff; }
.tag { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 8px; border-radius:6px; font:500 12px/1.6 var(--f-sans); box-shadow:none; vertical-align:middle; }
.tag.sq { border-radius:6px; }
.tag::before { width:5px; height:5px; flex-shrink:0; }
.tag .ic { width:14px; flex-basis:14px; font-size:12px; }
.alert { gap:12px; padding:14px 16px; border-radius:10px; font-size:13px; line-height:1.7; box-shadow:none; }
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:64px 24px; text-align:center; color:var(--text-3); }
.empty .big { margin:0; font-size:16px; font-weight:550; color:var(--text-2); }
.empty .sm { font-size:13px; line-height:1.7; }
.empty .art { margin-bottom:8px; color:#9bafcf; }
/* Dialogs retain native popover and focus behavior. */
.modal,.drawer { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-3); }
.modal { width:min(640px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); padding:0; overflow:hidden; }
.modal.wide { width:min(960px,calc(100vw - 48px)); }
.modal.cs-pop { width:min(1280px,calc(100vw - 48px)); }
.modal > form { display:flex; flex-direction:column; min-height:0; max-height:inherit; }
.modal .hd,.drawer .hd { display:flex; align-items:center; gap:12px; padding:18px 24px; min-height:64px; background:#fff; border-bottom:1px solid var(--line); font-size:16px; line-height:1.5; font-weight:600; }
.modal .bd,.drawer .bd { padding:24px; min-height:0; background:#fff; overflow:auto; }
.modal .ft,.drawer .ft { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; padding:16px 24px; border-top:1px solid var(--line); background:#f9fbfd; }
.modal::backdrop,.modal[popover]::backdrop,.mask { background:rgba(15,23,42,.40); backdrop-filter:blur(2px); }
.modal.cs-pop .bd { background:var(--bg); }
.drawer { width:min(480px,100vw); }
.dl,.kv { line-height:1.65; }
.dl dt,.kv dt { color:var(--text-3); font-size:12px; font-weight:400; }
.dl dd,.kv dd { min-width:0; overflow-wrap:anywhere; color:var(--text); font-size:14px; }
pre { font:12px/1.8 var(--f-mono); border:1px solid var(--line); border-radius:10px; padding:16px; background:#f8fafc; max-width:100%; overflow:auto; }
/* Customer and conversation workspaces */
.cs-customer-header { padding:24px; margin-bottom:24px; }
.cs-customer-header-main { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:16px; }
.cs-customer-header-main h2,.cs-customer-contact h2,.cs-customer-identity h2 { font-size:24px; line-height:1.4; font-weight:650; }
.cs-customer-header-main > .btn { grid-column:3; grid-row:1; margin-left:auto; }
.cs-customer-avatar { width:48px; height:48px; border-radius:14px; background:var(--accent-weak); color:var(--accent); font-size:22px; }
.cs-customer-summary { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:12px; width:100%; max-width:none; margin:8px 0 0; }
.cs-customer-summary > div { min-width:0; padding:14px 16px; background:#f8fafc; border:1px solid #edf0f5; border-radius:10px; }
.cs-customer-summary > div > span { font-size:12px; line-height:1.6; }
.cs-customer-summary > div > b { margin-top:6px; font-size:20px; font-weight:600; line-height:1.35; font-variant-numeric:tabular-nums; }
.cs-customer-summary > div.is-risk { background:var(--danger-weak); border-color:#ffd7de; }
.cs-customer-summary > div.is-risk > span,.cs-customer-summary > div.is-risk > b { color:var(--danger); }
.cs-customer-meta { gap:12px 24px; margin-top:20px; padding-top:16px; font-size:12px; }
.cs-customer-workspace { grid-template-columns:minmax(0,1fr) 300px; gap:24px; }
.cs-customer-main,.cs-customer-contact { min-width:0; overflow-wrap:anywhere; }
.cs-customer-mail-card,.cs-customer-order-chip,.cs-msg,.ocard,.cs-fold { border-color:var(--line); border-radius:10px; box-shadow:none; }
.cs-customer-mail-card > summary { padding:16px 20px; gap:12px; }
.cs-customer-mail-card + .cs-customer-mail-card { margin-top:12px; }
.cs-customer-order-chip { background:#fff; padding:14px 16px; }
.cs-customer-order-chip:hover { border-color:#a8bdf5; background:#f8faff; }
.cs-customer-money-entry { border-color:var(--line); padding-top:16px; padding-bottom:16px; }
.cs-customer-list table.tbl td:first-child a { font-weight:600; }
.cs-three { grid-template-columns:240px minmax(0,1fr) 288px; gap:20px; }
.cs-three > .cs-list { top:100px; max-height:calc(100dvh - 128px); }
.cs-msg { padding:16px 20px; margin-bottom:16px; }
.cs-msg .hd { flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; font-size:12px; }
.cs-msg .hd .who { font-size:14px; font-weight:600; }
.cs-msg.in { background:#fff; }
.cs-msg.out { background:#f4f7ff; }
.cs-msg.note { background:#fff9e9; border-color:#f3ddb0; }
.cs-msg.sys { padding:6px 12px; font-size:12px; }
.cs-body-wrap { height:440px; min-height:160px; max-height:80vh; border-radius:8px; }
.cs-thread-brief { padding:12px 0; }
.ocard-main { padding:16px; line-height:1.65; }
.ocard-ft { padding:12px 16px; }
.cs-order { grid-template-columns:minmax(0,1fr) 304px; gap:24px; }
.cs-line { gap:16px; padding:16px 0; }
.cs-line img,.cs-line-noimg { width:56px; height:56px; border-radius:8px; }
.cs-refund-summary { grid-template-columns:minmax(0,104px) minmax(0,1fr) minmax(0,104px) minmax(0,1fr); gap:12px 16px; }
.cs-refund-summary > dt,.cs-refund-summary > dd { min-width:0; max-width:100%; overflow-wrap:anywhere; white-space:normal; word-break:break-word; }
.lookup-bar { max-width:860px; padding:24px; gap:12px; }
.lookup-bar .input,.lookup-bar .btn { height:40px; }
.kind-switch { gap:8px; padding:16px 24px; }
/* Settings, permissions and analysis */
.cs-ui .ai-settings { gap:24px; }
.cs-ui .ai-settings .settings-heading h1 { font-size:24px; }
.cs-ui .ai-settings .panel-head { padding:16px 24px; }
.cs-ui .ai-settings .panel-body { padding:24px; }
.cs-ui .ai-settings .settings-top { gap:24px; }
.cs-ui .ai-settings .settings-form { gap:20px; }
.cs-ui .ai-settings .policy-grid { gap:16px; margin-top:24px; }
.cs-ui .ai-settings .policy-card { padding:20px; border-color:var(--line); border-radius:10px; }
.cs-ui .ai-settings .policy-card h3 { font-size:14px; line-height:1.6; margin-bottom:16px; }
.cs-ui .ai-settings .settings-enable { padding:16px; background:#f5f8ff; border:1px solid #e4ebff; border-radius:10px; }
.cs-ui .ai-settings .field label { margin-bottom:8px; font-size:12px; }
.cs-ui .ai-settings textarea.input { font-size:14px; line-height:1.8; }
.cs-ui .cs-prompt-model { display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px; padding:20px!important; background:#f8fafc!important; border-color:var(--line)!important; border-radius:10px; }
.cs-prompt-model .field { flex:1; margin:0; }
.cs-prompt-intro { margin-bottom:24px; max-width:100ch; }
.cs-ui .cs-prompt { margin-top:24px; }
.cs-permission-grid { gap:12px 20px; }
.cs-ui .permission-auth-body { padding:24px; }
.cs-ui .permission-tree label { font-size:13px; line-height:1.6; }
.cs-ui .permission-module { border-color:var(--line); border-radius:10px; }
.cs-dispute-filters { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.cs-dispute-filters > .field { min-width:0; width:auto; }
.cs-dispute-filters > .field:first-of-type { grid-column:span 2; }
.cs-dispute-filter-actions { display:flex; justify-content:flex-end; gap:8px; grid-column:span 2; }
.cs-dispute-filters .input { width:100%; min-width:0; }
.cs-ui .cs-dispute-countdown { font-size:12px; }
.cs-ui .wf-node,.cs-ui .wf-properties,.cs-ui .wf-library { background:#fff; border-color:var(--line); border-radius:12px; }
.cs-ui .wf-node.selected,.cs-ui .wf-node.is-selected { border-color:var(--accent); }
.cs-ui .wf-connect-port,.cs-ui .wf-node-input { color:var(--accent); border-color:var(--accent); }
.cs-ui .wf-board,.cs-workflow-canvas { background-color:var(--bg); }
.cs-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.cs-metric { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.cs-metric-label { color:var(--text-3); font-size:12px; font-weight:500; }
.cs-metric-value { color:var(--text); font-size:28px; font-weight:650; line-height:1.2; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.cs-metric-caption { color:var(--text-3); font-size:12px; }
.cs-stat-definitions > summary { padding:8px 0 16px; font-size:13px; color:var(--text-2); cursor:pointer; }
/* Authentication */
.login-wrap { min-height:100dvh; padding:32px; background:radial-gradient(ellipse at 50% 0%,#eaf0ff 0,transparent 65%),#f5f7fb; }
.login-card { max-width:440px; padding:40px; border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 40px rgba(26,45,89,.055); }
.login-brand { gap:12px; margin-bottom:32px; }
.login-brand .logo { width:42px; height:42px; flex-basis:42px; font-size:24px; }
.login-brand .txt { color:var(--text); font-size:17px; font-weight:650; letter-spacing:.02em; }
.login-card h1 { margin:0 0 12px; font-size:28px; font-weight:650; }
.login-sub { margin:0 0 28px; color:var(--text-3); font-size:13px; line-height:1.8; }
.login-card .field { margin-bottom:20px; }
.login-card .input { height:44px; min-height:44px; }
.login-card .login-submit { height:44px; min-height:44px; margin-top:4px; }
/* Responsive layouts use workspace width, not just device width. */
@container workspace (max-width:1100px) {
  .cs-three { grid-template-columns:minmax(0,1fr); }
  .cs-three > .cs-list { position:static; max-height:320px; }
  .cs-ui .ai-settings .policy-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@container workspace (max-width:900px) {
  .cs-customer-workspace,.cs-order,.cs-ui .ai-settings .settings-top,.grid.main-rail { grid-template-columns:minmax(0,1fr); }
  .cs-dispute-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cs-dispute-filter-actions { grid-column:1/-1; }
  .grid.c4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:993px) {
  body.cs-sidebar-collapsed .app { grid-template-columns:0 minmax(0,1fr); }
  body.cs-sidebar-collapsed .sidebar { transform:translateX(-240px); }
}
@media(max-width:992px) {
  .app { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed; top:0; left:0; z-index:1001; width:240px; height:100dvh; transform:translateX(-250px); }
  .sidebar.cs-nav-open { transform:translateX(0); }
  .cs-nav-close { display:inline-flex; }
  .brand { padding-right:40px; }
  .brand .txt { font-size:13px; }
  .cs-nav-mask:not([hidden]) { display:block; position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.4); border:0; }
  .content { padding:24px 20px 40px; }
  .topbar { padding:14px 20px; }
}
@media(max-width:640px) {
  .content { padding:16px 12px 32px; }
  .topbar { min-height:72px; padding:12px 16px; gap:12px; }
  .crumb b { font-size:17px; }
  .crumb .cs-page-context-caption { font-size:11px; }
  .cs-topbar-account { border:0; padding-left:0; }
  .cs-topbar-account .who,.cs-topbar-account > a,.topbar-meta { display:none; }
  .panel-head { padding:16px; gap:8px; }
  .panel-body,.modal .bd,.drawer .bd,.cs-ui .ai-settings .panel-body { padding:16px; }
  .filterbar { display:grid; grid-template-columns:minmax(0,1fr); padding:16px; gap:16px; }
  .filterbar .field { width:100%!important; min-width:0; }
  .filterbar > .btn-group { width:100%; justify-content:flex-end; margin-left:0; }
  .filterbar > .btn-group .btn { flex:1; }
  .grid.c2,.grid.c3,.grid.c4,.grid.auto,.form-grid,.form-grid.c3,.form-grid.c4 { grid-template-columns:minmax(0,1fr); }
  .span2 { grid-column:auto; }
  .panel-foot,.pager { padding:14px 16px; }
  table.tbl th:first-child,table.tbl td:first-child { padding-left:16px; }
  table.tbl th:last-child,table.tbl td:last-child { padding-right:16px; }
  .tabs,.cs-exception-tabs,.cs-customer-tabs { padding:0 8px; }
  .modal,.modal.wide,.modal.cs-pop { width:calc(100vw - 24px); max-height:calc(100dvh - 24px); border-radius:12px; }
  .modal .hd,.drawer .hd,.modal .ft,.drawer .ft { padding:16px; }
  .cs-customer-header { padding:16px; margin-bottom:16px; }
  .cs-customer-header-main { grid-template-columns:40px minmax(0,1fr); gap:12px; }
  .cs-customer-header-main > .btn { grid-column:1/-1; grid-row:auto; justify-self:start; margin:0; }
  .cs-customer-header-main h2,.cs-customer-contact h2 { font-size:20px; }
  .cs-customer-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-customer-summary > div { padding:12px; }
  .cs-customer-workspace,.cs-order { grid-template-columns:minmax(0,1fr); gap:16px; }
  .cs-refund-summary { grid-template-columns:minmax(0,88px) minmax(0,1fr); }
  .cs-ui .ai-settings .policy-grid { grid-template-columns:minmax(0,1fr); }
  .cs-dispute-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cs-dispute-filters > .field:first-of-type,.cs-dispute-filter-actions { grid-column:1/-1; }
  .cs-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .cs-metric { padding:16px; }
  .cs-metric-value { font-size:24px; }
  .lookup-bar { padding:16px; flex-wrap:wrap; }
  .lookup-bar .lookup-box { flex-basis:100%; }
  .kind-switch { padding:12px 16px; }
  .login-wrap { padding:20px; }
  .login-card { padding:28px 24px; }
  .login-card .input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}
.cs-settings-nav { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:24px; padding:6px; width:fit-content; max-width:100%; border:1px solid var(--line); border-radius:10px; background:#fff; }
.cs-settings-nav > .btn { min-height:36px; height:36px; border-color:transparent; background:transparent; }
.cs-settings-nav > .btn:hover { background:var(--accent-weak); color:var(--accent); }
.page-aicenter .panel-body > .small,.page-aicenter .panel-body > p { margin:16px 0; max-width:100ch; }
@media(max-width:640px) { .cs-settings-nav { width:100%; gap:4px; } .cs-settings-nav > .btn { flex:1 1 auto; font-size:12px; padding:0 8px; } }

/* Refinements from the full desktop/mobile page audit. */
.panel > .filterbar:first-child,.panel > .panel-body:first-child { border-radius:14px 14px 0 0; }
.panel > .table-wrap:first-child { border-radius:14px; }
table.tbl td.muted { color:var(--text-3); }
table.tbl td.primary { color:var(--accent); }
table.tbl td.danger { color:var(--danger); }
.table-wrap:focus-visible { outline:2px solid #a8bdfb; outline-offset:-2px; }
.table-wrap > table.tbl:has(thead tr > th:nth-child(5)) { min-width:760px; }
.table-wrap > table.tbl:has(thead tr > th:nth-child(8)) { min-width:1040px; }
.cs-customer-list .filterbar > .field:first-child { flex:2 1 280px; min-width:0; }
.cs-ui .om-page { gap:24px; }
.cs-ui .om-page h1 { font-size:24px; line-height:1.4; }
.cs-ui .om-toolbar { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
.cs-ui .om-toolbar > div { min-width:0; }
.cs-ui .om-actions { flex-wrap:wrap; max-width:100%; gap:8px; }
.cs-ui .om-actions form { margin:0; }
.page-operations .panel > p { margin:16px 24px; }
.page-operations .panel > form { display:flex; flex-wrap:wrap; gap:12px; padding:0 24px 24px; }
.cs-ui select:not([class]) { min-height:40px; max-width:100%; padding:8px 12px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--text); font-size:14px; }
@media(max-width:640px) {
  .filterbar .filter-row { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; width:100%; }
  .filterbar .filter-row .field:not(.fit),.filterbar .filter-row .field { width:100%; min-width:0; max-width:none; }
  .filterbar .filter-row .btn-group { margin-left:0; width:100%; justify-content:flex-end; }
  .table-wrap > table.tbl:has(thead tr > th:nth-child(3)) { min-width:560px; }
  .table-wrap > table.tbl:has(thead tr > th:nth-child(5)) { min-width:760px; }
  .table-wrap > table.tbl:has(thead tr > th:nth-child(8)) { min-width:1040px; }
  .topbar { flex-wrap:wrap; }
  .topbar .crumb { flex:1; min-width:0; }
  .topbar > .spacer { display:none; }
  .topbar .topbar-actions { order:4; flex-basis:100%; justify-content:flex-start; }
  .cs-ui .om-actions { width:100%; }
  .page-operations .panel > p { margin:16px; }
  .page-operations .panel > form { padding:0 16px 16px; }
}

/* Sage navigation theme: readable hierarchy across all routes. */
.cs-ui .sidebar .cs-nav-group-toggle[aria-expanded="true"] { color:var(--side-text-strong); }
.cs-ui .sidebar .cs-nav-close { color:var(--side-text); }
.cs-ui .sidebar .nav .cs-nav-children > a { min-height:40px; }
.cs-ui .om-grid,.cs-ui .om-card,.cs-ui .om-section,.cs-ui .om-field { min-width:0; max-width:100%; }
@media (max-width:640px) { .cs-ui .om-toolbar > *, .cs-ui .om-actions > * { min-width:0; max-width:100%; } .cs-ui .om-toolbar input { width:100%; } }
@media (max-width:640px) { .cs-ui .om-toolbar > .om-actions { width:100%; flex:1 1 100%; } }
@media (max-width:640px) {
  .cs-ui .om-toolbar { display:grid; grid-template-columns:minmax(0,1fr); justify-items:stretch; }
  .cs-ui .om-toolbar > .om-actions { width:auto; min-width:0; }
}
@media (max-width:640px) {
  .cs-ui .om-pagination { flex-wrap:wrap; }
  .cs-ui .om-pagination > .om-actions { width:auto; min-width:0; flex:1 1 auto; justify-content:flex-end; }
}

/* Template library: compact category rows, full-width expanded tables. */
.cs-template-library .panel-head { gap:16px; }
.cs-template-library .panel-head .small { margin-top:4px; }
.cs-template-group { margin:0; padding:0; min-width:0; border-bottom:1px solid var(--line); }
.cs-template-group:last-child { border-bottom:0; border-radius:0 0 14px 14px; }
.cs-template-group-head { display:flex; align-items:center; gap:12px; min-height:60px; padding:16px 24px; list-style:none; cursor:pointer; transition:background .15s; }
.cs-template-group-head::-webkit-details-marker { display:none; }
.cs-template-group-head:hover { background:var(--accent-weak); }
.cs-template-chevron { color:var(--text-3); font-size:12px; transition:transform .18s; }
.cs-template-group[open] .cs-template-chevron { transform:rotate(90deg); }
.cs-template-group[open] > summary { background:#f5faf8; }
.cs-template-group-title { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--text); }
.cs-template-count { color:var(--text-2); background:#f0f4f5; border-radius:6px; padding:2px 8px; font-size:12px; white-space:nowrap; }
.cs-template-enabled { width:84px; color:var(--text-3); font-size:12px; white-space:nowrap; }
.cs-template-enabled > span { font-size:8px; margin-right:4px; }
.cs-template-enabled.has-enabled { color:var(--ok); }
.cs-template-table { border-top:1px solid var(--line); background:#fff; }
.cs-template-table .tbl td:first-child { min-width:260px; }
@media(max-width:640px) {
 .cs-template-group-head { gap:8px; padding:14px 16px; flex-wrap:wrap; }
 .cs-template-group-title { flex:1; }
 .cs-template-enabled { width:auto; }
 .cs-template-count { font-size:11px; padding:2px 6px; }
}

/* Mailbox shared sync settings: compact horizontal control bar. */
.cs-mail-sync-setting { display:grid; grid-template-columns:minmax(260px,1fr) auto; align-items:center; gap:16px 32px; padding:24px; margin-bottom:24px; }
.cs-mail-sync-heading { display:flex; align-items:center; gap:12px; min-width:0; }
.cs-mail-sync-icon { display:grid; place-items:center; flex:0 0 40px; height:40px; border-radius:10px; color:var(--accent); background:var(--accent-weak); }
.cs-mail-sync-heading h3 { margin:0 0 4px; font-size:16px; }
.cs-mail-sync-heading p { margin:0; font-size:12px; color:var(--text-3); line-height:1.65; }
.cs-mail-sync-controls { display:flex; align-items:flex-end; gap:12px; }
.cs-mail-sync-controls .field { width:260px; min-width:0; margin:0; }
.cs-mail-sync-controls label { display:block; font-size:12px; margin-bottom:8px; font-weight:550; }
.cs-mail-sync-controls .btn { flex:0 0 auto; }
.cs-mail-sync-help { grid-column:1/-1; padding-top:12px; border-top:1px solid var(--line); }
.cs-mail-sync-help summary { display:flex; align-items:center; gap:6px; width:fit-content; color:var(--text-3); font-size:12px; cursor:pointer; list-style:none; }
.cs-mail-sync-help summary::-webkit-details-marker { display:none; }
.cs-mail-sync-help summary::after { content:'展开'; color:var(--accent); margin-left:4px; }
.cs-mail-sync-help[open] summary::after { content:'收起'; }
.cs-mail-sync-help p { max-width:110ch; margin:10px 0 0; font-size:12px; color:var(--text-3); }
@container workspace (max-width:900px) { .cs-mail-sync-setting { grid-template-columns:minmax(0,1fr); gap:20px; } .cs-mail-sync-controls { justify-content:flex-start; } }
@media(max-width:640px) { .cs-mail-sync-setting { padding:16px; gap:16px; grid-template-columns:minmax(0,1fr); } .cs-mail-sync-controls { flex-wrap:wrap; } .cs-mail-sync-controls .field { width:100%; } .cs-mail-sync-controls .btn { margin-left:auto; } }

/* Mail lists: bounded columns keep subjects from pushing status off-screen. */
.cs-thread-list { margin-top:20px; }
.cs-thread-search .panel-head { min-height:52px; padding:12px 24px; }
.cs-thread-search .cs-thread-filter-grid { display:grid; grid-template-columns:160px 160px minmax(180px,1fr) 140px 130px auto; align-items:end; gap:12px; width:100%; }
.cs-thread-search .cs-thread-filter-grid > .field { min-width:0; max-width:none; width:auto; flex:none; }
.cs-thread-search .cs-thread-filter-grid .btn-group { margin:0; flex-wrap:nowrap; }
.cs-thread-list .cs-thread-table { width:100%; min-width:1020px; table-layout:fixed; }
.cs-thread-table th:nth-child(1) { width:156px; }
.cs-thread-table th:nth-child(2) { width:230px; }
.cs-thread-table th:nth-child(4) { width:132px; }
.cs-thread-table th:nth-child(5) { width:156px; }
.cs-thread-table th:nth-child(6) { width:100px; }
.cs-thread-table td { vertical-align:top; padding-top:16px; padding-bottom:16px; }
.cs-thread-table .cs-thread-customer-name,.cs-thread-table .cs-thread-email { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.cs-thread-table .cs-thread-customer-name { font-size:14px; font-weight:600; line-height:22px; }
.cs-thread-table .cs-thread-customer > .small { margin-top:6px; }
.cs-thread-table .cs-thread-email { font-size:12px; color:var(--text-3); }
.cs-thread-table .cs-thread-subject .cs-thread-review { display:block; width:100%; max-width:100%; min-width:0; padding:0; height:auto; min-height:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; color:var(--text); font-weight:600; }
.cs-thread-table .cs-thread-subject .cell-clip { display:block; max-width:100%; }
.cs-thread-table .tag { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
@container workspace (max-width:1200px) {
 .cs-thread-search .cs-thread-filter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .cs-thread-search .cs-thread-keyword { grid-column:span 2; }
 .cs-thread-search .cs-thread-filter-grid .btn-group { grid-column:span 2; justify-content:flex-end; }
}
@media(max-width:640px) {
 .cs-thread-search .cs-thread-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
 .cs-thread-search .cs-thread-filter-grid .cs-thread-keyword { grid-column:1/-1; }
 .cs-thread-search .cs-thread-filter-grid .btn-group { grid-column:1/-1; width:auto; }
 .cs-thread-search .panel-head { padding:12px 16px; }
}
.cs-ui .cs-thread-list .table-wrap > table.cs-thread-table { min-width:1100px; }
table.cs-thread-table th:nth-child(1) { width:180px; }
table.cs-thread-table th:nth-child(6) { width:120px; }
table.cs-thread-table td { vertical-align:top; }
table.cs-thread-table td:first-child { white-space:nowrap; }
table.cs-thread-table td:last-child .tag { white-space:nowrap; }
.cs-thread-customer-name { overflow-wrap:normal; }
.cs-thread-search { overflow:hidden; }

/* Stage-specific AI retries remain beside each mail's state. */
table.cs-thread-table th:nth-child(6) { width:156px; }
.cs-thread-retry-form { margin:10px 0 0; }
.cs-thread-retry-form .btn { font-size:12px; white-space:nowrap; padding:0 10px; }
.cs-thread-retry-note { margin-top:8px; max-width:128px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }