/* ================= AT NERAMIT DESIGN — admin ================= */
:root{
  --gold:#c9a227; --gold-2:#e8d48b; --gold-l:#fbf6e6;
  --ink:#16161a; --ink-2:#4a4a52; --ink-3:#7a7a85;
  --bg:#f4f5f7; --panel:#fff; --line:#e3e5ea; --line-2:#eef0f3;
  --nav:#111114; --nav-2:#1a1a1f; --nav-3:#26262d;
  --ok:#12855a; --ok-bg:#e6f6ef; --err:#c0392b; --err-bg:#fdeceb;
  --warn:#b7791f; --warn-bg:#fdf4e3; --info:#1d6fa5;
  --r:12px; --r-sm:8px;
  --sh:0 1px 2px rgba(16,16,26,.05),0 4px 14px rgba(16,16,26,.06);
  --sh-lg:0 24px 70px rgba(16,16,26,.20);
  --t:.2s ease;
  --f:"Noto Sans Thai","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--f);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.35}
.ic{flex:none;vertical-align:-.15em}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- boot / login ---------- */
.boot{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;color:var(--ink-3)}
.spinner{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.login-body{background:linear-gradient(150deg,#0e0e10,#1d1a12 70%,#2b2415);min-height:100vh;display:grid;place-items:center;padding:24px}
.login{background:#fff;border-radius:20px;padding:44px 40px;width:min(420px,100%);box-shadow:0 30px 80px rgba(0,0,0,.45);text-align:center;display:grid;gap:5px}
.login img{height:64px;width:auto;object-fit:contain;margin:0 auto 10px}
.login h1{font-size:1.35rem}
.login>p{color:var(--ink-3);font-size:.93rem;margin:0 0 14px}
.login label{display:grid;gap:7px;text-align:left;margin-bottom:8px}
.login label span{font-size:.88rem;font-weight:500;color:var(--ink-2)}
.login input{padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;font-size:1rem;width:100%}
.login input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.login button{padding:14px;border:0;border-radius:10px;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1405;font-weight:700;font-size:1rem;cursor:pointer;transition:var(--t)}
.login button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.lg-err{background:var(--err-bg);color:#9d2f24;padding:11px 14px;border-radius:9px;font-size:.9rem;margin-bottom:6px}
.lg-back{color:var(--ink-3);font-size:.86rem;margin-top:14px}
.lg-back:hover{color:var(--gold)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{background:var(--nav);color:#c8c6c0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.side-top{padding:20px 18px 14px;border-bottom:1px solid var(--nav-3)}
.side-top img{height:42px;width:auto;object-fit:contain}
.side-top small{display:block;color:#6f6d67;font-size:.75rem;margin-top:8px;letter-spacing:.08em;text-transform:uppercase}
.snav{padding:12px 10px;display:grid;gap:2px;flex:1}
.sgrp{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#5e5c57;padding:14px 12px 6px;font-weight:600}
.snav button{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;background:none;border:0;color:#c8c6c0;font-size:.93rem;cursor:pointer;transition:var(--t);text-align:left;width:100%;position:relative}
.snav button:hover{background:var(--nav-2);color:#fff}
.snav button.on{background:linear-gradient(135deg,rgba(201,162,39,.22),rgba(201,162,39,.08));color:var(--gold-2);font-weight:600}
.snav button.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.snav .n{margin-left:auto;background:var(--gold);color:#1a1405;font-size:.72rem;font-weight:700;padding:1px 8px;border-radius:20px;min-width:22px;text-align:center}
.snav button.on .n{background:var(--gold-2)}
.side-bot{padding:14px;border-top:1px solid var(--nav-3);display:grid;gap:6px}
.side-bot a,.side-bot button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:#c8c6c0;font-size:.9rem;transition:var(--t);background:none;border:0;cursor:pointer;width:100%;text-align:left}
.side-bot a:hover,.side-bot button:hover{background:var(--nav-2);color:#fff}

.main{display:flex;flex-direction:column;min-width:0}
.top{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:14px 26px}
.top h1{font-size:1.22rem}
.top .sub{color:var(--ink-3);font-size:.85rem;display:block;font-weight:400;margin-top:1px}
.top-act{margin-left:auto;display:flex;align-items:center;gap:9px}
.menu-btn{display:none}
.body{padding:26px;flex:1;min-width:0}

/* ---------- buttons ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 17px;border-radius:9px;border:1.5px solid var(--line);background:#fff;font-size:.9rem;font-weight:500;cursor:pointer;transition:var(--t);white-space:nowrap;color:var(--ink)}
.b:hover{border-color:var(--ink-3);background:#fafafa}
.b-p{background:linear-gradient(135deg,var(--gold-2),var(--gold));border-color:transparent;color:#1a1405;font-weight:700;box-shadow:0 4px 14px rgba(201,162,39,.3)}
.b-p:hover{filter:brightness(1.07);transform:translateY(-1px);background:linear-gradient(135deg,var(--gold-2),var(--gold))}
.b-p:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.b-d{color:var(--err);border-color:#f3d3d0}
.b-d:hover{background:var(--err-bg);border-color:var(--err)}
.b-s{padding:6px 12px;font-size:.84rem}
.b-ghost{border-color:transparent;background:transparent}
.b-ghost:hover{background:var(--line-2);border-color:transparent}
.b:disabled{opacity:.5;cursor:not-allowed}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:2px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:20px;overflow:hidden}
.panel-h{padding:16px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:12px;background:#fcfcfd}
.panel-h h2{font-size:1.02rem}
.panel-h p{margin:2px 0 0;font-size:.84rem;color:var(--ink-3)}
.panel-h .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.panel-b{padding:20px}
.hint{background:var(--warn-bg);border:1px solid #f0dcb4;color:#7a5410;padding:12px 16px;border-radius:var(--r-sm);font-size:.88rem;margin-bottom:18px;display:flex;gap:10px;align-items:flex-start}
.hint .ic{color:var(--warn);margin-top:2px}

/* ---------- fields ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.fld{display:grid;gap:6px;margin-bottom:16px}
.fld>label{font-size:.88rem;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.fld .help{font-size:.79rem;color:var(--ink-3);line-height:1.5}
.fld input[type=text],.fld input[type=number],.fld input[type=url],.fld select,.fld textarea{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:var(--t);font-size:.94rem;color:var(--ink)}
.fld textarea{resize:vertical;min-height:80px;line-height:1.7}
.fld textarea.tall{min-height:190px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.14)}
.sw{display:flex;align-items:center;gap:11px;cursor:pointer;user-select:none;padding:4px 0}
.sw input{display:none}
.sw i{width:42px;height:24px;border-radius:20px;background:#cdd0d6;position:relative;transition:var(--t);flex:none}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--t);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sw input:checked+i{background:var(--ok)}
.sw input:checked+i::after{transform:translateX(18px)}
.sw span{font-size:.9rem;font-weight:500}

/* ---------- image picker field ---------- */
.imgf{display:flex;gap:12px;align-items:flex-start}
.imgf-prev{width:104px;height:78px;border-radius:var(--r-sm);border:1.5px dashed var(--line);background:#fafbfc;display:grid;place-items:center;overflow:hidden;flex:none;color:var(--ink-3);cursor:pointer;transition:var(--t)}
.imgf-prev:hover{border-color:var(--gold);background:var(--gold-l)}
.imgf-prev img{width:100%;height:100%;object-fit:contain}
.imgf-r{flex:1;display:grid;gap:7px;min-width:0}
.imgf-r input{font-size:.82rem!important;color:var(--ink-3)!important;font-family:ui-monospace,monospace}
.imgf-btns{display:flex;gap:7px;flex-wrap:wrap}

/* multi-image */
.imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.imgs .it{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:#fafbfc}
.imgs .it img{width:100%;height:100%;object-fit:contain}
.imgs .it .x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(20,20,26,.8);color:#fff;display:grid;place-items:center;opacity:0;transition:var(--t)}
.imgs .it:hover .x{opacity:1}
.imgs .it .x:hover{background:var(--err)}
.imgs .it .mv{position:absolute;bottom:4px;left:4px;display:flex;gap:3px;opacity:0;transition:var(--t)}
.imgs .it:hover .mv{opacity:1}
.imgs .it .mv button{width:24px;height:24px;border-radius:6px;background:rgba(20,20,26,.8);color:#fff;display:grid;place-items:center;font-size:.8rem}
.imgs .it .mv button:hover{background:var(--gold);color:#1a1405}
.imgs .add{aspect-ratio:4/3;border:1.5px dashed var(--line);border-radius:var(--r-sm);display:grid;place-items:center;align-content:center;gap:4px;color:var(--ink-3);cursor:pointer;background:#fafbfc;transition:var(--t);font-size:.82rem}
.imgs .add:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-l)}

/* ---------- repeat list ---------- */
.rows{display:grid;gap:11px}
.row{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;transition:var(--t)}
.row.open{border-color:var(--gold);box-shadow:var(--sh)}
.row-h{display:flex;align-items:center;gap:12px;padding:12px 15px;cursor:pointer;background:#fcfcfd}
.row.open .row-h{background:var(--gold-l)}
.row-h:hover{background:#f7f8fa}
.row-th{width:56px;height:42px;border-radius:6px;overflow:hidden;background:var(--line-2);flex:none}
.row-th img{width:100%;height:100%;object-fit:contain}
.row-t{flex:1;min-width:0}
.row-t strong{display:block;font-size:.94rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-t span{font-size:.8rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.row-a{display:flex;gap:5px;align-items:center;flex:none}
.row-b{padding:15px;border-top:1px solid var(--line-2);display:none}
.row.open .row-b{display:block}
.tagd{font-size:.72rem;padding:2px 9px;border-radius:20px;font-weight:600}
.tag-off{background:#f1f2f4;color:var(--ink-3)}
.tag-on{background:var(--ok-bg);color:var(--ok)}
.tag-new{background:var(--gold-l);color:#8a6d10}
.mini{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--ink-3);transition:var(--t);border:0;background:none;cursor:pointer}
.mini:hover{background:var(--line-2);color:var(--ink)}
.mini.d:hover{background:var(--err-bg);color:var(--err)}

/* ---------- kv rows ---------- */
.kv{display:grid;gap:8px}
.kv-r{display:grid;grid-template-columns:1fr 1.6fr auto;gap:8px;align-items:center}
.kv-r input{padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:.9rem;width:100%}
.kv-r input:focus{outline:0;border-color:var(--gold)}
.list-s{display:grid;gap:7px}
.list-s-r{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.list-s-r input{padding:9px 12px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-size:.9rem;width:100%}
.list-s-r input:focus{outline:0;border-color:var(--gold)}

/* ---------- dashboard ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;transition:var(--t);cursor:pointer;text-align:left}
.stat:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh)}
.stat .ic{color:var(--gold);margin-bottom:10px}
.stat b{display:block;font-size:1.9rem;line-height:1.1;font-weight:600}
.stat span{font-size:.86rem;color:var(--ink-3)}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.qa a{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:var(--t);cursor:pointer;text-align:left;width:100%}
.qa a:hover{border-color:var(--gold);background:var(--gold-l)}
.qa .ic{color:var(--gold)}
.qa strong{display:block;font-size:.92rem}
.qa em{font-style:normal;font-size:.79rem;color:var(--ink-3)}

/* ---------- media library ---------- */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.mit{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;position:relative;transition:var(--t)}
.mit:hover{border-color:var(--gold);box-shadow:var(--sh)}
.mit .th{aspect-ratio:4/3;background:var(--line-2)}
.mit .th img{width:100%;height:100%;object-fit:contain}
.mit .nm{padding:8px 10px;font-size:.76rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mit .acts{position:absolute;top:5px;right:5px;display:flex;gap:4px;opacity:0;transition:var(--t)}
.mit:hover .acts{opacity:1}
.mit .acts button{width:26px;height:26px;border-radius:6px;background:rgba(20,20,26,.82);color:#fff;display:grid;place-items:center}
.mit .acts button:hover{background:var(--gold);color:#1a1405}
.mit .acts button.d:hover{background:var(--err);color:#fff}
.drop{border:2px dashed var(--line);border-radius:var(--r);padding:34px;text-align:center;color:var(--ink-3);transition:var(--t);cursor:pointer;background:#fcfcfd;margin-bottom:18px}
.drop.over,.drop:hover{border-color:var(--gold);background:var(--gold-l);color:var(--gold)}
.drop .ic{margin:0 auto 10px;color:var(--gold)}
.drop strong{display:block;color:var(--ink);font-size:.98rem}

/* ---------- leads ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;padding:11px 14px;background:#fafbfc;border-bottom:1px solid var(--line);font-weight:600;font-size:.83rem;color:var(--ink-3);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl tr:hover td{background:#fcfcfd}
.tbl .msg{max-width:320px;color:var(--ink-2);font-size:.86rem}
.tbl a{color:var(--info)}
.tbl a:hover{text-decoration:underline}
.st{padding:3px 10px;border-radius:20px;font-size:.76rem;font-weight:600;border:0;cursor:pointer}
.st-new{background:var(--gold-l);color:#8a6d10}
.st-contacted{background:#e7f0fa;color:var(--info)}
.st-done{background:var(--ok-bg);color:var(--ok)}
.tblw{overflow-x:auto}

/* ---------- preview ---------- */
.pv-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;background:#fff;border:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;border-bottom:0;flex-wrap:wrap}
.pv-url{flex:1;min-width:160px;padding:7px 13px;border:1.5px solid var(--line);border-radius:20px;font-size:.84rem;font-family:ui-monospace,monospace;color:var(--ink-3);background:#fafbfc}
.pv-frame{border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);background:#fff;overflow:hidden;display:grid;place-items:start center;padding:0}
.pv-frame.pad{padding:22px;background:#e9ebef}
.pv-frame iframe{width:100%;height:calc(100vh - 230px);min-height:520px;border:0;display:block;background:#fff;transition:width .25s ease}
.pv-frame.tablet iframe{width:820px;max-width:100%;border-radius:12px;box-shadow:var(--sh-lg);height:calc(100vh - 274px)}
.pv-frame.phone iframe{width:400px;max-width:100%;border-radius:20px;box-shadow:var(--sh-lg);height:calc(100vh - 274px)}
.seg{display:inline-flex;background:var(--line-2);border-radius:9px;padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:7px;font-size:.84rem;color:var(--ink-3);transition:var(--t)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- modal ---------- */
.mod{position:fixed;inset:0;z-index:300;background:rgba(16,16,26,.6);display:grid;place-items:center;padding:22px;backdrop-filter:blur(3px)}
.mod-in{background:#fff;border-radius:16px;width:min(940px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--sh-lg);overflow:hidden}
.mod-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mod-h h3{font-size:1.02rem;flex:1}
.mod-b{padding:20px;overflow-y:auto;flex:1}
.mod-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end;background:#fcfcfd}
.tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--line);background:#fcfcfd;overflow-x:auto}
.tabs button{padding:12px 15px;font-size:.9rem;color:var(--ink-3);border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:var(--t)}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--gold);border-color:var(--gold);font-weight:600}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.pick button{border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;background:var(--line-2);aspect-ratio:4/3;transition:var(--t);position:relative}
.pick button:hover{border-color:var(--gold);transform:scale(1.03)}
.pick img{width:100%;height:100%;object-fit:contain;background:#fff}
.srch{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:20px;padding:8px 15px;margin-bottom:16px;color:var(--ink-3)}
.srch input{border:0;outline:0;flex:1;font-size:.9rem;background:none}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--ink);color:#fff;padding:13px 24px;border-radius:11px;font-size:.92rem;font-weight:500;z-index:400;box-shadow:var(--sh-lg);transition:transform .3s cubic-bezier(.2,.7,.3,1);display:flex;align-items:center;gap:9px;max-width:90vw}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast.ok{background:#12694a}
.toast.err{background:#a8322a}

.empty-s{padding:56px 20px;text-align:center;color:var(--ink-3)}
.empty-s .ic{color:var(--line);margin:0 auto 12px}

@media(max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:262px;z-index:100;transform:translateX(-100%);transition:transform var(--t);height:100vh}
  .side.open{transform:none;box-shadow:var(--sh-lg)}
  .menu-btn{display:inline-flex}
  .body{padding:18px}
  .top{padding:12px 16px}
  .top h1{font-size:1.05rem}
  .scrim{position:fixed;inset:0;background:rgba(16,16,26,.5);z-index:99}
}
@media(max-width:620px){
  .top-act .b span{display:none}
  .top-act .b{padding:9px 11px}
  .top-act .b-p span{display:inline}
}