:root{
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --radius: 3px;
}

/* ---------- DARK THEME (default) — deep indigo-black, accents lifted bright ---------- */
:root, :root[data-theme="dark"]{
  --bg: #0D0A18;
  --bg-raised: #151125;
  --panel: #191532;
  --panel-alt: #211B40;
  --border: #322A52;
  --border-soft: #251F3F;
  --text: #F5F3FF;
  --text-dim: #B4ACD6;
  --text-faint: #7A7299;
  --accent: #FF7A54;
  --accent-soft: rgba(255,122,84,0.16);
  --accent-dim: #FFA184;
  --accent2: #A78BFA;
  --accent2-soft: rgba(167,139,250,0.16);
  --good: #34D399;
  --good-soft: rgba(52,211,153,0.16);
  --bad: #FB7185;
  --bad-soft: rgba(251,113,133,0.16);
  --glow: rgba(255,122,84,0.35);
  --topbar-bg: rgba(13,10,24,0.85);
  --bg-decor:
    radial-gradient(1100px 550px at 12% -10%, rgba(255,122,84,0.09), transparent 60%),
    radial-gradient(900px 500px at 95% 5%, rgba(167,139,250,0.08), transparent 55%);
  --scanline-opacity: 0.5;
}

/* ---------- LIGHT THEME — warm white, vivid coral + violet pop ---------- */
:root[data-theme="light"]{
  --bg: #FBFAF7;
  --bg-raised: #FFFFFF;
  --panel: #FFFFFF;
  --panel-alt: #F4F1FE;
  --border: #E6E1F5;
  --border-soft: #EEEAFA;
  --text: #1C1733;
  --text-dim: #5B5478;
  --text-faint: #948CB3;
  --accent: #FF5A36;
  --accent-soft: rgba(255,90,54,0.10);
  --accent-dim: #D6431F;
  --accent2: #7C5CFC;
  --accent2-soft: rgba(124,92,252,0.10);
  --good: #0E9F63;
  --good-soft: rgba(14,159,99,0.10);
  --bad: #E23B5C;
  --bad-soft: rgba(226,59,92,0.10);
  --glow: rgba(255,90,54,0.16);
  --topbar-bg: rgba(251,250,247,0.85);
  --bg-decor:
    radial-gradient(1100px 550px at 12% -10%, rgba(124,92,252,0.07), transparent 60%),
    radial-gradient(900px 500px at 95% 5%, rgba(255,90,54,0.07), transparent 55%);
  --scanline-opacity: 0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--bg);
  background-image:var(--bg-decor);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.5;
  min-height:100vh;
  position:relative;
  transition:background-color .25s ease, color .25s ease;
}

@media (prefers-reduced-motion: no-preference){
  .scanline{
    position:fixed; inset:0; pointer-events:none; z-index:999;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
    opacity:var(--scanline-opacity);
    transition:opacity .25s ease;
  }
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(16px,4vw,48px);
  border-bottom:1px solid var(--border);
  background:var(--topbar-bg);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:20;
  flex-wrap:wrap; gap:12px;
}
.topbar__id{display:flex; align-items:baseline; gap:10px; font-family:var(--mono);}
.topbar__owner{
  font-weight:700; letter-spacing:0.1em; font-size:11px; color:var(--accent2);
  padding:3px 8px; border:1px solid var(--accent2); border-radius:20px;
}
.topbar__title{font-weight:700; letter-spacing:0.08em; font-size:15px;}
.topbar__sub{color:var(--text-faint); font-size:13px;}
.topbar__dot{
  width:8px; height:8px; border-radius:50%; background:var(--text-faint); display:inline-block;
  box-shadow:0 0 0 3px transparent;
}
.topbar__dot.is-local{background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
.topbar__dot.is-synced{background:var(--good); box-shadow:0 0 0 3px var(--good-soft);}
.topbar__right{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}

.theme-toggle{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-raised); color:var(--text); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center; transition:all .15s; flex:none;
}
.theme-toggle:hover{border-color:var(--accent); transform:rotate(15deg);}

.tabs{display:flex; gap:6px; flex-wrap:wrap;}
.tab{
  font-family:var(--mono); font-size:13px; color:var(--text-dim);
  background:transparent; border:1px solid transparent; border-radius:var(--radius);
  padding:8px 14px; cursor:pointer; transition:border-color .15s, color .15s, background .15s;
}
.tab:hover{color:var(--text); border-color:var(--border);}
.tab.is-active{color:var(--accent); border-color:var(--accent-dim); background:var(--accent-soft);}
.tab:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- dashboard ---------- */
.dashboard{
  padding:clamp(20px,4vw,40px) clamp(16px,4vw,48px);
  border-bottom:1px solid var(--border);
}
.dash-banner{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:28px; flex-wrap:wrap;
}
.dash-banner__refresh{
  display:flex; align-items:center; gap:6px; color:var(--text-faint);
  font-family:var(--mono); font-size:12px;
}
.dash-banner__refresh svg{width:14px; height:14px;}

.hero__count{min-width:220px;}
.hero__days{
  font-family:var(--mono); font-weight:700; font-size:clamp(56px,9vw,104px);
  line-height:0.9; color:var(--accent); letter-spacing:-0.02em;
  text-shadow:0 0 40px var(--glow);
}
.hero__label{font-size:15px; color:var(--text-dim); margin-top:6px;}
.hero__date{font-family:var(--mono); font-size:12px; color:var(--text-faint); margin-top:2px;}

/* ---------- KPI cards ---------- */
.kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:14px;
  margin-bottom:24px;
}
.kpi-card{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px 18px;
  opacity:0; transform:translateY(10px);
  animation:kpiIn .45s ease forwards;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.kpi-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-dim);
  box-shadow:0 10px 24px -12px rgba(0,0,0,0.35);
}
.kpi-grid .kpi-card:nth-child(1){animation-delay:.02s;}
.kpi-grid .kpi-card:nth-child(2){animation-delay:.08s;}
.kpi-grid .kpi-card:nth-child(3){animation-delay:.14s;}
.kpi-grid .kpi-card:nth-child(4){animation-delay:.20s;}
.kpi-grid .kpi-card:nth-child(5){animation-delay:.26s;}
.kpi-grid .kpi-card:nth-child(6){animation-delay:.32s;}
@keyframes kpiIn{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .kpi-card{opacity:1; transform:none; animation:none;}
}

.kpi-card__icon{
  flex:none; width:42px; height:42px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
}
.kpi-card__icon svg{width:20px; height:20px;}
.kpi-card--accent .kpi-card__icon{background:var(--accent-soft); color:var(--accent);}
.kpi-card--accent2 .kpi-card__icon{background:var(--accent2-soft); color:var(--accent2);}
.kpi-card--good .kpi-card__icon{background:var(--good-soft); color:var(--good);}
.kpi-card--bad .kpi-card__icon{background:var(--bad-soft); color:var(--bad);}

.kpi-card__value{font-family:var(--mono); font-weight:700; font-size:24px; line-height:1;}
.kpi-card__label{font-size:12px; color:var(--text-faint); margin-top:4px;}

/* ---------- chart cards ---------- */
.chart-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px;
}
.chart-card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:18px 20px 12px;
  opacity:0; transform:translateY(10px);
  animation:kpiIn .5s ease forwards;
}
.chart-grid .chart-card:nth-child(1){animation-delay:.15s;}
.chart-grid .chart-card:nth-child(2){animation-delay:.22s;}
.chart-grid .chart-card:nth-child(3){animation-delay:.29s;}
.chart-grid .chart-card:nth-child(4){animation-delay:.36s;}
@media (prefers-reduced-motion: reduce){
  .chart-card{opacity:1; transform:none; animation:none;}
}
.chart-card__head{margin-bottom:10px;}
.chart-card__head h3{margin:0; font-size:13px; font-weight:600; color:var(--text-dim);}
.chart-card__body{position:relative; height:200px;}

.chart-card--gauge .gauge-wrap{position:relative; height:170px;}
.chart-error{color:var(--bad); font-size:12px; margin-top:8px;}
.gauge-center{
  position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  font-family:var(--mono); font-weight:700; font-size:26px; color:var(--text);
}

/* ---------- layout ---------- */
.content{padding:clamp(16px,4vw,48px); max-width:1280px; margin:0 auto;}
.view{display:none;}
.view.is-active{display:block; animation:fade .25s ease;}
@keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.view.is-active{animation:none;}}

.panel__grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px clamp(16px,3vw,26px);
}
.card--wide{grid-column:1 / -1;}
.card__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:16px; flex-wrap:wrap;
}
.card__head h2{margin:0; font-size:16px; font-weight:600;}
.card__date, .card__hint{font-family:var(--mono); font-size:12px; color:var(--text-faint);}

@media (max-width: 820px){
  .panel__grid{grid-template-columns:1fr;}
  .dash-banner{flex-direction:column; align-items:flex-start;}
}

/* ---------- form fields ---------- */
.field{margin-bottom:18px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:13px; color:var(--text-dim); margin-bottom:7px;}
.field__val{color:var(--accent); font-family:var(--mono);}
.field--row{display:flex; gap:16px; flex-wrap:wrap;}
.field--row > div{flex:1; min-width:160px;}
.field__grow{flex:2; min-width:200px;}

input[type=text], input[type=number], input[type=date], textarea, select{
  width:100%; background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); font-family:var(--sans); font-size:14px;
  padding:10px 12px; border-radius:var(--radius); transition:border-color .15s;
}
input:hover, textarea:hover, select:hover{border-color:var(--text-faint);}
input:focus, textarea:focus, select:focus{border-color:var(--accent); outline:none;}
textarea{resize:vertical; font-family:var(--sans);}

input[type=range]{
  -webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; margin-top:4px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid var(--bg);
  box-shadow:0 0 0 2px var(--accent-dim);
}
input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--bg);
}

.subject-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;}
.subject-input{display:flex; flex-direction:column; gap:6px;}
.subject-input label{font-size:12px; color:var(--text-faint); font-family:var(--mono);}

.toggle-group{display:flex; gap:8px;}
.toggle-btn{
  font-family:var(--sans); font-size:13px; padding:9px 14px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--bg-raised); color:var(--text-dim); cursor:pointer;
  transition:all .15s;
}
.toggle-btn:hover{border-color:var(--text-faint); color:var(--text);}
.toggle-btn.is-selected[data-val="done"]{background:var(--good-soft); border-color:var(--good); color:var(--good);}
.toggle-btn.is-selected[data-val="pending"]{background:var(--bad-soft); border-color:var(--bad); color:var(--bad);}

.list-add{display:flex; gap:8px; margin-bottom:10px;}
.list-add input{flex:1;}

.item-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.item-list:empty::after{content:"Nothing added yet.";  color:var(--text-faint); font-size:13px;}
.item-row{
  display:flex; align-items:center; gap:10px; background:var(--bg-raised);
  border:1px solid var(--border-soft); border-radius:var(--radius); padding:8px 10px; font-size:13px;
}
.item-row span{flex:1;}
.item-row.is-done span{text-decoration:line-through; color:var(--text-faint);}
.item-row__check{
  width:16px; height:16px; border:1px solid var(--text-faint); border-radius:3px; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center; background:transparent;
}
.item-row.is-done .item-row__check{background:var(--good); border-color:var(--good);}
.item-row__del{
  background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:14px; line-height:1; padding:2px 4px;
}
.item-row__del:hover{color:var(--bad);}

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger{
  font-family:var(--sans); font-size:14px; font-weight:600; border-radius:var(--radius);
  padding:10px 16px; cursor:pointer; border:1px solid transparent; transition:all .15s;
}
.btn-primary{background:var(--accent); color:#171207; border-color:var(--accent);}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 85%, white 15%);}
.btn-secondary{background:var(--bg-raised); color:var(--text); border-color:var(--border);}
.btn-secondary:hover{border-color:var(--text-faint);}
.btn-ghost{background:transparent; color:var(--accent); border-color:var(--accent-dim); font-weight:500; white-space:nowrap;}
.btn-ghost:hover{background:var(--accent-soft);}
.btn-danger{background:transparent; color:var(--bad); border-color:var(--bad);}
.btn-danger:hover{background:var(--bad-soft);}
.btn-block{width:100%; margin-top:6px;}
.btn-row{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.file-btn{display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}

.save-flag{
  font-family:var(--mono); font-size:12px; color:var(--good); margin-top:10px; height:14px; opacity:0; transition:opacity .3s;
}
.save-flag.is-visible{opacity:1;}

.hint-text{font-size:13px; color:var(--text-dim); margin-top:0;}
.sync-status{font-size:13px; font-family:var(--mono); padding:10px 12px; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--radius);}
.sync-status strong{color:var(--accent);}

/* ---------- heatmap ---------- */
.heatmap{display:flex; gap:3px; flex-wrap:wrap;}
.heatmap__cell{
  width:14px; height:14px; border-radius:2px; background:var(--bg-raised); border:1px solid var(--border-soft);
}
.heatmap__cell[data-level="1"]{background:color-mix(in srgb, var(--accent) 25%, transparent);}
.heatmap__cell[data-level="2"]{background:color-mix(in srgb, var(--accent) 50%, transparent);}
.heatmap__cell[data-level="3"]{background:color-mix(in srgb, var(--accent) 75%, transparent);}
.heatmap__cell[data-level="4"]{background:var(--accent);}
.heatmap__cell[data-level="missed"]{background:var(--bad-soft); border-color:var(--bad);}

/* ---------- tables ---------- */
.log-table-wrap{overflow-x:auto;}
.log-table{width:100%; border-collapse:collapse; font-size:13px; min-width:640px;}
.log-table th{
  text-align:left; font-family:var(--mono); font-weight:500; color:var(--text-faint);
  font-size:11px; text-transform:uppercase; letter-spacing:0.04em;
  padding:8px 10px; border-bottom:1px solid var(--border);
}
.log-table td{padding:10px 10px; border-bottom:1px solid var(--border-soft); vertical-align:top;}
.log-table tr:hover td{background:var(--panel-alt);}
.log-table__del{background:none; border:none; color:var(--text-faint); cursor:pointer;}
.log-table__del:hover{color:var(--bad);}
.pill{display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-family:var(--mono);}
.pill--good{background:var(--good-soft); color:var(--good);}
.pill--bad{background:var(--bad-soft); color:var(--bad);}

/* ---------- charts ---------- */
.chart-wrap{position:relative; height:320px;}
.chart-wrap canvas{max-height:320px;}

/* ---------- footer ---------- */
.footer{
  padding:28px clamp(16px,4vw,48px) 60px; text-align:center; color:var(--text-faint);
  font-family:var(--mono); font-size:12px; font-style:italic; max-width:700px; margin:0 auto;
}
.footer__signature{
  margin-top:10px; font-style:normal; letter-spacing:0.04em; color:var(--text-faint);
}
.footer__signature strong{color:var(--accent2);}