/* Сорока Web — общие токены и примитивы (наследуют iOS-редизайн v22) */
:root{--bg:#F3F4F6;--surf:#FFFFFF;--surf2:#EEEFF2;--text:#0A0B0D;--text2:#6C7077;--text3:#A7AAB2;--hair:rgba(0,0,0,.07);--hair2:rgba(0,0,0,.12);--accent:#0A84FF;--accentWeak:rgba(10,132,255,.10);--promo:#FF7A1A;--promoWeak:rgba(255,122,26,.12);--danger:#E2382B;--dangerWeak:rgba(226,56,43,.10);--ok:#21A038;--shadow:0 1px 2px rgba(16,22,40,.06),0 12px 32px rgba(16,22,40,.10);--shadowSoft:0 1px 2px rgba(16,22,40,.05);--glass:rgba(255,255,255,.72)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Golos Text',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px;line-height:1.45;letter-spacing:-.01em;text-wrap:pretty;transition:background .25s,color .25s}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;line-height:1.1;font-weight:800}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--text)}
input,button,select{font:inherit;letter-spacing:inherit}
.mark{width:24px;height:24px;border-radius:8px;background:linear-gradient(150deg,#3AA0FF,#0A5FD6);flex:0 0 auto}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.03em;color:var(--text)}
.card{background:var(--surf);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadowSoft)}
.muted{color:var(--text2)}
.dim{color:var(--text3)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:12px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:600;cursor:pointer;font-size:15px}
.btn:hover{color:#fff;filter:brightness(1.06)}
.btn[disabled]{opacity:.45;cursor:default;filter:none}
.btn.sec{background:transparent;border-color:var(--hair2);color:var(--text)}
.btn.sec:hover{background:var(--surf2);color:var(--text);filter:none}
.btn.quiet{background:transparent;border-color:transparent;color:var(--accent);padding:0 10px}
.btn.quiet:hover{background:var(--surf2);color:var(--accent)}
.btn.danger{background:var(--danger)}
.btn.danger.sec{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn.sm{height:32px;padding:0 12px;font-size:14px;border-radius:10px}
.btn.wide{width:100%}
.icobtn{width:36px;height:36px;border-radius:99px;border:1px solid var(--hair2);background:transparent;color:var(--text);cursor:pointer;display:grid;place-items:center;padding:0}
.icobtn:hover{background:var(--surf2)}
.field{display:block}
.field .lb{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:7px}
.inp{width:100%;height:46px;padding:0 14px;border-radius:13px;border:1px solid var(--hair2);background:var(--surf);color:var(--text);outline:none}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentWeak)}
.inp.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--dangerWeak)}
select.inp{height:34px;border-radius:10px;font-size:14px;padding:0 8px;width:auto}
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:700;background:var(--surf2);color:var(--text2)}
.badge.accent{background:var(--accentWeak);color:var(--accent)}
.badge.promo{background:var(--promoWeak);color:var(--promo)}
.badge.ok{background:rgba(33,160,56,.12);color:var(--ok)}
.badge.warn{background:var(--dangerWeak);color:var(--danger)}
.mono{width:30px;height:30px;border-radius:99px;display:grid;place-items:center;font-weight:800;font-size:13px;flex:0 0 auto}
.row{display:flex;align-items:center;gap:12px}
.between{display:flex;align-items:center;justify-content:space-between;gap:16px}
.stack{display:grid;gap:14px}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);padding:0 12px 10px;white-space:nowrap}
td{padding:12px;border-top:1px solid var(--hair);vertical-align:middle}
tr.expired td{color:var(--text3)}
.tswitch{position:relative;width:46px;height:28px;border-radius:99px;background:var(--surf2);border:1px solid var(--hair2);cursor:pointer;flex:0 0 auto;padding:0}
.tswitch::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:99px;background:var(--surf);box-shadow:var(--shadowSoft);transition:transform .18s}
.tswitch[aria-checked="true"]{background:var(--accent);border-color:transparent}
.tswitch[aria-checked="true"]::after{transform:translateX(18px);background:#fff}
.chk{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text2);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent)}
.skel{background:linear-gradient(90deg,var(--surf2) 25%,var(--hair) 37%,var(--surf2) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px;height:14px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.empty{text-align:center;padding:56px 24px;color:var(--text2)}
.empty h3{font-size:19px;color:var(--text);margin-bottom:8px}
.empty .glyph{width:52px;height:52px;border-radius:16px;background:var(--surf2);margin:0 auto 18px}
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:16px;background:var(--accentWeak);color:var(--text);border:1px solid transparent}
.notice.warn{background:var(--dangerWeak)}
.notice .t{font-weight:700}
.notice p{color:var(--text2);font-size:14px;margin-top:4px}
.tip{position:relative;border-bottom:1px dashed var(--hair2);cursor:help}
.tip:hover::after{content:attr(data-tip);position:absolute;left:0;bottom:130%;width:230px;padding:10px 12px;border-radius:12px;background:var(--text);color:var(--bg);font-size:12px;line-height:1.35;font-weight:500;z-index:30;box-shadow:var(--shadow)}