:root{--bg:#0b1220;--panel:#121d2e;--panel2:#18263a;--text:#eef4ff;--muted:#9aabc2;--line:#293a51;--accent:#ffb547;--good:#4bd6a0;--bad:#ff737d;--blue:#7bb6ff}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(160deg,#101b2d,#080e18 65%);color:var(--text);font:15px system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
header{padding:22px 16px 16px;max-width:1100px;margin:auto}
header small{color:var(--accent);font-weight:800;letter-spacing:2px}
h1{margin:5px 0;font-size:clamp(26px,5vw,38px)}
header p{color:var(--muted);margin:5px 0 0}
.wrap{max-width:1100px;margin:auto;padding:0 14px 38px}
.nav{display:flex;gap:7px;overflow:auto;padding:10px 0 15px;position:sticky;top:0;background:#0b1220ee;z-index:4}
.nav button,.btn{border:1px solid var(--line);border-radius:11px;background:var(--panel2);color:var(--text);padding:11px 13px;font-weight:700;white-space:nowrap;cursor:pointer;font:inherit;font-weight:700}
.nav button.active,.btn.primary{background:var(--accent);color:#17202e;border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:wait}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.card{background:linear-gradient(145deg,var(--panel),#101928);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.metric .label{font-size:13px;color:var(--muted)}
.metric .value{font-size:clamp(21px,3.5vw,29px);font-weight:850;margin:7px 0}
.metric .sub{font-size:12px;color:var(--muted)}
h2{font-size:21px;margin:22px 0 12px}
h3{margin:0 0 12px;font-size:17px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.muted{color:var(--muted)}
.notice{border:1px solid #67502b;background:#2a2114;border-radius:13px;padding:12px;color:#ffdc9c;margin:12px 0}
.notice.ok{border-color:#1f6b52;background:#12382f;color:#8ef0c8}
.notice.err{border-color:#7a2c36;background:#3e2028;color:#ffb6bb}
.formgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#0c1523;color:var(--text);padding:11px;font:inherit;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid #7bb6ff66;border-color:var(--blue)}
.field{min-width:0}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn.danger{color:#ffb6bb}
.btn.small{padding:7px 10px;font-size:12px;border-radius:9px}
.tablewrap{overflow:auto;margin-top:12px}
table{width:100%;border-collapse:collapse;min-width:620px}
th,td{text-align:left;border-bottom:1px solid var(--line);padding:11px 9px;font-size:13px;vertical-align:top}
th{color:var(--muted);font-weight:650}
.sales-day-divider td{background:#25364d;color:#ffcf7d;font-weight:850;font-size:14px;letter-spacing:.35px;border-top:4px solid var(--accent);border-bottom:2px solid #7bb6ff;padding:13px 10px}
.sales-day-divider td:before{content:"━━  ";color:#7bb6ff}
.sales-day-divider td:after{content:"  ━━";color:#7bb6ff}
td strong{font-size:14px}
.pill{display:inline-block;border-radius:30px;padding:4px 8px;background:#26364b;color:#cfe0f6;font-size:11px}
.pill.good{background:#12382f;color:#8ef0c8}
.pill.bad{background:#3e2028;color:#ffb6bb}
.pill.warn{background:#3a2e14;color:#ffdc9c}
.bar{height:9px;border-radius:20px;background:#26354a;overflow:hidden;margin:8px 0}
.bar span{display:block;height:100%;background:var(--accent);border-radius:20px}
.hidden{display:none!important}
.empty{padding:20px;text-align:center;color:var(--muted)}
.mini{font-size:12px;color:var(--muted)}
.alertrow{padding:10px 0;border-bottom:1px solid var(--line)}
.alertrow:last-child{border:0}
.positive{color:var(--good)}
.negative{color:var(--bad)}
footer{color:var(--muted);font-size:12px;text-align:center;padding:22px 10px}
.chart{display:flex;align-items:end;gap:8px;height:130px;padding:12px 2px 0}
.chartcol{flex:1;min-width:0;text-align:center;font-size:10px;color:var(--muted)}
.chartbar{background:linear-gradient(180deg,#ffc15d,#d78b2b);border-radius:6px 6px 2px 2px;min-height:3px;margin-bottom:6px}
.chartlabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar30{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.daytile{border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);padding:9px 6px;text-align:left;cursor:pointer;min-width:0;font:inherit}
.daytile.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.daytile.due-day{border:2px solid var(--bad);background:#351b27}
.daytile.promo-day{box-shadow:inset 0 0 0 1px #7bb6ff}
.daytile .daynum{font-weight:800;color:var(--accent);margin-bottom:5px}
.daytile .dayval{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daytile .daymeta{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- v3: вход, потребител, синхронизация ---- */
.boot{position:fixed;inset:0;display:grid;place-items:center;color:var(--muted);font-size:16px}
body:not(.booting) .boot{display:none}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.authbox{width:min(460px,100%);background:linear-gradient(145deg,var(--panel),#101928);border:1px solid var(--line);border-radius:18px;padding:24px}
.authbox .brand{color:var(--accent);font-weight:800;letter-spacing:2px;font-size:11px}
.authbox .field{margin-top:10px}
.authtabs{display:flex;gap:6px;margin:16px 0 4px}
.authtabs button{flex:1;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);padding:10px;font:inherit;font-weight:700;cursor:pointer}
.authtabs button.active{background:var(--accent);color:#17202e;border-color:var(--accent)}
.userbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.userbar .btn{padding:8px 11px;font-size:13px}
.userbar strong{font-size:15px}
.cardhead{display:flex;justify-content:space-between;gap:10px;align-items:start;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:8px 0 4px}
.kv div{min-width:0;overflow-wrap:anywhere}
.kv span{display:block;font-size:11px;color:var(--muted)}
.prio-high{color:var(--bad);font-weight:700}
.task-done{opacity:.6}
.task-done strong{text-decoration:line-through}
a{color:var(--blue)}

/* ---- роли ---- */
.role-manager .owner-only,.role-cashier .owner-only,.role-cashier .manager-only{display:none!important}
.role-cashier [data-del-p],.role-cashier [data-del-s],.role-cashier [data-del-e],.role-cashier [data-del-d],.role-cashier [data-rem-del],.role-cashier [data-rem-done],.role-cashier [data-promo-del],.role-cashier [data-del-client],.role-cashier [data-del-supplier],.role-cashier [data-del-task],.role-cashier [data-edit-supplier]{display:none!important}

@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar30{grid-template-columns:repeat(3,minmax(0,1fr))}.two{grid-template-columns:1fr}.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:1fr}.kv{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:13px}.nav{margin:0 -14px;padding:10px 14px}.metric .value{font-size:24px}}
@media(max-width:390px){.formgrid{grid-template-columns:1fr}.grid{gap:8px}.metric .value{font-size:21px}}