:root{
  --ink:#0A1721;--ink-2:#122B39;--ink-3:#1B3D4F;
  --bg:#F2F6F8;--card:#FFFFFF;--line:#DCE5EA;--line-2:#EDF2F5;
  --tx:#0B1D27;--tx-2:#4B6472;--tx-3:#7E97A5;
  --pri:#0E9CAF;--pri-2:#0B8496;--pri-soft:#E4F6F8;
  --ok:#1E9E7C;--ok-soft:#E6F6F1;--warn:#D9822B;--warn-soft:#FDF2E4;
  --err:#CD463A;--err-soft:#FCEDEB;
  --r:6px;--r-lg:10px;
  --sh:0 1px 2px rgba(10,23,33,.06),0 2px 8px rgba(10,23,33,.05);
  --sh-2:0 12px 34px rgba(10,23,33,.14);
  --ff:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  --fh:"Anuphan","IBM Plex Sans Thai",system-ui,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --side:264px;--top:60px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--ff);background:var(--bg);color:var(--tx);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--fh);margin:0;line-height:1.3;font-weight:700;letter-spacing:-.015em}
h1{font-size:1.5rem}h2{font-size:1.22rem}h3{font-size:1.04rem}h4{font-size:.94rem}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px;border-radius:3px}
.boot{min-height:100vh;display:grid;place-items:center;gap:16px;text-align:center;color:var(--tx-2)}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--pri);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
svg.i{width:18px;height:18px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- auth ---- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1100px 620px at 15% -10%,#123A4C,#0A1721 62%)}
.auth-box{width:min(430px,100%);background:#fff;border-radius:14px;padding:clamp(26px,4vw,40px);box-shadow:var(--sh-2)}
.auth-box .mark{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.auth-box h1{font-size:1.35rem}
.auth-box p.sub{color:var(--tx-2);font-size:.92rem;margin:6px 0 24px}

/* ---- shell ---- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{background:var(--ink);color:#9EBAC7;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow-y:auto}
.side-hd{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px}
.side-hd b{font-family:var(--fh);color:#fff;font-size:1.06rem;line-height:1.15;display:block}
.side-hd span{font-family:var(--fm);font-size:.56rem;letter-spacing:.24em;color:rgba(255,255,255,.45);text-transform:uppercase}
.side nav{padding:12px 10px;flex:1}
.side nav .grp{font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.32);padding:16px 10px 7px}
.side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r);
  font-size:.92rem;font-weight:500;transition:background .15s,color .15s;margin-bottom:2px}
.side nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.side nav a.on{background:var(--pri);color:#fff;font-weight:600}
.side nav a .cnt{margin-left:auto;background:rgba(255,255,255,.14);border-radius:20px;padding:1px 8px;font-size:.72rem;font-family:var(--fm)}
.side nav a.on .cnt{background:rgba(255,255,255,.26)}
.side-ft{padding:14px;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:8px}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:var(--top);background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 clamp(14px,2vw,26px);position:sticky;top:0;z-index:60}
.top h1{font-size:1.12rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body{padding:clamp(16px,2.4vw,28px);flex:1}
.burger{display:none}
@media(max-width:980px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:200;transform:translateX(-100%);transition:transform .28s;height:100dvh}
  .side.open{transform:none}
  .burger{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer}
  .scrim{position:fixed;inset:0;background:rgba(10,23,33,.5);z-index:190;display:none}
  .scrim.on{display:block}
}

/* ---- buttons ---- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;font-weight:600;font-size:.88rem;font-family:var(--fh);
  transition:background .15s,border-color .15s,color .15s,transform .12s;white-space:nowrap}
.b:active{transform:translateY(1px)}
.b:disabled{opacity:.5;cursor:not-allowed}
.b-p{background:var(--pri);color:#fff}.b-p:hover:not(:disabled){background:var(--pri-2)}
.b-d{background:var(--ink);color:#fff}.b-d:hover:not(:disabled){background:var(--ink-3)}
.b-o{border-color:var(--line);background:#fff}.b-o:hover:not(:disabled){border-color:var(--pri);color:var(--pri)}
.b-g{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.16)}
.b-g:hover:not(:disabled){background:rgba(255,255,255,.2)}
.b-r{background:var(--err-soft);color:var(--err);border-color:#F3CFCA}.b-r:hover:not(:disabled){background:var(--err);color:#fff}
.b-s{padding:6px 11px;font-size:.8rem}
.b-xs{padding:4px 8px;font-size:.75rem}
.b-block{width:100%}
.b-ic{padding:8px;width:34px;height:34px}
.b-ic.b-s{width:30px;height:30px;padding:6px}

/* ---- cards / forms ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.card-hd{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-hd h3{flex:1;min-width:140px}
.card-bd{padding:18px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.g4{grid-template-columns:minmax(0,1fr)}}
.f{display:grid;gap:6px;margin-bottom:14px}
.f>label{font-size:.83rem;font-weight:600;color:var(--tx-2);font-family:var(--fh);display:flex;align-items:center;gap:7px}
.f>label .hint{font-weight:400;color:var(--tx-3);font-size:.78rem}
.f input[type=text],.f input[type=url],.f input[type=email],.f input[type=tel],.f input[type=number],
.f input[type=password],.f textarea,.f select{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  font-size:.92rem;transition:border-color .15s,box-shadow .15s;font-family:var(--ff)}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.f textarea{min-height:92px;resize:vertical;line-height:1.7}
.f textarea.tall{min-height:170px}
.f small{color:var(--tx-3);font-size:.77rem;line-height:1.5}
.f-row{display:flex;gap:8px;align-items:center}
.sw{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.9rem;user-select:none}
.sw input{appearance:none;width:38px;height:22px;background:var(--line);border-radius:20px;position:relative;
  cursor:pointer;transition:background .2s;flex:none;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked{background:var(--pri)}
.sw input:checked::after{transform:translateX(16px)}

/* ---- nested editor ---- */
.acc{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-bottom:12px;overflow:hidden}
.acc>summary{padding:13px 16px;cursor:pointer;font-family:var(--fh);font-weight:600;font-size:.97rem;
  display:flex;align-items:center;gap:10px;list-style:none;background:#fff;transition:background .15s}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary:hover{background:var(--bg)}
.acc>summary .chev{transition:transform .2s;color:var(--tx-3);margin-left:auto}
.acc[open]>summary{border-bottom:1px solid var(--line);background:var(--bg)}
.acc[open]>summary .chev{transform:rotate(90deg)}
.acc>.in{padding:16px}
.acc .acc{background:var(--bg)}
.sub{border-left:2px solid var(--line);padding-left:14px;margin-bottom:14px}
.rep{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden}
.rep-hd{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--bg);border-bottom:1px solid var(--line)}
.rep-hd b{flex:1;font-family:var(--fh);font-size:.89rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-hd .n{font-family:var(--fm);font-size:.72rem;color:var(--tx-3);background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;flex:none}
.rep-bd{padding:14px}
.tags{display:flex;flex-wrap:wrap;gap:7px;padding:9px;border:1px solid var(--line);border-radius:var(--r);background:#fff;min-height:44px}
.tags .tg{display:inline-flex;align-items:center;gap:6px;background:var(--pri-soft);color:var(--pri-2);
  border-radius:20px;padding:4px 6px 4px 12px;font-size:.84rem}
.tags .tg button{border:0;background:none;cursor:pointer;color:inherit;opacity:.6;display:flex;padding:0}
.tags .tg button:hover{opacity:1}
.tags input{border:0;outline:0;flex:1;min-width:130px;padding:4px 6px;background:none;font-size:.88rem}

/* ---- image field ---- */
.imgf{display:flex;gap:12px;align-items:flex-start}
.imgf .pv{width:118px;height:88px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg);
  overflow:hidden;flex:none;display:grid;place-items:center;color:var(--tx-3);position:relative}
.imgf .pv img{width:100%;height:100%;object-fit:cover}
.imgf .meta{flex:1;min-width:0;display:grid;gap:7px}
.imgf .path{font-family:var(--fm);font-size:.74rem;color:var(--tx-3);word-break:break-all;
  background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:4px 7px}
.gal-f{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.gal-f .it{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.gal-f .it img{width:100%;height:100%;object-fit:cover}
.gal-f .it .ops{position:absolute;top:4px;right:4px;display:flex;gap:3px;opacity:0;transition:opacity .15s}
.gal-f .it:hover .ops{opacity:1}
.gal-f .it .ops button{width:26px;height:26px;border-radius:5px;border:0;background:rgba(10,23,33,.82);color:#fff;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
.gal-f .it .ops button:hover{background:var(--err)}
.gal-f .add{aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:var(--r);background:#fff;cursor:pointer;
  display:grid;place-items:center;color:var(--tx-3);gap:4px;font-size:.78rem;transition:border-color .15s,color .15s}
.gal-f .add:hover{border-color:var(--pri);color:var(--pri)}

/* ---- table / list ---- */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;padding:10px 12px;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tx-3);border-bottom:1px solid var(--line);font-family:var(--fm);font-weight:600;white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:hover td{background:var(--bg)}
.tbl .th-img{width:74px}
.tbl .tm{width:56px;height:42px;border-radius:5px;object-fit:cover;border:1px solid var(--line);background:var(--bg)}
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:.74rem;font-weight:600;font-family:var(--fm)}
.pill-ok{background:var(--ok-soft);color:var(--ok)}
.pill-off{background:var(--line-2);color:var(--tx-3)}
.pill-new{background:var(--pri-soft);color:var(--pri-2)}
.pill-warn{background:var(--warn-soft);color:var(--warn)}
.ops-td{display:flex;gap:5px;justify-content:flex-end}
.empty{text-align:center;padding:52px 20px;color:var(--tx-3)}
.empty svg{width:42px;height:42px;margin:0 auto 12px;stroke:var(--line);stroke-width:1.4}

/* ---- modal ---- */
.mdl{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:clamp(8px,2vw,28px);background:rgba(10,23,33,.6);backdrop-filter:blur(4px)}
.mdl.on{display:flex}
.mdl-in{background:#fff;border-radius:12px;width:min(1000px,100%);max-height:94vh;display:flex;flex-direction:column;box-shadow:var(--sh-2);overflow:hidden}
.mdl-in.sm{width:min(520px,100%)}
.mdl-in.lg{width:min(1180px,100%)}
.mdl-hd{padding:15px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex:none}
.mdl-hd h3{flex:1}
.mdl-bd{padding:20px;overflow-y:auto;flex:1}
.mdl-ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;flex:none;flex-wrap:wrap;background:var(--bg)}
.x{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer;display:grid;place-items:center}
.x:hover{border-color:var(--err);color:var(--err)}

/* ---- media library ---- */
.lib-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.lib-tabs button{padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.85rem;font-weight:500}
.lib-tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px}
.lib .it{border:2px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;background:#fff;transition:border-color .15s,transform .15s;position:relative}
.lib .it:hover{border-color:var(--pri);transform:translateY(-2px)}
.lib .it.sel{border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-soft)}
.lib .it .th{aspect-ratio:4/3;background:var(--bg)}
.lib .it .th img{width:100%;height:100%;object-fit:cover}
.lib .it .nm{padding:6px 8px;font-size:.72rem;color:var(--tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:1px solid var(--line-2)}
.lib .it .del{position:absolute;top:5px;right:5px;width:24px;height:24px;border:0;border-radius:5px;
  background:rgba(10,23,33,.8);color:#fff;cursor:pointer;display:none;place-items:center}
.lib .it:hover .del{display:grid}
.lib .it .del:hover{background:var(--err)}
.drop{border:1.5px dashed var(--line);border-radius:var(--r-lg);padding:26px;text-align:center;background:var(--bg);cursor:pointer;transition:border-color .15s,background .15s;margin-bottom:16px}
.drop:hover,.drop.over{border-color:var(--pri);background:var(--pri-soft)}
.drop svg{width:30px;height:30px;stroke:var(--pri);margin:0 auto 8px}
.drop b{display:block;font-family:var(--fh);font-size:.94rem}
.drop span{font-size:.82rem;color:var(--tx-3)}

/* ---- cropper ---- */
.crop-wrap{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:16px}
@media(max-width:820px){.crop-wrap{grid-template-columns:1fr}}
.crop-stage{background:#0F2029;border-radius:var(--r-lg);overflow:hidden;position:relative;
  display:grid;place-items:center;min-height:340px;max-height:60vh;touch-action:none;user-select:none}
.crop-stage img{max-width:100%;max-height:60vh;display:block;pointer-events:none}
.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(8,20,28,.62);cursor:move}
.crop-box::before,.crop-box::after{content:"";position:absolute;inset:0;pointer-events:none}
.crop-box::before{border-left:1px solid rgba(255,255,255,.32);border-right:1px solid rgba(255,255,255,.32);left:33.33%;right:33.33%}
.crop-box::after{border-top:1px solid rgba(255,255,255,.32);border-bottom:1px solid rgba(255,255,255,.32);top:33.33%;bottom:33.33%}
.hnd{position:absolute;width:16px;height:16px;background:#fff;border-radius:3px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.hnd.nw{left:-8px;top:-8px;cursor:nwse-resize}.hnd.ne{right:-8px;top:-8px;cursor:nesw-resize}
.hnd.sw{left:-8px;bottom:-8px;cursor:nesw-resize}.hnd.se{right:-8px;bottom:-8px;cursor:nwse-resize}
.ratios{display:flex;flex-wrap:wrap;gap:6px}
.ratios button{padding:6px 11px;border-radius:var(--r);border:1px solid var(--line);background:#fff;cursor:pointer;font-size:.8rem;font-family:var(--fm)}
.ratios button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}
.crop-info{font-family:var(--fm);font-size:.75rem;color:var(--tx-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;line-height:1.7}

/* ---- misc ---- */
.toast{position:fixed;right:16px;bottom:16px;z-index:500;display:grid;gap:8px;max-width:min(400px,calc(100vw - 32px))}
.tst{background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);box-shadow:var(--sh-2);
  display:flex;gap:10px;align-items:flex-start;font-size:.89rem;animation:tin .28s cubic-bezier(.22,1,.36,1)}
.tst.ok{background:var(--ok)}.tst.err{background:var(--err)}
@keyframes tin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.bar{position:sticky;bottom:0;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  padding:12px clamp(14px,2vw,26px);display:flex;gap:10px;align-items:center;z-index:50;margin:0 clamp(-16px,-2.4vw,-28px) clamp(-16px,-2.4vw,-28px);flex-wrap:wrap}
.bar .st{flex:1;min-width:120px;font-size:.85rem;color:var(--tx-3)}
.bar .st.dirty{color:var(--warn);font-weight:600}
.stat-c{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh)}
.stat-c .ic{width:38px;height:38px;border-radius:var(--r);background:var(--pri-soft);color:var(--pri-2);display:grid;place-items:center;margin-bottom:11px}
.stat-c b{font-family:var(--fh);font-size:1.7rem;display:block;line-height:1.1;letter-spacing:-.03em}
.stat-c span{font-size:.85rem;color:var(--tx-2)}
.note{background:var(--pri-soft);border:1px solid #BFE7EC;border-radius:var(--r);padding:12px 14px;
  font-size:.86rem;color:#0A6674;display:flex;gap:10px;align-items:flex-start;line-height:1.65;margin-bottom:16px}
.note svg{stroke:currentColor;flex:none;margin-top:2px}
.note.warn{background:var(--warn-soft);border-color:#F2D9B4;color:#8A4F0C}
.search{position:relative;flex:1;min-width:170px;max-width:340px}
.search input{width:100%;padding:8px 12px 8px 34px;border:1px solid var(--line);border-radius:var(--r);font-size:.88rem;background:#fff}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--tx-3)}
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:7px;max-height:320px;overflow-y:auto;padding:3px}
.iconpick button{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;
  display:grid;place-items:center;gap:3px;padding:6px;transition:border-color .15s}
.iconpick button:hover{border-color:var(--pri);color:var(--pri)}
.iconpick button.on{border-color:var(--pri);background:var(--pri-soft);color:var(--pri-2)}
.iconpick button svg{width:20px;height:20px}
.iconpick button span{font-size:.55rem;color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.lead-d dt{font-size:.76rem;color:var(--tx-3);font-family:var(--fm);text-transform:uppercase;letter-spacing:.05em}
.lead-d dd{margin:2px 0 14px;font-size:.95rem;word-break:break-word}
.kbd{font-family:var(--fm);font-size:.76rem;background:var(--bg);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 5px}