:root{
  --bg:#0b1220;--fg:#e6edf3;--muted:#8b949e;--card:#111a2c;--border:#22314f;
  --red:#ef4444;--orange:#f59e0b;--yellow:#facc15;--green:#22c55e;--blue:#0ea5e9;
}
:root.light{
  --bg:#f7fafc;--fg:#0f172a;--muted:#475569;--card:#ffffff;--border:#e2e8f0;
  --red:#dc2626;--orange:#ea580c;--yellow:#eab308;--green:#16a34a;--blue:#0284c7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,rgba(14,165,233,.12),transparent)}
.brand{font-weight:700;display:flex;align-items:center;gap:6px}
.logo{font-size:20px}
.icon-btn{border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:12px;padding:8px 12px;cursor:pointer;min-height:44px}

.tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:nowrap;overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tab{background:transparent;border:1px solid var(--border);color:var(--fg);padding:10px 12px;border-radius:12px;cursor:pointer;flex:0 0 auto;min-height:44px}
.tab.active{background:var(--blue);border-color:transparent}

.drawer{position:fixed;top:0;left:0;height:100%;width:320px;max-width:85vw;background:var(--card);border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .2s ease;z-index:1001;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.drawer-content{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.menu-item{width:100%;text-align:left;border:1px solid var(--border);background:transparent;color:var(--fg);padding:10px 12px;border-radius:12px;cursor:pointer}
.menu-row{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);padding:10px 12px;border-radius:12px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}

#view-container{padding:16px;max-width:1100px;margin:0 auto}
.fab{position:fixed;right:16px;bottom:20px;width:56px;height:56px;border-radius:50%;background:var(--green);color:#fff;border:none;font-size:28px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:900}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid .col-span-2{grid-column:span 2}
label span{display:block;margin-bottom:6px}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--fg);min-height:44px}
button{border:1px solid var(--border);padding:10px 12px;border-radius:12px;background:var(--card);color:var(--fg);cursor:pointer;min-height:44px}
button.primary{background:var(--blue);border-color:transparent;color:#fff}
button.secondary{background:transparent}
button.danger{background:var(--red);border-color:transparent;color:#fff}
.card{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:12px;margin-bottom:12px;box-shadow:0 4px 18px rgba(0,0,0,.15)}
.card .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.badge{background:var(--blue);color:#fff;border-radius:8px;padding:2px 8px;font-weight:600}
.card .due{font-weight:600}
.card.overdue{border-color:var(--red)} .card.overdue .badge{background:var(--red)}
.card.today{border-color:var(--orange)} .card.today .badge{background:var(--orange)}
.card.approaching{border-color:var(--yellow)} .card.approaching .badge{background:var(--yellow);color:#000}
.card.done{opacity:.6}
.card .title{margin:6px 0} .card .notes{margin:0 0 10px;color:var(--muted)}
.card .meta{font-size:12px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.actions{display:flex;gap:8px;flex-wrap:wrap}
section.head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 14px}
.view-empty{color:var(--muted);text-align:center;margin:40px 0}
dialog{border:none;border-radius:16px;background:var(--card);color:var(--fg);padding:0;max-width:640px;width:95%}
dialog form{padding:16px} dialog::backdrop{background:rgba(0,0,0,.55)}
menu{display:flex;justify-content:flex-end;gap:8px;padding:8px 0 0;margin:0}
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;min-width:700px}
.table th,.table td{border:1px solid var(--border);padding:8px;text-align:center}

@media (max-width: 720px){
  .grid{grid-template-columns:1fr}
}