/* следи.бел cabinet — the landing visual language, cabinet components.
   KufarScrap-252 (2026-10-04): the dark re-skin onto the live-captured K-197
   palette (body #111827, cards #1e2939, borders #364153, text #d1d5dc, muted
   #99a1af, rose family #ff2357/#e30076/#ff667f/#ffa2ae, info blue #6A9CE5);
   yellow/orange are BANNED by the owner rule of 01.10 — every state maps into
   the landing tokens (active/delivered blue, paused/muted gray, warn pale
   rose, failed rose). Fonts are the landing pair (Montserrat headings,
   Inter body) served same-origin from the landing docroot. No keyframes,
   no external hosts, no negative horizontal margins (KufarScrap-161).
   KufarScrap-275 (2026-10-05): dashboard layout per the OpenRouter reference
   (desktop sidebar + full-width content; the K-252 tokens unchanged — the
   similarity is ARRANGEMENT-only); the KufarScrap-270 44px tap-target pin
   transfers from .tab to .nav-link.
   KufarScrap-279 (2026-10-05): the panel footer IS the generated landing
   block; the profile is ONE compact top-right chip; the Kufar green #00AD64
   joins the palette by the dated owner decision (assets: kfs/assets/
   kufar-logo-*.svg masters, derived white mark, runtime cabinet/kufar-mark.png).
   KufarScrap-295 (2026-10-06, the owner dashboard mockup
   docs/mockups/owner-dashboard-2026-10-06.png — the dark K-252 palette is
   KEPT, the mockup is ARRANGEMENT-only): the redesign wave — ALL colors are
   now :root variables (theming built in this wave, manager 12; ZERO raw hex
   outside :root), GREEN is the primary-action + positive-confirmation color
   per manager 06.10 («+ Добавить поиск», «Продлить ↗», «Написать нам ↗»,
   «• Подключён», «Открыть на Куфар»), the sub card photo is the LEFT square
   track (supersedes the K-279 photo-right pin) and the trash rides the
   action row (supersedes the K-279 own-row pin), the sidebar carries the
   four-section nav + the help foot.
   KufarScrap-310 (2026-10-07, the wizard rework): the 3-phase stepper, the
   retiled category tiles, the probe row/cheat-sheet/guide-card, the one
   footer bar, the guest dashboard (locked nav, dashed add tile) and the
   dashboard empty card + dashed add tile; the wizard add CTA is CRIMSON per
   the new mockup (supersedes the K-295 green for that button only). */

@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/font-inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/font-inter-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}
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url(/font-montserrat-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;font-display:swap;src:url(/font-montserrat-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}

/* KufarScrap-295: the ONE color source — every rule below references
   var(--token); yellow/orange stay banned (they appear in no token) */
:root{--bg:#111827;--bg-veil:rgba(17,24,39,.9);--bg-ghost:rgba(17,24,39,.8);--surface:#1e2939;--line:#364153;--text:#d1d5dc;--muted:#99a1af;--emphasis:#fff;--accent:#ff2357;--accent-2:#e30076;--link:#ff667f;--link-soft:#ffa2ae;--info:#6A9CE5;--kufar:#00AD64;--accent-soft:rgba(255,35,87,.14);--accent-ghost:rgba(255,35,87,.1);--accent-line:rgba(255,35,87,.45);--accent-hover-line:rgba(255,35,87,.3);--accent-shadow:rgba(255,35,87,.35);--accent-shadow-2:rgba(255,35,87,.5);--accent-shadow-3:rgba(255,35,87,.36);--accent-wisp:rgba(255,35,87,.07);--info-line:rgba(106,156,229,.45);--info-soft:rgba(106,156,229,.12);--info-ghost:rgba(106,156,229,.1);--muted-soft:rgba(153,161,175,.12);--muted-line:rgba(153,161,175,.3);--link-soft-line:rgba(255,162,174,.4);--menu-shadow:rgba(0,0,0,.55);--kufar-soft:rgba(0,173,100,.16);--kufar-line:rgba(0,173,100,.4)}

body{margin:0;overflow-x:clip;font:16px/1.55 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
[hidden]{display:none !important}   /* .side-nav/.top-nav/.top-profile set
                                       display:flex — the attribute must
                                       always win */

/* KufarScrap-275 — the dashboard shell: sidebar (desktop) + content column;
   the sidebar is hidden by default (mobile keeps the topbar) */
.shell{min-height:100vh}
.col{min-width:0}
.side{display:none}
@media (min-width:820px){
  .shell{display:grid;grid-template-columns:15rem minmax(0,1fr)}
  .side{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 12px;border-right:1px solid var(--surface)}
  /* K-279: the topbar renders on ALL viewports — on desktop it is the slim
     top-right profile bar (the sidebar keeps brand+nav+foot) */
  .top .brand, .top .top-nav{display:none}
  .top-inner{padding:8px 20px}
  /* K-295: the desktop crumb trail (mockup footer formats) */
  .crumbs{display:flex}
}
main{max-width:1280px;margin:0 auto;padding:20px}
h1{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.5rem;font-weight:700;color:var(--emphasis);letter-spacing:-.025em;margin:28px 0 12px}
a{color:var(--link);transition:color .15s ease}
a:hover{color:var(--link-soft)}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
button{font:inherit;cursor:pointer}

/* mobile topbar — the landing topbar treatment (translucent sticky) */
.top{position:sticky;top:0;z-index:20;background:var(--bg-veil);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--surface)}
.top-inner{max-width:1280px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:6px 16px;flex-wrap:wrap}
.top-nav{display:flex;gap:4px;flex-wrap:wrap}
.top-profile{margin-left:auto}
/* K-295: the crumb trail is desktop-only (muted small text, the ›
   separator rides the CSS content) */
.crumbs{display:none;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
.crumb-sep::before{content:"›"}
.crumb-root,.crumb-here{flex:none}

/* K-295 sidebar — brand row with the small square mark, the uppercase
   section label, the nav rail and the foot pushed to the bottom */
.side-brand{padding:4px 8px 12px;display:flex;align-items:center;gap:10px}
.side-logo{display:block;width:1.75rem;height:1.75rem;border-radius:6px}
.side-section{padding:10px 8px 4px;color:var(--muted);font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-foot{margin-top:auto;padding:16px 8px 4px;display:flex;flex-direction:column;gap:12px}
.side-help{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.side-help-q{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--kufar-soft);color:var(--kufar);font-weight:700;font-size:.9rem}
.side-help-title{font-weight:600;color:var(--emphasis);font-size:.95rem}
.side-help-text{margin:0;color:var(--muted);font-size:.85rem;line-height:1.4}
/* the green contact link — a positive confirmation per manager 06.10 */
.side-help-link{color:var(--kufar);font-weight:600;font-size:.9rem;text-decoration:none}
.side-help-link:hover{color:var(--kufar);text-decoration:underline}
/* the quiet duplicate logout (manager 11) — a 44px quiet button */
.side-logout{background:transparent;border:1px solid transparent;color:var(--muted);min-height:44px;box-sizing:border-box;border-radius:8px;padding:0 10px;display:flex;align-items:center;font:inherit;font-size:.95rem;cursor:pointer;text-align:left}
.side-logout:hover{color:var(--emphasis)}
.side-copy{margin:0;color:var(--muted);font-size:.8rem;border-top:1px solid var(--surface);padding-top:12px}
.side-about{margin:0;color:var(--muted);font-size:.8rem;line-height:1.4}
.brand{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-weight:700;font-size:1.25rem;color:var(--emphasis)}
.brand-tld{color:var(--accent)}
/* .nav-link tap targets are >= 44px (KufarScrap-270, the K-269 verification
   criterion re-pinned, rides the renamed class): border-box min-height makes
   the WHOLE button the 44px target (content-box would inflate it to 60px),
   flex centers the label. K-295: gap for icon+label, the live count pill on
   the hub item. */
.nav-link{background:transparent;border:1px solid transparent;color:var(--muted);padding:7px 14px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;gap:10px;border-radius:9999px;font:inherit;font-size:.95rem;font-weight:600;line-height:1.2;cursor:pointer;text-align:left;transition:color .15s ease}
.nav-link:hover{color:var(--emphasis)}
.nav-link svg{width:1.15rem;height:1.15rem;fill:currentColor;flex:none}
.nav-label{overflow-wrap:anywhere;text-align:left}
.nav-count{margin-left:auto;font-size:.75rem;line-height:1;color:var(--muted);background:var(--muted-soft);border-radius:9999px;padding:4px 8px}
.nav-count:empty{display:none}
/* the active item is the K-252 rose family — no new hex */
.nav-link.active{background:var(--accent-soft);color:var(--emphasis);border-color:var(--accent-line)}

/* K-279 profile — ONE compact top-right mount (supersedes the K-275
   sidebar-foot pair; K-295 the foot returns but stays NOT the profile):
   avatar-only chip, the menu opens DOWNWARD from the top-right corner and
   holds the identity (@username, the honest re-login hint) + the two logout
   routes. */
.profile{position:relative}
.profile-btn{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;background:transparent;border:none;border-radius:9999px;padding:0;cursor:pointer}
.profile-btn:hover{background:var(--accent-ghost)}
.profile-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 48px -12px var(--menu-shadow);min-width:13rem;padding:6px;z-index:30}
.profile-id{display:flex;flex-direction:column;gap:2px;padding:8px 12px 6px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.profile-name{color:var(--emphasis);font-weight:600;overflow-wrap:anywhere}
.profile-hint{color:var(--muted);font-size:.75rem;line-height:1.3}
.menu-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:var(--text);font:inherit;padding:9px 12px;border-radius:8px;cursor:pointer}
.menu-item:hover{background:var(--accent-ghost);color:var(--emphasis)}

/* buttons — the landing pills: gradient CTA, dark secondary, rose danger */
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--emphasis);border:none;border-radius:9999px;padding:9px 20px;font-weight:600;line-height:1.2;text-decoration:none;box-shadow:0 5px 14px -6px var(--accent-shadow);transition:box-shadow .15s ease,filter .15s ease}
.btn:hover{box-shadow:0 9px 22px -4px var(--accent-shadow-2);filter:brightness(1.06)}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:9999px;padding:8px 16px;font-weight:600;line-height:1.2;transition:border-color .15s ease,color .15s ease}
.btn-secondary:hover{border-color:var(--accent-hover-line);color:var(--emphasis)}
.chip-on{border-color:var(--accent-line);background:var(--accent-soft);color:var(--emphasis)}
.guide-chip{padding:7px 14px}
.btn-danger{background:transparent;color:var(--link);border:1px solid var(--accent-line);border-radius:9999px;padding:8px 16px;font-weight:600;line-height:1.2;transition:background-color .15s ease,color .15s ease}
.btn-danger:hover{background:var(--accent-ghost);color:var(--link-soft)}
.btn-link{background:transparent;border:none;color:var(--muted);padding:6px 8px;font-size:.9rem;text-decoration:underline;cursor:pointer}
.btn-link:hover{color:var(--emphasis)}
/* K-295: the solid green pill — primary actions (the plan-card renew route),
   same family as .btn-kufar without the mark */
.btn-green{display:inline-block;background:var(--kufar);color:var(--emphasis);border:none;border-radius:9999px;padding:6px 14px;font-weight:600;font-size:.9rem;line-height:1.2;text-decoration:none;transition:filter .15s ease}
.btn-green:hover{filter:brightness(1.08)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.sub-head{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.sub-label{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.05rem;font-weight:700;color:var(--emphasis);margin:0;overflow-wrap:anywhere}
.find-title{font-weight:700;color:var(--emphasis);flex:1;min-width:12rem}
.find-meta{color:var(--muted);font-size:.95rem;margin:4px 0 0}
.find-meta a{word-break:break-all}
.sub-hint{color:var(--muted);font-size:.9rem;margin:10px 0 0}
.reason-line{color:var(--muted);font-size:.9rem;margin:6px 0 0}
/* K-295 — dashboard search cards, the owner mockup element 5 (supersedes
   the K-279 photo-right composition): 2-up grid ≥820px (single card stays
   left — grid auto-placement), the photo is the LEFT SQUARE track
   (aspect-ratio:1) with object-fit:cover over an honest fallback; text
   buttons + the green Kufar link + the trash in ONE action row. */
.sub-grid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin:10px 0}
/* 2-up from the shell breakpoint; a single card stays left-aligned
   (auto-placement) */
@media (min-width:820px){.sub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sub{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:12px;align-content:start}
/* the parked deferred rows and any coverless card lose the photo track */
.sub-noimg{grid-template-columns:minmax(0,1fr)}
.sub-cover{position:relative;width:100%;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--line)}
.sub-cover .cover-img,.sub-cover .cover-fallback{position:absolute;inset:0}
.sub-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.dot{width:.85rem;height:.85rem;border-radius:50%;flex:none}
/* K-279: the green/red circle encodes exactly tracked/not-tracked */
.dot-on{background:var(--kufar)}
.dot-off{background:var(--accent)}
/* K-295: the status row — dot (or the muted pause square) + the state chip */
.sub-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub-state-ico{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:6px;background:var(--muted-soft);color:var(--muted);flex:none}
.sub-state-ico svg{width:1rem;height:1rem;fill:currentColor}
.sub-chips{display:flex;gap:6px;flex-wrap:wrap}
/* the honest meta line (city · price) — only when the payload carries one */
.sub-meta{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font-size:.9rem}
.sub-meta svg{width:1rem;height:1rem;fill:currentColor;flex:none}
/* the two big counters (mockup element 5) */
.sub-nums{display:flex;gap:24px;flex-wrap:wrap}
.num{display:inline-flex;align-items:baseline;gap:6px;min-width:0}
.num-val{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.3rem;font-weight:700;color:var(--emphasis);line-height:1.1}
.num-cap{color:var(--muted);font-size:.85rem}
.sub-rule{display:block;height:1px;background:var(--line)}
.sub-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sub-actions .btn-secondary{padding:7px 12px;font-size:.9rem}
.btn-kufar{display:inline-flex;align-items:center;gap:8px;background:var(--kufar);color:var(--emphasis);border:none;border-radius:9999px;padding:8px 16px;font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;transition:filter .15s ease}
.btn-kufar:hover{filter:brightness(1.08)}
.kufar-ico{display:block;height:1.05rem;width:auto}
.btn-ico{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;background:transparent;border:1px solid var(--line);border-radius:9999px;color:var(--muted);cursor:pointer;box-sizing:border-box;transition:color .15s ease,border-color .15s ease}
.btn-ico:hover{color:var(--emphasis);border-color:var(--accent-hover-line)}
.btn-ico svg{width:1.15rem;height:1.15rem;fill:currentColor}
.btn-ico-del{border-color:transparent}
.btn-ico-del:hover{color:var(--link);border-color:transparent}
/* K-295: the trash rides the action row, pushed to the end (the quiet
   borderless variant stays btn-ico-del) */
.sub-del-btn{margin-left:auto}
.sub-foot{margin:0;color:var(--muted);font-size:.85rem}
/* the narrow phones: the photo track squeezes first (4.5rem square), the
   Kufar button label steps down (.85rem) — nothing overflows 360px */
@media (max-width:479.98px){
  .sub{grid-template-columns:4.5rem minmax(0,1fr)}
  .btn-kufar{font-size:.85rem;padding:6px 10px}
}

/* KufarScrap-291 — the search-setup wizard (the ONE add surface): the K-252
   tokens only; every interactive control rides the 44px border-box target */
.add-input{display:block;width:100%;box-sizing:border-box;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;margin:10px 0 12px}
.preset-btn{padding:5px 12px;font-size:.9rem}
/* KufarScrap-310: the wizard card widens to the mockup's 780px measure */
.wizard{max-width:780px}
.wizard-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* KufarScrap-310 — the 3-phase stepper: circles + connectors; done = check +
   crimson outline, active = filled crimson + glow, pending = muted; labels
   hide on narrow phones (the circles alone still read the phase) */
.wstepper{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.wstep-node{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.85rem;flex:none}
.wstep-circle{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:.8rem;font-weight:600;flex:none}
.wstep-circle svg{width:1rem;height:1rem;fill:currentColor}
.wstep-label{white-space:nowrap}
.wstep-line{flex:1;min-width:12px;height:2px;border-radius:1px;background:var(--line)}
.wstep-done{color:var(--text)}
.wstep-done .wstep-circle{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.wstep-on{color:var(--emphasis);font-weight:600}
.wstep-on .wstep-circle{background:var(--accent);border-color:var(--accent);color:var(--emphasis);box-shadow:0 0 0 4px var(--accent-ghost)}
.wstep-pending{color:var(--muted)}
@media (max-width:479.98px){.wstep-label{display:none}}
.wstep{animation:wstep-in .25s ease}
@keyframes wstep-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.wstep{animation:none}.wizard-cta.cta-accent{animation:none}}
.wizard h2{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.15rem;font-weight:700;color:var(--emphasis);margin:18px 0 4px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
/* KufarScrap-310: the retiled category tiles — icon over title over sub; a
   tap SELECTS (crimson border + tint), the footer button dispatches */
.vtile{min-height:44px;box-sizing:border-box;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:3px}
.vtile:hover{border-color:var(--accent-hover-line)}
.vtile-ico{font-size:1.6rem;line-height:1.15}
.vtile-title{font-weight:600;color:var(--emphasis)}
.vtile-sub{color:var(--muted);font-size:.85rem;line-height:1.35}
.vtile-on{border-color:var(--accent);background:var(--accent-wisp)}
.vtile-on .vtile-title{color:var(--emphasis)}
/* KufarScrap-310 — the probe row + the honest result line (green = accepted,
   rose = the refusal/temp terminals; the K-252 tokens only) */
.probe-row{display:flex;gap:8px;align-items:flex-start}
.probe-row .add-input{flex:1;min-width:0;margin:0}
.probe-row .btn-secondary{flex:none;min-height:44px;box-sizing:border-box}
.probe-line{margin:8px 0 0}
.probe-ok{color:var(--kufar)}
.probe-err{color:var(--link)}
/* KufarScrap-310 — the cheat-sheet (open by default) and the constructor
   paste fold; both are unstyleable-<details> companions with crimson-tinted
   summaries */
.wcheat{border:1px solid var(--accent-line);background:var(--accent-wisp);border-radius:10px;margin:14px 0 0}
.wcheat summary{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:8px 14px;font-weight:600;color:var(--emphasis);cursor:pointer}
.wcheat ol{margin:0;padding:0 14px 12px 36px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.wfold{border:1px solid var(--line);border-radius:10px;margin:16px 0 0}
.wfold summary{display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:8px 14px;font-weight:600;color:var(--link);cursor:pointer}
.wfold .guide-label{display:block;padding:2px 14px 0}
.wfold .probe-row{padding:8px 14px 0}
.wfold .probe-line{margin:8px 14px 0}
.wfold .wguide-card{margin:12px 14px 14px}
/* KufarScrap-310 — the guide-card link block (crimson-tinted, one anchor) */
.wguide-card{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--accent-line);background:var(--accent-wisp);border-radius:10px;padding:12px 14px;text-decoration:none;transition:border-color .15s ease}
.wguide-card:hover{border-color:var(--accent)}
.wguide-ico{font-size:1.4rem;line-height:1.2;flex:none}
.wguide-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.wguide-title{color:var(--emphasis);font-weight:600}
.wguide-text{color:var(--muted);font-size:.9rem}
/* KufarScrap-310 — the ONE wizard footer bar: close/back left, the phase
   label + the primary action right */
.wfooter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 0;flex-wrap:wrap}
.wfooter button{min-height:44px;box-sizing:border-box}
.wfooter-right{display:flex;align-items:center;gap:12px;margin-left:auto}
.wstep-of{color:var(--muted);font-size:.95rem}
.wchips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.wchips button{min-height:44px;box-sizing:border-box}
.wsummary{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px;margin:10px 0}
.wsummary .btn,.wsummary .btn-secondary{align-self:flex-start;margin-top:4px}
.wsum-row{display:flex;gap:10px}
.wsum-label{color:var(--muted);min-width:6rem}
.wsum-value{color:var(--text);overflow-wrap:anywhere;min-width:0}
.wout{border:1px solid var(--line);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin:10px 0}
.wout p{margin:0}
.wout-ok{border-color:var(--kufar)}
.draft-row{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.draft-row button{min-height:44px;box-sizing:border-box}
.draft-note{color:var(--muted);font-size:.9rem}
.wnote{color:var(--link-soft)}
.notg{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.notg a{color:var(--link)}
.wlink{padding:2px 0}
.where{margin-top:14px}
.where h3,.notg h3{margin:0 0 2px;font-size:1.05rem;color:var(--emphasis)}
.where p{margin:0 0 6px}
.wizard-cta.cta-accent{animation:cta-pulse 1.6s ease 2}
@keyframes cta-pulse{50%{box-shadow:0 0 0 4px var(--kufar-line)}}
/* KufarScrap-310: the add CTA is CRIMSON per the new mockup (supersedes the
   K-295 green for this button only — the gradient pill is the default .btn,
   the one-time pulse keeps its K-291 token family) */
.wizard-cta{box-shadow:none}
.wizard-cta:hover{box-shadow:none;filter:brightness(1.06)}
.btn-ico-edit{color:var(--link-soft)}
.btn-ico-edit:hover{color:var(--link-soft);border-color:var(--link-soft-line)}

/* KufarScrap-285 — the SMS demand-study plaque (dashboard): the add-form
   card language, no new palette tokens */
.sms-plaque{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.sms-plaque h2{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.15rem;font-weight:700;color:var(--emphasis);margin:0 0 4px}
.sms-plaque .btn{margin-top:10px}
/* constructor (KufarScrap-260, wizard step since K-291) — stepwise,
   mobile-first, K-252 tokens; no internal step counter (the wizard header
   owns counting) */
.guide{margin-top:16px}
.guide-box{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px}
/* KufarScrap-310: a winning link mutes the constructor form (the inputs are
   disabled too — the class only paints the honest state) */
.ctor-muted{opacity:.5}
.guide-title{margin:0;font-weight:600;color:var(--emphasis)}
.guide-row{display:flex;flex-wrap:wrap;gap:8px}
.guide-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.guide-label{color:var(--muted);font-size:.9rem}
.guide-select{background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:8px 10px}
.guide-city-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:auto;max-height:220px}
.guide-city-list button{background:transparent;border:none;color:var(--text);text-align:left;font:inherit;padding:9px 12px;cursor:pointer}
.guide-city-list button:hover{background:var(--accent-ghost)}
.guide-empty{margin:0;color:var(--muted);font-size:.9rem}
.guide-note{margin:0;color:var(--muted);font-size:.9rem}
.guide-actions{margin-top:2px}

/* chips — semantic states in landing tokens; no nowrap: the long honest
   markers (suspect/degraded) must wrap, never force horizontal scroll */
.chip{display:inline-block;border-radius:9999px;padding:2px 10px;font-size:.8rem;font-weight:600;border:1px solid transparent}
.chip-active{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.chip-muted{background:var(--muted-soft);color:var(--muted);border-color:var(--muted-line)}
.chip-warn{background:var(--accent-wisp);color:var(--link-soft);border-color:var(--accent-hover-line)}
.chip-failed{background:var(--accent-soft);color:var(--link);border-color:var(--accent-line)}
/* K-295: the plan-card pill — green text on the soft green ground (a
   positive confirmation per manager 06.10) */
.chip-pill{background:var(--kufar-soft);color:var(--kufar)}

/* honest banners */
.error-line{color:var(--link);font-size:.95rem;margin:10px 0 0}
.offline{background:var(--surface);border:1px solid var(--accent-line);color:var(--text);border-radius:10px;padding:18px;margin:16px 0}
.offline .btn{margin-top:12px}

/* confirm modal (replaces the unstyleable window.confirm) */
.modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg-ghost);padding:20px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 24px 48px -12px var(--menu-shadow);max-width:26rem;width:100%;padding:20px}
.modal-text{margin:0 0 16px;color:var(--text)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* KufarScrap-310 — the guest dashboard (replaces the K-291 login screen):
   the dashed add tile is the working zone, the searches card + the 2-up
   locked lines are the honest login-only surfaces */
.guest{max-width:44rem}
.guest-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;box-sizing:border-box;border:2px dashed var(--accent-line);background:var(--accent-wisp);border-radius:12px;padding:22px 20px;margin:16px 0 0;font:inherit;cursor:pointer;text-align:left;transition:border-color .15s ease}
.guest-tile:hover{border-color:var(--accent)}
.guest-tile svg{width:2rem;height:2rem;fill:var(--accent);margin-bottom:4px}
.guest-tile-title{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.15rem;font-weight:700;color:var(--emphasis)}
.guest-tile-text{color:var(--muted);font-size:.95rem;line-height:1.45}
.guest-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.guest-card .guest-lock-text{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.guest-locks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.guest-lock{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--muted);font-size:.9rem}
.lock-ico{display:inline-flex;flex:none}
.lock-ico svg{width:1.1rem;height:1.1rem;fill:currentColor}
.guest-login{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px}
/* the guest chrome: muted disabled nav items with the lock glyph */
.nav-locked{color:var(--muted);opacity:.6;cursor:default}
.nav-locked:hover{color:var(--muted)}
/* KufarScrap-310 — the authed dashboard: the centered empty card and the
   dashed add tile in the K-279 card grid */
.hub-empty-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px 20px;margin:10px 0;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hub-empty-icon{font-size:2rem;line-height:1.2}
.hub-empty-card h2{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.15rem;font-weight:700;color:var(--emphasis);margin:6px 0 0}
.hub-empty-card p{margin:0;color:var(--muted);max-width:36rem}
.hub-empty-card .btn{margin-top:8px;min-height:44px;box-sizing:border-box}
.sub-tile-add{display:flex;flex-direction:column;align-items:flex-start;gap:4px;justify-content:center;min-height:44px;box-sizing:border-box;border:2px dashed var(--accent-line);background:transparent;border-radius:10px;padding:14px;font:inherit;cursor:pointer;text-align:left;transition:border-color .15s ease}
.sub-tile-add:hover{border-color:var(--accent)}
.sub-tile-add svg{width:1.5rem;height:1.5rem;fill:var(--accent);margin-bottom:2px}
.sub-tile-title{font-weight:600;color:var(--emphasis)}
.sub-tile-text{color:var(--muted);font-size:.9rem}
/* the wide full-width CTA (the anon wizard save leg) */
.btn-wide{display:block;width:100%;box-sizing:border-box;text-align:center;padding:11px 20px;min-height:44px}

/* tariffs — the landing tariff-card mirror */
.tariffs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:12px}
.tariffs li{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;transition:border-color .15s ease,box-shadow .15s ease}
.tariffs li:hover{border-color:var(--accent-hover-line);box-shadow:0 10px 24px -10px var(--accent-shadow)}
.t-name{font-weight:700;font-size:1.05rem;color:var(--emphasis)}
.t-price{font-size:1.45rem;font-weight:700;color:var(--accent)}
.t-meta{color:var(--muted);font-size:.95rem}
.t-note{color:var(--muted);font-size:.95rem;margin:14px 0 0}

/* payment state section (K-273 → K-275) — the invoice state rows inside
   the tariffs view */
.pay-section{margin:20px 0 0}
.pay-row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px solid var(--line)}
.pay-account{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);user-select:all}
.pay-deadline{font-size:.8rem;color:var(--muted)}
.pay-qr{display:block;max-width:8rem;background:var(--emphasis);padding:6px;border-radius:8px}
.t-pay{margin-top:8px}
.t-pay-note{font-size:.8rem}

/* empty states + footer */
.empty{color:var(--muted);margin:24px 0}
.more-row{margin:16px 0}
footer{border-top:1px solid var(--surface)}

/* K-279 — the panel footer IS the landing footer block (ONE generation
   source: kfs.landing.landing_footer_html injected by webapp._index; the
   self-referential «Настроить поиск» link is dropped inside the panel).
   The landing's .lp-scoped rules, unscoped for the cabinet shell and RULE-
   PARITY-PINNED to the landing sheet (test_cabinet_style) — a drift here is
   the HTML-parity gap the wave was meant to close. The pay rules stay
   .lp-foot-scoped: the cabinet's own K-273 invoice rows own the bare
   .pay-row. */
.lp-foot{padding:28px max(20px,calc(50% - 640px))}
.lp-foot-in{display:flex;flex-direction:column;align-items:center;gap:16px}
.lp-foot-copy{margin:0;color:var(--muted);font-size:.85rem}
.lp-foot-links{margin:0}
.lp-foot-side{display:flex;align-items:center;justify-content:center;gap:14px}
/* K-313: the quiet «GitHub» footer link — the same rules as the landing
   sheet (footer .foot-gh / :hover), mirrored for rule parity. */
footer .foot-gh{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none}
footer .foot-gh:hover{color:var(--link-soft)}
@media (max-width:767.98px){
  .lp-foot-side{flex-direction:column-reverse;order:-1;gap:16px}
  .foot-gh{order:-1}
  .lp-foot-copy{order:1}
  .lp-foot .cta{padding:16px 32px}
}
@media (min-width:768px){
  .lp-foot{padding:36px max(20px,calc(50% - 640px))}
  .lp-foot-in{flex-direction:row;justify-content:space-between;align-items:center;gap:14px 24px;flex-wrap:wrap;text-align:left}
  .lp-foot-side{gap:18px}
}
/* scoped under .lp-foot: the cabinet's own K-273 invoice rows own .pay-row */
.lp-foot .pay-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.lp-foot .pay-mark{display:inline-flex;align-items:center;background:var(--emphasis);border-radius:8px;padding:5px 9px;opacity:.85}
.lp-foot .pay-row svg{height:1.1rem;width:auto;display:block}
.lp-foot .pay-row img{height:1rem;width:auto;display:block}
.cta{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--emphasis);padding:14px 32px;border-radius:9999px;font-weight:600;text-decoration:none;box-shadow:0 9px 22px -4px var(--accent-shadow-3);transition:box-shadow .15s ease,filter .15s ease}
.cta:hover{box-shadow:0 11px 26px -4px var(--accent-shadow-2);filter:brightness(1.06)}
.cta:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* KufarScrap-269/275 → K-295 — the hub stat row, avatar, covers, per-search
   finds. Only the captured K-252 tokens; the plan status is the honest pill
   (green active / pale-rose expired) inside the plan card. */
.hub-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:28px 0 12px}
.hub-head-text{flex:1;min-width:12rem}
.hub-head h1{margin:0}
.hub-purpose{color:var(--muted);margin:4px 0 0}
/* the stat row (K-275, K-295 rework): auto-fit keeps it honest at any
   width, no fixed px */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:12px;margin:0 0 20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;transition:border-color .15s ease}
a.stat:hover{border-color:var(--accent-hover-line)}
.stat-label{color:var(--muted);font-size:.85rem}
.stat-value{font-weight:700;color:var(--emphasis);font-size:1.15rem}
.stat-value-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stat-sub{color:var(--muted);font-size:.9rem}
.stat-sub b{color:var(--emphasis)}
/* K-295: the plan card's green renew route + the live-invoice marker */
.stat-inv{color:var(--info);font-size:.9rem;text-decoration:underline}
/* the tab row (K-295): segmented pills, 44px targets */
.hub-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.hub-tab{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9999px;padding:8px 14px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.hub-tab:hover{color:var(--emphasis)}
.hub-tab.active{background:var(--accent-soft);color:var(--emphasis);border-color:var(--accent-line)}
.hub-tab-count{color:var(--muted);font-size:.8rem}
/* the freshness row + the honest footnote (K-295) */
.hub-fresh{display:flex;align-items:center;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin:12px 0 0}
.hub-footnote{color:var(--muted);font-size:.85rem;margin:16px 0 0}
.hub-searches{margin:0 0 8px}
/* K-295: the Telegram banner — the single honest chat surface (surface
   card: title row + badge + line + the contour button; wraps) */
.tg-banner{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.tg-banner-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tg-banner-head h2{font-family:Montserrat,Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.15rem;font-weight:700;color:var(--emphasis);margin:0}
.tg-banner-line{margin:0;color:var(--text);font-size:.95rem}
.tg-banner .btn-secondary{align-self:flex-start}
/* the settings stub view (K-295) */
.settings-pointer{color:var(--muted);font-size:.95rem;margin:8px 0}
.avatar{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--line);overflow:hidden;flex-shrink:0}
.avatar-img{display:block;width:100%;height:100%;object-fit:cover}
.avatar-fallback{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-weight:700;color:var(--text);font-size:1.1rem}
.cover{display:block;width:100%;height:9rem;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--line);margin:0 0 8px}
.cover-img{display:block;width:100%;height:100%;object-fit:cover}
.cover-fallback{display:block;width:100%;height:100%;background:var(--line)}
.find-photo{display:block;width:100%;height:12rem;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--line);margin:0 0 8px}