/* ============================================================
   THEMES.CSS — ไฟล์ธีมส่วนกลาง (แยกออกมาจาก index.html)
   7 ธีม: default, sakura, retro, scrapbook, pastel, dark, noir
   ============================================================ */

/* ============================================================
   THEME 0 — DEFAULT (ขาว / เทา / ดำ ค่าตั้งต้น)
   ============================================================ */
body[data-theme="default"] {
  --bg-color: #f8f9fa;
  --card-bg: rgba(255,255,255,0.85);
  --text-main: #111111;
  --text-highlight: #000000;
  --text-muted: #555555;
  --border: rgba(0,0,0,0.08);
  --radius: 28px;
}
/* Default Click Effect */
body[data-theme="default"] button:active, 
body[data-theme="default"] .tab-btn:active, 
body[data-theme="default"] .btn-icon:active { 
  transform: scale(0.96) !important; transition: 0.1s ease; 
}
/* บังคับปุ่มให้อยู่ซ้ายบนตั้งแต่วินาทีที่เว็บโหลด */
#themeSwitcherBtn {
  position: fixed !important;
  top: 30px !important;
  left: 30px !important;
  z-index: 1001 !important;
}
/* ============================================================
   THEME 1 — SAKURA MINIMAL (ชมพูมินิมอล + Gimmick กลีบซากุระร่วง)
   ============================================================ */
body[data-theme="sakura"] {
  --bg-color: #fdf6f9;
  --card-bg: rgba(255,255,255,0.88);
  --text-main: #3d1f2e;
  --text-highlight: #d63384;
  --text-muted: #9e6b80;
  --border: rgba(214,51,132,0.15);
  --radius: 28px;
}
/* Sakura Gimmick: Falling Petals (Updated to be more visible and sway) */
@keyframes sakuraFall {
  0% { transform: translateY(-10vh) translateX(0) rotate(0deg) scale(1); opacity: 0; }
  15% { opacity: 0.9; }
  50% { transform: translateY(50vh) translateX(30px) rotate(180deg) scale(1.2); opacity: 0.9; }
  85% { opacity: 0.9; }
  100% { transform: translateY(100vh) translateX(-20px) rotate(360deg) scale(1.4); opacity: 0; }
}
body[data-theme="sakura"]::before, body[data-theme="sakura"]::after {
  content: '🌸'; position: fixed; top: -10%; font-size: 28px; z-index: -1; opacity: 0.8; animation: sakuraFall 10s linear infinite; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(214,51,132,0.4));
}
body[data-theme="sakura"]::after { left: 75%; font-size: 36px; animation: sakuraFall 14s linear infinite 3s; filter: drop-shadow(0 4px 10px rgba(214,51,132,0.5)); }

body[data-theme="sakura"] .bg-overlay { background: rgba(255,240,248,0.35); }
body[data-theme="sakura"] .nav-tabs { background: rgba(255,230,243,0.75); }
body[data-theme="sakura"] .tab-btn.active, body[data-theme="sakura"] .tab-btn:hover { background: linear-gradient(135deg,#d63384,#f368e0); color:#fff; box-shadow:0 6px 18px rgba(214,51,132,0.3); }
body[data-theme="sakura"] .btn-about { background:linear-gradient(135deg,#d63384,#f368e0); color:#fff; box-shadow:0 8px 20px rgba(214,51,132,0.25); }
body[data-theme="sakura"] .btn-about:hover { background:linear-gradient(135deg,#c2185b,#d63384); box-shadow:0 12px 25px rgba(214,51,132,0.35); }
body[data-theme="sakura"] .btn-pinned { background:#fff0f8; color:#d63384; border:1px solid rgba(214,51,132,0.3); }
body[data-theme="sakura"] .btn-pinned:hover { background:linear-gradient(135deg,#d63384,#f368e0); color:#fff; }
body[data-theme="sakura"] .adopt-card { border:1px solid rgba(214,51,132,0.12); box-shadow:0 10px 30px rgba(214,51,132,0.08); }
body[data-theme="sakura"] .adopt-card:hover { box-shadow:0 20px 40px rgba(214,51,132,0.18); transform: translateY(-5px); }
body[data-theme="sakura"] .adopt-info span { background:linear-gradient(135deg,#d63384,#f368e0); }
body[data-theme="sakura"] .status-badge { background:linear-gradient(135deg,#d63384,#f368e0); }
body[data-theme="sakura"] .profile-pic-container { box-shadow:0 10px 30px rgba(214,51,132,0.2),0 0 0 4px rgba(214,51,132,0.1); }
body[data-theme="sakura"] .admin-fab { background:linear-gradient(135deg,#d63384,#f368e0); }
body[data-theme="sakura"] .btn-icon { background:rgba(214,51,132,0.75); color:#fff; }
body[data-theme="sakura"] .btn-icon:hover { background:#d63384; }

/* Sakura Click Effect */
body[data-theme="sakura"] button:active, 
body[data-theme="sakura"] .tab-btn:active, 
body[data-theme="sakura"] .btn-icon:active { 
  transform: scale(0.92) !important; box-shadow: 0 0 10px rgba(214,51,132,0.5) !important; transition: 0.1s ease; 
}

/* ============================================================
   THEME 2 — RETRO OS / Y2K (พิกเซล 8-บิต + Gimmick Scanlines & Glitch)
   ============================================================ */
body[data-theme="retro"] {
  --bg-color: #f8f9fa;
  --card-bg: #ffffff;
  --text-main: #111111;
  --text-highlight: #111111;
  --text-muted: #555555;
  --border: #111111;
  --radius: 6px;
}
/* Retro Gimmick: CRT Scanlines */
body[data-theme="retro"]::after {
  content: " "; display: block; position: fixed; top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
  background-size: 100% 4px; z-index: 9999; pointer-events: none;
}
/* Glitch Effect on Hover */
@keyframes textGlitch {
  0% { text-shadow: 1px 1px 0px #fff; transform: translate(0); }
  20% { text-shadow: -2px 0px 0px red, 2px 0px 0px blue; transform: translate(-2px, 1px); }
  40% { text-shadow: 1px 1px 0px #fff; transform: translate(0); }
  100% { text-shadow: 1px 1px 0px #fff; transform: translate(0); }
}

body[data-theme="retro"] * { font-family:'Chakra Petch','Mitr',sans-serif !important; transition:0.15s ease !important; }
body[data-theme="retro"].animated-gradient { background-image:radial-gradient(rgba(0,0,0,0.06) 2px,transparent 2px); background-size:24px 24px; background-color:var(--bg-color); animation:none !important; }
body[data-theme="retro"] ::-webkit-scrollbar { width:14px; height:14px; border-left:2px solid #111; }
body[data-theme="retro"] ::-webkit-scrollbar-track { background:#f8f9fa; }
body[data-theme="retro"] ::-webkit-scrollbar-thumb { background:#fff; border:2px solid #111; box-shadow:inset 2px 2px 0px rgba(255,255,255,0.8); }
body[data-theme="retro"] ::-webkit-scrollbar-thumb:hover { background:#555; }
body[data-theme="retro"] input, body[data-theme="retro"] textarea, body[data-theme="retro"] select { border:2px solid #111 !important; border-radius:4px !important; box-shadow:inset 2px 2px 0px rgba(0,0,0,0.05) !important; }
body[data-theme="retro"] .bg-overlay { background:rgba(255,255,255,0.4); backdrop-filter:blur(2px); }
body[data-theme="retro"] .toast-container { background:#fff; border:2px solid #111; border-radius:6px; box-shadow:4px 4px 0px #111; backdrop-filter:none; }
body[data-theme="retro"] .btn-icon { background:#fff; color:#111; border:2px solid #111; border-radius:6px; box-shadow:3px 3px 0px #111; backdrop-filter:none; }
body[data-theme="retro"] .btn-icon:hover { background:#111; color:#fff; transform:translate(2px,2px); box-shadow:1px 1px 0px #111; }
body[data-theme="retro"] .cover-photo { border-bottom:4px solid #111; box-shadow:0 4px 0px rgba(0,0,0,0.05); }
body[data-theme="retro"] .cover-photo img { border-bottom-left-radius:0; border-bottom-right-radius:0; }
body[data-theme="retro"] .profile-pic-container { border-radius:12px; border:2px solid #111; box-shadow:4px 4px 0px #111; }
body[data-theme="retro"] .profile-pic { border-radius:8px; border:4px solid #fff; }
body[data-theme="retro"] .profile-info h1 { text-shadow:1px 1px 0px #fff; }
body[data-theme="retro"] .profile-info h1:hover { animation: textGlitch 0.3s steps(2) infinite; cursor: crosshair; }
body[data-theme="retro"] .edit-badge { border-radius:6px; border:2px solid #111; box-shadow:2px 2px 0px #111; background:#fff; color:#111; }
body[data-theme="retro"] .edit-badge:hover { transform:translate(1px,1px); box-shadow:1px 1px 0px #111; background:#eee; }
body[data-theme="retro"] .btn-about { background:#fff; color:#111; border:2px solid #111; border-radius:6px; box-shadow:4px 4px 0px #111; }
body[data-theme="retro"] .btn-about:hover { background:#111; color:#fff; transform:translate(2px,2px); box-shadow:2px 2px 0px #111; }
body[data-theme="retro"] .btn-pinned { background:#fff5fb; color:#555; border:2px solid #ccc; box-shadow:4px 4px 0px #ccc; }
body[data-theme="retro"] .btn-pinned:hover { background:#111; color:#fff; border-color:#111; box-shadow:2px 2px 0px #111; }
body[data-theme="retro"] .about-user-content, body[data-theme="retro"] .char-info-section, body[data-theme="retro"] .feed-post, body[data-theme="retro"] .box { background:#fff !important; border:2px solid #111 !important; border-radius:8px !important; box-shadow:6px 6px 0px #111 !important; position:relative; }
body[data-theme="retro"] .about-user-content { padding-top:45px; }
body[data-theme="retro"] .about-user-content::before { content:"♥ PROFILE_INFO.DAT"; position:absolute; top:0; left:0; right:0; height:26px; background:#111; color:#fff; font-family:'VT323','Courier New',monospace; font-size:15px; line-height:26px; padding:0 10px; border-bottom:2px solid #111; border-radius:6px 6px 0 0; pointer-events:none; }
body[data-theme="retro"] .nav-tabs { background:#f8f9fa; border-bottom:2px dashed #111; border-radius:0; backdrop-filter:none; padding-bottom:0; align-items:flex-end; }
body[data-theme="retro"] .tab-btn { border-radius:8px 8px 0 0 !important; background:#e9ecef; border:2px solid #111; border-bottom:none; color:#555; margin-bottom:-2px; z-index:1; box-shadow:none; }
body[data-theme="retro"] .tab-btn.active, body[data-theme="retro"] .tab-btn:hover { background:#fff !important; color:#111 !important; border-bottom:2px solid #fff !important; padding-bottom:12px; box-shadow:none; }
body[data-theme="retro"] .adopt-card { background:#fff; border:2px solid #111; border-radius:8px; box-shadow:6px 6px 0px #111; padding:32px 6px 6px; overflow:hidden; }
body[data-theme="retro"] .adopt-card::before { content:"♥ Char.exe"; position:absolute; top:0; left:0; right:0; height:26px; background:#111; color:#fff; font-family:'VT323','Courier New',monospace; font-size:14px; line-height:26px; padding:0 10px; border-bottom:2px solid #111; z-index:1; }
/* อัปเดตกรอบรูปทรงเป็นโบว์น่ารัก Y2K */
body[data-theme="retro"] .adopt-card::after { content:"— 🎀 X"; position:absolute; top:0; right:10px; height:26px; color:#fff; font-family:'VT323','Courier New',monospace; font-size:12px; line-height:26px; letter-spacing:2px; pointer-events:none; z-index:2; }
body[data-theme="retro"] .adopt-card:hover { transform:translate(-2px,-2px); box-shadow:8px 8px 0px #111; }
body[data-theme="retro"] .adopt-cover { border:2px solid #111; border-radius:4px; }
body[data-theme="retro"] .adopt-info span { border:2px solid #111; border-radius:4px; box-shadow:2px 2px 0px #111; }
body[data-theme="retro"] .pinned-card { border:2px solid #111; border-radius:6px; box-shadow:4px 4px 0px #111; padding:4px; }
body[data-theme="retro"] .pinned-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0px #111; }
body[data-theme="retro"] .pinned-card img { border-bottom:2px solid #111; border-radius:2px; }
body[data-theme="retro"] .btn-banner-toggle { background:#fff; color:#111; border:2px solid #111; border-radius:6px; box-shadow:2px 2px 0px #111; }
body[data-theme="retro"] .btn-banner-toggle:hover { transform:translate(1px,1px); box-shadow:1px 1px 0px #111; }
body[data-theme="retro"] .btn-banner-toggle.active { background:#111; color:#fff; }
body[data-theme="retro"] .search-input { border:2px solid #111 !important; border-radius:6px !important; box-shadow:4px 4px 0px rgba(0,0,0,0.05) !important; }
body[data-theme="retro"] .char-info-section { padding-top:40px; }
body[data-theme="retro"] .char-info-section::before { content:"♥ OC_DATABASE.EXE"; position:absolute; top:0; left:0; right:0; height:28px; background:#111; color:#fff; font-family:'VT323','Courier New',monospace; font-size:15px; line-height:28px; padding:0 12px; border-bottom:2px solid #111; border-radius:6px 6px 0 0; pointer-events:none; }
body[data-theme="retro"] .admin-fab { background:#111; border:2px solid #fff; box-shadow:4px 4px 0px #555; border-radius:6px; }
body[data-theme="retro"] .btn-submit { border-radius:6px; box-shadow:4px 4px 0px #111; }


/* ── FIX: force text dark inside retro white boxes ──────── */
body[data-theme="retro"] .about-user-content *,
body[data-theme="retro"] .char-info-section *,
body[data-theme="retro"] .feed-post *,
body[data-theme="retro"] .box * {
  color: #111111 !important;
}
body[data-theme="retro"] .about-user-content::before { color: #fff !important; }

/* Retro Click Effect */
body[data-theme="retro"] button:active, 
body[data-theme="retro"] .tab-btn:active, 
body[data-theme="retro"] .btn-icon:active { 
  transform: translate(4px, 4px) !important; box-shadow: 0px 0px 0px #111 !important; transition: 0.05s ease; 
}

/* ============================================================
   THEME 3 — SCRAPBOOK / JOURNAL (สมุดโน้ต + Gimmick Wiggle)
   ============================================================ */
body[data-theme="scrapbook"] {
  --bg-color: #f6f4f0;
  --card-bg: #ffffff;
  --text-main: #2d3436;
  --text-highlight: #0984e3;
  --text-muted: #636e72;
  --border: #2d3436;
  --radius: 12px;
}
/* Scrapbook Gimmick: Wiggle Effect */
@keyframes wiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

body[data-theme="scrapbook"].animated-gradient { background-image:radial-gradient(rgba(0,0,0,0.08) 1.5px,transparent 1.5px); background-size:20px 20px; background-color:var(--bg-color); animation:none !important; }
body[data-theme="scrapbook"] ::-webkit-scrollbar { width:12px; }
body[data-theme="scrapbook"] ::-webkit-scrollbar-thumb { background:#dfe6e9; border-radius:10px; border:3px solid var(--bg-color); }
body[data-theme="scrapbook"] ::-webkit-scrollbar-thumb:hover { background:#b2bec3; }
body[data-theme="scrapbook"] .bg-overlay { background:rgba(246,244,240,0.2); backdrop-filter:blur(3px); }
body[data-theme="scrapbook"] input, body[data-theme="scrapbook"] textarea, body[data-theme="scrapbook"] select { border:2px solid #2d3436 !important; border-radius:8px !important; background:#fff; box-shadow:2px 2px 0px rgba(0,0,0,0.05) !important; }
body[data-theme="scrapbook"] .btn-icon { background:rgba(45,52,54,0.75); color:#fff; border-radius:20px; border:none; box-shadow:3px 3px 0px rgba(0,0,0,0.15); }
body[data-theme="scrapbook"] .btn-icon:hover { background:#2d3436; transform:translateY(-2px); }
body[data-theme="scrapbook"] .cover-photo { border-bottom:3px solid #2d3436; }
body[data-theme="scrapbook"] .cover-photo img { border-bottom-left-radius:0; border-bottom-right-radius:0; }
body[data-theme="scrapbook"] .profile-pic-container { border:4px solid #fff; box-shadow:4px 4px 0px rgba(0,0,0,0.12),0 0 0 2px #2d3436; border-radius:50%; }
body[data-theme="scrapbook"] .btn-about { background:#2d3436; color:#fff; border:2px solid #2d3436; box-shadow:4px 4px 0px rgba(0,0,0,0.15); border-radius:20px; }
body[data-theme="scrapbook"] .btn-about:hover { background:#0984e3; border-color:#0984e3; transform:translateY(-2px); box-shadow:5px 5px 0px rgba(9,132,227,0.3); }
body[data-theme="scrapbook"] .btn-pinned { background:#fff0f6; color:#d63384; border:2px solid #f2bedb; box-shadow:3px 3px 0px rgba(214,51,132,0.2); }
body[data-theme="scrapbook"] .btn-pinned:hover { background:#f368e0; color:#fff; border-color:#f368e0; }
body[data-theme="scrapbook"] .about-user-content, body[data-theme="scrapbook"] .char-info-section, body[data-theme="scrapbook"] .feed-post, body[data-theme="scrapbook"] .box { background:#fff !important; border:2px solid #2d3436 !important; border-radius:12px !important; box-shadow:6px 6px 0px rgba(0,0,0,0.08) !important; position:relative; }
body[data-theme="scrapbook"] .about-user-content { padding-top:40px; overflow:visible; }
body[data-theme="scrapbook"] .about-user-content::before { content:''; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg); width:100px; height:28px; background:rgba(129,236,236,0.85); border:1px solid rgba(0,0,0,0.05); box-shadow:1px 1px 3px rgba(0,0,0,0.05); z-index:10; }
body[data-theme="scrapbook"] .char-info-section { overflow:visible; }
body[data-theme="scrapbook"] .char-info-section::before { content:''; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-1deg); width:120px; height:30px; background:rgba(85,239,196,0.85); border:1px solid rgba(0,0,0,0.05); box-shadow:1px 1px 3px rgba(0,0,0,0.05); z-index:10; }
body[data-theme="scrapbook"] .adopt-card { background:#fff; border:2px solid #2d3436; border-radius:16px; box-shadow:5px 5px 0px rgba(0,0,0,0.08); padding:10px; overflow:visible; transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
body[data-theme="scrapbook"] .adopt-card::before { content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(-3deg); width:60px; height:20px; background:rgba(250,177,160,0.85); border-radius:2px; box-shadow:1px 1px 2px rgba(0,0,0,0.05); z-index:10; }
body[data-theme="scrapbook"] .adopt-card:nth-child(even)::before { background:rgba(129,236,236,0.85); transform:translateX(-50%) rotate(2deg); }
body[data-theme="scrapbook"] .adopt-card:nth-child(3n)::before { background:rgba(162,155,254,0.85); transform:translateX(-50%) rotate(-1deg); }
body[data-theme="scrapbook"] .adopt-card:hover { transform:translateY(-8px) rotate(1deg); box-shadow:8px 10px 0px rgba(0,0,0,0.1); animation: wiggle 0.5s ease-in-out infinite; }
body[data-theme="scrapbook"] .adopt-cover { border:2px solid #2d3436; border-radius:8px; }
body[data-theme="scrapbook"] .adopt-info span { border:2px solid #2d3436; border-radius:8px; box-shadow:2px 2px 0px rgba(0,0,0,0.08); background:#fff0f6; padding:4px 10px; font-weight:600; color:#2d3436; }
body[data-theme="scrapbook"] .nav-tabs { background:rgba(246,244,240,0.9); border-bottom:2px dashed #2d3436; border-radius:12px 12px 0 0; backdrop-filter:none; }
body[data-theme="scrapbook"] .tab-btn { border-radius:10px 10px 0 0 !important; background:#ece9e4; border:2px solid #2d3436; border-bottom:none; color:#636e72; box-shadow:none; }
body[data-theme="scrapbook"] .tab-btn.active, body[data-theme="scrapbook"] .tab-btn:hover { background:#fff !important; color:#2d3436 !important; border-bottom:2px solid #fff !important; }
body[data-theme="scrapbook"] .pinned-card { border:2px solid #2d3436; border-radius:16px; box-shadow:4px 4px 0px rgba(0,0,0,0.08); padding:6px; transition:0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
body[data-theme="scrapbook"] .pinned-card:hover { transform:translateY(-5px) rotate(2deg); animation: wiggle 0.5s ease-in-out infinite; }
body[data-theme="scrapbook"] .pinned-card img { border-radius:10px; border:2px solid #2d3436; }
body[data-theme="scrapbook"] .watermark-wrapper { border-radius:12px; overflow:hidden; border:2px solid #2d3436; box-shadow:4px 4px 0px rgba(0,0,0,0.08); background:#fff; padding:6px; transform:rotate(-2deg); }
body[data-theme="scrapbook"] .admin-fab { background:#2d3436; border-radius:12px; }
body[data-theme="scrapbook"] .status-badge { background:#55efc4; color:#00b894; border:2px solid #00b894; box-shadow:2px 2px 0px rgba(0,184,148,0.3); }

/* Scrapbook Click Effect */
body[data-theme="scrapbook"] button:active, 
body[data-theme="scrapbook"] .tab-btn:active, 
body[data-theme="scrapbook"] .btn-icon:active { 
  transform: scale(0.92) rotate(-3deg) !important; transition: 0.1s cubic-bezier(0.175,0.885,0.32,1.275); 
}

/* ============================================================
   THEME 4 — PASTEL DESSERT (ขนมหวาน + Gimmick เมฆ & วิ้งๆ)
   ============================================================ */
body[data-theme="pastel"] {
  --bg-color: #fff5f7;
  --card-bg: rgba(255,255,255,0.92);
  --text-main: #5d4037;
  --text-highlight: #ff8eaa;
  --text-muted: #a1887f;
  --border: rgba(255,182,193,0.5);
  --radius: 35px;
}
/* Pastel Gimmick: Floating Clouds & Sparkles */
@keyframes cloudFloat {
  0% { transform: translateX(-10vw); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateX(100vw); opacity: 0; }
}
@keyframes sparklePop {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.5) rotate(15deg); opacity: 0.7; }
}
body[data-theme="pastel"]::before { content: '☁️'; position: fixed; top: 15%; left: -10%; font-size: 80px; z-index: -1; animation: cloudFloat 30s linear infinite; pointer-events: none; }
body[data-theme="pastel"]::after { content: '☁️'; position: fixed; top: 40%; left: -10%; font-size: 120px; z-index: -1; animation: cloudFloat 45s linear infinite 10s; pointer-events: none; }

body[data-theme="pastel"].animated-gradient { background:linear-gradient(-45deg,#fff5f7,#ffefeb,#f2fcf5,#f3f0ff); background-size:400% 400%; animation:gradientBG 15s ease infinite; }
body[data-theme="pastel"] .spinner { border:5px solid rgba(255,182,193,0.3); border-top:5px solid #ff8eaa; }
body[data-theme="pastel"] .bg-overlay { background:rgba(255,245,247,0.3); backdrop-filter:blur(4px); }
body[data-theme="pastel"] .toast-container { background:rgba(255,255,255,0.95); border:1px solid rgba(255,182,193,0.4); box-shadow:0 15px 35px rgba(255,182,193,0.2); }
body[data-theme="pastel"] .btn-icon { background:rgba(255,142,170,0.7); color:#fff; border-radius:30px; }
body[data-theme="pastel"] .btn-icon:hover { background:#ff8eaa; }
body[data-theme="pastel"] .profile-pic-container { box-shadow:0 10px 30px rgba(255,182,193,0.3),0 0 0 4px rgba(255,182,193,0.2); }
body[data-theme="pastel"] .btn-about { background:linear-gradient(135deg,#ff8eaa,#ffb3c6); color:#fff; box-shadow:0 8px 20px rgba(255,142,170,0.3); border-radius:35px; position: relative; }
body[data-theme="pastel"] .btn-about:hover { background:linear-gradient(135deg,#ff6b9d,#ff8eaa); box-shadow:0 12px 25px rgba(255,107,157,0.35); }
body[data-theme="pastel"] .btn-about:hover::after { content: '✨'; position: absolute; top: -10px; right: -10px; animation: sparklePop 0.8s infinite; }
body[data-theme="pastel"] .btn-pinned { background:linear-gradient(135deg,#ffecd2,#fcb69f); color:#8d4f2e; border:none; }
body[data-theme="pastel"] .btn-pinned:hover { background:linear-gradient(135deg,#fcb69f,#ff9a9e); color:#fff; }
body[data-theme="pastel"] .about-user-content { border:2px dashed rgba(255,182,193,0.5) !important; box-shadow:0 15px 35px rgba(255,182,193,0.15) !important; }
body[data-theme="pastel"] .adopt-card { border:2px solid rgba(255,182,193,0.25); box-shadow:0 10px 30px rgba(255,182,193,0.2); }
body[data-theme="pastel"] .adopt-card:hover { box-shadow:0 20px 40px rgba(255,182,193,0.3); }
body[data-theme="pastel"] .adopt-info span { background:linear-gradient(135deg,#ff8eaa,#ffb3c6); color:#fff; border:none; border-radius:15px; }
body[data-theme="pastel"] .nav-tabs { background:rgba(255,240,245,0.8); border-radius:35px; }
body[data-theme="pastel"] .tab-btn.active, body[data-theme="pastel"] .tab-btn:hover { background:linear-gradient(135deg,#ff8eaa,#ffb3c6); color:#fff; box-shadow:0 6px 16px rgba(255,142,170,0.35); }
body[data-theme="pastel"] .status-badge { background:linear-gradient(135deg,#ff8eaa,#ffb3c6); box-shadow:0 4px 12px rgba(255,142,170,0.4); }
body[data-theme="pastel"] .pinned-card { border:2px dashed rgba(255,182,193,0.4); box-shadow:0 8px 20px rgba(255,182,193,0.15); border-radius:30px; }
body[data-theme="pastel"] .char-info-section { border:2px dashed rgba(255,182,193,0.4) !important; box-shadow:0 10px 30px rgba(255,182,193,0.1) !important; }
body[data-theme="pastel"] .feed-post { border:2px dashed rgba(255,182,193,0.35) !important; box-shadow:0 10px 25px rgba(255,182,193,0.1) !important; }
body[data-theme="pastel"] .box { border:2px dashed rgba(255,182,193,0.5) !important; }
body[data-theme="pastel"] .box input, body[data-theme="pastel"] .box textarea, body[data-theme="pastel"] .box select { border:2px dashed rgba(255,182,193,0.5) !important; border-radius:20px !important; color:#5d4037; }
body[data-theme="pastel"] .admin-fab { background:linear-gradient(135deg,#ff8eaa,#ffb3c6); }
body[data-theme="pastel"] #mainProfileAudioBtn.playing { background:#ff6b81 !important; }

/* Pastel Click Effect */
body[data-theme="pastel"] button:active, 
body[data-theme="pastel"] .tab-btn:active, 
body[data-theme="pastel"] .btn-icon:active { 
  transform: scale(0.85) !important; opacity: 0.8; transition: 0.1s ease; 
}

/* ============================================================
   THEME 5 — DARK NEON / MUSIC APP (ปรับปรุงความคมชัดให้อ่านง่าย)
   ============================================================ */
body[data-theme="dark"] {
  --bg-color: #030305;
  --card-bg: rgba(20, 20, 28, 0.95);
  --text-main: #ffffff !important;
  --text-highlight: #ff0055;
  --text-muted: #e0e0e0 !important;
  --border: rgba(255, 255, 255, 0.25);
  --radius: 24px;
  color-scheme: dark;
}

/* บังคับสีตัวอักษรทุกประเภทให้สว่างชัดเจน */
body[data-theme="dark"] p, 
body[data-theme="dark"] div, 
body[data-theme="dark"] span, 
body[data-theme="dark"] h1, 
body[data-theme="dark"] h2, 
body[data-theme="dark"] h3, 
body[data-theme="dark"] h4, 
body[data-theme="dark"] a {
  color: var(--text-main) !important;
}

/* แก้ไขบัคฟอนต์กลืนเป็นสีขาว เมื่อปุ่ม/แท็บด้านหลังถูกปรับให้สว่าง */
body[data-theme="dark"] .tab-btn.active,
body[data-theme="dark"] .tab-btn.active p,
body[data-theme="dark"] .tab-btn.active div,
body[data-theme="dark"] .tab-btn.active span,
body[data-theme="dark"] .tab-btn.active h1,
body[data-theme="dark"] .tab-btn.active h2,
body[data-theme="dark"] .tab-btn.active h3,
body[data-theme="dark"] .tab-btn.active h4,
body[data-theme="dark"] .sub-tab-btn.active,
body[data-theme="dark"] .sub-tab-btn.active span {
  color: #030305 !important;
}

/* ── FIX: กล่อง input / textarea / select ให้เห็นกรอบชัดเจน ──────── */
body[data-theme="dark"] input:not(.search-input):not(.box input),
body[data-theme="dark"] textarea:not(.box textarea),
body[data-theme="dark"] select {
  background: rgba(10,10,18,0.95) !important;
  color: #ffffff !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 0 1px rgba(255,0,85,0.15), inset 0 1px 4px rgba(0,0,0,0.6) !important;
}
body[data-theme="dark"] input:not(.search-input):not(.box input):focus,
body[data-theme="dark"] textarea:not(.box textarea):focus {
  border-color: #ff0055 !important;
  box-shadow: 0 0 0 3px rgba(255,0,85,0.3), inset 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* ── FIX: ปุ่มย้อนกลับ / back-button / tag-box สีกลืน → ให้เห็นชัด ─ */
body[data-theme="dark"] .back-btn,
body[data-theme="dark"] [class*="back"],
body[data-theme="dark"] .tag,
body[data-theme="dark"] .tag-item,
body[data-theme="dark"] .badge,
body[data-theme="dark"] .chip {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 8px rgba(255,0,85,0.15) !important;
}
body[data-theme="dark"] .back-btn:hover,
body[data-theme="dark"] [class*="back"]:hover,
body[data-theme="dark"] .tag:hover,
body[data-theme="dark"] .tag-item:hover {
  background: rgba(255,0,85,0.2) !important;
  border-color: #ff0055 !important;
  box-shadow: 0 0 12px rgba(255,0,85,0.4) !important;
}

/* ── FIX: white กล่อง tag/info box เดิมที่มองไม่เห็น ─────────────── */
body[data-theme="dark"] .info-box,
body[data-theme="dark"] .note-box,
body[data-theme="dark"] .tag-box,
body[data-theme="dark"] .char-tag,
body[data-theme="dark"] .oc-tag {
  background: rgba(20,20,30,0.9) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 10px !important;
}

body[data-theme="dark"] .text-muted {
  color: var(--text-muted) !important;
}

/* เก็บลูกเล่นเดิมไว้ (Equalizer & Animation) */
@keyframes equalizerPulse { 0% { height: 10px; } 50% { height: 60px; } 100% { height: 10px; } }
body[data-theme="dark"]::after { content: ''; position: fixed; bottom: 0; left: 10%; width: 30px; height: 10px; background: #ff0055; opacity: 0.15; box-shadow: 40px 0 0 #7000ff, 80px 0 0 #ff0055, 120px 0 0 #7000ff, 160px 0 0 #ff0055, 200px 0 0 #7000ff; animation: equalizerPulse 1.2s ease-in-out infinite alternate; z-index: -2; pointer-events: none; }
body[data-theme="dark"]::before { content:''; position:fixed; border-radius:50%; filter:blur(120px); z-index:-3; opacity:0.35; pointer-events:none; width:50vw; height:50vw; background:#ff0055; top:-10vw; left:-10vw; animation:floatAmbient 12s ease-in-out infinite alternate; }
@keyframes floatAmbient { 0%{transform:translate(0,0) scale(1);} 100%{transform:translate(50px,50px) scale(1.1);} }

body[data-theme="dark"] .bg-overlay { background:rgba(3,3,5,0.6); backdrop-filter:none; }
body[data-theme="dark"] .spinner { border:5px solid rgba(255,255,255,0.2); border-top:5px solid #ff0055; }

/* โทสต์ข้อความ */
body[data-theme="dark"] .toast-container { background:rgba(40,40,45,1) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,0.3); backdrop-filter:blur(20px); box-shadow:0 15px 40px rgba(0,0,0,0.9); }

/* ปุ่มไอคอน */
body[data-theme="dark"] .btn-icon { background:rgba(255,255,255,0.1); color:#fff; border-radius:30px; border:1px solid rgba(255,255,255,0.2); backdrop-filter:blur(10px); }
body[data-theme="dark"] .btn-icon:hover { background:#ff0055; border-color:#ff0055; box-shadow:0 5px 15px rgba(255,0,85,0.6); transform:translateY(-2px); }

/* โปรไฟล์ - Gimmick แผ่นเสียง (Vinyl Record) */
body[data-theme="dark"] .cover-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 40%,#030305 100%); pointer-events:none; }
body[data-theme="dark"] .profile-pic-container { background: repeating-radial-gradient(#111, #111 4px, #222 5px, #222 8px); border-radius:50%; box-shadow:0 0 0 4px #050507,0 15px 35px rgba(0,0,0,0.9); }
body[data-theme="dark"] .profile-pic { border:12px solid #000; border-radius:50%; box-shadow: inset 0 0 10px rgba(255,255,255,0.2); }
body[data-theme="dark"] .profile-pic-container:hover .profile-pic { transform:scale(1.05) rotate(360deg); transition:transform 2s linear; }
body[data-theme="dark"] .profile-info h1 { color:#fff; letter-spacing:1px; text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

/* ปุ่ม About / Pinned */
body[data-theme="dark"] .btn-about { background:linear-gradient(135deg,#ff0055,#7000ff); color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:30px; box-shadow:0 8px 25px rgba(255,0,85,0.4); }
body[data-theme="dark"] .btn-about:hover { box-shadow:0 12px 30px rgba(255,0,85,0.7); transform:translateY(-3px); border-color:#fff; }
body[data-theme="dark"] .btn-pinned { background:rgba(112,0,255,0.4); color:#fff; border:1px solid rgba(192,132,252,0.6); box-shadow: 0 4px 15px rgba(112,0,255,0.3); }
body[data-theme="dark"] .btn-pinned:hover { background:#7000ff; color:#fff; border-color:#fff; }

/* กล่องเนื้อหาและ Modal */
body[data-theme="dark"] .about-user-content, body[data-theme="dark"] .char-info-section, body[data-theme="dark"] .feed-post { background:var(--card-bg) !important; backdrop-filter:blur(25px); border:1px solid rgba(255,255,255,0.2) !important; box-shadow:0 15px 40px rgba(0,0,0,0.8) !important; }
body[data-theme="dark"] .box { background:#15151a !important; border:1px solid rgba(255,255,255,0.25) !important; box-shadow:0 20px 50px rgba(0,0,0,0.95) !important; }
body[data-theme="dark"] .box input, body[data-theme="dark"] .box textarea, body[data-theme="dark"] .box select { background:rgba(0,0,0,0.8) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.3) !important; border-radius:12px !important; }
body[data-theme="dark"] .box input:focus, body[data-theme="dark"] .box textarea:focus { background:rgba(0,0,0,0.9) !important; border-color:#ff0055 !important; box-shadow:0 0 0 3px rgba(255,0,85,0.4) !important; }
body[data-theme="dark"] .box label { color:#fff; font-weight: 600; }
body[data-theme="dark"] .box-close { background:rgba(255,255,255,0.1); color:#fff; border: 1px solid rgba(255,255,255,0.2); }
body[data-theme="dark"] .box-close:hover { background:#ff0055; border-color:#ff0055; }
body[data-theme="dark"] .box h3, body[data-theme="dark"] .box h4 { color:#fff; }
body[data-theme="dark"] hr { border-color:rgba(255,255,255,0.2); }

/* Tabs */
body[data-theme="dark"] .nav-tabs { background:rgba(20,20,25,0.95); backdrop-filter:blur(20px); border-radius:30px; border:1px solid rgba(255,255,255,0.2); box-shadow:0 15px 30px rgba(0,0,0,0.8); }
body[data-theme="dark"] .tab-btn { color:#d5d5e5; border:1px solid transparent; }
body[data-theme="dark"] .tab-btn.active { background:#fff; color:#030305; box-shadow:0 4px 15px rgba(255,255,255,0.3); font-weight: bold; }
body[data-theme="dark"] .tab-btn:hover:not(.active) { background:rgba(255,255,255,0.15); color:#fff; }

/* การ์ดตัวละคร */
body[data-theme="dark"] .adopt-card { background:var(--card-bg); backdrop-filter:blur(15px); border-radius:18px; border:1px solid rgba(255,255,255,0.2); box-shadow:0 10px 30px rgba(0,0,0,0.8); overflow:hidden; }
body[data-theme="dark"] .adopt-card::before { content:'\f04b'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; top:35%; left:50%; transform:translate(-50%,-50%) scale(0.5); background:#ff0055; color:#fff; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; padding-left:5px; opacity:0; transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); z-index:5; box-shadow:0 0 20px rgba(255,0,85,0.8); }
body[data-theme="dark"] .adopt-card:hover::before { opacity:1; transform:translate(-50%,-50%) scale(1); }
body[data-theme="dark"] .adopt-card:hover { box-shadow:0 20px 50px rgba(255,0,85,0.6); border-color:rgba(255,0,85,0.6); transform:translateY(-8px); }
body[data-theme="dark"] .adopt-info h3 { color:#fff; text-shadow: 0 2px 5px rgba(0,0,0,0.8); }
body[data-theme="dark"] .adopt-info span { background:linear-gradient(45deg,#ff0055,#ff4785); color:#fff !important; border-radius:8px; font-weight: bold; }

/* ค้นหา */
body[data-theme="dark"] .search-input { background:rgba(10,10,15,0.9) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.3) !important; }
body[data-theme="dark"] .search-input:focus { border-color:#ff0055 !important; box-shadow: 0 0 15px rgba(255,0,85,0.5) !important; }
body[data-theme="dark"] .search-input::placeholder { color:#aaa; }

/* สถานะ & อื่นๆ */
body[data-theme="dark"] .status-badge { background:linear-gradient(135deg,#ff0055,#7000ff); box-shadow:0 4px 12px rgba(255,0,85,0.5); }
body[data-theme="dark"] .pinned-card { background:rgba(26,26,32,0.95); border:1px solid rgba(255,255,255,0.2); border-radius:18px; }
body[data-theme="dark"] .pinned-card-info { background:linear-gradient(to top,rgba(0,0,0,0.95),transparent); color:#fff; position:absolute; bottom:0; left:0; right:0; padding-top:40px; text-shadow: 0 2px 4px #000; }
body[data-theme="dark"] .admin-fab { background:linear-gradient(135deg,#ff0055,#7000ff); box-shadow:0 10px 25px rgba(255,0,85,0.6); border: 2px solid rgba(255,255,255,0.2); }
body[data-theme="dark"] .btn-submit { background:linear-gradient(135deg,#ff0055,#7000ff); border-radius:12px; border: 1px solid rgba(255,255,255,0.2); }
body[data-theme="dark"] .btn-submit:hover { box-shadow:0 10px 25px rgba(255,0,85,0.8); border-color: #fff; }
body[data-theme="dark"] .file-preview-item { background:rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.2); color:#fff; }
body[data-theme="dark"] .sub-tab-btn { background:rgba(255,255,255,0.1); color:#d5d5e5; border:1px solid rgba(255,255,255,0.2); }
body[data-theme="dark"] .sub-tab-btn:hover { background:rgba(255,255,255,0.2); color:#fff; }
body[data-theme="dark"] .sub-tab-btn.active { background:rgba(255,0,85,0.3); color:#fff; border-color:#ff0055; text-shadow: 0 0 5px #ff0055; }

/* Gimmick: Pulse Glow on Play Buttons */
@keyframes neonPulseGlow {
  0% { box-shadow: 0 0 10px rgba(255,0,85,0.5); }
  50% { box-shadow: 0 0 30px rgba(255,0,85,1); }
  100% { box-shadow: 0 0 10px rgba(255,0,85,0.5); }
}
body[data-theme="dark"] #mainProfileAudioBtn.playing { background:#ff0055 !important; border-color:#fff !important; animation: neonPulseGlow 1.5s infinite alternate !important; }
body[data-theme="dark"] #mainProfileAudioBtn.playing i { animation:beatPulse 1s infinite alternate; }

/* Dark Neon Click Effect */
body[data-theme="dark"] button:active, 
body[data-theme="dark"] .tab-btn:active, 
body[data-theme="dark"] .btn-icon:active { 
  transform: scale(0.95); box-shadow: 0 0 30px #ff0055 !important; transition: 0.1s; 
}

/* ── [เพิ่มใหม่] Feed header: author info สำหรับ dark theme ─── */
body[data-theme="dark"] .feed-info span { color: #e0e0e0 !important; }
body[data-theme="dark"] .feed-avatar {
  border: 2px solid rgba(255,0,85,0.4) !important;
  box-shadow: 0 0 8px rgba(255,0,85,0.2);
}
/* ── [เพิ่มใหม่] Author select dropdown override สำหรับ dark ─ */
body[data-theme="dark"] #newPostAuthorType,
body[data-theme="dark"] #newPostCharId {
  background: rgba(0,0,0,0.8) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 12px !important;
}

/* ============================================================
   THEME 6 — NOIR / CLASSIFIED (หนังสือพิมพ์สยองขวัญ + Gimmick Film Grain & Flicker)
   ============================================================ */
body[data-theme="noir"] {
  --bg-color: #121212; 
  --card-bg: #e8e3d3; 
  --text-main: #1a1a1a;
  --text-highlight: #990000; 
  --text-muted: #555555;
  --border: #111111;
  --radius: 0px; 
}
/* Noir Gimmick: Film Grain Noise */
@keyframes filmNoise {
  0%, 100% { background-position: 0 0; }
  10% { background-position: -5% -10%; }
  20% { background-position: -15% 5%; }
  30% { background-position: 7% -25%; }
  40% { background-position: 20% 25%; }
  50% { background-position: -25% 10%; }
  60% { background-position: 15% 5%; }
  70% { background-position: 0% 15%; }
  80% { background-position: 25% 35%; }
  90% { background-position: -10% 10%; }
}
body[data-theme="noir"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.12"/%3E%3C/svg%3E');
  animation: filmNoise 0.3s steps(2) infinite;
}
/* Noir Gimmick: Dying Lightbulb Flicker */
@keyframes lightFlicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { opacity: 1; }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% { opacity: 0.4; text-shadow: none; }
}

body[data-theme="noir"] { font-family: 'Georgia', 'Times New Roman', serif !important; }
body[data-theme="noir"] h1, body[data-theme="noir"] h2, body[data-theme="noir"] h3, body[data-theme="noir"] h4, body[data-theme="noir"] .id-item span, body[data-theme="noir"] .tab-btn {
  font-family: 'Special Elite', 'Courier New', monospace !important; text-transform: uppercase;
}

body[data-theme="noir"] .bg-overlay { background:rgba(0,0,0,0.6); backdrop-filter:grayscale(60%) sepia(20%); }
body[data-theme="noir"] .spinner { border:2px solid #333; border-top:5px solid #990000; border-radius:0; }
body[data-theme="noir"]::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0.1; background-image:url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E'); }
body[data-theme="noir"].animated-gradient { background:#121212 !important; animation:none !important; }

body[data-theme="noir"] button { border:2px solid #111 !important; font-weight:bold; background:#e8e3d3; box-shadow:3px 3px 0px #111; border-radius:0 !important; font-family: 'Special Elite', monospace !important; }
body[data-theme="noir"] button:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0px #990000; background:#111 !important; color:#e8e3d3 !important; }
body[data-theme="noir"] input, body[data-theme="noir"] textarea, body[data-theme="noir"] select { background:#e8e3d3 !important; color:#111 !important; border:2px solid #111 !important; border-radius:0 !important; box-shadow:inset 2px 2px 5px rgba(0,0,0,0.1), 3px 3px 0px #111 !important; font-family: 'Georgia', serif !important; }
body[data-theme="noir"] .btn-icon { background:#e8e3d3 !important; color:#111 !important; border-radius:0 !important; border:2px solid #111 !important; box-shadow:4px 4px 0px #111 !important; }
body[data-theme="noir"] .btn-icon:hover { background:#111 !important; color:#e8e3d3 !important; box-shadow:5px 5px 0px #990000 !important; }

body[data-theme="noir"] .cover-photo { border-bottom:5px solid #111; }
body[data-theme="noir"] .cover-photo img { border-bottom-left-radius:0; border-bottom-right-radius:0; filter:grayscale(80%) sepia(30%) contrast(120%); }
body[data-theme="noir"] .profile-pic-container { background:#111; border-radius:0 !important; border:5px solid #111; box-shadow:6px 6px 0px #990000 !important; }
body[data-theme="noir"] .profile-pic { border-radius:0 !important; border:4px solid #e8e3d3; filter:grayscale(100%) contrast(120%); }
body[data-theme="noir"] .profile-pic-container::after { content:'CLASSIFIED'; position:absolute; bottom:8px; font-size:12px; font-weight:bold; color:#990000; letter-spacing:3px; font-family:'Special Elite',monospace !important; background:rgba(232,227,211,0.9); padding:0 5px; border: 1px solid #990000; }
body[data-theme="noir"] .profile-info h1 { color:#e8e3d3; letter-spacing:4px; text-shadow: 2px 2px 0px #111, -1px -1px 0px #990000; border-bottom: 2px dashed #555; display: inline-block; padding-bottom: 5px; animation: lightFlicker 6s infinite; }
body[data-theme="noir"] .profile-info p { color:#aaa; font-family: 'Special Elite', monospace !important; }
body[data-theme="noir"] .edit-badge { border-radius:0 !important; background:#111 !important; color:#e8e3d3; box-shadow:3px 3px 0px #990000 !important; border:2px solid #e8e3d3 !important; }
body[data-theme="noir"] .edit-badge:hover { background:#990000 !important; box-shadow:3px 3px 0px #111 !important; }

body[data-theme="noir"] .btn-about { background:#e8e3d3 !important; color:#111 !important; border:3px solid #111 !important; box-shadow:5px 5px 0px #111 !important; text-transform:uppercase; font-size:16px; letter-spacing: 1px; }
body[data-theme="noir"] .btn-about:hover { background:#111 !important; color:#e8e3d3 !important; box-shadow:6px 6px 0px #990000 !important; }
body[data-theme="noir"] .btn-pinned { background:#111 !important; color:#e8e3d3 !important; border:3px double #990000 !important; box-shadow:5px 5px 0px #990000 !important; }
body[data-theme="noir"] .btn-pinned:hover { background:#990000 !important; box-shadow:6px 6px 0px #111 !important; }

body[data-theme="noir"] .about-user-content, body[data-theme="noir"] .char-info-section, body[data-theme="noir"] .feed-post, body[data-theme="noir"] .box { 
  background:#e8e3d3 !important; background-image: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px) !important;
  border-radius:0 !important; border:4px solid #111 !important; box-shadow:8px 8px 0px #111 !important; 
}
body[data-theme="noir"] .nav-tabs { background:#121212; border-bottom:4px solid #111; border-radius:0; backdrop-filter:none; box-shadow:none; }
body[data-theme="noir"] .tab-btn { background:#e8e3d3 !important; color:#111 !important; border:3px solid #111 !important; border-radius:0 !important; font-weight:700; box-shadow:4px 4px 0px #111 !important; }
body[data-theme="noir"] .tab-btn.active, body[data-theme="noir"] .tab-btn:hover { background:#111 !important; color:#e8e3d3 !important; box-shadow:5px 5px 0px #990000 !important; transform:translate(-2px,-2px); border-color:#990000 !important; }
body[data-theme="noir"] .search-input { border-radius:0 !important; border:3px solid #111 !important; background:#e8e3d3 !important; color:#111 !important; box-shadow:5px 5px 0px #111 !important; font-weight:bold; }
body[data-theme="noir"] .search-input:focus { box-shadow:5px 5px 0px #990000 !important; border-color:#990000 !important; }

body[data-theme="noir"] .adopt-card { background:#e8e3d3 !important; border-radius:0 !important; overflow:visible; border:3px solid #111 !important; box-shadow:6px 6px 0px #111 !important; cursor:crosshair; padding:12px; }
body[data-theme="noir"] .adopt-card::before { content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg); width:70px; height:25px; background:rgba(200,195,180,0.9); border:2px solid #111; box-shadow:2px 2px 0px rgba(0,0,0,0.3); z-index:10; }
body[data-theme="noir"] .adopt-card:hover { transform:translate(-4px,-4px); box-shadow:10px 10px 0px #990000 !important; border-color:#990000 !important; }
body[data-theme="noir"] .adopt-card:hover h3 { color:#990000; letter-spacing:2px; }
body[data-theme="noir"] .adopt-cover { border:3px solid #111; border-radius:0; filter:grayscale(100%) contrast(150%); transition: filter 0.3s ease; }
body[data-theme="noir"] .adopt-card:hover .adopt-cover { filter:grayscale(30%) sepia(20%) contrast(120%); border-color:#990000; }
body[data-theme="noir"] .adopt-info { border-top:3px double #111; margin-top:10px; padding-top:10px; }
body[data-theme="noir"] .adopt-info h3 { font-weight:900; border-bottom:none; margin:0; }
body[data-theme="noir"] .adopt-info span { background:#111 !important; color:#e8e3d3 !important; border-radius:0 !important; border:2px solid #111; font-family:'Special Elite',monospace; }

body[data-theme="noir"] .pinned-card { background:#e8e3d3; border:3px solid #111; border-radius:0; box-shadow:5px 5px 0px #111; }
body[data-theme="noir"] .pinned-card img { filter:grayscale(80%) contrast(120%); border-bottom: 3px solid #111; }
body[data-theme="noir"] .pinned-card:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0px #990000; border-color:#990000; }
body[data-theme="noir"] .pinned-card:hover img { filter:grayscale(0%); border-color:#990000; }

body[data-theme="noir"] .char-avatar { border-radius:0 !important; border:4px solid #111 !important; box-shadow:6px 6px 0px #111 !important; filter:grayscale(100%) contrast(120%); }
body[data-theme="noir"] .char-title h2 { border-bottom: 3px solid #111; padding-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; }
body[data-theme="noir"] .id-card-layout { background:#dcd7c6 !important; border:4px solid #111 !important; border-radius:0 !important; box-shadow:inset 0 0 50px rgba(0,0,0,0.1),8px 8px 0px #111 !important; }
body[data-theme="noir"] .id-card-layout::before { display:none !important; }
body[data-theme="noir"] .id-card-layout::after { content:'TOP SECRET'; position:absolute; top:20px; left:50%; transform:translateX(-50%) rotate(-15deg); color:rgba(153,0,0,0.3); font-size:4.5rem; font-family:'Special Elite',monospace !important; font-weight:bold; border:8px double rgba(153,0,0,0.3); padding:10px 20px; pointer-events:none; z-index:0; border-radius:0; letter-spacing: 5px; }
body[data-theme="noir"] .id-item span { color:#990000 !important; border-bottom: 1px dashed #111; padding-bottom: 2px; margin-bottom: 2px; display: inline-block; }
body[data-theme="noir"] #displayIdPhoto { border:4px solid #111 !important; border-radius:0 !important; filter:grayscale(100%) contrast(150%); box-shadow:5px 5px 0px rgba(0,0,0,0.8); }

body[data-theme="noir"] .feed-header { border-bottom:3px double #111; padding-bottom:10px; margin-bottom:15px; }
body[data-theme="noir"] .feed-avatar { border-radius:0 !important; border:2px solid #111; filter:grayscale(100%); }
body[data-theme="noir"] .feed-info b { font-family:'Special Elite',monospace !important; text-transform:uppercase; font-size: 18px; }
body[data-theme="noir"] .feed-info span { color:#990000 !important; font-weight:bold; font-family:'Special Elite',monospace !important; }
body[data-theme="noir"] .feed-text { font-size: 16px; line-height: 1.8; }
body[data-theme="noir"] .feed-text b { font-family:'Special Elite',monospace !important; font-size: 20px; text-transform:uppercase; display:block; margin-bottom:10px; }
body[data-theme="noir"] .spoiler-content { background:#dcd7c6; padding:15px; border:2px dashed #111; margin-top:10px; }
body[data-theme="noir"] .btn-spoiler { background:#111 !important; color:#e8e3d3 !important; border-radius:0 !important; border:2px solid #111 !important; box-shadow:4px 4px 0px #990000 !important; }
body[data-theme="noir"] .btn-spoiler:hover { background:#990000 !important; border-color:#990000 !important; box-shadow:4px 4px 0px #111 !important; }
body[data-theme="noir"] .post-slider-container { border-radius: 0; border: 3px solid #111; }
body[data-theme="noir"] .post-slide img, body[data-theme="noir"] .post-slide video { filter:grayscale(80%) sepia(20%); }

body[data-theme="noir"] .box-close { border-radius:0 !important; background:#111; color:#e8e3d3; border: 2px solid #111; box-shadow:3px 3px 0px #990000; }
body[data-theme="noir"] .btn-submit { background:#111; color:#e8e3d3; border-radius:0 !important; border: 3px solid #111; box-shadow:5px 5px 0px #990000; text-transform:uppercase; letter-spacing: 1px; }
body[data-theme="noir"] .btn-submit:hover { background:#990000; border-color:#990000; box-shadow:5px 5px 0px #111; }

body[data-theme="noir"] .audio-icon-btn { border-radius:0 !important; background:#e8e3d3 !important; color:#111 !important; border:3px solid #111 !important; box-shadow:4px 4px 0px #111 !important; cursor:crosshair; }
body[data-theme="noir"] .audio-icon-btn:hover { background:#111 !important; color:#e8e3d3 !important; box-shadow:4px 4px 0px #990000 !important; }
body[data-theme="noir"] .audio-icon-btn.playing { background:#990000 !important; color:#fff !important; border-color:#990000 !important; animation:alarmPulseNoir 1s infinite; }
@keyframes alarmPulseNoir { 0%,100%{box-shadow:4px 4px 0px #111;} 50%{box-shadow:0 0 15px #990000, 4px 4px 0px #111;} }
body[data-theme="noir"] #mainProfileAudioBtn.playing { background:#990000 !important; color:#fff !important; border-color:#990000 !important; animation:alarmPulseNoir 1s infinite; }

body[data-theme="noir"] .status-badge { background:#111; color:#e8e3d3; border-radius:0; border:1px solid #111; text-transform:uppercase; letter-spacing:1px; font-family:'Special Elite',monospace !important;}
body[data-theme="noir"] .char-status-box { border:3px solid #111; background:rgba(232,227,211,0.9); border-radius:0; box-shadow:4px 4px 0px #111; }
body[data-theme="noir"] .sub-tab-btn { border-radius:0 !important; border:2px solid #111; background:#dcd7c6; color:#111; font-family:'Special Elite',monospace !important; text-transform:uppercase;}
body[data-theme="noir"] .sub-tab-btn.active { background:#111; color:#e8e3d3; box-shadow:3px 3px 0px #990000; }
body[data-theme="noir"] .admin-fab { background:#111; color:#e8e3d3; border:3px solid #e8e3d3; box-shadow:6px 6px 0px #990000; border-radius:0; }
body[data-theme="noir"] .admin-fab:hover { background:#990000; color:#fff; box-shadow:6px 6px 0px #111; }
body[data-theme="noir"] .file-preview-item { background:#dcd7c6; border:2px solid #111 !important; border-radius:0 !important; box-shadow:3px 3px 0px #111; font-weight:bold; }
body[data-theme="noir"] .empty-state { background:repeating-linear-gradient(45deg,rgba(0,0,0,0.05),rgba(0,0,0,0.05) 10px,transparent 10px,transparent 20px); border:3px dashed #111; font-size:20px; font-weight:bold; font-family:'Special Elite',monospace !important; text-transform:uppercase;}
body[data-theme="noir"] .sheet-slider::-webkit-scrollbar { height:12px; border:2px solid #111; background:#e8e3d3; }
body[data-theme="noir"] .sheet-slider::-webkit-scrollbar-thumb { background:#111; border:2px solid #e8e3d3; }
body[data-theme="noir"] .sheet-item { border: 3px solid #111; border-radius: 0; background: #dcd7c6; }
body[data-theme="noir"] .char-header { border-bottom:4px double #111; padding-bottom:20px; }

/* Noir Click Effect */
body[data-theme="noir"] button:active, 
body[data-theme="noir"] .tab-btn:active, 
body[data-theme="noir"] .btn-icon:active { 
  transform: translate(2px, 2px) !important; box-shadow: inset 3px 3px 0px rgba(0,0,0,0.8) !important; transition: 0.05s; 
}

/* ── Base style ก่อนที่ data-theme จะถูกกำหนด (fallback) */
#themeSwitcherBtn {
  position: fixed !important;
  top: 30px !important;
  left: 30px !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.9) !important;
  color: #111 !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 1001 !important;
  border: 2px solid rgba(0,0,0,0.08) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ── ธีมปัจจุบัน: ปรับสีปุ่มตาม CSS variables ของธีมที่เลือก */
body[data-theme] #themeSwitcherBtn {
  position: fixed !important; 
  top: 30px !important; 
  left: 30px !important; 
  width: 55px !important; 
  height: 55px !important; 
  border-radius: 50% !important;
  background: var(--card-bg) !important;
  color: var(--text-main) !important;
  font-size: 22px !important;
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important;
  cursor: pointer !important; 
  z-index: 1001 !important; 
  border: 2px solid var(--border) !important; 
  backdrop-filter: blur(10px) !important; 
  box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ (สลับสีพื้นหลังกับไอคอน) */
body[data-theme] #themeSwitcherBtn:hover { 
  transform: scale(1.15) rotate(15deg) !important; 
  box-shadow: 0 12px 25px rgba(0,0,0,0.2) !important; 
  background: var(--text-main) !important;
  color: var(--bg-color) !important;
  border-color: var(--text-main) !important;
}

/* บังคับให้ไอคอนด้านในเชื่อฟังสีของปุ่ม */
body[data-theme] #themeSwitcherBtn i {
  color: inherit !important;
  transition: all 0.3s ease !important;
}

#themeSwitcherPanel {
  position: fixed; top: 95px; left: 30px; /* <--- เปิดหน้าต่างลงมาจากด้านบน */
  background: rgba(255,255,255,0.96); backdrop-filter: blur(20px);
  border-radius: 20px; padding: 16px 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.08);
  z-index: 1001; display: none; flex-direction: column; gap: 4px;
  min-width: 195px; animation: panelSlideDown 0.22s ease;
}
#themeSwitcherPanel.show { display: flex; }
@keyframes panelSlideDown { from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} } /* แก้ให้เลื่อนลงมา */

body[data-theme="dark"] #themeSwitcherPanel { background:rgba(26,26,32,0.95); backdrop-filter:blur(25px); border:1px solid rgba(255,255,255,0.15); box-shadow:0 20px 50px rgba(0,0,0,0.9); border-radius:20px; }
body[data-theme="noir"] #themeSwitcherPanel { background:#e8e3d3; border:4px solid #111 !important; border-radius:0; box-shadow:8px 8px 0px #111; }
body[data-theme="retro"] #themeSwitcherPanel { background:#fff; border:2px solid #111 !important; border-radius:8px; box-shadow:6px 6px 0px #111; backdrop-filter:none; }

.panel-title {
  font-size: 10px; font-weight: 700; color: #999;
  text-transform: uppercase; letter-spacing: 1.2px;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
body[data-theme="dark"] .panel-title { color:#b5b5c5; border-bottom:1px solid rgba(255,255,255,0.15); }
body[data-theme="noir"] .panel-title { color:#990000; border-bottom:2px dashed #111; font-family:'Special Elite',monospace !important; font-size: 12px; }

.theme-option {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 11px; cursor: pointer;
  border: none !important; background: transparent; width: 100%;
  text-align: left; font-size: 13px; font-weight: 600; color: #333;
  transition: all 0.18s ease; box-shadow: none !important;
}
.theme-option:hover { background: rgba(0,0,0,0.06); transform: translateX(3px); }
.theme-option.active { background: rgba(0,0,0,0.08); }

body[data-theme="dark"] .theme-option { color:#fff; border-radius:11px; border:1px solid transparent !important; }
body[data-theme="dark"] .theme-option:hover { background:rgba(255,255,255,0.1); transform:translateX(3px); border-color:rgba(255,255,255,0.2) !important; }
body[data-theme="dark"] .theme-option.active { background:rgba(255,0,85,0.25); color:#ff0055; border-color:#ff0055 !important; text-shadow:0 0 5px rgba(255,0,85,0.5); }

body[data-theme="noir"] .theme-option { color:#111; border-radius:0 !important; border:2px solid transparent !important; border-bottom:2px dashed #999 !important; box-shadow:none !important; font-family:'Special Elite',monospace !important; text-transform:uppercase; }
body[data-theme="noir"] .theme-option:hover { background:#111; color:#e8e3d3; transform:none; border-bottom:2px solid #111 !important; }
body[data-theme="noir"] .theme-option.active { background:#990000; color:#e8e3d3; border-bottom:2px solid #990000 !important; }

body[data-theme="retro"] .theme-option { border-radius:4px !important; }
body[data-theme="retro"] .theme-option.active { background:#111; color:#fff; }

/* สี่เหลี่ยมตัวอย่างสีธีม — แสดงสีจริงในปุ่ม theme-option */
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
  border: 1.5px solid rgba(0,0,0,0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15) !important;
}

/* ============================================================
   THEME 7 — KAWAII PURPLE (สไตล์ carrd cute / xiu-shoppe)
   อิง: xiushoppe.jpg / My Untitled Site ref
   Gimmick: Heart rain + Bouncing nav + Dotted decorations
   ============================================================ */
body[data-theme="kawaii"] {
  --bg-color: #2d2447;
  --card-bg: rgba(195,185,230,0.18);
  --text-main: #f0ebff;
  --text-highlight: #c084fc;
  --text-muted: #c4b8e8;
  --border: rgba(192,132,252,0.35);
  --radius: 20px;
  font-family: 'Noto Sans', 'Mitr', sans-serif !important;
  color-scheme: dark;
}

/* ── Background: soft purple noise + repeating dots ─────────── */
body[data-theme="kawaii"].animated-gradient {
  background: #2d2447 !important;
  background-image: radial-gradient(rgba(192,132,252,0.1) 1.5px, transparent 1.5px) !important;
  background-size: 22px 22px !important;
  animation: none !important;
}

/* ── Gimmick: Falling hearts ─────────────────────────────── */
@keyframes heartRain {
  0%   { transform: translateY(-8vh) translateX(0) rotate(0deg) scale(0.8); opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translateY(50vh) translateX(20px) rotate(30deg) scale(1); opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(108vh) translateX(-15px) rotate(-20deg) scale(1.1); opacity: 0; }
}
body[data-theme="kawaii"]::before {
  content: '🩷'; position: fixed; top: -8%; left: 12%; font-size: 22px;
  z-index: 0; pointer-events: none;
  animation: heartRain 9s linear infinite;
  filter: drop-shadow(0 0 6px rgba(240,120,200,0.6));
}
body[data-theme="kawaii"]::after {
  content: '💜'; position: fixed; top: -8%; left: 70%; font-size: 30px;
  z-index: 0; pointer-events: none;
  animation: heartRain 13s linear infinite 4s;
  filter: drop-shadow(0 0 8px rgba(192,132,252,0.6));
}

/* ── Global overrides ───────────────────────────────────── */
body[data-theme="kawaii"] * { transition: 0.18s ease; }
body[data-theme="kawaii"] a { color: #c084fc !important; }
body[data-theme="kawaii"] p, body[data-theme="kawaii"] div,
body[data-theme="kawaii"] span, body[data-theme="kawaii"] h1,
body[data-theme="kawaii"] h2, body[data-theme="kawaii"] h3,
body[data-theme="kawaii"] h4 { color: var(--text-main) !important; }

/* ── Nav bar ────────────────────────────────────────────── */
body[data-theme="kawaii"] .nav-tabs {
  background: rgba(45,36,71,0.95);
  border: 1.5px solid rgba(192,132,252,0.3);
  border-radius: 20px;
  backdrop-filter: blur(12px);
}
body[data-theme="kawaii"] .tab-btn { color: #c4b8e8 !important; }
body[data-theme="kawaii"] .tab-btn.active,
body[data-theme="kawaii"] .tab-btn:hover {
  background: linear-gradient(135deg,#9b59b6,#c084fc) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(192,132,252,0.5);
}
body[data-theme="kawaii"] .tab-btn.active * { color: #fff !important; }

/* ── Buttons ────────────────────────────────────────────── */
body[data-theme="kawaii"] .btn-about {
  background: linear-gradient(135deg,#9b59b6,#c084fc);
  color: #fff !important; border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 20px rgba(192,132,252,0.4);
}
body[data-theme="kawaii"] .btn-about:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(192,132,252,0.6);
}
body[data-theme="kawaii"] .btn-pinned {
  background: rgba(192,132,252,0.15); color: #e0c8ff !important;
  border: 1.5px solid rgba(192,132,252,0.4);
}
body[data-theme="kawaii"] .btn-pinned:hover {
  background: rgba(192,132,252,0.3); border-color: #c084fc;
}
body[data-theme="kawaii"] .btn-icon {
  background: rgba(192,132,252,0.2); color: #e0c8ff !important;
  border: 1px solid rgba(192,132,252,0.4);
  box-shadow: 0 3px 10px rgba(192,132,252,0.25);
}
body[data-theme="kawaii"] .btn-icon:hover {
  background: #9b59b6; color: #fff !important;
  box-shadow: 0 5px 16px rgba(192,132,252,0.5);
}

/* ── Cards / Content boxes ──────────────────────────────── */
body[data-theme="kawaii"] .about-user-content,
body[data-theme="kawaii"] .char-info-section,
body[data-theme="kawaii"] .feed-post,
body[data-theme="kawaii"] .box {
  background: rgba(45,36,71,0.85) !important;
  border: 1.5px solid rgba(192,132,252,0.3) !important;
  box-shadow: 0 12px 35px rgba(155,89,182,0.25) !important;
  backdrop-filter: blur(18px);
}
body[data-theme="kawaii"] .adopt-card {
  background: rgba(45,36,71,0.8);
  border: 1.5px solid rgba(192,132,252,0.25);
  box-shadow: 0 8px 24px rgba(155,89,182,0.3);
}
body[data-theme="kawaii"] .adopt-card:hover {
  transform: translateY(-6px) rotate(0.8deg);
  border-color: #c084fc;
  box-shadow: 0 18px 40px rgba(192,132,252,0.45);
}
body[data-theme="kawaii"] .adopt-info span {
  background: linear-gradient(135deg,#9b59b6,#c084fc);
  color: #fff !important; border: none;
}
body[data-theme="kawaii"] .pinned-card {
  background: rgba(50,40,80,0.85);
  border: 1.5px solid rgba(192,132,252,0.25);
  border-radius: 18px;
}
body[data-theme="kawaii"] .pinned-card:hover {
  transform: translateY(-4px); border-color: #c084fc;
  box-shadow: 0 14px 30px rgba(192,132,252,0.35);
}

/* ── Profile ────────────────────────────────────────────── */
body[data-theme="kawaii"] .profile-pic-container {
  box-shadow: 0 0 0 3px #c084fc, 0 12px 30px rgba(155,89,182,0.4);
  border-radius: 50%;
}
body[data-theme="kawaii"] .profile-info h1 {
  text-shadow: 0 0 12px rgba(192,132,252,0.6);
}

/* ── Inputs / Search ────────────────────────────────────── */
body[data-theme="kawaii"] input,
body[data-theme="kawaii"] textarea,
body[data-theme="kawaii"] select {
  background: rgba(25,18,50,0.85) !important;
  color: #f0ebff !important;
  border: 1.5px solid rgba(192,132,252,0.4) !important;
  border-radius: 14px !important;
}
body[data-theme="kawaii"] input:focus,
body[data-theme="kawaii"] textarea:focus {
  border-color: #c084fc !important;
  box-shadow: 0 0 0 3px rgba(192,132,252,0.3) !important;
}
body[data-theme="kawaii"] .search-input {
  background: rgba(25,18,50,0.85) !important;
  color: #f0ebff !important;
  border: 1.5px solid rgba(192,132,252,0.35) !important;
}

/* ── Badges / Status ────────────────────────────────────── */
body[data-theme="kawaii"] .status-badge {
  background: linear-gradient(135deg,#9b59b6,#c084fc);
  box-shadow: 0 4px 12px rgba(192,132,252,0.4);
}

/* ── Scrollbar ──────────────────────────────────────────── */
body[data-theme="kawaii"] ::-webkit-scrollbar { width: 8px; }
body[data-theme="kawaii"] ::-webkit-scrollbar-track { background: #1e1535; }
body[data-theme="kawaii"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(#9b59b6,#c084fc); border-radius: 8px;
}

/* ── Admin FAB ──────────────────────────────────────────── */
body[data-theme="kawaii"] .admin-fab {
  background: linear-gradient(135deg,#9b59b6,#c084fc);
  box-shadow: 0 8px 20px rgba(192,132,252,0.5);
}

/* ── Theme switcher ─────────────────────────────────────── */
body[data-theme="kawaii"] #themeSwitcherBtn {
  background: linear-gradient(135deg,#9b59b6,#c084fc);
  box-shadow: 0 6px 18px rgba(192,132,252,0.5);
  border: 1.5px solid rgba(255,255,255,0.2) !important;
}
body[data-theme="kawaii"] #themeSwitcherPanel {
  background: rgba(35,27,58,0.97);
  border: 1.5px solid rgba(192,132,252,0.35) !important;
  box-shadow: 0 20px 50px rgba(155,89,182,0.4);
  border-radius: 18px;
}
body[data-theme="kawaii"] .panel-title { color: #c084fc; border-bottom: 1px solid rgba(192,132,252,0.25); }
body[data-theme="kawaii"] .theme-option { color: #e0c8ff !important; }
body[data-theme="kawaii"] .theme-option:hover { background: rgba(192,132,252,0.15); }
body[data-theme="kawaii"] .theme-option.active {
  background: rgba(192,132,252,0.25); color: #c084fc !important;
  border: 1px solid rgba(192,132,252,0.5) !important;
  text-shadow: 0 0 6px rgba(192,132,252,0.5);
}

/* ── Click Effect ───────────────────────────────────────── */
body[data-theme="kawaii"] button:active,
body[data-theme="kawaii"] .tab-btn:active,
body[data-theme="kawaii"] .btn-icon:active {
  transform: scale(0.9) !important;
  box-shadow: 0 0 20px rgba(192,132,252,0.6) !important;
  transition: 0.08s ease;
}

/* ── Spoiler / Audio ────────────────────────────────────── */
body[data-theme="kawaii"] .audio-icon-btn {
  background: rgba(192,132,252,0.2) !important;
  color: #e0c8ff !important;
  border: 1.5px solid rgba(192,132,252,0.4) !important;
}
body[data-theme="kawaii"] .audio-icon-btn:hover {
  background: #9b59b6 !important; color: #fff !important;
}
body[data-theme="kawaii"] .audio-icon-btn.playing {
  background: linear-gradient(135deg,#9b59b6,#c084fc) !important;
  color: #fff !important; border-color: #c084fc !important;
  animation: kawaiiPulse 1.2s ease-in-out infinite alternate;
}
@keyframes kawaiiPulse {
  from { box-shadow: 0 0 8px rgba(192,132,252,0.4); }
  to   { box-shadow: 0 0 22px rgba(192,132,252,0.9); }
}


/* ============================================================
   THEME 8 — COTTAGECORE / FOREST INN (อิง fig-ficus.jpg ref)
   Gimmick: Floating leaf parallax + Stamped headers + Wiggle cards
   ============================================================ */
body[data-theme="cottage"] {
  --bg-color: #f5ede0;
  --card-bg: #fffbf4;
  --text-main: #3b2d1f;
  --text-highlight: #7a4f2d;
  --text-muted: #8a7060;
  --border: #c4a882;
  --radius: 10px;
  font-family: 'Georgia', 'Lora', serif !important;
}

/* ── Background: warm parchment + faint floral pattern ─── */
body[data-theme="cottage"].animated-gradient {
  background-color: #f5ede0 !important;
  background-image:
    radial-gradient(ellipse at 20% 80%, rgba(180,140,90,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(140,100,60,0.1) 0%, transparent 50%),
    url("data:image/svg+xml;utf8,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(180,140,90,0.15)'/%3E%3C/svg%3E") !important;
  background-size: cover, cover, 60px 60px !important;
  animation: none !important;
}

/* ── Gimmick: Drifting leaves ───────────────────────────── */
@keyframes leafDrift {
  0%   { transform: translateY(-6vh) translateX(0) rotate(-20deg); opacity: 0; }
  8%   { opacity: 0.75; }
  50%  { transform: translateY(55vh) translateX(35px) rotate(40deg); opacity: 0.75; }
  92%  { opacity: 0.75; }
  100% { transform: translateY(110vh) translateX(-20px) rotate(-10deg); opacity: 0; }
}
body[data-theme="cottage"]::before {
  content: '🍂'; position: fixed; top: -6%; left: 20%; font-size: 26px;
  z-index: 0; pointer-events: none;
  animation: leafDrift 14s linear infinite;
}
body[data-theme="cottage"]::after {
  content: '🍃'; position: fixed; top: -6%; left: 65%; font-size: 20px;
  z-index: 0; pointer-events: none;
  animation: leafDrift 20s linear infinite 5s;
}

/* ── Gimmick: Wiggle on card hover ─────────────────────── */
@keyframes cottagWiggle {
  0%, 100% { transform: translateY(-4px) rotate(0deg); }
  25%       { transform: translateY(-4px) rotate(-1.5deg); }
  75%       { transform: translateY(-4px) rotate(1.5deg); }
}

/* ── Scrollbar ──────────────────────────────────────────── */
body[data-theme="cottage"] ::-webkit-scrollbar { width: 10px; }
body[data-theme="cottage"] ::-webkit-scrollbar-track { background: #ede0cc; }
body[data-theme="cottage"] ::-webkit-scrollbar-thumb {
  background: #b08860; border-radius: 8px; border: 2px solid #ede0cc;
}

/* ── Nav bar: wood-plank style ──────────────────────────── */
body[data-theme="cottage"] .nav-tabs {
  background: linear-gradient(to bottom, #6b4226, #4e2e14);
  border: 3px solid #3b1f0a;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 4px 0 #3b1f0a, inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: none;
}
body[data-theme="cottage"] .tab-btn { color: #f5dab5 !important; font-weight: 600; }
body[data-theme="cottage"] .tab-btn.active,
body[data-theme="cottage"] .tab-btn:hover {
  background: #c8844a !important;
  color: #fff !important;
  box-shadow: 0 3px 0 #7a4018 inset;
}
body[data-theme="cottage"] .tab-btn.active * { color: #fff !important; }

/* ── Buttons ────────────────────────────────────────────── */
body[data-theme="cottage"] .btn-about {
  background: linear-gradient(to bottom, #c8844a, #9b5e2a);
  color: #fff !important; font-weight: 700;
  border: 2px solid #7a4018;
  box-shadow: 0 4px 0 #5a2e0a, 0 6px 15px rgba(122,64,24,0.3);
  border-radius: 10px;
}
body[data-theme="cottage"] .btn-about:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #5a2e0a, 0 8px 20px rgba(122,64,24,0.35);
}
body[data-theme="cottage"] .btn-pinned {
  background: #fff8ee; color: #7a4f2d !important;
  border: 2px solid #c4a882;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
body[data-theme="cottage"] .btn-pinned:hover {
  background: #ede0cc; border-color: #a07040;
}
body[data-theme="cottage"] .btn-icon {
  background: rgba(122,79,45,0.15); color: #7a4f2d !important;
  border: 1.5px solid #c4a882;
}
body[data-theme="cottage"] .btn-icon:hover {
  background: #c8844a; color: #fff !important;
}

/* ── Cards / Content boxes: parchment + tape stamp ──────── */
body[data-theme="cottage"] .about-user-content,
body[data-theme="cottage"] .char-info-section,
body[data-theme="cottage"] .feed-post,
body[data-theme="cottage"] .box {
  background: #fffbf4 !important;
  border: 2.5px solid #c4a882 !important;
  border-radius: 10px !important;
  box-shadow: 4px 6px 0 rgba(180,140,90,0.2), 0 0 0 1px rgba(180,140,90,0.08) !important;
  position: relative;
}
/* Masking tape decoration on first box */
body[data-theme="cottage"] .about-user-content {
  padding-top: 38px;
  overflow: visible;
}
body[data-theme="cottage"] .about-user-content::before {
  content: ''; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 110px; height: 26px;
  background: rgba(200,200,130,0.75);
  border-top: 1px dashed rgba(0,0,0,0.08);
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  z-index: 5;
}

body[data-theme="cottage"] .adopt-card {
  background: #fffbf4;
  border: 2.5px solid #c4a882;
  box-shadow: 3px 5px 0 rgba(180,140,90,0.2);
  overflow: visible; padding: 10px; position: relative;
}
/* Tape on adopt cards */
body[data-theme="cottage"] .adopt-card::before {
  content: ''; position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 70px; height: 20px;
  background: rgba(200,200,130,0.7);
  border-top: 1px dashed rgba(0,0,0,0.07);
  border-bottom: 1px dashed rgba(0,0,0,0.07);
  z-index: 10;
}
body[data-theme="cottage"] .adopt-card:nth-child(even)::before {
  background: rgba(200,230,200,0.7); transform: translateX(-50%) rotate(1.5deg);
}
body[data-theme="cottage"] .adopt-card:hover {
  animation: cottagWiggle 0.6s ease-in-out infinite;
  box-shadow: 5px 8px 0 rgba(180,140,90,0.25); border-color: #a07040;
}
body[data-theme="cottage"] .adopt-info span {
  background: #c8844a; color: #fff !important;
  border: 1.5px solid #9b5e2a; border-radius: 6px;
}

body[data-theme="cottage"] .pinned-card {
  border: 2.5px solid #c4a882; border-radius: 10px;
  box-shadow: 3px 4px 0 rgba(180,140,90,0.2);
}
body[data-theme="cottage"] .pinned-card:hover {
  transform: translateY(-4px) rotate(1deg);
  box-shadow: 5px 7px 0 rgba(122,64,24,0.25);
}
body[data-theme="cottage"] .pinned-card img {
  border-bottom: 2px solid #c4a882; border-radius: 6px;
}

/* ── Profile ────────────────────────────────────────────── */
body[data-theme="cottage"] .profile-pic-container {
  border: 4px solid #ede0cc;
  box-shadow: 0 0 0 2.5px #c4a882, 4px 6px 0 rgba(122,64,24,0.2);
  border-radius: 50%;
}

/* ── Inputs ─────────────────────────────────────────────── */
body[data-theme="cottage"] input,
body[data-theme="cottage"] textarea,
body[data-theme="cottage"] select {
  background: #fffbf4 !important;
  color: #3b2d1f !important;
  border: 2px solid #c4a882 !important;
  border-radius: 8px !important;
  box-shadow: inset 1px 1px 3px rgba(180,140,90,0.1) !important;
}
body[data-theme="cottage"] input:focus,
body[data-theme="cottage"] textarea:focus {
  border-color: #a07040 !important;
  box-shadow: 0 0 0 3px rgba(180,140,90,0.2) !important;
}

/* ── Badge / Status ─────────────────────────────────────── */
body[data-theme="cottage"] .status-badge {
  background: #c8844a; color: #fff !important;
  border: 1.5px solid #9b5e2a;
  box-shadow: 2px 2px 0 rgba(122,64,24,0.2);
}

/* ── Admin FAB ──────────────────────────────────────────── */
body[data-theme="cottage"] .admin-fab {
  background: linear-gradient(to bottom, #c8844a, #9b5e2a);
  border: 2px solid #7a4018;
  box-shadow: 0 6px 0 #5a2e0a;
}

/* ── Theme Switcher ─────────────────────────────────────── */
body[data-theme="cottage"] #themeSwitcherBtn {
  background: linear-gradient(to bottom, #6b4226, #4e2e14);
  border: 2px solid #3b1f0a !important;
  box-shadow: 0 4px 0 #3b1f0a, 0 6px 14px rgba(0,0,0,0.25) !important;
  border-radius: 10px !important;
  color: #f5dab5 !important;
}
body[data-theme="cottage"] #themeSwitcherPanel {
  background: #fffbf4;
  border: 2.5px solid #c4a882 !important;
  border-radius: 10px;
  box-shadow: 5px 6px 0 rgba(180,140,90,0.2);
}
body[data-theme="cottage"] .panel-title { color: #a07040; border-bottom: 1px dashed #c4a882; }
body[data-theme="cottage"] .theme-option { color: #3b2d1f !important; }
body[data-theme="cottage"] .theme-option:hover { background: rgba(200,140,80,0.12); }
body[data-theme="cottage"] .theme-option.active { background: #f5ede0; color: #7a4f2d !important; font-weight: 700; }


/* ── FIX: force dark text in cottage light-bg boxes ─────── */
body[data-theme="cottage"] .about-user-content *,
body[data-theme="cottage"] .char-info-section *,
body[data-theme="cottage"] .feed-post *,
body[data-theme="cottage"] .box *,
body[data-theme="cottage"] .adopt-card *,
body[data-theme="cottage"] .pinned-card * {
  color: #3b2d1f !important;
}
body[data-theme="cottage"] .adopt-info span { color: #fff !important; }
body[data-theme="cottage"] .status-badge { color: #fff !important; }
body[data-theme="cottage"] .btn-about { color: #fff !important; }
body[data-theme="cottage"] .btn-icon:hover { color: #fff !important; }

/* ── Click Effect ───────────────────────────────────────── */
body[data-theme="cottage"] button:active,
body[data-theme="cottage"] .tab-btn:active,
body[data-theme="cottage"] .btn-icon:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #5a2e0a !important;
  transition: 0.06s ease;
}


/* ============================================================
   THEME 9 — MISERABLEDOLLY / NEOCITIES (personal web 2.0 grunge)
   อิง: miserabledolly.net ref
   Gimmick: Tiled BG pattern + CRT border + Marquee header vibe
   ============================================================ */
body[data-theme="neocities"] {
  --bg-color: #1a1a2e;
  --card-bg: #f0eeea;
  --text-main: #1a1a2e;
  --text-highlight: #6600cc;
  --text-muted: #444444;
  --border: #888888;
  --radius: 4px;
  font-family: 'Courier New', 'VT323', monospace !important;
  color-scheme: light;
}

/* ── Background: tiled diamond pattern (neocities aesthetic) */
body[data-theme="neocities"].animated-gradient {
  background-color: #1a1a2e !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(102,0,204,0.08) 0px, rgba(102,0,204,0.08) 1px,
      transparent 1px, transparent 12px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(102,0,204,0.08) 0px, rgba(102,0,204,0.08) 1px,
      transparent 1px, transparent 12px
    ) !important;
  animation: none !important;
}

/* ── Gimmick: Animated cross/star sparkle cursor trail effect */
@keyframes neoGlitch {
  0%, 100% { clip-path: inset(0 0 100% 0); }
  15%       { clip-path: inset(10% 0 80% 0); transform: translateX(-3px); }
  30%       { clip-path: inset(40% 0 50% 0); transform: translateX(3px); }
  45%       { clip-path: inset(80% 0 5% 0); transform: translateX(-2px); }
  60%       { clip-path: inset(60% 0 30% 0); transform: translateX(0); }
  80%       { clip-path: inset(100% 0 0% 0); }
}

/* Page body frame: CRT monitor border */
body[data-theme="neocities"] .bg-overlay {
  background: rgba(240,238,234,0.0);
  outline: 6px double #6600cc;
  outline-offset: -6px;
}

/* ── Nav: classic windows taskbar style ─────────────────── */
body[data-theme="neocities"] .nav-tabs {
  background: linear-gradient(to bottom, #c4c0be, #9a9693);
  border: 2px solid #fff;
  border-bottom: 2px solid #555;
  border-right: 2px solid #555;
  border-radius: 0;
  box-shadow: inset -1px -1px 0 #333, inset 1px 1px 0 #fff;
  backdrop-filter: none;
}
body[data-theme="neocities"] .tab-btn {
  color: #1a1a1a !important; font-weight: 700;
  border: 2px solid transparent !important;
  border-radius: 0 !important;
  background: #c4c0be !important;
}
body[data-theme="neocities"] .tab-btn.active,
body[data-theme="neocities"] .tab-btn:hover {
  background: #f0eeea !important;
  color: #000 !important;
  border: 2px solid #555 !important;
  border-bottom: 2px solid #f0eeea !important;
  box-shadow: inset 1px 1px 0 #fff;
}
body[data-theme="neocities"] .tab-btn.active * { color: #000 !important; }

/* ── Main content: windows-95 dialog box ────────────────── */
body[data-theme="neocities"] .about-user-content,
body[data-theme="neocities"] .char-info-section,
body[data-theme="neocities"] .feed-post,
body[data-theme="neocities"] .box {
  background: #f0eeea !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #333 !important;
  color: #1a1a2e !important;
}
body[data-theme="neocities"] .about-user-content { padding-top: 36px; overflow: visible; }
body[data-theme="neocities"] .about-user-content::before {
  content: "🌐 PROFILE.HTM — [Read-Only]";
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background: linear-gradient(to right, #0000a8, #1084d0);
  color: #fff; font-size: 12px; font-weight: bold;
  line-height: 28px; padding: 0 10px;
  border-radius: 0; font-family: 'Courier New', monospace;
  pointer-events: none;
}

body[data-theme="neocities"] .adopt-card {
  background: #f0eeea;
  border: 2px solid #fff;
  border-bottom-color: #555;
  border-right-color: #555;
  border-radius: 0;
  box-shadow: 3px 3px 0 #333;
  padding: 8px; overflow: visible;
}
body[data-theme="neocities"] .adopt-card::before {
  content: "★ char.exe"; position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(to right, #0000a8, #1084d0);
  color: #fff; font-size: 11px; font-weight: bold;
  line-height: 22px; padding: 0 8px;
  font-family: 'Courier New', monospace; pointer-events: none; z-index: 1;
}
body[data-theme="neocities"] .adopt-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #6600cc;
  border-color: #6600cc;
}
body[data-theme="neocities"] .adopt-info span {
  background: #0000a8 !important; color: #fff !important;
  border: 1px solid #000 !important; border-radius: 2px !important;
  font-weight: bold; font-family: 'Courier New', monospace;
}
body[data-theme="neocities"] .adopt-card:hover .adopt-info span {
  background: #6600cc !important;
}

/* ── Buttons: win95 3D style ────────────────────────────── */
body[data-theme="neocities"] .btn-about {
  background: #c4c0be !important; color: #000 !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 #333 !important;
  font-weight: bold;
}
body[data-theme="neocities"] .btn-about:hover {
  background: #d4d0ce !important;
  box-shadow: inset 1px 1px 0 #fff, 3px 3px 0 #6600cc !important;
  border-color: #6600cc !important;
}
body[data-theme="neocities"] .btn-pinned {
  background: #f0eeea !important; color: #000 !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #333 !important;
}
body[data-theme="neocities"] .btn-pinned:hover {
  background: #0000a8 !important; color: #fff !important;
}
body[data-theme="neocities"] .btn-icon {
  background: #c4c0be !important; color: #000 !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 #333 !important;
}
body[data-theme="neocities"] .btn-icon:hover {
  background: #0000a8 !important; color: #fff !important;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #333 !important;
}

/* ── Pinned cards ───────────────────────────────────────── */
body[data-theme="neocities"] .pinned-card {
  background: #f0eeea;
  border: 2px solid #fff;
  border-bottom-color: #555;
  border-right-color: #555;
  border-radius: 0;
  box-shadow: 3px 3px 0 #333;
}
body[data-theme="neocities"] .pinned-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #6600cc;
}
body[data-theme="neocities"] .pinned-card img {
  border: 2px solid #555;
}

/* ── Profile ────────────────────────────────────────────── */
body[data-theme="neocities"] .profile-pic-container {
  border: 3px solid #fff !important;
  box-shadow: 3px 3px 0 #333, 0 0 0 1px #888 !important;
  border-radius: 4px !important;
}
body[data-theme="neocities"] .profile-pic {
  border-radius: 2px !important;
}
body[data-theme="neocities"] .profile-info h1 {
  text-shadow: 2px 2px 0 #6600cc;
  color: #f0eeea;
  letter-spacing: 2px;
}

/* ── Inputs ─────────────────────────────────────────────── */
body[data-theme="neocities"] input,
body[data-theme="neocities"] textarea,
body[data-theme="neocities"] select {
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #555 !important;
  border-top-color: #888 !important;
  border-left-color: #888 !important;
  border-radius: 0 !important;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1) !important;
  font-family: 'Courier New', monospace !important;
}
body[data-theme="neocities"] input:focus,
body[data-theme="neocities"] textarea:focus {
  border-color: #6600cc !important;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1), 0 0 0 2px rgba(102,0,204,0.3) !important;
}
body[data-theme="neocities"] .search-input {
  background: #fff !important; color: #000 !important;
  border: 2px solid #888 !important;
  border-bottom-color: #fff !important;
  border-right-color: #fff !important;
  border-radius: 0 !important;
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1) !important;
}

/* ── Status Badge ───────────────────────────────────────── */
body[data-theme="neocities"] .status-badge {
  background: #0000a8 !important; color: #fff !important;
  border-radius: 0 !important; border: 1px solid #000 !important;
  font-family: 'Courier New', monospace !important; font-weight: bold;
}

/* ── Scrollbar ──────────────────────────────────────────── */
body[data-theme="neocities"] ::-webkit-scrollbar { width: 14px; height: 14px; }
body[data-theme="neocities"] ::-webkit-scrollbar-track { background: #c4c0be; }
body[data-theme="neocities"] ::-webkit-scrollbar-thumb {
  background: #c4c0be;
  border: 2px solid #fff;
  border-bottom-color: #555; border-right-color: #555;
  box-shadow: inset 1px 1px 0 #fff;
}
body[data-theme="neocities"] ::-webkit-scrollbar-button {
  background: #c4c0be;
  border: 2px solid #fff; border-bottom-color: #555; border-right-color: #555;
  display: block; height: 14px;
}

/* ── Admin FAB ──────────────────────────────────────────── */
body[data-theme="neocities"] .admin-fab {
  background: #0000a8; color: #fff;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #333 !important;
}
body[data-theme="neocities"] .admin-fab:hover {
  background: #6600cc;
  box-shadow: 3px 3px 0 #6600cc !important;
}

/* ── Theme Switcher ─────────────────────────────────────── */
body[data-theme="neocities"] #themeSwitcherBtn {
  background: #c4c0be !important; color: #000 !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #333 !important;
}
body[data-theme="neocities"] #themeSwitcherPanel {
  background: #f0eeea !important;
  border: 2px solid #fff !important;
  border-bottom-color: #555 !important;
  border-right-color: #555 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #333 !important;
  backdrop-filter: none !important;
}
body[data-theme="neocities"] .panel-title {
  color: #0000a8; border-bottom: 1px solid #888;
  font-family: 'Courier New', monospace; font-size: 11px;
}
body[data-theme="neocities"] .theme-option { color: #000 !important; border-radius: 0 !important; }
body[data-theme="neocities"] .theme-option:hover { background: #0000a8 !important; color: #fff !important; }
body[data-theme="neocities"] .theme-option.active { background: #6600cc !important; color: #fff !important; }


/* ── FIX: force text dark inside light content boxes ─────── */
body[data-theme="neocities"] .about-user-content *,
body[data-theme="neocities"] .char-info-section *,
body[data-theme="neocities"] .feed-post *,
body[data-theme="neocities"] .box *,
body[data-theme="neocities"] .adopt-card *,
body[data-theme="neocities"] .pinned-card *,
body[data-theme="neocities"] .adopt-info * {
  color: #1a1a2e !important;
}
/* restore white text for title-bar ::before pseudo content can't be targeted, but these need white */
body[data-theme="neocities"] .adopt-info span { color: #fff !important; }
body[data-theme="neocities"] .status-badge { color: #fff !important; }

/* ── Click Effect ───────────────────────────────────────── */
body[data-theme="neocities"] button:active,
body[data-theme="neocities"] .tab-btn:active,
body[data-theme="neocities"] .btn-icon:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #333 !important;
  transition: 0.04s ease !important;
}


/* ============================================================
   THEME 10 — SUBJECT A-34 / SCI-FI TERMINAL (อิง ref ภาพ scan biometric)
   Concept: ระบบฐานข้อมูลลับ / HUD อนาคต / ม่วงเรืองแสง
   Gimmick: Scanline noise + Glitch flicker + Terminal cursor + Corner brackets
   ============================================================ */
body[data-theme="subject"] {
  --bg-color: #06060f;
  --card-bg: rgba(12,10,30,0.92);
  --text-main: #c8c0ff;
  --text-highlight: #7b5fff;
  --text-muted: #8880cc;
  --border: rgba(123,95,255,0.4);
  --radius: 2px;
  font-family: 'Courier New', 'Share Tech Mono', monospace !important;
  color-scheme: dark;
}

/* ── Background: deep dark with faint circuit grid ───────── */
body[data-theme="subject"].animated-gradient {
  background-color: #06060f !important;
  background-image:
    linear-gradient(rgba(123,95,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,95,255,0.03) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgba(80,40,200,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(40,0,120,0.15) 0%, transparent 55%) !important;
  background-size: 40px 40px, 40px 40px, cover, cover !important;
  animation: none !important;
}

/* ── Gimmick 1: CRT scanline overlay (persistent) ───────── */
body[data-theme="subject"]::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
}

/* ── Gimmick 2: Ambient violet orb top-left ─────────────── */
body[data-theme="subject"]::before {
  content: '';
  position: fixed; top: -15vw; left: -15vw;
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(100,50,255,0.22) 0%, transparent 70%);
  pointer-events: none; z-index: -1;
  animation: subjectOrb 8s ease-in-out infinite alternate;
}
@keyframes subjectOrb {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  100% { transform: translate(40px, 30px) scale(1.08); opacity: 1; }
}

/* ── Gimmick 3: Glitch flicker on h1 ────────────────────── */
@keyframes subjectGlitch {
  0%,90%,100% { text-shadow: 0 0 8px rgba(123,95,255,0.8), 0 0 20px rgba(123,95,255,0.4); transform: translate(0); clip-path: none; }
  91% { text-shadow: -2px 0 #ff00cc, 2px 0 #00ffff; transform: translate(-2px, 1px); }
  93% { text-shadow: 2px 0 #ff00cc, -2px 0 #00ffff; transform: translate(2px, -1px); }
  95% { text-shadow: 0 0 8px rgba(123,95,255,0.8); transform: translate(0); }
}
/* ── Gimmick 4: Blinking terminal cursor ─────────────────── */
@keyframes subjectCursor {
  0%,49% { border-right-color: #7b5fff; }
  50%,100% { border-right-color: transparent; }
}
/* ── Gimmick 5: Corner bracket decoration on cards ──────── */
@keyframes subjectScan {
  0%   { top: 0; opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ── Global text ────────────────────────────────────────── */
body[data-theme="subject"] * { font-family: 'Courier New', monospace !important; }
body[data-theme="subject"] p, body[data-theme="subject"] div,
body[data-theme="subject"] span, body[data-theme="subject"] li,
body[data-theme="subject"] h1, body[data-theme="subject"] h2,
body[data-theme="subject"] h3, body[data-theme="subject"] h4,
body[data-theme="subject"] a { color: #c8c0ff !important; }
body[data-theme="subject"] a:hover { color: #7b5fff !important; text-decoration: underline; }
body[data-theme="subject"] strong, body[data-theme="subject"] b { color: #fff !important; }

/* ── Scrollbar: thin neon rail ──────────────────────────── */
body[data-theme="subject"] ::-webkit-scrollbar { width: 6px; }
body[data-theme="subject"] ::-webkit-scrollbar-track { background: #06060f; }
body[data-theme="subject"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(#3a1fa8, #7b5fff);
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(123,95,255,0.6);
}

/* ── Cover photo ─────────────────────────────────────────── */
body[data-theme="subject"] .cover-photo {
  border-bottom: 1px solid rgba(123,95,255,0.4) !important;
  box-shadow: 0 4px 30px rgba(123,95,255,0.2) !important;
}
body[data-theme="subject"] .cover-photo img {
  filter: contrast(1.1) brightness(0.8) hue-rotate(220deg) saturate(0.5) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ── Edit badges ─────────────────────────────────────────── */
body[data-theme="subject"] .edit-badge {
  background: rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.6) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 10px rgba(123,95,255,0.4) !important;
}
body[data-theme="subject"] .edit-badge:hover {
  background: rgba(123,95,255,0.6) !important;
  box-shadow: 0 0 18px rgba(123,95,255,0.7) !important;
}

/* ── Bg overlay ─────────────────────────────────────────── */
body[data-theme="subject"] .bg-overlay {
  background: rgba(2,1,15,0.7) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── Banner ─────────────────────────────────────────────── */
body[data-theme="subject"] .post-slider-container {
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.15) !important;
}
body[data-theme="subject"] .post-slide img,
body[data-theme="subject"] .post-slide video {
  filter: contrast(1.1) brightness(0.85) hue-rotate(230deg) saturate(0.6);
}
body[data-theme="subject"] .slide-counter {
  background: rgba(6,5,20,0.9) !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  color: #c8c0ff !important;
}
body[data-theme="subject"] .slider-btn {
  background: rgba(6,5,20,0.85) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .slider-btn:hover {
  background: rgba(123,95,255,0.3) !important;
  box-shadow: 0 0 12px rgba(123,95,255,0.5) !important;
}

/* ── Banner controls ─────────────────────────────────────── */
body[data-theme="subject"] .btn-banner-toggle {
  background: rgba(123,95,255,0.1) !important;
  color: #8880cc !important;
  border: 1px solid rgba(123,95,255,0.25) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .btn-banner-toggle:hover,
body[data-theme="subject"] .btn-banner-toggle.active {
  background: rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
  border-color: rgba(123,95,255,0.5) !important;
}

/* ── Search ─────────────────────────────────────────────── */
body[data-theme="subject"] .nav-tabs {
  background: rgba(6,5,20,0.95) !important;
}

/* ── Char status box ─────────────────────────────────────── */
body[data-theme="subject"] .char-status-box {
  background: rgba(6,5,20,0.7) !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
}

/* ── Heart rating ────────────────────────────────────────── */
body[data-theme="subject"] .heart-rating i { color: rgba(123,95,255,0.25) !important; }
body[data-theme="subject"] .heart-rating i.active { color: #7b5fff !important; filter: drop-shadow(0 0 6px rgba(123,95,255,0.8)) !important; }

/* ── Pinned section ──────────────────────────────────────── */
body[data-theme="subject"] .pinned-section h3 { color: #c8c0ff !important; }

/* ── ID card ─────────────────────────────────────────────── */
body[data-theme="subject"] .id-card-layout {
  background: rgba(8,6,25,0.95) !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.15) !important;
}
body[data-theme="subject"] .id-card-layout::before {
  background: linear-gradient(45deg, rgba(123,95,255,0.3) 0%, transparent 40%, transparent 60%, rgba(123,95,255,0.2) 100%) !important;
}
body[data-theme="subject"] .id-item span { color: rgba(123,95,255,0.7) !important; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; }
body[data-theme="subject"] .id-item b { color: #c8c0ff !important; }
body[data-theme="subject"] #displayIdPhoto {
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 2px !important;
  filter: contrast(1.1) hue-rotate(240deg) saturate(0.5) !important;
}

/* ── Sheet slider ────────────────────────────────────────── */
body[data-theme="subject"] .sheet-item {
  background: rgba(8,6,25,0.9) !important;
  border: 1px solid rgba(123,95,255,0.25) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .sheet-slider::-webkit-scrollbar { height: 4px; }
body[data-theme="subject"] .sheet-slider::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #3a1fa8, #7b5fff);
  border-radius: 2px;
}

/* ── File preview ────────────────────────────────────────── */
body[data-theme="subject"] .file-preview-item {
  background: rgba(8,6,25,0.9) !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
  color: #c8c0ff !important;
}

/* ── Empty state ─────────────────────────────────────────── */
body[data-theme="subject"] .empty-state {
  color: #8880cc !important;
  letter-spacing: 2px; text-transform: uppercase;
}
body[data-theme="subject"] .empty-state i { color: rgba(123,95,255,0.3) !important; }

/* ── About section text ──────────────────────────────────── */
body[data-theme="subject"] .about-user-content .id-card-grid .id-item span { color: rgba(123,95,255,0.7) !important; }
body[data-theme="subject"] #aboutDesc, body[data-theme="subject"] #aboutContact { color: #c8c0ff !important; }

/* ── Box close & input focus ─────────────────────────────── */
body[data-theme="subject"] .box-close {
  background: rgba(123,95,255,0.15) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .box-close:hover {
  background: rgba(123,95,255,0.4) !important;
  box-shadow: 0 0 10px rgba(123,95,255,0.5) !important;
}

/* ── Btn submit ──────────────────────────────────────────── */
body[data-theme="subject"] .btn-submit {
  background: rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 2px !important;
  letter-spacing: 3px; text-transform: uppercase; font-size: 12px;
}
body[data-theme="subject"] .btn-submit:hover:not(:disabled) {
  background: rgba(123,95,255,0.5) !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.6) !important;
}

/* ── Profile: Biometric frame ───────────────────────────── */
body[data-theme="subject"] .profile-pic-container {
  border: 1px solid rgba(123,95,255,0.6) !important;
  border-radius: 4px !important;
  box-shadow:
    0 0 0 1px rgba(123,95,255,0.2),
    0 0 20px rgba(123,95,255,0.4),
    inset 0 0 15px rgba(0,0,0,0.8) !important;
  position: relative;
}
body[data-theme="subject"] .profile-pic {
  border-radius: 2px !important;
  filter: contrast(1.1) brightness(0.9) hue-rotate(240deg) saturate(0.6) !important;
}
body[data-theme="subject"] .profile-info h1 {
  color: #c8c0ff !important;
  letter-spacing: 4px;
  text-transform: uppercase;
  border-right: 2px solid #7b5fff;
  display: inline-block; padding-right: 6px;
  animation: subjectGlitch 6s steps(1) infinite, subjectCursor 0.9s steps(1) infinite;
}
body[data-theme="subject"] .profile-info p { color: #8880cc !important; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; }

/* ── Nav tabs: HUD menu bar ─────────────────────────────── */
body[data-theme="subject"] .nav-tabs {
  background: rgba(6,5,20,0.95);
  border: 1px solid rgba(123,95,255,0.3);
  border-radius: 2px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 20px rgba(123,95,255,0.15), inset 0 1px 0 rgba(123,95,255,0.2);
}
body[data-theme="subject"] .tab-btn {
  color: #8880cc !important;
  font-weight: 400; letter-spacing: 2px;
  text-transform: uppercase; font-size: 11px;
  border: 1px solid transparent !important;
}
body[data-theme="subject"] .tab-btn.active {
  background: rgba(123,95,255,0.2) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.5) !important;
  box-shadow: 0 0 12px rgba(123,95,255,0.3), inset 0 0 8px rgba(123,95,255,0.1);
}
body[data-theme="subject"] .tab-btn:hover:not(.active) {
  background: rgba(123,95,255,0.1) !important;
  color: #c8c0ff !important;
}
body[data-theme="subject"] .tab-btn.active * { color: #c8c0ff !important; }

/* ── Content boxes: terminal window with scan-line sweep ─── */
body[data-theme="subject"] .about-user-content,
body[data-theme="subject"] .char-info-section,
body[data-theme="subject"] .feed-post,
body[data-theme="subject"] .box {
  background: rgba(8,6,25,0.9) !important;
  border: 1px solid rgba(123,95,255,0.35) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.15), inset 0 0 40px rgba(0,0,0,0.5) !important;
  position: relative; overflow: hidden;
}
/* Scan sweep animation inside boxes */
body[data-theme="subject"] .about-user-content::before,
body[data-theme="subject"] .char-info-section::before {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(to right, transparent, rgba(123,95,255,0.6), transparent);
  animation: subjectScan 3s linear infinite;
  pointer-events: none; z-index: 10;
}
/* Corner bracket decorators */
body[data-theme="subject"] .about-user-content::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(to right, rgba(123,95,255,0.12), transparent);
  border-bottom: 1px solid rgba(123,95,255,0.2);
  pointer-events: none;
}
/* Text force-dark removed: these boxes are dark bg so text should be light */
body[data-theme="subject"] .about-user-content *,
body[data-theme="subject"] .char-info-section *,
body[data-theme="subject"] .feed-post *,
body[data-theme="subject"] .box * { color: #c8c0ff !important; }
body[data-theme="subject"] .box input,
body[data-theme="subject"] .box textarea { color: #c8c0ff !important; }
body[data-theme="subject"] .box label { color: #8880cc !important; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

/* ── Adopt cards: classified dossier ────────────────────── */
body[data-theme="subject"] .adopt-card {
  background: rgba(10,8,28,0.88);
  border: 1px solid rgba(123,95,255,0.3);
  border-radius: 2px;
  box-shadow: 0 0 15px rgba(123,95,255,0.12);
  position: relative; overflow: hidden;
  transition: all 0.25s ease;
}
body[data-theme="subject"] .adopt-card::before {
  content: 'SUBJECT';
  position: absolute; top: 0; left: 0; right: 0; height: 20px;
  background: rgba(123,95,255,0.15);
  border-bottom: 1px solid rgba(123,95,255,0.3);
  color: rgba(123,95,255,0.8) !important;
  font-size: 9px; letter-spacing: 4px; font-weight: bold;
  text-align: center; line-height: 20px; pointer-events: none;
  text-transform: uppercase;
}
body[data-theme="subject"] .adopt-card:hover {
  border-color: rgba(123,95,255,0.8);
  box-shadow: 0 0 25px rgba(123,95,255,0.35), inset 0 0 20px rgba(123,95,255,0.05);
  transform: translateY(-3px);
}
body[data-theme="subject"] .adopt-card * { color: #c8c0ff !important; }
body[data-theme="subject"] .adopt-info span {
  background: rgba(123,95,255,0.25) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  border-radius: 2px !important;
  font-size: 10px; letter-spacing: 1px;
}
body[data-theme="subject"] .adopt-card:hover .adopt-info span {
  background: rgba(123,95,255,0.4) !important;
  box-shadow: 0 0 6px rgba(123,95,255,0.4);
}

/* ── Pinned cards ───────────────────────────────────────── */
body[data-theme="subject"] .pinned-card {
  background: rgba(10,8,28,0.9);
  border: 1px solid rgba(123,95,255,0.25);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(123,95,255,0.1);
  transition: all 0.2s ease;
}
body[data-theme="subject"] .pinned-card:hover {
  border-color: rgba(123,95,255,0.7);
  box-shadow: 0 0 20px rgba(123,95,255,0.3);
  transform: translateY(-3px);
}
body[data-theme="subject"] .pinned-card img {
  border: 1px solid rgba(123,95,255,0.3);
  filter: contrast(1.1) hue-rotate(240deg) saturate(0.5);
}
body[data-theme="subject"] .pinned-card * { color: #c8c0ff !important; }

/* ── Buttons ────────────────────────────────────────────── */
body[data-theme="subject"] .btn-about {
  background: rgba(123,95,255,0.2) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 12px rgba(123,95,255,0.2), inset 0 0 8px rgba(123,95,255,0.05) !important;
  letter-spacing: 3px; text-transform: uppercase; font-size: 11px;
}
body[data-theme="subject"] .btn-about:hover {
  background: rgba(123,95,255,0.35) !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.5) !important;
  border-color: #7b5fff !important;
}
body[data-theme="subject"] .btn-pinned {
  background: rgba(123,95,255,0.1) !important;
  color: #8880cc !important;
  border: 1px solid rgba(123,95,255,0.25) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .btn-pinned:hover {
  background: rgba(123,95,255,0.25) !important;
  color: #c8c0ff !important;
  border-color: rgba(123,95,255,0.5) !important;
}
body[data-theme="subject"] .btn-icon {
  background: rgba(123,95,255,0.12) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
  backdrop-filter: blur(6px);
}
body[data-theme="subject"] .btn-icon:hover {
  background: rgba(123,95,255,0.3) !important;
  box-shadow: 0 0 12px rgba(123,95,255,0.4) !important;
  border-color: #7b5fff !important;
}

/* ── Inputs: terminal input field ───────────────────────── */
body[data-theme="subject"] input,
body[data-theme="subject"] textarea,
body[data-theme="subject"] select {
  background: rgba(4,3,18,0.95) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 0 0 1px rgba(123,95,255,0.1) !important;
  letter-spacing: 1px;
}
body[data-theme="subject"] input:focus,
body[data-theme="subject"] textarea:focus {
  border-color: #7b5fff !important;
  box-shadow: 0 0 10px rgba(123,95,255,0.4), inset 0 0 8px rgba(0,0,0,0.5) !important;
}
body[data-theme="subject"] input::placeholder,
body[data-theme="subject"] textarea::placeholder {
  color: rgba(136,128,204,0.4) !important;
  letter-spacing: 2px;
}
body[data-theme="subject"] .search-input {
  background: rgba(4,3,18,0.9) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.35) !important;
}
body[data-theme="subject"] .search-input:focus {
  border-color: #7b5fff !important;
  box-shadow: 0 0 10px rgba(123,95,255,0.3) !important;
}

/* ── Status Badge ───────────────────────────────────────── */
body[data-theme="subject"] .status-badge {
  background: rgba(123,95,255,0.25) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 2px !important;
  letter-spacing: 2px; text-transform: uppercase; font-size: 10px;
  box-shadow: 0 0 8px rgba(123,95,255,0.3) !important;
}

/* ── Admin FAB ──────────────────────────────────────────── */
body[data-theme="subject"] .admin-fab {
  background: rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.6) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.4) !important;
}
body[data-theme="subject"] .admin-fab:hover {
  background: rgba(123,95,255,0.5) !important;
  box-shadow: 0 0 30px rgba(123,95,255,0.7) !important;
}

/* ── Toast ──────────────────────────────────────────────── */
body[data-theme="subject"] .toast-container {
  background: rgba(8,6,25,0.98) !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  box-shadow: 0 0 20px rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
}

/* ── Audio gimmick ──────────────────────────────────────── */
body[data-theme="subject"] .audio-icon-btn {
  background: rgba(123,95,255,0.15) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .audio-icon-btn.playing {
  background: rgba(123,95,255,0.35) !important;
  border-color: #7b5fff !important;
  animation: subjectAudioPulse 1s ease-in-out infinite alternate;
}
@keyframes subjectAudioPulse {
  from { box-shadow: 0 0 5px rgba(123,95,255,0.4); }
  to   { box-shadow: 0 0 18px rgba(123,95,255,0.9), 0 0 35px rgba(123,95,255,0.4); }
}

/* ── Theme Switcher ─────────────────────────────────────── */
body[data-theme="subject"] #themeSwitcherBtn {
  background: rgba(8,6,25,0.9) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 12px rgba(123,95,255,0.3) !important;
}
body[data-theme="subject"] #themeSwitcherBtn:hover {
  box-shadow: 0 0 20px rgba(123,95,255,0.6) !important;
  border-color: #7b5fff !important;
}
body[data-theme="subject"] #themeSwitcherPanel {
  background: rgba(6,5,20,0.98) !important;
  border: 1px solid rgba(123,95,255,0.35) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 30px rgba(123,95,255,0.2) !important;
  backdrop-filter: blur(20px) !important;
}
body[data-theme="subject"] .panel-title {
  color: rgba(123,95,255,0.7) !important;
  border-bottom: 1px solid rgba(123,95,255,0.2) !important;
  letter-spacing: 3px; font-size: 9px; text-transform: uppercase;
}
body[data-theme="subject"] .theme-option { color: #8880cc !important; border-radius: 2px !important; letter-spacing: 1px; }
body[data-theme="subject"] .theme-option:hover {
  background: rgba(123,95,255,0.15) !important;
  color: #c8c0ff !important;
}
body[data-theme="subject"] .theme-option.active {
  background: rgba(123,95,255,0.25) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  box-shadow: 0 0 8px rgba(123,95,255,0.2);
}

/* ── Sub-tabs ───────────────────────────────────────────── */
body[data-theme="subject"] .sub-tab-btn {
  background: rgba(123,95,255,0.08) !important;
  color: #8880cc !important;
  border: 1px solid rgba(123,95,255,0.2) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .sub-tab-btn:hover { background: rgba(123,95,255,0.18) !important; color: #c8c0ff !important; }
body[data-theme="subject"] .sub-tab-btn.active {
  background: rgba(123,95,255,0.3) !important;
  color: #c8c0ff !important;
  border-color: rgba(123,95,255,0.5) !important;
  box-shadow: 0 0 8px rgba(123,95,255,0.25) !important;
}
body[data-theme="subject"] .sub-tab-btn.active * { color: #c8c0ff !important; }

/* ── Feed / Post header (author avatar + name) ───────────── */
body[data-theme="subject"] .feed-header {
  border-bottom: 1px solid rgba(123,95,255,0.2);
  padding-bottom: 12px; margin-bottom: 12px;
}
body[data-theme="subject"] .feed-avatar {
  border: 1px solid rgba(123,95,255,0.5) !important;
  border-radius: 3px !important;
  filter: contrast(1.1) hue-rotate(230deg) saturate(0.5);
}
body[data-theme="subject"] .feed-info b { color: #c8c0ff !important; letter-spacing: 1px; }
body[data-theme="subject"] .feed-info span { color: rgba(123,95,255,0.7) !important; letter-spacing: 1px; font-size: 11px; text-transform: uppercase; }

/* ── Post modal selects + labels override ─────────────────── */
body[data-theme="subject"] #newPostAuthorType,
body[data-theme="subject"] #newPostCharId,
body[data-theme="subject"] #editPostAuthorType,
body[data-theme="subject"] #editPostCharId {
  background: rgba(4,3,18,0.95) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  border-radius: 2px !important;
}
/* ── Select option text color (WebKit) ───────────────────── */
body[data-theme="subject"] select option {
  background: rgba(8,6,25,0.98) !important;
  color: #c8c0ff !important;
}
/* ── char profile section inside detail view ─────────────── */
body[data-theme="subject"] .char-profile-section {
  background: rgba(8,6,25,0.88) !important;
  border: 1px solid rgba(123,95,255,0.3) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 15px rgba(123,95,255,0.12) !important;
}
body[data-theme="subject"] .char-profile-section * { color: #c8c0ff !important; }
body[data-theme="subject"] .char-cover-photo img {
  border-bottom: 1px solid rgba(123,95,255,0.3) !important;
  filter: contrast(1.05) hue-rotate(230deg) saturate(0.6) !important;
}
body[data-theme="subject"] .char-profile-pic-container {
  border: 1px solid rgba(123,95,255,0.6) !important;
  border-radius: 3px !important;
  box-shadow: 0 0 15px rgba(123,95,255,0.4), inset 0 0 10px rgba(0,0,0,0.8) !important;
}
body[data-theme="subject"] .char-profile-pic {
  border-radius: 2px !important;
  filter: contrast(1.1) hue-rotate(240deg) saturate(0.5) !important;
}
body[data-theme="subject"] .char-profile-display-name {
  color: #c8c0ff !important;
  letter-spacing: 3px;
  text-transform: uppercase;
}
body[data-theme="subject"] .char-profile-bio {
  color: #8880cc !important;
  letter-spacing: 1px;
  font-size: 11px;
  text-transform: uppercase;
}

/* ── Spoiler ────────────────────────────────────────────── */
body[data-theme="subject"] .btn-spoiler {
  background: rgba(123,95,255,0.2) !important;
  color: #c8c0ff !important;
  border: 1px solid rgba(123,95,255,0.4) !important;
  border-radius: 2px !important;
}
body[data-theme="subject"] .btn-spoiler:hover {
  background: rgba(123,95,255,0.35) !important;
  box-shadow: 0 0 10px rgba(123,95,255,0.4) !important;
}

/* ── Click Effect: neon pulse ───────────────────────────── */
body[data-theme="subject"] button:active,
body[data-theme="subject"] .tab-btn:active,
body[data-theme="subject"] .btn-icon:active {
  transform: scale(0.97) !important;
  box-shadow: 0 0 25px rgba(123,95,255,0.7) !important;
  transition: 0.08s ease !important;
}
/* ============================================================
   THEME ICON / ACTIVE STATE UNIVERSAL FIX
   ปุ่มเลือกธีม: ไอคอนและข้อความใน .theme-option ต้องไม่ถูก
   override สีจาก global dark-theme * color rule
   ============================================================ */

/* Dark-bg themes: allow panel text to use their own theme-option color */
body[data-theme="dark"] #themeSwitcherPanel *,
body[data-theme="kawaii"] #themeSwitcherPanel *,
body[data-theme="subject"] #themeSwitcherPanel * {
  color: inherit !important;
}
/* Re-set correct colors per theme explicitly */
body[data-theme="dark"] .theme-option i,
body[data-theme="dark"] .theme-option span:not(.theme-swatch) { color: #fff !important; }
body[data-theme="dark"] .theme-option:hover i,
body[data-theme="dark"] .theme-option:hover span:not(.theme-swatch) { color: #fff !important; }
body[data-theme="dark"] .theme-option.active i,
body[data-theme="dark"] .theme-option.active span:not(.theme-swatch) { color: #ff0055 !important; }

body[data-theme="kawaii"] .theme-option i,
body[data-theme="kawaii"] .theme-option span:not(.theme-swatch) { color: #e0c8ff !important; }
body[data-theme="kawaii"] .theme-option.active i,
body[data-theme="kawaii"] .theme-option.active span:not(.theme-swatch) { color: #c084fc !important; }

body[data-theme="subject"] .theme-option i,
body[data-theme="subject"] .theme-option span:not(.theme-swatch) { color: #8880cc !important; }
body[data-theme="subject"] .theme-option.active i,
body[data-theme="subject"] .theme-option.active span:not(.theme-swatch) { color: #c8c0ff !important; }

body[data-theme="noir"] #themeSwitcherPanel *,
body[data-theme="neocities"] #themeSwitcherPanel * { color: inherit !important; }
body[data-theme="noir"] .theme-option i { color: #111 !important; }
body[data-theme="noir"] .theme-option:hover i,
body[data-theme="noir"] .theme-option.active i { color: #e8e3d3 !important; }

/* Subject theme switcher btn */
body[data-theme="subject"] #themeSwitcherBtn i { color: #c8c0ff !important; }