:root{
  --bg:#0e1116;
  --fg:#f2efe9;
  --muted:#9aa3ad;
  --accent:#f0a23a;      /* orange */
  --accent-2:#e8731c;    /* dunkelorange */
  --red:#e4382a;
  --card:#171c24;
  --line:#2a313c;
  --heat:0;              /* 0..1 Tageszeit, von JS gesetzt */
  --slip:0;              /* 0..1 Verzug, von JS gesetzt */
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--fg);
  overflow:hidden; display:flex; flex-direction:column; height:100vh;
}

/* Tages-Heat: orange-Bogen + roter Verzugs-Schleier, langsam */
#heat{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% -10%,
      rgba(228,56,42, calc(var(--slip)*0.5)) 0%, transparent 55%),
    linear-gradient(160deg,
      hsl(calc(200 - var(--heat)*182), calc((38 + var(--heat)*32)*1%), calc((12 + var(--heat)*3)*1%)) 0%,
      hsl(calc(210 - var(--heat)*195), calc((30 + var(--heat)*30)*1%), 8%) 100%);
  transition:background 3s linear;
}

/* Topbar */
#topbar{display:flex; align-items:center; gap:1.5rem; padding:.8rem 1.4rem; border-bottom:1px solid var(--line);}
.clock{display:flex; align-items:baseline; gap:.6rem;}
#wallclock{font-size:2rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px;}
.slip{font-size:1rem; font-weight:600; padding:.15rem .55rem; border-radius:999px;}
.slip.behind{background:rgba(228,56,42,.18); color:#ff7b6e;}
.slip.ahead{background:rgba(90,200,120,.16); color:#7fe0a0;}
.slip.on{background:rgba(240,162,58,.14); color:var(--accent);}
.title{flex:1; color:var(--muted); font-size:1.05rem;}
.controls{display:flex; gap:.6rem;}

.btn{font:inherit; font-size:.95rem; color:var(--fg); background:#222934; border:1px solid var(--line);
  border-radius:10px; padding:.5rem .9rem; cursor:pointer; transition:transform .08s, background .15s, border-color .15s;}
.btn:hover{background:#2b333f;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:default;}
.btn.accent{border-color:var(--accent); color:var(--accent);}
.btn.primary{background:var(--accent); color:#1a1206; border-color:var(--accent); font-weight:700;}
.btn.primary:hover{background:#ffb44d;}
.btn.ghost{background:transparent;}
.btn.big{font-size:1.25rem; padding:.85rem 1.6rem; border-radius:14px;}

/* Body: links Agenda, rechts Bühne */
#body{flex:1; display:flex; min-height:0;}

/* Vertikale Agenda */
#rail{width:min(36vw,420px); min-width:300px; border-right:1px solid var(--line); background:rgba(12,15,20,.45);}
.rail-list{position:relative; height:100%; overflow-y:auto; padding:.6rem .8rem .6rem 46px; scroll-behavior:smooth;}
.rail-list::-webkit-scrollbar{width:8px;}
.rail-list::-webkit-scrollbar-thumb{background:#2c333d; border-radius:4px;}

.blockhead{margin:.7rem 0 .25rem; color:var(--accent); font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; display:flex; justify-content:space-between;}
.blockhead:first-child{margin-top:0;}
.blockhead .t{color:var(--muted); font-weight:600; font-variant-numeric:tabular-nums;}

.row{position:relative; display:flex; align-items:baseline; gap:.6rem; padding:.42rem .6rem;
  border-radius:9px; border:1px solid transparent; margin-bottom:2px; transition:background .3s,border-color .3s,opacity .3s; overflow:hidden;}
.row .time{color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; flex-shrink:0; width:3.1em;}
.row .lab{flex:1; font-size:1rem; line-height:1.2;}
.row .dur{color:var(--muted); font-size:.8rem; flex-shrink:0;}
.row .time,.row .lab,.row .dur{position:relative; z-index:2;}  /* Text über der Füllung */
.row.done{opacity:.5;}
.row.done .lab::after{content:" ✓"; color:#7fe0a0;}
.row.pause{background:repeating-linear-gradient(45deg,#161b22,#161b22 8px,#1d2530 8px,#1d2530 16px);}
.row.pause .lab{color:#aeb6c0;}
.row.current{background:rgba(240,162,58,.22); border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent); font-weight:600;}
.row.current.over{border-color:var(--red); background:rgba(228,56,42,.22); box-shadow:inset 4px 0 0 var(--red);}
/* Fortschritts-Füllung in aktueller Zeile */
.row .fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:rgba(240,162,58,.45); z-index:1; transition:width .9s linear;}
.row.over .fill{background:rgba(228,56,42,.45);}

/* Läufer im linken Gutter */
.runner{position:absolute; left:8px; font-size:1.5rem; line-height:1; transform:translateY(-50%);
  transition:top .9s ease; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); z-index:4; pointer-events:none;}
.runner.hidden{display:none;}

/* Rechte Bühne */
#pane{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; padding:1.5rem; min-width:0;}
#cardView,#timerView{width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem;}
.hidden{display:none !important;}

.card{width:min(820px,94%); background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:2rem 2.4rem; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.35); border-top:4px solid var(--accent);}
.pause-anim{font-size:4.6rem; line-height:1; margin-bottom:.2rem; display:none; transform-origin:50% 90%;}
.card.pausing .pause-anim{display:block; animation:cupbounce 1.15s ease-in-out infinite;}
@keyframes cupbounce{
  0%,100%{transform:translateY(0) rotate(-9deg);}
  28%{transform:translateY(-30px) rotate(7deg);}
  50%{transform:translateY(0) rotate(9deg);}
  72%{transform:translateY(-13px) rotate(-5deg);}
}
.card-block{color:var(--accent); font-weight:700; letter-spacing:.5px; text-transform:uppercase; font-size:.95rem;}
.card-title{font-size:3rem; font-weight:800; line-height:1.1; margin:.4rem 0 .3rem;}
.card-window{color:var(--muted); font-size:1.15rem; font-variant-numeric:tabular-nums;}
.progress{position:relative; height:16px; background:#0c1015; border-radius:999px; margin:1.3rem 0 .8rem; overflow:hidden;}
.progress-bar{position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .9s linear;}
.progress-over{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--red); opacity:.85; transition:width .9s linear; animation:breathe 3s ease-in-out infinite;}
.card-meta{color:var(--muted); font-size:1.05rem; min-height:1.3em;}
.card-meta .hot{color:#ff7b6e; font-weight:700;}
.manual-controls{display:flex; gap:1rem;}
#nextBtn.suggest{animation:pulse 1.6s ease-in-out infinite; border-color:var(--red);}
.upnext{color:var(--muted); font-size:1rem; min-height:1.2em;}
.upnext b{color:var(--fg);}

/* Timer-Bühne (rechts, Agenda bleibt links sichtbar) */
.timer-label{color:var(--muted); font-size:1.3rem;}
.timer-big{font-size:min(22vw,17rem); font-weight:800; line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:2px; transition:color .3s;}
.timer-big.over{color:var(--red); animation:breathe 2.4s ease-in-out infinite;}
.timer-presets{display:flex; gap:.7rem;}
.timer-controls{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center;}
.timer-foot{display:flex; gap:.8rem; align-items:center; margin-top:.4rem;}
#tAlarm.off{opacity:.55; border-color:var(--line); color:var(--muted);}

/* Einstellungen */
.settings{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(8,10,14,.8);}
.settings-panel{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:1.8rem 2rem; width:min(520px,92vw);}
.settings-panel h2{margin:0 0 1.2rem;}
.settings .row{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line);}
.settings .row > span{color:var(--muted);}
.settings select{background:#222934; color:var(--fg); border:1px solid var(--line); border-radius:8px; padding:.4rem;}
.demo-time{color:var(--accent); font-variant-numeric:tabular-nums; margin-top:.3rem; text-align:right;}

/* ---------- Heller Modus ---------- */
body.light{
  --bg:#f3efe7; --fg:#1d2229; --muted:#5d6671;
  --accent:#d2790f; --accent-2:#b85d0c; --red:#cf2b1c;
  --card:#ffffff; --line:#ddd6c8;
}
body.light #heat{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(178,72,12, calc(var(--slip)*0.26)) 0%, transparent 58%),
    linear-gradient(160deg, var(--heat-top, #faf6ef) 0%, var(--heat-bottom, #efe5d6) 100%);
}
body.light #rail{background:rgba(255,250,243,.8);}
body.light .rail-list::-webkit-scrollbar-thumb{background:#cfc8b8;}
body.light .btn{background:#ece6da;}
body.light .btn:hover{background:#e2dbcc;}
body.light .btn.ghost{background:transparent;}
body.light .progress{background:#e7e0d2;}
body.light .row.pause{background:repeating-linear-gradient(45deg,#e6dccb,#e6dccb 8px,#d8ccb5 8px,#d8ccb5 16px);}
body.light .row.pause .lab{color:var(--fg);}
body.light .row.current{background:rgba(214,118,12,.34);}
body.light .row.current.over{background:rgba(207,43,28,.26);}
body.light .row .fill{background:rgba(214,118,12,.5);}
body.light .row.over .fill{background:rgba(207,43,28,.42);}
body.light .slip.behind{background:rgba(207,43,28,.14); color:#b3271a;}
body.light .slip.ahead{background:rgba(40,150,80,.16); color:#1f7a44;}
body.light .slip.on{background:rgba(210,121,15,.16); color:var(--accent);}
body.light .row.done .lab::after{color:#1f8a4c;}
body.light .card-meta .hot{color:#c0291c;}
body.light .card{box-shadow:0 12px 40px rgba(120,100,60,.18);}
body.light .settings{background:rgba(60,55,45,.45);}
body.light .settings select{background:#ece6da; color:var(--fg);}

@keyframes breathe{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(228,56,42,.55);}50%{box-shadow:0 0 0 10px rgba(228,56,42,0);}}

@media (max-width:760px){
  #body{flex-direction:column;}
  #rail{width:100%; min-width:0; height:42%; border-right:none; border-bottom:1px solid var(--line);}
  .card-title{font-size:2rem;}
  #topbar{flex-wrap:wrap; gap:.5rem;}
  .title{order:3; flex-basis:100%;}
  .timer-big{font-size:30vw;}
}