/* ===== DAIYN — Desktop web apps (Business Cabinet + Super Admin) ===== */
:root{
  --navy:#1F3864;--navy-900:#16264a;--navy-800:#1a2f55;--blue:#2E75B6;--blue-50:#EAF2FB;--blue-100:#D9E8F7;
  --amber:#F5A623;--amber-600:#E0930F;--amber-50:#FEF5E3;--ink:#1A1A2E;--muted:#6B7280;
  --bg:#FFFFFF;--soft:#F5F7FB;--green:#22C55E;--green-50:#E7F8EE;--red:#EF4444;--red-50:#FDECEC;
  --purple:#8B5CF6;--line:#E6EAF2;--r:14px;--r-sm:10px;
  --shadow:0 2px 14px rgba(31,56,100,.06);--shadow-lg:0 18px 50px rgba(31,56,100,.14);
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Noto Sans SC",sans-serif;background:var(--soft);color:var(--ink);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.2;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:#cdd5e3;border-radius:8px;border:3px solid var(--soft);}

/* ===== App shell ===== */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;}
.sidebar{background:var(--navy);color:#cdd7e8;display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;}
.admin .sidebar{background:#0f1c34;}
.sb-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:#fff;letter-spacing:-.03em;padding:6px 10px 4px;}
.sb-logo svg{width:28px;height:28px;}
.sb-logo .sub{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);background:rgba(245,166,35,.15);padding:2px 7px;border-radius:6px;margin-left:2px;}
.sb-biz{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:10px;margin:16px 4px 18px;}
.sb-biz .lg{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--amber),var(--amber-600));display:grid;place-items:center;font-weight:800;color:#3a2600;flex:none;}
.sb-biz .nm{font-weight:800;font-size:13.5px;color:#fff;line-height:1.2;}
.sb-biz .tr{font-size:10.5px;color:var(--amber);font-weight:700;margin-top:2px;}
.sb-sec{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6c80a6;padding:14px 12px 7px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;font-weight:700;font-size:14px;color:#aebbd4;cursor:pointer;margin-bottom:2px;}
.nav-item svg{width:19px;height:19px;flex:none;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--amber);color:#3a2600;}
.admin .nav-item.active{background:var(--blue);color:#fff;}
.nav-item .count{margin-left:auto;background:rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:800;padding:1px 8px;border-radius:999px;}
.nav-item.active .count{background:rgba(58,38,0,.18);color:#3a2600;}
.sb-upgrade{margin-top:auto;background:linear-gradient(135deg,var(--blue),var(--navy-800));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px;}
.sb-upgrade h4{color:#fff;font-size:14px;}
.sb-upgrade p{color:#bcc9e0;font-size:11.5px;margin-top:5px;line-height:1.45;}
.sb-upgrade .timer{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:var(--amber);margin-top:8px;}
.sb-upgrade button{width:100%;margin-top:10px;background:var(--amber);color:#3a2600;border:0;border-radius:10px;padding:9px;font-weight:800;font-size:12.5px;}

/* ===== Content ===== */
.main{display:flex;flex-direction:column;min-width:0;}
.topbar{display:flex;align-items:center;gap:18px;padding:16px 30px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;}
.topbar h1{font-size:21px;color:var(--ink);}
.topbar .crumb{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:2px;}
.topbar .tb-search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 14px;width:260px;color:var(--muted);font-size:13.5px;}
.topbar .tb-search svg{width:16px;height:16px;}
.tb-user .av{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;font-weight:800;flex:none;}
.icon-btn{width:40px;height:40px;border-radius:11px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);position:relative;}
.icon-btn svg{width:19px;height:19px;}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff;}
.tb-user{display:flex;align-items:center;gap:10px;flex:none;}
.tb-user .nm{font-weight:800;font-size:13.5px;white-space:nowrap;}
.tb-user .rl{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.lang-seg{display:flex;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex:none;}
.lang-seg .ls-btn{border:0;background:transparent;font-family:inherit;font-weight:800;font-size:12px;color:var(--muted);padding:6px 11px;border-radius:7px;letter-spacing:.02em;}
.lang-seg .ls-btn.active{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(31,56,100,.12);}
.lang-seg .ls-btn:not(.active):hover{color:var(--navy);}

.content{padding:28px 30px 50px;overflow-x:hidden;}
.page{display:none;}
.page.active{display:block;}

/* page header row */
.page-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.page-head .ph-l h2{font-size:24px;}
.page-head .ph-l p{color:var(--muted);font-size:14px;margin-top:4px;}
.page-head .ph-r{margin-left:auto;display:flex;gap:10px;align-items:center;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;border-radius:11px;border:0;padding:11px 18px;white-space:nowrap;}
.btn svg{width:17px;height:17px;}
.btn-amber{background:var(--amber);color:#3a2600;}
.btn-navy{background:var(--navy);color:#fff;}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:9px;}
.btn-icon{padding:8px;border-radius:9px;}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:22px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);}
.kpi .top{display:flex;align-items:center;justify-content:space-between;}
.kpi .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;}
.kpi .ic svg{width:21px;height:21px;}
.ic-b{background:var(--blue-50);color:var(--blue);}.ic-a{background:var(--amber-50);color:var(--amber-600);}
.ic-g{background:var(--green-50);color:#15803d;}.ic-p{background:#F1EBFE;color:var(--purple);}
.ic-r{background:var(--red-50);color:var(--red);}
.kpi .delta{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;}
.delta.up{background:var(--green-50);color:#15803d;}.delta.down{background:var(--red-50);color:var(--red);}
.kpi .val{font-size:28px;font-weight:800;margin-top:14px;letter-spacing:-.02em;}
.kpi .lbl{font-size:13px;color:var(--muted);margin-top:2px;font-weight:600;}

/* Panels / cards */
.grid{display:grid;gap:18px;}
.g-2{grid-template-columns:2fr 1fr;}
.g-2e{grid-template-columns:1fr 1fr;}
.g-3{grid-template-columns:repeat(3,1fr);}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);}
.panel-hd{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);}
.panel-hd h3{font-size:16px;}
.panel-hd .sp{margin-left:auto;}
.panel-hd .link{font-size:12.5px;font-weight:700;color:var(--blue);}
.panel-bd{padding:20px;}

/* Chart — bars */
.bars{display:flex;align-items:flex-end;gap:14px;height:190px;padding-top:10px;}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.bar{width:60%;border-radius:7px 7px 0 0;background:var(--blue-100);position:relative;transition:.3s;}
.bar.hi{background:linear-gradient(180deg,var(--blue),var(--navy));}
.bar.amb{background:linear-gradient(180deg,var(--amber),var(--amber-600));}
.bar-col .bl{font-size:11px;color:var(--muted);font-weight:700;}
/* line chart */
.linechart{width:100%;height:200px;}
/* donut */
.donut{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;}
.donut .hole{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;}
.donut .hole .v{font-size:24px;font-weight:800;}.donut .hole .l{font-size:11px;color:var(--muted);}
.legend{display:flex;flex-direction:column;gap:10px;}
.legend .lg-i{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none;}
.legend .lg-v{margin-left:auto;font-weight:800;}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.table tr:last-child td{border-bottom:0;}
.table tbody tr:hover{background:var(--soft);}
.table .b-nm{font-weight:800;color:var(--ink);white-space:nowrap;}
.table .b-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.cellflex{display:flex;align-items:center;gap:11px;}
.tlogo{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none;}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.badge .d{width:6px;height:6px;border-radius:50%;}
.b-green{background:var(--green-50);color:#15803d;}.b-green .d{background:var(--green);}
.b-amber{background:var(--amber-50);color:var(--amber-600);}.b-amber .d{background:var(--amber);}
.b-red{background:var(--red-50);color:var(--red);}.b-red .d{background:var(--red);}
.b-gray{background:var(--soft);color:var(--muted);}.b-gray .d{background:var(--muted);}
.b-blue{background:var(--blue-50);color:var(--blue);}.b-blue .d{background:var(--blue);}
.b-purple{background:#F1EBFE;color:var(--purple);}.b-purple .d{background:var(--purple);}
.rowact{display:flex;gap:6px;}
.rowact .ra{width:30px;height:30px;border-radius:8px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);}
.rowact .ra:hover{background:var(--blue-50);color:var(--blue);}
.rowact .ra.danger:hover{background:var(--red-50);color:var(--red);}
.rowact .ra svg{width:15px;height:15px;}

/* Filter bar */
.filters{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;}
.fsearch{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 14px;width:280px;color:var(--muted);font-size:13.5px;}
.fsearch svg{width:16px;height:16px;}
.select{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--navy);}
.select svg{width:15px;height:15px;color:var(--muted);}

/* Alerts list */
.alert{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.alert:last-child{border-bottom:0;}
.alert .ai{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;}
.alert .ai svg{width:18px;height:18px;}
.alert .at{font-weight:700;font-size:13.5px;}
.alert .ad{font-size:12px;color:var(--muted);margin-top:1px;}
.alert .tm{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;white-space:nowrap;}

/* Floor plan (cabinet) */
.floorplan{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:var(--r);height:330px;overflow:hidden;}
.fp-zone{position:absolute;font-size:10px;font-weight:800;color:#aab2c2;text-transform:uppercase;letter-spacing:.06em;}
.tbl{position:absolute;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;cursor:pointer;transition:.15s;border:2px solid;}
.tbl small{font-size:9px;font-weight:700;display:block;}
.tbl.free{background:#fff;border-color:var(--green);color:#15803d;}
.tbl.booked{background:var(--amber-50);border-color:var(--amber);color:var(--amber-600);}
.tbl.occupied{background:var(--blue-50);border-color:var(--blue);color:var(--blue);}
.tbl.empty{background:#eef1f6;border-color:#d7dce6;color:#aab2c2;}
.fp-legend{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap;}
.fp-legend .l{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#3c4356;}
.fp-legend .sw{width:14px;height:14px;border-radius:4px;border:2px solid;}

/* Menu list rows (cabinet) */
.menucat{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.progress-mini{height:6px;background:var(--soft);border-radius:999px;overflow:hidden;width:90px;display:inline-block;vertical-align:middle;}
.progress-mini i{display:block;height:100%;border-radius:999px;}
.stock-ok i{background:var(--green);}.stock-low i{background:var(--amber);}.stock-crit i{background:var(--red);}

/* Forms (new business) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13px;font-weight:700;color:var(--navy);}
.field .inp{background:var(--soft);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;font-size:14px;color:var(--ink);font-weight:600;}
.field .inp.ph{color:var(--muted);font-weight:500;}
.field .hint{font-size:11.5px;color:var(--muted);}
.seg{display:flex;background:var(--soft);border:1.5px solid var(--line);border-radius:11px;padding:4px;gap:4px;}
.seg .o{flex:1;text-align:center;padding:9px;border-radius:8px;font-size:13px;font-weight:800;color:var(--muted);}
.seg .o.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(31,56,100,.12);}
.seg .o.amber.on{background:var(--amber);color:#3a2600;}

/* Detail header (admin biz page) */
.detail-hd{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin-bottom:18px;}
.detail-hd .big{width:60px;height:60px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#fff;flex:none;}
.detail-hd h2{font-size:22px;}
.detail-hd .meta{display:flex;gap:10px;align-items:center;margin-top:6px;color:var(--muted);font-size:13px;font-weight:600;flex-wrap:wrap;}

.mini-tabs{display:flex;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:4px;width:fit-content;margin-bottom:18px;}
.mini-tab{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:800;color:var(--muted);}
.mini-tab.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(31,56,100,.1);}

.promo-banner{display:flex;align-items:center;gap:16px;background:linear-gradient(100deg,var(--navy),var(--blue));color:#fff;border-radius:var(--r);padding:18px 22px;margin-bottom:22px;}
.promo-banner .gift{width:46px;height:46px;border-radius:12px;background:rgba(245,166,35,.2);color:var(--amber);display:grid;place-items:center;flex:none;}
.promo-banner .gift svg{width:24px;height:24px;}
.promo-banner h3{font-size:17px;}
.promo-banner p{color:#cfe0f4;font-size:13px;margin-top:3px;}
.promo-banner .sp{margin-left:auto;}

/* ============================================================
   RBAC — Roles & permissions (Team page + role-view preview)
   ============================================================ */
/* Role badges — Owner navy · Admin blue · Service amber · Production green · Cashier gray */
.rb{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;white-space:nowrap;}
.rb .d{width:6px;height:6px;border-radius:50%;flex:none;}
.rb-owner{background:var(--navy);color:#fff;}.rb-owner .d{background:var(--amber);}
.rb-admin{background:var(--blue-50);color:var(--blue);}.rb-admin .d{background:var(--blue);}
.rb-service{background:var(--amber-50);color:var(--amber-600);}.rb-service .d{background:var(--amber);}
.rb-prod{background:var(--green-50);color:#15803d;}.rb-prod .d{background:var(--green);}
.rb-cashier{background:#eef1f6;color:#5b6478;}.rb-cashier .d{background:#8a93a6;}

/* status pills */
.st{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.st .d{width:6px;height:6px;border-radius:50%;}
.st-on{background:var(--green-50);color:#15803d;}.st-on .d{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15);}
.st-off{background:var(--soft);color:var(--muted);}.st-off .d{background:#aab2c2;}
.st-pause{background:var(--amber-50);color:var(--amber-600);}.st-pause .d{background:var(--amber);}

/* toggle switch */
.tgl{position:relative;width:42px;height:24px;border-radius:999px;background:#cfd6e4;border:0;padding:0;flex:none;transition:.18s;cursor:pointer;}
.tgl::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:.18s;}
.tgl.on{background:var(--green);}
.tgl.on::after{transform:translateX(18px);}
.tgl:disabled{opacity:.45;cursor:not-allowed;}

/* 4-state permission level selector  Т / К / Ө / — */
.lvl{display:inline-flex;background:var(--soft);border:1.5px solid var(--line);border-radius:10px;padding:3px;gap:2px;flex:none;}
.lvl .o{min-width:34px;text-align:center;padding:6px 4px;border-radius:7px;font-size:12.5px;font-weight:800;color:#9aa3b5;cursor:pointer;transition:.12s;line-height:1;}
.lvl .o:hover{color:var(--navy);}
.lvl .o.on{box-shadow:0 1px 3px rgba(31,56,100,.13);}
.lvl .o.on[data-l="T"]{color:#15803d;background:var(--green-50);}
.lvl .o.on[data-l="K"]{color:var(--blue);background:var(--blue-50);}
.lvl .o.on[data-l="O"]{color:var(--amber-600);background:var(--amber-50);}
.lvl .o.on[data-l="N"]{color:#8a93a6;background:#e9edf4;}
.lvl.lock{opacity:.55;pointer-events:none;}

/* permission panel rows */
.perm-group{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9aa3b5;padding:18px 0 2px;}
.perm-group:first-child{padding-top:4px;}
.perm-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--line);}
.perm-row:last-child{border-bottom:0;}
.perm-ic{width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--navy);flex:none;}
.perm-ic svg{width:17px;height:17px;}
.perm-meta{flex:1;min-width:0;}
.perm-meta .nm{font-weight:800;font-size:13.5px;}
.perm-meta .ds{font-size:11.5px;color:var(--muted);margin-top:1px;}
.perm-lock{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:7px 12px;border-radius:9px;flex:none;}
.perm-lock svg{width:13px;height:13px;color:var(--amber-600);}

/* legend for Т/К/Ө/— */
.lvl-legend{display:flex;gap:8px;flex-wrap:wrap;}
.lvl-legend .li{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#3c4356;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 11px;}
.lvl-legend .tag{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;}
.lvl-legend .tag.T{background:var(--green-50);color:#15803d;}
.lvl-legend .tag.K{background:var(--blue-50);color:var(--blue);}
.lvl-legend .tag.O{background:var(--amber-50);color:var(--amber-600);}
.lvl-legend .tag.N{background:#e9edf4;color:#8a93a6;}

/* fine-grained action toggles list */
.act-list{display:flex;flex-direction:column;}
.act-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
.act-row:last-child{border-bottom:0;}
.act-row .at{font-weight:700;font-size:13px;}
.act-row .ad{font-size:11.5px;color:var(--muted);margin-top:1px;}
.act-row .sp{margin-left:auto;}

/* employee table avatar */
.emp-av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;flex:none;}

/* role-view switcher in topbar */
.rolesel{display:flex;align-items:center;gap:9px;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:5px 5px 5px 12px;flex:none;}
.rolesel .ey{display:grid;place-items:center;color:var(--navy);}
.rolesel .ey svg{width:16px;height:16px;}
.rolesel .lb{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.rolesel select{appearance:none;-webkit-appearance:none;border:0;background:#fff;font-family:inherit;font-weight:800;font-size:13px;color:var(--navy);padding:8px 30px 8px 12px;border-radius:8px;box-shadow:0 1px 3px rgba(31,56,100,.12);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F3864' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}

/* preview banner (shown when viewing as a non-owner role) */
.preview-bar{display:none;align-items:center;gap:13px;border-radius:var(--r);padding:13px 18px;margin-bottom:22px;color:#fff;}
.preview-bar.show{display:flex;}
.preview-bar .pv-ic{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;}
.preview-bar .pv-ic svg{width:20px;height:20px;}
.preview-bar .pv-t{font-weight:800;font-size:14.5px;}
.preview-bar .pv-d{font-size:12.5px;opacity:.85;margin-top:1px;}
.preview-bar .ex{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:9px;padding:9px 15px;font-weight:800;font-size:12.5px;font-family:inherit;flex:none;}
.preview-bar .ex:hover{background:rgba(255,255,255,.26);}
.pvb-admin{background:linear-gradient(100deg,var(--blue),#235a91);}
.pvb-service{background:linear-gradient(100deg,var(--amber-600),#c47e0c);}
.pvb-prod{background:linear-gradient(100deg,#15803d,#0f6e33);}
.pvb-cashier{background:linear-gradient(100deg,#4b5468,#3a4254);}

/* sidebar terminal note (shown in nav for terminal-only roles) */
.sb-termnote{display:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:14px;margin:6px 4px;color:#cdd7e8;}
.sb-termnote .t{font-size:13px;font-weight:800;color:#fff;}
.sb-termnote .d{font-size:11.5px;line-height:1.5;margin-top:6px;color:#aebbd4;}

/* terminal-redirect content card */
.term-redirect{display:none;}
.term-card{max-width:720px;margin:10px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;}
.term-hero{padding:30px 34px;color:#fff;display:flex;align-items:center;gap:18px;}
.term-hero .ic{width:60px;height:60px;border-radius:15px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;}
.term-hero .ic svg{width:30px;height:30px;}
.term-hero h2{font-size:23px;}
.term-hero p{font-size:13.5px;opacity:.88;margin-top:4px;}
.term-body{padding:26px 34px 30px;}
.term-body .lead{font-size:14.5px;color:#3c4356;font-weight:600;line-height:1.55;}
.term-perm{display:flex;flex-direction:column;gap:0;margin-top:18px;}
.term-perm .r{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);}
.term-perm .r:last-child{border-bottom:0;}
.term-perm .r .ic{width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--navy);flex:none;}
.term-perm .r .ic svg{width:17px;height:17px;}
.term-perm .r .nm{font-weight:800;font-size:13.5px;}
.term-perm .r .ds{font-size:11.5px;color:var(--muted);margin-top:1px;}
.term-perm .r .lv{margin-left:auto;}
.term-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}

@media (max-width:1100px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .g-2,.g-2e,.g-3,.form-grid{grid-template-columns:1fr;}
}

/* ===== role-view scoped overrides (applied to <body class="view-*">) ===== */
body:not(.view-owner) .sb-upgrade{display:none;}
.view-admin .fin-kpi{display:none;}
.view-admin #dash .kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.view-admin .fin-panel{display:none;}
.view-admin #dash .g-2{grid-template-columns:1fr;}
.view-admin .ro-hide{display:none!important;}
.view-admin #team .lvl{opacity:.55;pointer-events:none;}
.view-admin #team .tgl{pointer-events:none;opacity:.55;}


/* ===== DAIYN Жоспар — zhospar.daiyn.com — internal progress board ===== */
/* extends app.css tokens (--navy, --blue, --amber, etc.) */

:root{
  --it:#2E75B6; --it-50:#EAF2FB;
  --sales:#22C55E; --sales-50:#E7F8EE;
  --mkt:#8B5CF6; --mkt-50:#F1EBFE;
}

/* ============ LOGIN ============ */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:var(--soft);}
.login-brand{
  position:relative;overflow:hidden;color:#fff;padding:56px 60px;display:flex;flex-direction:column;
  background:linear-gradient(155deg,#16264a 0%,#1F3864 48%,#234a85 100%);
}
.login-brand::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(680px 420px at 110% -8%,rgba(46,117,182,.55),transparent 60%),
             radial-gradient(520px 360px at -10% 115%,rgba(245,166,35,.22),transparent 58%);
}
.login-brand > *{position:relative;z-index:1;}
.lb-logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:24px;letter-spacing:-.03em;}
.lb-logo svg{width:30px;height:30px;}
.lb-logo .tag{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#16264a;background:var(--amber);padding:3px 9px;border-radius:7px;margin-left:2px;}
.lb-mid{margin-top:auto;}
.lb-mid h1{font-size:40px;line-height:1.08;letter-spacing:-.03em;max-width:9ch;}
.lb-mid p{color:#c6d6ee;font-size:16.5px;line-height:1.6;margin-top:20px;max-width:42ch;font-weight:500;}
.lb-feats{display:flex;flex-direction:column;gap:14px;margin-top:34px;}
.lb-feat{display:flex;align-items:center;gap:13px;font-size:14.5px;font-weight:600;color:#e6eefa;}
.lb-feat .fi{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--amber);flex:none;}
.lb-feat .fi svg{width:18px;height:18px;}
.lb-foot{margin-top:auto;padding-top:40px;color:#8fb0dd;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;}
.lb-foot svg{width:15px;height:15px;}

.login-panel{display:flex;align-items:center;justify-content:center;padding:48px 40px;}
.login-card{width:100%;max-width:412px;}
.login-card .lc-h{font-size:27px;color:var(--ink);letter-spacing:-.02em;}
.login-card .lc-s{color:var(--muted);font-size:15px;margin-top:8px;font-weight:500;}
.lc-form{display:flex;flex-direction:column;gap:15px;margin-top:30px;}
.lc-field{display:flex;flex-direction:column;gap:7px;}
.lc-field label{font-size:12.5px;font-weight:800;color:var(--navy);letter-spacing:.01em;}
.lc-input{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;transition:.15s;}
.lc-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50);}
.lc-input svg{width:18px;height:18px;color:var(--muted);flex:none;}
.lc-input input{border:0;outline:0;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--ink);width:100%;background:transparent;}
.lc-input input::placeholder{color:#aab2c2;font-weight:500;}
.lc-row{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;}
.lc-row .rem{display:flex;align-items:center;gap:7px;color:var(--muted);font-weight:600;}
.lc-row .rem i{width:16px;height:16px;border-radius:5px;border:1.5px solid #cfd6e4;background:var(--blue);position:relative;flex:none;}
.lc-row .rem i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
.lc-row a{color:var(--blue);font-weight:700;}
.lc-submit{margin-top:6px;width:100%;justify-content:center;padding:14px;font-size:15px;border-radius:12px;}
.lc-or{display:flex;align-items:center;gap:14px;margin:26px 0 18px;color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.lc-or::before,.lc-or::after{content:"";height:1px;background:var(--line);flex:1;}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.demo-chip{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:9px 11px;text-align:left;transition:.15s;}
.demo-chip:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-1px);}
.demo-chip .av{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none;}
.demo-chip .nm{display:block;font-weight:800;font-size:12.5px;color:var(--ink);line-height:1.15;white-space:nowrap;}
.demo-chip .rl{display:block;font-size:10.5px;color:var(--muted);font-weight:700;margin-top:2px;white-space:nowrap;}
.demo-note{text-align:center;font-size:12px;color:var(--muted);margin-top:16px;font-weight:600;}

/* ============ Role switcher in topbar ============ */
.role-sw{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:5px 6px 5px 13px;flex:none;}
.role-sw .ey{display:grid;place-items:center;color:var(--navy);}
.role-sw .ey svg{width:16px;height:16px;}
.role-sw .lb{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;}
.role-sw select{appearance:none;-webkit-appearance:none;border:0;background:#fff;font-family:inherit;font-weight:800;font-size:13px;color:var(--navy);padding:8px 32px 8px 13px;border-radius:9px;box-shadow:0 1px 3px rgba(31,56,100,.12);cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F3864' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}

/* read-only banner for viewers */
.ro-banner{display:flex;align-items:center;gap:14px;border-radius:var(--r);padding:14px 20px;margin-bottom:22px;color:#fff;
  background:linear-gradient(100deg,#3a2f6e,#5b4bb0);}
.ro-banner .ic{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none;}
.ro-banner .ic svg{width:21px;height:21px;}
.ro-banner .t{font-weight:800;font-size:14.5px;}
.ro-banner .d{font-size:12.5px;opacity:.88;margin-top:2px;}

/* ============ Team status cards (overview) ============ */
.team-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:.15s;}
.tcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);cursor:pointer;}
.tcard .tc-top{display:flex;align-items:center;gap:12px;padding:18px 20px 14px;}
.tcard .tc-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;flex:none;}
.tcard .tc-ic svg{width:23px;height:23px;}
.tcard .tc-nm{font-weight:800;font-size:16px;color:var(--ink);}
.tcard .tc-sub{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px;}
.tcard .tc-prog{padding:0 20px 8px;}
.tcard .tc-bar{height:9px;border-radius:999px;background:var(--soft);overflow:hidden;margin-top:4px;}
.tcard .tc-bar i{display:block;height:100%;border-radius:999px;}
.tcard .tc-pct{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:2px;}
.tcard .tc-pct b{font-size:21px;font-weight:800;letter-spacing:-.02em;}
.tcard .tc-pct span{font-size:11.5px;color:var(--muted);font-weight:700;}
.tcard .tc-meta{display:flex;gap:8px;padding:14px 20px;border-top:1px solid var(--line);margin-top:auto;align-items:center;}
.tcard .tc-stat{font-size:12px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:6px;}
.tcard .tc-stat svg{width:14px;height:14px;color:#aab2c2;}
.tcard .tc-stat b{color:var(--ink);}
.avstack{display:flex;margin-left:auto;}
.avstack .a{width:28px;height:28px;border-radius:50%;border:2px solid #fff;display:grid;place-items:center;font-weight:800;font-size:11px;color:#fff;margin-left:-9px;}
.avstack .a:first-child{margin-left:0;}

/* ============ Update feed cards ============ */
.feed-day{display:flex;align-items:center;gap:12px;margin:26px 0 14px;}
.feed-day:first-child{margin-top:4px;}
.feed-day .fd-t{font-size:13px;font-weight:800;color:var(--navy);white-space:nowrap;}
.feed-day .fd-c{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:2px 9px;border-radius:999px;}
.feed-day .fd-line{flex:1;height:1px;background:var(--line);}

.feed{display:flex;flex-direction:column;gap:14px;}
.upd{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;position:relative;}
.upd::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;}
.upd.t-it::before{background:var(--it);}
.upd.t-sales::before{background:var(--sales);}
.upd.t-marketing::before{background:var(--mkt);}
.upd-hd{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.upd-av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;flex:none;}
.upd-who .nm{font-weight:800;font-size:14px;color:var(--ink);}
.upd-who .mt{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:1px;display:flex;align-items:center;gap:7px;}
.upd-time{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap;}
.upd-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.upd-col .uc-h{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px;}
.upd-col .uc-h svg{width:14px;height:14px;}
.uc-done .uc-h{color:#15803d;}
.uc-plan .uc-h{color:var(--blue);}
.upd-list{display:flex;flex-direction:column;gap:8px;}
.upd-list .li{display:flex;gap:9px;font-size:13.5px;color:#374151;line-height:1.45;font-weight:500;}
.upd-list .li .mk{width:17px;height:17px;border-radius:6px;display:grid;place-items:center;flex:none;margin-top:1px;}
.upd-list .li .mk svg{width:11px;height:11px;}
.uc-done .mk{background:var(--green-50);color:#15803d;}
.uc-plan .mk{background:var(--blue-50);color:var(--blue);}

/* compose CTA card at top of team feed */
.compose-cta{display:flex;align-items:center;gap:14px;background:#fff;border:1.5px dashed #cdd7e8;border-radius:var(--r);padding:16px 20px;cursor:pointer;transition:.15s;margin-bottom:20px;}
.compose-cta:hover{border-color:var(--blue);background:var(--blue-50);}
.compose-cta .cc-av{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:800;color:#fff;flex:none;}
.compose-cta .cc-t{font-weight:800;font-size:14.5px;color:var(--ink);}
.compose-cta .cc-d{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:1px;}
.compose-cta .cc-plus{margin-left:auto;width:38px;height:38px;border-radius:10px;background:var(--amber);color:#3a2600;display:grid;place-items:center;flex:none;}
.compose-cta .cc-plus svg{width:20px;height:20px;}

/* ============ Modal ============ */
.modal-ov{position:fixed;inset:0;z-index:100;background:rgba(15,28,52,.5);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px;}
.modal-ov.show{display:flex;}
.modal{width:100%;max-width:600px;background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:92vh;display:flex;flex-direction:column;animation:mpop .2s ease;}
@keyframes mpop{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
.modal-hd{display:flex;align-items:center;gap:13px;padding:20px 24px;border-bottom:1px solid var(--line);}
.modal-hd .mi{width:42px;height:42px;border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;display:grid;place-items:center;flex:none;}
.modal-hd .mi svg{width:21px;height:21px;}
.modal-hd h3{font-size:18px;}
.modal-hd p{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px;}
.modal-hd .x{margin-left:auto;width:36px;height:36px;border-radius:10px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--navy);flex:none;}
.modal-hd .x svg{width:18px;height:18px;}
.modal-bd{padding:22px 24px;overflow-y:auto;}
.mfield{margin-bottom:18px;}
.mfield > label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--navy);margin-bottom:9px;}
.mfield > label svg{width:16px;height:16px;}
.mfield > label.done{color:#15803d;}
.mfield > label.plan{color:var(--blue);}
.mfield textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;font-family:inherit;font-size:14px;font-weight:500;color:var(--ink);line-height:1.55;resize:vertical;min-height:88px;background:var(--soft);transition:.15s;}
.mfield textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50);background:#fff;}
.mfield .hint{font-size:11.5px;color:var(--muted);margin-top:7px;font-weight:600;}
.mfield-row{display:flex;gap:14px;}
.mfield-row .mfield{flex:1;}
.mselect{display:flex;align-items:center;gap:10px;background:var(--soft);border:1.5px solid var(--line);border-radius:12px;padding:12px 15px;font-weight:800;font-size:14px;color:var(--navy);}
.mselect svg{width:18px;height:18px;flex:none;}
.modal-ft{display:flex;align-items:center;gap:12px;padding:18px 24px;border-top:1px solid var(--line);background:var(--soft);}
.modal-ft .sp{margin-left:auto;}

/* ============ Milestones ============ */
.ms-list{display:flex;flex-direction:column;}
.ms-row{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.ms-row:last-child{border-bottom:0;}
.ms-node{display:flex;flex-direction:column;align-items:center;flex:none;padding-top:2px;}
.ms-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;}
.ms-dot svg{width:16px;height:16px;}
.ms-dot.done{background:var(--green);}
.ms-dot.progress{background:var(--amber);}
.ms-dot.planned{background:#fff;border:2px solid #cdd7e8;color:#aab2c2;}
.ms-main{flex:1;min-width:0;}
.ms-main .mt{font-weight:800;font-size:15px;color:var(--ink);}
.ms-main .md{font-size:13px;color:var(--muted);font-weight:500;margin-top:3px;line-height:1.5;}
.ms-tags{display:flex;gap:8px;margin-top:10px;align-items:center;flex-wrap:wrap;}
.ms-right{flex:none;text-align:right;min-width:120px;}
.ms-right .pc{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.ms-right .pb{height:7px;width:120px;border-radius:999px;background:var(--soft);overflow:hidden;margin-top:6px;}
.ms-right .pb i{display:block;height:100%;border-radius:999px;}
.ms-right .dt{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:8px;display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.ms-right .dt svg{width:13px;height:13px;}

.team-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.team-chip .d{width:7px;height:7px;border-radius:50%;}
.tc-it{background:var(--it-50);color:var(--it);}.tc-it .d{background:var(--it);}
.tc-sales{background:var(--sales-50);color:#15803d;}.tc-sales .d{background:var(--sales);}
.tc-marketing{background:var(--mkt-50);color:var(--mkt);}.tc-marketing .d{background:var(--mkt);}

/* ============ History timeline ============ */
.hist{position:relative;padding-left:8px;}
.hist::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--line);}
.hrow{display:flex;gap:16px;padding:11px 0;position:relative;}
.hrow .hd{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;flex:none;z-index:1;}
.hrow .hd .core{width:9px;height:9px;border-radius:50%;}
.hrow .hmain{flex:1;font-size:13.5px;color:#374151;font-weight:500;line-height:1.5;padding-top:1px;}
.hrow .hmain b{color:var(--ink);font-weight:800;}
.hrow .htime{font-size:11.5px;color:var(--muted);font-weight:700;white-space:nowrap;flex:none;padding-top:2px;}

/* ============ Users table extras ============ */
.urole{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:999px;white-space:nowrap;}
.urole .d{width:6px;height:6px;border-radius:50%;}
.ur-admin{background:var(--navy);color:#fff;}.ur-admin .d{background:var(--amber);}
.ur-member{background:var(--blue-50);color:var(--blue);}.ur-member .d{background:var(--blue);}
.ur-viewer{background:#F1EBFE;color:var(--mkt);}.ur-viewer .d{background:var(--mkt);}

/* ============ Mobile ============ */
.mobile-bar{display:none;align-items:center;gap:12px;padding:12px 16px;background:var(--navy);color:#fff;position:sticky;top:0;z-index:40;}
.mobile-bar .mb-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:18px;letter-spacing:-.03em;}
.mobile-bar .mb-logo svg{width:24px;height:24px;}
.mobile-bar .mb-logo .sub{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);background:rgba(245,166,35,.16);padding:2px 6px;border-radius:5px;}
.mobile-bar .burger{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);border:0;display:grid;place-items:center;color:#fff;}
.mobile-bar .burger svg{width:20px;height:20px;}
.mobile-bar .mb-sp{margin-left:auto;}
.drawer-ov{position:fixed;inset:0;z-index:60;background:rgba(15,28,52,.5);display:none;}
.drawer-ov.show{display:block;}

@media (max-width:1100px){
  .team-cards{grid-template-columns:1fr;}
  .upd-body{grid-template-columns:1fr;gap:14px;}
}
@media (max-width:920px){
  .login{grid-template-columns:1fr;}
  .login-brand{display:none;}
}
@media (max-width:780px){
  .mobile-bar{display:flex;}
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:0;height:100vh;width:262px;z-index:70;transform:translateX(-100%);transition:transform .22s ease;display:flex;}
  .sidebar.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4);}
  .topbar .tb-search{display:none;}
  .topbar{padding:12px 16px;gap:12px;flex-wrap:wrap;}
  .topbar h1{font-size:18px;}
  .content{padding:18px 16px 60px;}
  .kpis{grid-template-columns:1fr 1fr;gap:12px;}
  .demo-grid{grid-template-columns:1fr;}
  .role-sw .lb{display:none;}
  .modal-ov{padding:0;align-items:flex-end;}
  .modal{max-width:100%;border-radius:18px 18px 0 0;max-height:94vh;}
  .mfield-row{flex-direction:column;gap:0;}
}