/* AllGood Ad Factory — design system กลาง (โทนเดียวกับหน้าหลัก index.html)
   ทุกหน้า include ไฟล์นี้ + ui.js แล้วเรียก UI.shell() เพื่อได้ sidebar เดียวกัน */
*{box-sizing:border-box;margin:0}
/* จุดกระพริบหัว Live Preview — UI.livePreview ใช้ ต้องอยู่ที่นี่ให้ทุกหน้าเห็น
   (เมื่อก่อนประกาศไว้ใน <style> ของ index.html เท่านั้น หน้าอื่นเลยไม่กระพริบ) */
@keyframes agPulse{0%,100%{opacity:.4}50%{opacity:1}}
:root{--bg:#0b101e;--card:#1a2138;--card2:#161d33;--in:#12192e;--line:#2a3352;--line2:#26314f;--txt:#e8ecf8;--dim:#8b94b8;--dim2:#6f79a0;--lbl:#a9b2d6;--acc:#ffc53d;--acc2:#4f7cff;--ok:#3ddc84;--bad:#ff7b87}
body{background:radial-gradient(1200px 600px at 80% -10%,rgba(79,124,255,.10),transparent 60%),var(--bg);font-family:'IBM Plex Sans Thai','Sukhumvit Set',-apple-system,sans-serif;color:var(--txt);min-height:100vh}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--acc)}
textarea,input,button,select{font-family:inherit}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--acc2)!important}
.prompt{font-family:'Prompt',sans-serif}
.mono{font-family:'IBM Plex Mono',monospace}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.card h2{font-family:'Prompt',sans-serif;font-size:15px;font-weight:600;margin-bottom:12px}
.hint{color:var(--dim);font-size:12.5px}
.hint2{color:var(--dim2);font-size:11.5px}
.lbl{font-size:12.5px;color:var(--lbl);font-weight:500;display:block;margin-bottom:8px}
.in{width:100%;background:var(--in);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--txt);font-size:13px}
textarea.in{resize:vertical;line-height:1.6;font-size:13.5px;border-radius:11px;padding:12px 14px}
.chip{background:var(--in);border:1px solid var(--line);color:var(--lbl);font-weight:500;font-size:13px;padding:8px 14px;border-radius:10px;cursor:pointer}
.chip.on{background:rgba(255,197,61,.16);border-color:var(--acc);color:#ffd873;font-weight:600}
.btn{background:var(--card2);border:1px solid var(--line);color:var(--txt);font-size:14px;padding:12px 18px;border-radius:12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.sm{font-size:12.5px;padding:8px 12px;border-radius:10px}
.btn-primary{background:linear-gradient(135deg,#ffd54d,#ff8f3d);color:#0f1526;border:none;font-family:'Prompt';font-weight:700;font-size:14px;padding:12px 22px;border-radius:12px;cursor:pointer;box-shadow:0 8px 22px rgba(255,143,61,.28)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.badge{background:rgba(255,197,61,.14);color:var(--acc);font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.badge-blue{background:rgba(79,124,255,.16);color:#8fb0ff;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px}
input[type=range]{width:100%;accent-color:var(--acc)}
/* ring ด้านในตลอดเวลา — ไม่งั้นสวอตช์สีขาวหายไปกับพื้นครีมในธีมสว่าง */
.swatch{width:34px;height:34px;border-radius:10px;cursor:pointer;border:2px solid transparent;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.32)}
.swatch.on{border-color:var(--txt);box-shadow:0 0 0 2px var(--acc2),inset 0 0 0 1.5px rgba(0,0,0,.32)}
.hidden{display:none!important}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:150px}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.checks label{display:flex;align-items:center;gap:6px;margin:0;background:var(--in);border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--txt);font-size:13px}
.bar{height:10px;background:var(--in);border-radius:6px;overflow:hidden;margin:10px 0 6px}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd54d,#ff8f3d);transition:width .3s}
.logbox{font-size:12px;color:var(--dim);white-space:pre-wrap;max-height:220px;overflow:auto;font-family:'IBM Plex Mono',monospace}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.var{background:var(--in);border:1px solid var(--line);border-radius:12px;padding:10px}
.var video{width:100%;border-radius:8px}
.var textarea{width:100%;height:72px;background:#0b1020;border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:12px;padding:8px;margin-top:8px;font-family:inherit}

/* ---------- Sidebar shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{width:212px;flex-shrink:0;background:rgba(15,21,38,.85);border-right:1px solid #1e2740;padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.sidebar .logo .ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#ffd54d,#ff8f3d);display:grid;place-items:center;font-size:19px;box-shadow:0 6px 18px rgba(255,143,61,.35)}
.sidebar .logo .t1{font-family:'Prompt';font-weight:700;font-size:14.5px;line-height:1.15}
.sidebar .logo .t2{font-size:10px;color:var(--dim)}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;color:#c7cfe8;font-size:13.5px;font-weight:600;text-decoration:none;border:1px solid transparent}
.nav-item:hover{background:#141b30}
.nav-item.on{background:rgba(255,197,61,.13);border-color:rgba(255,197,61,.4);color:#ffd873}
.nav-group{font-size:10.5px;color:var(--dim2);font-weight:700;padding:12px 12px 4px;letter-spacing:.03em}
/* 🔑 แถบสถานะ license ท้าย sidebar (ก่อนปุ่มสลับธีม) — ใส่โดย pages/ui.js shell(),
   ตัว pill เติม innerHTML โดย license-guard.js/pillHtml() */
.side-lic{padding:6px 12px 2px;min-height:1px}
.lic-pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;white-space:nowrap}
.lic-ok{background:rgba(61,220,132,.16);color:var(--ok)}
.lic-warn{background:rgba(255,197,61,.16);color:var(--acc)}
.lic-off{background:rgba(255,143,61,.18);color:#ff8f3d}
/* 🏷 ป้ายสถานะเวอร์ชันใต้โลโก้ — เขียว = ล่าสุด · ส้ม = มีอัพเดท (ทั้งชิปกดได้ ลิงก์ไปดาวน์โหลด) */
.ver-chip{padding:0 12px 6px}
.ver-badge{display:inline-block;font-size:11px;padding:3px 9px;border-radius:999px;text-decoration:none;white-space:nowrap}
.ver-ok{background:rgba(61,220,132,.14);color:var(--ok)}
.ver-upd{background:rgba(255,150,58,.16);color:#ff9b3d;font-weight:600}
.ver-upd:hover{background:rgba(255,150,58,.28)}
/* 🎨 ปุ่มลบสีที่ผู้ใช้บันทึกเอง — โผล่ตอน hover (สีมาตรฐานไม่มี) */
.swatch-del{display:none;position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:#d33;color:#fff;font-size:10px;line-height:16px;text-align:center;cursor:pointer;z-index:2}
.swatch:hover .swatch-del{display:block}
.lic-bad{background:rgba(255,123,135,.16);color:var(--bad)}
.nav-foot{margin-top:auto;padding:8px;font-size:11px;color:var(--dim2)}
.main{flex:1;min-width:0;padding:22px 24px 90px}
.main-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.main-head h1{font-family:'Prompt';font-size:20px;font-weight:700;margin-right:auto}
.main-head .sub{font-size:12px;color:var(--dim);width:100%}
@media(max-width:820px){
  .shell{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;overflow-x:auto;padding:10px 12px;border-right:none;border-bottom:1px solid #1e2740}
  .sidebar .logo{padding:0 8px 0 0}
  .sidebar .logo .t2,.nav-group,.nav-foot{display:none}
  .nav-item{white-space:nowrap;padding:8px 11px}
}