/* 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,12,.78);
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(2px);
}
.panel{
  width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;
  background:var(--panel);
  border:2px solid #1d3fb0;
  box-shadow:0 0 0 2px #04102e,0 0 18px rgba(58,110,255,.55),inset 0 0 24px rgba(35,80,255,.18);
  padding:10px 12px calc(12px + env(safe-area-inset-bottom));
}
.panel-head{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid #14306e;padding-bottom:8px;margin-bottom:10px;
}
#panelTitle{
  flex:1;font-weight:bold;letter-spacing:3px;font-size:14px;color:#9fe9ff;
  text-shadow:0 0 8px rgba(80,220,255,.8);
}
#panelClose,#panelBack{
  width:34px;height:30px;border:2px solid #2b54d8;background:#0a1742;color:#cfe2ff;
  font-size:16px;line-height:1;cursor:pointer;
  box-shadow:0 0 8px rgba(60,110,255,.5);
}
#panelBody{overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* menu list */
.menu-btn{
  display:block;width:100%;margin:8px 0;padding:14px 12px;text-align:left;
  font-family:inherit;font-size:14px;font-weight:bold;letter-spacing:3px;cursor:pointer;
  color:#eaf6ff;background:#0a1230;border:2px solid #2444c4;
  box-shadow:inset 0 0 14px rgba(40,90,255,.25),0 0 10px rgba(40,90,255,.35);
}
.menu-btn:active{background:#13245e}
.menu-btn .sub{display:block;font-weight:normal;letter-spacing:1px;font-size:11px;color:#7fa3e8;margin-top:4px}
.menu-btn.locked{opacity:.45;border-color:#3a3f55;box-shadow:none}

/* 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(64px + env(safe-area-inset-bottom));
  width:min(92vw,520px);min-height:54px;z-index:25;
  background:rgba(8,16,40,.88);border:2px solid #2c4ed0;
  box-shadow:0 0 14px rgba(70,120,255,.55);
  color:#eef6ff;font-size:13px;line-height:1.55;letter-spacing:.5px;
  padding:10px 12px;text-align:center;
}
#subtitleBar.lightmode{
  background:rgba(255,255,255,.92);color:#101c4e;border-color:#2740a8;
  box-shadow:0 0 16px rgba(40,70,200,.35);
}
#recapExit{
  position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:26;
  width:38px;height:34px;font-size:16px;cursor:pointer;
  background:rgba(10,20,60,.8);border:2px solid #2c4ed0;color:#dfe9ff;
}
#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}