/* Reset */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg: #0b0d10;
  --panel: #11141a;
  --card: #141823;
  --text: #e8ecf1;
  --muted: #9aa6b2;
  --brand: #6aa9ff;
  --ok: #2ecc71;
  --warn:#ffb020;
  --danger:#e35d6a;
  --grid:#252a36;
  --grid-strong:#2f3645;
  --focus:#71a7ff;
}
:root.light{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0b0d10;
  --muted:#5b6672;
  --brand:#2266dd;
  --ok:#1c9d57;
  --warn:#b37b00;
  --danger:#b84b58;
  --grid:#e8ecf1;
  --grid-strong:#d9e1f2;
  --focus:#2266dd;
}
body{
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg), #0b0d1000 420px), var(--bg);
  min-height:100vh;
}
.hidden{display:none}

.auth-screen{display:grid;place-items:center;min-height:100vh;padding:20px}
.auth-card{width:min(520px,100%);background:var(--panel);border:1px solid var(--grid);border-radius:16px;padding:20px}
.auth-card h1{margin:0 0 6px 0}
.muted{color:var(--muted)}
.user-list{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.user-pill{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--grid);background:var(--card);border-radius:999px;cursor:pointer}
.user-pill:hover{filter:brightness(1.05)}
.user-pill .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);opacity:.6}
.auth-actions{display:flex;gap:8px}
.auth-actions input{flex:1;padding:10px;border:1px solid var(--grid);border-radius:10px;background:transparent;color:var(--text)}

.app-header{
  position:sticky;top:0;z-index:10;background:var(--panel);
  border-bottom:1px solid var(--grid);padding:16px 20px
}
.app-header .row{display:flex;align-items:center;justify-content:space-between}
.badge{background:var(--card);border:1px solid var(--grid);padding:6px 10px;border-radius:999px}
.user-switch{display:flex;align-items:center;gap:8px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.control{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.control input[type="date"], .control select{padding:6px 8px;border:1px solid var(--grid);border-radius:8px;background:transparent;color:var(--text)}

.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--grid);background:var(--card);color:var(--text);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.file-btn{position:relative;overflow:hidden}
.btn.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.spacer{flex:1}

.hint{margin:8px 0 0 0;color:var(--muted);font-size:12px}

main{padding:20px;max-width:1400px;margin:0 auto}

.summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--grid);border-radius:16px;padding:16px}
.kpi{display:grid;gap:4px}
.kpi-value{font-size:28px;font-weight:700}
.kpi-label{color:var(--muted)}

.table-wrap{overflow:auto;border:1px solid var(--grid);border-radius:16px;background:var(--panel)}
.table{display:grid}
.table [role="row"]{display:grid;grid-auto-flow:column}
.table .sticky-left{position:sticky;left:0;z-index:2;background:var(--panel)}
.table .sticky-top{position:sticky;top:0;z-index:3;background:var(--panel)}
.table .sticky-corner{z-index:4}

.header-cell,.date-cell,.task-cell,.cell,.total-cell{
  border-right:1px solid var(--grid);border-bottom:1px solid var(--grid);
  padding:10px;display:flex;align-items:center;justify-content:center;text-align:center
}
.header-cell{font-weight:700;background:var(--panel)}
.date-cell{color:var(--muted);font-size:12px}
.task-cell{justify-content:flex-start;gap:8px}
.task-cell .coef{color:var(--muted);font-size:12px;margin-left:8px}
.total-cell{font-weight:700;background:var(--card)}

.cell{min-width:56px;min-height:44px;border-radius:10px}
.cell[aria-pressed="true"]{outline:2px solid var(--focus);background:linear-gradient(180deg, rgba(113,167,255,.18), rgba(113,167,255,.06))}
.cell:focus{outline:2px dashed var(--focus);outline-offset:2px}

.app-footer{padding:16px 20px;color:var(--muted);text-align:center;border-top:1px solid var(--grid)}

dialog{border:none;padding:0;background:transparent}
.dialog-card{width:min(860px,100%);background:var(--panel);border:1px solid var(--grid);border-radius:16px;padding:0}
.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--grid)}
.dialog-body{padding:16px}
.task-editor{display:grid;grid-template-columns:1fr 280px;gap:16px}
.task-list{display:grid;gap:8px;max-height:50vh;overflow:auto;border:1px dashed var(--grid);padding:8px;border-radius:12px}
.task-item{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--grid);border-radius:12px;background:var(--card);cursor:grab}
.task-item .drag{opacity:.6;cursor:grab}
.task-item .grow{flex:1;display:flex;gap:8px;align-items:center}
.task-item input[type="text"], .task-item input[type="number"]{padding:6px 8px;border:1px solid var(--grid);border-radius:8px;background:transparent;color:var(--text);width:100%}
.task-item .small{width:90px}
.task-item .actions{display:flex;gap:6px}
.task-form{display:grid;gap:8px}
.task-form input{padding:10px;border:1px solid var(--grid);border-radius:8px;background:transparent;color:var(--text)}

@media (max-width: 980px){
  .summary{grid-template-columns:1fr}
  .task-editor{grid-template-columns:1fr}
  .header-cell, .task-cell{font-size:12px}
  .cell{min-width:44px;padding:6px}
}