/* Палитра и типографика — 1-в-1 из одобренного мокапа (assets/design-mockup.html) */
:root{
  --bg:#0E1311; --bg2:#141B18; --card:#1A221E; --card2:#212B26;
  --line:rgba(201,168,76,0.14); --line2:rgba(255,255,255,0.07);
  --gold:#C9A84C; --gold-soft:#E4CE8E; --emerald:#46C28B; --coral:#FF6F5B; --amber:#F2B23E;
  --txt:#F3EFE4; --muted:#9AA39C; --muted2:#6B746E;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{height:100%;}
body{
  font-family:'Manrope',sans-serif;color:var(--txt);
  background:
    radial-gradient(120% 60% at 80% -10%, rgba(201,168,76,0.10), transparent 55%),
    radial-gradient(90% 50% at -10% 110%, rgba(70,194,139,0.06), transparent 50%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
}
.app-shell{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;position:relative;}
.content{flex:1;padding:14px 18px 96px;overflow-y:auto;}

/* header */
.brandrow{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 4px;max-width:480px;margin:0 auto;width:100%;}
.brandmark{display:flex;align-items:center;gap:10px;}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#9C7E2E);display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700;color:#1A1304;font-size:18px;box-shadow:0 4px 14px rgba(201,168,76,.3);}
.brandtxt b{font-family:'Fraunces';font-size:16px;font-weight:600;letter-spacing:.2px;display:block;}
.brandtxt span{display:block;font-size:10px;color:var(--muted);letter-spacing:.5px;margin-top:1px;text-transform:uppercase;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--gold-soft);cursor:pointer;}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:8px 0 6px;}
.h1{font-family:'Fraunces';font-size:25px;line-height:1.08;font-weight:600;letter-spacing:-.3px;}
.h1 em{font-style:italic;color:var(--gold-soft);}
.sub{color:var(--muted);font-size:13px;margin-top:7px;line-height:1.45;}

/* toggle */
.toggle{display:flex;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:4px;margin-top:16px;gap:4px;}
.toggle .t{flex:1;text-align:center;padding:9px;border-radius:9px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;border:1px solid transparent;}
.toggle .t.on{background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.08));color:var(--gold-soft);border:1px solid var(--line);}

/* metric grid */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:18px;}
.metric{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:14px 15px;position:relative;overflow:hidden;}
.metric .k{font-size:10.5px;color:var(--muted);letter-spacing:.4px;font-weight:600;text-transform:uppercase;}
.metric .v{font-family:'Fraunces';font-size:30px;font-weight:600;margin-top:7px;line-height:1;letter-spacing:-.5px;}
.metric .d{font-family:'IBM Plex Mono',monospace;font-size:10.5px;margin-top:7px;color:var(--muted);}
.metric.alert{border-color:rgba(255,111,91,.35);background:linear-gradient(160deg,rgba(255,111,91,.13),var(--card));}
.metric.alert .v{color:var(--coral);}
.metric.good .v{color:var(--emerald);}

/* section + rows */
.section-t{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 11px;}
.section-t b{font-family:'Fraunces';font-size:16px;font-weight:600;}
.section-t span{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;margin-bottom:9px;}
.row.clickable{cursor:pointer;}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dot.g{background:var(--emerald);box-shadow:0 0 0 3px rgba(70,194,139,.16);}
.dot.a{background:var(--amber);box-shadow:0 0 0 3px rgba(242,178,62,.16);}
.dot.r{background:var(--coral);box-shadow:0 0 0 3px rgba(255,111,91,.18);}
.dot.x{background:var(--muted2);box-shadow:0 0 0 3px rgba(107,116,110,.16);}
.row .main{flex:1;min-width:0;}
.row .main b{font-size:13.5px;font-weight:700;display:block;}
.row .main span{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;padding:4px 9px;border-radius:8px;white-space:nowrap;}
.badge.r{background:rgba(255,111,91,.16);color:var(--coral);}
.badge.g{background:rgba(70,194,139,.14);color:var(--emerald);}
.badge.a{background:rgba(242,178,62,.14);color:var(--amber);}
.badge.n{background:var(--card2);color:var(--muted);}
.brandtag{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.5px;padding:2px 6px;border-radius:5px;text-transform:uppercase;font-weight:600;margin-left:6px;}
.tag-bayliq{background:rgba(201,168,76,.16);color:var(--gold-soft);}
.tag-silkway{background:rgba(120,170,255,.14);color:#9DBCF2;}

/* cashier rows */
.crow{display:flex;align-items:center;gap:12px;padding:12px 13px;background:var(--card);border:1px solid var(--line2);border-radius:14px;margin-bottom:9px;}
.crank{font-family:'Fraunces';font-size:17px;font-weight:600;color:var(--muted2);width:18px;}
.cav{width:36px;height:36px;border-radius:11px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--gold-soft);}
.cinfo{flex:1;min-width:0;}
.cinfo b{font-size:13px;font-weight:700;display:block;}
.cinfo span{font-size:10.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.score{text-align:right;}
.score .pct{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;}

/* funnel */
.funnel{margin-top:8px;}
.fstep{margin-bottom:11px;}
.fstep .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px;}
.fstep .lab b{font-weight:700;} .fstep .lab span{font-family:'IBM Plex Mono',monospace;color:var(--muted);}
.fbar{height:30px;border-radius:9px;background:var(--card);overflow:hidden;border:1px solid var(--line2);}
.ffill{height:100%;border-radius:8px;background:linear-gradient(90deg,#9C7E2E,var(--gold));display:flex;align-items:center;justify-content:flex-end;padding-right:11px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;color:#1A1304;min-width:28px;}

/* note / empty */
.note{font-size:11.5px;color:var(--muted2);text-align:center;margin-top:14px;font-style:italic;font-family:'Fraunces';line-height:1.4;}
.empty{text-align:center;color:var(--muted);padding:40px 10px;font-size:13px;}

/* tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;padding:10px 0 14px;border-top:1px solid var(--line2);background:rgba(14,19,17,.92);backdrop-filter:blur(10px);}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;color:var(--muted2);font-weight:600;cursor:pointer;border:none;background:none;}
.tab.on{color:var(--gold);}
.tab svg{width:22px;height:22px;}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.08));color:var(--gold-soft);font-weight:700;font-size:14px;cursor:pointer;font-family:'Manrope';}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:var(--card);color:var(--muted);}

/* modal (QR) */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
.modal{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:22px;max-width:360px;width:100%;text-align:center;}
.modal h3{font-family:'Fraunces';font-size:20px;font-weight:600;}
.modal p{color:var(--muted);font-size:12.5px;margin-top:8px;line-height:1.5;}
.qrbox{background:#fff;border-radius:16px;padding:14px;margin:18px auto;width:fit-content;min-height:200px;display:flex;align-items:center;justify-content:center;}
.qrbox img{display:block;width:280px;height:280px;}
.qrbox .spin{color:#1A1304;font-family:'IBM Plex Mono',monospace;font-size:12px;}
.qr-status{font-family:'IBM Plex Mono',monospace;font-size:12px;padding:9px;border-radius:10px;margin-top:6px;}
.qr-status.ok{background:rgba(70,194,139,.12);color:var(--emerald);}
.qr-status.wait{background:rgba(242,178,62,.12);color:var(--amber);}
.qr-status.err{background:rgba(255,111,91,.12);color:var(--coral);}

/* chart по филиалам */
.chart-block{background:var(--card);border:1px solid var(--line2);border-radius:14px;padding:13px 14px;margin-bottom:11px;}
.chart-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;}
.chart-h b{font-family:'Fraunces';font-size:15px;font-weight:600;}
.chart-h span{font-size:10.5px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.chart-bars{display:flex;align-items:flex-end;gap:3px;height:60px;}
.chart-bars .cbar{flex:1;min-width:3px;border-radius:2px 2px 0 0;background:var(--muted2);}
.chart-bars .cbar.g{background:var(--emerald);}
.chart-bars .cbar.a{background:var(--amber);}
.chart-bars .cbar.r{background:var(--coral);}
.chart-bars .cbar.x{background:var(--line2);}
.chart-x{display:flex;justify-content:space-between;margin-top:5px;font-size:9.5px;color:var(--muted2);font-family:'IBM Plex Mono',monospace;}

/* sheet overlay (drill-down список + переписка) */
.sheet{background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:20px;padding:16px;max-width:460px;width:100%;max-height:86vh;display:flex;flex-direction:column;}
.sheet-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line2);}
.sheet-h b{font-family:'Fraunces';font-size:18px;font-weight:600;display:block;}
.sheet-h span{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
.sheet-body{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;margin-bottom:12px;}
/* chat bubbles */
.bubble{max-width:80%;margin-bottom:9px;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4;word-break:break-word;}
.bubble.in{background:var(--card);border:1px solid var(--line2);border-bottom-left-radius:5px;margin-right:auto;}
.bubble.out{background:linear-gradient(135deg,rgba(201,168,76,.22),rgba(201,168,76,.10));border:1px solid var(--line);border-bottom-right-radius:5px;margin-left:auto;}
.bubble .bt{color:var(--txt);}
.bubble .bm{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted2);margin-top:4px;text-align:right;}

/* login */
.login-wrap{max-width:380px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px;}
.login-wrap .logo-xl{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--gold),#8E7128);display:flex;align-items:center;justify-content:center;font-family:'Fraunces';font-weight:700;color:#1A1304;font-size:28px;box-shadow:0 10px 30px rgba(201,168,76,.35);}
.login-wrap h1{font-family:'Fraunces';font-size:30px;font-weight:600;margin-top:22px;letter-spacing:-.5px;}
.login-wrap h1 em{font-style:italic;color:var(--gold-soft);}
.login-wrap p{color:var(--muted);font-size:13px;margin-top:8px;}
.field{margin-top:14px;}
.field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.field input{width:100%;margin-top:6px;padding:13px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--card);color:var(--txt);font-size:15px;font-family:'Manrope';}
.field input:focus{outline:none;border-color:var(--gold);}
.err-msg{color:var(--coral);font-size:12.5px;margin-top:12px;min-height:16px;text-align:center;}