/* Стили эталона dashboard/design/sales/index.html, вынесены из HTML ради CSP (§1.2 плана). */
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/Manrope-500.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/Manrope-600.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/Manrope-700.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/Manrope-800.woff2) format("woff2")}
:root{
  --dark:#1F6B4A; --dark-2:#164F37; --white:#FFFFFF;
  --bg:#F3F4F6; --line:#E5E7EB; --line-2:#D1D5DC;
  --muted:#6B7280; --text-2:#4B5563; --ink:#111418;
  --green:#00A63E; --amber:#FCC800; --red:#E7000B;
  --mint:#E7F5EE; --sand:#FEF6E0; --blush:#FDEAEA; --sky:#E9F3EE;
  --base-bar:#CFE3D8;
  --f:"Manrope",system-ui,-apple-system,sans-serif;
  --r:20px; --r-sm:14px;
  --sh:0 1px 2px rgba(17,20,24,.04), 0 8px 24px rgba(17,20,24,.05);
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-size:15px;line-height:1.45;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;cursor:pointer}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.up{color:var(--green)} .down{color:var(--red)} .flat{color:var(--text-2)}
.card.dark .up{color:#5EE9A0} .card.dark .down{color:#FF8A8A}

/* ── каркас ─────────────────────────────── */
.app{display:flex;min-height:100vh}
.wrap{display:flex;flex-direction:column}
.wrap>.bar{order:0}.wrap>.top{order:1}.wrap>.periods{order:2}.wrap>.dates{order:3}.wrap>.demo{order:4}.wrap>.alert{order:5}
.grid2{display:contents}
.grid2>.hero{order:6}.wrap>.tiles{order:7}.grid2>.card:not(.hero){order:8}
.grid3{display:contents}
.grid3>div{display:contents}
#points-card{order:9}#groups-card{order:10}#pay-card{order:11}
.side{display:none}
.main{flex:1;min-width:0;padding:12px 14px calc(var(--nav-h) + 20px)}
.wrap{max-width:1180px;margin:0 auto}

/* верхняя строка: точка и пользователь */
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;box-shadow:var(--sh)}
.chip .caret{color:var(--muted);font-size:11px}
.scope{position:relative}
.menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--white);border-radius:var(--r-sm);
  box-shadow:0 8px 30px rgba(17,20,24,.16);padding:6px;z-index:25}
.menu[data-open="true"]{display:block}
.menu button{display:flex;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;gap:8px;align-items:center}
.menu button:hover{background:var(--bg)}
.menu button[aria-checked="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dark)}
.menu button[aria-checked="false"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line)}
.user{display:inline-flex;align-items:center;gap:8px;font-size:13px}
.user .who{text-align:right;line-height:1.15}
.user .who b{display:block;font-weight:700}
.user .who span{color:var(--text-2);font-size:12px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:800}

/* заголовок раздела */
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}
.top h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.top .date{font-size:13px;font-weight:500;color:var(--text-2);margin-top:3px}
.ask{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#fff;
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;white-space:nowrap;box-shadow:var(--sh)}
.ask:hover{background:var(--dark-2)}
.ask .dot{width:7px;height:7px;border-radius:50%;background:#5EE9A0}

/* периоды */
.periods{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
  position:sticky;top:0;z-index:5;background:var(--bg);padding-top:4px}
.periods::-webkit-scrollbar{display:none}
.periods button{font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--white);color:var(--text-2);white-space:nowrap}
.periods button[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.periods .custom-btn{border-style:dashed}
.periods .refresh{margin-left:auto}
.periods .refresh+.gear{margin-left:0}
.periods .gear{margin-left:auto;width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:50%;flex:none}
.dates{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--text-2);margin:8px 0 14px}
.dates>span{white-space:nowrap}
.dates b{color:var(--ink);font-weight:600}
.dates .meta{color:var(--muted)}
.dates .sw{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.demo-states{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:6px}
.demo-states button{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid #FBE3A4;color:#7A5A00}
.demo-states button[aria-pressed="true"]{background:#7A5A00;color:#fff;border-color:#7A5A00}
.alert{display:flex;gap:10px;align-items:flex-start;background:var(--blush);border:1px solid #F5C2C2;color:#8A1C1C;border-radius:var(--r-sm);padding:12px 14px;font-size:13px;font-weight:600;margin-bottom:12px}
.alert[hidden]{display:none}
.alert span{font-weight:500;color:#6A2A2A}
body[data-state="first-error"] .grid2,body[data-state="first-error"] .tiles,body[data-state="first-error"] .grid3{display:none}
body[data-state="loading"] .refresh svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.alert .retry{margin-left:auto;font-weight:700;color:#8A1C1C;text-decoration:underline;white-space:nowrap}
.skel .val,.skel .tile .v,.skel .row2 .v,.skel .grp .head .v,.skel .fin .row .v{color:transparent!important;background:var(--line);border-radius:8px}
.card.dark.skel .val,.skel .fin .row .v{background:rgba(255,255,255,.18)}
.skel .chg,.skel .cap,.skel .tile .d,.skel .row2 .d,.skel .grp .head .d,.skel .fin .row .d{visibility:hidden}
.skel .chart svg{opacity:.25}
.demo{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;font-weight:600;color:#7A5A00;background:var(--sand);
  border:1px solid #FBE3A4;border-radius:10px;padding:5px 10px;margin-bottom:12px}

/* карточки */
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:12px}
.card.dark{background:var(--dark);color:#fff}
.chead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.chead h2{font-size:17px;font-weight:600;letter-spacing:-.01em}
.chead .sub{font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}
.card.dark .chead .sub{color:rgba(255,255,255,.8)}
.arrow{width:34px;height:34px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;
  font-size:15px;flex:none;transition:transform .2s}
.card.dark .arrow{background:rgba(255,255,255,.14);color:#fff}
.arrow[aria-expanded="true"]{transform:rotate(180deg)}

/* итог */
.hero .val{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1}
.hero .val small{font-size:.42em;font-weight:600;opacity:.65;margin-left:6px}
.hero .chg{display:flex;align-items:baseline;gap:10px;margin-top:10px;flex-wrap:wrap}
.hero .chg b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.hero .chg .pct{font-size:20px;font-weight:500;font-style:normal;letter-spacing:-.01em}
.hero .chg span{font-size:13px;font-weight:600;color:rgba(255,255,255,.86)}
.hero .cap{font-size:13px;font-weight:500;color:rgba(255,255,255,.86);margin-top:8px}
.fin{display:none;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16)}
.fin[data-open="true"]{display:block}
.fin h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:8px}
.fin .row{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
.fin .row:last-child{border:0}
.fin .row .l{color:rgba(255,255,255,.85)} .fin .row .v{font-weight:700} .fin .row .d{font-weight:700;min-width:70px;text-align:right}
.fin .note{font-size:12px;color:rgba(255,255,255,.8);margin-top:8px}

/* плитки */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.tile{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.tile .t{font-size:13px;font-weight:600;color:var(--text-2)}
.tile .v{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:8px}
.tile .v small{font-size:.5em;font-weight:600;color:var(--muted);margin-left:3px}
.tile .d{font-size:13px;font-weight:700;margin-top:6px}
.tile .d span{font-weight:500;color:var(--text-2)}

/* переключатели */
.seg{display:inline-flex;background:var(--bg);border-radius:999px;padding:3px;gap:2px}
.seg button{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--text-2)}
.seg button[aria-pressed="true"]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.ctrls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}

/* график */
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block}
.chart .bar-cur{fill:var(--dark)} .chart .bar-base{fill:var(--base-bar);stroke:var(--dark);stroke-width:1}
.chart .grid{stroke:var(--line);stroke-width:1} .chart .axis{font-size:11px;fill:var(--text-2);font-family:var(--f)}
.chart .hit{fill:transparent}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;line-height:1.35;padding:8px 10px;
  border-radius:10px;box-shadow:var(--sh);display:none;min-width:150px;z-index:3}
.tip b{font-weight:700} .tip .r{display:flex;justify-content:space-between;gap:12px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2);margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.legend i.cur{background:var(--dark)} .legend i.base{background:var(--base-bar);border:1px solid var(--dark)}

/* списки */
.rows{display:flex;flex-direction:column}
.row2{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.row2:last-child{border:0}
.row2 .n{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row2 .s{font-size:12px;color:var(--text-2);grid-column:1}
.row2 .v{font-weight:700;text-align:right}
.row2 .d{font-size:12px;font-weight:700;text-align:right;grid-column:2}
.row2 .d span{color:var(--text-2);font-weight:500}
.share{height:6px;border-radius:3px;background:var(--bg);overflow:hidden;grid-column:1/-1}
.share i{display:block;height:100%;background:var(--dark);border-radius:3px}

/* точки: кольцо */
.pts{display:flex;gap:16px;align-items:center}
.ring{width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--dark) 0 77.4%, var(--base-bar) 77.4% 100%)}
.ring i{width:60px;height:60px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-style:normal;font-size:15px;font-weight:800}
.pts .rows{flex:1;min-width:0}
#points-card[hidden]{display:none}

/* группы и товары */
.grp{border-bottom:1px solid var(--line)}
.grp:last-child{border:0}
.grp .head{display:grid;grid-template-columns:22px 1fr auto;gap:8px 10px;align-items:center;padding:11px 0;width:100%;text-align:left}
.grp .head .tri{color:var(--muted);font-size:11px;transition:transform .2s}
.grp[data-open="true"] .head .tri{transform:rotate(90deg)}
.grp .head .n{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp .head .v{font-weight:700;text-align:right}
.grp .head .d{grid-column:3;font-size:12px;font-weight:700;text-align:right}
.grp .head .s{grid-column:2;font-size:12px;color:var(--text-2)}
.grp .items{display:none;padding:0 0 8px 22px}
.grp[data-open="true"] .items{display:block}
.item{border-top:1px dashed var(--line)}
.item.agg .head{cursor:default;color:var(--text-2)}
.item .head{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:9px 0;width:100%;text-align:left;font-size:14px}
.item .head .n{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .head .v{font-weight:700;text-align:right}
.item .head .d{grid-column:2;font-size:12px;font-weight:700;text-align:right}
.item .head .s{grid-column:1;font-size:12px;color:var(--text-2)}
.detail{display:none;background:var(--bg);border-radius:var(--r-sm);padding:12px 14px;margin:4px 0 10px}
.item[data-open="true"] .detail{display:block}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.facts>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.facts .k{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.01em}
.facts b{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.facts b small,.facts i small{font-size:11px;font-weight:600;color:var(--muted)}
.facts i{font-style:normal;font-size:12px;font-weight:700}
.lines{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2);display:grid;gap:8px}
.line{display:flex;gap:10px;align-items:center;min-width:0}
.line .cls{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--white);border:1px solid var(--line);color:var(--ink);flex:none}
.line .cls.aa{background:var(--dark);color:#fff;border-color:var(--dark)}
.line .cls.none{color:var(--muted)}
.line .cls.shelf.ok{color:var(--green)} .line .cls.shelf.warn{color:var(--red);border-color:#F5C2C2;background:var(--blush)}
.line>div{min-width:0}
.line b{display:block;font-size:13px;font-weight:700;line-height:1.3}
.line>div>span{display:block;font-size:12px;color:var(--text-2);line-height:1.35}
.ask-link{display:block;margin-top:10px;font-size:13px;font-weight:700;color:var(--dark);padding:0}
.ask-link:hover{text-decoration:underline}
@media(min-width:1024px){
  .facts{grid-template-columns:repeat(4,1fr)}
  .lines{grid-template-columns:1fr 1fr;gap:12px}
}

/* нижняя навигация */
.nav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);background:var(--white);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-2)}
.nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button[aria-current="page"]{color:var(--dark)}

/* листы снизу */
.scrim{position:fixed;inset:0;background:rgba(17,20,24,.45);z-index:30;display:none}
.scrim[data-open="true"]{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--white);border-radius:22px 22px 0 0;z-index:31;
  padding:14px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;display:none;box-shadow:0 -8px 30px rgba(17,20,24,.15)}
.sheet[data-open="true"]{display:block}
.sheet .grab{width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:0 auto 12px}
.sheet h2{font-size:18px;font-weight:700;margin-bottom:4px}
.sheet .sub{font-size:13px;color:var(--text-2);margin-bottom:14px}
.field{padding:12px 0;border-bottom:1px solid var(--line)}
.field:last-of-type{border:0}
.field .lab{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:8px}
.field .opts{display:flex;flex-wrap:wrap;gap:8px}
.field .opts button{font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-2)}
.field .opts button[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
.dates-in{display:flex;align-items:center;gap:10px}
.dates-in input{font-family:inherit;font-size:14px;font-weight:600;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);flex:1;min-width:0}
.dates-in span{color:var(--muted)}
.sw{display:flex;justify-content:space-between;align-items:center;gap:12px}
.toggle{width:46px;height:28px;border-radius:14px;background:var(--line-2);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.toggle[aria-checked="true"]{background:var(--dark)} .toggle[aria-checked="true"]::after{left:21px}
.actions{display:flex;gap:10px;margin-top:16px}
.btn{flex:1;padding:12px;border-radius:999px;font-weight:700;font-size:14px;border:1px solid var(--line)}
.btn.primary{background:var(--dark);color:#fff;border-color:var(--dark)}
.ctx{background:var(--bg);border-radius:var(--r-sm);padding:12px 14px;font-size:13px;margin-bottom:14px}
.ctx b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);margin-bottom:6px}
.ctx div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.qs{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.qs button{text-align:left;padding:11px 14px;border:1px solid var(--line);border-radius:14px;font-weight:600;font-size:14px}
.qs button:hover{border-color:var(--dark)}
.more-list{display:grid;gap:6px}
.more-list button{display:flex;align-items:center;gap:14px;padding:12px 10px;border-radius:14px;text-align:left;width:100%}
.more-list button:hover{background:var(--bg)}
.more-list svg{width:22px;height:22px;stroke:var(--dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.more-list b{display:block;font-size:15px;font-weight:700}
.more-list small{display:block;font-size:12px;color:var(--text-2)}
.ask-in{display:flex;gap:8px}
.ask-in input{flex:1;font-family:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--line);border-radius:999px;outline:none}
.ask-in button{width:44px;height:44px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;flex:none}

/* ── компьютер ─────────────────────────────── */
@media(min-width:1024px){
  body{font-size:15px}
  .side{display:flex;flex-direction:column;width:232px;flex:none;background:var(--white);border-right:1px solid var(--line);
    position:sticky;top:0;height:100vh;padding:22px 14px}
  .side .logo{font-size:19px;font-weight:800;letter-spacing:-.02em;padding:0 10px 22px}
  .side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--text-2);text-decoration:none}
  .side a:hover{background:var(--bg)}
  .side a[aria-current="page"]{background:var(--dark);color:#fff}
  .side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .side .spacer{flex:1}
  .main{padding:22px 32px 40px}
  .nav{display:none}
  .top h1{font-size:32px}
  .periods{position:static;background:transparent}
  .wrap{display:block}
  .grid2{display:grid;grid-template-columns:minmax(360px,5fr) 7fr;gap:14px;margin-bottom:12px;align-items:stretch}
  .grid2 .card{margin:0}
  .grid2 .hero{display:flex;flex-direction:column}
  .grid2 .hero .fin{display:block;margin-top:auto;padding-top:18px}
  .grid2 .hero .arrow{display:none}
  .tiles{grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
  .tile .v{font-size:28px}
  .grid3{display:grid;grid-template-columns:5fr 7fr;gap:14px;align-items:start}
  .grid3>div{display:block}
  .grid3 .card{margin:0 0 14px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-50%);width:520px;border-radius:22px;max-height:84vh;
    padding:22px 24px}
  .sheet .grab{display:none}
  .sheet.side-panel{top:0;bottom:0;right:0;left:auto;transform:none;width:440px;border-radius:0;max-height:none;height:100vh}
}

/* Экран «Ещё → Настройки → Пользователи», эталон dashboard/design/settings-users/index.html */
input,select{font-family:inherit}
.app{display:flex;min-height:100vh}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2)}
.top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}
.primary-btn{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#fff;
  font-size:14px;font-weight:600;padding:11px 18px;border-radius:999px;white-space:nowrap;box-shadow:var(--sh)}
.primary-btn:hover{background:var(--dark-2)}
/* вкладки настроек */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--white);color:var(--text-2);white-space:nowrap}
.tabs button[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.pane{display:none}
.pane[data-active="true"]{display:block}
.card{background:var(--white);border-radius:var(--r);box-shadow:var(--sh);padding:18px;margin-bottom:12px}
.link{font-size:13px;font-weight:700;color:var(--dark);white-space:nowrap}
.link:hover{text-decoration:underline}
.link.danger{color:var(--red)}
/* строки пользователей */
.rows{display:flex;flex-direction:column}
.urow{display:grid;grid-template-columns:40px minmax(0,1fr) 14px;gap:3px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.urow:last-child{border:0}
.urow .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--sky);color:var(--dark);grid-row:span 3}
.urow .av.owner{background:var(--dark);color:#fff}
.urow .av.off{background:var(--bg);color:var(--muted)}
.urow .n{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.urow .n small{font-weight:500;color:var(--text-2);margin-left:6px}
.urow .st{grid-column:2;font-size:12px;font-weight:700}
.urow .st.ok{color:var(--green)}
.urow .st.off{color:var(--muted)}
.urow .st.warn{color:var(--red)}
.urow .s{grid-column:2;font-size:12px;color:var(--text-2)}
.urow .tri{grid-column:3;grid-row:1/4;text-align:right;color:var(--muted);font-size:12px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--text-2);vertical-align:1px}
.badge.owner{background:var(--dark);color:#fff}
.badge.new{background:var(--blush);color:#8A1C1C}
/* журнал входов */
.lrow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.lrow:last-child{border:0}
.lrow .w{font-weight:600}
.lrow .t{font-size:12px;color:var(--text-2);grid-column:1}
.lrow .r{text-align:right;font-size:12px;font-weight:700;white-space:nowrap}
.lrow .r.ok{color:var(--green)}
.lrow .r.bad{color:var(--red)}
.lrow .r.lock{color:#7A5A00}
.lrow .r small{display:block;font-weight:500;color:var(--text-2)}
/* источники */
.srow{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border:0}
.srow b{font-weight:700}
.srow span{font-size:12px;color:var(--text-2);grid-column:1}
.srow .link{grid-column:2;grid-row:1/3;align-self:center}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot.ok{background:var(--green)}
.dot.warn{background:var(--amber)}
.dot.bad{background:var(--red)}
/* заглушка "в разработке" */
.stub{padding:34px 18px;text-align:center;color:var(--text-2);font-weight:600}
/* листы */
.scrim{position:fixed;inset:0;background:rgba(17,20,24,.45);z-index:30;display:none}
.field input[type=text],.field input[type=password]{width:100%;font-size:15px;font-weight:600;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);color:var(--ink);outline:none}
.field input:focus{border-color:var(--dark)}
.field .hint{font-size:12px;color:var(--text-2);margin-top:6px}
.field .err{font-size:12px;color:var(--red);font-weight:600;margin-top:6px}
.btn.danger{color:var(--red);border-color:#F5C2C2}
.pwbox{display:flex;gap:8px;align-items:center;background:var(--bg);border-radius:12px;padding:10px 12px;font-size:17px;font-weight:800;letter-spacing:.04em}
.pwbox span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pwbox button{font-size:12px;font-weight:700;color:var(--dark);white-space:nowrap}
.sheet .note{background:var(--sand);border:1px solid #FBE3A4;color:#7A5A00;border-radius:var(--r-sm);padding:10px 12px;font-size:13px;font-weight:600;margin-top:10px}
.sessions .lrow .r{font-weight:700;color:var(--dark)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-bottom:12px}
.kv span{color:var(--text-2)}
.kv b{font-weight:700}
@media(min-width:1024px){
  .urow{grid-template-columns:40px minmax(0,1fr) auto 14px}
  .urow .av{grid-row:span 2}
  .urow .st{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
  .urow .tri{grid-column:4;grid-row:1/3}
}
@media(min-width:1024px){
  .side .logo{font-size:19px;font-weight:800;letter-spacing:-.02em;padding:0 10px 22px}
  .side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--text-2);text-decoration:none}
  .side a:hover{background:var(--bg)}
  .side a[aria-current="page"]{background:var(--dark);color:#fff}
  .side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .side .spacer{flex:1}
  .nav{display:none}
  .back{display:none}
  .grid2 .card{margin:0 0 14px}
}

/* Вход и обязательная смена пароля */
.login-wrap{max-width:420px;margin:8vh auto 0;padding:0 14px}
.login-wrap .logo{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;text-align:center}
.login-wrap .card{padding:22px}
.login-wrap .btn{width:100%;margin-top:14px}
.alert{background:var(--blush);color:#8A1C1C;border-radius:var(--r-sm);padding:10px 12px;font-size:13px;font-weight:600;margin-bottom:12px}
.owner-only,.manager-only{}

/* Ссылки в роли кнопок и навигации: та же геометрия, что у button в эталоне */
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--text-2);text-decoration:none}
.nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current="page"]{color:var(--dark)}
.more-list a{display:flex;align-items:center;gap:14px;padding:12px 10px;border-radius:14px;text-align:left;width:100%;color:inherit;text-decoration:none}
.more-list a:hover{background:var(--bg)}
.more-list a svg{width:22px;height:22px;stroke:var(--dark);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.more-list a b{display:block;font-weight:700}
.more-list a small{display:block;font-size:12px;color:var(--text-2)}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}
a.btn.primary{color:#fff}
a.urow{text-decoration:none;color:inherit}
.actions form{flex:1;display:flex}
.actions form .btn{flex:1}
.actions[data-column]{flex-direction:column}
.actions[data-tight]{margin-top:0}
.lab[data-tight],.hint[data-tight]{margin:0}
.opts a.opt{font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);text-decoration:none}
.opts a.opt[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
.sessions form{display:inline}
@media(min-width:1024px){ form.card{max-width:560px} }

/* Экран продаж: замены inline-стилей эталона (CSP default-src 'self') */
.sw-cur{background:var(--dark)} .sw-base{background:var(--base-bar);border:1px solid var(--dark)}
.periods a{font-size:14px;font-weight:500;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--text-2);white-space:nowrap;text-decoration:none}
.periods a[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff;font-weight:600}
.menu a{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;color:inherit;text-decoration:none}
.menu a:hover{background:var(--bg)} .menu a[aria-checked="true"]{color:var(--dark)}
.ring{background:none} .ring svg{position:absolute;width:84px;height:84px;transform:rotate(-90deg)} .ring{position:relative}
.ring-bg{fill:none;stroke:var(--base-bar);stroke-width:4} .ring-fg{fill:none;stroke:var(--dark);stroke-width:4;stroke-linecap:butt}
.ring i{position:relative}
.chart-v[hidden]{display:none}
.chart svg{display:block;width:100%;height:auto}
.chart-v svg.narrow-only{display:none}
.tip .tip-up{color:#5EE9A0} .tip .tip-down{color:#FF8A8A} .tip .tip-flat{color:#fff}
.muted{color:rgba(255,255,255,.86)}
.row2.nonmoney .n small{display:block;font-weight:500;color:var(--text-2);font-size:11px;white-space:normal}
.picks .pick{position:relative} .picks .pick input{position:absolute;opacity:0;width:0;height:0}
.picks .pick span{display:inline-block;font-size:13px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);cursor:pointer}
.picks .pick:has(input:checked) span{background:var(--dark);border-color:var(--dark);color:#fff}
.toggle-input{position:absolute;opacity:0;width:0;height:0}
label.sw{cursor:pointer;position:relative}
label.sw .toggle[aria-checked="true"]{background:var(--line-2)} label.sw .toggle[aria-checked="true"]::after{left:3px}
label.sw:has(.toggle-input:checked) .toggle{background:var(--dark)} label.sw:has(.toggle-input:checked) .toggle::after{left:21px}
.base-dates{display:none;margin-top:10px} .field:has(#custom-base input[value="dates"]:checked) .base-dates{display:flex}
.save-row{margin-top:10px} .save-row input[type=text]{flex:1;font-size:14px;padding:9px 12px;border:1px solid var(--line);border-radius:12px}
.refresh.spinning svg{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}
.htmx-request .wrap-body.skel .val{color:transparent}
.stub{padding:34px 18px;text-align:center;color:var(--text-2);font-weight:600}

/* доли оплат: ширина полосы без inline-стилей */
.share i.w0{width:0%}.share i.w1{width:1%}.share i.w2{width:2%}.share i.w3{width:3%}.share i.w4{width:4%}.share i.w5{width:5%}.share i.w6{width:6%}.share i.w7{width:7%}.share i.w8{width:8%}.share i.w9{width:9%}
.share i.w10{width:10%}.share i.w11{width:11%}.share i.w12{width:12%}.share i.w13{width:13%}.share i.w14{width:14%}.share i.w15{width:15%}.share i.w16{width:16%}.share i.w17{width:17%}.share i.w18{width:18%}.share i.w19{width:19%}
.share i.w20{width:20%}.share i.w21{width:21%}.share i.w22{width:22%}.share i.w23{width:23%}.share i.w24{width:24%}.share i.w25{width:25%}.share i.w26{width:26%}.share i.w27{width:27%}.share i.w28{width:28%}.share i.w29{width:29%}
.share i.w30{width:30%}.share i.w31{width:31%}.share i.w32{width:32%}.share i.w33{width:33%}.share i.w34{width:34%}.share i.w35{width:35%}.share i.w36{width:36%}.share i.w37{width:37%}.share i.w38{width:38%}.share i.w39{width:39%}
.share i.w40{width:40%}.share i.w41{width:41%}.share i.w42{width:42%}.share i.w43{width:43%}.share i.w44{width:44%}.share i.w45{width:45%}.share i.w46{width:46%}.share i.w47{width:47%}.share i.w48{width:48%}.share i.w49{width:49%}
.share i.w50{width:50%}.share i.w51{width:51%}.share i.w52{width:52%}.share i.w53{width:53%}.share i.w54{width:54%}.share i.w55{width:55%}.share i.w56{width:56%}.share i.w57{width:57%}.share i.w58{width:58%}.share i.w59{width:59%}
.share i.w60{width:60%}.share i.w61{width:61%}.share i.w62{width:62%}.share i.w63{width:63%}.share i.w64{width:64%}.share i.w65{width:65%}.share i.w66{width:66%}.share i.w67{width:67%}.share i.w68{width:68%}.share i.w69{width:69%}
.share i.w70{width:70%}.share i.w71{width:71%}.share i.w72{width:72%}.share i.w73{width:73%}.share i.w74{width:74%}.share i.w75{width:75%}.share i.w76{width:76%}.share i.w77{width:77%}.share i.w78{width:78%}.share i.w79{width:79%}
.share i.w80{width:80%}.share i.w81{width:81%}.share i.w82{width:82%}.share i.w83{width:83%}.share i.w84{width:84%}.share i.w85{width:85%}.share i.w86{width:86%}.share i.w87{width:87%}.share i.w88{width:88%}.share i.w89{width:89%}
.share i.w90{width:90%}.share i.w91{width:91%}.share i.w92{width:92%}.share i.w93{width:93%}.share i.w94{width:94%}.share i.w95{width:95%}.share i.w96{width:96%}.share i.w97{width:97%}.share i.w98{width:98%}.share i.w99{width:99%}
.share i.w100{width:100%}
.chart-v[data-variant$="_narrow"]{display:none} @media(max-width:600px){.chart-v[data-variant$="_wide"]{display:none} .chart-v[data-variant$="_narrow"]:not([hidden]){display:block}}

/* Переписка с Анной */
.chat{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.msg{padding:10px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.msg.bot{background:var(--bg);align-self:flex-start;max-width:96%}
.msg.me{background:var(--dark);color:#fff;align-self:flex-end;max-width:90%}
.msg.err{background:var(--blush);color:#8A1C1C;font-weight:600}
.msg.meta{font-size:11px;color:var(--text-2);padding:0 4px;align-self:flex-start}
.msg.wait{color:var(--text-2);font-style:italic;align-self:flex-start}
.anna-limit{margin-top:8px}
#anna-form.htmx-request input{opacity:.6}
.grid2.single{grid-template-columns:minmax(0,1fr);max-width:720px}