:root{
  --bg:#f8fafc; --panel:#ffffff; --border:#e2e8f0; --border2:#cbd5e1;
  --text:#1e293b; --muted:#64748b; --muted2:#94a3b8;
  --accent:#6d28d9; --accent2:#8b5cf6; --accent-soft:#f5f3ff;
  --green:#10b981; --amber:#f59e0b; --red:#ef4444; --blue:#3b82f6;
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:13px; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
.hidden{display:none !important}

/* ── TOPBAR ── */
.topbar{
  position:sticky; top:0; z-index:50; height:52px;
  background:var(--panel); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 20px;
}
.logo{
  font-size:16px; font-weight:900; letter-spacing:-0.5px;
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.logo small{font-weight:600; color:var(--muted2); -webkit-text-fill-color:var(--muted2); font-size:11px; letter-spacing:0}
.tabs{display:flex; gap:4px; flex:1}
.tab{
  padding:7px 14px; border-radius:6px; cursor:pointer; color:var(--muted);
  font-weight:500; font-size:13px; border:1px solid transparent; background:none;
}
.tab:hover{background:var(--bg)}
.tab.active{background:var(--accent-soft); color:var(--accent); border-color:#ede9fe}
.userbox{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted)}
.avatar{
  width:30px; height:30px; border-radius:50%; background:var(--accent2);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:12px;
}

/* ── LAYOUT ── */
.wrap{max-width:1200px; margin:0 auto; padding:24px 20px}
.view{display:none}
.view.active{display:block; animation:fade .15s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.section-head{display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.section-head h2{font-size:18px; font-weight:800; letter-spacing:-0.3px}
.section-head .sub{color:var(--muted2); font-size:12px}
.spacer{flex:1}

/* ── BUTTONS ── */
.btn{
  padding:7px 14px; border-radius:6px; cursor:pointer; font-size:13px;
  font-weight:600; border:1px solid var(--border2); background:var(--panel);
  color:var(--text); transition:background .12s,border-color .12s;
}
.btn:hover{background:var(--bg)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:#5b21b6}
.btn-ghost{border-color:transparent; background:none; color:var(--muted)}
.btn-ghost:hover{background:var(--bg)}
.btn-sm{padding:4px 9px; font-size:12px}
.btn-danger{color:var(--red); border-color:#fecaca}
.btn-danger:hover{background:#fef2f2}

/* ── CARDS / PANELS ── */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.panel + .panel{margin-top:20px}
.panel-head{padding:12px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:13px; display:flex; align-items:center; gap:10px}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px}
.stat{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px}
.stat .k{font-size:11px; color:var(--muted2); text-transform:uppercase; letter-spacing:.4px; font-weight:600}
.stat .v{font-size:24px; font-weight:800; margin-top:4px; letter-spacing:-0.5px}
.stat .v small{font-size:13px; color:var(--muted2); font-weight:600}

/* ── TABLE ── */
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--border)}
th{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted2); font-weight:700; background:var(--bg)}
tbody tr:hover{background:#fcfcfd}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
.muted{color:var(--muted2)}
.pill{display:inline-block; padding:2px 8px; border-radius:99px; font-size:11px; font-weight:700}
.pill.active{background:#dcfce7; color:#15803d}
.pill.paused{background:#fef9c3; color:#a16207}
.pill.done{background:#e0e7ff; color:#4338ca}
.pill.archived{background:#f1f5f9; color:#64748b}
.pill.role-admin{background:#ede9fe; color:#6d28d9}
.pill.role-manager{background:#dbeafe; color:#1d4ed8}
.pill.role-employee{background:#f1f5f9; color:#475569}

/* ── TIMESHEET GRID ── */
.tsbar{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.weeklbl{font-weight:700; font-size:14px}
.ts-wrap{overflow:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel)}
table.ts{min-width:720px}
table.ts th, table.ts td{border-right:1px solid var(--border)}
table.ts th.proj, table.ts td.proj{
  position:sticky; left:0; background:var(--panel); z-index:2; min-width:230px; max-width:280px;
}
table.ts th.proj{background:var(--bg)}
table.ts td.proj .pname{font-weight:600}
table.ts td.proj .pclient{font-size:11px; color:var(--muted2)}
table.ts th.day{text-align:center; min-width:74px}
table.ts th.day .dow{display:block; font-size:11px}
table.ts th.day .dnum{display:block; font-size:13px; color:var(--text); font-weight:800}
table.ts th.day.weekend{color:var(--muted2)}
table.ts th.day.today .dnum{color:var(--accent)}
table.ts td.cell{padding:3px; text-align:center; background:#fff}
table.ts td.cell.weekend{background:#fafafa}
table.ts td.cell.today{background:var(--accent-soft)}
.hr-input{
  width:60px; padding:6px 4px; text-align:center; border:1px solid transparent;
  border-radius:5px; font-size:13px; font-variant-numeric:tabular-nums; background:transparent;
  color:var(--text); -moz-appearance:textfield;
}
.hr-input::-webkit-outer-spin-button,.hr-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hr-input:hover{border-color:var(--border)}
.hr-input:focus{outline:none; border-color:var(--accent2); background:#fff; box-shadow:0 0 0 2px var(--accent-soft)}
.hr-input.has{font-weight:700}
.hr-input.saving{border-color:var(--amber)}
.hr-input.saved{border-color:var(--green)}
table.ts tfoot td, table.ts td.rowtot{
  font-weight:800; background:var(--bg); font-variant-numeric:tabular-nums; text-align:center;
}
table.ts td.rowtot{position:sticky; right:0}
table.ts th.tot{position:sticky; right:0; background:var(--bg); text-align:center; min-width:64px}
.overload{color:var(--red)}

/* ── FORMS / MODAL ── */
.modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.4); display:grid; place-items:center; z-index:100; padding:20px}
.modal{background:var(--panel); border-radius:12px; width:100%; max-width:440px; box-shadow:0 20px 50px rgba(0,0,0,.2); overflow:hidden}
.modal h3{padding:16px 20px; border-bottom:1px solid var(--border); font-size:15px}
.modal form{padding:18px 20px; display:grid; gap:12px}
.modal .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.modal .actions{display:flex; gap:8px; justify-content:flex-end; margin-top:4px}
label.field{display:grid; gap:4px; font-size:12px; color:var(--muted); font-weight:600}
input,select{
  font-family:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--border2);
  border-radius:6px; background:#fff; color:var(--text); width:100%;
}
input:focus,select:focus{outline:none; border-color:var(--accent2); box-shadow:0 0 0 2px var(--accent-soft)}
.err{color:var(--red); font-size:12px; min-height:16px}

/* ── LOGIN ── */
.login-page{min-height:100%; display:grid; place-items:center; padding:20px}
.login-card{background:var(--panel); border:1px solid var(--border); border-radius:14px; width:100%; max-width:360px; padding:28px 26px; box-shadow:0 10px 40px rgba(15,23,42,.06)}
.login-card .logo{font-size:22px; display:block; margin-bottom:4px}
.login-card .tagline{color:var(--muted2); font-size:12px; margin-bottom:22px}
.login-card form{display:grid; gap:14px}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1e293b; color:#fff; padding:10px 18px; border-radius:8px; font-size:13px; z-index:200; opacity:0; transition:opacity .2s; pointer-events:none}
.toast.show{opacity:1}
.toast.err{background:var(--red)}

/* ── LOGIN: код → роль → имя ── */
.step-q{margin-bottom:10px;font-size:13px}
.pick{display:flex;flex-direction:column;gap:8px}
.pick-btn{width:100%;justify-content:flex-start;text-align:left;padding:11px 14px;font-weight:600}
.back{margin-top:14px;align-self:flex-start}