:root{
	--bg:#0f1724; /* dark */
	--fg:#e6eef8;
	--card:#0b1220;
	--muted:#9aa4b2;
	--accent:#6366f1;
	--accent-contrast:#fff;
	--surface:#0b1220;
	--glass: rgba(255,255,255,0.06);
	--radius:10px;
}
[data-theme="light"]{
	--bg:#f6f7fb;
	--fg:#0f172a;
	--card:#ffffff;
	--muted:#475569;
	--accent:#4f46e5;
	--accent-contrast:#ffffff;
	--surface:#ffffff;
	--glass: rgba(0,0,0,0.06);
}
*{box-sizing:border-box}
body{ font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0; background:var(--bg); color:var(--fg); min-height:100vh }
.app{ max-width:1100px; margin:28px auto; padding:20px; border-radius:var(--radius); background:transparent }
.app-header{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand{ display:flex; align-items:center; gap:12px }
.brand h1{ font-size:20px; margin:0 }
.brand a{ color:inherit; text-decoration:none }
.menu-toggle{ display:none; background:transparent; border:0; color:var(--accent); font-size:20px }
.theme-toggle{ background:transparent; border:1px solid var(--glass); color:var(--muted); padding:6px 10px; border-radius:8px; cursor:pointer }
.app-nav{ display:flex; gap:12px }
.app-nav a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px }
.app-nav a:hover{ background:var(--glass); color:inherit }
.app-main{ margin-top:18px }
.card{ background:var(--card); padding:16px; border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,0.06) }
h2{ margin-top:0 }
/* tasks list */
#tasksList{ list-style:none; padding:0; margin:12px 0 }
#tasksList li{ background:var(--card); margin-bottom:8px; padding:12px; border-radius:12px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--glass) }
button{ background:var(--accent); color:var(--accent-contrast); border:0; padding:8px 12px; border-radius:8px; cursor:pointer }
button.secondary{ background:transparent; border:1px solid var(--glass); color:var(--muted) }
table{ width:100%; border-collapse:collapse }
td,th{ border-bottom:1px solid rgba(255,255,255,0.03); padding:10px; text-align:left }

/* responsive */
@media (max-width:720px){
	.menu-toggle{ display:inline-flex }
	.app-nav{ position:fixed; top:0; left:0; right:0; background:var(--card); padding:60px 16px 16px; transform:translateY(-120%); transition:transform .25s ease; flex-direction:column; gap:8px }
	.app-nav.open{ transform:translateY(0) }
}

/* increase contrast for links in cards */
.card a{ color:#c7d2fe }
.card a.secondary{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:#c7d2fe; padding:6px 8px }

/* form basics */
input, textarea{ width:100%; padding:8px; border-radius:6px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:inherit }
label{ color:var(--muted); font-size:13px }
select{ padding:8px; border-radius:6px; border:1px solid var(--glass); background:transparent; color:inherit }
.toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0 }
.toolbar input[type="search"]{ min-width:220px }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--glass); background:var(--card); font-size:12px; color:var(--muted) }
.status{ padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--glass) }
.status.todo{ color:#ef4444; background:rgba(239,68,68,0.1) }
.status.doing{ color:#f59e0b; background:rgba(245,158,11,0.12) }
.status.done{ color:#10b981; background:rgba(16,185,129,0.12) }
.progress{ height:8px; background:var(--glass); border-radius:999px; overflow:hidden }
.progress > span{ display:block; height:100%; background:var(--accent); width:0% }

/* timer */
#timer{ font-size:28px; margin:10px 0; color:#fff }

/* small helpers */
.muted{ color:var(--muted) }

/* kanban */
.kanban{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px }
.kb-col{ background:var(--card); padding:10px; border-radius:12px; border:1px solid var(--glass) }
.kb-col header{ color:inherit; font-weight:600; margin-bottom:8px }
.kb-list{ min-height:220px; display:flex; flex-direction:column; gap:8px; padding:4px }
.kb-list.over{ outline:2px dashed var(--accent); outline-offset:4px }
.kb-card{ background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); padding:10px; border-radius:10px; cursor:grab; border:1px solid var(--glass) }
.kb-title{ font-weight:600 }
.kb-meta{ font-size:12px; color:var(--muted) }

/* calendar */
.calendar{ display:grid; grid-template-columns:repeat(7, 1fr); gap:8px }
.calendar.weekdays{ grid-template-columns:repeat(7, 1fr) }
.cal-cell{ background:var(--card); padding:8px; border-radius:12px; border:1px solid var(--glass); position:relative }
.cal-cell.outside{ opacity:0.5 }
.cal-cell.weekend{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) }
.cal-cell.today{ box-shadow: inset 0 0 0 2px var(--accent) }
.cal-label{ font-size:12px; color:var(--muted); margin-bottom:6px; display:flex; align-items:center; justify-content:space-between }
.cal-drop{ border:1px dashed var(--glass); border-radius:8px; min-height:52px; padding:6px; display:flex; flex-wrap:wrap; gap:6px }
.cal-drop.over{ outline:2px dashed var(--accent); outline-offset:4px }
.pill{ background:rgba(99,102,241,0.15); color:var(--accent); border:1px solid rgba(99,102,241,0.3); padding:4px 8px; border-radius:999px; font-size:12px }
.cal-progress{ height:6px; background:var(--glass); border-radius:999px; overflow:hidden; margin-top:6px }
.cal-progress .fill{ height:100%; background:linear-gradient(90deg, #22c55e, #eab308, #ef4444); width:0% }
.cal-total{ margin-top:6px; font-size:12px; color:var(--muted); display:flex; gap:6px; align-items:center }
.cal-total .dot{ width:8px; height:8px; border-radius:999px; display:inline-block }
.cal-total .dot.tasks{ background:#60a5fa }
.cal-total .dot.dailies{ background:#f472b6 }
.cal-total.bad{ color:#ef4444 }
@media(max-width:900px){ .kanban{ grid-template-columns:1fr } .calendar{ grid-template-columns:repeat(7,1fr) } .calendar.weekdays{ display:none } }

/* modal */
.modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:9998 }
.modal{ background:var(--card); color:inherit; border:1px solid var(--glass); padding:16px; border-radius:12px; width:min(560px, 92vw) }

/* toast */
.toast-wrap{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:9999 }
.toast{ background:var(--card); color:inherit; border:1px solid var(--glass); padding:10px 12px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1) }