/* web/core/style.css — Dryas Arbitrage 全站主题（系统字体栈，无版权）
   配色：简约高级 · 黑白 + 金/蓝/绿点缀，克制渐变 */
:root {
  --bg:#0a0a0e; --panel:#131318; --panel2:#1a1a21; --line:#26262f;
  --txt:#f4f4f7; --muted:#8f8f9c; --navy:#3b82f6;
  --green:#10b981; --orange:#e8a33d; --red:#e5534b; --purple:#8b5cf6; --blue:#4dabff; --gray:#9ca3af;
  --gold:#d4af37; --gold-l:#f0d88a;
  --grad: linear-gradient(135deg, #d4af37, #f0d88a);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
          "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--txt); font:16px/1.65 var(--font);
       -webkit-font-smoothing:antialiased; }
a { color:var(--navy); }
::selection { background:rgba(20,241,149,.3); }

/* ---------- 顶栏 ---------- */
.top { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:13px 24px;
       background:rgba(11,11,18,.92); backdrop-filter:blur(12px);
       border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; }
.logo { width:40px; height:40px; display:block; filter:drop-shadow(0 2px 8px rgba(20,241,149,.35)); }
.brandname { font-size:25px; font-weight:800; letter-spacing:.4px; color:var(--txt); line-height:1; }
.brandname .accent { color:var(--gold); }
.brandsub { font-size:14px; color:var(--muted); font-weight:500; }
.spacer { flex:1; min-width:12px; }
.top nav { display:flex; flex-wrap:wrap; gap:16px 22px; align-items:center; }
.top nav a, .top .navlink { color:var(--muted); text-decoration:none; font-size:17.5px; font-weight:600; transition:.15s; white-space:nowrap; }
.top nav a:hover, .top .navlink:hover { color:var(--txt); text-shadow:0 0 12px rgba(20,241,149,.4); }
.top .navlink.on { color:var(--green); }
/* 下拉菜单（帮助与反馈 → 帮助FAQ/风险/隐私/条款） */
.top nav .nav-menu { position:relative; display:inline-flex; }
.top nav .nav-menu .menu-trigger { color:var(--muted); text-decoration:none; font-size:17.5px; font-weight:600; cursor:pointer; transition:.15s; white-space:nowrap; }
.top nav .nav-menu .menu-trigger:hover { color:var(--txt); text-shadow:0 0 12px rgba(20,241,149,.4); }
.top nav .menu-drop { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:180px; background:#181826; border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:0 12px 40px rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:.18s; z-index:300; display:flex; flex-direction:column; }
.top nav .nav-menu.open .menu-drop { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.top nav .menu-drop a { padding:9px 14px; border-radius:8px; font-size:14px; color:var(--muted); white-space:nowrap; }
.top nav .menu-drop a:hover { background:rgba(94,106,210,.14); color:var(--txt); text-shadow:none; }
/* 窄屏适配：nav 项减少间距/字号，防止竖排挤压 */
@media (max-width:1180px) {
  .top { gap:8px 14px; padding:11px 18px; }
  .top nav { gap:12px 16px; }
  .top nav a, .top nav .nav-menu .menu-trigger, .top .navlink { font-size:15.5px; }
}
@media (max-width:980px) {
  .top { gap:6px 12px; padding:10px 14px; }
  .top nav { gap:10px 14px; }
  .top nav a, .top nav .nav-menu .menu-trigger, .top .navlink { font-size:14px; }
  .brandname { font-size:21px; }
  .logo { width:34px; height:34px; }
}
@media (max-width:760px) {
  .top { gap:6px 10px; padding:8px 10px; }
  .top nav { gap:6px 10px; }
  .top nav a, .top nav .nav-menu .menu-trigger, .top .navlink { font-size:12.5px; }
  #userbar .navlink { font-size:13px; }
  .brandsub { display:none; }
  .logo { width:30px; height:30px; }
  .brandname { font-size:18px; }
}
/* 极窄屏（手机横屏）：nav 允许横向滚动保持一行，避免竖排 */
@media (max-width:560px) {
  .top nav { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  .top nav a, .top nav .nav-menu .menu-trigger { font-size:12px; flex:none; }
  .top nav::-webkit-scrollbar { display:none; }
}

/* ---------- 通用面板 / 卡片 ---------- */
.panel { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.panel h3 { font-size:14px; padding:11px 15px; background:var(--panel2); border-bottom:1px solid var(--line);
            display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.panel h3 .sub { color:var(--muted); font-weight:500; font-size:11.5px; }
.body { padding:14px; }

/* ---------- 按钮 ---------- */
.btn { background:var(--grad); color:#06150d; border:none; border-radius:9px; padding:9px 18px;
       font-size:14px; font-weight:700; cursor:pointer; transition:.15s; }
.btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.btn.small { padding:4px 11px; font-size:12px; background:var(--panel2); color:var(--txt);
             border:1px solid var(--line); }
.btn.small:hover { border-color:var(--green); }
.btn.dim { background:var(--panel2); color:var(--txt); border:1px solid var(--line); }
.btn.ok { background:var(--green); color:#06150d; }
.btn.no { background:var(--red); color:#fff; }

/* ---------- 输入 ---------- */
input, textarea, select { background:var(--panel2); color:var(--txt); border:1px solid var(--line);
                          border-radius:9px; padding:9px 12px; font-size:14px; font-family:var(--font); }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--green); }

/* ---------- 徽章 / 标签 ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:999px;
         font-size:12px; border:1px solid var(--line); }
.badge.green { color:var(--green); border-color:rgba(20,241,149,.4); background:rgba(20,241,149,.08); }
/* 订阅等级框（不同级别不同质感：黑金/紫金/绿/灰） */
.tier-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 13px; border-radius:999px;
              font-size:12.5px; font-weight:700; letter-spacing:.3px; transition:.15s; }
.tier-badge.free { color:var(--muted); border:1px solid var(--line); background:transparent; }
.tier-badge.basic { color:var(--green); border:1px solid var(--green); background:rgba(20,241,149,.08); }
.tier-badge.pro { color:#d2a8ff; border:1px solid #9945ff; background:rgba(153,69,255,.12);
                  box-shadow:0 0 14px rgba(153,69,255,.3); }
.tier-badge.ultimate { color:#f5d67b; border:1px solid #f5d67b;
                       background:linear-gradient(135deg,#151007,#2a2010);
                       box-shadow:0 0 18px rgba(245,214,123,.4); }
.tag { font-size:11px; padding:1px 8px; border-radius:5px; }
.status { padding:1px 9px; border-radius:5px; font-size:11px; }
.status.none { color:var(--muted); background:#2a2a36; }
.status.pending { color:var(--orange); background:rgba(255,178,36,.12); }
.status.approved { color:var(--green); background:rgba(20,241,149,.12); }
.status.rejected, .status.removed { color:var(--red); background:rgba(255,92,124,.12); }

/* ---------- 空态 / 提示 ---------- */
.empty, .hint { color:var(--muted); text-align:center; }
.hint { font-size:12.5px; }
.err { color:var(--red); font-size:12.5px; min-height:16px; margin:6px 0; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-thumb { background:#2a2a3d; border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:#3a3a52; }

/* ---------- 订阅解锁提示 ---------- */
.lock-box { text-align:center; padding:46px 20px; }
.lock-title { font-size:24px; font-weight:800; letter-spacing:.5px; color:var(--txt); }
.lock-desc { color:var(--muted); font-size:14.5px; margin:8px 0 22px; }
.lock-btn { background:var(--grad); color:#14140a; border:none; border-radius:10px;
            padding:12px 38px; font-size:16px; font-weight:700; cursor:pointer;
            box-shadow:0 4px 18px rgba(212,175,55,.28); transition:.15s; }
.lock-btn:hover { transform:translateY(-2px); box-shadow:0 6px 26px rgba(212,175,55,.45); }

/* ---------- 订阅档位弹窗 ---------- */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(4px);
              display:flex; align-items:center; justify-content:center; z-index:200; }
.modal { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px;
         max-width:780px; width:92%; max-height:88vh; overflow-y:auto; position:relative; }
.modal .mclose { position:absolute; top:12px; right:16px; font-size:26px; color:var(--muted);
                 cursor:pointer; background:none; border:none; line-height:1; }
.modal .mclose:hover { color:var(--txt); }
.modal h3 { font-size:20px; font-weight:800; text-align:center; margin-bottom:6px; }
.modal .msub { text-align:center; color:var(--muted); font-size:13.5px; margin-bottom:20px; }
/* 顶栏用户区（登录后各入口不重叠） */
#userbar { display:inline-flex; align-items:center; gap:16px; white-space:nowrap; }
#userbar a { flex-shrink:0; }

.mplans { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
@media (max-width:600px){ .mplans { grid-template-columns:1fr; } }
.mplan { border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center;
         background:var(--panel2); transition:.18s; }
.mplan:hover { transform:translateY(-4px); box-shadow:0 8px 26px rgba(0,0,0,.45); }
.mplan.basic { border-color:rgba(16,185,129,.4); }
.mplan.pro { border-color:rgba(59,130,246,.45); box-shadow:0 0 18px rgba(59,130,246,.15); }
.mplan.ultimate { border-color:rgba(212,175,55,.55); box-shadow:0 0 22px rgba(212,175,55,.2); }
.mplan .pn { font-size:18px; font-weight:700; }
.mplan .pp { font-size:26px; font-weight:800; margin:8px 0; color:var(--txt); }
.mplan.ultimate .pp { color:var(--gold); }
.mplan.pro .pp { color:var(--blue); }
.mplan.basic .pp { color:var(--green); }
.mplan ul { list-style:none; font-size:13.5px; color:var(--muted); text-align:left; }
.mplan li { padding:3px 0; }
.mplan li::before { content:"✓ "; color:var(--green); }
.mplan .go { display:block; margin-top:14px; background:var(--grad); color:#14140a; border-radius:9px;
             padding:10px; font-weight:700; font-size:15px; text-decoration:none; }
.mplan .go:hover { filter:brightness(1.08); }

/* ---------- 浅色主题（html[data-theme="light"]） ---------- */
html[data-theme="light"] {
  --bg:#f4f6f8; --panel:#ffffff; --panel2:#eef1f4; --line:#dde2e8;
  --txt:#1a2233; --muted:#64748b; --navy:#2563eb; --green:#059669;
  --orange:#d97706; --red:#dc2626; --purple:#7c3aed; --blue:#0ea5e9; --gray:#94a3b8;
  --gold:#b8860b; --gold-l:#d4a72c; --grad:linear-gradient(135deg,#d4af37,#f0d88a);
}
html[data-theme="light"] body { background:var(--bg); color:var(--txt); }
html[data-theme="light"] .top { background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); }