:root{
  --bg:#0b0f14; --panel:#111827; --panel-2:#0f172a;
  --text:#eaf0fb; --muted:#a6b4c7; --line:#22324d;
  --primary:#4da3ff; --primary-2:#1f8cff; --danger:#ff637c; --ok:#00d28b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans Thai",ui-sans-serif;
  background:linear-gradient(180deg,#0a0e13 0%,#0b0f14 100%);
  color:var(--text)
}
.container{max-width:1040px;margin:0 auto;padding:16px}

/* Cards & layout */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 30px 60px rgba(0,0,0,.25)}
.card.soft{background:var(--panel-2)}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.col-span-2{grid-column:span 2}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}
h1,h2,h3,h4{margin:0;font-weight:700}
small,.hint,.help-small{color:var(--muted)}

/* Hero */
.hero{padding:20px 0 10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:52px;height:52px;object-fit:contain}
.tagline{margin:2px 0 0;color:var(--muted)}
.hero-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Controls */
button{background:#0f1826;color:var(--text);border:1px solid var(--line);padding:10px 14px;border-radius:12px;cursor:pointer}
button.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent}
button.secondary{background:#0e1623}
button.danger{background:linear-gradient(135deg,#ff6b6b,#ff4f7b);border-color:transparent}
.file-btn{position:relative;overflow:hidden;background:#0e1623;border:1px solid var(--line);padding:10px 14px;border-radius:12px}
.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px}
.field label{color:var(--muted);font-size:.95rem}
input,select,textarea{background:#0a111b;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:11px 12px;outline:none}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgba(77,163,255,.25);border-color:var(--primary)}
.inline{display:flex;gap:8px;align-items:center}

/* Embed preview */
.embed-preview{display:grid;grid-template-columns:6px 1fr 96px;gap:12px;background:#0a111b;border:1px dashed var(--line);border-radius:12px;padding:12px}
.embed-color{width:6px;border-radius:8px;background:var(--primary)}
.embed-main{display:flex;flex-direction:column;gap:8px}
.embed-title{font-weight:700}
.embed-desc{opacity:.95;white-space:pre-wrap}
.embed-image{height:140px;background:#0f1520;border:1px solid var(--line);border-radius:10px;display:none;background-size:cover;background-position:center}
.embed-thumb{width:96px;height:96px;background:#0f1520;border:1px solid var(--line);border-radius:10px;justify-self:end;display:none;background-size:cover;background-position:center}
.embed-btns{display:flex;gap:8px;flex-wrap:wrap}
.embed-btns .chip{background:#0f1520;border:1px solid var(--line);padding:6px 10px;border-radius:999px;font-size:.9rem}

/* Raw JSON */
.card.wide{margin-left:calc(50% - 50vw + 16px);margin-right:calc(50% - 50vw + 16px);max-width:calc(100vw - 32px)}
.toolbar{display:flex;align-items:center;gap:10px}
#rawJson{width:100%;min-height:640px;font-family:ui-monospace,Consolas,Menlo,monospace;font-size:14px;line-height:1.5;resize:vertical;tab-size:2;white-space:pre;overflow:auto}
#rawSection.fullscreen{position:fixed;inset:24px;z-index:9999;width:auto;height:auto;overflow:auto}
#rawSection.fullscreen .section-header{position:sticky;top:0;background:rgba(11,15,20,.92);backdrop-filter:blur(8px);padding-bottom:8px;border-radius:12px}
#rawSection.fullscreen #rawJson{height:calc(100vh - 180px);min-height:calc(100vh - 180px)}

/* Footer */
.footer{opacity:.9;font-size:.95rem;padding:8px 16px 36px;text-align:center}
.credit{display:flex;align-items:center;gap:10px;justify-content:center}
.credit-logo{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.3))}