/* ========================================
   JokerAPI Theme v11
   黑金 + 墨色双模式
   策略：墨色模式移除dark class，靠Sub2API原生亮色 + 自定义覆盖
   ======================================== */

/* ==================== 黑金模式基础 ==================== */
:root, html { --bg: #09090b; --surface: #111113; --surface2: #1a1a1d; --border: rgba(255,255,255,.04); --border-h: rgba(212,175,55,.2); --gold: #d4af37; --gold-l: #e8c84a; --gold-d: #b8860b; --gold-glow: rgba(212,175,55,.06); --text: #e4e4e7; --text2: #a1a1aa; --text3: #63636e; --orange: #ea580c; --orange-l: #f97316; --orange-d: #c2410c; --orange-glow: rgba(249,115,22,.06); --radius: 10px; --radius-lg: 14px; --trans: .2s cubic-bezier(.4,0,.2,1); }

/* 背景 */
body, #app, #root { background: var(--bg) !important; color: var(--text) !important; }

/* 登录页 */
[class*="login"], [class*="auth"], [class*="welcome"] { background: linear-gradient(145deg, #09090b 0%, #0f0f12 50%, #09090b 100%) !important; }
.bg-gradient-to-br { background: radial-gradient(ellipse at 20% 50%, rgba(212,175,55,.03) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(96,165,250,.02) 0%, transparent 50%) !important; }

/* 按钮 */
.btn-primary { background: linear-gradient(135deg, var(--gold), var(--gold-d)) !important; border: none !important; color: #09090b !important; font-weight: 600 !important; border-radius: var(--radius) !important; box-shadow: 0 1px 2px rgba(212,175,55,.1) !important; }
.btn-primary:hover { background: linear-gradient(135deg, var(--gold-l), var(--gold)) !important; box-shadow: 0 4px 16px rgba(212,175,55,.2) !important; transform: translateY(-1px); }
.btn-secondary { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text2) !important; border-radius: var(--radius) !important; }
.btn-secondary:hover { border-color: var(--border-h) !important; color: var(--gold) !important; }

/* 侧边栏 */
[class*="sidebar"], aside nav { background: #0c0c0e !important; border-right: none !important; }
[class*="sidebar"] a, [class*="sidebar"] button { color: var(--text3) !important; border-radius: 8px !important; padding-left: 12px !important; }
[class*="sidebar"] a:hover, [class*="sidebar"] button:hover { color: var(--text2) !important; background: var(--gold-glow) !important; }
[class*="sidebar"] a.active, [class*="sidebar"] button.active { color: var(--gold) !important; background: var(--gold-glow) !important; border-left: 2px solid var(--gold) !important; }

/* 顶栏 */
header, [class*="top-bar"], [class*="navbar"] { background: rgba(9,9,11,.85) !important; backdrop-filter: blur(12px) !important; border-bottom: none !important; }

/* 卡片 */
[class*="card"], [class*="panel"] { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; }
[class*="card"]:hover, [class*="panel"]:hover { border-color: var(--border-h) !important; }

/* 表格 */
table th { background: var(--surface2) !important; color: var(--gold) !important; border-bottom: 1px solid var(--border) !important; padding: 10px 14px !important; font-size: .7rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; }
table td { border-bottom: 1px solid var(--border) !important; color: var(--text2) !important; padding: 10px 14px !important; }
table tr:hover td { background: var(--gold-glow) !important; }

/* 输入框 */
input, select, textarea { background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; }
input:focus, select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(212,175,55,.1) !important; outline: none !important; }
input::placeholder { color: var(--text3) !important; }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--gold) var(--surface); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: var(--gold) !important; border-radius: 10px !important; }

/* 链接/代码/选中 */
a { color: var(--gold) !important; } a:hover { color: var(--gold-l) !important; }
code, pre { background: var(--surface2) !important; color: var(--gold) !important; border-radius: 6px !important; font-family: 'JetBrains Mono', ui-monospace, monospace !important; }
::selection { background: rgba(212,175,55,.2) !important; color: var(--text) !important; }

/* 去除白线 */
.border, [class*="border-"] { border-color: transparent !important; }
.ring-1, [class*="ring-"] { --tw-ring-color: transparent !important; box-shadow: none !important; }
input, select, textarea { border-color: var(--border) !important; }
input:focus { border-color: var(--gold) !important; }
[class*="sidebar"] a.active { border-left-color: var(--gold) !important; }
.btn-secondary { border-color: var(--border) !important; }

/* 主题切换按钮 */
#joker-theme-toggle { position: fixed; bottom: 20px; right: 20px; z-index: 99999; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--trans); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
#joker-theme-toggle:hover { border-color: var(--gold) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(212,175,55,.12); }
@keyframes joker-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
[class*="card"], [class*="panel"] { animation: joker-fade-in .3s ease-out !important; }

/* ==================== 墨色模式（移除dark class） ==================== */
/* Sub2API原生亮色模式生效 + 自定义橙黑辅配色覆盖 */

html.joker-mono body,
html.joker-mono #app,
html.joker-mono #root { background: #ffffff !important; color: #18181b !important; }

/* 登录页白底 */
html.joker-mono [class*="login"], html.joker-mono [class*="auth"], html.joker-mono [class*="welcome"] { background: #ffffff !important; }
html.joker-mono .bg-gradient-to-br { background: radial-gradient(ellipse at 20% 50%, rgba(249,115,22,.04) 0%, transparent 60%) !important; }

/* 按钮 - 橙色 */
html.joker-mono .btn-primary { background: var(--orange) !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(234,88,12,.15) !important; border: none !important; border-radius: var(--radius) !important; font-weight: 600 !important; }
html.joker-mono .btn-primary:hover { background: var(--orange-d) !important; box-shadow: 0 4px 12px rgba(234,88,12,.2) !important; }
html.joker-mono .btn-secondary { background: #fafafa !important; border-color: #e4e4e7 !important; color: #52525b !important; border-radius: var(--radius) !important; }
html.joker-mono .btn-secondary:hover { border-color: var(--orange) !important; color: var(--orange) !important; }

/* 侧边栏 */
html.joker-mono [class*="sidebar"], html.joker-mono aside nav { background: #fafafa !important; border-right: 1px solid #e4e4e7 !important; }
html.joker-mono [class*="sidebar"] a, html.joker-mono [class*="sidebar"] button { color: #71717a !important; border-radius: 8px !important; padding-left: 12px !important; }
html.joker-mono [class*="sidebar"] a:hover { color: #52525b !important; background: rgba(249,115,22,.04) !important; }
html.joker-mono [class*="sidebar"] a.active, html.joker-mono [class*="sidebar"] button.active { color: var(--orange) !important; background: rgba(249,115,22,.06) !important; border-left: 2px solid var(--orange) !important; }

/* 顶栏 */
html.joker-mono header, html.joker-mono [class*="top-bar"], html.joker-mono [class*="navbar"] { background: rgba(255,255,255,.92) !important; border-bottom: 1px solid #e4e4e7 !important; backdrop-filter: blur(12px) !important; }

/* 卡片 */
html.joker-mono [class*="card"], html.joker-mono [class*="panel"] { background: #ffffff !important; border: 1px solid #e4e4e7 !important; border-radius: var(--radius-lg) !important; box-shadow: 0 1px 3px rgba(0,0,0,.04) !important; }
html.joker-mono [class*="card"]:hover { border-color: #d4d4d8 !important; box-shadow: 0 4px 12px rgba(0,0,0,.06) !important; }

/* 表格 */
html.joker-mono table th { background: #f4f4f5 !important; color: #52525b !important; border-bottom: 1px solid #e4e4e7 !important; }
html.joker-mono table td { border-bottom: 1px solid #f4f4f5 !important; color: #52525b !important; }
html.joker-mono table tr:hover td { background: rgba(249,115,22,.04) !important; }

/* 输入框 */
html.joker-mono input, html.joker-mono select, html.joker-mono textarea { background: #f4f4f5 !important; border-color: #e4e4e7 !important; color: #18181b !important; border-radius: 8px !important; }
html.joker-mono input:focus, html.joker-mono select:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(249,115,22,.08) !important; outline: none !important; }
html.joker-mono input::placeholder { color: #a1a1aa !important; }

/* 滚动条 */
html.joker-mono * { scrollbar-color: #d4d4d8 #fafafa; }
html.joker-mono ::-webkit-scrollbar-thumb { background: #d4d4d8 !important; }
html.joker-mono ::-webkit-scrollbar-thumb:hover { background: #a1a1aa !important; }

/* 链接/代码/选中 */
html.joker-mono a { color: var(--orange) !important; } html.joker-mono a:hover { color: var(--orange-d) !important; }
html.joker-mono code, html.joker-mono pre { background: #f4f4f5 !important; color: #52525b !important; }
html.joker-mono ::selection { background: rgba(249,115,22,.12) !important; color: #18181b !important; }

/* 边框恢复 */
html.joker-mono .border, html.joker-mono [class*="border-"] { border-color: #e4e4e7 !important; }
html.joker-mono .ring-1, html.joker-mono [class*="ring-"] { box-shadow: none !important; }
html.joker-mono input, html.joker-mono select, html.joker-mono textarea { border-color: #e4e4e7 !important; }
html.joker-mono input:focus { border-color: var(--orange) !important; }

/* 主题按钮墨色版 */
html.joker-mono #joker-theme-toggle { background: #ffffff !important; border-color: #e4e4e7 !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
html.joker-mono #joker-theme-toggle:hover { border-color: var(--orange) !important; }