:root {
  color-scheme: dark;
  --bg:#0b0d10; --panel:#11151a; --panel2:#161b22; --line:#28303a;
  --text:#f5f7fa; --muted:#8e99a7; --accent:#caff36; --danger:#ff6b6b;
  --warn:#ffcc66; --ok:#8fe388; --radius:16px; --days:28;
}
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button,a,select,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:2px; }
.boot { min-height:100vh; display:grid; place-items:center; color:var(--muted); }
.app-shell { min-height:100vh; }
.topbar { position:sticky; top:0; z-index:30; background:rgba(11,13,16,.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar-inner { max-width:1800px; margin:auto; padding:14px 20px; display:flex; gap:18px; align-items:center; justify-content:space-between; }
.brand { display:flex; gap:13px; align-items:center; min-width:max-content; }
.logo { width:50px; height:50px; display:grid; place-items:center; border:1px solid #485260; border-radius:14px; font-size:20px; font-weight:900; letter-spacing:-.04em; }
.brand h1 { margin:0; font-size:20px; }
.brand p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.top-actions,.toolbar,.toolbar-group,.actions-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.viewer { color:var(--muted); font-size:12px; }
.container { max-width:1800px; margin:auto; padding:18px 20px 28px; }
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
.metric { min-height:74px; border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:13px; }
.metric strong { display:block; font-size:20px; }
.metric span { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.danger-metric { border-color:#6a3030; background:#1b1214; }
.toolbar { justify-content:space-between; margin-bottom:12px; }
.range-label { color:var(--muted); font-size:13px; padding:0 4px; }
.btn { appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--text); padding:10px 13px; border-radius:11px; cursor:pointer; text-decoration:none; line-height:1.2; }
.btn:hover { border-color:#4b5664; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#10130b; font-weight:800; }
.btn.ghost { background:transparent; }
.btn.danger { color:#ffdede; border-color:#5a3131; background:#251617; }
.btn.small { padding:7px 10px; font-size:12px; }
.btn.large { display:inline-block; padding:13px 18px; margin-top:12px; }
.icon-button { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--muted); cursor:pointer; }
.icon-button:hover { border-color:#4b5664; color:var(--text); }.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.status-badge { border:1px solid var(--line); border-radius:999px; padding:5px 9px; font-size:11px; }
.status-badge.warn { color:#2b2000; background:var(--warn); border-color:var(--warn); }
.legend { display:flex; gap:14px; align-items:center; margin:0 0 10px; color:var(--muted); font-size:11px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.dot.ok { background:var(--ok); }.dot.warn { background:var(--warn); }.dot.bad { background:var(--danger); }
.board-wrap { overflow:auto; overscroll-behavior-x:contain; border:1px solid var(--line); border-radius:17px; background:var(--panel); scrollbar-color:#39434f #11151a; }
.board { min-width:max-content; }
.grid-head,.person-row { display:grid; grid-template-columns:230px repeat(var(--days),112px); }
.grid-head { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:#0e1115; }
.cell { min-width:0; border-right:1px solid var(--line); padding:9px; }
.person-meta { position:sticky; left:0; z-index:12; background:#10141a; }
.grid-head .person-meta { z-index:24; display:flex; flex-direction:column; justify-content:center; min-height:92px; background:#0e1115; }
.grid-head .team-meta { flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }.team-meta > div { display:flex; flex-direction:column; }
.person-meta small { margin-top:4px; color:var(--muted); font-size:11px; }
.day-head { min-height:92px; display:grid; grid-template-columns:1fr auto; align-content:center; gap:2px 4px; text-align:left; background:#0e1115; }
.day-head span { grid-column:1/-1; color:var(--muted); font-size:11px; text-transform:uppercase; }
.day-head .day-number { font-size:18px; }.day-head .day-month { color:var(--muted); align-self:end; font-size:10px; }
.team-day-load { grid-column:1/-1; display:flex; align-items:baseline; justify-content:space-between; gap:4px; margin-top:5px; padding-top:5px; border-top:1px solid #202730; }.team-day-load strong { font-size:12px; }.team-day-load small { color:var(--muted); font-size:9px; }
.day-head.weekend,.day-cell.weekend { background:#0e1115; }
.day-head.full { background:color-mix(in srgb,var(--warn) 7%,#0e1115); }.day-head.overload { background:color-mix(in srgb,var(--danger) 12%,#0e1115); }.day-head.overload .team-day-load strong { color:#ffaaa9; }
.day-head.week-start,.day-cell:nth-child(7n + 2) { border-left:2px solid #3a444f; }
.day-head.today,.day-cell.today { box-shadow:inset 0 3px 0 var(--accent); }
.person-row { border-bottom:1px solid var(--line); }
.person-row:last-child { border-bottom:0; }
.person-row .person-meta { min-height:126px; padding:12px; }
.person-name,.person-role { display:block; }.person-name { font-size:14px; }.person-role { margin-top:3px; min-height:17px; color:var(--muted); font-size:11px; }
.person-heading { display:grid; grid-template-columns:9px minmax(0,1fr) auto; gap:8px; align-items:start; }.employee-color { width:9px; height:9px; margin-top:4px; border-radius:50%; background:var(--employee); box-shadow:0 0 0 3px color-mix(in srgb,var(--employee) 18%,transparent); }
.capacity-line { display:flex; justify-content:space-between; gap:8px; margin-top:14px; color:var(--muted); font-size:10px; }
.bar { height:6px; margin-top:5px; overflow:hidden; background:#242b33; border-radius:99px; }
.bar i { display:block; height:100%; background:var(--ok); }.bar i.warn { background:var(--warn); }.bar i.bad { background:var(--danger); }
.link-button { appearance:none; margin-top:8px; padding:0; border:0; background:none; color:var(--muted); cursor:pointer; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.day-cell { position:relative; min-height:126px; padding:8px 4px 27px; background:#11151a; }
.day-cell.full { background:color-mix(in srgb,var(--warn) 5%,#11151a); }
.day-cell.overload { background:color-mix(in srgb,var(--danger) 9%,#11151a); }
.allocation-stack { display:flex; flex-direction:column; gap:5px; }
.allocation { position:relative; width:calc(100% + 1px); min-height:37px; margin:0; padding:6px 7px; overflow:hidden; border:0; border-left:4px solid var(--project); border-radius:8px; background:color-mix(in srgb,var(--project) 20%,#151a20); color:var(--text); text-align:left; cursor:pointer; }
.allocation.connect-left { margin-left:-5px; width:calc(100% + 6px); border-left-color:transparent; border-radius:0 8px 8px 0; }
.allocation.connect-right { width:calc(100% + 6px); border-radius:8px 0 0 8px; }
.allocation.connect-left.connect-right { border-radius:0; }
.allocation span,.allocation strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.allocation span { font-size:10px; }.allocation strong { margin-top:2px; font-size:12px; }
.day-footer { position:absolute; left:6px; right:20px; bottom:7px; color:var(--muted); font-size:9px; white-space:nowrap; }
.day-footer.bad { color:#ffaaa9; font-weight:700; }
.cell-add { position:absolute; right:4px; bottom:4px; width:20px; height:20px; padding:0; border:0; border-radius:50%; background:transparent; color:#65717e; cursor:pointer; }
.cell-add:hover { background:#242b33; color:var(--text); }
.empty { padding:50px; color:var(--muted); text-align:center; }
.auth-screen { min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(430px,100%); padding:30px; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:0 28px 70px rgba(0,0,0,.35); }
.auth-card h1 { margin:20px 0 8px; }.auth-card p { color:var(--muted); line-height:1.5; }
.eyebrow { font-size:11px; letter-spacing:.16em; }
.modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.72); }
.modal { width:min(620px,100%); max-height:92vh; overflow:auto; padding:20px; border:1px solid #333c47; border-radius:20px; background:#11151a; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.modal.wide { width:min(900px,100%); }.modal h2 { margin:0 0 18px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:flex; flex-direction:column; gap:6px; }.field.full { grid-column:1/-1; }.field span,fieldset legend { color:var(--muted); font-size:11px; }
.field input,.field select,.day-input input,.schedule-grid input { width:100%; min-height:42px; border:1px solid var(--line); border-radius:10px; background:#0c0f13; color:var(--text); padding:9px 10px; }
.color-field input { padding:4px; cursor:pointer; }
.button-field .btn { min-height:42px; }
fieldset { margin:16px 0 0; padding:13px; border:1px solid var(--line); border-radius:12px; }
.schedule-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-top:8px; }
.schedule-grid label { display:flex; flex-direction:column; gap:5px; }.schedule-grid span { color:var(--muted); font-size:10px; text-align:center; }
.schedule-grid input { min-width:0; padding:7px; text-align:center; }
.modal-actions { display:flex; justify-content:space-between; gap:10px; margin-top:20px; }
.project-list { display:flex; flex-direction:column; gap:8px; }.project-row { display:flex; align-items:center; gap:8px; }.project-chip { flex:1; display:flex; align-items:center; gap:8px; min-width:0; padding:9px 11px; border:1px solid var(--line); border-radius:12px; }
.project-chip i { width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--project); }
.day-editor { margin-top:16px; }.day-editor-head { display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; }.day-editor-head span { color:var(--muted); font-size:11px; }
.day-calendar-scroll { max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--line); }
.day-calendar { min-width:700px; }
.day-calendar-weekdays { position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(7,minmax(88px,1fr)); gap:1px; background:var(--line); }
.day-calendar-weekdays span { padding:7px 8px; background:#151a20; color:var(--muted); font-size:10px; font-weight:700; text-align:center; text-transform:uppercase; }
.day-input-grid { display:grid; grid-template-columns:repeat(7,minmax(88px,1fr)); gap:1px; background:var(--line); }
.day-input,.day-input-spacer { min-height:102px; background:#0e1216; }
.day-input { display:flex; flex-direction:column; gap:6px; padding:8px; }
.day-input.weekend,.day-input-spacer { background:#101114; }.day-input span { color:var(--text); font-size:11px; font-weight:700; }.day-input input { min-height:34px; padding:5px; text-align:center; }.day-input small { color:#65717e; font-size:9px; }
.modal.calendar-view { width:min(1160px,100%); }
.load-calendar-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:14px; }.load-calendar-title { display:flex; align-items:center; gap:10px; min-width:0; }.load-calendar-title > i { width:12px; height:12px; flex:0 0 auto; border-radius:50%; background:var(--employee); }.load-calendar-title h2 { margin:0; }.load-calendar-title p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.calendar-nav { display:grid; grid-template-columns:auto minmax(150px,auto) auto; align-items:center; gap:8px; }.calendar-nav > strong { font-size:14px; text-align:center; }
.load-calendar-scroll { overflow:auto; border:1px solid var(--line); border-radius:13px; background:var(--line); }
.load-calendar { min-width:900px; }.load-calendar-weekdays,.load-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(124px,1fr)); gap:1px; background:var(--line); }.load-calendar-weekdays { position:sticky; top:0; z-index:2; }.load-calendar-weekdays span { padding:8px; background:#151a20; color:var(--muted); font-size:10px; font-weight:700; text-align:center; text-transform:uppercase; }
.load-calendar-cell { min-height:148px; padding:9px; background:#11151a; }.load-calendar-cell.outside { background:#0e1115; color:#74808e; }.load-calendar-cell.full { background:color-mix(in srgb,var(--warn) 6%,#11151a); }.load-calendar-cell.overload { background:color-mix(in srgb,var(--danger) 10%,#11151a); }.load-calendar-cell.today { box-shadow:inset 0 3px 0 var(--accent); }
.load-calendar-date { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }.load-calendar-day { display:flex; align-items:baseline; gap:5px; }.load-calendar-day > strong { font-size:15px; }.load-calendar-day > span { color:var(--accent); font-size:8px; text-transform:uppercase; }
.load-calendar-total { display:flex; align-items:baseline; gap:2px; margin-top:2px; color:var(--muted); white-space:nowrap; }.load-calendar-total strong { color:var(--text); font-size:10px; }.load-calendar-total span { font-size:8px; }.load-calendar-total.bad strong { color:#ffaaa9; }
.calendar-load-list { display:flex; flex-direction:column; gap:4px; margin-top:7px; }.calendar-load-list > small { color:var(--muted); font-size:9px; }.calendar-load-row { display:grid; grid-template-columns:6px minmax(0,1fr) auto; align-items:center; gap:5px; min-width:0; padding:3px 4px; border-radius:5px; background:#171d24; font-size:9px; }.calendar-load-row i { width:6px; height:6px; border-radius:50%; background:var(--item-color); }.calendar-load-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.calendar-load-row strong { font-size:9px; }
.muted { color:var(--muted); }.form-error { color:#ffaaa9; }.toast { position:fixed; right:18px; bottom:18px; z-index:120; max-width:min(400px,calc(100vw - 36px)); padding:12px 14px; border:1px solid #3b4652; border-radius:12px; background:#20262e; box-shadow:0 12px 35px rgba(0,0,0,.3); }
.toast.warn { color:#241d03; background:var(--warn); border-color:var(--warn); }.toast.bad { background:#35191b; border-color:#6d3438; }

@media (max-width:900px) {
  .topbar-inner { align-items:flex-start; }.top-actions { justify-content:flex-end; }.viewer { display:none; }
  .summary { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .topbar-inner { padding:11px 12px; }.logo { width:44px; height:44px; }.brand p { display:none; }.brand h1 { font-size:17px; }
  .container { padding:12px; }.summary { gap:7px; }.metric { min-height:68px; padding:11px; }.metric strong { font-size:18px; }
  .toolbar { align-items:flex-start; }.toolbar-group { width:100%; }.range-label { order:10; width:100%; }
  .grid-head,.person-row { grid-template-columns:190px repeat(var(--days),104px); }
  .form-grid { grid-template-columns:1fr; }.field.full { grid-column:auto; }.schedule-grid { grid-template-columns:repeat(4,1fr); }
  .day-calendar { min-width:660px; }.modal-actions { flex-direction:column; }.actions-right { display:grid; grid-template-columns:1fr 1fr; }
  .modal-backdrop { padding:8px; }.load-calendar-head { align-items:flex-start; flex-direction:column; }.calendar-nav { width:100%; grid-template-columns:auto 1fr auto; }.load-calendar { min-width:840px; }
  .modal-actions > div:empty { display:none; }.modal .danger { width:100%; }.legend { display:none; }
}