/**
 * 233乐园 · 公共样式（主题变量 + 组件）
 */

:root {
  --radius: 18px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --card-blur: 20px;
  --card-shadow: 0 12px 36px rgba(0, 0, 0, .4);
  --card-border-w: 1px;
}
[data-theme="cyber"][data-mode="dark"] {
  --p1:#7c5cfc; --p2:#38efd1; --p3:#ffb74d; --p1-light:#a78bfa;
  --bg1:#0f0c29; --bg2:#302b63; --bg3:#24243e;
  --text:#eef0f7; --text-dim:#9aa0c3; --text-faint:#6b7194;
  --card:rgba(124,92,252,.08); --card-border:rgba(124,92,252,.22);
  --glow:rgba(124,92,252,.5); --glow2:rgba(56,239,209,.4);
  --btn-grad:linear-gradient(135deg,#7c5cfc 0%,#5a3de8 60%,#38efd1 180%);
}
[data-theme="cyber"][data-mode="light"] {
  --p1:#7c5cfc; --p2:#14b8a6; --p3:#f59e0b; --p1-light:#9b7ffc;
  --bg1:#f3f1ff; --bg2:#e8e3ff; --bg3:#f7f5ff;
  --text:#1e1a3a; --text-dim:#5a5478; --text-faint:#8d87a8;
  --card:rgba(255,255,255,.75); --card-border:rgba(124,92,252,.18);
  --glow:rgba(124,92,252,.2); --glow2:rgba(20,184,166,.15);
  --btn-grad:linear-gradient(135deg,#7c5cfc 0%,#14b8a6 100%);
}
[data-theme="ocean"][data-mode="dark"] {
  --p1:#4fc3f7; --p2:#26c6da; --p3:#ffd54f; --p1-light:#81d4fa;
  --bg1:#021b2e; --bg2:#083a5c; --bg3:#06283e;
  --text:#e5f4ff; --text-dim:#8db8d6; --text-faint:#5a7f9e;
  --card:rgba(79,195,247,.08); --card-border:rgba(79,195,247,.25);
  --glow:rgba(79,195,247,.5); --glow2:rgba(38,198,218,.4);
  --btn-grad:linear-gradient(135deg,#4fc3f7 0%,#26c6da 100%);
}
[data-theme="ocean"][data-mode="light"] {
  --p1:#0288d1; --p2:#00897b; --p3:#f9a825; --p1-light:#03a9f4;
  --bg1:#eaf6ff; --bg2:#d6ecff; --bg3:#f0f9ff;
  --text:#0d2a3d; --text-dim:#4a7088; --text-faint:#7ba2b8;
  --card:rgba(255,255,255,.78); --card-border:rgba(2,136,209,.2);
  --glow:rgba(2,136,209,.2); --glow2:rgba(0,137,123,.15);
  --btn-grad:linear-gradient(135deg,#0288d1 0%,#00897b 100%);
}
[data-theme="neon"][data-mode="dark"] {
  --p1:#00e676; --p2:#ff4081; --p3:#ffea00; --p1-light:#69f0ae;
  --bg1:#001a0a; --bg2:#002214; --bg3:#001008;
  --text:#e8fff0; --text-dim:#70c490; --text-faint:#3d7a55;
  --card:rgba(0,230,118,.08); --card-border:rgba(0,230,118,.3);
  --glow:rgba(0,230,118,.55); --glow2:rgba(255,64,129,.4);
  --btn-grad:linear-gradient(135deg,#00e676 0%,#ff4081 100%);
}
[data-theme="neon"][data-mode="light"] {
  --p1:#00a854; --p2:#e91e63; --p3:#f9a825; --p1-light:#00c853;
  --bg1:#eafff2; --bg2:#d6ffe3; --bg3:#f0fff7;
  --text:#0a2e1a; --text-dim:#4a7a60; --text-faint:#7aa890;
  --card:rgba(255,255,255,.8); --card-border:rgba(0,168,84,.22);
  --glow:rgba(0,168,84,.2); --glow2:rgba(233,30,99,.15);
  --btn-grad:linear-gradient(135deg,#00a854 0%,#e91e63 100%);
}
[data-theme="sunset"][data-mode="dark"] {
  --p1:#ff6b6b; --p2:#ffb74d; --p3:#ba68c8; --p1-light:#ff8a80;
  --bg1:#2b0f1a; --bg2:#4a1f2e; --bg3:#2e141c;
  --text:#ffeae0; --text-dim:#d6a090; --text-faint:#9e6a5e;
  --card:rgba(255,107,107,.1); --card-border:rgba(255,107,107,.28);
  --glow:rgba(255,107,107,.5); --glow2:rgba(255,183,77,.4);
  --btn-grad:linear-gradient(135deg,#ff6b6b 0%,#ffb74d 100%);
}
[data-theme="sunset"][data-mode="light"] {
  --p1:#e53935; --p2:#f57c00; --p3:#8e24aa; --p1-light:#ef5350;
  --bg1:#fff5f0; --bg2:#ffe5d6; --bg3:#fffaf7;
  --text:#3a1810; --text-dim:#8a5a4a; --text-faint:#b88a7a;
  --card:rgba(255,255,255,.78); --card-border:rgba(229,57,53,.2);
  --glow:rgba(229,57,53,.18); --glow2:rgba(245,124,0,.15);
  --btn-grad:linear-gradient(135deg,#e53935 0%,#f57c00 100%);
}
[data-theme="mono"][data-mode="dark"] {
  --p1:#bdbdbd; --p2:#9e9e9e; --p3:#ffb74d; --p1-light:#e0e0e0;
  --bg1:#0d0d0d; --bg2:#1a1a1a; --bg3:#0a0a0a;
  --text:#e8e8e8; --text-dim:#909090; --text-faint:#606060;
  --card:rgba(255,255,255,.04); --card-border:rgba(255,255,255,.12);
  --glow:rgba(255,255,255,.15); --glow2:rgba(200,200,200,.1);
  --btn-grad:linear-gradient(135deg,#e0e0e0 0%,#9e9e9e 100%);
}
[data-theme="mono"][data-mode="light"] {
  --p1:#424242; --p2:#757575; --p3:#f9a825; --p1-light:#616161;
  --bg1:#fafafa; --bg2:#eeeeee; --bg3:#ffffff;
  --text:#1a1a1a; --text-dim:#606060; --text-faint:#999999;
  --card:rgba(255,255,255,.85); --card-border:rgba(0,0,0,.1);
  --glow:rgba(0,0,0,.1); --glow2:rgba(0,0,0,.05);
  --btn-grad:linear-gradient(135deg,#424242 0%,#757575 100%);
}

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

body {
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'HarmonyOS Sans', 'Microsoft YaHei', sans-serif;
  background:linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%) fixed;
  color:var(--text);
  min-height:100vh;
  padding-bottom:80px;
  overflow-x:hidden;
  transition:background .5s var(--ease), color .5s var(--ease);
}
body.has-bg-image { background:#000 !important; }
.bg-layer {
  position:fixed; inset:-40px; z-index:-1; display:none;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:blur(var(--bg-blur, 0px)); opacity:var(--bg-opacity, 1);
  pointer-events:none;
}
body.has-bg-image .bg-layer { display:block; }

.container { max-width:760px; margin:0 auto; padding:24px 16px; position:relative; z-index:1; }
.container.wide { max-width:1080px; }

h1, h2, h3 { font-weight:800; }
h1 { font-size:22px; color:var(--p1-light); }
h3 { font-size:15px; margin-bottom:14px; color:var(--p1-light); display:flex; align-items:center; gap:8px; }
h3::before { content:''; width:3px; height:14px; border-radius:2px; background:linear-gradient(180deg, var(--p1), var(--p2)); }

.card {
  background:var(--card);
  backdrop-filter:blur(var(--card-blur));
  -webkit-backdrop-filter:blur(var(--card-blur));
  border:var(--card-border-w) solid var(--card-border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:16px;
  box-shadow:var(--card-shadow);
  position:relative;
  overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--p1), var(--p2));
}

.header { text-align:center; padding:32px 0 18px; }
.logo {
  font-size:clamp(26px, 7vw, 38px); font-weight:900; letter-spacing:-.5px;
  background:linear-gradient(135deg, var(--text) 0%, var(--p1-light) 40%, var(--p1) 60%, var(--p2) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.subtitle { margin-top:10px; font-size:13px; color:var(--text-dim); letter-spacing:1px; }
.badge-ip {
  display:inline-block; margin-top:12px; padding:6px 16px; border-radius:20px;
  background:var(--card); border:1.5px solid var(--card-border);
  font-size:12px; color:var(--p1-light);
}
.badge-ip b { color:var(--p2); }

.stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:20px; }
.stat {
  background:var(--card); border:var(--card-border-w) solid var(--card-border);
  border-radius:var(--radius); padding:16px 10px; text-align:center;
  box-shadow:var(--card-shadow); transition:transform .3s var(--ease), border-color .3s;
}
.stat .num { font-size:26px; font-weight:800; line-height:1.1; }
.stat .label { font-size:11px; color:var(--text-faint); margin-top:6px; }
.stat.purple .num { color:var(--p1-light); }
.stat.cyan .num { color:var(--p2); }
.stat.orange .num { color:var(--p3); }
.stat:hover { transform:translateY(-4px); border-color:var(--p1); }

.ann-box {
  background:var(--card); border:var(--card-border-w) solid var(--card-border);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:16px;
}
.ann-box summary { cursor:pointer; list-style:none; font-weight:700; font-size:15px; color:var(--p1-light); display:flex; gap:8px; }
.ann-box summary::-webkit-details-marker { display:none; }
.ann-box summary::after { content:'▾'; margin-left:auto; transition:transform .3s; font-size:13px; color:var(--text-faint); }
.ann-box[open] summary::after { transform:rotate(180deg); }
.ann-body {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--card-border);
  font-size:13.5px; line-height:1.9; color:var(--text-dim);
  white-space:pre-wrap; word-break:break-word;
}

input, textarea, select {
  padding:12px; border-radius:var(--radius-sm); border:1px solid var(--card-border);
  background:rgba(255,255,255,.06); color:var(--text); font-size:14px;
  width:100%; outline:none; margin-bottom:10px; transition:border-color .2s;
  font-family:inherit;
}
input:focus, textarea:focus, select:focus { border-color:var(--p1); }
label.field { display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; }
input[type=checkbox] { width:auto; margin:0; }

.btn {
  background:var(--btn-grad); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px 20px; font-weight:700; cursor:pointer; font-size:14px;
  transition:transform .2s var(--ease), opacity .2s; margin-right:8px;
  text-decoration:none; display:inline-block;
}
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.danger { background:linear-gradient(135deg, #ff6b6b, #ffb74d); }
.btn.ghost { background:transparent; border:1px solid var(--card-border); color:var(--text); }
.btn.sm { padding:8px 14px; font-size:13px; }
.btn.block { display:block; width:100%; margin:0; }

.stepper { display:flex; align-items:center; justify-content:center; gap:18px; margin:20px 0; }
.stepper button {
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:var(--card); border:1.5px solid var(--card-border);
  color:var(--text); font-size:22px; font-weight:700; transition:all .25s var(--ease);
}
.stepper button:hover { background:var(--p1); color:#fff; transform:scale(1.1); }
.stepper .count { font-size:24px; font-weight:800; min-width:36px; text-align:center; color:var(--p1-light); }

.draw-btn {
  display:block; width:100%; padding:17px; border:none; border-radius:14px; cursor:pointer;
  background:var(--btn-grad); color:#fff; font-size:17px; font-weight:800; letter-spacing:1px;
  box-shadow:0 10px 28px var(--glow); transition:all .3s var(--ease);
}
.draw-btn:active { transform:scale(.97); }
.draw-btn:disabled { opacity:.55; cursor:not-allowed; }

.cooldown {
  margin-top:12px; text-align:center; font-size:13px; font-weight:700;
  color:var(--p3); min-height:18px;
}
.cooldown.ready { color:var(--p2); }

.result-item {
  background:var(--card); border:1.5px solid var(--card-border);
  border-radius:12px; padding:14px; margin-bottom:10px; cursor:pointer;
  transition:all .3s var(--ease);
}
.result-item:hover { border-color:var(--p1); transform:translateY(-2px); }
.result-item.copied { border-color:var(--p2); box-shadow:0 0 24px var(--glow2); }
.result-item .field { display:flex; gap:10px; align-items:center; margin:5px 0; }
.result-item .field .lbl { color:var(--text-faint); font-size:12px; min-width:34px; }
.result-item .field .val { font-size:14.5px; font-weight:600; word-break:break-all; flex:1; font-family:ui-monospace, Menlo, monospace; }
.copy-hint { text-align:center; font-size:11px; color:var(--text-faint); margin-top:6px; }

.text-ads-inner { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.text-ad-item {
  display:flex; align-items:center; justify-content:center;
  border:1.5px dashed var(--card-border); border-radius:12px; padding:12px 10px;
  font-size:12.5px; font-weight:600; text-align:center; text-decoration:none;
  min-height:44px; transition:all .25s; background:var(--card);
}
.text-ad-item:hover { background:var(--glow); border-style:solid; border-color:var(--p1); }
@media (max-width:380px) { .text-ads-inner { grid-template-columns:1fr; } }

.tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tabs button {
  flex:1; min-width:90px; padding:12px 10px; border-radius:var(--radius-sm);
  border:1px solid var(--card-border); background:var(--card); color:var(--text-dim);
  font-weight:700; font-size:13.5px; cursor:pointer; transition:all .2s;
}
.tabs button.active { background:var(--btn-grad); color:#fff; border-color:transparent; }

.tbl-wrap { overflow:auto; max-height:62vh; border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:10px 8px; border-bottom:1px solid var(--card-border); text-align:left; white-space:nowrap; }
th { color:var(--p1-light); font-size:12px; position:sticky; top:0; background:rgba(20,16,45,.92); backdrop-filter:blur(10px); cursor:pointer; }
td.mono { font-family:ui-monospace, Menlo, monospace; font-size:12.5px; }
.tag { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; }
.tag.ok { background:rgba(56,239,209,.15); color:#38efd1; }
.tag.bad { background:rgba(255,80,80,.18); color:#ff8a8a; }
.tag.warn { background:rgba(255,183,77,.18); color:#ffb74d; }
.empty { text-align:center; color:var(--text-faint); padding:28px; font-size:13px; }

.toast {
  position:fixed; top:24px; left:50%; transform:translateX(-50%) translateY(-140px);
  padding:12px 24px; border-radius:12px; color:#fff; font-size:14px; font-weight:600;
  z-index:9999; pointer-events:none; max-width:88vw; text-align:center;
  transition:transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.toast.show { transform:translateX(-50%) translateY(0); }
.toast.success { background:rgba(56,239,209,.95); color:#00352c; }
.toast.error { background:rgba(255,80,80,.95); }
.toast.info { background:rgba(124,92,252,.95); }

.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  z-index:9000; display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-mask.show { display:flex; }
.modal {
  background:linear-gradient(135deg, var(--bg2), var(--bg3));
  border:1px solid var(--card-border); border-radius:var(--radius);
  padding:22px; width:100%; max-width:420px; box-shadow:var(--card-shadow);
}
.modal h3 { margin-bottom:14px; }

.captcha-row { display:flex; gap:10px; align-items:flex-start; }
.captcha-row input { flex:1; }
.captcha-row img {
  height:44px; width:132px; border-radius:var(--radius-sm);
  border:1px solid var(--card-border); cursor:pointer; flex:none; object-fit:cover;
}

.topbar { position:fixed; top:12px; right:12px; z-index:100; display:flex; gap:8px; }
.topbar button, .topbar a {
  width:42px; height:42px; border-radius:14px; border:1.5px solid var(--card-border);
  background:var(--card); backdrop-filter:blur(20px); color:var(--text);
  cursor:pointer; font-size:18px; text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease);
}
.topbar button:hover, .topbar a:hover { transform:scale(1.08); border-color:var(--p1); }

.theme-menu {
  position:fixed; top:62px; right:12px; z-index:100; display:none;
  background:var(--card); backdrop-filter:blur(24px);
  border:1.5px solid var(--card-border); border-radius:16px; padding:10px; min-width:160px;
}
.theme-menu.show { display:block; }
.theme-menu .opt { padding:9px 12px; border-radius:10px; cursor:pointer; font-size:13px; color:var(--text-dim); display:flex; gap:10px; align-items:center; }
.theme-menu .opt:hover { background:var(--glow); color:var(--text); }
.theme-menu .dot { width:14px; height:14px; border-radius:50%; }

.footer {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:var(--card); backdrop-filter:blur(20px);
  border-top:1.5px solid var(--card-border);
  padding:9px 16px calc(9px + env(safe-area-inset-bottom, 0px));
  display:flex; align-items:center; justify-content:space-between;
  gap:10px 14px; flex-wrap:wrap;
  font-size:12px; line-height:1.4; color:var(--text-dim);
}
/* 左（版权）与右（链接）各自都是「一整行」：不再从中间折行，
   文字多的时候整体收进一行并用省略号，避免出现「一半上、一半下」的难看排版 */
.footer .foot-left,
.footer .foot-right { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.footer .foot-left  { min-width:0; flex:1 1 150px; }
.footer .foot-left .foot-text,
.footer .foot-left > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.footer .foot-right { flex:0 0 auto; margin-left:auto; }
.footer .links,
.footer .foot-right .links { display:flex; align-items:center; gap:12px; }

.footer a {
  color:var(--p1-light); text-decoration:none; white-space:nowrap; flex:0 0 auto;
}
.footer a:hover { text-decoration:underline; }
/* 极窄屏：只给整体更多余量，仍然保持「每一边一行」 */
@media (max-width:420px) {
  .footer { padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); font-size:11.5px; }
  .footer .foot-left,
  .footer .foot-right,
  .footer .links { gap:8px; }
}

.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.muted { color:var(--text-faint); font-size:12px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.row.tight { gap:6px; }
.mt { margin-top:12px; }
.mb { margin-bottom:12px; }
.hidden { display:none !important; }

@media (max-width:600px) {
  .container { padding:16px 12px; }
  .stats { gap:8px; }
  .stat { padding:12px 6px; }
  .stat .num { font-size:22px; }
}

.topbar button,
.topbar a {
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  text-shadow:0 0 6px rgba(0,0,0,.25);
}
[data-mode="light"] .topbar button,
[data-mode="light"] .topbar a {
  background:rgba(255,255,255,.95) !important;
  border-color:rgba(0,0,0,.12) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  color:#1a1d35 !important;
  text-shadow:none;
}
[data-mode="dark"] .topbar button,
[data-mode="dark"] .topbar a {
  color:#eef0f7 !important;
}

[data-ui="glass"] .topbar button,
[data-ui="glass"] .topbar a,
[data-ui="minimal"] .topbar button,
[data-ui="minimal"] .topbar a {
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}

.theme-menu .opt .dot {
  flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 0 8px currentColor;
}
[data-mode="light"] .theme-menu .opt .dot {
  box-shadow:0 0 0 2px rgba(0,0,0,.25), 0 0 6px currentColor;
}
.theme-menu .opt.active {
  color:#fff !important;
  background:linear-gradient(135deg,var(--p1),var(--p2)) !important;
}
.theme-menu .opt.active .dot {
  box-shadow:0 0 0 2px #fff, 0 0 10px currentColor;
}

[data-mode="light"] .logo {
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}

.btn .ico,
button .ico {
  display:inline-block;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.2));
}
[data-mode="light"] .btn .ico,
[data-mode="light"] button .ico {
  filter:none;
}