/* ============================================================
   GovWatch — "Civic Ledger" editorial theme
   สี ฟอนต์ ขนาดฟอนต์ ถูกกำหนดผ่าน CSS variables (เปลี่ยนได้จากหน้าตั้งค่า)
   ============================================================ */

:root {
  /* ค่าเหล่านี้ถูก override จาก layout_header.php ตามธีมผู้ใช้ */
  --accent: #0e7a5f;
  --font-body: 'Anuphan', sans-serif;
  --fs-base: 16px;

  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-dim:  color-mix(in srgb, var(--accent) 70%, black);
  --accent-glow: color-mix(in srgb, var(--accent) 35%, transparent);
}

html[data-mode="light"] {
  --bg: #f7f4ee;
  --bg-tex: radial-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px);
  --panel: #fffdf9;
  --panel-2: #f1ede4;
  --ink: #1d2521;
  --ink-2: #5a6660;
  --line: #e2dccd;
  --line-strong: #1d2521;
  --side-bg: #25312a;     /* อ่อนลงจาก #16201b — ลดความเข้มแถบข้าง */
  --side-ink: #eef0ea;
  --side-dim: #b9c3ba;    /* เมนูอ่านง่ายขึ้น */
  --shadow: 0 1px 2px rgba(29,37,33,.06), 0 8px 24px -12px rgba(29,37,33,.18);
}

html[data-mode="dark"] {
  --bg: #111714;
  --bg-tex: radial-gradient(color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px);
  --panel: #18211c;
  --panel-2: #1f2a24;
  --ink: #e8e4d8;
  --ink-2: #93a098;
  --line: #2a352e;
  --line-strong: #e8e4d8;
  --side-bg: #161d19;     /* อ่อนลงจาก #0c110e */
  --side-ink: #e8e4d8;
  --side-dim: #9aa79f;    /* เมนูอ่านง่ายขึ้น */
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -12px rgba(0,0,0,.5);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: var(--fs-base); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  background-image: var(--bg-tex);
  background-size: 22px 22px;
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
svg { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- ไอคอน Flaticon UIcons ---------- */
i.fi { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }
i.fi::before { line-height: 1; }
.nav i.fi { width: 1.2em; font-size: 1rem; }
.btn i.fi { font-size: .92em; margin-right: .1em; }
.bell i.fi { font-size: 1.1rem; }
.tabs i.fi { font-size: .9em; margin-right: .3em; }
.notif-ico i.fi { font-size: 1.05rem; }

/* โลโก้ที่อัปโหลดเอง (แทน ฿) */
.brand-mark-img {
  width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: .55rem; object-fit: cover; background: #fff;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
/* โลโก้แบบยาวเต็มแถบ — แสดงเดี่ยว ๆ ไม่มีตัวหนังสือ */
.brand-logo-wide {
  display: block; width: 100%; max-height: 56px;
  object-fit: contain; object-position: left center;
  border-radius: .4rem;
}
.auth-hero .brand-logo-wide { max-width: 280px; max-height: 72px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }

/* ---------- โครงหน้า ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px; flex: none;
  background: var(--side-bg); color: var(--side-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  border-right: 3px solid var(--accent);
}

.brand {
  display: flex; gap: .7rem; align-items: center;
  padding: 1.3rem 1.2rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--side-ink) 12%, transparent);
}
.brand-mark {
  width: 2.4rem; height: 2.4rem; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 1.3rem; border-radius: .55rem;
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.brand-text { font-size: 1.18rem; letter-spacing: .01em; line-height: 1.15; }
.brand-text b { color: var(--accent); filter: brightness(1.5); }
.brand-text small { display: block; font-size: .62rem; color: var(--side-dim); letter-spacing: .14em; }

.nav { padding: 1rem .8rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.nav-label {
  font-size: .66rem; letter-spacing: .22em; color: var(--side-dim);
  text-transform: uppercase; padding: 1rem .6rem .35rem;
}
.nav a {
  display: flex; align-items: center; gap: .65rem;
  padding: .58rem .7rem; border-radius: .5rem;
  font-size: .94rem; color: var(--side-dim);
  transition: all .18s ease; position: relative;
}
.nav a:hover { color: var(--side-ink); background: color-mix(in srgb, var(--side-ink) 6%, transparent); }
.nav a.on {
  color: var(--side-ink);
  background: linear-gradient(90deg, var(--accent-glow), transparent 75%);
}
.nav a.on::before {
  content: ''; position: absolute; left: -0.8rem; top: 18%; bottom: 18%;
  width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}

.sidebar-foot { padding: 1rem 1.2rem; border-top: 1px solid color-mix(in srgb, var(--side-ink) 10%, transparent); }
.demo-pill, .live-pill { font-size: .78rem; letter-spacing: .03em; }
.demo-pill { color: #e3a008; }
.live-pill { color: #34d399; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
}
.topbar-title h1 { font-size: 1.35rem; }
.topbar-date { font-size: .8rem; color: var(--ink-2); }
.topbar-right { display: flex; align-items: center; gap: 1.1rem; }

.bell { position: relative; color: var(--ink-2); display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); border-radius: .6rem;
  background: var(--panel); transition: .18s; }
.bell:hover { color: var(--accent); border-color: var(--accent); }

.badge {
  position: absolute; top: -7px; right: -7px;
  background: #dc2626; color: #fff; font-size: .66rem; font-weight: 700;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  border-radius: 999px; display: grid; place-items: center;
}
.nav .badge { position: static; margin-left: auto; }

.userchip { display: flex; align-items: center; gap: .6rem; }
.avatar {
  width: 2.4rem; height: 2.4rem; border-radius: .6rem;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}
.userchip-name { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.userchip-name small { display: block; font-weight: 400; color: var(--ink-2); font-size: .72rem; }

.content { padding: 1.8rem 2rem; flex: 1; animation: rise .45s ease both; }
.appfoot {
  padding: 1rem 2rem; font-size: .76rem; color: var(--ink-2);
  border-top: 1px solid var(--line);
}

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- การ์ด / แผง ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .grid.cols-4, .grid.cols-2 { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: .9rem; box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--line);
}
.panel-head h2 { font-size: 1.02rem; display: flex; align-items: center; gap: .5rem; }
.panel-head h2::before { content: ''; width: .55rem; height: .55rem; background: var(--accent); border-radius: 2px; }
.panel-body { padding: 1.3rem; }
.panel-body.flush { padding: 0; }

.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: .9rem;
  padding: 1.15rem 1.3rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.stat .k { font-size: .8rem; color: var(--ink-2); letter-spacing: .04em; }
.stat .v { font-size: 1.75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .15rem; }
.stat .v small { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.stat .sub { font-size: .76rem; color: var(--ink-2); margin-top: .2rem; }

/* ---------- ปุ่ม / ฟอร์ม ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: inherit; font-size: .9rem; font-weight: 600;
  padding: .58rem 1.1rem; border-radius: .55rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  transition: all .18s ease;
}
.btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dim); color: #fff; box-shadow: 0 6px 16px -6px var(--accent-glow); }
.btn.danger:hover { border-color: #dc2626; color: #dc2626; }
.btn.sm { padding: .32rem .7rem; font-size: .8rem; }
.btn:disabled { opacity: .55; cursor: wait; transform: none; }

label.f { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .9rem; }
label.f > span { display: block; margin-bottom: .3rem; color: var(--ink-2); }
.input, select.input, textarea.input {
  width: 100%; font-family: inherit; font-size: .95rem;
  padding: .55rem .8rem; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: .55rem;
  transition: border .18s, box-shadow .18s;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1rem; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- ตาราง ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th {
  text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); padding: .7rem 1.1rem;
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}
.tbl td { padding: .75rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: var(--accent-soft); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .muted, .muted { color: var(--ink-2); font-size: .8rem; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  padding: .1rem .55rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
/* เซลล์พื้นที่: แต่ละบรรทัด (ต./อ./จ.) ไม่ตัดกลางคำ */
.cell-lines div { white-space: nowrap; }
html[data-mode="dark"] .tag { color: color-mix(in srgb, var(--accent) 70%, white); }
.tag.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* ---------- ป้ายสัญญาณเสี่ยง (red-flags) ---------- */
.flag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: .08rem .45rem; border-radius: .35rem; margin: 1px 2px 1px 0;
  white-space: nowrap; cursor: help; border: 1px solid;
}
.flag-high   { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.flag-medium { background: #ffedd5; color: #9a3412; border-color: #fdba74; }
.flag-info   { background: #e0e7ef; color: #475569; border-color: #cbd5e1; }
html[data-mode="dark"] .flag-high   { background: #3a1212; color: #fca5a5; border-color: #7f1d1d; }
html[data-mode="dark"] .flag-medium { background: #3a2410; color: #fdba74; border-color: #9a3412; }
html[data-mode="dark"] .flag-info   { background: #1e2632; color: #94a3b8; border-color: #334155; }
.risk-summary { display: flex; flex-wrap: wrap; gap: .6rem; }
.risk-chip {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .85rem; background: var(--panel-2);
}
.risk-chip b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.risk-chip.high b { color: #dc2626; }
.risk-chip.medium b { color: #ea580c; }
.row-flagged { box-shadow: inset 3px 0 0 #dc2626; }
html[data-mode="dark"] .tag.warn { background: #453008; color: #fcd34d; border-color: #92400e; }

/* ---------- แจ้งเตือน ---------- */
.notif {
  display: flex; gap: .9rem; padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--line); transition: background .15s;
}
.notif:last-child { border-bottom: none; }
.notif.unread { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.notif-ico {
  width: 2.3rem; height: 2.3rem; flex: none; border-radius: .55rem;
  display: grid; place-items: center; background: var(--panel-2); color: var(--accent);
}
.notif-body { min-width: 0; flex: 1; }
.notif-body b { font-size: .92rem; display: block; }
.notif-body p { font-size: .82rem; color: var(--ink-2); margin-top: .1rem; }
.notif-body time { font-size: .72rem; color: var(--ink-2); }

/* ---------- Toast ---------- */
.toast-zone { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 200; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  background: var(--side-bg); color: var(--side-ink);
  border-left: 4px solid var(--accent);
  padding: .8rem 1.1rem; border-radius: .6rem; font-size: .88rem;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  animation: toastIn .3s ease both; max-width: 360px;
}
.toast.err { border-left-color: #dc2626; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ---------- Modal ---------- */
.modal-bg {
  position: fixed; inset: 0; background: rgba(10,14,12,.55);
  backdrop-filter: blur(3px); z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  animation: fadeIn .2s ease both;
}
.modal {
  background: var(--panel); border-radius: 1rem; border: 1px solid var(--line);
  width: 100%; max-width: 720px; max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  animation: rise .3s ease both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- หน้า login/register ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
@media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { display: none; } }

.auth-hero {
  background: var(--side-bg); color: var(--side-ink);
  padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth-hero::before {
  content: '฿'; position: absolute; right: -4rem; bottom: -6rem;
  font-size: 26rem; font-weight: 700; opacity: .06; color: var(--accent);
  line-height: 1; filter: brightness(2);
}
.auth-hero .brand { border: none; padding: 0; }
.auth-hero h2 { font-size: 2.1rem; line-height: 1.35; max-width: 22ch; }
.auth-hero h2 em { color: var(--accent); font-style: normal; filter: brightness(1.6); }
.auth-hero p { color: var(--side-dim); max-width: 46ch; margin-top: .8rem; }
.auth-hero .src { font-size: .75rem; color: var(--side-dim); }

.auth-form { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }
.auth-card .sub { color: var(--ink-2); font-size: .9rem; margin-bottom: 1.6rem; }
.auth-card .btn { width: 100%; justify-content: center; padding: .7rem; font-size: 1rem; }
.auth-alt { text-align: center; font-size: .85rem; color: var(--ink-2); margin-top: 1.3rem; }
.auth-alt a { color: var(--accent); font-weight: 600; }

.alert {
  padding: .7rem 1rem; border-radius: .55rem; font-size: .87rem; margin-bottom: 1.1rem;
  border: 1px solid;
}
.alert.err { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.alert.ok  { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
html[data-mode="dark"] .alert.err { background: #3a1212; border-color: #7f1d1d; color: #fca5a5; }
html[data-mode="dark"] .alert.ok  { background: #0d2818; border-color: #166534; color: #86efac; }

/* ---------- dropdown บน topbar (กระดิ่ง + megamenu โปรไฟล์) ---------- */
.dd { position: relative; }
.dd > button { cursor: pointer; font-family: inherit; }
.dd-panel {
  position: absolute; right: 0; top: calc(100% + 12px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.35);
  min-width: 320px; z-index: 95; display: none; overflow: hidden;
}
.dd.open .dd-panel { display: block; animation: rise .18s ease both; }
.userchip { background: none; border: none; padding: .25rem .4rem; border-radius: .7rem; transition: .15s; }
.userchip:hover { background: var(--panel-2); }
.userchip .chev { color: var(--ink-2); font-size: .9rem; }
.dd.open .userchip .chev { transform: rotate(180deg); }

.mm-head {
  display: flex; gap: .85rem; align-items: center;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.mm-head .avatar { width: 3rem; height: 3rem; font-size: 1.3rem; }
.mm-head b { display: block; line-height: 1.25; }
.mm-head small { color: var(--ink-2); font-size: .76rem; display: block; }
.mm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: .9rem 1rem; }
.mm-item {
  display: flex; flex-direction: column; gap: .25rem; align-items: flex-start;
  padding: .65rem .75rem; border-radius: .7rem;
  border: 1px solid var(--line); background: var(--panel-2);
  font-size: .8rem; font-weight: 600; color: var(--ink); transition: .15s;
}
.mm-item i.fi { color: var(--accent); font-size: 1rem; }
.mm-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.mm-foot { padding: .75rem 1rem 1rem; border-top: 1px solid var(--line); }
.mm-foot .btn { width: 100%; justify-content: center; }

.notif-panel { width: 370px; max-width: 92vw; }
.np-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: .85rem 1.15rem; border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: .92rem;
}
.np-head a { color: var(--accent); font-size: .78rem; font-weight: 600; }
.np-list { max-height: 330px; overflow: auto; }
.np-list .notif { padding: .65rem 1.05rem; }
.np-list .notif-body b { font-size: .84rem; }

/* ---------- Tom Select: ห้ามตัดข้อความทีละตัวอักษร (dropdown แคบ) ---------- */
.ts-dropdown { min-width: max-content !important; }
.ts-dropdown .option, .ts-dropdown .no-results { white-space: nowrap; }

/* ---------- คลิกดูรายละเอียดโครงการ ---------- */
[data-project] { cursor: pointer; }
.proj-link { cursor: pointer; transition: color .12s; }
.proj-link:hover { color: var(--accent); text-decoration: underline; }
.pj-rows { display: grid; grid-template-columns: 150px 1fr; gap: .3rem .9rem; font-size: .9rem; }
.pj-rows dt { color: var(--ink-2); font-size: .8rem; padding-top: .1rem; }
.pj-rows dd { margin: 0; }
.pj-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ---------- รายงานวิเคราะห์ AI ---------- */
.ai-meta {
  font-size: .76rem; padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 1px dashed var(--line);
}
.ai-report { line-height: 1.75; font-size: .93rem; }
.ai-report .ai-h {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.2rem 0 .45rem; font-size: 1.02rem; color: var(--accent-dim);
}
html[data-mode="dark"] .ai-report .ai-h { color: color-mix(in srgb, var(--accent) 70%, white); }
.ai-report .ai-h::before { content: ''; width: .5rem; height: .5rem; background: var(--accent); border-radius: 2px; flex: none; }
.ai-report h4.ai-h { font-size: .92rem; }
.ai-report .ai-p { margin: .45rem 0; }
.ai-report .ai-list { margin: .35rem 0 .7rem 1.4rem; }
.ai-report .ai-list li { margin: .3rem 0; }
.ai-report b { color: var(--ink); }

/* ---------- โซนลาก-วางไฟล์ ---------- */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: 1rem .8rem; cursor: pointer;
  border: 2px dashed var(--line); border-radius: .8rem;
  background: var(--panel-2); color: var(--ink-2);
  font-size: .8rem; transition: all .18s ease;
}
.dropzone i.fi { font-size: 1.5rem; color: var(--accent); }
.dropzone:hover, .dropzone.drag {
  border-color: var(--accent); background: var(--accent-soft);
  transform: translateY(-2px);
}
.dropzone.drag { box-shadow: 0 0 0 4px var(--accent-soft); }
.dropzone.has-file { border-style: solid; border-color: var(--accent); }
.dz-file { color: var(--accent-dim); font-weight: 700; font-size: .76rem; word-break: break-all; }
html[data-mode="dark"] .dz-file { color: color-mix(in srgb, var(--accent) 70%, white); }

/* ---------- หน้าตั้งค่าธีม (ดีไซน์ใหม่) ---------- */
.tsec { margin-bottom: 1.8rem; }
.tsec-title {
  display: flex; align-items: center; gap: .55rem;
  font-weight: 700; font-size: 1.02rem;
}
.tsec-title i.fi { color: var(--accent); font-size: 1.05rem; }
.tsec-hint { color: var(--ink-2); font-size: .8rem; margin: .15rem 0 .95rem; }

/* การ์ดโหมดสว่าง/มืด พร้อมภาพจำลองหน้าจอ */
.mode-cards { display: grid; grid-template-columns: repeat(2, minmax(200px, 270px)); gap: 1rem; }
@media (max-width: 640px) { .mode-cards { grid-template-columns: 1fr 1fr; } }
.mode-card {
  position: relative; cursor: pointer; font-family: inherit;
  border: 2px solid var(--line); border-radius: 1rem;
  background: var(--panel-2); padding: .65rem .65rem .75rem;
  transition: all .18s ease;
}
.mode-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.mode-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.mc-shot { display: flex; height: 92px; border-radius: .6rem; overflow: hidden; border: 1px solid var(--line); }
.mc-side { width: 26%; }
.mc-main { flex: 1; padding: 9px; display: flex; flex-direction: column; gap: 6px; }
.mc-accent { width: 36%; height: 9px; border-radius: 5px; background: var(--accent); }
.mc-bar { height: 7px; border-radius: 4px; }
.mc-card { flex: 1; border-radius: 6px; }
.mode-card.light .mc-shot { background: #f7f4ee; }
.mode-card.light .mc-side { background: #16201b; }
.mode-card.light .mc-bar.a { width: 62%; background: #ddd6c4; }
.mode-card.light .mc-bar.b { width: 88%; background: #e8e2d3; }
.mode-card.light .mc-card { background: #fffdf9; border: 1px solid #e2dccd; }
.mode-card.dark .mc-shot { background: #111714; }
.mode-card.dark .mc-side { background: #0c110e; }
.mode-card.dark .mc-bar.a { width: 62%; background: #2c372f; }
.mode-card.dark .mc-bar.b { width: 88%; background: #232d26; }
.mode-card.dark .mc-card { background: #18211c; border: 1px solid #2a352e; }
.mc-label {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-weight: 700; font-size: .94rem; margin-top: .6rem; color: var(--ink);
}
.mc-check {
  position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: .72rem;
  display: none; place-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.3);
}
.mode-card.on .mc-check, .font-card.on .mc-check { display: grid; }

/* ชิปสีวงกลม + ชื่อสี */
.swatch-grid { display: flex; gap: .55rem 1rem; flex-wrap: wrap; }
.swatch-item {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  background: none; border: none; cursor: pointer; font-family: inherit;
  width: 66px; padding: .3rem .1rem; border-radius: .7rem; transition: .15s;
}
.sw-dot {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--sw); color: #fff; font-size: .85rem;
  display: grid; place-items: center;
  box-shadow: inset 0 -5px 9px rgba(0,0,0,.22);
  transition: transform .15s;
}
.swatch-item:hover .sw-dot { transform: scale(1.14); }
.swatch-item.on .sw-dot { outline: 3px solid var(--sw); outline-offset: 3px; }
.sw-dot i.fi { display: none; }
.swatch-item.on .sw-dot i.fi { display: block; }
.sw-name { font-size: .73rem; font-weight: 600; color: var(--ink-2); }
.swatch-item.on .sw-name { color: var(--ink); }
.sw-custom { position: relative; }
.sw-custom:not(.on) .sw-dot {
  background: conic-gradient(#f44, #fb0, #4c2, #0cc, #36f, #c3f, #f44);
}
.sw-custom input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* การ์ดฟอนต์ */
.font-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 980px) { .font-grid { grid-template-columns: repeat(2, 1fr); } }
.font-card {
  position: relative; cursor: pointer; text-align: left;
  border: 2px solid var(--line); border-radius: .9rem;
  background: var(--panel-2); padding: .95rem 1.05rem .75rem;
  transition: all .18s ease;
}
.font-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }
.font-card.on { border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-soft); }
.fc-sample { display: block; font-size: 1.45rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.fc-name { display: block; font-size: .73rem; color: var(--ink-2); margin-top: .2rem; font-family: var(--font-body); }

/* สไลเดอร์ขนาดตัวอักษร */
.size-wrap { max-width: 600px; }
.size-row { display: flex; align-items: center; gap: .9rem; }
.sz-min { font-size: .8rem; font-weight: 700; color: var(--ink-2); }
.sz-max { font-size: 1.5rem; font-weight: 700; color: var(--ink-2); }
.size-badge {
  min-width: 56px; text-align: center;
  background: var(--accent); color: #fff; font-weight: 700;
  border-radius: .5rem; padding: .25rem .55rem; font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
.size-preview {
  margin-top: .85rem; padding: .85rem 1.05rem;
  background: var(--panel-2); border: 1px dashed var(--line);
  border-radius: .7rem; color: var(--ink-2); transition: font-size .15s;
}
.theme-save {
  display: flex; justify-content: flex-end; gap: .6rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem;
}

/* ---------- หน้าตั้งค่าธีม ---------- */
.swatches { display: flex; gap: .7rem; flex-wrap: wrap; }
.swatch {
  width: 2.7rem; height: 2.7rem; border-radius: .65rem; cursor: pointer;
  border: 3px solid transparent; transition: .15s;
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
.swatch.on { border-color: var(--ink); transform: scale(1.08); }
.font-opt {
  border: 1px solid var(--line); border-radius: .65rem; padding: .7rem .95rem;
  cursor: pointer; transition: .15s; background: var(--panel-2);
}
.font-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.font-opt b { display: block; font-size: 1.05rem; }
.font-opt small { color: var(--ink-2); font-size: .72rem; }

.mode-seg { display: inline-flex; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.mode-seg button {
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  padding: .5rem 1.2rem; border: none; background: var(--panel-2); color: var(--ink-2);
}
.mode-seg button.on { background: var(--accent); color: #fff; }

input[type="range"].slider { width: 100%; accent-color: var(--accent); }
input[type="color"].cpick {
  width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: .65rem;
  background: var(--panel); cursor: pointer; padding: .2rem;
}

.tabs { display: flex; gap: .3rem; border-bottom: 2px solid var(--line); margin-bottom: 1.4rem; }
.tabs a {
  padding: .6rem 1.2rem; font-size: .92rem; font-weight: 600; color: var(--ink-2);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- รายการติดตาม (การ์ด) ---------- */
.wl-card { position: relative; }
.wl-card .panel-body { display: flex; flex-direction: column; gap: .5rem; }
.wl-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.wl-stats { display: flex; gap: 1.6rem; margin-top: .4rem; }
.wl-stats div b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.wl-stats div span { display: block; font-size: .72rem; color: var(--ink-2); }
.wl-actions { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

.empty {
  text-align: center; padding: 3rem 1rem; color: var(--ink-2);
}
.empty b { display: block; font-size: 1.05rem; color: var(--ink); margin-bottom: .2rem; }

.spin { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; animation: sp .7s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ---------- Tom Select (ธีมเดียวกับ .input) ---------- */
/* Tom Select คัดลอก class "input" จาก <select> เดิมมาที่ .ts-wrapper ด้วย
   จึงต้อง reset ไม่ให้ wrapper รับสไตล์กล่องของ .input (กันกรอบซ้อนกรอบ) */
.ts-wrapper.input {
  background: transparent; border: none; border-radius: 0;
  padding: 0; box-shadow: none; width: 100%;
}
.ts-wrapper { width: 100%; }
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: .55rem;
  padding: .55rem .8rem; font-family: inherit; font-size: .95rem; color: var(--ink);
  box-shadow: none; min-height: auto; transition: border .18s, box-shadow .18s;
}
.ts-control, .ts-control input { outline: none !important; } /* กันขอบ focus สีน้ำเงินจาก browser */
.ts-wrapper.focus .ts-control {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft);
}
.ts-wrapper.single .ts-control:after { /* ลูกศร */
  border-color: var(--ink-2) transparent transparent transparent;
}
.ts-control input { color: var(--ink); font-family: inherit; font-size: .95rem; }
.ts-control input::placeholder { color: var(--ink-2); }
.ts-dropdown {
  background: var(--panel); border: 1px solid var(--line); border-radius: .6rem;
  font-family: inherit; font-size: .92rem; color: var(--ink);
  box-shadow: 0 14px 40px -10px rgba(0,0,0,.35); margin-top: .3rem; z-index: 9999;
  overflow: hidden;
}
.ts-dropdown .ts-dropdown-content { max-height: 280px; }
.ts-dropdown .option { padding: .5rem .9rem; }
.ts-dropdown .option.active { background: var(--accent-soft); color: var(--ink); }
.ts-dropdown .option.selected { font-weight: 700; color: var(--accent); }
.ts-dropdown .no-results { padding: .7rem .9rem; color: var(--ink-2); }
.ts-dropdown .highlight {
  display: inline; background: var(--accent-soft); color: inherit;
  border-radius: 2px; margin: 0;
}
.ts-dropdown-input {
  background: var(--panel-2) !important; border: none !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important; font-family: inherit !important;
  padding: .55rem .9rem !important; box-shadow: none !important;
}

/* ---------- Dialog (แทน confirm/prompt) ---------- */
.modal.dlg { max-width: 430px; text-align: center; }
.modal-bg.out { animation: fadeOut .15s ease both; }
@keyframes fadeOut { to { opacity: 0; } }
.dlg-body { padding: 1.7rem 1.6rem 1.4rem; }
.dlg-icon {
  width: 3rem; height: 3rem; margin: 0 auto .8rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
  border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.dlg-icon.danger { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
html[data-mode="dark"] .dlg-icon.danger { background: #3a1212; border-color: #7f1d1d; color: #fca5a5; }
.dlg-body h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.dlg-msg { font-size: .9rem; color: var(--ink-2); margin-bottom: 1rem; white-space: pre-line; }
.dlg-body .input { text-align: center; }
.dlg-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.dlg-actions .btn { min-width: 110px; justify-content: center; }
.btn.primary.dlg-danger { background: #dc2626; border-color: #dc2626; }
.btn.primary.dlg-danger:hover { background: #b91c1c; }

@media (max-width: 880px) {
  .sidebar { display: none; }
  .content, .topbar { padding-left: 1rem; padding-right: 1rem; }
}