/* ============================================================================
   小莎 · 功能页深色主题（2026-09-29）
   用于「我的订单 / 账户中心 / 管理后台」这些共用 css/style.css 的页面。

   为什么不在 style.css 里改：那个文件是共享的，直接改会连带影响历史依赖。
   这里的做法是「覆盖 :root 变量 + 补齐 style.css 里写死的颜色」——
   style.css 基本是变量驱动的（背景色几乎都走 var(--white) / var(--border) / var(--gray)），
   所以把变量换成深色就能整体翻暗，只需再单独处理少数硬编码颜色。

   用法：在 <link href="/css/style.css"> **之后**加一行
         <link rel="stylesheet" href="/css/app-dark.css">
   ========================================================================== */

:root{
  /* —— 覆盖 style.css 的调色板（顺序在 style.css 之后，故生效）—— */
  --green:#7dffb0;          /* 主色：原来深绿 -> 霓虹绿，深底上才够亮 */
  --green-light:#31c777;
  --green-bg:rgba(125,255,176,.10);
  --red:#ff8a80;
  --orange:#ffb457;
  --gray:rgba(219,233,225,.66);
  --gray-light:rgba(255,255,255,.06);
  --border:rgba(125,255,176,.15);
  --white:#0e2a1d;          /* 关键：style.css 把 --white 当「卡片/导航底色」用 */
  --text:#dbe9e1;
  --radius:14px;

  /* —— 本文件自用 —— */
  --d-bg:#07130d; --d-bg2:#071c12; --d-panel:#0e2a1d; --d-panel2:#0a2117;
  --d-line:rgba(125,255,176,.15); --d-line2:rgba(125,255,176,.30);
  --d-muted:rgba(219,233,225,.66); --d-muted2:rgba(219,233,225,.46);
  --d-neon:#7dffb0; --d-neon-d:#31c777;
  --d-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --d-shadow:0 14px 34px rgba(0,0,0,.42);
}

html, body{ background:var(--d-bg) !important; color:var(--text); }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{ color:var(--green); }
::selection{ background:rgba(125,255,176,.28); }
b, strong{ color:#fff; }
h1, h2, h3, h4{ color:#fff; }

/* ---------- 导航：深色毛玻璃吸顶 ---------- */
nav{
  position:sticky; top:0; z-index:100;
  background:rgba(4,19,12,.82) !important;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--d-line) !important;
  box-shadow:none !important;
}
nav .logo, nav .logo a{ color:#fff !important; font-weight:800; letter-spacing:.2px; }
nav .nav-right a{ color:var(--d-muted) !important; transition:color .2s; }
nav .nav-right a:hover{ color:var(--d-neon) !important; }

/* ---------- 卡片 ---------- */
.card{
  background:linear-gradient(165deg,var(--d-panel),var(--d-panel2)) !important;
  border:1px solid var(--d-line) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--d-shadow) !important;
}
.card h2, .card h3{ color:#fff !important; }

/* ---------- 商品卡（下单区）---------- */
.product-card{
  background:rgba(7,23,16,.55) !important;
  border:1.5px solid var(--d-line) !important;
  border-radius:var(--radius) !important;
}
.product-card:hover{ border-color:var(--d-line2) !important; }
.product-card.selected{
  border-color:var(--d-neon) !important; background:rgba(125,255,176,.10) !important;
  box-shadow:0 0 0 1px rgba(125,255,176,.28), 0 14px 34px rgba(0,0,0,.42) !important;
}
.product-card .name{ color:#fff !important; }
.product-card .price{ color:var(--d-neon) !important; }
.product-card .days{ color:var(--d-muted) !important; }

/* ---------- 表单 ---------- */
.form-group label{ color:var(--d-muted) !important; }
.form-group input, .form-group select{
  background:rgba(0,0,0,.34) !important;
  border:1px solid var(--d-line) !important;
  color:var(--text) !important;
  border-radius:8px !important;
  font-family:inherit;
}
.form-group input::placeholder{ color:var(--d-muted2); }
.form-group input:focus, .form-group select:focus{
  border-color:var(--d-neon) !important;
  box-shadow:0 0 0 3px rgba(125,255,176,.14);
  outline:none;
}
.form-group .hint{ color:var(--d-muted2) !important; }

/* ---------- 按钮 ---------- */
.btn-primary{
  background:linear-gradient(135deg,var(--d-neon),var(--d-neon-d)) !important;
  color:#04220f !important;
  box-shadow:0 12px 30px rgba(125,255,176,.26);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--d-neon),var(--d-neon-d)) !important;
  box-shadow:0 16px 38px rgba(125,255,176,.4);
}
.btn-primary:disabled{ background:rgba(125,255,176,.28) !important; color:rgba(4,34,15,.72) !important; }
.btn-outline{
  background:rgba(125,255,176,.06) !important; color:#dff7e8 !important;
  border:1px solid var(--d-line2) !important;
}
.btn-outline:hover{ background:rgba(125,255,176,.15) !important; }
/* 危险操作：红底白字（--white 已被改成深色，必须显式给白字） */
.btn-danger{ background:linear-gradient(135deg,#ff6b6b,#d32f2f) !important; color:#fff !important; }
.btn-danger:hover{ background:linear-gradient(135deg,#ff7f7f,#e53935) !important; }
.btn-sm{ background:rgba(125,255,176,.08); color:var(--text); border-color:var(--d-line); }
.btn-sm:hover{ background:rgba(125,255,176,.16); }
.btn-sm.primary{ background:rgba(125,255,176,.16); color:var(--d-neon); border-color:var(--d-line2); }
.btn-sm.danger{ color:#ff8a80; border-color:rgba(255,138,128,.5); }
.btn-sm.danger:hover{ background:rgba(255,138,128,.14); }

/* ---------- 状态标签 ---------- */
.status-badge{ font-family:var(--d-mono); font-weight:600; }
.status-pending{   background:rgba(255,180,87,.16) !important;  color:#ffb457 !important; }
.status-paid{      background:rgba(125,255,176,.14) !important; color:var(--d-neon) !important; }
.status-fulfilled{ background:rgba(125,255,176,.22) !important; color:#9df7c4 !important; }
.status-refunded{  background:rgba(255,138,128,.16) !important; color:#ff8a80 !important; }
.status-cancelled{ background:rgba(255,255,255,.08) !important; color:var(--d-muted) !important; }

/* ---------- 激活码展示框 ---------- */
.activation-box{
  background:rgba(0,0,0,.42) !important;
  border:1px dashed var(--d-line2) !important;
  border-radius:var(--radius) !important;
}
.activation-box .key{ color:var(--d-neon) !important; }
.activation-box .meta{ color:var(--d-muted) !important; }

/* ---------- 弹窗（登录 / 支付）---------- */
.modal-overlay{ background:rgba(2,10,6,.74) !important; }
.modal{
  background:linear-gradient(165deg,var(--d-panel),var(--d-panel2)) !important;
  border:1px solid var(--d-line2); color:var(--text);
  box-shadow:0 30px 70px rgba(0,0,0,.6) !important;
}
.modal h3{ color:#fff; }
.modal .price-display{ color:var(--d-neon) !important; font-family:var(--d-mono); }
.modal .pay-btn{
  background:rgba(0,0,0,.30) !important; border:2px solid var(--d-line) !important; color:var(--text) !important;
}
.modal .pay-btn:hover, .modal .pay-btn.selected{
  border-color:var(--d-neon) !important; background:rgba(125,255,176,.10) !important;
}
.modal .qrcode-placeholder{
  background:rgba(255,255,255,.05) !important;
  border-color:var(--d-line) !important; color:var(--d-muted) !important;
}

/* ---------- 订单表格 ---------- */
.order-table th{ background:rgba(125,255,176,.10) !important; color:var(--d-neon) !important; font-family:var(--d-mono); }
.order-table th, .order-table td{ border-bottom:1px solid var(--d-line) !important; color:var(--text); }

/* ---------- 消息提示 ---------- */
.toast{ box-shadow:0 18px 40px rgba(0,0,0,.5) !important; font-weight:600; border:1px solid; }
.toast-success{ background:rgba(125,255,176,.16) !important; color:#cdf6e0 !important; border-color:rgba(125,255,176,.42) !important; }
.toast-error{   background:rgba(220,38,38,.20) !important;  color:#ffc9c4 !important; border-color:rgba(255,138,128,.45) !important; }
.toast-info{    background:rgba(41,128,185,.20) !important; color:#bfe0f5 !important; border-color:rgba(74,163,224,.45) !important; }

/* ---------- 统计卡（管理后台）---------- */
.stat-card{
  background:linear-gradient(165deg,var(--d-panel),var(--d-panel2)) !important;
  border:1px solid var(--d-line) !important;
}
.stat-card .value{ color:var(--d-neon) !important; font-family:var(--d-mono); }

/* ---------- 空状态 / 页脚 ---------- */
.empty-state{ color:var(--d-muted) !important; }
.empty-state .icon{ opacity:.85; }
footer{
  background:#04130c !important; border-top:1px solid var(--d-line);
  color:var(--d-muted2) !important; padding:28px 20px !important;
}
footer a{ color:var(--d-muted) !important; }
footer a:hover{ color:var(--d-neon) !important; }

/* ---------- 其它 ---------- */
.divider-line{ background:linear-gradient(90deg,transparent,var(--d-line2),transparent) !important; }
.container{ padding-top:28px; padding-bottom:40px; }

/* 不在 .form-group 里的裸表单控件（如管理后台的「状态筛选」下拉）——
   浏览器默认给它们白底黑字，深色页面上会变成刺眼的白块。 */
select, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea{
  background:rgba(0,0,0,.34) !important;
  border:1px solid var(--d-line) !important;
  color:var(--text) !important;
  border-radius:8px;
  font-family:inherit;
}
select:focus, input:focus, textarea:focus{
  border-color:var(--d-neon) !important;
  box-shadow:0 0 0 3px rgba(125,255,176,.14);
  outline:none;
}
select option{ background:#0e2a1d; color:var(--text); }

/* 语言切换按钮：js/app.js 的 initLangToggle() 用 **内联样式** 给了白底
   （border:1px solid #ccc; background:#fff）—— 内联样式优先级高于普通规则，
   必须用 !important 才压得住，否则深色导航上会挂一个白块。 */
.lang-btn{
  background:rgba(125,255,176,.08) !important;
  color:var(--d-neon) !important;
  border:1.5px solid var(--d-line2) !important;
  border-radius:999px !important;
  padding:5px 14px !important;
  margin-left:14px !important;
  font-weight:700 !important;
  cursor:pointer;
  transition:background .2s;
}
.lang-btn:hover{ background:rgba(125,255,176,.18) !important; }
/* ===== 移动端触控目标（2026-09-29）=====
   实测 .lang-btn 48x27、.btn-sm 56x37，拇指点不准；窄屏统一加到 >=40px 高。 */
@media (max-width:820px){
  .lang-btn, .btn-sm{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  .btn-sm{ padding-left:16px; padding-right:16px; }
  .modal .pay-btn{ min-height:48px; }
}