@charset "UTF-8";
:root {
  color-scheme: light;
  --bg:#f4f6fa; --surface:#fff; --surface-soft:#f8fafc; --sidebar:rgba(249,251,254,.88);
  --text:#202a3d; --title:#172136; --muted:#657187; --faint:#8a94a6; --line:#e5eaf2;
  --blue:#3268e8; --blue-hover:#2458d5; --blue-soft:#edf3ff; --green:#0b8a65; --green-soft:#eaf8f1;
  --amber:#a36a12; --amber-soft:#fff7e7; --red:#c34d57; --red-soft:#fff0f1; --purple:#8065cb; --purple-soft:#f3effd;
  --on-blue:#fff; --shadow:0 8px 30px -24px rgba(28,45,82,.28); --dialog-shadow:0 32px 90px rgba(15,30,58,.22);
  --sidebar-width:226px; --radius:17px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark; --bg:#12171f; --surface:#1c232e; --surface-soft:#202936; --sidebar:rgba(21,28,38,.94);
  --text:#dce4ef; --title:#f0f4fa; --muted:#a2afc2; --faint:#75849b; --line:#2d3746;
  --blue:#82a6ff; --blue-hover:#9ab7ff; --blue-soft:#263752; --green:#65d4ac; --green-soft:#1a3a30;
  --amber:#ebc274; --amber-soft:#3c321f; --red:#f1949d; --red-soft:#412a31; --purple:#bda7f6; --purple-soft:#322c46;
  --on-blue:#12213c; --shadow:0 10px 30px -25px rgba(0,0,0,.65); --dialog-shadow:0 35px 100px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark; --bg:#12171f; --surface:#1c232e; --surface-soft:#202936; --sidebar:rgba(21,28,38,.94);
    --text:#dce4ef; --title:#f0f4fa; --muted:#a2afc2; --faint:#75849b; --line:#2d3746;
    --blue:#82a6ff; --blue-hover:#9ab7ff; --blue-soft:#263752; --green:#65d4ac; --green-soft:#1a3a30;
    --amber:#ebc274; --amber-soft:#3c321f; --red:#f1949d; --red-soft:#412a31; --purple:#bda7f6; --purple-soft:#322c46;
    --on-blue:#12213c; --shadow:0 10px 30px -25px rgba(0,0,0,.65); --dialog-shadow:0 35px 100px rgba(0,0,0,.5);
  }
}
* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { margin:0; font:14px/1.55 var(--font); color:var(--text); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.48; }
button,select,a { touch-action:manipulation; }
a { color:var(--blue); text-decoration:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,strong { color:var(--title); }
svg { flex-shrink:0; vertical-align:middle; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
[hidden] { display:none!important; }
::selection { background:var(--blue-soft); color:var(--blue); }
.skip-link { position:fixed; top:8px; left:8px; z-index:1000; padding:8px 14px; background:var(--surface); border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-size:13px; font-weight:550; line-height:1.35; transition:background .15s,border-color .15s,box-shadow .15s; white-space:nowrap; }
.button:hover:not(:disabled) { background:var(--surface-soft); border-color:var(--faint); }
.button-primary { background:var(--blue); border-color:var(--blue); color:var(--on-blue); box-shadow:0 3px 8px rgba(42,99,224,.13); }
.button-primary:hover:not(:disabled) { background:var(--blue-hover); border-color:var(--blue-hover); }
.button-primary:disabled { opacity:.6; }
:root[data-theme="dark"] .button-primary { color:#12213c; }
.button-ghost { border-color:transparent; background:transparent; color:var(--blue); padding-inline:9px; box-shadow:none; }
.button-ghost:hover:not(:disabled) { border-color:transparent; background:var(--blue-soft); }
.button-danger { color:var(--red); border-color:var(--line); background:var(--red-soft); }
.button-danger:hover:not(:disabled) { background:var(--red-soft); border-color:var(--red); }
.button-icon { width:35px; min-width:35px; padding:8px; background:transparent; border-color:transparent; color:var(--muted); }
.button-icon > span { display:none; }
.button[aria-busy="true"] { opacity:.6; cursor:wait; }
.actions { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.muted { color:var(--muted); }
.text-green { color:var(--green); }
.nowrap { white-space:nowrap; }
.centered { text-align:center; }
.break-all { overflow-wrap:anywhere; }
.mono { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; font-size:.92em; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:.16em; font-weight:650; }
.app-shell { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:30; width:var(--sidebar-width); padding:31px 17px 20px; background:var(--sidebar); border-right:1px solid var(--line); display:flex; flex-direction:column; backdrop-filter:blur(24px); }
.brand-link { display:block; width:fit-content; }
.brand { display:flex; align-items:center; gap:11px; padding-left:12px; }
.brand-mark { width:37px; height:40px; display:grid; place-items:center; border-radius:12px; color:#fff; background:linear-gradient(150deg,#3c70f2,#3560db); box-shadow:0 5px 13px rgba(51,98,224,.17),inset 0 1px rgba(255,255,255,.24); }
.brand strong { display:block; color:var(--title); font-size:25px; line-height:1; font-weight:750; letter-spacing:-.055em; }
.brand div > span { display:block; font-size:10px; line-height:1.4; color:var(--muted); margin-top:5px; letter-spacing:.06em; }
.nav-caption { margin:35px 14px 11px; font-size:11px; color:var(--faint); letter-spacing:.04em; }
.nav-list { display:grid; gap:5px; }
.nav-item { min-height:43px; display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:var(--muted); font-size:13px; font-weight:550; }
.nav-item:hover { color:var(--text); background:var(--surface-soft); }
.nav-item.active { background:var(--blue-soft); color:var(--blue); }
.nav-item:nth-child(7) { margin-top:18px; }
.sidebar-bottom { margin-top:auto; padding-top:30px; }
.workspace-note { display:flex; gap:9px; padding:15px 11px 17px; color:var(--faint); }
.workspace-note strong { display:block; color:var(--muted); font-size:11px; font-weight:550; }
.workspace-note small { display:block; margin-top:2px; font-size:10px; }
.account-button { width:100%; border:0; border-top:1px solid var(--line); padding:17px 11px 0; background:transparent; display:flex; gap:9px; align-items:center; text-align:left; color:var(--muted); }
.avatar { width:32px; height:32px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--blue); display:grid; place-items:center; font-size:13px; font-weight:650; }
.account-button > span:nth-child(2) { flex:1; min-width:0; }
.account-button strong { display:block; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
.account-button small { color:var(--faint); font-size:10px; display:block; margin-top:1px; }
.workspace { margin-left:var(--sidebar-width); min-width:0; }
.test-mode-banner { position:sticky;top:0;z-index:22;display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 18px;background:var(--amber-soft);color:var(--amber);font-size:10px;border-bottom:1px solid var(--line); }
.topbar { min-height:137px; padding:28px 37px 23px; display:flex; justify-content:space-between; align-items:center; gap:22px; }
.topbar-title { display:flex; gap:12px; align-items:center; }
.breadcrumb { font-size:10px; color:var(--faint); margin-bottom:5px; font-weight:550; letter-spacing:.025em; }
.topbar h1 { font-size:26px; font-weight:720; letter-spacing:-.04em; line-height:1.3; }
.topbar p { font-size:12px; color:var(--muted); margin-top:7px; }
.topbar-tools { display:flex; align-items:center; gap:11px; }
.environment-label { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-right:5px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.environment-test { color:var(--amber); }
.environment-test .status-dot { background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft); }
.theme-select { width:105px; min-height:34px; padding:6px 9px; font-size:11px; border-color:var(--line); background:var(--surface); }
.workspace-content { width:100%; max-width:1680px; margin:0 auto; padding:0 37px 38px; }
.workspace-content:focus { outline:0; }
.page-stack { display:grid; gap:21px; }
.welcome-row,.section-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.welcome-row { padding:6px 1px 1px; }
.welcome-row h2 { font-size:23px; letter-spacing:-.035em; font-weight:650; margin-top:6px; }
.welcome-row p,.section-heading p { font-size:12px; color:var(--muted); margin-top:7px; }
.section-heading h2 { font-size:17px; font-weight:650; letter-spacing:-.02em; }
.small-heading h2 { font-size:16px; }
.small-heading p { margin:0; }
.panel { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.panel-header { padding:21px 23px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.panel-header h2 { font-size:14px; font-weight:650; }
.panel-header p { margin-top:4px; font-size:11px; color:var(--muted); }
.panel-header .button { min-height:31px; font-size:11px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metric-card { padding:19px 21px 17px; min-height:146px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.metric-top { display:flex; align-items:center; justify-content:space-between; gap:9px; color:var(--muted); font-size:12px; }
.metric-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; }
.metric-icon-blue { color:var(--blue); background:var(--blue-soft); }
.metric-icon-green { color:var(--green); background:var(--green-soft); }
.metric-icon-amber { color:var(--amber); background:var(--amber-soft); }
.metric-icon-purple { color:var(--purple); background:var(--purple-soft); }
.metric-value { display:block; margin-top:9px; font-size:31px; line-height:1.25; letter-spacing:-.06em; font-weight:660; font-variant-numeric:tabular-nums; }
.metric-note { margin-top:10px; color:var(--faint); font-size:10px; }
.notice { border-radius:12px; padding:15px 18px; display:flex; align-items:center; gap:12px; border:1px solid transparent; }
.notice > svg { flex-shrink:0; }
.notice > div { flex:1; }
.notice strong { font-size:12px; color:inherit; font-weight:650; }
.notice p { margin-top:4px; font-size:11px; color:inherit; opacity:.85; line-height:1.65; }
.notice-amber { color:var(--amber); background:var(--amber-soft); }
.notice-green { color:var(--green); background:var(--green-soft); }
.notice-blue { color:var(--blue); background:var(--blue-soft); }
.notice .button { color:inherit; }
.compact-notice { min-height:42px; padding:11px 15px; font-size:11px; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; }
.trend-panel { min-height:304px; }
.trend-panel .empty-state { min-height:225px; padding-top:17px; }
.health-panel { text-align:center; padding-bottom:12px; }
.health-panel .panel-header { text-align:left; padding-bottom:12px; }
.health-orbit { display:grid; place-items:center; margin:5px auto 13px; width:66px; height:66px; border-radius:21px; background:var(--surface-soft); border:1px solid var(--line); color:var(--faint); }
.health-orbit.is-healthy { color:var(--green); background:var(--green-soft); border-color:transparent; }
.health-panel h3 { font-size:14px; font-weight:650; }
.health-panel > p { margin:5px 18px 15px; font-size:10px; color:var(--muted); }
.health-panel .key-values { margin:0 23px 8px; }
.health-panel .key-values > div { padding-block:7px; }
.health-panel .key-values dt,.health-panel .key-values dd { font-size:10px; }
.health-panel > .button { font-size:11px; }
.chart { padding:10px 23px 21px; }
.chart svg { display:block; width:100%; height:205px; overflow:visible; }
.chart-grid { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.chart-area { fill:var(--blue-soft); opacity:.6; }
.chart-line { stroke:var(--blue); stroke-width:3; stroke-linejoin:round; fill:none; }
.chart-point { stroke:var(--surface); stroke-width:3; fill:var(--blue); }
.chart-labels { display:flex; justify-content:space-between; margin-top:11px; color:var(--faint); font-size:10px; }
.badge { max-width:100%; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:4px 8px; font-size:10px; line-height:1.3; font-weight:550; border-radius:6px; white-space:nowrap; }
.badge-dot { width:4px; height:4px; background:currentColor; border-radius:50%; }
.badge-green { background:var(--green-soft); color:var(--green); }
.badge-blue { background:var(--blue-soft); color:var(--blue); }
.badge-amber { background:var(--amber-soft); color:var(--amber); }
.badge-red { background:var(--red-soft); color:var(--red); }
.badge-neutral { background:var(--surface-soft); color:var(--muted); }
.table-scroll { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; white-space:nowrap; }
th { background:var(--surface-soft); color:var(--muted); font-size:10px; font-weight:550; height:39px; padding:10px 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
td { height:69px; padding:12px 18px; border-bottom:1px solid var(--line); }
th:first-child,td:first-child { padding-left:23px; }
th:last-child,td:last-child { padding-right:23px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--surface-soft); }
td .button { font-size:11px; min-height:30px; }
.cell-stack { display:grid; gap:4px; }
.cell-stack strong { font-size:11px; font-weight:550; }
.cell-stack small { font-size:10px; color:var(--faint); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.money-cell { font-size:12px; letter-spacing:-.015em; font-variant-numeric:tabular-nums; font-weight:650; }
.remark-chip { font-family:Consolas,"SFMono-Regular",monospace; font-size:11px; color:var(--muted); padding:4px 6px; border-radius:5px; background:var(--surface-soft); border:1px solid var(--line); }
.table-description { display:block; max-width:340px; min-width:120px; white-space:normal; font-size:11px; color:var(--muted); line-height:1.6; }
.pagination { min-height:58px; display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 21px; border-top:1px solid var(--line); font-size:10px; color:var(--faint); }
.pagination .button { font-size:10px; min-height:28px; padding:5px 9px; }
.page-number { min-width:40px; text-align:center; font-variant-numeric:tabular-nums; }
.page-stack > .pagination { border:0; padding-top:0; }
.filter-bar { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.panel > .filter-bar { padding:1px 22px 18px; }
.filter-bar input,.filter-bar select { min-height:35px; width:auto; font-size:11px; padding:8px 10px; }
.filter-bar input[type=date] { width:132px; }
.filter-bar > input[type=text] { width:160px; }
.filter-bar > select { min-width:113px; max-width:190px; }
.filter-bar .button { min-height:35px; font-size:11px; }
.search-field { position:relative; flex:1; min-width:185px; max-width:330px; }
.search-field > svg { position:absolute; left:11px; top:10px; color:var(--faint); }
.search-field input { width:100%; padding-left:36px; }
.filter-separator { color:var(--faint); font-size:10px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:250px; padding:40px 25px; }
.empty-icon { display:grid; place-items:center; width:62px; height:62px; background:var(--surface-soft); border:1px solid var(--line); border-radius:19px; color:var(--faint); margin-bottom:18px; }
.empty-state h3 { font-size:14px; font-weight:600; }
.empty-state p { font-size:11px; max-width:390px; color:var(--muted); margin:8px 0 0; line-height:1.8; }
.empty-state .button { margin-top:20px; }
.initial-loading,.loading-panel { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:12px; }
.initial-loading { min-height:70vh; }
.loading-panel { min-height:300px; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); }
.dialog-content > .loading-panel { min-height:220px; border:0; }
.loader { display:inline-block; width:20px; height:20px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
input,select,textarea { width:100%; min-height:40px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); padding:10px 12px; outline:0; transition:border-color .15s,box-shadow .15s; }
textarea { resize:vertical; line-height:1.6; min-height:78px; }
input::placeholder,textarea::placeholder { color:var(--faint); opacity:.9; }
input:hover,select:hover,textarea:hover { border-color:var(--faint); }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
input:disabled { background:var(--surface-soft); color:var(--faint); cursor:not-allowed; }
input[type=checkbox] { min-height:16px; width:16px; height:16px; padding:0; accent-color:var(--blue); }
input[type=file] { padding:9px; font-size:11px; }
input[type=file]::file-selector-button { border:1px solid var(--line); padding:5px 9px; border-radius:5px; margin-right:12px; color:var(--text); background:var(--surface-soft); }
select[multiple] { min-height:100px; }
.field { min-width:0; }
.field label:not(.checkbox-label),.field-label { display:block; font-size:12px; color:var(--title); font-weight:550; margin-bottom:7px; }
.field-hint { margin-top:6px; color:var(--muted); font-size:10px; line-height:1.65; }
.form-grid,.auth-form { display:grid; gap:17px; }
.form-two-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-three-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.form-error { padding:11px 13px; background:var(--red-soft); color:var(--red); font-size:12px; border-radius:9px; line-height:1.6; }
.form-note { padding:12px; background:var(--surface-soft); color:var(--muted); border-radius:10px; font-size:11px; display:flex; gap:9px; align-items:center; }
.form-note > span { flex:1; }
.checkbox-label { display:flex; align-items:center; gap:9px; font-size:12px; margin:9px 0; }
.products-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; }
.product-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; }
.product-card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.product-avatar { width:43px; height:43px; background:var(--blue-soft); color:var(--blue); border-radius:13px; display:grid; place-items:center; }
.product-card h2 { font-size:17px; font-weight:650; letter-spacing:-.02em; }
.product-code { display:inline-block; color:var(--faint); font-size:10px; margin-top:5px; }
.product-description { font-size:11px; color:var(--muted); line-height:1.8; min-height:40px; margin-top:13px; overflow-wrap:anywhere; }
.product-meta { display:flex; flex-wrap:wrap; gap:16px; margin:18px 0; font-size:10px; color:var(--muted); }
.product-meta > span { display:flex; align-items:center; gap:5px; }
.product-card-actions { border-top:1px solid var(--line); padding-top:16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product-card-actions .button { min-height:33px; font-size:11px; }
.collectors-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.collector-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:23px; box-shadow:var(--shadow); }
.collector-title { display:flex; align-items:center; gap:12px; }
.collector-title h2 { font-size:15px; }
.collector-title p { font-size:10px; color:var(--faint); margin-top:4px; }
.collector-avatar { width:43px; height:43px; border-radius:13px; display:grid; place-items:center; background:var(--surface-soft); color:var(--faint); }
.collector-avatar.is-green { background:var(--green-soft); color:var(--green); }
.collector-card .key-values { margin-top:20px; }
.collector-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:13px; padding-top:14px; gap:8px; font-size:10px; }
.collector-footer .button { font-size:11px; }
.inline-status { display:inline-flex; gap:5px; align-items:center; font-size:10px; }
.is-green { color:var(--green); }
.is-amber { color:var(--amber); }
.integration-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:20px; }
.docs-panel { padding-bottom:22px; }
.docs-panel > .code-block { margin:0 22px; }
.setup-steps { list-style:none; margin:3px 24px 20px; padding:0; display:grid; gap:21px; }
.setup-steps li { display:flex; gap:13px; }
.step-number { width:25px; height:25px; background:var(--blue-soft); color:var(--blue); flex-shrink:0; display:grid; place-items:center; border-radius:8px; font-size:11px; font-weight:650; }
.setup-steps h3 { font-size:12px; font-weight:600; margin-top:2px; }
.setup-steps p { margin-top:5px; font-size:11px; color:var(--muted); line-height:1.7; }
.docs-note { margin:0 23px; display:flex; align-items:flex-start; gap:10px; padding:13px; background:var(--surface-soft); border-radius:9px; color:var(--muted); font-size:10px; line-height:1.7; }
.code-block { padding:18px; border-radius:10px; background:var(--surface-soft); color:var(--text); border:1px solid var(--line); font:11px/1.85 "SFMono-Regular",Consolas,monospace; overflow:auto; white-space:pre; max-width:100%; }
.docs-columns { display:grid; grid-template-columns:250px minmax(0,1fr); gap:30px; padding:0 24px; }
.docs-columns > div > p { font-size:10px; margin-top:10px; line-height:1.7; }
.docs-columns .code-block { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.settings-layout { max-width:960px; }
.settings-panel { padding-bottom:4px; }
.settings-form { display:grid; gap:23px; padding:7px 25px 22px; }
.settings-save { display:flex; justify-content:flex-end; margin-top:2px; }
.setting-row { display:flex; align-items:center; gap:15px; padding:20px 25px; border-top:1px solid var(--line); }
.setting-icon { width:36px; height:36px; background:var(--surface-soft); color:var(--muted); display:grid; place-items:center; border-radius:10px; }
.setting-row-body { flex:1; }
.setting-row h3 { font-size:12px; font-weight:600; }
.setting-row p { font-size:11px; color:var(--muted); margin-top:4px; }
.settings-footnote { display:flex; justify-content:space-between; color:var(--faint); font-size:10px; padding:0 3px; }
.dialog { width:min(510px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); border:1px solid var(--line); border-radius:19px; background:var(--surface); color:var(--text); padding:0; box-shadow:var(--dialog-shadow); overflow:auto; }
.dialog::backdrop { background:rgba(16,27,48,.28); backdrop-filter:blur(5px); }
.dialog-wide { width:min(780px,calc(100vw - 32px)); }
.dialog-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:20px; padding:24px 26px 20px; background:var(--surface); border-bottom:1px solid var(--line); }
.dialog-header h2 { font-size:18px; font-weight:650; letter-spacing:-.02em; }
.dialog-header p { margin-top:7px; font-size:11px; color:var(--muted); line-height:1.7; }
.dialog-header > .button { margin-top:-5px; margin-right:-9px; }
.dialog-content { padding:24px 26px 25px; }
.dialog-content > .table-scroll { margin-top:18px; border:1px solid var(--line); border-radius:10px; }
.dialog-content > .notice { margin-bottom:17px; }
.dialog-footer { display:flex; justify-content:flex-end; align-items:center; gap:9px; border-top:1px solid var(--line); padding-top:20px; margin-top:8px; }
.dialog-content > .dialog-footer { margin-top:24px; }
.dialog .table-scroll th:first-child,.dialog .table-scroll td:first-child { padding-left:14px; }
.dialog .table-scroll td,.dialog .table-scroll th { padding-inline:12px; }
.subsection-title { margin:24px 0 14px; font-size:13px; font-weight:650; }
.body-copy { color:var(--muted); font-size:12px; line-height:1.9; }
.key-values { margin:0; }
.key-values > div { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:11px 0; }
.key-values dt { color:var(--muted); font-size:11px; flex-shrink:0; }
.key-values dd { font-size:11px; text-align:right; margin:0; min-width:0; color:var(--title); overflow-wrap:anywhere; }
.key-values dd .actions { justify-content:flex-end; margin-top:-7px; }
.key-values dd .actions > .button { min-height:28px; font-size:10px; }
.detail-summary { display:flex; justify-content:space-between; align-items:center; padding:1px 0 22px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.detail-summary .eyebrow { font-size:9px; }
.detail-amount { display:block; font-size:32px; letter-spacing:-.045em; margin-top:7px; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:flex; gap:12px; position:relative; padding:0 0 20px; }
.timeline li:not(:last-child)::before { position:absolute; content:""; width:1px; background:var(--line); left:4px; top:9px; bottom:0; }
.timeline-dot { width:9px; height:9px; border:2px solid var(--blue); background:var(--surface); border-radius:50%; flex-shrink:0; margin-top:5px; z-index:1; }
.timeline strong { display:block; font-size:11px; font-weight:550; }
.timeline time { display:block; color:var(--faint); font-size:10px; margin-top:4px; }
.secret-box { padding:15px; border:1px solid var(--line); background:var(--surface-soft); border-radius:10px; display:flex; gap:12px; align-items:center; margin:15px 0; }
.secret-box code { min-width:0; flex:1; font:12px/1.8 Consolas,"SFMono-Regular",monospace; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--title); user-select:all; }
.upload-note { padding:24px; border:1px dashed var(--line); border-radius:12px; display:flex; align-items:center; flex-direction:column; background:var(--surface-soft); text-align:center; }
.upload-note .empty-icon { margin-bottom:12px; background:var(--surface); }
.upload-note strong { font-size:13px; }
.upload-note p { color:var(--muted); font-size:10px; line-height:1.8; margin-top:7px; }
.qr-preview { margin:0 auto; width:min(320px,100%); background:#fff; padding:14px; border:1px solid var(--line); border-radius:12px; }
.qr-preview img { width:100%; height:auto; max-height:440px; display:block; object-fit:contain; }
.qr-preview + p { font-size:11px; margin-top:17px; }
.toast-region { position:fixed; z-index:1000; bottom:28px; left:50%; transform:translateX(-50%); display:grid; gap:10px; max-width:calc(100vw - 32px); pointer-events:none; }
.toast { padding:12px 17px; border:1px solid var(--line); border-radius:11px; box-shadow:0 8px 30px rgba(20,35,60,.14); background:var(--surface); display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text); animation:toast-in .2s ease; }
.toast-success > svg { color:var(--green); }
.toast-error > svg { color:var(--red); }
@keyframes toast-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.auth-layout { min-height:100vh; display:grid; grid-template-columns:minmax(390px,.95fr) minmax(450px,1.05fr); }
.auth-story { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:47px clamp(35px,6vw,100px); border-right:1px solid var(--line); background:linear-gradient(155deg,var(--blue-soft),var(--bg) 70%); }
.auth-story::after { content:""; position:absolute; width:460px; height:460px; left:-170px; bottom:-310px; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 0 70px var(--blue-soft); opacity:.55; pointer-events:none; }
.brand-large { padding:0; }
.brand-large .brand-mark { width:43px; height:46px; border-radius:13px; }
.brand-large strong { font-size:28px; }
.auth-story-body { margin:auto 0; padding:70px 0; position:relative; z-index:1; }
.auth-story-body h1 { font-size:clamp(38px,4vw,57px); line-height:1.27; font-weight:700; letter-spacing:-.055em; margin-top:21px; }
.auth-story-body > p { max-width:330px; color:var(--muted); font-size:13px; line-height:1.9; margin:23px 0 35px; }
.auth-feature { display:flex; align-items:center; gap:12px; color:var(--muted); margin-top:19px; font-size:12px; }
.auth-feature > svg { color:var(--blue); }
.auth-story-foot { font-size:10px; color:var(--faint); letter-spacing:.025em; position:relative; z-index:1; }
.auth-card-wrap { display:grid; place-items:center; padding:50px 32px; }
.auth-card { width:100%; max-width:385px; }
.auth-step { color:var(--blue); font-size:11px; font-weight:600; }
.auth-card h2 { font-size:27px; letter-spacing:-.045em; margin-top:10px; font-weight:680; }
.auth-description { margin:11px 0 31px; color:var(--muted); font-size:12px; line-height:1.8; }
.auth-form > .button-primary { width:100%; min-height:43px; margin-top:5px; justify-content:space-between; padding-inline:17px; }
.auth-form input { min-height:43px; background:var(--surface); }
.auth-fineprint { color:var(--faint); font-size:10px; display:flex; justify-content:center; gap:5px; margin-top:4px; line-height:1.7; }
.mobile-menu,.drawer-scrim { display:none; }

/* The customer page is intentionally a separate, small, mobile-first surface. */
.cashier-body { background:radial-gradient(ellipse at 50% 0, var(--blue-soft),transparent 65%),var(--bg); min-height:100vh; }
.cashier-wrap { max-width:452px; width:100%; padding:28px 18px max(25px,env(safe-area-inset-bottom)); margin:0 auto; }
.cashier-brand { display:flex; justify-content:center; align-items:center; gap:7px; margin:5px 0 23px; color:var(--muted); font-size:11px; letter-spacing:.03em; }
.cashier-brand .mini-mark { width:24px; height:24px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--blue); border-radius:7px; }
.cashier-test { margin-bottom:14px;position:sticky;top:8px;z-index:12;box-shadow:var(--shadow); }
.cashier-card { overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:25px; box-shadow:0 18px 55px -35px rgba(36,61,112,.28); }
.cashier-heading { padding:29px 25px 22px; text-align:center; border-bottom:1px solid var(--line); }
.cashier-product { font-size:13px; color:var(--muted); font-weight:550; overflow-wrap:anywhere; }
.cashier-plan { margin-top:5px; font-size:11px; color:var(--faint); }
.cashier-amount { margin-top:13px; font-size:48px; color:var(--title); line-height:1.2; font-weight:700; letter-spacing:-.07em; font-variant-numeric:tabular-nums; }
.cashier-amount .currency { font-size:26px; font-weight:550; margin-right:4px; letter-spacing:-.025em; }
.cashier-heading > .badge { margin-top:15px; }
.cashier-content { padding:24px; }
.cashier-state { text-align:center; }
.cashier-state h1 { font-size:17px; font-weight:650; letter-spacing:-.02em; margin:0 0 8px; }
.cashier-state > p { font-size:11px; color:var(--muted); line-height:1.8; }
.cashier-qr { width:min(270px,100%); min-height:248px; margin:20px auto 16px; display:flex; align-items:center; justify-content:center; padding:14px; background:#fff; border:1px solid #e8ecf2; border-radius:19px; }
.cashier-qr img { display:block; width:100%; height:auto; max-height:340px; object-fit:contain; }
.cashier-qr .loader { margin:90px 0; }
.cashier-payee { display:flex; align-items:center; justify-content:center; gap:5px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.cashier-payee > svg { color:var(--green); }
.remark-box { background:var(--blue-soft); border:1px solid transparent; border-radius:14px; padding:17px 15px 14px; margin-top:23px; }
.remark-label { display:flex; justify-content:space-between; gap:8px; align-items:center; color:var(--blue); font-size:11px; }
.remark-label strong { color:var(--blue); font-size:11px; font-weight:650; }
.required-label { font-size:9px; border:1px solid currentColor; border-radius:4px; padding:1px 4px; opacity:.8; }
.remark-value { display:flex; gap:9px; justify-content:space-between; align-items:center; margin-top:11px; }
.remark-value code { font:700 24px/1.4 "SFMono-Regular",Consolas,monospace; letter-spacing:.045em; color:var(--title); user-select:all; white-space:nowrap; }
.remark-value .button { min-height:33px; font-size:10px; padding-inline:9px; background:var(--surface); border-color:transparent; color:var(--blue); }
.remark-hint { color:var(--muted); font-size:10px; line-height:1.75; margin-top:10px; }
.cashier-expiry { margin:17px 0 0; text-align:center; color:var(--muted); font-size:10px; display:flex; align-items:center; justify-content:center; gap:6px; }
.cashier-expiry strong { font-weight:600; font-size:11px; font-variant-numeric:tabular-nums; }
.cashier-check { width:100%; margin-top:22px; min-height:43px; }
.cashier-auto-note { margin-top:12px; color:var(--faint); text-align:center; font-size:10px; line-height:1.7; }
.cashier-order-summary { border-top:1px solid var(--line); margin-top:24px; padding-top:17px; }
.cashier-order-summary .key-values > div { padding:7px 0; }
.cashier-order-summary .key-values dt,.cashier-order-summary .key-values dd { font-size:10px; }
.cashier-order-summary .key-values dd { max-width:210px; }
.cashier-status-icon { width:73px; height:73px; border-radius:23px; display:grid; place-items:center; margin:6px auto 20px; background:var(--green-soft); color:var(--green); }
.cashier-status-icon.is-amber { background:var(--amber-soft); color:var(--amber); }
.cashier-status-icon.is-neutral { background:var(--surface-soft); color:var(--faint); }
.cashier-confirmed { padding-block:13px 7px; }
.cashier-confirmed h1 { font-size:21px; }
.cashier-confirmed > p { max-width:300px; margin:auto; }
.cashier-steps { display:flex; align-items:flex-start; margin:28px 0 18px; list-style:none; padding:0; }
.cashier-steps li { position:relative; flex:1; color:var(--faint); font-size:10px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.cashier-steps li:not(:last-child)::after { content:""; position:absolute; width:calc(100% - 30px); height:1px; top:11px; left:calc(50% + 15px); background:var(--line); }
.cashier-steps .step-circle { z-index:1; width:23px; height:23px; background:var(--surface-soft); border:1px solid var(--line); display:grid; place-items:center; border-radius:50%; color:var(--faint); }
.cashier-steps li.is-complete { color:var(--green); }
.cashier-steps li.is-complete .step-circle { background:var(--green-soft); color:var(--green); border-color:transparent; }
.cashier-steps li.is-current { color:var(--blue); }
.cashier-steps li.is-current .step-circle { background:var(--blue-soft); color:var(--blue); border-color:transparent; }
.cashier-connection { margin:14px 0 0; padding:10px 12px; border-radius:10px; font-size:10px; line-height:1.7; color:var(--amber); background:var(--amber-soft); display:flex; gap:7px; align-items:flex-start; }
.cashier-footer { margin:21px 7px 5px; font-size:10px; color:var(--faint); text-align:center; line-height:1.85; }
.cashier-footer p + p { margin-top:7px; }
.cashier-footer .powered-by { display:flex; align-items:center; justify-content:center; gap:5px; margin-top:15px; opacity:.85; font-size:9px; letter-spacing:.08em; }
.cashier-error { background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; }
.cashier-error .empty-state { min-height:300px; padding-inline:30px; }

@media(min-width:1700px) { .workspace-content { padding-inline:48px; } .topbar { padding-inline:48px; } .metric-value { font-size:35px; } }
@media(max-width:1280px) {
  :root { --sidebar-width:210px; }
  .sidebar { padding-inline:13px; }
  .topbar { padding-inline:27px; }
  .workspace-content { padding-inline:27px; }
  .environment-label { display:none; }
  .metrics-grid { gap:12px; }
  .metric-card { padding:17px; }
  .metric-value { font-size:28px; }
  .overview-grid { grid-template-columns:minmax(0,1fr) 260px; gap:16px; }
  .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .docs-columns { grid-template-columns:210px minmax(0,1fr); gap:20px; }
}
@media(max-width:1020px) {
  .topbar { padding:26px 23px; }
  .workspace-content { padding-inline:23px; }
  .metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-grid { grid-template-columns:1fr; }
  .health-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:0 21px 18px; }
  .health-panel .panel-header { grid-column:1/-1; padding-left:0; }
  .health-panel .health-orbit { grid-row:2/5; margin:0 20px 0 0; }
  .health-panel h3,.health-panel > p { text-align:left; margin-left:0; }
  .health-panel .key-values { grid-column:1/-1; margin:14px 0 0; }
  .health-panel > .button { grid-column:1/-1; justify-self:center; }
  .collectors-grid,.integration-grid { grid-template-columns:1fr; }
  .docs-columns { grid-template-columns:1fr; }
  .welcome-row h2 { font-size:20px; }
  .filter-bar input[type=date] { width:125px; }
}
@media(max-width:780px) {
  :root { --sidebar-width:226px; }
  .sidebar { transform:translateX(-100%); transition:transform .18s ease; }
  .workspace { margin-left:0; }
  .drawer-open .sidebar { transform:translateX(0); }
  .drawer-open .drawer-scrim { display:block; position:fixed; inset:0; z-index:25; background:rgba(15,28,48,.25); backdrop-filter:blur(3px); border:0; width:100%; height:100%; }
  .mobile-menu { display:inline-flex; }
  .topbar { min-height:126px; padding:24px 20px; align-items:center; }
  .topbar-title { gap:8px; }
  .topbar h1 { font-size:24px; }
  .topbar p { max-width:310px; font-size:11px; }
  .breadcrumb { font-size:9px; }
  .topbar-tools { gap:5px; }
  .topbar-tools > .button { padding-inline:8px; min-width:30px; }
  .topbar-tools > .button > span { display:none; }
  .theme-select { width:86px; font-size:10px; }
  .workspace-content { padding-inline:20px; }
  .welcome-row { align-items:flex-start; }
  .welcome-row > .button { margin-top:5px; font-size:11px; }
  .welcome-row h2 { font-size:18px; line-height:1.5; }
  .welcome-row .eyebrow { font-size:9px; }
  .welcome-row p { font-size:10px; line-height:1.7; }
  .page-stack { gap:17px; }
  .notice { align-items:flex-start; flex-wrap:wrap; font-size:11px; }
  .notice > .button { margin-left:30px; font-size:10px; }
  .notice > div { min-width:0; }
  .notice > svg { margin-top:2px; }
  .panel-header { padding:19px 19px 16px; }
  .panel-header h2 { font-size:13px; }
  .panel-header p { font-size:10px; }
  .section-heading h2 { font-size:16px; }
  .section-heading > .button { font-size:11px; }
  .products-grid { gap:15px; }
  .product-card { padding:18px; }
  .product-card h2 { font-size:16px; }
  .product-card-actions { flex-wrap:wrap; }
  .auth-layout { grid-template-columns:1fr; }
  .auth-story { padding:28px 28px 0; background:none; border:0; }
  .auth-story::after,.auth-story-body,.auth-story-foot { display:none; }
  .auth-card-wrap { padding:42px 28px; place-items:start center; }
  .auth-card { max-width:430px; }
  .auth-card h2 { font-size:25px; }
  .docs-columns { padding-inline:20px; }
  .form-three-columns { grid-template-columns:1fr; gap:20px; }
}
@media(max-width:480px) {
  .topbar { padding-inline:14px; gap:8px; }
  .topbar p { max-width:240px; }
  .topbar-tools > .button { display:none; }
  .theme-select { width:76px; padding-inline:6px; }
  .workspace-content { padding-inline:14px; padding-bottom:25px; }
  .welcome-row > .button { padding:8px; }
  .welcome-row > .button > svg { display:none; }
  .metric-card { padding:16px 15px; min-height:139px; }
  .metric-top { font-size:11px; }
  .metric-icon { width:27px; height:27px; border-radius:8px; }
  .metric-icon > svg { width:16px; }
  .metric-value { font-size:27px; margin-top:12px; }
  .metric-note { font-size:9px; line-height:1.7; }
  .products-grid { grid-template-columns:1fr; }
  .filter-bar { gap:8px; }
  .filter-bar .search-field { max-width:none; flex-basis:100%; }
  .filter-bar > select { flex:1; max-width:none; }
  .panel > .filter-bar { padding-inline:17px; }
  .panel-header { padding-inline:17px; }
  .panel-header .actions .button { font-size:10px; }
  .filter-bar input[type=date] { width:calc(50% - 20px); }
  .dialog-header { padding:21px 20px 17px; }
  .dialog-content { padding:21px 20px; }
  .form-two-columns { grid-template-columns:1fr; }
  .setting-row { padding:20px; gap:11px; flex-wrap:wrap; }
  .setting-row .badge { margin-left:47px; }
  .setting-row-body { min-width:150px; }
  .settings-form { padding-inline:20px; }
  .settings-footnote { flex-direction:column; gap:6px; }
  .secret-box { align-items:flex-start; flex-direction:column; }
  .secret-box .button { align-self:flex-end; }
  .cashier-wrap { padding:20px 13px max(20px,env(safe-area-inset-bottom)); }
  .cashier-brand { margin-bottom:18px; }
  .cashier-heading { padding:26px 21px 21px; }
  .cashier-content { padding:22px 20px; }
  .cashier-amount { font-size:46px; }
  .remark-value code { font-size:23px; }
}
@media(max-width:360px) {
  .remark-value { flex-direction:column; align-items:flex-start; }
  .remark-value .button { align-self:flex-end; }
  .cashier-heading { padding-inline:18px; }
  .cashier-content { padding-inline:17px; }
  .cashier-amount { font-size:43px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; }
}