/* =========================================================
   CADET PREP — Stylesheet
   ========================================================= */
:root{
  --bg:#0a0d0b;--panel:rgba(18,24,20,.80);--panel2:rgba(28,37,30,.85);--line:rgba(255,255,255,.10);
  --text:#eef0e6;--muted:#a3ad9a;--accent:#f5c84c;--orange:#ff7a1a;--ok:#7bd88f;--danger:#ff6b6b;
  --army:#ff1a1a;--air:#1180c0;--navy:#2a2a78;--police:#8a1a24;
  --r:18px;
  --head:'Barlow Semi Condensed','Barlow','IBM Plex Sans Thai',sans-serif;
  --body:'IBM Plex Sans','IBM Plex Sans Thai',sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Sans Thai',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:var(--body);color:var(--text);line-height:1.6;min-height:100vh}
button{font-family:inherit;cursor:pointer}

/* ---------- พื้นหลังตรา 4 โรงเรียน ---------- */
/* path อ้างอิงจากตำแหน่งไฟล์ CSS → ../img/bg.png */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    url('../img/bg.png') center/cover no-repeat,
    linear-gradient(90deg,#ff0000 0 23.5%,#1180c0 23.5% 51.4%,#232262 51.4% 75.8%,#7d1620 75.8%);
}
/* ชั้นสีเข้มทับภาพ — ลดตัวเลข .70/.84/.93 ถ้าอยากให้ภาพชัดขึ้น */
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,10,9,.70) 0%,rgba(8,10,9,.84) 45%,rgba(8,10,9,.93) 100%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;
}
.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 70px}
.glass{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.note{color:var(--muted);font-size:14px}

/* ---------- แถบสี 4 เหล่า ---------- */
.strip{display:flex;height:5px;border-radius:99px;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.strip i{flex:1}
.strip i:nth-child(1){background:var(--army)}
.strip i:nth-child(2){background:var(--air)}
.strip i:nth-child(3){background:var(--navy)}
.strip i:nth-child(4){background:var(--police)}

/* ---------- Header ---------- */
.top{display:flex;justify-content:space-between;align-items:stretch;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:16px}
.emblem{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,#f9d66b,#d4961a);box-shadow:0 10px 30px rgba(245,200,76,.3)}
.brand h1{font-family:var(--head);font-size:34px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.brand h1 span{color:var(--accent)}
.brand p{color:var(--muted);font-size:14px;margin-top:4px}
.countdown{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 20px;display:flex;align-items:center;gap:20px}
.cd-num{font-family:var(--mono);font-size:44px;font-weight:600;color:var(--accent);line-height:1}
.lbl{font-family:var(--head);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countdown input{margin-top:4px;background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:5px 8px;font-family:var(--mono);color-scheme:dark}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:6px;margin:26px 0 22px;background:var(--panel);border:1px solid var(--line);padding:6px;border-radius:14px;width:fit-content;max-width:100%;overflow-x:auto}
.tab{background:none;border:0;color:var(--muted);padding:10px 18px;border-radius:10px;white-space:nowrap;
  font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:.07em;text-transform:uppercase;transition:.2s}
.tab small{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;margin-left:6px;font-weight:500}
.tab:hover{color:var(--text)}
.tab.active{background:var(--accent);color:#1a1405}
.view{display:none;animation:fade .3s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.stat .v{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1.2;margin-top:4px}
.stat .s{font-size:13px;color:var(--muted)}
.pbar{height:6px;background:rgba(0,0,0,.45);border-radius:99px;overflow:hidden;margin-top:10px}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--c,var(--accent));transition:width .5s ease}
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card+.card{margin-top:18px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.card-h h2{font-family:var(--head);font-size:22px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.card-h h2 small{font-family:var(--body);font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0;text-transform:none;margin-left:8px}
.pill{font-family:var(--mono);font-size:12px;padding:4px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.sec{display:flex;align-items:center;gap:10px;margin:20px 0 6px;font-family:var(--head);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sec::after{content:'';flex:1;height:1px;background:var(--line)}
.sec b{font-family:var(--mono);font-weight:500;color:var(--accent);letter-spacing:0}

/* ---------- Checklist ---------- */
.check{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.15s}
.check:hover{background:var(--panel2);border-color:var(--line)}
.check input{display:none}
.box{width:22px;height:22px;flex:none;border-radius:7px;border:2px solid #5a6b58;display:grid;place-items:center;transition:.15s}
.box svg{opacity:0;transform:scale(.4);transition:.15s}
.check input:checked+.box{background:var(--ok);border-color:var(--ok)}
.check input:checked+.box svg{opacity:1;transform:none}
.txt{flex:1;font-size:15px}
.txt small{display:block;font-size:12.5px;color:var(--muted)}
.check input:checked~.txt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.25)}
.tag{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.del{background:none;border:0;color:var(--muted);font-size:18px;padding:0 4px;line-height:1}
.del:hover{color:var(--danger)}
.addrow{display:flex;gap:8px;margin-top:10px}
.addrow input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--text);font-family:var(--body);font-size:14px}
.btn{background:var(--accent);color:#1a1405;border:0;border-radius:10px;padding:9px 16px;font-family:var(--head);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14px}
.btn.ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
.btn:hover{filter:brightness(1.08)}
.mini{font-size:12px;padding:6px 10px}
.more-row{padding:6px 12px}

/* ---------- Timeline ---------- */
.tl{position:relative;padding-left:16px;margin-top:10px}
.tl::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.tl-i{position:relative;padding:4px 0 10px 16px}
.tl-i::before{content:'';position:absolute;left:-15px;top:11px;width:10px;height:10px;border-radius:50%;background:#3a4a39;border:2px solid #141b15}
.tl-i.now::before{background:var(--accent);box-shadow:0 0 0 5px rgba(245,200,76,.18)}
.tl-i.now .tl-t{color:var(--text)}
.tl-time{font-family:var(--mono);font-size:13px;color:var(--accent)}
.tl-t{font-size:14px;color:var(--muted)}
.now-badge{font-family:var(--head);font-size:11px;letter-spacing:.12em;background:var(--accent);color:#1a1405;border-radius:6px;padding:1px 6px;margin-left:6px;font-weight:700}

/* ---------- Week chart ---------- */
.chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:130px;margin-top:14px}
.col{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.col .b{width:100%;max-width:30px;border-radius:7px 7px 3px 3px;background:rgba(255,255,255,.12);min-height:4px;transition:height .5s}
.col .b.hi{background:var(--ok)}
.col .b.today{outline:2px solid var(--accent);outline-offset:2px}
.col span{font-size:12px;color:var(--muted)}

/* ---------- Study plan ---------- */
.plan{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:10px}
.pday{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 8px;min-height:96px}
.pday.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pday b{display:block;font-family:var(--head);font-size:15px;letter-spacing:.05em;margin-bottom:6px}
.pchip{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;margin-bottom:4px;color:#d7dccf}
.pchip i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--c)}
.pchip.x{color:var(--muted)}

/* ---------- Reading ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 16px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:7px 14px;font-size:14px}
.chip.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.subjects{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px;align-items:start}
.subj{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.subj-h{padding:18px 20px 14px;border-top:4px solid var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 14%,transparent),transparent)}
.subj-h .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.subj-h h3{font-size:19px;font-weight:700}
.subj-h .code{font-family:var(--head);font-size:12px;letter-spacing:.16em;color:var(--c);font-weight:700}
.subj-h .n{font-family:var(--mono);font-size:15px;color:var(--c)}
.subj-b{padding:4px 12px 14px}
.subj-b .sec{margin:14px 8px 4px}
.empty{color:var(--muted);font-size:14px;padding:12px}

/* ---------- Workout ---------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:18px}
.day{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;color:var(--text);transition:.2s}
.day b{display:block;font-family:var(--head);font-size:18px;letter-spacing:.04em}
.day span{font-size:11.5px;color:var(--muted);display:block;line-height:1.35;margin-top:2px}
.day.today{border-color:var(--accent)}
.day.sel{background:var(--accent);border-color:var(--accent)}
.day.sel b,.day.sel span{color:#1a1405}
.runbox{display:flex;gap:16px;align-items:center;background:linear-gradient(90deg,rgba(255,122,26,.18),transparent);border:1px solid rgba(255,122,26,.4);border-radius:14px;padding:16px 18px;margin:12px 0 6px}
.runbox .ic{width:46px;height:46px;flex:none;border-radius:12px;background:var(--orange);display:grid;place-items:center}
.runbox h4{font-size:16px}
.runbox p{font-size:14px;color:var(--muted)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;margin-top:8px}
.ex{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px}
.ex .t{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ex h4{font-family:var(--head);font-size:19px;font-weight:700;letter-spacing:.02em;line-height:1.2}
.ex .th{font-size:13px;color:var(--muted)}
.ex .sets{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:rgba(245,200,76,.1);border-radius:8px;padding:3px 8px;white-space:nowrap}
.ex p{font-size:13.5px;margin-top:10px}
.ex .why{color:var(--ok);font-size:13px;margin-top:6px}
.ex .warn{color:#ffb36b;font-size:13px;margin-top:6px}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
.phase{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;position:relative;overflow:hidden}
.phase .num{font-family:var(--head);font-size:56px;font-weight:700;color:rgba(245,200,76,.14);position:absolute;right:10px;top:-8px;line-height:1}
.phase .wk{font-family:var(--mono);font-size:12px;color:var(--accent)}
.phase h4{font-size:16px;margin:2px 0 8px}
.phase ul{padding-left:18px;font-size:13.5px;color:#cfd5c5}
.phase .goal{margin-top:10px;font-size:13px;color:var(--ok);border-top:1px dashed var(--line);padding-top:8px}
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
.tip{background:var(--panel2);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;font-size:14px}
.tip b{display:block;font-size:14px;margin-bottom:2px}
footer{margin-top:40px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:13px}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .grid2{grid-template-columns:1fr}
  .phases{grid-template-columns:repeat(2,1fr)}
  .plan{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:700px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .subjects{grid-template-columns:1fr}
  .week{grid-template-columns:repeat(4,1fr)}
  .plan{grid-template-columns:repeat(2,1fr)}
  .phases{grid-template-columns:1fr}
  .brand h1{font-size:26px}
  .cd-num{font-size:36px}
  .countdown{width:100%;justify-content:space-between}
}