:root{
  --navy:#151b33;
  --navy-deep:#0d1122;
  --gold:#d4a94f;
  --gold-soft:#f0dfae;
  --coral:#e2604f;
  --cream:#fbf6ec;
  --paper:#ffffff;
  --ink:#232323;
  --muted:#8b8270;
  --line: rgba(21,27,51,0.08);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--cream);
  font-family:'IBM Plex Sans Thai', sans-serif;
  color:var(--ink);
}
a{color:inherit;}

nav.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;background:var(--navy);
}
nav.topbar .logo{font-family:'Noto Serif Thai', serif;font-weight:700;font-size:18px;color:var(--gold);text-decoration:none;}
nav.topbar .nav-right{display:flex;gap:10px;align-items:center;font-size:13px;}
nav.topbar .nav-right a{color:var(--gold-soft);text-decoration:none;padding:8px 14px;border-radius:9px;border:1px solid rgba(212,169,79,0.4);}
nav.topbar .nav-right a.solid{background:var(--coral);border:none;color:var(--cream);font-weight:600;}

main.shell{max-width:640px;margin:0 auto;padding:32px 20px 80px;}

.card{
  background:var(--navy);border-radius:16px;padding:24px 22px;color:var(--cream);
  position:relative;overflow:hidden;
}
.card h1{font-family:'Noto Serif Thai', serif;font-weight:600;font-size:22px;margin:0 0 4px;}
.card p.sub{color:rgba(251,246,236,0.6);font-size:13px;margin:0 0 18px;}

.mode-btn{
  display:block;width:100%;text-align:left;background:rgba(251,246,236,0.06);
  border:1px solid rgba(212,169,79,0.3);border-radius:12px;padding:14px 16px;
  margin-bottom:10px;color:inherit;text-decoration:none;cursor:pointer;
}
.mode-btn .title{display:block;color:var(--cream);font-size:14px;margin-bottom:3px;}
.mode-btn .desc{display:block;color:rgba(251,246,236,0.5);font-size:11.5px;line-height:1.5;}

.field{
  background:rgba(251,246,236,0.06);border:1px solid rgba(212,169,79,0.35);
  border-radius:12px;padding:12px 14px;margin-bottom:10px;
}
.field label{display:block;font-size:11px;color:var(--gold-soft);margin-bottom:4px;}
.field input,.field select{
  width:100%;background:none;border:none;color:var(--cream);
  font-family:'IBM Plex Sans Thai', sans-serif;font-size:14.5px;outline:none;
}

.btn{
  display:inline-block;width:100%;text-align:center;padding:13px;border:none;
  border-radius:12px;background:var(--coral);color:var(--cream);font-weight:600;
  font-size:14.5px;cursor:pointer;text-decoration:none;
}
.btn.ghost{background:none;border:1px solid rgba(212,169,79,0.4);color:var(--gold-soft);}

.num-row{display:flex;gap:8px;margin:10px 0 4px;}
.num-card{
  background:linear-gradient(160deg, var(--gold-soft), var(--gold));color:var(--navy-deep);
  font-family:'Noto Serif Thai', serif;font-weight:700;font-size:22px;
  width:44px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;
}

.note{color:rgba(251,246,236,0.45);font-size:11px;line-height:1.7;margin-top:12px;}
.warn-box{
  background:rgba(226,96,79,0.1);border:1px solid rgba(226,96,79,0.28);border-radius:9px;
  padding:10px 12px;font-size:11.5px;color:var(--gold-soft);margin-top:12px;line-height:1.6;
}

.panel-light{background:var(--paper);border-radius:14px;padding:20px 20px;border:1px solid var(--line);margin-top:18px;}
.panel-light h2{font-family:'Noto Serif Thai', serif;font-size:17px;margin:0 0 12px;}
.draw-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.draw-row:last-child{border-bottom:none;}
.draw-numbers{font-family:monospace;background:var(--navy);color:var(--gold-soft);padding:3px 8px;border-radius:6px;}

.freq-item{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.freq-num{font-family:monospace;font-size:12.5px;width:22px;}
.freq-track{flex:1;height:7px;background:var(--line);border-radius:6px;overflow:hidden;}
.freq-fill{height:100%;background:linear-gradient(90deg, var(--coral), var(--gold));}
.freq-pct{font-size:11px;color:var(--muted);width:42px;text-align:right;}

.error-text{color:#a32d2d;font-size:12.5px;margin:6px 0 0;}
.back-link{display:inline-block;color:var(--gold-soft);font-size:12px;margin-bottom:14px;text-decoration:none;}

.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto;
  background:var(--navy-deep);border:1px solid rgba(212,169,79,0.3);border-radius:14px;
  padding:16px 18px;color:var(--cream);z-index:50;
}
.cookie-banner p{font-size:12px;line-height:1.6;margin:0 0 10px;color:rgba(251,246,236,0.75);}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap;}
.cookie-actions button{font-size:12px;padding:8px 14px;border-radius:8px;cursor:pointer;border:none;}
.cookie-accept{background:var(--coral);color:var(--cream);font-weight:600;}
.cookie-reject{background:none;border:1px solid rgba(251,246,236,0.3) !important;color:rgba(251,246,236,0.65);}

@media(max-width:480px){
  nav.topbar{padding:14px 16px;}
}