/* RoboJadwal — vivid glowing pixel UI */
:root{
  --ink:#eaf2ff;
  --blue:#1b3df0;
  --cyan:#3dffd4;
  --yellow:#ffe23d;
  --red:#ff2438;
  --dark:#04102e;
  --panel:#060d26;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:#000;}
body{
  font-family:"Courier New",ui-monospace,Menlo,monospace;
  color:var(--ink);
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  position:fixed;inset:0;
  width:100%;height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
}
.hidden{display:none !important}

#screen{
  position:fixed;inset:0;width:100vw;height:100dvh;display:block;
  image-rendering:pixelated;
  touch-action:none;            /* drag jari = mata mengikuti, bukan scroll */
}

/* ---------- overlay panel ---------- */
#overlay{
  position:fixed;inset:0;z-index:40;
  background:rgba(1,3,14,.72);
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(7px);
}
.panel{
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(13,22,58,.97) 0%, rgba(5,9,28,.99) 100%);
  border:1px solid rgba(96,140,255,.35);border-bottom:none;
  box-shadow:0 -10px 50px rgba(15,45,170,.5), inset 0 1px 0 rgba(150,190,255,.22);
  padding:16px 18px calc(18px + env(safe-area-inset-bottom));
}
.panel-head{
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(80,120,255,.22);padding-bottom:12px;margin-bottom:12px;
}
#panelTitle{
  flex:1;font-weight:bold;letter-spacing:6px;font-size:12px;color:#7fd8ff;
  text-shadow:0 0 10px rgba(80,220,255,.7);
}
#panelClose,#panelBack{
  width:38px;height:32px;border:1px solid rgba(110,150,255,.4);background:rgba(22,42,115,.35);
  color:#cfe2ff;font-size:16px;line-height:1;cursor:pointer;
}
#panelClose:active,#panelBack:active{background:rgba(55,95,230,.45)}
#panelBody{overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* menu list — bilah kaca dengan aksen kiri menyala */
.menu-btn{
  display:block;width:100%;margin:9px 0;padding:15px 38px 15px 15px;text-align:left;position:relative;
  font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:3px;cursor:pointer;
  color:#eef7ff;background:rgba(20,36,96,.30);
  border:1px solid rgba(80,120,235,.25);border-left:3px solid #38e6c2;
  transition:background .14s, border-color .14s;
}
.menu-btn::after{
  content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:#5d83d8;font-size:18px;font-weight:normal;
}
.menu-btn:active{background:rgba(56,98,235,.32);border-color:rgba(120,160,255,.5)}
.menu-btn .sub{display:block;font-weight:normal;letter-spacing:1px;font-size:11px;color:#6e90d4;margin-top:5px}
.menu-btn.locked{opacity:.5;border-left-color:#5a6177}
.menu-btn.locked::after{content:""}

/* generic bits */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.lbl{font-size:11px;letter-spacing:2px;color:#8fb4ff;display:block;margin:10px 0 4px}
textarea,input[type=text],input[type=time],input[type=number],input[type=password],select{
  width:100%;background:#040a1f;color:#d9f4ff;border:2px solid #1f3da8;
  font-family:inherit;font-size:13px;padding:9px;outline:none;
}
textarea{min-height:160px;white-space:pre;}
input[type=range]{width:100%}
.btn{
  font-family:inherit;font-size:12px;font-weight:bold;letter-spacing:2px;cursor:pointer;
  padding:10px 12px;color:#eaffff;background:#0c1d52;border:2px solid #2a55e0;
  box-shadow:0 0 8px rgba(50,100,255,.4);
}
.btn:active{background:#16307e}
.btn.warn{border-color:#c8a400;background:#3a3000;color:#ffe96b}
.btn.danger{border-color:#d8203a;background:#3c060f;color:#ffb3bd}
.btn.ok{border-color:#16c79a;background:#03301f;color:#9dffe0}
.btn.mini{padding:6px 8px;font-size:11px}
.note{font-size:11px;color:#7d96c8;line-height:1.5;margin:6px 0}
.err{font-size:12px;color:#ff8b9a;line-height:1.6;white-space:pre-wrap}
.okmsg{font-size:12px;color:#7dffd2}

/* all list */
.task-card{
  border:2px solid #1c3a9a;background:#070f2c;padding:9px;margin:8px 0;
  box-shadow:inset 0 0 10px rgba(40,90,255,.15);
}
.task-card.done{border-color:#0f7a5a;opacity:.85}
.task-card.late{border-color:#d8203a;box-shadow:inset 0 0 10px rgba(255,40,60,.2)}
.task-card.term{border-color:#454a63;opacity:.55}
.t-title{font-weight:bold;font-size:13px;letter-spacing:1px;color:#dff1ff}
.t-meta{font-size:11px;color:#8fb0e8;margin-top:3px;line-height:1.5}
.t-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sec-h{
  font-size:11px;letter-spacing:3px;color:#ffd95e;margin:14px 0 4px;
  text-shadow:0 0 6px rgba(255,210,60,.6);
}
.badge{font-size:10px;padding:2px 6px;border:1px solid currentColor;margin-left:6px}
.b-act{color:#6ee7ff}.b-done{color:#5dffb0}.b-late{color:#ff7d8d}.b-term{color:#9aa0b8}

/* connect rows */
.cx{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #122a6a;padding:9px 2px;font-size:12px}
.cx b{color:#cfe6ff;font-weight:bold;letter-spacing:1px}
.cx .st{text-align:right}
.st.ok{color:#5dffb0}.st.no{color:#ff8b9a}.st.so{color:#ffd95e}

/* recap subtitle */
#subtitleBar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(72px + env(safe-area-inset-bottom));
  width:min(92vw,520px);z-index:25;
  background:transparent;border:none;box-shadow:none;
  color:#f2f8ff;font-size:14px;font-weight:bold;line-height:1.6;letter-spacing:.6px;
  padding:0;text-align:center;pointer-events:none;
  text-shadow:0 0 5px rgba(0,0,12,.95),0 0 12px rgba(0,0,12,.9),0 2px 6px rgba(0,0,12,.95),0 0 22px rgba(0,0,12,.7);
}
#subtitleBar.lightmode{
  background:transparent;border:none;box-shadow:none;color:#0c1850;font-weight:bold;
  text-shadow:0 0 6px rgba(255,255,255,.95),0 0 14px rgba(255,255,255,.95),0 0 26px rgba(255,255,255,.85);
}
#recapExit{
  position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:26;
  width:40px;height:36px;font-size:17px;cursor:pointer;
  background:rgba(10,20,60,.55);border:1px solid rgba(110,150,255,.45);color:#dfe9ff;
  backdrop-filter:blur(3px);
}
#recapExit.lightmode{background:rgba(255,255,255,.9);color:#15225e;border-color:#2740a8}

#toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(70px + env(safe-area-inset-bottom));z-index:60;
  background:#081336;border:2px solid #2a55e0;color:#dff0ff;
  font-size:12px;letter-spacing:1px;padding:9px 14px;max-width:88vw;text-align:center;
  box-shadow:0 0 12px rgba(60,110,255,.6);
}
.subt{font-size:12px;color:#9fc0ff}
hr.sep{border:none;border-top:1px solid #15307a;margin:12px 0}

/* teks bicara robot (klik wajah) — mengambang tanpa box, sama seperti subtitle recap */
#subtitleBar.speech{
  background:transparent;border:none;box-shadow:none;
  font-size:14px;letter-spacing:.5px;
  animation:speechIn .25s ease-out;
}
@keyframes speechIn{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}