:root{
  --brand:#2E6B63;--brand-dark:#20504B;--mint:#E8F3EF;--gold:#B8944A;
  --ink:#17262A;--ink-2:#3D4F53;--muted:#6B7F83;
  --line:#DDE7E4;--line-2:#EEF3F1;--bg:#F4F8F6;--card:#fff;
  --r:12px;--r-lg:18px;--sh:0 1px 2px rgba(23,38,42,.05),0 6px 18px rgba(23,38,42,.07);
  --side-w:262px;--top-h:64px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans Thai",-apple-system,BlinkMacSystemFont,sans-serif;font-size:15px;line-height:1.65}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:"Prompt","Noto Sans Thai",sans-serif;font-weight:600;margin:0;line-height:1.35}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit}
a{color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
[hidden]{display:none!important}

/* ---------- login ---------- */
.login{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,var(--mint),#fff);padding:1.2rem}
.login-box{background:#fff;border-radius:22px;box-shadow:var(--sh);padding:2.4rem 2rem;width:min(100%,390px);text-align:center}
.login-box img{margin:0 auto 1rem}
.login-box h1{font-size:1.4rem;margin-bottom:.2rem}
.login-box>p{color:var(--muted);font-size:.9rem;margin:0 0 1.5rem}
.login-box label{display:block;text-align:left;font-size:.85rem;font-weight:600;color:var(--ink-2);margin-bottom:1rem}
.login-box input{width:100%;margin-top:.35rem;padding:.75rem .9rem;border:1.5px solid var(--line);border-radius:12px;background:#FBFDFC}
.login-box input:focus{outline:none;border-color:var(--brand)}
.err{color:#C0392B;font-size:.88rem;margin:.8rem 0 0;min-height:1.2em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.15rem;border-radius:999px;
  font-weight:600;font-size:.9rem;font-family:"Prompt",sans-serif;transition:all .18s;border:1.5px solid transparent;white-space:nowrap}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.primary:disabled{opacity:.55;cursor:default}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{padding:.34rem .8rem;font-size:.82rem}
.btn.danger{background:#fff;border-color:#E9C4C0;color:#C0392B}
.btn.danger:hover{background:#FDF3F2}
.btn.wide{width:100%}

/* ---------- shell ---------- */
.app{display:flex;min-height:100dvh}
.side{width:var(--side-w);flex:none;background:#14282A;color:rgba(255,255,255,.8);display:flex;flex-direction:column;
  position:sticky;top:0;height:100dvh}
.side-top{display:flex;align-items:center;gap:.65rem;padding:1.1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.side-top img{background:#fff;border-radius:9px;padding:.2rem}
.side-top b{display:block;color:#fff;font-family:"Prompt",sans-serif;font-size:.98rem}
.side-top i{font-style:normal;font-size:.74rem;color:rgba(255,255,255,.55)}
.x-side{display:none;margin-left:auto;color:#fff;font-size:1.1rem}
.menu{flex:1;overflow:auto;padding:.7rem .6rem}
.menu .grp{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.38);padding:.9rem .7rem .35rem}
.menu button{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.6rem .7rem;border-radius:10px;
  color:rgba(255,255,255,.78);font-size:.92rem;transition:background .15s,color .15s}
.menu button:hover{background:rgba(255,255,255,.07);color:#fff}
.menu button.on{background:var(--brand);color:#fff;font-weight:600}
.menu .cnt{margin-left:auto;font-size:.74rem;background:rgba(255,255,255,.14);padding:.05rem .45rem;border-radius:999px}
.side-foot{padding:.9rem 1.1rem 1.2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.5rem;font-size:.87rem}
.side-foot a,.side-foot button{color:rgba(255,255,255,.7);text-align:left}
.side-foot a:hover,.side-foot button:hover{color:#fff}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;height:var(--top-h);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.8rem;padding:0 1.2rem}
.top h1{font-size:1.12rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-right{display:flex;align-items:center;gap:.55rem}
.saved{font-size:.8rem;color:var(--muted)}
.saved.dirty{color:var(--gold);font-weight:600}
.burger{display:none;font-size:1.3rem}
.body{flex:1;display:flex;min-height:0}
.view{flex:1;min-width:0;padding:1.4rem 1.4rem 4rem;max-width:1180px}

/* ---------- preview ---------- */
.preview{width:min(46vw,640px);flex:none;border-left:1px solid var(--line);background:#DCE7E3;display:flex;flex-direction:column;
  position:sticky;top:var(--top-h);height:calc(100dvh - var(--top-h))}
.pv-bar{display:flex;align-items:center;gap:.4rem;padding:.5rem .6rem;background:#fff;border-bottom:1px solid var(--line)}
.pv-devices{display:flex;gap:.2rem;background:var(--bg);border-radius:999px;padding:.15rem}
.pv-devices button{padding:.28rem .7rem;border-radius:999px;font-size:.78rem;color:var(--muted)}
.pv-devices button.on{background:#fff;color:var(--brand);font-weight:600;box-shadow:var(--sh)}
.pv-bar select{margin-left:auto;padding:.32rem .5rem;border:1px solid var(--line);border-radius:8px;font-size:.82rem;background:#fff}
.pv-bar>button{padding:.3rem .5rem;border-radius:8px;font-size:1rem;color:var(--muted)}
.pv-bar>button:hover{background:var(--bg);color:var(--ink)}
.pv-frame{flex:1;display:grid;place-items:start center;overflow:auto;padding:.7rem}
.pv-frame iframe{width:100%;height:100%;border:0;background:#fff;border-radius:10px;box-shadow:var(--sh);transition:width .25s}

/* ---------- cards / forms ---------- */
.card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.3rem;margin-bottom:1.1rem;box-shadow:var(--sh)}
.card>h2{font-size:1.05rem;margin-bottom:.25rem}
.card>.hint{color:var(--muted);font-size:.85rem;margin:0 0 1.1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem 1.1rem}
.fld{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fld.full{grid-column:1/-1}
.fld-img{grid-column:span 2}
@media (max-width:760px){.fld-img{grid-column:1/-1}}
.fld>label{font-size:.84rem;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:.35rem}
.fld>label .tip{font-weight:400;color:var(--muted);font-size:.78rem}
.fld input[type=text],.fld input[type=url],.fld input[type=tel],.fld input[type=number],.fld input[type=date],.fld select,.fld textarea{
  width:100%;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:10px;background:#FBFDFC;color:var(--ink);
  font-size:.92rem;transition:border-color .15s,background .15s}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--brand);background:#fff}
.fld textarea{resize:vertical;min-height:86px;line-height:1.7}
.fld input[type=color]{width:52px;height:38px;padding:2px;border:1.5px solid var(--line);border-radius:9px;background:#fff}
.row-2{display:flex;gap:.5rem;align-items:center}
.chk{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--ink-2)}
.chk input{width:18px;height:18px;accent-color:var(--brand)}

/* image field */
.imgf{border:1.5px dashed var(--line);border-radius:var(--r);padding:.6rem;background:#FBFDFC}
.imgf-prev{position:relative;border-radius:9px;overflow:hidden;background:var(--mint);aspect-ratio:16/10;display:grid;place-items:center;cursor:crosshair}
.imgf-prev img{width:100%;height:100%;object-fit:cover}
.imgf-prev .none{color:var(--muted);font-size:.85rem}
.focal-dot{position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;background:rgba(46,107,99,.7);
  box-shadow:0 0 0 2px rgba(0,0,0,.25);translate:-50% -50%;pointer-events:none}
.imgf-acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.5rem}
.imgf-url{margin-top:.4rem;font-size:.76rem;color:var(--muted);word-break:break-all}

/* repeatable list */
.list-item{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.75rem;background:#fff;overflow:hidden}
.li-head{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:#F7FAF9;border-bottom:1px solid var(--line-2)}
.li-head .thumb{width:52px;height:38px;object-fit:cover;border-radius:6px;flex:none;background:var(--mint)}
.li-head b{flex:1;min-width:0;font-family:"Prompt",sans-serif;font-size:.92rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li-head .mini{display:inline-flex;align-items:center;gap:.28rem;padding:.28rem .5rem;border-radius:7px;color:var(--muted);font-size:.8rem;white-space:nowrap}
.li-head .mini svg{display:block}
.li-head .mini:hover{background:var(--bg);color:var(--ink)}
.li-head .mini.del:hover{color:#C0392B}
.li-body{padding:.9rem;display:none}
.list-item.open .li-body{display:block}
.list-item.off{opacity:.55}
.add-row{display:flex;gap:.5rem;margin-top:.3rem}

/* string list */
.slist{display:flex;flex-direction:column;gap:.4rem}
.slist .sitem{display:flex;gap:.4rem;align-items:center}
.slist .sitem input{flex:1}
.slist .sitem button{padding:.35rem .5rem;border-radius:8px;color:var(--muted)}
.slist .sitem button:hover{background:#FDF3F2;color:#C0392B}

/* media library */
.mlib{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem}
.lib-grp{grid-column:1/-1;font-family:"Prompt",sans-serif;font-weight:600;font-size:.82rem;color:var(--muted);padding:.6rem 0 0;border-top:1px solid var(--line-2);margin-top:.3rem}
.lib-grp:first-child{border-top:0;margin-top:0;padding-top:0}
.mtile{position:relative;border:2px solid var(--line-2);border-radius:10px;overflow:hidden;background:var(--mint);aspect-ratio:4/3;cursor:pointer}
.mtile img{width:100%;height:100%;object-fit:cover}
.mtile:hover{border-color:var(--brand)}
.mtile .mdel{position:absolute;right:.25rem;top:.25rem;background:rgba(255,255,255,.92);border-radius:7px;padding:.1rem .35rem;font-size:.8rem;color:#C0392B}
.mtile .mname{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;
  font-size:.68rem;padding:1rem .35rem .25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* leads */
.lead{border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1rem;margin-bottom:.7rem;background:#fff}
.lead.unread{border-left:4px solid var(--gold)}
.lead-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.4rem}
.lead-h b{font-size:1rem}
.lead-h .at{margin-left:auto;font-size:.78rem;color:var(--muted)}
.lead dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;margin:0;font-size:.88rem}
.lead dt{color:var(--muted)}
.lead dd{margin:0;color:var(--ink-2)}
.lead-acts{display:flex;gap:.4rem;margin-top:.7rem}

/* dashboard */
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.2rem}
.dcard{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--sh)}
.dcard b{display:block;font-family:"Prompt",sans-serif;font-size:1.9rem;color:var(--brand);line-height:1.15}
.dcard i{font-style:normal;font-size:.85rem;color:var(--muted)}
.quick{display:flex;gap:.5rem;flex-wrap:wrap}

/* modal */
.modal{position:fixed;inset:0;z-index:100;background:rgba(12,26,28,.62);display:grid;place-items:center;padding:1rem;backdrop-filter:blur(3px)}
.modal-box{background:#fff;border-radius:18px;width:min(100%,880px);max-height:92dvh;overflow:auto;padding:1.4rem;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.modal-box h2{font-size:1.1rem;margin-bottom:.9rem}
.modal-foot{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}
.crop-stage{position:relative;background:#1b2b2d;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  max-height:56dvh;margin-bottom:.8rem;touch-action:none}
.crop-stage canvas{max-width:100%;max-height:56dvh;display:block}
.crop-box{position:absolute;border:2px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.45);cursor:move}
.crop-box .h{position:absolute;width:14px;height:14px;background:#fff;border-radius:3px}
.crop-box .h.nw{left:-7px;top:-7px;cursor:nwse-resize}
.crop-box .h.ne{right:-7px;top:-7px;cursor:nesw-resize}
.crop-box .h.sw{left:-7px;bottom:-7px;cursor:nesw-resize}
.crop-box .h.se{right:-7px;bottom:-7px;cursor:nwse-resize}
.crop-bar{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-bottom:.7rem;font-size:.85rem}
.crop-bar b{color:var(--muted);font-weight:600}
.ratio{padding:.28rem .7rem;border:1.5px solid var(--line);border-radius:999px;font-size:.8rem;color:var(--ink-2)}
.ratio.on{background:var(--brand);border-color:var(--brand);color:#fff}
.toast{position:fixed;left:50%;bottom:1.6rem;translate:-50% 0;background:#14282A;color:#fff;padding:.7rem 1.3rem;
  border-radius:999px;font-size:.9rem;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.toast.bad{background:#C0392B}
.note{background:var(--mint);border-radius:10px;padding:.75rem .9rem;font-size:.85rem;color:var(--ink-2);margin-bottom:1rem}
.json-ta{width:100%;min-height:60vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.55;
  border:1.5px solid var(--line);border-radius:10px;padding:.8rem;background:#FBFDFC}

@media (max-width:1180px){ .preview{display:none} }
@media (max-width:860px){
  .side{position:fixed;z-index:60;left:0;top:0;transform:translateX(-100%);transition:transform .25s;box-shadow:0 0 40px rgba(0,0,0,.3)}
  .side.open{transform:none}
  .x-side{display:block}
  .burger{display:block}
  .view{padding:1rem .9rem 4rem}
  .top{padding:0 .8rem}
  .top h1{font-size:1rem}
  .top-right .btn{padding:.5rem .8rem;font-size:.82rem}
  .saved{display:none}
  #previewBtn{display:none}
}