/* ───────────────────────────────────────────────────────────────────────
   NEUMORPHISM SKIN — Clean line · Minimal · Space · Modern
   สกินชั้นทับ (แทน classic-mac.css) — ปรับเฉพาะหน้าตา ไม่แตะ layout/JS
   หัวใจ: พื้นเทาอ่อน + เงาคู่นุ่ม (สว่างบนซ้าย/เข้มล่างขวา) + มุมโค้งใหญ่
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #f4f5f8 !important;
  --surface: #f4f5f8 !important;
  --surface2: #e8e9ef !important;
  --border: rgba(163,177,198,.35) !important;
  --accent: #3a3d45 !important;
  --accent2: #5b7cfa !important;
  --green: #4a9d6b !important;
  --red: #d06565 !important;
  --text: #3a3d45 !important;
  --muted: #8f939e !important;
  --font: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif !important;
  --nm-out: -9px -9px 20px rgba(255,255,255,1), 9px 9px 22px rgba(166,177,200,.75);
  --nm-out-sm: -5px -5px 12px rgba(255,255,255,1), 5px 5px 12px rgba(166,177,200,.7);
  --nm-in: inset -4px -4px 9px rgba(255,255,255,.95), inset 4px 4px 9px rgba(166,177,200,.6);
}

html, body {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text);
}

/* แอปเต็มจอ โปร่ง ไม่มีกรอบหน้าต่าง */
.app { border: 0 !important; box-shadow: none !important; margin: 0 !important; background: var(--bg) !important; }
.main { padding: 36px 40px !important; }

/* ── Sidebar ── */
.sidebar { background: var(--bg) !important; border-right: 0 !important; padding: 14px 12px; }
.logo { border-bottom: 0 !important; margin-bottom: 8px; }
.logo-main { color: var(--text) !important; letter-spacing: .5px; }
.nav-item {
  border-radius: 14px !important; border-left: 0 !important;
  margin: 3px 4px; padding: 12px 16px !important;
  transition: all .18s ease;
}
.nav-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
.nav-item.active {
  background: var(--bg) !important; color: var(--text) !important;
  box-shadow: var(--nm-out-sm); font-weight: 700;
}
.sidebar-footer { border-top: 0 !important; }

/* ── Cards / panels ── */
.card, .modal, .tbl-wrap {
  background: var(--bg) !important;
  border: 0 !important; border-radius: 20px !important;
  box-shadow: var(--nm-out) !important;
}
.card { padding: 22px 24px !important; }
.rams-cal { border: 0 !important; }

/* ── ปุ่ม: นูน → กดแล้วยุบ ── */
.btn, button.btn {
  background: var(--bg) !important; color: var(--text) !important;
  border: 0 !important; border-radius: 12px !important;
  box-shadow: var(--nm-out-sm) !important;
  font-weight: 600; transition: all .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { box-shadow: var(--nm-in) !important; transform: none; }
.btn-primary { background: var(--accent) !important; color: #f2f3f7 !important;
  box-shadow: -3px -3px 7px rgba(255,255,255,.7), 3px 3px 9px rgba(120,130,150,.55) !important; }
.btn-green { background: var(--green) !important; color: #fff !important; }
.btn-danger { background: var(--bg) !important; color: var(--red) !important; }
.btn:disabled { opacity: .45; box-shadow: none !important; }

/* ── Inputs: จมลงในพื้น ── */
.form-input, input.form-input, select.form-input, textarea.form-input {
  background: var(--bg) !important; color: var(--text) !important;
  border: 0 !important; border-radius: 12px !important;
  box-shadow: var(--nm-in) !important;
  padding: 10px 14px !important;
}
.form-input:focus { outline: none !important; box-shadow: var(--nm-in), 0 0 0 2px rgba(91,124,250,.25) !important; }
.form-label { color: var(--muted) !important; font-weight: 600; font-size: 12px !important; letter-spacing: .3px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent2); width: 15px; height: 15px; }

/* ── Badge: pill แบน นุ่ม ── */
.badge {
  border: 0 !important; border-radius: 999px !important;
  background: var(--surface2) !important; color: var(--text) !important;
  padding: 3px 10px !important; font-weight: 600;
}
.badge-green { background: rgba(74,157,107,.16) !important; color: #2f7a4f !important; }
.badge-blue { background: rgba(91,124,250,.14) !important; color: #4a63c8 !important; }
.badge-red { background: rgba(208,101,101,.15) !important; color: #b04f4f !important; }
.badge-yellow { background: rgba(200,164,88,.18) !important; color: #8a6d33 !important; }
.badge-gray { background: var(--surface2) !important; color: var(--muted) !important; }

/* ── ตาราง: เส้นบาง โปร่ง ── */
.tbl-wrap { overflow: hidden; }
table { border-collapse: separate !important; border-spacing: 0; }
th { background: transparent !important; color: var(--muted) !important; font-size: 11px !important;
  letter-spacing: .6px; text-transform: uppercase; border-bottom: 1px solid var(--border) !important; padding: 12px 14px !important; }
td { border-bottom: 1px solid rgba(163,177,198,.18) !important; padding: 12px 14px !important; }
tr:last-child td { border-bottom: 0 !important; }
tr:hover td { background: rgba(255,255,255,.35); }

/* ── โหมดใหญ่ 2 ท่า (Generate) ── */
.gen-mode-big { border: 0 !important; border-radius: 16px !important; box-shadow: var(--nm-out-sm); background: var(--bg); }
.gen-mode-big:has(input:checked) { box-shadow: var(--nm-in) !important; background: var(--surface2) !important; }

/* ── Tabs (Video) ── */
.tabs { background: var(--surface2) !important; border-radius: 12px !important; box-shadow: var(--nm-in); padding: 4px !important; }
.tab { border-radius: 9px !important; }
.tab.active { background: var(--bg) !important; box-shadow: var(--nm-out-sm) !important; }

/* ── Upload zone / promo slots ── */
.upload-zone, .promo-slot { border: 2px dashed rgba(163,177,198,.5) !important; border-radius: 16px !important; background: transparent !important; }
.upload-zone:hover, .upload-zone.dragover { background: rgba(255,255,255,.4) !important; border-color: var(--accent2) !important; }

/* ── Modal ── */
.modal-overlay { background: rgba(120,128,145,.35) !important; backdrop-filter: blur(3px); }
.modal-head, .modal-footer { border: 0 !important; }
.modal-close { border: 0 !important; background: transparent !important; }

/* ── Details/summary (advanced, FB tools) ── */
details { border-radius: 16px; }
details summary { color: var(--muted); border-radius: 12px; padding: 10px 14px !important; }
details[open] summary { color: var(--text); }
details summary:hover { background: var(--surface2); }

/* ── การ์ดสถิติ Dashboard ── */
.card-label { color: var(--muted) !important; font-size: 11px !important; letter-spacing: .8px; text-transform: uppercase; }
.card-val { color: var(--text) !important; font-weight: 800 !important; }
.card-val.green { color: var(--green) !important; }
.card-val.blue { color: var(--accent2) !important; }
.card-note { color: var(--muted) !important; }

/* ── หัวข้อ ── */
.page-title { font-weight: 800 !important; letter-spacing: -.5px; color: var(--text) !important; }
.page-sub, .section-title { color: var(--muted) !important; }
.section-title { color: var(--text) !important; font-weight: 700; }

/* ── Toast ── */
#toast { background: var(--accent) !important; color: #f2f3f7 !important; border: 0 !important;
  border-radius: 14px !important; box-shadow: 6px 6px 18px rgba(120,130,150,.5) !important; }

/* ── Scrollbar บางเรียบ ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(163,177,198,.55); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(140,150,170,.8); }

/* ── จุดที่ inline style ระบุ #fff/ขอบดำไว้ — นวดให้เข้าธีม ── */
[style*="background:#fff"], [style*="background: #fff"] { background: var(--bg) !important; }
[style*="border:2px solid var(--border)"] { border-width: 1px !important; }
.post-content { background: var(--surface2) !important; border: 0 !important; border-radius: 12px !important; box-shadow: var(--nm-in); }
.draft-card, .post-card { border: 0 !important; border-radius: 16px !important; box-shadow: var(--nm-out-sm) !important; background: var(--bg) !important; }


/* ── SVG nav icons (line style — แทน emoji) ── */
.nav-icon { display:inline-flex; align-items:center; justify-content:center; width:20px !important; }
.nav-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.75; }
.nav-item.active .nav-icon svg { opacity:1; }