*{box-sizing:border-box}
:root{
  --bg:#0b1020;
  --bg-gradient:linear-gradient(180deg,#0b1020,#0e1430);
  --header-bg:rgba(11,16,32,.6);
  --card:#121934;
  --surface-alt:#0f1630;
  --surface-muted:#101738;
  --surface-strong:#1a2350;
  --surface-dark:#17204a;
  --danger-bg:#29161c;
  --hero-gradient:linear-gradient(135deg,#121c40,#1e2b62);
  --muted:#7d8bba;
  --text:#e8ecff;
  --accent:#8ea6ff;
  --ok:#6dd27a;
  --warn:#ffc36d;
  --border-soft:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.2);
  --border-muted:rgba(255,255,255,.08);
  --overlay:rgba(5,8,20,.75);
  --auth-overlay:rgba(5,8,20,.92);
}
body.theme-light{
  --bg:#f5f7ff;
  --bg-gradient:linear-gradient(180deg,#fefefe,#eef1ff);
  --header-bg:rgba(255,255,255,.9);
  --card:#ffffff;
  --surface-alt:#f7f8ff;
  --surface-muted:#eef1ff;
  --surface-strong:#dee5ff;
  --surface-dark:#d1d9ff;
  --danger-bg:#ffecec;
  --hero-gradient:linear-gradient(135deg,#f5f7ff,#e0e6ff);
  --muted:#5a647a;
  --text:#1f2333;
  --accent:#4d63ff;
  --ok:#1f9d61;
  --warn:#e19324;
  --border-soft:rgba(16,23,44,.08);
  --border:rgba(16,23,44,.14);
  --border-strong:rgba(16,23,44,.22);
  --border-muted:rgba(16,23,44,.12);
  --overlay:rgba(15,18,40,.35);
  --auth-overlay:rgba(250,251,255,.92);
}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg-gradient);color:var(--text)}
.app-header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-soft);flex-wrap:wrap;gap:12px;transition:transform .3s ease,opacity .3s ease}
.header-left{display:flex;align-items:center;gap:12px}
.user-chip{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px;color:var(--muted)}
h1{margin:0;font-size:20px;letter-spacing:.4px}
.header-right{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links{display:flex;gap:8px}
.nav-links button{background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:12px;color:var(--text);cursor:pointer}
.nav-links button:hover{border-color:var(--border-strong)}
.header-actions{display:flex;gap:8px;align-items:center}
.header-actions button,.import-label{background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:12px;color:var(--text);cursor:pointer}
.header-actions button:hover,.import-label:hover{border-color:var(--border-strong)}
.account-controls{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--border-soft);padding:6px 10px;border-radius:12px;flex-wrap:wrap}
.account-controls label{font-size:12px;color:var(--muted)}
.account-controls select{min-width:150px;padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.account-controls button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.account-controls button:hover{border-color:var(--border-strong)}
.remote-controls{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--border-soft);padding:6px 10px;border-radius:12px;flex-wrap:wrap}
.remote-controls button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.remote-controls button:hover{border-color:var(--border-strong)}
.remote-status{font-size:12px;color:var(--muted)}
.remote-status[data-state=ok]{color:var(--ok)}
.remote-status[data-state=sync]{color:var(--accent)}
.remote-status[data-state=error]{color:#ff8a8a}
.container{max-width:1000px;margin:24px auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.container{grid-template-columns:1fr 1fr}}
.container.single{display:flex;flex-direction:column;gap:16px}
.container.workspace{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.container.workspace{grid-template-columns:1fr 1fr}}
.sprint-workspace{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:899px){.sprint-workspace{grid-template-columns:1fr}}
.sprint-column{display:flex;flex-direction:column;gap:16px}
.view-section{padding:24px 0}
.hidden{display:none!important}
.panel{background:var(--card);border:1px solid var(--border-soft);border-radius:16px;padding:16px;box-shadow:0 10px 25px rgba(0,0,0,.25)}
.panel h2{margin:0 0 12px 0;font-size:16px;color:var(--text)}
.panel-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.panel-head.space-between{flex-direction:row;align-items:center;gap:12px}
.panel-head h2{margin:0}
.panel-head h4{margin:0;font-size:14px;color:var(--text)}
.hero-panel{background:var(--hero-gradient,linear-gradient(135deg,#121c40,#1e2b62));border:1px solid var(--border)}
.overview-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.overview-actions button{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.overview-actions button:hover{border-color:var(--border-strong)}
.stack-list{display:flex;flex-direction:column;gap:12px}
.stack-list .empty{padding:20px;border-radius:14px;border:1px dashed var(--border);color:var(--muted);text-align:center}
.company-card,.dept-card{padding:16px;border-radius:16px;background:var(--surface-muted);border:1px solid var(--border-muted);display:flex;flex-direction:column;gap:10px}
.company-headline h2{margin:0}
.dept-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dept-head h3{margin:0}
.company-card .meta,.dept-card .meta{font-size:12px;color:var(--muted)}
.company-card button,.dept-card button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.company-card button:hover,.dept-card button:hover{border-color:var(--border-strong)}
.dept-card .team-pills{display:flex;flex-wrap:wrap;gap:8px}
.team-pill{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13px}
.team-pill.open{cursor:pointer}
.ghost-btn{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.ghost-btn:hover{border-color:rgba(255,255,255,.35)}
.hint-text{color:var(--muted);font-size:12px}
.team-overview{max-width:1100px;margin:0 auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:16px}
.crumb-panel{display:flex;justify-content:space-between;align-items:center;gap:12px}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.team-actions button{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.team-actions button:hover{border-color:var(--border-strong)}
.task-form{display:flex;gap:8px;flex-wrap:wrap}
.task-form input,.task-form select,.task-form textarea{flex:1 1 160px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.task-form textarea{min-width:100%;flex:1 1 100%}
.task-form button{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.filters{margin-top:12px;display:flex;gap:8px}
.filters input,.filters select{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.task-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto;padding-right:4px}
.task-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px;border-radius:14px;background:var(--surface-alt);border:1px solid var(--border-muted)}
.task-row .left{display:flex;flex-direction:column;gap:6px;flex:1}
.task-title-input{width:100%;font-weight:600;font-size:14px;border:1px solid transparent;background:transparent;color:var(--text);padding:6px 0}
.task-title-input:focus{outline:none;border-bottom-color:rgba(255,255,255,.25)}
.meta{display:flex;gap:10px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.type-badge{padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:11px;text-transform:capitalize}
.priority,.deadline{font-weight:600;color:#cdd6ff}
.right{display:flex;gap:8px;align-items:center}
.right select,.right button{padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--surface-dark);color:var(--text);cursor:pointer}
.right .details{background:var(--surface-dark)}
.right .startstop.running{background:var(--surface-strong);border-color:var(--border-strong)}
.right .delete{border-color:rgba(255,80,80,.25);background:var(--danger-bg)}
.today-controls{display:flex;gap:10px;align-items:center;margin-bottom:8px}
#runningInfo{color:var(--muted);font-size:13px}
.summary{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.summary .card{background:var(--surface-alt);border:1px solid var(--border-muted);border-radius:14px;padding:12px}
.summary h3{margin:0 0 6px 0;font-size:13px;color:var(--text)}
.footer{max-width:1000px;margin:16px auto;padding:0 16px;color:var(--muted);font-size:12px}
.modal{position:fixed;inset:0;background:var(--overlay);display:flex;justify-content:center;align-items:flex-start;padding:40px 16px;overflow:auto}
.modal.hidden{display:none}
.modal-dialog{background:var(--card);border:1px solid rgba(255,255,255,.15);border-radius:16px;max-width:720px;width:100%;padding:16px 20px;box-shadow:0 20px 40px rgba(0,0,0,.6)}
.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:10px;margin-bottom:16px}
.modal-body{display:flex;flex-direction:column;gap:16px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.detail-grid label{display:flex;flex-direction:column;font-size:12px;color:var(--muted);gap:4px}
.detail-grid input,.detail-grid select,.detail-description textarea{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.detail-description{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.detail-description textarea{width:100%;min-height:80px}
.detail-section{background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.detail-section header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.upload-label{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.2);cursor:pointer}
.worklog-list,.attachment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--text)}
.worklog-list li,.attachment-list li{display:flex;justify-content:space-between;align-items:center;background:var(--surface-muted);border:1px solid var(--border-soft);border-radius:10px;padding:8px 10px}
.attachment-list a{color:var(--accent);text-decoration:none;font-size:12px}
.attachment-meta{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.auth-gate{position:fixed;inset:0;background:var(--auth-overlay);display:flex;align-items:center;justify-content:center;padding:24px;z-index:999}
.auth-gate.hidden{display:none}
.auth-card{width:100%;max-width:360px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:16px;text-align:left}
.auth-card h2{margin:0;font-size:20px}
.auth-card p{margin:0;color:var(--muted);font-size:14px}
.auth-card form{display:flex;flex-direction:column;gap:12px}
.auth-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.auth-card input{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.auth-card button[type=submit]{padding:12px;border-radius:10px;border:none;background:var(--accent);color:#0b1020;font-weight:600;cursor:pointer}
.auth-switch{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.auth-switch button{background:none;border:none;color:var(--accent);cursor:pointer;padding:0;font-weight:600}
.auth-error{min-height:18px;color:#ff8a8a;font-size:13px}
.sprint-card{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px;border-radius:14px;background:var(--surface-alt);border:1px solid var(--border-soft);flex-wrap:wrap}
.sprint-card.active{border-color:var(--accent)}
.sprint-card h3{margin:0;font-size:15px;color:var(--text)}
.sprint-card .sprint-meta{font-size:12px;color:var(--muted)}
.sprint-card .sprint-actions{display:flex;gap:8px;flex-wrap:wrap}
.sprint-card .sprint-actions button{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.sprint-card .sprint-actions button:hover{border-color:var(--border-strong)}
.sprint-detail{display:flex;flex-direction:column;gap:16px}
.sprint-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.metric-card{background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:12px;padding:12px}
.metric-card span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.metric-card strong{font-size:18px}
.sprint-stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.sprint-stories section{background:var(--surface-alt);border:1px solid var(--border-soft);border-radius:12px;padding:12px;min-height:120px}
.sprint-stories h4{margin:0 0 8px 0;font-size:14px;color:var(--text)}
.sprint-stories ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sprint-stories li{padding:8px;border-radius:8px;border:1px solid var(--border-soft);background:var(--card)}
.sprint-form{display:flex;flex-direction:column;gap:10px}
.sprint-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.sprint-form input[type=text],.sprint-form input[type=date]{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.sprint-form button[type=submit]{align-self:flex-start;padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.sprint-story-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--border-soft);border-radius:10px;padding:8px;background:var(--card)}
.sprint-story-option{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text)}
.header-toggle{display:none;position:fixed;top:12px;right:12px;z-index:30;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer}
@media(max-width:768px){
  .header-toggle{display:inline-flex;align-items:center;gap:6px}
  body.header-collapsed .app-header{transform:translateY(-120%);opacity:0;pointer-events:none}
  body.header-collapsed .header-toggle{right:12px}
}
.app-header{transition:transform .3s ease,opacity .3s ease}
/* --- Kanban board --- */
.kanban-board {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.kanban-column {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  min-height: 320px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.kanban-column h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--text);
}
.kanban-list {
  flex: 1;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding:4px;
}
.kanban-card {
  padding:10px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
  cursor:grab;
}
.kanban-card.dragging {
  opacity:0.5;
  transform:scale(0.98);
}
.kanban-list .empty {
  color: var(--muted);
  font-size:13px;
  padding:12px;
  text-align:center;
}
.kanban-column[data-column="done"] .kanban-card {
  background: linear-gradient(90deg,var(--surface-strong),var(--surface-alt));
}

.account-hero{background:var(--hero-gradient);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.account-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.account-status{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-dark);color:var(--text);font-size:12px}
.status-pill[data-state=ok]{border-color:var(--ok);color:var(--ok)}
.status-pill[data-state=sync]{border-color:var(--accent);color:var(--accent)}
.status-pill[data-state=error]{border-color:#ff8a8a;color:#ff8a8a}
.account-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.account-form{display:flex;flex-direction:column;gap:12px}
.account-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.account-form input{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.account-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.account-form button{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.membership-card{padding:14px;border-radius:12px;background:var(--surface-muted);border:1px solid var(--border-muted);display:flex;flex-direction:column;gap:8px}
.membership-card h4{margin:0;font-size:15px;color:var(--text)}
.membership-meta{font-size:12px;color:var(--muted)}
.membership-actions{display:flex;gap:8px;flex-wrap:wrap}
.membership-actions button{padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.membership-actions button:hover{border-color:var(--border-strong)}
.company-form{display:flex;flex-direction:column;gap:14px}
.company-form textarea{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text);resize:vertical}
.company-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.company-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted)}
.company-form input,.company-form select{padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text)}
.form-block{display:flex;flex-direction:column;gap:10px}
.company-list{display:flex;flex-direction:column;gap:8px}
.company-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px;align-items:center;padding:10px;border-radius:10px;background:var(--surface-alt);border:1px solid var(--border-muted)}
.company-row .stack{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.company-row .stack strong{color:var(--text);font-size:13px}
.company-form-actions{display:flex;justify-content:flex-end;gap:10px}
.company-form-actions button{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--surface-strong);color:var(--text);cursor:pointer}
.company-form-actions .ghost-btn{background:transparent;border:1px solid var(--border-muted)}
.company-role{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.company-row small{color:var(--muted)}
.company-row.department-row{grid-template-columns:1fr 2fr}
@media(max-width:720px){
  .company-row{grid-template-columns:1fr;align-items:flex-start}
}