/* kicker.markets v2 · toy register: pale sky / pale mint ground, white product cards, one glossy object per screen.
   tones sampled from brand/mj and brand/avatars-v3 (see DESIGN-v2.md) */
@import url(fonts/fonts.css);

:root{
  --sky:#D3E0FC;        /* coupon-cloud-5fdf-1 top edge */
  --sky-deep:#B3D3F2;   /* coupon-cloud-5fdf-1 bottom edge */
  --sky-pale:#ECF8FF;   /* sky-8cfe-2 lower corners */
  --mint:#DDF3E3;       /* avatars-v3 coin-mint / toy-v3 ground */
  --mint-deep:#C4E3DD;  /* stack-2ca6-1 ground */
  --white:#FFFFFF;
  --ink:#26271F;
  --ink-2:#5B5D52;      /* secondary text on white */
  --ink-3:#66685C;      /* placeholders */
  --ink-gold:#6B5320;   /* secondary text on gold-pale surfaces */
  --line:rgba(38,39,31,.12);
  --line-2:rgba(38,39,31,.22);
  --gold:#D9A227;       /* coin-e700-1 face */
  --gold-deep:#B8801A;  /* coin rim, letter sides */
  --gold-pale:#FBEFC9;  /* paid chip ground */
  --up:#2F8A55;         /* "up" inside data rows only */
  --slab:'Hepta Slab',Georgia,serif;
  --sans:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:24px; --r2:16px; --rb:14px;
  --shadow:0 18px 40px -18px rgba(38,39,31,.22),0 1px 0 rgba(38,39,31,.04);
  --shadow-2:0 10px 22px -12px rgba(38,39,31,.18);
  --gut:24px; --max:1200px;
  --dots:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Ccircle cx='7' cy='7' r='1.1' fill='%2326271F' fill-opacity='.09'/%3E%3C/svg%3E"); /* pump's dot grid, quieter */
}
*{box-sizing:border-box}
html{background:var(--ground,var(--sky));scrollbar-color:var(--ink) transparent}
body{margin:0;overflow-x:hidden;background:var(--ground,var(--sky));color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--dots) 0 0/14px 14px}
body>*{position:relative;z-index:1}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
b,strong{font-weight:700}
h1,h2,h3{margin:0;font-family:var(--slab);font-weight:900;letter-spacing:-.025em;line-height:1;text-wrap:balance}
p{margin:0}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.paid{display:inline-block;background:var(--gold-pale);color:var(--ink);border-radius:999px;padding:2px 10px;font-family:var(--mono);font-weight:600;font-size:.94em;white-space:nowrap}
.gold{color:var(--gold-deep)}
.up{color:var(--up)}
.muted{color:var(--ink-2)}
.tiny{font-size:13px;color:var(--ink-2)}

/* header */
.top{display:flex;align-items:center;gap:28px;height:72px}
.wm{display:inline-flex;align-items:baseline;gap:2px;font-family:var(--slab);font-weight:900;font-size:30px;letter-spacing:-.03em;line-height:1}
.wm i{font-family:var(--sans);font-style:normal;font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink-2);margin-left:2px}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 14px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ink-2)}
.nav a:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.nav a[aria-current]{background:var(--white);color:var(--ink);box-shadow:var(--shadow-2)}
.top .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 14px;background:var(--white);font-family:var(--mono);font-size:13px;font-weight:500;box-shadow:var(--shadow-2);white-space:nowrap}
.chip u{text-decoration:none;font-family:var(--sans);font-weight:600}
.chip em{font-style:normal}
.chip.off{background:transparent;box-shadow:none;border:1.5px solid var(--line-2);color:var(--ink-2)}
.chip:hover u{text-decoration:underline;text-underline-offset:3px}
a.chip{color:var(--ink);text-decoration:none}
a.chip.x svg{display:block}
a.chip:hover{text-decoration:underline;text-underline-offset:3px}

/* buttons: ink asks, gold pays */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:14px 22px;font-weight:600;font-size:16px;line-height:1;background:var(--ink);color:var(--white);white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 8px 18px -10px rgba(38,39,31,.5)}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 24px -12px rgba(38,39,31,.55)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 18px -10px rgba(184,128,26,.7)}
.btn.white{background:var(--white);color:var(--ink);box-shadow:var(--shadow-2)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--line-2)}
.btn[disabled],.btn.off{background:rgba(38,39,31,.08);color:var(--ink-2);box-shadow:none;cursor:default;transform:none}
.btn.big{padding:18px 28px;font-size:18px}

/* white product cards */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.card.tight{padding:18px 20px}

/* the object window: a render sits in a rounded window, page keeps its own ground */
.win{position:relative;overflow:hidden;border-radius:var(--r2);background:var(--sky-deep)}
.win img{display:block;width:100%;height:100%;object-fit:cover}

/* stage badges */
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:4px 10px 4px 8px;font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--mint);color:var(--ink);white-space:nowrap;line-height:1.3}
.badge.pool{background:var(--sky)}
.badge.curve{background:var(--gold-pale)}
.badge.warn{background:#FFE4D6}
.badge .pg{width:44px;height:6px;border-radius:999px;background:rgba(38,39,31,.14);overflow:hidden}
.badge .pg i{display:block;height:100%;background:var(--ink);border-radius:999px}

/* mix bar: core is gold, sleeve legs are ink tints */
.mix{display:flex;height:14px;border-radius:999px;overflow:hidden;background:rgba(38,39,31,.08)}
.mix i{display:block;height:100%}
.mix .c{background:var(--gold)}
.mix .s{background:var(--ink)}
.mix .s+.s{background:#5B5D52}
.mix .s+.s+.s{background:#8B8D80}

/* section heads: the heading carries its weight, no eyebrow */
.h{font-size:34px;margin-bottom:14px}
.h small{display:block;font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:0;color:var(--ink-2);margin-top:8px;line-height:1.4}
section{margin-top:56px}

/* tables and ledgers */
table{width:100%;border-collapse:collapse;font-size:15px}
th{text-align:left;font-weight:600;font-size:13px;color:var(--ink-2);padding:0 0 10px;border-bottom:1.5px solid var(--line-2);white-space:nowrap}
td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td+td,th+th{padding-left:14px}
td.r,th.r{text-align:right;padding-left:18px}
td .sub,th .sub{display:block;font-size:13px;color:var(--ink-2);font-weight:400;margin-top:2px}
td.num,td .num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}

/* empty states: blunt, one line, live share */
.empty{display:flex;align-items:center;gap:20px;font-size:17px;line-height:1.4;color:var(--ink)}
.empty .win{flex:none;width:132px;height:132px}
.empty .win img{object-position:center 30%}
.empty b{font-family:var(--mono);font-weight:600}

/* footer */
.foot{margin-top:72px;padding:28px 0 40px;border-top:1.5px solid var(--line-2);display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13px;color:var(--ink-2)}
.foot .mono{font-family:var(--mono)}

/* phone: 390 is a real layout, bottom row nav */
.bottom{display:none}
@media (max-width:640px){
  :root{--gut:16px;--r:20px;--r2:14px}
  .top{height:60px;gap:12px}
  .wm{font-size:26px}
  .wm i{display:none}   /* «.markets» не влезает рядом с чипом CA, X и connect на 390 */
  .nav{display:none}
  .chip{padding:8px 12px;font-size:12px}
  .chip.off{display:none}
  .h{font-size:28px}
  section{margin-top:40px}
  body{padding-bottom:78px}
  .bottom{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--white);border-top:1.5px solid var(--line);box-shadow:0 -10px 30px -18px rgba(38,39,31,.3)}
  .bottom a{flex:1;text-align:center;padding:14px 0 16px;font-weight:600;font-size:13px;color:var(--ink-2)}
  .bottom a[aria-current]{color:var(--ink);position:relative}
  .bottom a[aria-current]::after{content:"";position:absolute;left:50%;bottom:8px;width:18px;height:3px;border-radius:2px;background:var(--gold);transform:translateX(-50%)}
  .empty{flex-direction:column;align-items:flex-start;gap:14px}
  .foot{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- production additions: connect, toasts, inputs, ledgers ---- */
.top .r .btn{padding:10px 16px;font-size:14px}
.top .r .btn.acct{font-family:var(--mono);font-weight:500}
.chip.cp{cursor:pointer}
.chip.ok u{color:var(--up)}
.totop{position:fixed;left:20px;bottom:20px;z-index:19;display:inline-flex;align-items:center;gap:7px;padding:10px 14px 10px 12px;border:0;border-radius:999px;background:var(--white);color:var(--ink);font:600 13px/1 var(--sans);box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,background .15s}
.totop:hover{background:var(--sky-pale);transform:translateY(-1px)}
.totop[hidden]{display:none}
@media (max-width:640px){.totop{display:none}}   /* на телефоне перекрывала кнопки в карточках; тап по статус-бару и так везёт наверх */
.toasts{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 32px))}
.toast{background:var(--white);border-radius:var(--r2);box-shadow:var(--shadow);padding:14px 16px;font-size:14px;line-height:1.4;display:flex;gap:12px;align-items:flex-start}
.toast i{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:var(--gold);box-shadow:0 0 0 3px rgba(217,162,39,.25)}
.toast.ok i{background:var(--up);box-shadow:0 0 0 3px rgba(47,138,85,.2)}
.toast.bad i{background:#C4462B;box-shadow:0 0 0 3px rgba(196,70,43,.2)}
.toast.pending i{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.toast a{text-decoration:underline;text-underline-offset:3px;font-family:var(--mono);font-size:13px}
.toast .x{margin-left:auto;color:var(--ink-2);font-weight:600;flex:none}
input,select{font:inherit;color:inherit}
input[type=text],input[type=number]{background:transparent;border:0;outline:0;min-width:0;width:100%}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input::placeholder{color:var(--ink-3);font-family:var(--mono);font-weight:500}
input[type=range]{width:100%;accent-color:var(--gold);margin:12px 0 0}
.txl{font-family:var(--mono);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.txl:hover{text-decoration-color:var(--ink)}
.foot a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.foot a:hover{text-decoration-color:var(--ink)}
.txl:hover{text-decoration:underline;text-underline-offset:3px}
.paid.zero{background:rgba(38,39,31,.06);color:var(--ink-2)}
.warnline{margin-top:14px;padding:12px 14px;border-radius:var(--r2);background:#FFF1EA;font-size:14px;line-height:1.45}
.warnline b{font-family:var(--mono);font-weight:600}
.err{color:#C4462B}
[hidden]{display:none!important}
/* второстепенные контролы: hover и нажатие */
.sortbar button:not(.on):hover,.tabs button:not([aria-selected=true]):hover,.toggle button:not([aria-pressed=true]):hover,.legrows .mode .seg button:not([aria-pressed=true]):not(:disabled):hover{background:rgba(38,39,31,.06);color:var(--ink)}
.sortbar button:active,.tabs button:active,.toggle button:active,.btn:active{transform:scale(.98)}
.bottom a:hover{color:var(--ink)}
input[type=search]{-webkit-appearance:none;appearance:none;outline:0}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
.sortbar .q:focus-within input{box-shadow:0 0 0 3px var(--gold),var(--shadow-2)}
.core[aria-pressed=true]:focus-visible{outline-offset:6px}
.skel p{position:relative;margin:0}
.sortbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.sortbar button,.sortbar .all,.sortbar .q input{font-family:var(--mono);font-size:13px;font-weight:500;padding:8px 13px;border-radius:999px;background:var(--white);color:var(--ink-2);box-shadow:var(--shadow-2);border:0;line-height:1.3;text-decoration:none}
.sortbar button.on{background:var(--ink);color:var(--white)}
.sortbar .all{margin-left:auto;color:var(--ink)}
.sortbar .q{flex:1 1 200px;max-width:320px;display:flex}
.sortbar .q input{width:100%;color:var(--ink)}
.sortbar .q input::placeholder{color:var(--ink-3)}
@media (max-width:640px){.m-hide{display:none}.sortbar .all{margin-left:0}}
.m-only{display:none}
@media (max-width:640px){.m-only{display:inline}}

/* лоадер: скелет в регистре страницы - мягкий пульс sky-pale, место зарезервировано, текст «reading the chain» остаётся */
.skel{position:relative;min-height:120px;color:var(--ink-2)}
.skel::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent 0%,var(--sky-pale) 50%,transparent 100%);background-size:200% 100%;animation:skel 1.6s ease-in-out infinite;opacity:.9;pointer-events:none}
.skel>p{position:relative;margin:0}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel::before{animation:none}}
.tables.skel{min-height:200px}
@media (max-width:1700px){
  .top .r a.chip.x span{display:none}
  .top .r a.chip.x{padding:9px 11px}
}
@media (max-width:1560px){
  .top .r [data-factory]{display:none}
}
@media (max-width:1180px){
  .top .r [data-kicker-ca].off{display:none}   /* заглушка «at launch» прячется, живой чип с CA остаётся на любой ширине */
}
@media (max-width:640px){
  .top .r [data-factory]{display:none}
  .top .r [data-kicker-ca] u{display:none}
  .toasts{right:12px;left:12px;bottom:84px;max-width:none}
  .top .r{gap:6px}
  .top .r .btn{padding:8px 12px;font-size:13px}
  .top .r .chip em,.top .r .chip u{display:none}
  .top .r .chip{padding:8px 10px}
  .top{gap:10px}
}
/* phone harness for headless renders (500px floor): ?phone renders a 390px stage */
html.phone body{width:390px;overflow:hidden}
html.phone .bottom{position:absolute;width:390px;left:0;right:auto;bottom:0}
html.phone.fold body{height:844px;min-height:0;overflow:hidden;padding-bottom:0}

.panel .note a,.what a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.panel .note a:hover,.what a:hover{text-decoration-color:var(--ink)}