/* cs2biz admin — design tokens follow .claude/skills/landing-page-design (Manrope, fixed scales, flat dark surfaces) */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #181818; --surface: #1F1F1F; --raised: #272727; --hover: #2C2C2C; --border: #313131; --border-strong: #3D3D3D;
  --fg: #F2F2F2; --muted: #9B9B9B; --faint: #6E6E6E;
  --pos: #43C47A; --pos-bg: rgba(67,196,122,.12); --neg: #E5484D; --neg-bg: rgba(229,72,77,.12);
  --warn: #E8A33D; --warn-bg: rgba(232,163,61,.14); --info: #5B9CF6; --info-bg: rgba(91,156,246,.14);
  --s-25: 2px; --s-50: 4px; --s-75: 8px; --s-100: 12px; --s-200: 16px; --s-300: 24px; --s-400: 32px; --s-500: 40px; --s-600: 48px; --s-700: 64px;
  --r-sm: 6px; --r: 8px; --r-lg: 12px; --r-xl: 16px;
  --ease: cubic-bezier(.22,1,.36,1); --t-fast: 300ms; --t: 500ms;
  --nav-h: 56px; --maxw: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; font-family: "Manrope", system-ui, sans-serif; font-size: 14px; line-height: 20px; color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: 30px; line-height: 36px; letter-spacing: -.01em; }
h2 { font-size: 20px; line-height: 28px; }
h3 { font-size: 16px; line-height: 24px; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.muted { color: var(--muted); } .faint { color: var(--faint); } .pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); } .info { color: var(--info); }
.xs { font-size: 12px; line-height: 16px; } .sm { font-size: 14px; line-height: 20px; } .lg { font-size: 18px; line-height: 28px; } .xl { font-size: 20px; line-height: 28px; }
.num { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: -9999px; top: 0; padding: var(--s-75) var(--s-100); background: var(--raised); border-radius: var(--r); z-index: 100; }
.skip:focus { left: var(--s-200); top: var(--s-200); }
:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; border-radius: var(--r-sm); }

/* --------------------------------------------------------------- icons */
.ic { width: 16px; height: 16px; flex: none; vertical-align: -3px; fill: currentColor; color: inherit; }
.ic.lg { width: 20px; height: 20px; }
.ic.xl { width: 24px; height: 24px; }

/* --------------------------------------------------------------- nav */
.nav-wrap { position: sticky; top: var(--s-100); z-index: 50; display: flex; justify-content: center; padding: 0 var(--s-200); pointer-events: none; }
.nav-wrap .nav { width: 100%; max-width: var(--maxw); }
.nav { pointer-events: auto; display: flex; align-items: center; gap: var(--s-50); height: var(--nav-h); padding: 0 var(--s-100) 0 var(--s-200);
  margin-top: var(--s-100);
  background: rgba(31,31,31,.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--border); border-radius: var(--r-xl); max-width: 100%; }
.brand { display: flex; align-items: center; gap: var(--s-75); padding-right: var(--s-200); margin-right: var(--s-50); border-right: 1px solid var(--border); font-weight: 700; font-size: 16px; }
.brand .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 4px var(--pos-bg); }
.brand .dot.paused { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.brand .dot.estop { background: var(--neg); box-shadow: 0 0 0 4px var(--neg-bg); }
.nav-links { display: flex; align-items: center; gap: var(--s-25); flex: 1; }
.nav a.link { display: inline-flex; align-items: center; gap: var(--s-50); padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); color: var(--muted); font-weight: 600; font-size: 14px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.nav a.link:hover { color: var(--fg); background: var(--hover); }
.nav a.link:active { transform: scale(.98); }
.nav a.link[aria-current="page"] { color: var(--fg); background: var(--raised); }
.nav .count { min-width: 20px; height: 20px; padding: 0 var(--s-50); border-radius: 10px; background: var(--info); color: #fff; font-size: 12px; line-height: 20px; text-align: center; font-weight: 700; }
.nav .count.hot { background: var(--warn); color: #181818; }
.nav-right { display: flex; align-items: center; gap: var(--s-75); margin-left: auto; padding-left: var(--s-100); border-left: 1px solid var(--border); }
.mode-pill { display: inline-flex; align-items: center; gap: var(--s-50); padding: var(--s-25) var(--s-75); border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .04em; }
.mode-pill.info { background: var(--info-bg); color: var(--info); } .mode-pill.warn { background: var(--warn-bg); color: var(--warn); } .mode-pill.danger { background: var(--neg-bg); color: var(--neg); }
.burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; border-radius: var(--r-lg); cursor: pointer; position: relative; }
.burger span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease); }
.burger span:nth-child(1) { top: 14px; } .burger span:nth-child(2) { top: 19px; } .burger span:nth-child(3) { top: 24px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu-panel { display: none; }
@media (max-width: 900px) {
  .nav-links, .nav-right .hide-m { display: none; }
  .nav { padding-right: var(--s-50); }
  .brand { border-right: 0; margin-right: 0; padding-right: var(--s-100); }
  .nav-right { border-left: 0; margin-left: 0; padding-left: 0; }
  .burger { display: block; }
  .menu-panel { display: block; position: fixed; inset: 0; z-index: 40; padding: calc(var(--nav-h) + var(--s-400)) var(--s-300) var(--s-300);
    background: rgba(24,24,24,.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); }
  body.menu-open .menu-panel { opacity: 1; pointer-events: auto; }
  .menu-panel a { display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); font-size: 20px; line-height: 28px; font-weight: 600;
    opacity: 0; transform: translateY(24px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
  body.menu-open .menu-panel a { opacity: 1; transform: none; }
  .menu-panel a[aria-current="page"] { background: var(--raised); }
}

/* --------------------------------------------------------------- layout */
main { max-width: var(--maxw); margin: 0 auto; padding: var(--s-400) var(--s-200) var(--s-700); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-200); margin-bottom: var(--s-300); flex-wrap: wrap; }
.page-head .sub { color: var(--muted); max-width: 680px; margin-top: var(--s-50); }
.grid { display: grid; gap: var(--s-200); }
.grid.kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } .grid.main-side { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 900px) { .grid.two, .grid.three, .grid.main-side { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: var(--s-200); }
.row { display: flex; align-items: center; gap: var(--s-75); flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.mt { margin-top: var(--s-300); } .mt-sm { margin-top: var(--s-200); } .mb { margin-bottom: var(--s-200); }
section + section { margin-top: var(--s-400); }
main > .grid.kpi { margin-bottom: var(--s-300); }
main > .grid + section, main > .notice + .grid, main > .card + section { margin-top: var(--s-300); }

/* --------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-300); }
.card.tight { padding: var(--s-200); }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-head { padding: var(--s-200) var(--s-300); border-bottom: 1px solid var(--border); }
.card.flush > .card-body { padding: var(--s-300); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); margin-bottom: var(--s-200); }
.card-head h2, .card-head h3 { display: flex; align-items: center; gap: var(--s-75); }
.card-head .hint { color: var(--muted); font-size: 12px; line-height: 16px; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s-200) var(--s-300); }
.kpi-card .label { color: var(--muted); font-size: 12px; line-height: 16px; display: flex; align-items: center; gap: var(--s-50); }
.kpi-card .value { font-size: 24px; line-height: 32px; font-weight: 700; margin-top: var(--s-50); font-variant-numeric: tabular-nums; }
.kpi-card .delta { font-size: 12px; line-height: 16px; color: var(--muted); margin-top: var(--s-25); }
.pill { display: inline-flex; align-items: center; gap: var(--s-50); padding: var(--s-25) var(--s-75); border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.pill.pos { background: var(--pos-bg); color: var(--pos); } .pill.neg { background: var(--neg-bg); color: var(--neg); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.info { background: var(--info-bg); color: var(--info); }
.pill.active, .pill.filled, .pill.sold, .pill.success, .pill.done { background: var(--pos-bg); color: var(--pos); }
.pill.cancelled, .pill.failed, .pill.error, .pill.reverted { background: var(--neg-bg); color: var(--neg); }
.pill.pending, .pill.unknown, .pill.unconfirmed, .pill.sold_unconfirmed, .pill.proposed, .pill.expired { background: var(--warn-bg); color: var(--warn); }
.pill.held, .pill.listed, .pill.new, .pill.confirmed { background: var(--info-bg); color: var(--info); }
.help { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; color: var(--faint); cursor: help; position: relative; }
.help:hover { color: var(--muted); }
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); width: max-content; max-width: 280px; padding: var(--s-75) var(--s-100);
  background: #000; border: 1px solid var(--border-strong); border-radius: var(--r); color: var(--fg); font-size: 12px; line-height: 16px; font-weight: 500; white-space: normal; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index: 60; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------- buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-50); padding: var(--s-75) var(--s-100); border-radius: var(--r-lg); border: 1px solid var(--border-strong); background: var(--raised); color: var(--fg);
  font-weight: 600; font-size: 14px; line-height: 20px; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.btn:hover { background: var(--hover); border-color: #4A4A4A; color: #fff; }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--fg); color: #181818; border-color: var(--fg); font-size: 16px; line-height: 24px; }
.btn.primary:hover { background: #fff; }
.btn.danger { background: var(--neg-bg); border-color: rgba(229,72,77,.4); color: var(--neg); }
.btn.danger:hover { background: rgba(229,72,77,.22); }
.btn.warn { background: var(--warn-bg); border-color: rgba(232,163,61,.4); color: var(--warn); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--hover); color: var(--fg); }
.btn.sm { padding: var(--s-50) var(--s-75); font-size: 12px; line-height: 16px; border-radius: var(--r); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.btn.confirming { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.input, select.input { width: 100%; padding: var(--s-75) var(--s-100); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-lg); color: var(--fg); transition: border-color var(--t-fast) var(--ease); }
.input:focus { outline: none; border-color: var(--info); }
.input.sm { padding: var(--s-50) var(--s-75); font-size: 12px; line-height: 16px; border-radius: var(--r); }
.input.w-100 { width: 100px; } .input.w-140 { width: 140px; }
.field { display: grid; grid-template-columns: minmax(220px, 300px) minmax(160px, 260px) 1fr; gap: var(--s-200); align-items: center; padding: var(--s-100) 0; border-top: 1px solid var(--border); }
.field:first-of-type { border-top: 0; }
.field .k { font-weight: 600; } .field .k code { display: block; color: var(--faint); margin-top: var(--s-25); }
.field .h { color: var(--muted); font-size: 12px; line-height: 16px; }
.field .unit { display: flex; align-items: center; gap: var(--s-75); }
@media (max-width: 900px) { .field { grid-template-columns: 1fr; gap: var(--s-50); } }
.switch { position: relative; width: 40px; height: 22px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; background: var(--border-strong); border-radius: 11px; transition: background var(--t-fast) var(--ease); }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: transform var(--t-fast) var(--ease); }
.switch input:checked + i { background: var(--pos); } .switch input:checked + i::after { transform: translateX(18px); }
.switch input:focus-visible + i { outline: 2px solid var(--info); outline-offset: 2px; }
form.inline { display: inline-flex; gap: var(--s-50); align-items: center; }

/* --------------------------------------------------------------- flash / notice */
.flash { display: flex; align-items: center; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); margin-bottom: var(--s-300); border: 1px solid; font-weight: 500;
  animation: rise var(--t) var(--ease) both; }
.flash.ok { background: var(--pos-bg); border-color: rgba(67,196,122,.35); color: var(--pos); }
.flash.err { background: var(--neg-bg); border-color: rgba(229,72,77,.35); color: var(--neg); }
.notice { display: flex; gap: var(--s-100); padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--raised); color: var(--muted); }
.notice.warn { border-color: rgba(232,163,61,.35); background: var(--warn-bg); color: var(--warn); }
.notice.neg { border-color: rgba(229,72,77,.35); background: var(--neg-bg); color: var(--neg); }
.notice.info { border-color: rgba(91,156,246,.35); background: var(--info-bg); color: var(--info); }
.notice .ic { margin-top: 2px; }

/* --------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; line-height: 16px; padding: var(--s-100) var(--s-200); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: var(--s-100) var(--s-200); border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover { background: var(--hover); }
th.r, td.r { text-align: right; font-variant-numeric: tabular-nums; }
.item-cell { display: flex; align-items: center; gap: var(--s-100); min-width: 240px; }
.item-cell .name { font-weight: 600; } .item-cell .meta { color: var(--muted); font-size: 12px; line-height: 16px; display: flex; gap: var(--s-75); align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .card-head { flex-wrap: wrap; align-items: flex-start; }
  .card-head h2 { font-size: 18px; line-height: 28px; }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards thead { display: none; }
  table.cards tr { padding: var(--s-200); border-bottom: 1px solid var(--border); }
  table.cards td { padding: var(--s-25) 0; border: 0; display: flex; justify-content: space-between; gap: var(--s-200); text-align: right; }
  table.cards td.r { text-align: right; }
  table.cards td::before { content: attr(data-l); color: var(--muted); font-size: 12px; line-height: 20px; text-align: left; flex: none; }
  table.cards td.item-td { display: block; text-align: left; margin-bottom: var(--s-75); } table.cards td.item-td::before { display: none; }
  table.cards td.actions { justify-content: flex-start; margin-top: var(--s-75); } table.cards td.actions::before { display: none; }
}

/* --------------------------------------------------------------- thumbs & wear */
.thumb { position: relative; width: 56px; height: 42px; flex: none; border-radius: var(--r); background: var(--raised); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.thumb.lg { width: 96px; height: 72px; border-radius: var(--r-lg); }
.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.thumb .rar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.thumb .ph { color: var(--faint); }
.wear { width: 100%; }
.wear .bar { position: relative; height: 6px; border-radius: 3px; overflow: hidden; display: flex; background: var(--border); }
.wear .z { height: 100%; opacity: .22; }
.wear .z.FN { background: #43C47A; } .wear .z.MW { background: #9BD36B; } .wear .z.FT { background: #E8A33D; } .wear .z.WW { background: #E5784D; } .wear .z.BS { background: #E5484D; }
.wear .z.on { opacity: 1; }
.wear .mark { position: absolute; top: -3px; width: 2px; height: 12px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px #000; transform: translateX(-1px); }
.wear .lbl { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; line-height: 16px; margin-top: var(--s-25); }
.wear-pill { display: inline-flex; align-items: center; gap: var(--s-50); color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.wear-pill b { color: var(--fg); }
.wear-pill .wear { width: 72px; }
.rarity { font-size: 12px; line-height: 16px; font-weight: 600; }
.wear.sm .bar { height: 4px; } .wear.sm .mark { top: -2px; height: 8px; }

/* --------------------------------------------------------------- progress / allocation / charts */
.progress { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--info); border-radius: 4px; transition: transform var(--t) var(--ease); transform-origin: left; }
.progress.striped > i { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 8px, transparent 8px 16px); animation: slide 1.2s linear infinite; }
@keyframes slide { from { background-position: 0 0; } to { background-position: 32px 0; } }
.alloc { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--border); }
.alloc > i { display: block; height: 100%; transition: transform var(--t) var(--ease); }
.alloc .free { background: #3D3D3D; } .alloc .targets { background: var(--info); } .alloc .inventory { background: var(--warn); } .alloc .locked { background: var(--neg); }
.legend { display: flex; gap: var(--s-200); flex-wrap: wrap; margin-top: var(--s-100); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-50); color: var(--muted); font-size: 12px; line-height: 16px; }
.legend b { color: var(--fg); font-weight: 600; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend i.free { background: #3D3D3D; } .legend i.targets { background: var(--info); } .legend i.inventory { background: var(--warn); } .legend i.locked { background: var(--neg); }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .grid-txt { fill: var(--faint); font-size: 10px; }
.chart .area { fill: var(--pos); opacity: .12; } .chart .area.neg { fill: var(--neg); }
.chart .line { fill: none; stroke: var(--pos); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .chart .line.neg { stroke: var(--neg); }
.chart .zero { stroke: var(--border-strong); stroke-dasharray: 3 3; }
.chart .pt { fill: var(--surface); stroke: var(--pos); stroke-width: 2; } .chart .pt:hover { r: 5; }
.chart .line.cap { stroke: var(--info); } .chart .area.cap { fill: var(--info); }
.funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-50); }
.funnel .step { padding: var(--s-100); background: var(--raised); border-radius: var(--r); }
.funnel .step b { display: block; font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
.funnel .step span { color: var(--muted); font-size: 12px; line-height: 16px; }
.funnel .step.last { background: var(--pos-bg); } .funnel .step.last b { color: var(--pos); }
@media (max-width: 760px) { .funnel { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- mode cards & control */
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-100); }
@media (max-width: 900px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card { position: relative; padding: var(--s-200); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--raised); cursor: pointer; transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.mode-card:hover { border-color: var(--border-strong); }
.mode-card:active { transform: scale(.99); }
.mode-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-card.on { border-color: var(--fg); }
.mode-card .t { font-weight: 700; display: flex; align-items: center; gap: var(--s-75); }
.mode-card .d { color: var(--muted); font-size: 12px; line-height: 16px; margin-top: var(--s-50); }
.mode-card.on .cur { position: absolute; top: var(--s-100); right: var(--s-100); }
.control-list { display: grid; gap: var(--s-75); }
.control-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-200); padding: var(--s-100) var(--s-200); border-radius: var(--r-lg); background: var(--raised); }
.control-item .d { color: var(--muted); font-size: 12px; line-height: 16px; }
.control-item .n { font-weight: 600; }

/* --------------------------------------------------------------- empty / skeleton / events */
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-75); padding: var(--s-300); border-radius: var(--r-lg); background: var(--raised); color: var(--muted); }
.empty .ic { color: var(--faint); }
.empty b { color: var(--fg); font-size: 16px; line-height: 24px; }
.empty p { max-width: 560px; }
.skeleton { background: linear-gradient(90deg, var(--raised) 25%, var(--hover) 37%, var(--raised) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.event { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-100); padding: var(--s-75) 0; border-top: 1px solid var(--border); }
.event:first-child { border-top: 0; }
.event time { color: var(--faint); font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.event .k { color: var(--muted); font-size: 12px; line-height: 16px; }
.event.warn .k { color: var(--warn); } .event.error .k { color: var(--neg); }
.tabs { display: flex; gap: var(--s-25); border-bottom: 1px solid var(--border); margin-bottom: var(--s-200); overflow-x: auto; }
.tabs a { padding: var(--s-75) var(--s-200); color: var(--muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.tabs a:hover { color: var(--fg); } .tabs a.on { color: var(--fg); border-color: var(--fg); }
.tab-panel { display: none; } .tab-panel.on { display: block; }
.card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-200); align-items: stretch; }
.opp { padding: var(--s-200); border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); display: grid; grid-template-rows: 96px 44px auto auto; gap: var(--s-100); transition: border-color var(--t-fast) var(--ease); }
.opp:hover { border-color: var(--border-strong); }
.opp .top { display: flex; gap: var(--s-100); align-items: flex-start; min-width: 0; }
.opp .top .head { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--s-50); }
.opp .top .name { font-weight: 700; font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.opp .slot-wear { display: flex; align-items: center; }
.opp .wear-none { color: var(--faint); font-size: 12px; line-height: 16px; }
.opp .prices { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-75); }
.opp .prices div { background: var(--raised); border-radius: var(--r); padding: var(--s-75) var(--s-100); min-width: 0; }
.opp .prices span { display: block; color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.opp .prices b { display: block; font-size: 18px; line-height: 28px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opp .facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-25) var(--s-100); }
.opp .facts > div { display: flex; justify-content: space-between; gap: var(--s-75); font-size: 12px; line-height: 20px; border-top: 1px solid var(--border); }
.opp .facts dt { color: var(--muted); white-space: nowrap; } .opp .facts dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opp .facts > div:nth-child(-n+2) { border-top: 0; }
.rank { width: 24px; height: 24px; border-radius: 50%; background: var(--raised); color: var(--muted); font-size: 12px; line-height: 24px; text-align: center; font-weight: 700; flex: none; }
.login-wrap { min-height: calc(100vh - var(--s-700)); display: grid; place-items: center; padding: var(--s-300); }
.login { width: 100%; max-width: 400px; }
.login h1 { font-size: 36px; line-height: 40px; background: linear-gradient(90deg, #FFFFFF, #9B9B9B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login .f { display: grid; gap: var(--s-50); }
.login label { color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; }
footer { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-200) var(--s-400); color: var(--faint); font-size: 12px; line-height: 16px; display: flex; gap: var(--s-200); flex-wrap: wrap; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise-soft { from { transform: translateY(12px); } to { transform: none; } }
/* data pages never hide content behind a fade: only a short settle on first view */
.reveal { animation: rise-soft var(--t) var(--ease) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* dashboard: items on sale with the trade cycle steps */
.sell-row { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: var(--s-200); padding: var(--s-100) 0; border-top: 1px solid var(--border); align-items: center; }
.sell-row:first-child { border-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-75); }
.steps li { position: relative; padding: var(--s-75) var(--s-100); border-radius: var(--r); background: var(--raised); font-size: 12px; line-height: 16px; }
.steps li b { display: block; color: var(--muted); font-weight: 600; }
.steps li span { color: var(--fg); }
.steps li.done { border: 1px solid rgba(67,196,122,.35); } .steps li.done b { color: var(--pos); }
.steps li.cur { border: 1px solid rgba(91,156,246,.45); } .steps li.cur b { color: var(--info); }
.steps li.wait { border: 1px solid rgba(232,163,61,.4); } .steps li.wait b { color: var(--warn); }
.save-bar { margin: var(--s-300) 0 var(--s-400); }
@media (max-width: 900px) { .sell-row { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } }