:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-2: #f0f3f9;
  --text: #0f172a;
  --muted: #5b6579;
  --border: #dde3ee;
  --primary: #2563eb;
  --primary-h: #1d4ed8;
  --primary-t: #ffffff;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #d97706;
  --info: #2563eb;
  --green-bg: #dcfce7;
  --green-fg: #166534;
  --yellow-bg: #fef3c7;
  --yellow-fg: #92400e;
  --red-bg: #fee2e2;
  --red-fg: #991b1b;
  --blue-bg: #dbeafe;
  --blue-fg: #1e40af;
  --gray-bg: #e5e7eb;
  --gray-fg: #374151;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .05);
  --radius: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #131c2e;
  --surface-2: #1a2540;
  --text: #e5ebf7;
  --muted: #94a3bd;
  --border: #26324d;
  --primary: #3b82f6;
  --primary-h: #60a5fa;
  --primary-t: #0b1120;
  --danger: #f87171;
  --success: #4ade80;
  --warn: #fbbf24;
  --info: #60a5fa;
  --green-bg: #12351f;
  --green-fg: #86efac;
  --yellow-bg: #3a2c0b;
  --yellow-fg: #fcd34d;
  --red-bg: #3d1414;
  --red-fg: #fca5a5;
  --blue-bg: #13294f;
  --blue-fg: #93c5fd;
  --gray-bg: #272f42;
  --gray-fg: #cbd5e1;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: #0b1120;
    --surface: #131c2e;
    --surface-2: #1a2540;
    --text: #e5ebf7;
    --muted: #94a3bd;
    --border: #26324d;
    --primary: #3b82f6;
    --primary-h: #60a5fa;
    --primary-t: #0b1120;
    --danger: #f87171;
    --success: #4ade80;
    --warn: #fbbf24;
    --info: #60a5fa;
    --green-bg: #12351f;
    --green-fg: #86efac;
    --yellow-bg: #3a2c0b;
    --yellow-fg: #fcd34d;
    --red-bg: #3d1414;
    --red-fg: #fca5a5;
    --blue-bg: #13294f;
    --blue-fg: #93c5fd;
    --gray-bg: #272f42;
    --gray-fg: #cbd5e1;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .6em; font-weight: 650; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
code, pre, .mono { font-family: var(--mono); font-size: .9em; }
code { background: var(--surface-2); padding: .1em .4em; border-radius: 6px; word-break: break-all; }
small { font-size: .85em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; stroke: currentColor; }
.muted { color: var(--muted); }
.block { display: block; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--success); }
.neg { color: var(--danger); }
.pre-line { white-space: pre-line; }
.center { justify-content: center; text-align: center; }
.only-light { display: inline-flex; }
.only-dark { display: none; }
html[data-theme="dark"] .only-light { display: none; }
html[data-theme="dark"] .only-dark { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .only-light { display: none; }
  html[data-theme="auto"] .only-dark { display: inline-flex; }
}

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; }
.main.with-side { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.content { min-width: 0; }

.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.row.gap, .gap { gap: 10px; }
.stack > * + * { margin-top: 12px; }
.align-start { align-items: start; }

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

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card.empty, .empty { text-align: center; color: var(--muted); padding: 32px 16px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-in { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { height: 32px; width: auto; }
.brand-icon { width: 28px; height: 28px; color: var(--primary); }
.brand-title { font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 18px; margin-left: 12px; flex: 1; }
.main-nav a { color: var(--text); font-weight: 500; }
.main-nav a.btn-primary { color: var(--primary-t); }
.main-nav a:hover { color: var(--primary); text-decoration: none; }
.icon-btn.nav-toggle { display: none; }
.tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.tool-label { margin-left: 6px; font-size: .85rem; font-weight: 600; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  list-style: none;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn::-webkit-details-marker { display: none; }

.dropdown { position: relative; }
.dropdown > summary { list-style: none; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 40;
}
.dropdown-menu a, .dropdown-menu button {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-2); text-decoration: none; }
.dropdown-menu a.active { color: var(--primary); font-weight: 600; }

.cur-form select { height: 40px; padding: 0 8px; width: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-t); }
.btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 5px 10px; font-size: .85rem; border-radius: 8px; }
.btn.copied { border-color: var(--success); color: var(--success); }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }

.field { margin-bottom: 14px; }
.field label, legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
input:not([type]), input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=search], input[type=file], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  min-height: 42px;
}
input[readonly] { background: var(--surface-2); }
textarea { resize: vertical; min-height: 42px; }
textarea.mono, .mono textarea { font-family: var(--mono); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent); outline-offset: 0; }
.hint { display: block; color: var(--muted); margin-top: 4px; font-size: .85rem; }
.check { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 500; cursor: pointer; }
.check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
fieldset { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px 6px; margin: 0 0 16px; min-width: 0; }
fieldset legend { padding: 0 6px; margin-bottom: 0; }
.i18n .field { display: flex; gap: 10px; align-items: flex-start; }
.i18n .field label { width: 44px; margin: 8px 0 0; flex: none; }
.i18n .field input, .i18n .field textarea { flex: 1; }
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
}
a.chip:hover { text-decoration: none; background: var(--surface-2); }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-t); }
.filters { margin-bottom: 14px; }
.search-bar { padding: 12px; }
.search-bar input { flex: 1; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input { width: 150px; min-height: 34px; padding: 5px 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.options { display: grid; gap: 10px; margin-bottom: 14px; }
.option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.option:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.option input { margin-top: 4px; accent-color: var(--primary); }
.option-body { flex: 1; min-width: 0; }

.alert { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; }
.alert-error { background: var(--red-bg); color: var(--red-fg); border-color: color-mix(in srgb, var(--red-fg) 30%, transparent); }
.alert-success { background: var(--green-bg); color: var(--green-fg); border-color: color-mix(in srgb, var(--green-fg) 30%, transparent); }
.alert-info { background: var(--blue-bg); color: var(--blue-fg); border-color: color-mix(in srgb, var(--blue-fg) 30%, transparent); }
.alert code { background: rgba(127, 127, 127, .15); }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 650; white-space: nowrap; }
.badge-green { background: var(--green-bg); color: var(--green-fg); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.badge-red { background: var(--red-bg); color: var(--red-fg); }
.badge-blue { background: var(--blue-bg); color: var(--blue-fg); }
.badge-gray { background: var(--gray-bg); color: var(--gray-fg); }

.table-wrap { overflow-x: auto; padding: 0; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.table th.num { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.table td form { margin: 0; }
.table.plain th, .table.plain td { padding: 8px 12px; }
.translations textarea { min-height: 38px; }
.translations td:first-child { white-space: nowrap; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.stat strong { font-size: 1.4rem; font-weight: 700; }
.stat-label { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; word-break: break-word; }

.crumbs { color: var(--muted); margin-bottom: 14px; font-size: .9rem; }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
.pager a, .pager span { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.pager a:hover { text-decoration: none; background: var(--surface-2); }
.pager .current { background: var(--primary); border-color: var(--primary); color: var(--primary-t); font-weight: 700; }

.side { position: sticky; top: 84px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.side-user { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--border); min-width: 0; }
.side-user > div { min-width: 0; }
.side-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: var(--primary-t); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--text); font-weight: 500; border: 0; background: none; font: inherit; font-weight: 500; cursor: pointer; }
.nav-link:hover { background: var(--surface-2); text-decoration: none; }
.nav-link.active { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); font-weight: 650; }

.footer { border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); margin-top: auto; }
.footer-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 20px 16px; }

.hero { text-align: center; padding: 56px 0 40px; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.02em; margin-bottom: .4em; }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 680px; margin: 0 auto 1.5em; }
.features { margin: 8px 0 40px; }
.feature-icon { width: 36px; height: 36px; color: var(--primary); margin-bottom: 10px; }
.product-card { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.product-icon { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.product-icon .icon { width: 26px; height: 26px; }
.product-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; }
.price { font-size: 1.25rem; font-weight: 700; }
.product-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.prose { max-width: 70ch; }
.check-list { list-style: none; padding: 0; margin: 0 0 1em; }
.check-list li { padding: 5px 0 5px 26px; position: relative; }
.check-list li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 10px; height: 6px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }

.pay-box { border: 1px dashed var(--border); border-radius: 10px; padding: 14px; background: var(--surface-2); margin-bottom: 14px; }
.invoice { max-width: 820px; }
.receipt { max-width: 100%; border-radius: 10px; border: 1px solid var(--border); }
.logo-preview { max-width: 120px; height: auto; border-radius: 10px; border: 1px solid var(--border); }

.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.msg { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; background: var(--surface); max-width: 85%; }
.msg-staff { align-self: flex-start; border-left: 3px solid var(--primary); }
.msg-client { align-self: flex-end; background: var(--surface-2); }
.msg-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 6px; font-size: .88rem; }
.msg-body { word-break: break-word; }

.auth-body { align-items: center; justify-content: center; padding: 20px 16px; }
.auth-wrap { width: 100%; max-width: 440px; margin: 0 auto; }
.auth-wrap.wide { max-width: 640px; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); }
.auth-box { margin-top: 8px; }
.auth-card .brand { justify-content: center; width: 100%; margin-bottom: 18px; }
.otp input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-family: var(--mono); }

.req-list { list-style: none; padding: 0; margin: 0 0 16px; }
.req-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.req-list .ok { color: var(--success); }
.req-list .fail { color: var(--danger); }
.req-list .warn { color: var(--warn); }

pre, .trace { background: #0b1120; color: #d6e2ff; padding: 14px 16px; border-radius: 10px; overflow: auto; max-height: 420px; font-size: .8rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 0; }
code.block { display: block; padding: 10px 12px; }

.error-page { align-items: center; justify-content: center; padding: 24px 16px; }
.error-box { max-width: 560px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 28px; box-shadow: var(--shadow); }
.big-icon { width: 56px; height: 56px; color: var(--primary); margin-bottom: 14px; }

.debugbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #111827; color: #e5e7eb; font: 12px/1.4 var(--mono); padding: 6px 14px; display: flex; gap: 18px; flex-wrap: wrap; border-top: 2px solid var(--primary); }

.admin-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; width: 100%; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { padding: 4px 12px 16px; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.admin-main { min-width: 0; display: flex; flex-direction: column; }
.admin-top { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.admin-title { font-size: 1.25rem; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-content { padding: 24px; max-width: 1280px; width: 100%; }
body.admin { display: block; }
.admin .tools { margin-left: 0; }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-page { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .main.with-side { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .icon-btn.nav-toggle { display: inline-flex; margin-left: auto; order: 3; }
  .tools { margin-left: 0; }
  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 16px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 10px 4px; }
  .main-nav a.btn { margin-top: 6px; text-align: center; padding: 10px; }
  .topbar-in { flex-wrap: wrap; }
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: 270px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .admin-top { padding: 10px 14px; }
  .admin-content { padding: 16px 14px; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 16px; }
  .tool-label { display: none; }
  .hero { padding: 32px 0 24px; }
  .msg { max-width: 100%; }
  .i18n .field { flex-direction: column; gap: 4px; }
  .i18n .field label { margin: 0; width: auto; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dl dd { margin-bottom: 8px; }
  .inline-form input { width: 120px; }
  .table.responsive thead { display: none; }
  .table.responsive, .table.responsive tbody, .table.responsive tr, .table.responsive td { display: block; width: 100%; }
  .table.responsive tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .table.responsive tbody tr:last-child { border-bottom: 0; }
  .table.responsive td { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; text-align: right; }
  .table.responsive td::before { content: attr(data-label); color: var(--muted); font-weight: 600; text-align: left; flex: none; }
  .table.responsive td:not([data-label])::before { content: none; }
  .table.responsive td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; }
  .table.responsive td.num { text-align: right; }
  .auth-card { padding: 20px; }
}

[dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .num { text-align: left; }
[dir="rtl"] .dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .check-list li { padding: 5px 26px 5px 0; }
[dir="rtl"] .check-list li::before { left: auto; right: 4px; }
[dir="rtl"] .sidebar { border-right: 0; border-left: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .topbar, .side, .sidebar, .admin-top, .footer, .btn, .tools, .no-print, .crumbs, .bottom-nav { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .main.with-side { box-shadow: none; border-color: #ccc; }
  .main.with-side, .admin-shell { display: block; }
}

.item-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; margin-bottom: 10px; }
.sticky-save { position: sticky; bottom: 12px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 1.5rem; }

.hero-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #7c3aed));
  box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 35%, transparent);
}
.hero-balance .hello { margin: 0 0 2px; opacity: .85; font-size: .95rem; }
.hero-balance .amount { font-size: clamp(1.8rem, 6vw, 2.5rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.hero-balance .label { opacity: .8; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-actions .btn { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(4px); }
.hero-actions .btn:hover { background: rgba(255, 255, 255, .28); }
.hero-actions .btn-solid { background: #fff; color: #1e3a8a; border-color: #fff; }
.hero-actions .btn-solid:hover { background: #f1f5f9; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); box-shadow: var(--shadow); transition: transform .12s, border-color .12s; }
.tile:hover { text-decoration: none; border-color: var(--primary); transform: translateY(-1px); }
.tile strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.tile small { color: var(--muted); }
.ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: color-mix(in srgb, var(--primary) 13%, var(--surface)); color: var(--primary); }
.ic .icon { width: 22px; height: 22px; }
.ic-green { background: var(--green-bg); color: var(--green-fg); }
.ic-yellow { background: var(--yellow-bg); color: var(--yellow-fg); }
.ic-blue { background: var(--blue-bg); color: var(--blue-fg); }
.ic-red { background: var(--red-bg); color: var(--red-fg); }

.items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; color: var(--text); box-shadow: var(--shadow); min-width: 0; }
a.item:hover { text-decoration: none; border-color: var(--primary); }
.item-main { flex: 1; min-width: 0; }
.item-main strong, .item-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-main small { color: var(--muted); }
.item-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.item-end b { font-variant-numeric: tabular-nums; }
.item-end small { color: var(--muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 22px 0 12px; }
.section-title h2 { margin: 0; font-size: 1.1rem; }

.tabbar { display: none; }

.side { padding: 14px; border-radius: 16px; }
.side-user { padding: 6px 4px 14px; }
.nav-link { padding: 11px 12px; }
.nav-link .icon { width: 20px; height: 20px; }
.card { border-radius: 16px; }
.btn { min-height: 40px; }
.btn-sm { min-height: 32px; }

@media (max-width: 820px) {
  body.has-tabbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-tabbar .footer { display: none; }
  body.has-tabbar .side { display: none; }
  body.has-tabbar .main { padding: 16px 14px 24px; }
  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: saturate(1.5) blur(12px);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--muted); font-size: .68rem; font-weight: 600; line-height: 1.15; min-width: 0; text-align: center; }
  .tab-item span { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; white-space: normal; }
  @media (max-width: 360px) { .tab-item { font-size: .62rem; } .tab-item .icon { width: 20px; height: 20px; } }
  .tab-item .icon { width: 22px; height: 22px; }
  .tab-item:hover { text-decoration: none; }
  .tab-item.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tile { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .hero-balance { padding: 18px; border-radius: 16px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1; }
}

@media (max-width: 640px) {
  .item { padding: 12px; gap: 12px; }
  .ic { width: 38px; height: 38px; }
  .item-row { grid-template-columns: minmax(0, 1fr) 110px; }
  .tile strong { font-size: 1.2rem; }
  .tile small { font-size: .72rem; }
  .page-head h1 { font-size: 1.3rem; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  input:not([type]), input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], input[type=number], input[type=search], select, textarea { font-size: 16px; min-height: 46px; }
  .pay-box .row { flex-direction: column; align-items: stretch; }
  .pay-box .btn { width: 100%; }
}

.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-xs { width: 24px; height: 24px; font-size: .7rem; }
.avatar-sm { width: 34px; height: 34px; font-size: .85rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.3rem; }
.avatar-xl { width: 96px; height: 96px; font-size: 2.2rem; }
.avatar-staff { background: var(--surface-2); color: var(--primary); border: 1px solid var(--border); }
.avatar-staff .icon { width: 18px; height: 18px; }
.avatar-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.avatar-actions h2 { margin: 0; }
.push-right { margin-left: auto; }
.col-order { width: 1%; white-space: nowrap; }
.chip-n { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); font-size: .75rem; text-align: center; }
.chip.active .chip-n { background: color-mix(in srgb, var(--primary-t) 25%, transparent); }
.row-attn { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.row-todo textarea { border-color: color-mix(in srgb, #f59e0b 60%, var(--border)); }
.item-attn { border-color: color-mix(in srgb, #16a34a 45%, var(--border)); }
progress.progress { width: 100%; max-width: 160px; height: 8px; border: 0; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: block; margin-bottom: 4px; accent-color: var(--primary); }
progress.progress::-webkit-progress-bar { background: var(--surface-2); }
progress.progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.split-main, .split-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.split-side .card { margin: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 14px 0 0; font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; word-break: break-word; }

.msg-row { display: flex; gap: 10px; align-items: flex-start; }
.msg-row.is-client { flex-direction: row-reverse; }
.msg-row .avatar { margin-top: 2px; }
.msg-row .msg { align-self: auto; flex: 0 1 auto; min-width: 0; max-width: calc(100% - 52px); }
.msg-row.is-client .msg { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); }

.atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.att { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-size: .88rem; }
.att:hover { text-decoration: none; border-color: var(--primary); }
.att span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.att small { color: var(--muted); }
.att-img { flex-direction: column; align-items: flex-start; padding: 6px; gap: 4px; }
.att-img img { display: block; width: 140px; height: 100px; object-fit: cover; border-radius: 8px; }
.att-img span { max-width: 140px; font-size: .78rem; }

.file-field input[type=file] { padding: 10px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); width: 100%; }
.file-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; color: var(--muted); }
.file-list li { padding: 2px 0; word-break: break-all; }
.file-list .file-error { color: #dc2626; }

.kyc-card { display: flex; align-items: center; gap: 14px; color: var(--text); }
.kyc-card:hover { text-decoration: none; border-color: var(--primary); }
.kyc-ok { color: #16a34a; display: inline-flex; }
.kyc-ok .icon { width: 16px; height: 16px; }
.kyc-state { display: flex; align-items: center; gap: 14px; }
.kyc-state p { margin: 4px 0 0; }
.kyc-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.kyc-file { margin: 0; }
.kyc-file img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; background: var(--surface-2); }
.kyc-file figcaption { margin-top: 6px; font-size: .86rem; color: var(--muted); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-side { order: -1; }
}
@media (max-width: 640px) {
  .msg-row .msg { max-width: calc(100% - 44px); }
  .att span { max-width: 160px; }
  .avatar-xl { width: 76px; height: 76px; }
  .col-order { width: auto; }
}

.opts { border: 0; padding: 0; margin: 0 0 14px; }
.opts legend { font-weight: 600; margin-bottom: 6px; }
.opt-row { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; }
.opt-price { font-style: normal; color: var(--muted); font-size: .9em; }
.order-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; margin-bottom: 8px; border-top: 1px solid var(--border); font-size: 1.1em; }
.cf-list { display: grid; gap: 6px; margin: 0; }
.cf-list div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.cf-list dt { color: var(--muted); }
.cf-list dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pf-image { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.product-hero { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.opt-edit { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.opt-edit > summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.opt-edit[open] > summary { margin-bottom: 12px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; z-index: 5; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
a.tab { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.pf-wrap:has(#tab-options:not([hidden])) #pf-actions, .pf-wrap:has(#tab-fields:not([hidden])) #pf-actions { display: none; }
.pf-wrap:has(#tab-options:not([hidden])) > form.card, .pf-wrap:has(#tab-fields:not([hidden])) > form.card { display: none; }

.bar{width:100%;min-width:90px;height:8px;display:block}.bar-bg{fill:var(--border,#e5e7eb)}.bar-fg{fill:var(--primary,#2563eb)}.bar-cell{width:30%}

ul.plain{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kb-body p{line-height:1.7}

.filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.filter-bar .field{margin:0;min-width:140px;flex:0 1 180px}
.filter-bar .field.grow{flex:1 1 240px}
.filter-actions{align-items:center}
a.sort{color:inherit;text-decoration:none;white-space:nowrap;display:inline-flex;gap:4px;align-items:center}
a.sort:hover,a.sort.active{color:var(--primary,#2563eb)}
a.sort .icon{width:12px;height:12px}
.result-meta{margin:0 0 8px;color:var(--muted,#6b7280);font-size:.9em}
@media(max-width:640px){.filter-bar .field{flex:1 1 100%}}

.text-danger{color:var(--danger,#dc2626)}
.chip small{opacity:.65;margin-left:2px}

.chart{width:100%;height:auto;display:block}.chart .axis{stroke:var(--border,#e5e7eb);stroke-width:1}.chart .axis-label{fill:var(--muted,#6b7280);font-size:11px}
.delta{font-weight:600;margin-left:6px}.delta.up{color:#16a34a}.delta.down{color:var(--danger,#dc2626)}
.stat{display:flex;flex-direction:column;gap:2px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

.help-hero{text-align:center;padding:24px 0 8px}
.help-search{display:flex;gap:8px;max-width:640px;margin:12px auto}.help-hero .help-search{margin:16px auto}
.help-search input{flex:1;min-width:0}
.kb-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
@media(max-width:860px){.kb-layout{grid-template-columns:1fr}}
.kb-body h2,.kb-body h3,.kb-body h4{margin:1.4em 0 .5em}
.kb-body pre{background:rgba(127,127,127,.12);padding:12px;border-radius:8px;overflow:auto}
.kb-body code{background:rgba(127,127,127,.15);padding:1px 5px;border-radius:4px}
.kb-body pre code{background:none;padding:0}
.kb-body blockquote{margin:1em 0;padding:8px 14px;border-left:3px solid var(--primary,#2563eb);background:rgba(127,127,127,.08)}
.kb-body img{max-width:100%}
.kb-toc{background:rgba(127,127,127,.08);padding:12px 16px;border-radius:8px;margin:12px 0}
.kb-toc .l3{padding-left:14px}.kb-toc .l4{padding-left:28px}
.kb-vote{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kb-pn{margin-top:16px;gap:12px}
mark{background:#fde68a;color:inherit;padding:0 2px;border-radius:2px}
.kb-hit h2{margin:0 0 4px}

input[type=date],input[type=datetime-local],input[type=time],input[type=month]{font-family:inherit;color-scheme:light dark}
.i18n .field input:not([type=hidden]){flex:1;min-width:0}
.row.between.wrap:has(> h2:first-child){margin-bottom:16px;align-items:center}

.prose img,.kb-body img{max-width:100%;height:auto;border-radius:8px}.prose table,.kb-body table{border-collapse:collapse;width:100%;margin:1em 0}.prose td,.prose th,.kb-body td,.kb-body th{border:1px solid var(--border);padding:6px 10px}.prose figure,.kb-body figure{margin:1em 0}.prose figcaption,.kb-body figcaption{color:var(--muted);font-size:.9em}
.tox-tinymce{border-radius:10px!important;border-color:var(--border)!important}

.pw-wrap{position:relative}.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:8px;cursor:pointer;color:var(--muted);display:inline-flex;border-radius:8px}
.pw-toggle:hover{color:var(--text);background:var(--surface-2)}
.strength{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}.strength i{height:4px;border-radius:2px;background:var(--border);transition:background .2s}
.strength[data-level="1"] i:nth-child(-n+1){background:#dc2626}.strength[data-level="2"] i:nth-child(-n+2){background:#f59e0b}.strength[data-level="3"] i:nth-child(-n+3){background:#84cc16}.strength[data-level="4"] i{background:#16a34a}
.strength-label{font-size:.8rem;color:var(--muted);margin-top:2px;display:block}
.auth-box{max-width:440px;margin:28px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.auth-box h1{margin:0 0 4px;font-size:1.6rem}.auth-sub{color:var(--muted);margin:0 0 18px}
.auth-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);max-width:1000px;margin:28px auto;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);background:var(--surface)}
.auth-split .auth-box{margin:0;border:0;box-shadow:none;border-radius:0;max-width:none;padding:40px 44px}
.auth-aside{position:relative;padding:44px 36px;color:#fff;background:linear-gradient(145deg,#2563eb 0%,#4f46e5 55%,#7c3aed 100%);display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden}
.auth-aside::before,.auth-aside::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.08)}
.auth-aside::before{width:280px;height:280px;right:-90px;top:-80px}.auth-aside::after{width:200px;height:200px;left:-60px;bottom:-70px}
.auth-aside>*{position:relative;z-index:1}
.auth-aside h2{color:#fff;font-size:1.7rem;line-height:1.25;margin:0 0 8px}.auth-aside p{margin:0;opacity:.85}
.auth-feats{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.auth-feats li{display:flex;gap:12px;align-items:flex-start}
.auth-feats .ic{flex:none;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.auth-feats strong{display:block}.auth-feats small{opacity:.8}
.auth-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);text-align:center;color:var(--muted)}
.auth-box .tabs{margin-bottom:18px}
.auth-box .btn.block{min-height:46px;font-size:1rem}
@media(max-width:820px){.auth-split{grid-template-columns:1fr;margin:12px auto}.auth-aside{padding:22px 22px}.auth-feats{display:none}.auth-split .auth-box{padding:24px 20px}.auth-aside h2{font-size:1.3rem}}
.hero-balance{position:relative;overflow:hidden}
.hero-balance::after{content:"";position:absolute;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08);right:-60px;top:-90px;pointer-events:none}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.quick a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;background:var(--surface);border:1px solid var(--border);border-radius:14px;color:var(--text);text-align:center;font-weight:600;font-size:.9rem;box-shadow:var(--shadow);transition:transform .12s,border-color .12s}
.quick a:hover{text-decoration:none;border-color:var(--primary);transform:translateY(-1px)}
.quick .ic{width:42px;height:42px}
.dash-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr}.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
.due-soon{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);margin-bottom:16px}
.due-soon.warn{border-color:#f59e0b;background:color-mix(in srgb,#f59e0b 8%,var(--surface))}
.due-soon .grow{flex:1;min-width:0}
.days{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;background:var(--surface-2);color:var(--muted)}
.days.soon{background:color-mix(in srgb,#f59e0b 20%,transparent);color:#b45309}.days.late{background:color-mix(in srgb,#dc2626 18%,transparent);color:#b91c1c}
.activity{display:grid}.activity .row-a{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border)}.activity .row-a:last-child{border-bottom:0}
.activity small{color:var(--muted);display:block}
.pos{color:#16a34a}.neg{color:#dc2626}
.page-head{margin-bottom:14px}
.items .item{transition:border-color .12s,transform .12s}.items .item:hover{border-color:var(--primary)}
.auth-card .auth-box{margin:8px 0 0;border:0;box-shadow:none;padding:0;background:none;max-width:none;border-radius:0}
.doc-table td,.doc-table th{vertical-align:top}.doc-code{background:rgba(127,127,127,.12);border-radius:10px;padding:12px 14px;overflow:auto;font-family:var(--mono);font-size:.85rem;margin:8px 0}
.method{display:inline-block;padding:2px 8px;border-radius:6px;font-weight:700;font-size:.75rem;background:#16a34a;color:#fff;margin-right:6px}
.method.post{background:#2563eb}
code.scope{font-size:.75rem;padding:1px 6px;border-radius:6px;background:var(--surface-2,rgba(127,127,127,.15))}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bulk-cell{width:34px;text-align:center}
.bulk-bar{position:sticky;top:8px;z-index:20;margin-bottom:12px}
.bulk-bar .bulk-field{display:inline-flex;gap:8px;align-items:center}
.bulk-bar textarea{min-height:42px}
tr.selected td{background:rgba(37,99,235,.07)}
@media (max-width:760px){.table.responsive .bulk-cell{width:auto;text-align:left}}
.settings-search input { width: 100%; }

.input-suffix{display:flex;align-items:stretch}
.input-suffix input{flex:1;min-width:0;border-top-right-radius:0;border-bottom-right-radius:0}
.input-suffix .suffix{display:flex;align-items:center;padding:0 14px;background:var(--surface-2,var(--bg));border:1px solid var(--border);border-left:0;border-radius:0 var(--radius-sm,8px) var(--radius-sm,8px) 0;font-weight:600;color:var(--muted);white-space:nowrap}
.tabs-row{margin-bottom:12px}
.tabs-row .chip small{opacity:.7;margin-left:4px}
.due{font-size:.8rem;color:var(--muted)}
.due-soon{color:var(--warning,#b7791f)}
.due-late{color:var(--danger,#c53030);font-weight:600}
.neg{color:var(--danger,#c53030)}
.pos{color:var(--success,#2f855a)}
.category-card .product-icon{margin-bottom:6px}

.sidebar{display:flex;flex-direction:column;padding-bottom:0}
.sidebar nav{flex:1;gap:14px;padding-bottom:12px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-heading{padding:6px 12px 4px;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sidebar .nav-link{position:relative;padding:8px 12px;font-size:.92rem}
.sidebar .nav-link .icon{width:18px;height:18px;flex:none}
.sidebar .nav-link span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-badge{min-width:20px;padding:1px 6px;border-radius:999px;background:var(--primary);color:var(--primary-t,#fff);font-size:.7rem;line-height:1.4;text-align:center;font-weight:700}
.nav-search{position:relative;margin:0 4px 12px}
.nav-search .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.nav-search input{width:100%;padding:8px 10px 8px 32px;min-height:36px;font-size:.88rem;border-radius:10px}
.nav-empty{padding:8px 12px}
.side-foot{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;margin:0 -12px;padding:12px;background:var(--surface);border-top:1px solid var(--border)}
.side-foot-info{display:flex;flex-direction:column;min-width:0;flex:1}
.side-foot-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quick-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.cron-state{display:inline-flex;align-items:center;gap:6px;font-size:.82rem}
.cron-state .icon{width:14px;height:14px}
a.stat-link{display:flex;flex-direction:column;color:var(--text);transition:border-color .12s,transform .12s}
a.stat-link:hover{text-decoration:none;border-color:var(--primary);transform:translateY(-1px)}
.attn{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.attn-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-weight:600}
.attn-item:hover{text-decoration:none;border-color:var(--primary)}
.attn-item .icon{width:18px;height:18px;flex:none}
.attn-item span{flex:1;min-width:0}
.attn-item b{padding:1px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}
.attn-warn .icon{color:#d97706}.attn-bad .icon{color:var(--danger,#dc2626)}.attn-info .icon{color:var(--primary)}
.chart-card h3{margin:0 0 8px;font-size:.95rem}
.chart-svg{display:block;width:100%;height:84px;color:var(--primary)}
.chart-svg .cbar{fill:currentColor;opacity:.85}
.chart-svg .cbar:hover{opacity:1}
.chart-svg .cbar-empty{fill:var(--border);opacity:1}
.recent .list li a{display:flex;flex-direction:column;gap:2px;min-width:0;width:100%;color:var(--text)}
.recent .list li a:hover{text-decoration:none}
.recent .list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-stats{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.recent{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.nav-cur{display:none}
@media (max-width:820px){
  .cur-form.desk-only{display:none}
  .nav-cur{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;margin-top:4px;border-top:1px solid var(--border)}
  .nav-cur label{font-weight:600;color:var(--muted);font-size:.9rem}
  .nav-cur select{width:auto;min-width:96px;height:40px}
  .topbar-in{flex-wrap:nowrap;gap:8px}
  .topbar .brand{flex:1;min-width:0}
  .topbar .brand img{max-width:100%;object-fit:contain;object-position:left center}
  .topbar .nav-toggle{margin-left:0;order:2}
  .topbar .tools{margin-left:auto;order:1}
}