/* BysCial themes — each theme only overrides design tokens. */

[data-theme="midnight"] {
  --bg: #0f1220;
  --surface: #171b2e;
  --surface-2: #20253c;
  --surface-3: #2a3050;
  --text: #e8ebf7;
  --text-2: #9aa2c0;
  --border: #272d47;
  --primary: #8b8bff;
  --primary-2: #b38bff;
  --primary-soft: rgba(139, 139, 255, .16);
  --on-primary: #0f1220;
  --topbar: rgba(19, 23, 40, .86);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

[data-theme="sunset"] {
  --bg: #fff6f0;
  --surface: #ffffff;
  --surface-2: #fff0e8;
  --surface-3: #ffe2d3;
  --text: #2d1b1b;
  --text-2: #8a6464;
  --border: #f6dfd3;
  --primary: #f0567a;
  --primary-2: #ff9a4d;
  --primary-soft: #ffe6ec;
  --topbar: rgba(255, 250, 246, .88);
}

[data-theme="ocean"] {
  --bg: #eef7fb;
  --surface: #ffffff;
  --surface-2: #e8f3f9;
  --surface-3: #d5e9f3;
  --text: #0f2a3a;
  --text-2: #557587;
  --border: #d9e9f2;
  --primary: #0e8ec2;
  --primary-2: #22c1c3;
  --primary-soft: #dcf2fb;
  --topbar: rgba(246, 252, 255, .88);
}

[data-theme="forest"] {
  --bg: #f1f6f0;
  --surface: #ffffff;
  --surface-2: #eaf2e8;
  --surface-3: #d9e8d5;
  --text: #1a2a1c;
  --text-2: #5e7461;
  --border: #dbe7d8;
  --primary: #2f8f4e;
  --primary-2: #7cb342;
  --primary-soft: #e0f1e4;
  --topbar: rgba(248, 252, 247, .88);
}

[data-theme="synthwave"] {
  --bg: #1a0b2e;
  --surface: #241040;
  --surface-2: #2f1652;
  --surface-3: #3c1d66;
  --text: #fbe9ff;
  --text-2: #c59ad9;
  --border: #3e1f68;
  --primary: #ff3cac;
  --primary-2: #2bd2ff;
  --primary-soft: rgba(255, 60, 172, .18);
  --on-primary: #12051f;
  --online: #2bff88;
  --topbar: rgba(30, 10, 52, .88);
  --shadow: 0 0 0 1px rgba(255, 60, 172, .08), 0 8px 30px rgba(43, 210, 255, .08);
  color-scheme: dark;
}
[data-theme="synthwave"] body {
  background:
    linear-gradient(180deg, transparent 60%, rgba(255, 60, 172, .08)),
    repeating-linear-gradient(90deg, rgba(43, 210, 255, .05) 0 1px, transparent 1px 60px),
    var(--bg);
  background-attachment: fixed;
}

/* Retro desktop: square corners, bevelled grey panels, classic blue title bars. */
[data-theme="retro"] {
  --bg: #008080;
  --surface: #c0c0c0;
  --surface-2: #d4d0c8;
  --surface-3: #b5b5b5;
  --text: #000000;
  --text-2: #3a3a3a;
  --border: #808080;
  --primary: #000080;
  --primary-2: #1084d0;
  --primary-soft: #c7d4ff;
  --radius: 0;
  --radius-sm: 0;
  --shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
  --topbar: #c0c0c0;
  --font: "Tahoma", "MS Sans Serif", "Noto Sans Thai", sans-serif;
}
[data-theme="retro"] .card { border: 0; }
[data-theme="retro"] .btn, [data-theme="retro"] .chip, [data-theme="retro"] .pill,
[data-theme="retro"] input, [data-theme="retro"] select, [data-theme="retro"] textarea,
[data-theme="retro"] .comment-bubble, [data-theme="retro"] .comment-input, [data-theme="retro"] .bubble,
[data-theme="retro"] .topbar-search input, [data-theme="retro"] .tag, [data-theme="retro"] .avatar img,
[data-theme="retro"] .topnav-link, [data-theme="retro"] .side-link, [data-theme="retro"] .react-picker {
  border-radius: 0 !important;
}
[data-theme="retro"] .btn { box-shadow: var(--shadow); background: var(--surface); color: #000; border: 0; }
[data-theme="retro"] .btn-primary { background: var(--surface); color: #000; font-weight: 700; }
[data-theme="retro"] .btn:active { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #ffffff; }
[data-theme="retro"] input, [data-theme="retro"] select, [data-theme="retro"] textarea {
  background: #fff; box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff; border: 0;
}
[data-theme="retro"] .topbar { box-shadow: var(--shadow); backdrop-filter: none; }
[data-theme="retro"] .brand-name { color: #000; background: none; -webkit-background-clip: initial; background-clip: initial; }
[data-theme="retro"] .card-title, [data-theme="retro"] .widget h4 {
  background: linear-gradient(90deg, #000080, #1084d0); color: #fff; margin: -16px -16px 12px; padding: 4px 8px; font-size: 14px;
}
[data-theme="retro"] .widget h4 a { color: #fff; }
[data-theme="retro"] .profile-cover, [data-theme="retro"] .user-card-cover { background: linear-gradient(90deg, #000080, #1084d0); }
[data-theme="retro"] .bubble-row.mine .bubble { background: #000080; color: #fff; }
[data-theme="retro"] .auth-body { background: #008080; }

/* ================= Manga · Anime (default) =================
   Paper-white panels with bold ink outlines, halftone dots and
   soft anime accents (sakura pink + sky blue). Gold brand. */
[data-theme="manga"] {
  --bg: #faf7f0;
  --surface: #ffffff;
  --surface-2: #f6f1e7;
  --surface-3: #ebe4d6;
  --text: #16141a;
  --text-2: #5f5a66;
  --border: #16141a;
  --primary: #ff4f8b;
  --primary-2: #3db6ff;
  --primary-soft: #ffe4ee;
  --on-primary: #ffffff;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 3px 3px 0 #16141a;
  --topbar: rgba(255, 255, 255, .94);
  --font: "Noto Sans Thai", "Mitr", system-ui, sans-serif;
}
[data-theme="manga_night"] {
  --bg: #121019;
  --surface: #1c1924;
  --surface-2: #26222f;
  --surface-3: #312c3c;
  --text: #f5f1e8;
  --text-2: #b1aabd;
  --border: #f5f1e8;
  --primary: #ff6b9e;
  --primary-2: #5cc4ff;
  --primary-soft: rgba(255, 107, 158, .16);
  --on-primary: #121019;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 3px 3px 0 #ff6b9e;
  --topbar: rgba(22, 20, 30, .94);
  --font: "Noto Sans Thai", "Mitr", system-ui, sans-serif;
  color-scheme: dark;
}
[data-theme^="manga"] body {
  background-color: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.3px);
  background-size: 16px 16px;
}
[data-theme^="manga"] .card { border: 2px solid var(--border); box-shadow: var(--shadow); }
[data-theme^="manga"] .card:hover { box-shadow: var(--shadow); }
[data-theme^="manga"] .topbar { border-bottom: 3px solid var(--border); backdrop-filter: none; }
[data-theme^="manga"] h1, [data-theme^="manga"] h2, [data-theme^="manga"] h3, [data-theme^="manga"] .page-title,
[data-theme^="manga"] .card-title, [data-theme^="manga"] .greeting, [data-theme^="manga"] .widget h4 { font-family: "Mitr", var(--font); font-weight: 600; letter-spacing: 0; }
[data-theme^="manga"] .page-title { display: inline-block; padding: 2px 14px; background: var(--surface); border: 2px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); }
[data-theme^="manga"] .btn { border: 2px solid var(--border); box-shadow: 2px 2px 0 var(--border); transition: transform .08s, box-shadow .08s; }
[data-theme^="manga"] .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--border); filter: none; }
[data-theme^="manga"] .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--border); }
[data-theme^="manga"] .btn-primary { background: var(--primary); color: var(--on-primary); }
[data-theme^="manga"] .btn-ghost { background: var(--surface); }
[data-theme^="manga"] input[type=text], [data-theme^="manga"] input[type=email], [data-theme^="manga"] input[type=password],
[data-theme^="manga"] input[type=search], [data-theme^="manga"] input[type=url], [data-theme^="manga"] input[type=number],
[data-theme^="manga"] input[type=date], [data-theme^="manga"] input[type=tel], [data-theme^="manga"] input[type=datetime-local],
[data-theme^="manga"] select, [data-theme^="manga"] textarea { border: 2px solid var(--border); }
[data-theme^="manga"] .composer-top textarea, [data-theme^="manga"] .comment-input textarea, [data-theme^="manga"] .topbar-search input { border-color: transparent; }
[data-theme^="manga"] .comment-input, [data-theme^="manga"] .topbar-search input { border: 2px solid var(--border); }
[data-theme^="manga"] .comment-bubble { border: 2px solid var(--border); border-radius: 18px 18px 18px 4px; background: var(--surface); }
[data-theme^="manga"] .bubble { border: 2px solid var(--border); }
[data-theme^="manga"] .bubble-row.mine .bubble { background: var(--primary); color: var(--on-primary); }
[data-theme^="manga"] .avatar img { border: 2px solid var(--border); }
[data-theme^="manga"] .side-link.is-active, [data-theme^="manga"] .settings-nav a.is-active, [data-theme^="manga"] .admin-nav a.is-active { border: 2px solid var(--border); background: var(--primary-soft); }
[data-theme^="manga"] .tabs a.is-active { border-bottom-width: 4px; }
[data-theme^="manga"] .profile-cover, [data-theme^="manga"] .user-card-cover, [data-theme^="manga"] .hover-cover, [data-theme^="manga"] .event-cover {
  background-color: var(--primary);
  background-image:
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,255,255,.22) 0deg 4deg, transparent 4deg 12deg),
    linear-gradient(135deg, var(--primary), var(--primary-2));
  border-bottom: 3px solid var(--border);
}
[data-theme^="manga"] .post-body.bg-sunrise, [data-theme^="manga"] .post-body.bg-ocean, [data-theme^="manga"] .post-body.bg-candy,
[data-theme^="manga"] .post-body.bg-forest, [data-theme^="manga"] .post-body.bg-night, [data-theme^="manga"] .post-body.bg-fire { border: 2px solid var(--border); font-family: "Mitr", var(--font); }
[data-theme^="manga"] .badge { border-color: var(--border); }
[data-theme^="manga"] .pill { border: 1.5px solid var(--border); }
[data-theme^="manga"] .dropdown-menu, [data-theme^="manga"] .modal-box, [data-theme^="manga"] .hover-card, [data-theme^="manga"] .search-suggest { border: 2px solid var(--border); box-shadow: 4px 4px 0 var(--border); }
[data-theme^="manga"] .announcement { border-bottom: 3px solid var(--border); background: var(--primary); }
[data-theme^="manga"] .auth-body { background-image: radial-gradient(color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 1.3px); background-size: 16px 16px; }
[data-theme^="manga"] .landing-hero h1 { font-family: "Bangers", "Mitr", sans-serif; letter-spacing: 2px; font-size: 76px; -webkit-text-stroke: 2px #5a3d00; }

/* Gold brand on every theme */
.brand-name {
  font-family: "Bangers", "Mitr", sans-serif;
  letter-spacing: 1.5px;
  font-size: 26px;
  font-weight: 400;
  background: linear-gradient(180deg, #fff2b0 0%, #f3c64c 40%, #d4a017 70%, #9c6a00 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: .6px #5a3d00;
  filter: drop-shadow(1px 1px 0 rgba(90, 61, 0, .35));
}
.landing-hero h1 {
  background: linear-gradient(180deg, #fff2b0 0%, #f3c64c 40%, #d4a017 70%, #9c6a00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}