:root{
  --bg:#f2f5f9;--surface:#fff;--line:#e2e8f2;--line-2:#cdd8e8;
  --navy:#0e2547;--navy-2:#143059;--navy-3:#1c4177;--blue:#2f6fbf;--blue-soft:#e9f0fb;
  --gold:#c9a227;--gold-2:#e2be55;--gold-soft:#fbf4de;
  --text:#14213a;--text-2:#43536e;--muted:#6f7f99;
  --ok:#1c6b3f;--ok-bg:#e8f6ee;--err:#a3271c;--err-bg:#fdecea;
  --r:10px;--r-lg:16px;--sh:0 1px 2px rgba(9,26,51,.06),0 4px 14px rgba(9,26,51,.06);
  --ff:"IBM Plex Sans Thai","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--ff);font-size:15px;line-height:1.65;color:var(--text);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--navy-3);text-decoration:none}
h1,h2,h3{margin:0 0 .5em;line-height:1.3;color:var(--navy);font-weight:650}
h1{font-size:1.5rem}h2{font-size:1.18rem}h3{font-size:1rem}
p{margin:0 0 .8em}
.ic{width:1.15em;height:1.15em;flex:none}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(150deg,var(--navy),#091a33)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:var(--r-lg);padding:2.2rem;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.login-logo{border-radius:14px;background:#fff;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;margin:0 auto 1.2rem}
.login-logo img{height:38px;width:auto}
.login-card .login-logo{display:flex;width:max-content}
.login-card h1{text-align:center;font-size:1.25rem;margin-bottom:.2rem}
.login-card .sub{text-align:center;color:var(--muted);font-size:.88rem;margin-bottom:1.6rem}

/* shell */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:linear-gradient(175deg,var(--navy-2),#091a33);color:#a9bdd8;padding:1.1rem .8rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:.8rem}
.side-brand .lg{height:34px;width:auto;border-radius:8px;background:#fff;padding:4px 7px;flex:none}
.side-brand b{color:#fff;font-size:.95rem;display:block;line-height:1.25}
.side-brand span{font-size:.72rem;color:#8fa5c2}
.side-group{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#6f87a8;padding:.9rem .6rem .35rem}
.side a{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:8px;color:#bfd0e6;font-size:.9rem;cursor:pointer;
  transition:.15s;border:0;background:none;width:100%;text-align:left;font-family:inherit}
.side a:hover{background:rgba(255,255,255,.08);color:#fff}
.side a.on{background:linear-gradient(90deg,rgba(226,190,85,.2),rgba(226,190,85,.05));color:#fff;box-shadow:inset 3px 0 0 var(--gold-2)}
.side a .ic{color:var(--gold-2)}
.side-foot{margin-top:1.2rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.1)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:.85rem clamp(1rem,3vw,2rem);display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.topbar h1{margin:0;font-size:1.15rem}
.topbar .sp{flex:1}
.content{padding:clamp(1rem,3vw,2rem);max-width:1180px;width:100%}
.mbtn{display:none}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh);margin-bottom:1.2rem}
.card>h2{display:flex;align-items:center;gap:.55rem;margin-bottom:.3rem}
.card>h2 .ic{color:var(--gold)}
.card .hint{color:var(--muted);font-size:.87rem;margin-bottom:1.2rem}

/* form */
.f{margin-bottom:1rem}
.f label{display:block;font-size:.85rem;font-weight:600;color:var(--text-2);margin-bottom:.32rem}
.f input,.f select,.f textarea{width:100%;padding:.6rem .8rem;font-family:inherit;font-size:.93rem;color:var(--text);
  background:#f9fbfd;border:1.5px solid var(--line);border-radius:var(--r);outline:none;transition:.15s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-soft)}
.f textarea{min-height:92px;resize:vertical;line-height:1.6}
.f .tip{font-size:.78rem;color:var(--muted);margin-top:.25rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:720px){.row,.row3{grid-template-columns:1fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.55rem 1.05rem;border-radius:99px;
  font-weight:600;font-size:.88rem;border:1.5px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-p{background:linear-gradient(135deg,var(--navy-3),var(--navy));color:#fff}
.btn-g{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#091a33}
.btn-o{background:#fff;border-color:var(--line-2);color:var(--navy-2)}
.btn-o:hover{border-color:var(--navy-3)}
.btn-d{background:#fff;border-color:#f0c4bf;color:var(--err)}
.btn-d:hover{background:var(--err-bg)}
.btn-sm{padding:.34rem .75rem;font-size:.8rem}
.btns{display:flex;gap:.5rem;flex-wrap:wrap}

/* list / items */
.item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.7rem;background:#fbfcfe;overflow:hidden}
.item-h{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;cursor:pointer;background:#fff}
.item-h:hover{background:#f7fafd}
.item-h img{width:44px;height:44px;object-fit:contain;background:#f2f5f9;border-radius:7px;padding:3px;flex:none}
.item-h b{font-size:.92rem;font-weight:600;display:block;line-height:1.3}
.item-h small{color:var(--muted);font-size:.78rem}
.item-h .sp{flex:1;min-width:0}
.item-b{padding:1rem .9rem;border-top:1px solid var(--line);display:none}
.item.open .item-b{display:block}
.item .caret{transition:.2s;color:var(--muted)}
.item.open .caret{transform:rotate(90deg)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.9rem;margin-bottom:1.2rem}
.st{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--sh)}
.st .v{font-size:1.7rem;font-weight:750;color:var(--navy-3);line-height:1.2}
.st .l{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.st .l .ic{color:var(--gold)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th,.tbl td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{background:#f7fafd;font-weight:600;color:var(--text-2);white-space:nowrap}
.tbl tr:hover td{background:#fafcfe}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}

/* media */
.media{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.8rem}
.media figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.media img{aspect-ratio:1;object-fit:contain;background:#f4f7fb;padding:6px;width:100%}
.media figcaption{padding:.45rem .55rem;font-size:.72rem;color:var(--muted);word-break:break-all}
.media .mb{display:flex;gap:.3rem;padding:0 .5rem .5rem}
.drop{border:2px dashed var(--line-2);border-radius:var(--r-lg);padding:1.8rem;text-align:center;color:var(--muted);
  background:#fbfcfe;cursor:pointer;transition:.18s}
.drop.over,.drop:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--navy-2)}

/* misc */
.badge{display:inline-block;font-size:.72rem;font-weight:650;padding:.12rem .55rem;border-radius:99px;background:var(--blue-soft);color:var(--navy-3)}
.badge.g{background:var(--gold-soft);color:#8a6f14}
.badge.off{background:#eef1f6;color:var(--muted)}
.toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:99;display:flex;flex-direction:column;gap:.5rem}
.toast div{padding:.7rem 1.1rem;border-radius:var(--r);font-size:.88rem;box-shadow:0 8px 26px rgba(9,26,51,.22);animation:tin .25s}
.toast .ok{background:var(--ok-bg);border:1px solid #b6e0c7;color:var(--ok)}
.toast .err{background:var(--err-bg);border:1px solid #f5c2bd;color:var(--err)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}
.savebar{position:sticky;bottom:0;z-index:15;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:.8rem clamp(1rem,3vw,2rem);display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:auto}
.savebar .sp{flex:1}
.savebar .status{font-size:.82rem;color:var(--muted)}
.dirty{color:var(--gold);font-weight:600}
.empty{text-align:center;padding:2.4rem 1rem;color:var(--muted)}
.imgpick{display:flex;gap:.6rem;align-items:flex-start}
.imgpick img{width:70px;height:70px;object-fit:contain;background:#f2f5f9;border:1px solid var(--line);border-radius:8px;padding:4px;flex:none}
.imgpick .g{flex:1;min-width:0}

@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:250px;z-index:50;transform:translateX(-100%);transition:.22s}
  .side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.4)}
  .mbtn{display:inline-flex}
  .backdrop{position:fixed;inset:0;background:rgba(9,26,51,.5);z-index:40;display:none}
  .backdrop.on{display:block}
}