/* Сделки Локанты — «Яркая игра» на брендбуке Локанты (цвета, знаки, логотипы, Segoe UI).
 * Раскладка: тёмная игровая шапка с очками; трасса из девяти шагов как поле настольной игры;
 * под ней карточки семей с цветом сценария; карточка семьи выезжает справа.
 * Цвет сценария — главный носитель смысла: Домус янтарь, Новус зелень, Торус синий, Модус малина. */
:root{
  --space-3xs:2px; --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px; --space-xl:40px; --space-2xl:64px;
  --text-xs:.75rem; --text-sm:.875rem; --text-md:1rem; --text-lg:1.2rem; --text-xl:1.44rem; --text-2xl:1.728rem; --text-3xl:2.074rem; --text-4xl:2.8rem;
  --dur-micro:120ms; --dur-short:220ms; --ease-out:cubic-bezier(.16,1,.3,1); --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --radius:16px; --radius-sm:10px; --radius-pill:999px;

  --color-paper:#fff7ec; --color-paper-2:#ffeeda; --color-card:#ffffff; --color-ink:#1f1a33; --color-ink-2:#3b3454; --color-muted:#665f78; --color-faint:#8d86a0;
  --color-rule:#f0e3d3; --color-rule-strong:#e2cfb8; --color-scrim:#1f1a33;
  --color-head:#1f1a33; --color-head-ink:#fff7ec; --color-head-muted:#b9b2cc;
  --color-primary:#ff5a1f; --color-primary-ink:#ffffff; --color-primary-2:#ff8a3d;
  --color-gold:#ffb703; --color-gold-ink:#3a2a00;
  --color-focus:#2f6fe0;
  --color-domus:#e8792b; --color-novus:#22a06b; --color-torus:#2f6fe0; --color-modus:#e0457b;
  --color-domus-bg:#fff0e3; --color-novus-bg:#e3f6ec; --color-torus-bg:#e6efff; --color-modus-bg:#fde8f0;
  --color-error:#d1342f; --color-error-bg:#ffe9e6; --color-success:#1f8a5b; --color-success-bg:#e2f5ea;
  --color-disabled:#efe6da; --color-disabled-ink:#8d86a0;
  --shadow-card:0 1px 0 #ead8c2, 0 6px 18px -10px #c79a6a66;
  --shadow-pop:0 12px 32px -12px #1f1a3366;
  --font-display:"Unbounded","Manrope",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --container:1240px; --rule-hair:1px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --color-paper:#16131f; --color-paper-2:#211c2e; --color-card:#1f1a2b; --color-ink:#f6f1ff; --color-ink-2:#ddd5ee; --color-muted:#b4abc6; --color-faint:#8f87a3;
  --color-rule:#2e2840; --color-rule-strong:#433a5a; --color-scrim:#000000;
  --color-head:#0f0c17; --color-head-ink:#f6f1ff; --color-head-muted:#a79fbd;
  --color-primary:#ff6a33; --color-primary-ink:#160b05; --color-primary-2:#ff9a52;
  --color-gold:#ffc433; --color-gold-ink:#2a1e00; --color-focus:#7aa5ff;
  --color-domus:#ff9a4d; --color-novus:#42c28a; --color-torus:#6f9dff; --color-modus:#ff6f9e;
  --color-domus-bg:#3a2516; --color-novus-bg:#16302a; --color-torus-bg:#1a2645; --color-modus-bg:#3a1a2a;
  --color-error:#ff7a70; --color-error-bg:#3a1c1b; --color-success:#5fd39b; --color-success-bg:#163126;
  --color-disabled:#2a2438; --color-disabled-ink:#7b7390;
  --shadow-card:0 1px 0 #2e2840, 0 8px 22px -12px #00000099; --shadow-pop:0 14px 34px -12px #000000cc; color-scheme:dark}}
:root[data-theme="dark"]{
  --color-paper:#16131f; --color-paper-2:#211c2e; --color-card:#1f1a2b; --color-ink:#f6f1ff; --color-ink-2:#ddd5ee; --color-muted:#b4abc6; --color-faint:#8f87a3;
  --color-rule:#2e2840; --color-rule-strong:#433a5a; --color-scrim:#000000;
  --color-head:#0f0c17; --color-head-ink:#f6f1ff; --color-head-muted:#a79fbd;
  --color-primary:#ff6a33; --color-primary-ink:#160b05; --color-primary-2:#ff9a52;
  --color-gold:#ffc433; --color-gold-ink:#2a1e00; --color-focus:#7aa5ff;
  --color-domus:#ff9a4d; --color-novus:#42c28a; --color-torus:#6f9dff; --color-modus:#ff6f9e;
  --color-domus-bg:#3a2516; --color-novus-bg:#16302a; --color-torus-bg:#1a2645; --color-modus-bg:#3a1a2a;
  --color-error:#ff7a70; --color-error-bg:#3a1c1b; --color-success:#5fd39b; --color-success-bg:#163126;
  --color-disabled:#2a2438; --color-disabled-ink:#7b7390;
  --shadow-card:0 1px 0 #2e2840, 0 8px 22px -12px #00000099; --shadow-pop:0 14px 34px -12px #000000cc; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scrollbar-color:var(--color-rule-strong) var(--color-paper)}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-left:max(var(--space-md),env(safe-area-inset-left,0px));padding-right:max(var(--space-md),env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--color-head)}
::selection{background:var(--color-gold);color:var(--color-gold-ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:break-word;min-width:0;line-height:1.15}
p{margin:0;text-wrap:pretty}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--color-muted)}
.label{font-size:var(--text-sm);color:var(--color-muted);font-weight:600}
.wrap{max-width:var(--container);margin-inline:auto}
.small{font-size:var(--text-sm)}

/* ---------- шапка ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--color-head);color:var(--color-head-ink);
  margin-inline:calc(-1*max(var(--space-md),env(safe-area-inset-left,0px))) calc(-1*max(var(--space-md),env(safe-area-inset-right,0px)));
  padding-inline:max(var(--space-md),env(safe-area-inset-left,0px)) max(var(--space-md),env(safe-area-inset-right,0px))}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-lg);padding-block:var(--space-sm)}
.brand{display:flex;align-items:center;gap:var(--space-sm);min-width:0}
.brand h1{font-size:var(--text-xl);font-weight:700;display:flex;align-items:center;gap:var(--space-xs)}
.brand h1::before{content:"";width:22px;height:22px;border-radius:6px;background:conic-gradient(from 45deg,var(--color-domus) 0 25%,var(--color-novus) 0 50%,var(--color-torus) 0 75%,var(--color-modus) 0);flex:none}
.brand span{display:none}
nav.tabs{display:flex;gap:var(--space-2xs);flex-wrap:wrap}
nav.tabs button{background:transparent;border:0;min-height:40px;padding:0 var(--space-md);border-radius:var(--radius-pill);color:var(--color-head-muted);font-weight:700;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
nav.tabs button:hover{color:var(--color-head-ink);background:#ffffff14}
nav.tabs button:active{background:#ffffff26}
nav.tabs button[aria-current="page"]{background:var(--color-head-ink);color:var(--color-head)}
.top .spacer{flex:1}
.who{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--color-head-muted)}
.who .textbtn{color:var(--color-head-muted);text-decoration-color:#ffffff40}
.who .textbtn:hover{color:var(--color-head-ink)}
.xp{display:inline-flex;align-items:center;gap:var(--space-xs);min-height:36px;padding:0 var(--space-sm) 0 var(--space-2xs);border-radius:var(--radius-pill);background:#ffffff14;color:var(--color-head-ink);font-weight:700;font-size:var(--text-sm);border:0}
.xp:hover{background:#ffffff26}
.xp .star{width:28px;height:28px;border-radius:50%;background:var(--color-gold);color:var(--color-gold-ink);display:grid;place-items:center}
.xp .star svg{width:16px;height:16px}
.xp .lvl{color:var(--color-head-muted);font-weight:600}
.xp.bump{animation:bump .5s var(--ease-pop)}
@keyframes bump{40%{transform:scale(1.15)}}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:44px;border:0;border-radius:var(--radius-pill);background:var(--color-primary);color:var(--color-primary-ink);padding:0 var(--space-lg);font-weight:800;letter-spacing:.01em;
  box-shadow:0 4px 0 #c7400f;transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),background-color var(--dur-micro)}
.btn:hover{background:var(--color-primary-2)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c7400f}
.btn.ghost{background:var(--color-card);color:var(--color-ink);box-shadow:inset 0 0 0 2px var(--color-rule-strong)}
.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--color-ink)}
.btn.ghost:active{transform:translateY(1px)}
.btn.small{min-height:36px;padding:0 var(--space-md);font-size:var(--text-sm);box-shadow:0 3px 0 #c7400f}
.btn.small.ghost,.btn.ghost.small{box-shadow:inset 0 0 0 2px var(--color-rule-strong)}
.btn:disabled,.btn:disabled:hover{background:var(--color-disabled);color:var(--color-disabled-ink);box-shadow:none;cursor:not-allowed;transform:none}
#btn-new{box-shadow:0 4px 0 #9a2f08}
.textbtn{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:var(--color-muted);font-size:var(--text-sm);font-weight:600;text-decoration:underline;text-decoration-color:var(--color-rule-strong);text-underline-offset:4px;transition:color var(--dur-micro)}
.textbtn:hover{color:var(--color-ink);text-decoration-color:currentColor}
.textbtn:active{color:var(--color-ink-2)}
.textbtn.danger{color:var(--color-error);text-decoration-color:currentColor}
.textbtn:disabled{color:var(--color-disabled-ink);cursor:not-allowed}
.linkish{background:none;border:0;padding:0;text-align:left;font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--color-rule-strong);text-underline-offset:4px}
.linkish:hover{text-decoration-color:currentColor}
.linkish:active{color:var(--color-ink-2)}

main{padding-block:var(--space-xl) var(--space-2xl)}
.notice{background:var(--color-paper-2);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-lg);color:var(--color-ink-2)}
.notice.warn{background:var(--color-error-bg);color:var(--color-error)}

/* ---------- сценарии ---------- */
.sc-domus{--c:var(--color-domus);--cbg:var(--color-domus-bg)} .sc-novus{--c:var(--color-novus);--cbg:var(--color-novus-bg)}
.sc-torus{--c:var(--color-torus);--cbg:var(--color-torus-bg)} .sc-modus{--c:var(--color-modus);--cbg:var(--color-modus-bg)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c,var(--color-faint));flex:none}
.chip{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-xs);font-weight:800;letter-spacing:.02em;padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--cbg,var(--color-paper-2));color:var(--c,var(--color-muted))}
.tag{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:800;padding:var(--space-3xs) var(--space-xs);border-radius:var(--radius-pill);background:var(--color-gold);color:var(--color-gold-ink);margin-left:var(--space-xs)}

/* ---------- вводная ---------- */
.intro{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center;margin-bottom:var(--space-lg)}
.intro h2{font-size:var(--text-3xl);margin-right:auto}
.intro .k{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--color-card);box-shadow:var(--shadow-card);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);color:var(--color-muted);font-size:var(--text-sm);font-weight:600}
.intro .k b{color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-lg)}
.intro .k.ov{background:var(--color-error-bg);color:var(--color-error)}
.intro .k.ov b{color:var(--color-error)}
.kbtn{border:0;cursor:pointer}
.kbtn:hover{filter:brightness(.97)}
.kbtn:active{transform:translateY(1px)}

/* ---------- трасса из девяти шагов: подпись экрана ---------- */
.rail{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--space-xs);position:relative;margin-bottom:var(--space-md);padding:var(--space-md);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.rail::before{content:"";position:absolute;left:calc(var(--space-md) + 28px);right:calc(var(--space-md) + 28px);top:calc(var(--space-md) + 27px);height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--color-domus),var(--color-gold),var(--color-novus),var(--color-torus),var(--color-modus));opacity:.35}
.node{position:relative;z-index:1;background:none;border:0;padding:0 0 var(--space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);min-width:0;color:var(--color-ink);border-radius:var(--radius-sm)}
.node .c{order:0;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;background:var(--color-paper-2);color:var(--color-faint);
  border:3px solid var(--color-card);transition:transform var(--dur-short) var(--ease-pop),background-color var(--dur-short)}
.node.has .c{background:var(--step-c,var(--color-primary));color:#fff;box-shadow:0 4px 0 #0000001f}
.node .c.zero{color:var(--color-faint)}
.node .sq{display:none}
.node .nm{font-size:var(--text-xs);font-weight:700;color:var(--color-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.node:hover .c{transform:translateY(-3px) scale(1.04)}
.node:active .c{transform:scale(.96)}
.node.on .c{outline:3px solid var(--color-ink);outline-offset:2px}
.node.on .nm{color:var(--color-ink)}
.node:nth-child(1){--step-c:#e8792b} .node:nth-child(2){--step-c:#f09a1a} .node:nth-child(3){--step-c:#d9a400} .node:nth-child(4){--step-c:#8fb017}
.node:nth-child(5){--step-c:#22a06b} .node:nth-child(6){--step-c:#14988f} .node:nth-child(7){--step-c:#2f6fe0} .node:nth-child(8){--step-c:#7a5be0} .node:nth-child(9){--step-c:#e0457b}
.railbar{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);align-items:center;margin:0 0 var(--space-lg)}
.railbar .sel{background:var(--color-card);border:0;min-height:40px;padding:0 var(--space-md);border-radius:var(--radius-pill);color:var(--color-muted);font-size:var(--text-sm);font-weight:700;box-shadow:var(--shadow-card)}
.railbar .sel:hover{color:var(--color-ink)}
.railbar .sel:active{transform:translateY(1px)}
.railbar .sel.on{background:var(--color-ink);color:var(--color-paper)}
.railbar .sel b{margin-left:var(--space-2xs)}
.railbar .grow{flex:1}
.flt{min-height:40px;border:2px solid var(--color-rule-strong);background:var(--color-card);padding:0 var(--space-sm);border-radius:var(--radius-pill);min-width:0;font-size:var(--text-sm);font-weight:600;color:var(--color-ink)}
.flt:hover{border-color:var(--color-muted)}
.flt:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}
input.flt{width:220px}
@media (max-width:860px){
  .rail{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-md)}
  .rail::before{display:none}
  input.flt,select.flt{width:100%;font-size:var(--text-md)}
  .railbar .grow{display:none}
  .who span{display:none}
}

/* ---------- карточки семей ---------- */
.group{margin-top:var(--space-xl)}
.group:first-child{margin-top:0}
.ghead{display:flex;align-items:center;gap:var(--space-sm);padding-bottom:var(--space-sm)}
.ghead h3{font-size:var(--text-lg)}
.ghead .cnt{min-width:28px;height:28px;padding:0 var(--space-xs);border-radius:var(--radius-pill);background:var(--color-ink);color:var(--color-paper);display:inline-grid;place-items:center;font-size:var(--text-sm);font-weight:800}
.row{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr) 120px;gap:var(--space-xs) var(--space-lg);align-items:center;width:100%;text-align:left;
  background:var(--color-card);border:0;border-radius:var(--radius);padding:var(--space-md) var(--space-lg) var(--space-md) calc(var(--space-lg) + 6px);margin-bottom:var(--space-sm);
  box-shadow:var(--shadow-card);position:relative;overflow:hidden;transition:transform var(--dur-short) var(--ease-out),box-shadow var(--dur-short) var(--ease-out)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--c,var(--color-rule-strong))}
.row:hover{transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.row:active{transform:translateY(0)}
.r-main{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
.r-name{font-family:var(--font-display);font-size:var(--text-md);font-weight:600;display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2xs);overflow-wrap:anywhere}
.r-name .dot{display:none}
.r-sub{font-size:var(--text-sm);color:var(--color-muted);display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-sm);font-weight:600}
.r-sub span:first-child{color:var(--c,var(--color-muted));font-weight:800}
.r-next{font-size:var(--text-sm);min-width:0;overflow-wrap:anywhere;font-weight:600}
.r-next .d{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--space-xs);border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-ink-2);font-weight:800;margin-right:var(--space-xs)}
.r-next.over{color:var(--color-error)}
.r-next.over .d{background:var(--color-error);color:#fff}
.r-next.none{color:var(--color-faint)}
.r-prog{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2xs);font-size:var(--text-xs);color:var(--color-muted);font-weight:800}
.r-prog i{display:block;width:100%;max-width:110px;height:8px;border-radius:4px;background:var(--color-paper-2);overflow:hidden}
.r-prog i b{display:block;height:100%;border-radius:4px;background:var(--c,var(--color-primary))}
@media (max-width:640px){
  .row{grid-template-columns:minmax(0,1fr) 80px;padding-left:calc(var(--space-md) + 8px);padding-right:var(--space-md)}
  .r-next{grid-column:1/-1;grid-row:2}
}

/* ---------- состояния ---------- */
.skel{display:flex;flex-direction:column;gap:var(--space-sm)}
.skel .rail-s{height:120px;border-radius:var(--radius);background:var(--color-card);box-shadow:var(--shadow-card)}
.skel .r{height:76px;border-radius:var(--radius);background:var(--color-card);box-shadow:var(--shadow-card);display:none}
.skel i{display:none}
@media (prefers-reduced-motion:no-preference){.skel .rail-s{animation:pulse 1.2s ease-in-out infinite alternate}@keyframes pulse{to{opacity:.6}}}
.empty{max-width:640px;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.empty h2{font-size:var(--text-2xl)}
.empty p{max-width:56ch}
.empty .acts{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-xs)}
.quiet-empty{color:var(--color-muted);padding:var(--space-lg);border:2px dashed var(--color-rule-strong);border-radius:var(--radius);font-weight:600}

/* ---------- карточка семьи ---------- */
.scrim{position:fixed;inset:0;background:var(--color-scrim);opacity:.4;z-index:40}
aside.panel{position:fixed;top:0;right:0;bottom:0;width:min(800px,100%);background:var(--color-paper);color:var(--color-ink);z-index:50;overflow-y:auto;box-shadow:var(--shadow-pop);
  padding:calc(var(--space-md) + env(safe-area-inset-top,0px)) max(var(--space-xl),env(safe-area-inset-right,0px)) calc(var(--space-2xl) + env(safe-area-inset-bottom,0px)) var(--space-xl)}
@media (max-width:760px){aside.panel{padding-left:max(var(--space-md),env(safe-area-inset-left,0px));padding-right:max(var(--space-md),env(safe-area-inset-right,0px))}}
aside.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:var(--cbg,var(--color-paper-2));z-index:-1}
aside.panel{isolation:isolate}
.p-top{display:flex;justify-content:flex-end}
.nameinp{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;border:0;border-bottom:2px solid transparent;background:transparent;padding:var(--space-2xs) 0;width:100%;min-width:0;min-height:48px;color:var(--color-ink)}
.nameinp:hover{border-bottom-color:var(--color-rule-strong)}
.nameinp:focus-visible{outline:none;border-bottom-color:var(--c,var(--color-ink))}
.p-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs);color:var(--color-muted);font-size:var(--text-sm);font-weight:700;margin-top:var(--space-xs)}
.p-meta .state{background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-pill);padding:var(--space-3xs) var(--space-sm)}
.p-meta>span:not(.state):not(.chip):not(.tag){background:var(--color-card);border-radius:var(--radius-pill);padding:var(--space-3xs) var(--space-sm)}

.path{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--space-2xs);position:relative;margin:var(--space-lg) 0 var(--space-xs);padding:var(--space-sm);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-card)}
.path::before{content:"";position:absolute;left:calc(var(--space-sm) + 20px);right:calc(var(--space-sm) + 20px);top:calc(var(--space-sm) + 18px);height:4px;border-radius:2px;background:var(--color-rule)}
.path button{position:relative;z-index:1;background:none;border:0;padding:0 0 var(--space-2xs);display:flex;flex-direction:column;gap:var(--space-2xs);align-items:center;min-width:0;color:var(--color-muted);min-height:44px}
.path .sq{width:38px;height:38px;border-radius:50%;background:var(--color-paper-2);border:3px solid var(--color-card);display:grid;place-items:center;transition:transform var(--dur-short) var(--ease-pop)}
.path .done .sq{background:var(--c,var(--color-primary))}
.path .done .sq::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-2px) rotate(-45deg)}
.path .cur .sq{background:var(--color-card);box-shadow:0 0 0 3px var(--c,var(--color-primary))}
.path .cur .sq::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--c,var(--color-primary))}
.path .lbl{font-size:var(--text-xs);font-weight:700;white-space:nowrap;text-align:center}
.path .lbl .num{display:none}
.path .cur .lbl,.path .view .lbl{color:var(--color-ink)}
.path .view .lbl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--c,var(--color-ink))}
.path button:hover .sq{transform:scale(1.08)}
.path button:active .sq{transform:scale(.95)}
@media (max-width:860px){.path .lbl .w{display:none}.path .lbl .num{display:inline}}

.p-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);align-items:center;margin:var(--space-lg) 0 var(--space-2xs)}
.p-actions .btn{min-height:52px;font-size:var(--text-md);padding:0 var(--space-xl)}
section.blk{margin-top:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-md);background:var(--color-card);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-card)}
section.blk>h2{font-size:var(--text-xl)}
section.blk section.blk{box-shadow:none;padding:0}
.stepstate{font-size:var(--text-sm);font-weight:700;color:var(--color-muted)}
.stepstate .num{background:var(--color-gold);color:var(--color-gold-ink);border-radius:var(--radius-pill);padding:0 var(--space-xs)}
.goal{font-size:var(--text-md);max-width:60ch;font-weight:500}
.passed{font-size:var(--text-sm);color:var(--color-ink-2);background:var(--cbg,var(--color-paper-2));border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md)}
.passed b{font-weight:800}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md) var(--space-lg)}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.fld{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}
.fld.wide{grid-column:1/-1}
.fld input,.fld select,.fld textarea{min-height:44px;border:2px solid var(--color-rule-strong);background:var(--color-paper);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);width:100%;min-width:0;font-size:var(--text-md);color:var(--color-ink)}
.fld textarea{min-height:76px;resize:vertical;line-height:1.5}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--color-muted)}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px;border-color:transparent}
.fld input:disabled,.fld select:disabled,.fld textarea:disabled{background:var(--color-disabled);color:var(--color-disabled-ink);border-color:var(--color-disabled);cursor:not-allowed}
.fld .val{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;padding-block:var(--space-2xs)}

.checks{display:flex;flex-direction:column;gap:var(--space-xs)}
.checks label{display:flex;gap:var(--space-sm);align-items:center;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);background:var(--color-paper);border:2px solid var(--color-rule);cursor:pointer;font-weight:600;
  transition:background-color var(--dur-micro),border-color var(--dur-micro),transform var(--dur-micro)}
.checks label:hover{border-color:var(--c,var(--color-primary))}
.checks label:active{transform:scale(.99)}
.checks input{appearance:none;-webkit-appearance:none;width:26px;height:26px;margin:0;border-radius:8px;border:2px solid var(--color-rule-strong);background:var(--color-card);flex:none;display:grid;place-items:center;cursor:pointer;transition:background-color var(--dur-micro),border-color var(--dur-micro)}
.checks input::after{content:"";width:10px;height:6px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform var(--dur-short) var(--ease-pop)}
.checks input:checked{background:var(--c,var(--color-success));border-color:var(--c,var(--color-success))}
.checks input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.checks input:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.checks .t{flex:1;min-width:0}
.checks .who{display:block;font-size:var(--text-xs);color:var(--color-faint);font-weight:600}
.checks .due{font-size:var(--text-xs);font-weight:800;white-space:nowrap;background:var(--color-paper-2);border-radius:var(--radius-pill);padding:var(--space-3xs) var(--space-xs)}
.checks .due.over{background:var(--color-error);color:#fff}
.checks label.on{background:var(--cbg,var(--color-success-bg));border-color:transparent}
.checks label.on .t{color:var(--color-ink-2)}

.warnbox{border-radius:var(--radius-sm);background:var(--color-error-bg);color:var(--color-ink);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-xs);margin-top:var(--space-sm)}
.warnbox>b{color:var(--color-error)}
.warnbox ul{margin:0;padding-left:var(--space-md)}
.warnbox .acts{display:flex;gap:var(--space-xs) var(--space-md);flex-wrap:wrap;align-items:center}

details.more{border-radius:var(--radius-sm);background:var(--color-paper);padding:0 var(--space-md)}
details.more summary{min-height:48px;padding-block:var(--space-sm);cursor:pointer;font-weight:800;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"+";width:28px;height:28px;border-radius:50%;background:var(--color-ink);color:var(--color-paper);display:grid;place-items:center;font-size:var(--text-lg);line-height:1}
details.more[open] summary::after{content:"−"}
details.more summary:hover{color:var(--color-ink-2)}
details.more .body{padding-bottom:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}
.quote{white-space:pre-wrap;background:var(--color-card);border-left:4px solid var(--c,var(--color-primary));border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-size:var(--text-sm);margin-top:var(--space-xs)}

.money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md) var(--space-lg)}
@media (max-width:560px){.money{grid-template-columns:1fr}}
.totalline{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);font-weight:700}
.total{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700}

table.t{border-collapse:collapse;width:100%;font-size:var(--text-sm);font-variant-numeric:tabular-nums}
table.t th,table.t td{text-align:left;padding:var(--space-sm) var(--space-sm) var(--space-sm) 0;border-bottom:2px solid var(--color-rule);vertical-align:middle}
table.t th{font-weight:800;color:var(--color-muted);white-space:nowrap}
table.t td.r,table.t th.r{text-align:right}
.tbl-wrap{overflow-x:auto;background:var(--color-card);border-radius:var(--radius);padding:var(--space-xs) var(--space-lg);box-shadow:var(--shadow-card)}
section.blk .tbl-wrap,details .tbl-wrap{box-shadow:none;padding:0;background:transparent}
.paid{color:var(--color-success);font-weight:800}
.ov{color:var(--color-error)}
.logl{display:flex;flex-direction:column}
.logl div{display:flex;gap:var(--space-md);padding-block:var(--space-xs);border-bottom:2px solid var(--color-rule);font-size:var(--text-sm)}
.logl time{color:var(--color-faint);white-space:nowrap;flex:none;min-width:104px;font-weight:600}
.logl .lt{min-width:0;overflow-wrap:anywhere}
.p-foot{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-lg);margin-top:var(--space-lg)}

/* ---------- дома, сводка, команда ---------- */
.pagehead{margin-bottom:var(--space-lg);display:flex;flex-direction:column;gap:var(--space-xs)}
.pagehead h2{font-size:var(--text-3xl)}
.pagehead p{color:var(--color-muted);max-width:62ch;font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--space-md);margin-bottom:var(--space-xl)}
.kpis div{display:flex;flex-direction:column;gap:var(--space-2xs);background:var(--color-card);border-radius:var(--radius);padding:var(--space-md) var(--space-lg);box-shadow:var(--shadow-card);border-top:6px solid var(--k,var(--color-primary))}
.kpis div:nth-child(1){--k:var(--color-domus)} .kpis div:nth-child(2){--k:var(--color-gold)} .kpis div:nth-child(3){--k:var(--color-novus)} .kpis div:nth-child(4){--k:var(--color-torus)} .kpis div:nth-child(5){--k:var(--color-modus)}
.kpis b{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;line-height:1.1}
.kpis span{font-size:var(--text-sm);color:var(--color-muted);font-weight:600}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:var(--space-lg)}
.sumgrid section{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0;background:var(--color-card);border-radius:var(--radius);padding:var(--space-lg);box-shadow:var(--shadow-card)}
.sumgrid h2{font-size:var(--text-lg)}
.sumgrid .hint{font-size:var(--text-sm);color:var(--color-muted)}
.bars{display:flex;flex-direction:column;gap:var(--space-xs)}
.bars .row2{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) 36px;gap:var(--space-sm);align-items:center;font-size:var(--text-sm);font-weight:600}
.bars .b{height:14px;border-radius:7px;background:var(--color-paper-2);overflow:hidden}
.bars .b i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,var(--color-primary),var(--color-gold))}
.bars .v{text-align:right;font-weight:800}
.login{max-width:420px;margin:var(--space-xl) auto;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.login h2{font-size:var(--text-3xl)}
.login-form,.setup-form{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-sm)}
.login-form .btn,.setup-form .btn{align-self:stretch}
.setup-box{max-width:460px;margin:var(--space-2xl) auto;padding:var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-pop)}
.setup-box h1{font-size:var(--text-2xl)}
body.signed-out nav.tabs,body.signed-out #btn-new,body.signed-out .who,body.signed-out .xp{visibility:hidden}
ul.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-xs)}
.acts-row{display:flex;flex-wrap:wrap;gap:var(--space-sm) var(--space-lg);align-items:center;margin-top:var(--space-sm)}
#notify-out{margin-top:var(--space-sm)}

/* ---------- прогресс ---------- */
.goal-box{background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius);padding:var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg);position:relative;overflow:hidden}
.goal-box::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,var(--color-gold) 0,transparent 70%);opacity:.35}
.goal-box .label{color:#ffffffb3}
.goal-num{font-size:var(--text-lg);font-weight:700}
.goal-num b{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;color:var(--color-gold)}
.goal-bar{height:16px;border-radius:8px;background:#ffffff1f;max-width:720px;overflow:hidden;position:relative}
.goal-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--color-primary),var(--color-gold));transition:width .8s var(--ease-out)}
section.blk .goal-bar{background:var(--color-paper-2)}
.goal-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-sm);margin-top:var(--space-xs);position:relative;z-index:1}
.goal-form .label{color:#ffffffb3}
.goal-form .flt{background:#ffffff14;color:var(--color-paper);border-color:#ffffff33}
.goal-form .flt option{color:#1f1a33}
.goal-form .btn.ghost{background:transparent;color:var(--color-paper);box-shadow:inset 0 0 0 2px #ffffff55}
.goal-box .paid{color:var(--color-gold)}
.game-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:var(--space-lg)}
.game-grid section.blk{margin-top:0}
.lv{display:flex;align-items:center;gap:var(--space-md)}
.lv-badge{width:84px;height:94px;flex:none;filter:drop-shadow(0 6px 0 #0000001a)}
.lv b{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;display:block}
.lv span{color:var(--color-muted);font-size:var(--text-sm);font-weight:600}
.levels{font-size:var(--text-sm);display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
.levels span.lv-step{padding:var(--space-3xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-paper-2);font-weight:700}
.levels span.lv-step.cur{background:var(--color-gold);color:var(--color-gold-ink)}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--space-sm);min-height:200px}
.podium .pl{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);text-align:center;min-width:0}
.podium .pl .nm{font-weight:800;font-size:var(--text-sm);overflow-wrap:anywhere}
.podium .pl .pt{font-family:var(--font-display);font-weight:700}
.podium .step{width:100%;border-radius:var(--radius-sm) var(--radius-sm) 0 0;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:#fff}
.podium .p1 .step{height:110px;background:var(--color-gold);color:var(--color-gold-ink)} .podium .p2 .step{height:80px;background:var(--color-torus)} .podium .p3 .step{height:56px;background:var(--color-domus)}
.podium .p1{order:2} .podium .p2{order:1} .podium .p3{order:3}
ol.leaders{display:none}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:var(--space-md)}
.badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2xs);padding:var(--space-md) var(--space-sm);border-radius:var(--radius);background:var(--color-paper);color:var(--color-muted);font-size:var(--text-sm)}
.badge svg{width:72px;height:72px;margin-bottom:var(--space-2xs)}
.badge b{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--color-ink)}
.badge .state{font-size:var(--text-xs);font-weight:800}
.badge:not(.got) svg{filter:grayscale(1);opacity:.35}
.badge.got{background:var(--color-card);box-shadow:var(--shadow-card);color:var(--color-ink-2)}
.badge.got .state{color:var(--color-success)}
.revoke{display:inline-flex;flex-wrap:wrap;gap:var(--space-xs);align-items:center;margin-left:var(--space-xs)}
.feed-pts{display:inline-grid;place-items:center;min-width:44px;height:26px;padding:0 var(--space-xs);border-radius:var(--radius-pill);background:var(--color-gold);color:var(--color-gold-ink);font-weight:800;margin-right:var(--space-xs)}
s .feed-pts{background:var(--color-disabled);color:var(--color-disabled-ink)}

/* ---------- всплывашки ---------- */
#flash{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px));z-index:60;max-width:min(480px,calc(100% - 32px));background:var(--color-ink);color:var(--color-paper);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:700;box-shadow:var(--shadow-pop)}
.award{position:fixed;left:50%;top:40%;z-index:70;transform:translate(-50%,-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);text-align:center}
.award .pts{font-family:var(--font-display);font-size:4.5rem;font-weight:800;line-height:1;color:var(--color-gold);-webkit-text-stroke:3px var(--color-ink);paint-order:stroke fill}
.award .what{background:var(--color-ink);color:var(--color-paper);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-lg);font-weight:800;max-width:80vw}
.award.big .pts{font-size:6rem}
@media (prefers-reduced-motion:no-preference){
  .award{animation:award 1.8s var(--ease-out) forwards}
  @keyframes award{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
  aside.panel{animation:slide var(--dur-short) var(--ease-out)}
  @keyframes slide{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .award{animation:fade 1.8s linear forwards}@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}
  *,*::before,*::after{transition-duration:.01ms!important}
}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:65}
.who span{display:none}
@media (max-width:600px){nav.tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}nav.tabs button{flex:none}}


/* ================= брендбук Локанты поверх игры ================= */
:root{
  --color-paper:#faf9f6; --color-paper-2:#f2f0ea; --color-card:#ffffff; --color-ink:#1d1d1b; --color-ink-2:#3a3a37; --color-muted:#686863; --color-faint:#8a8983;
  --color-rule:#ebe8e1; --color-rule-strong:#dcdcd5; --color-scrim:#1d1d1b;
  --color-head:#1d1d1b; --color-head-ink:#faf9f6; --color-head-muted:#b8b6ae;
  --color-primary:#c9552a; --color-primary-ink:#ffffff; --color-primary-2:#d9683c; --btn-depth:#8f3a1a;
  --color-domus:#9d7d60; --color-novus:#5a6955; --color-torus:#5b727f; --color-modus:#b85a3c;
  --color-domus-bg:#f3ede6; --color-novus-bg:#e9ede7; --color-torus-bg:#e7edf0; --color-modus-bg:#f6e8e2;
  --shadow-card:0 0 0 1px #e9e6df; --shadow-pop:0 18px 40px -18px #1d1d1b55, 0 0 0 1px #e9e6df;
  --font-body:"Segoe UI","Segoe UI Variable Text",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Segoe UI Light","Segoe UI","Segoe UI Variable Display",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Unbounded","Segoe UI",system-ui,sans-serif;
  --radius:14px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --color-paper:#161614; --color-paper-2:#22221f; --color-card:#1d1d1b; --color-ink:#f1efe8; --color-ink-2:#d6d3ca; --color-muted:#a6a49c; --color-faint:#8e8c85;
  --color-rule:#2c2c28; --color-rule-strong:#44443e; --color-head:#0d0d0c; --color-head-ink:#f1efe8; --color-head-muted:#a6a49c;
  --color-primary:#e0703f; --color-primary-ink:#160b05; --color-primary-2:#ec8455; --btn-depth:#8f3a1a;
  --color-domus:#c4a385; --color-novus:#97ab90; --color-torus:#97adba; --color-modus:#e3906f;
  --color-domus-bg:#2c241c; --color-novus-bg:#1f271d; --color-torus-bg:#1c252b; --color-modus-bg:#33201a;
  --shadow-card:0 0 0 1px #2c2c28; --shadow-pop:0 18px 40px -18px #000000cc, 0 0 0 1px #2c2c28}}
:root[data-theme="dark"]{
  --color-paper:#161614; --color-paper-2:#22221f; --color-card:#1d1d1b; --color-ink:#f1efe8; --color-ink-2:#d6d3ca; --color-muted:#a6a49c; --color-faint:#8e8c85;
  --color-rule:#2c2c28; --color-rule-strong:#44443e; --color-head:#0d0d0c; --color-head-ink:#f1efe8; --color-head-muted:#a6a49c;
  --color-primary:#e0703f; --color-primary-ink:#160b05; --color-primary-2:#ec8455; --btn-depth:#8f3a1a;
  --color-domus:#c4a385; --color-novus:#97ab90; --color-torus:#97adba; --color-modus:#e3906f;
  --color-domus-bg:#2c241c; --color-novus-bg:#1f271d; --color-torus-bg:#1c252b; --color-modus-bg:#33201a;
  --shadow-card:0 0 0 1px #2c2c28; --shadow-pop:0 18px 40px -18px #000000cc, 0 0 0 1px #2c2c28}

/* шрифты брендбука: Segoe UI Light для заголовков, Segoe UI для текста; Unbounded — только игровые цифры */
h1,h2,h3{font-family:var(--font-head);font-weight:300;letter-spacing:-.01em}
.r-name{font-family:var(--font-body);font-weight:600;font-size:var(--text-lg)}
.nameinp{font-family:var(--font-head);font-weight:300;font-size:var(--text-4xl)}
.badge b,.lv b{font-family:var(--font-head);font-weight:400}
.btn{box-shadow:0 4px 0 var(--btn-depth)} .btn:active{box-shadow:0 1px 0 var(--btn-depth)} .btn.small{box-shadow:0 3px 0 var(--btn-depth)}
#btn-new{box-shadow:0 4px 0 var(--btn-depth)}

/* логотип в шапке */
.brand{gap:var(--space-md)}
.brand img{display:block;height:34px;width:auto}
.brand h1::before,h1.brand::before{display:none}
h1.brand{font-family:var(--font-body);font-weight:400;font-size:var(--text-md);margin:0}
.brand .app-name{display:inline-block;color:var(--color-head-muted);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;border-left:1px solid #ffffff33;padding-left:var(--space-md)}

/* знаки сценариев */
.mark{display:inline-block;flex:none;width:28px;height:auto;color:var(--c,var(--color-ink))}
.chip .mark{width:18px;color:inherit}
.chip{background:var(--cbg,var(--color-paper-2));color:var(--c,var(--color-muted));letter-spacing:.06em;text-transform:uppercase;font-size:11px;padding:var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs)}
.r-mark{width:40px;margin-right:var(--space-2xs)}
.r-sub{padding-left:48px}
.r-sub span:first-child{text-transform:uppercase;letter-spacing:.08em;font-size:var(--text-xs)}
.row{border-radius:var(--radius)}
.row::before{width:5px}
.row:hover{box-shadow:var(--shadow-pop)}
.sc-row{display:flex;gap:var(--space-lg);align-items:flex-end;flex-wrap:wrap}
.sc-row span{display:inline-flex}
.sc-row .mark{width:64px;color:var(--c)}

/* трасса шагов — графит и золото вместо радуги: цвета остаются за сценариями */
.rail::before{background:var(--color-rule-strong);opacity:1;height:2px;top:calc(var(--space-md) + 29px)}
.node.has .c{background:var(--color-ink);color:var(--color-paper);box-shadow:0 4px 0 var(--color-gold)}
.node .c{background:var(--color-paper);border-color:var(--color-card)}
.node.on .c{outline:3px solid var(--color-gold);outline-offset:3px}
.node:nth-child(n){--step-c:var(--color-ink)}
.ghead .cnt{background:var(--color-gold);color:var(--color-gold-ink)}
.railbar .sel.on{background:var(--color-ink);color:var(--color-paper)}

/* карточка семьи: логотип продукта и его смысл из брендбука */
.p-brand{display:flex;align-items:center;gap:var(--space-lg);margin:var(--space-xs) 0 var(--space-md);flex-wrap:wrap}
.p-brand img{display:block;width:152px;height:auto}
.p-brand>div{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0;flex:1 1 220px}
.p-brand p{color:var(--color-ink-2);font-size:var(--text-sm);max-width:40ch}
.sc-tag{color:var(--c,var(--color-muted));font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.p-logo-dark{display:none!important}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .p-logo-light{display:none!important}:root:not([data-theme="light"]) .p-logo-dark{display:block!important}}
:root[data-theme="dark"] .p-logo-light{display:none!important}:root[data-theme="dark"] .p-logo-dark{display:block!important}
aside.panel::before{height:250px}
section.blk{box-shadow:var(--shadow-card)}
.checks label.on{background:var(--cbg,var(--color-success-bg))}
.checks input:checked{background:var(--c,var(--color-success));border-color:var(--c,var(--color-success))}

/* вход и пустое состояние */
.login-logo{width:220px;height:auto;display:block;margin-bottom:var(--space-sm)}
.login .sc-row{margin:var(--space-xs) 0 var(--space-sm)}
.login .sc-row .mark{width:44px}
.empty .sc-row{margin-bottom:var(--space-sm)}
.pagehead p,.goal{font-weight:400}
.kpis div{border-top-width:4px}
.kpis div:nth-child(1){--k:var(--color-domus)} .kpis div:nth-child(2){--k:var(--color-novus)} .kpis div:nth-child(3){--k:var(--color-torus)} .kpis div:nth-child(4){--k:var(--color-modus)} .kpis div:nth-child(5){--k:var(--color-gold)}
.goal-box{background:var(--color-head)}
@media (max-width:860px){.brand .app-name{display:none}.brand img{height:28px}.r-sub{padding-left:0}.r-mark{width:32px}}
/* правка: логотип не меньше 220 px по ширине файла (брендбук, с. 9); полоса цвета — у блока продукта, а не по всей шапке */
.brand img{height:56px;margin-block:-6px}
@media (max-width:860px){.brand img{height:48px}}
aside.panel::before{display:none}
.p-brand{background:var(--cbg,var(--color-paper-2));border-radius:var(--radius);padding:var(--space-md) var(--space-lg);margin-top:var(--space-sm)}
header.top .wrap{gap:var(--space-xs) var(--space-md)}
nav.tabs button{padding:0 var(--space-sm)}
@media (max-width:1400px){.xp .lvl{display:none}}
.invite-link{display:flex;flex-direction:column;gap:var(--space-xs);background:var(--color-paper-2);border-radius:var(--radius-sm);padding:var(--space-md);margin-top:var(--space-sm)}
.invite-link .quote{word-break:break-all;margin:0}
body.signed-out nav.tabs,body.signed-out #btn-new,body.signed-out .who,body.signed-out .xp{display:none!important}

/* ---------- «Сегодня»: личная страница ---------- */
.avatar{width:36px;height:36px;border-radius:50%;border:0;background:var(--av,var(--color-domus));color:#fff;font-weight:700;font-size:var(--text-sm);display:inline-grid;place-items:center;flex:none;letter-spacing:.02em}
button.avatar:hover{box-shadow:0 0 0 3px #ffffff33}
button.avatar:active{transform:scale(.96)}
.avatar.big{width:72px;height:72px;font-size:var(--text-xl);font-family:var(--font-head);font-weight:300}
.hello{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-lg);background:var(--color-card);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--space-lg) var(--space-xl);margin-bottom:var(--space-lg);border-left:6px solid var(--av)}
.hello-main{display:flex;align-items:center;gap:var(--space-lg);min-width:0}
.hello h2{font-size:var(--text-3xl)}
.hello-date{color:var(--color-muted);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.12em}
.hello-sub{color:var(--color-ink-2);margin-top:var(--space-2xs)}
.hello-stats{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.hello-stats>div{display:flex;align-items:center;gap:var(--space-sm);background:var(--color-paper);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md)}
.hello-stats b{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;color:var(--color-ink)}
.hello-stats>div:first-child b{color:var(--color-primary)}
.hello-stats span{font-size:var(--text-sm);color:var(--color-muted);font-weight:600;line-height:1.3}
.hello-stats .lv-badge{width:40px;height:45px}
.today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--space-lg);margin-bottom:var(--space-lg)}
.today-grid section.blk{margin-top:0}
.today-grid .row{grid-template-columns:minmax(0,1fr) auto;box-shadow:0 0 0 1px var(--color-rule)}
.today-grid .row .r-next{grid-column:1/-1;grid-row:2;padding-left:48px}
.today-grid .row .r-prog{grid-column:2;grid-row:1}
.chances{display:flex;flex-direction:column;gap:var(--space-xs)}
.chance{display:flex;align-items:center;gap:var(--space-sm);text-align:left;width:100%;background:var(--color-paper);border:2px solid transparent;border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md);transition:border-color var(--dur-micro),transform var(--dur-micro)}
.chance:hover{border-color:var(--c,var(--color-gold))}
.chance:active{transform:scale(.99)}
.chance .ch-t{display:flex;flex-direction:column;min-width:0;font-size:var(--text-sm)}
.chance .ch-t b{font-weight:700;font-size:var(--text-md)}
.chance .ch-t span{color:var(--color-ink-2)}
.mini-rail{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:var(--space-2xs)}
.mini{display:flex;flex-direction:column;align-items:center;gap:var(--space-2xs);background:none;border:0;padding:var(--space-2xs) 0;border-radius:var(--radius-sm);min-width:0}
.mini b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--color-paper-2);color:var(--color-faint);font-family:var(--font-display);font-weight:700}
.mini.has b{background:var(--color-ink);color:var(--color-paper);box-shadow:0 3px 0 var(--color-gold)}
.mini span{font-size:10px;font-weight:700;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mini:hover b{transform:translateY(-2px)}
.attn-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);align-items:center}
.attn-row .k{display:inline-flex;align-items:center;gap:var(--space-xs);background:var(--color-paper);border-radius:var(--radius-pill);padding:var(--space-xs) var(--space-md);font-weight:600;color:var(--color-muted);min-height:44px}
.attn-row .k b{font-family:var(--font-display);color:var(--color-ink)}
.attn-row .k.ov{background:var(--color-error-bg);color:var(--color-error)} .attn-row .k.ov b{color:var(--color-error)}
@media (max-width:640px){.hello{padding:var(--space-md)}.hello h2{font-size:var(--text-2xl)}.avatar.big{width:52px;height:52px}.mini-rail{grid-template-columns:repeat(5,minmax(0,1fr))}.today-grid .row .r-next{padding-left:0}}
@media (max-width:1500px){.brand .app-name{display:none}}