/* ===== Theme system =====
   :root = Light Gray (ค่าเริ่มต้น) ; [data-theme=...] override
   ตัวแปรที่ขึ้นกับธีม: palette + --glow-a/b, --lb-bg, --hot, --shadow(-hover), --on-ember */
:root{
  --bg:oklch(0.962 0.003 260);
  --bg-2:oklch(0.928 0.004 260);
  --panel:oklch(0.995 0.002 260);
  --line:oklch(0.85 0.006 260);
  --line-soft:oklch(0.905 0.005 260);
  --ink:oklch(0.27 0.012 260);
  --ink-dim:oklch(0.46 0.014 260);
  --ink-faint:oklch(0.61 0.014 260);
  --ember:oklch(0.64 0.17 52);
  --ember-deep:oklch(0.56 0.17 46);
  --on-ember:oklch(0.99 0.004 85);
  --glow-a:oklch(0.9 0.012 260 / .5);
  --glow-b:oklch(0.93 0.008 260 / .55);
  --lb-bg:oklch(0.85 0.006 260 / .9);
  --hot:oklch(0.92 0.045 60);
  --shadow:0 16px 38px -22px oklch(0.5 0.02 260 / .26);
  --shadow-hover:0 26px 48px -26px oklch(0.45 0.02 260 / .32);
  --pill-on-bg:oklch(0.92 0.08 150);
  --pill-on-fg:oklch(0.42 0.12 150);
}
[data-theme="blue"]{
  --bg:oklch(0.965 0.022 235);
  --bg-2:oklch(0.925 0.032 233);
  --panel:oklch(0.995 0.008 235);
  --line:oklch(0.85 0.032 233);
  --line-soft:oklch(0.91 0.022 234);
  --ink:oklch(0.29 0.045 250);
  --ink-dim:oklch(0.46 0.045 248);
  --ink-faint:oklch(0.6 0.035 245);
  --ember:oklch(0.62 0.17 50);
  --ember-deep:oklch(0.54 0.17 44);
  --on-ember:oklch(0.99 0.004 85);
  --glow-a:oklch(0.86 0.07 230 / .6);
  --glow-b:oklch(0.91 0.05 252 / .55);
  --lb-bg:oklch(0.85 0.035 235 / .9);
  --hot:oklch(0.9 0.06 235);
  --shadow:0 16px 38px -22px oklch(0.45 0.06 245 / .28);
  --shadow-hover:0 26px 48px -26px oklch(0.4 0.07 245 / .34);
}
[data-theme="navy"]{
  --bg:oklch(0.22 0.04 255);
  --bg-2:oklch(0.26 0.045 255);
  --panel:oklch(0.285 0.046 255);
  --line:oklch(0.4 0.04 255);
  --line-soft:oklch(0.345 0.04 255);
  --ink:oklch(0.95 0.01 250);
  --ink-dim:oklch(0.78 0.02 250);
  --ink-faint:oklch(0.64 0.03 250);
  --ember:oklch(0.78 0.15 62);
  --ember-deep:oklch(0.7 0.16 54);
  --on-ember:oklch(0.2 0.04 255);
  --glow-a:oklch(0.42 0.09 258 / .5);
  --glow-b:oklch(0.36 0.07 280 / .5);
  --lb-bg:oklch(0.15 0.03 255 / .85);
  --hot:oklch(0.34 0.06 255);
  --shadow:0 18px 40px -22px oklch(0.05 0.03 255 / .8);
  --shadow-hover:0 28px 50px -26px oklch(0.04 0.03 255 / .9);
  --pill-on-bg:oklch(0.4 0.1 150);
  --pill-on-fg:oklch(0.9 0.1 150);
}
[data-theme="floral"]{
  --bg:oklch(0.97 0.022 60);
  --bg-2:oklch(0.94 0.03 48);
  --panel:oklch(0.992 0.012 70);
  --line:oklch(0.86 0.03 42);
  --line-soft:oklch(0.92 0.022 50);
  --ink:oklch(0.3 0.045 28);
  --ink-dim:oklch(0.48 0.05 28);
  --ink-faint:oklch(0.62 0.045 32);
  --ember:oklch(0.6 0.19 18);
  --ember-deep:oklch(0.52 0.19 14);
  --on-ember:oklch(0.99 0.005 70);
  --glow-a:oklch(0.9 0.07 22 / .6);
  --glow-b:oklch(0.93 0.05 78 / .55);
  --lb-bg:oklch(0.88 0.035 40 / .9);
  --hot:oklch(0.92 0.06 28);
  --shadow:0 16px 38px -22px oklch(0.5 0.06 25 / .26);
  --shadow-hover:0 26px 48px -26px oklch(0.45 0.07 22 / .32);
  --pill-on-bg:oklch(0.9 0.08 150);
  --pill-on-fg:oklch(0.44 0.12 150);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk","Anuphan",system-ui,sans-serif;
  font-size:clamp(15px,1vw+13px,17px);
  line-height:1.6;min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s,color .4s;
}
.wrap{max-width:1320px;margin:0 auto;padding:clamp(28px,5vw,72px) clamp(20px,5vw,64px) 120px}

/* ---------- Theme switcher ---------- */
.themebar{position:fixed;top:16px;left:18px;z-index:41;display:flex;gap:8px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 10px;box-shadow:var(--shadow)}
.themebar .lbl{font-size:.72rem;color:var(--ink-faint);letter-spacing:.04em;margin-right:2px}
.sw{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px oklch(0.5 0.02 260 / .25);transition:transform .25s,border-color .25s}
.sw:hover{transform:scale(1.12)}
.sw.active{border-color:var(--ember)}
.sw-gray{background:oklch(0.88 0.004 260)}
.sw-blue{background:oklch(0.8 0.07 235)}
.sw-navy{background:oklch(0.32 0.06 255)}
.sw-floral{background:linear-gradient(135deg,oklch(0.95 0.03 75),oklch(0.78 0.13 18))}

/* ---------- Gallery tabs (เพจหลายหัวข้อ) ---------- */
.galnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(20px,3vw,30px)}
.gtab{font:inherit;cursor:pointer;text-decoration:none;font-size:.86rem;font-weight:600;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
  transition:background .25s,border-color .25s,color .25s,transform .3s cubic-bezier(.16,1,.3,1)}
.gtab:hover{border-color:var(--ember);color:var(--ink);transform:translateY(-2px)}
.gtab.active{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
.gtab.add{border-style:dashed;color:var(--ember);background:transparent}
.page-actions{display:flex;gap:14px;margin:-8px 0 20px}
.page-actions button{font:inherit;cursor:pointer;font-size:.82rem;color:var(--ink-faint);
  background:none;border:none;padding:2px 0;transition:color .25s}
.page-actions button:hover{color:var(--ember)}

/* ---------- Header ---------- */
header{display:grid;grid-template-columns:1fr auto;align-items:end;gap:28px;
  padding-bottom:clamp(28px,4vw,52px);border-bottom:1px solid var(--line)}
.kicker{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ember);font-weight:600;display:flex;align-items:center;gap:.7em}
.kicker::before{content:"";width:26px;height:1px;background:var(--ember);display:inline-block}
h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:.96;
  font-size:clamp(2.6rem,7vw,5.4rem);margin:.32em 0 .26em}
h1 em{font-style:normal;color:var(--ink-faint)}
.lede{max-width:46ch;color:var(--ink-dim);font-size:clamp(1rem,1.4vw,1.12rem)}
.count{text-align:right;color:var(--ink-faint);font-size:.84rem;line-height:1.45;white-space:nowrap}
.count b{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(2.4rem,5vw,3.4rem);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}

/* ---------- Gallery ---------- */
.grid{margin-top:clamp(30px,4vw,56px);display:grid;gap:clamp(16px,1.6vw,26px);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));grid-auto-flow:dense}
.card{--i:0;position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .5s,background-color .4s;
  opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i)*60ms + 120ms)}
@keyframes rise{to{opacity:1;transform:none}}
.card:hover{transform:translateY(-6px);border-color:var(--ember);box-shadow:var(--shadow-hover)}
.card.feature{grid-column:span 2}
@media(max-width:660px){.card.feature{grid-column:span 1}}

.shot{position:relative;overflow:hidden;background:var(--bg-2)}
.shot img{display:block;width:100%;height:auto;object-fit:cover;object-position:top center;
  max-height:var(--ph,400px);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(.98)}
.card:hover .shot img{transform:scale(1.035);filter:saturate(1.04)}
.feature .shot img{--ph:520px}

.tall{position:absolute;top:12px;right:12px;z-index:2;font-size:.7rem;letter-spacing:.04em;
  color:oklch(0.97 0.01 85);background:oklch(0.27 0.02 60 / .58);backdrop-filter:blur(6px);
  border:1px solid oklch(0.6 0.02 70 / .35);padding:5px 10px;border-radius:999px;display:flex;align-items:center;gap:.45em}
.tall b{color:oklch(0.82 0.15 62);font-weight:600}

.cap{position:relative;z-index:2;margin-top:0;padding:14px 18px 18px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.cap .t{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.04rem;letter-spacing:-.01em;line-height:1.2}
.cap .s{color:var(--ink-faint);font-size:.78rem;margin-top:3px;font-variant-numeric:tabular-nums}
.idx{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--ember);font-size:.82rem;letter-spacing:.05em}
.view{flex:none;align-self:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-dim);
  transition:background .35s,color .35s,border-color .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.card:hover .view{background:var(--ember);border-color:var(--ember);color:var(--on-ember);transform:rotate(0) scale(1.06)}

/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;z-index:50;display:none;background:var(--lb-bg);backdrop-filter:blur(10px);
  padding:clamp(14px,3vw,40px)}
.lb.open{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;
  color:var(--ink);max-width:min(1600px,100%);width:100%;margin:0 auto}
.lb-bar .meta b{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.1rem}
.lb-bar .meta span{display:block;color:var(--ink-faint);font-size:.8rem;font-variant-numeric:tabular-nums}
.lb-ctrl{display:flex;align-items:center;gap:8px}
.lb-ctrl button{font:inherit;cursor:pointer;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  transition:background .3s,border-color .3s,color .3s,transform .3s}
.lb-ctrl button:hover{border-color:var(--ember);color:var(--ember);transform:translateY(-2px)}
.lb-ctrl .n{font-variant-numeric:tabular-nums;color:var(--ink-faint);font-size:.85rem;padding:0 6px;min-width:62px;text-align:center}
/* ขนาดจริง ไม่ย่อ — เลื่อนดูได้ (ล้อเมาส์/ลาก) แต่ซ่อน scrollbar */
.lb-stage{overflow:auto;background:transparent;min-height:0;
  max-width:min(1600px,100%);width:100%;margin:0 auto;
  scrollbar-width:none;-ms-overflow-style:none}
.lb-stage::-webkit-scrollbar{width:0;height:0;display:none}
.lb-stage img{display:block;width:auto;height:auto;max-width:none;margin:0 auto}

/* filmstrip ก่อนหน้า/ถัดไป */
.lb-foot{max-width:min(1600px,100%);width:100%;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.lb-cap{text-align:center;max-width:760px;margin:0 auto}
.lb-cap-t{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink);line-height:1.3}
.lb-cap-d{color:var(--ink-dim);font-size:.9rem;margin-top:3px;white-space:pre-wrap;line-height:1.5}
.lb-hint{color:var(--ink-faint);font-size:.74rem;letter-spacing:.04em;text-align:center}
.lb-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.lb-thumb{flex:0 0 auto;width:66px;height:48px;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;
  border:2px solid transparent;background:var(--bg-2);opacity:.55;
  transition:opacity .25s,border-color .25s,transform .25s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.lb-thumb:hover{opacity:1;transform:translateY(-2px)}
.lb-thumb.active{border-color:var(--ember);opacity:1}

footer{margin-top:90px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--ink-faint);font-size:.8rem}
footer b{color:var(--ink-dim);font-weight:600}
.empty{margin-top:60px;padding:48px;border:1px dashed var(--line);border-radius:16px;text-align:center;color:var(--ink-dim)}

/* ---------- Auth / Upload ---------- */
.authbar{position:fixed;top:16px;right:18px;z-index:40;display:flex;gap:10px;align-items:center}
.btn{font:inherit;cursor:pointer;border-radius:999px;padding:9px 18px;font-weight:600;font-size:.86rem;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.5em;
  transition:background .3s,border-color .3s,color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.btn:hover{border-color:var(--ember);transform:translateY(-2px)}
.btn.primary{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
.btn.primary:hover{background:var(--ember-deep);border-color:var(--ember-deep)}

.uploader{display:grid;grid-template-rows:0fr;margin-top:clamp(22px,3vw,38px);
  transition:grid-template-rows .55s cubic-bezier(.16,1,.3,1)}
.uploader.open{grid-template-rows:1fr}
.uploader>.inner{overflow:hidden;min-height:0}
.drop{border:1.5px dashed var(--line);border-radius:18px;background:var(--bg-2);
  padding:clamp(26px,4vw,46px);text-align:center;transition:border-color .3s,background .3s}
.drop.hot{border-color:var(--ember);background:var(--hot)}
.drop h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:.3em}
.drop p{color:var(--ink-dim);font-size:.9rem}
.drop .or{color:var(--ink-faint);margin:.85em 0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.queue{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.qitem{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:10px;padding:10px 14px;font-size:.85rem}
.qitem .nm{flex:none;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qitem .bar{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.qitem .bar i{display:block;height:100%;width:0;background:var(--ember);transition:width .25s}
.qitem .st{font-size:.78rem;color:var(--ink-faint);min-width:64px;text-align:right}
.qitem.ok .st{color:var(--ember)}
.qitem.err .st{color:oklch(0.62 0.2 25)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login{width:min(380px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,5vw,40px);box-shadow:var(--shadow)}
.login .kicker{margin-bottom:1.2em}
.login h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.7rem;margin-bottom:.15em;letter-spacing:-.01em}
.login p{color:var(--ink-dim);font-size:.9rem;margin-bottom:1.5em}
.login label{display:block;font-size:.8rem;color:var(--ink-faint);margin-bottom:.5em;letter-spacing:.03em}
.login input{width:100%;font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;margin-bottom:16px;transition:border-color .25s}
.login input:focus{outline:none;border-color:var(--ember)}
.login .err{color:oklch(0.62 0.2 25);font-size:.84rem;margin-bottom:12px}
.login .btn{width:100%;justify-content:center;margin-top:4px}
.login .back{display:block;text-align:center;margin-top:16px;color:var(--ink-faint);font-size:.82rem;text-decoration:none}
.login .back:hover{color:var(--ember)}

/* ---------- Dashboard ---------- */
.dash{max-width:1180px;margin:0 auto;padding:clamp(72px,8vw,88px) clamp(20px,5vw,48px) 100px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:18px;
  padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:30px}
.dash-head h1{font-size:clamp(2rem,4vw,3rem);margin:.2em 0 0}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:30px}
.kpi{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.kpi .v{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.9rem;line-height:1;letter-spacing:-.02em}
.kpi .k{color:var(--ink-faint);font-size:.78rem;margin-top:8px;letter-spacing:.02em}
.kpi.accent .v{color:var(--ember)}
.panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;
  padding:clamp(18px,2.4vw,26px);box-shadow:var(--shadow);margin-bottom:26px}
.panel h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:4px}
.panel .sub{color:var(--ink-faint);font-size:.84rem;margin-bottom:18px}
.mk{display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.mk .fld{flex:1 1 170px}
.mk .btn{flex:0 0 auto}
.fld label{display:block;font-size:.76rem;color:var(--ink-faint);margin-bottom:6px;letter-spacing:.02em}
.fld input,.fld select{width:100%;font:inherit;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .25s}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--ember)}
.copybar{display:none;margin-top:16px;gap:10px;align-items:center;
  background:var(--bg-2);border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.copybar.show{display:flex}
.copybar code{flex:1;font-family:"Hanken Grotesk",monospace;font-size:.9rem;color:var(--ember-deep);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.tbl th{text-align:left;color:var(--ink-faint);font-weight:600;font-size:.74rem;
  letter-spacing:.04em;text-transform:uppercase;padding:0 14px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl .muted{color:var(--ink-faint)}
.tbl .scode{font-weight:600;color:var(--ember-deep)}
.scroll-x{overflow-x:auto;scrollbar-width:thin}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600}
.pill.on{background:var(--pill-on-bg);color:var(--pill-on-fg)}
.pill.off{background:var(--bg-2);color:var(--ink-faint)}
.pill.live{background:oklch(0.92 0.1 62);color:oklch(0.5 0.16 50)}

.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.pager .btn{padding:8px 16px;font-size:.82rem}
.pager button:disabled{opacity:.4;cursor:default;transform:none;border-color:var(--line)}

@media (prefers-reduced-motion:reduce){
  .card{animation:none;opacity:1;transform:none}
  *{transition-duration:.01ms!important}
}