/* ============================================================
   Poker Workbench · Design System v2 (Awwwards-grade overlay)
   ------------------------------------------------------------
   覆盖式设计系统：不修改 HTML 结构，仅增强视觉/交互/动效。
   设计语言：暖瓷米白 × 深墨 · 鎏金橙品牌 · 翡翠绿点缀
   字体：系统中文栈 + Inter 数字/西文
   ============================================================ */
:root{
  --ds-bg:#f6f2ea;
  --ds-bg2:#efe7d8;
  --ds-surface:#ffffff;
  --ds-surface2:#fbf8f1;
  --ds-ink:#2b2418;
  --ds-ink2:#6b5d48;
  --ds-ink3:#9c8b70;
  --ds-line:#e7ddca;
  --ds-line2:#d9ccb2;
  --ds-brand:#c96f2e;
  --ds-brand2:#e8963a;
  --ds-brand-soft:#fdf0dd;
  --ds-green:#3a8f5f;
  --ds-green-soft:#e6f4ec;
  --ds-red:#c0392b;
  --ds-red-soft:#fbeae7;
  --ds-blue:#2f6f9f;
  --ds-blue-soft:#e8f1f8;
  --ds-radius:16px;
  --ds-radius-s:10px;
  --ds-shadow-sm:0 1px 2px rgba(43,36,24,.05),0 2px 8px rgba(43,36,24,.05);
  --ds-shadow-md:0 2px 6px rgba(43,36,24,.06),0 12px 28px rgba(43,36,24,.10);
  --ds-shadow-lg:0 8px 24px rgba(43,36,24,.12),0 24px 48px rgba(43,36,24,.12);
  --ds-font:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Microsoft YaHei",system-ui,sans-serif;
  --ds-font-num:Inter,"PingFang SC",system-ui,sans-serif;
  --ds-ease:cubic-bezier(.22,.61,.36,1);
  --ds-dur:.28s;
}

/* ---------- 全局 ---------- */
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 500px at 80% -8%, rgba(232,150,58,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(58,143,95,.07), transparent 55%),
    var(--ds-bg);
  font-family:var(--ds-font);
  color:var(--ds-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:700;letter-spacing:.01em;color:var(--ds-ink)}
a{transition:color var(--ds-dur) var(--ds-ease)}

/* ---------- 卡片体系 ---------- */
.card{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);
  box-shadow:var(--ds-shadow-sm);
  transition:box-shadow var(--ds-dur) var(--ds-ease),transform var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease);
}
.card:hover{box-shadow:var(--ds-shadow-md);border-color:var(--ds-line2)}
.card-head{
  border-bottom:1px solid var(--ds-line);
  background:linear-gradient(180deg,var(--ds-surface2),var(--ds-surface));
  border-radius:var(--ds-radius) var(--ds-radius) 0 0;
  font-weight:700;letter-spacing:.02em;
}

/* ---------- 按钮体系 ---------- */
.btn{
  border-radius:var(--ds-radius-s);
  border:1px solid var(--ds-line2);
  background:var(--ds-surface);
  color:var(--ds-ink2);
  font-weight:600;
  transition:all var(--ds-dur) var(--ds-ease);
  box-shadow:var(--ds-shadow-sm);
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--ds-shadow-md);border-color:var(--ds-brand2);color:var(--ds-brand)}
.btn:active{transform:translateY(0);box-shadow:var(--ds-shadow-sm)}
.btn.primary,.btn[class*=primary]{
  background:linear-gradient(135deg,var(--ds-brand2),var(--ds-brand));
  color:#fff;border:none;
  box-shadow:0 4px 14px rgba(201,111,46,.32);
}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(201,111,46,.40);filter:brightness(1.04)}
.btn.danger{color:var(--ds-red);border-color:#f0c9c2}
.btn.danger:hover{border-color:var(--ds-red);background:var(--ds-red-soft)}
.btn.small{border-radius:8px;padding:4px 10px;font-size:12px}

/* ---------- 输入框 ---------- */
input[type=text],input[type=password],input[type=search],input[type=number],select,textarea{
  border:1.5px solid var(--ds-line2);
  border-radius:var(--ds-radius-s);
  background:var(--ds-surface);
  color:var(--ds-ink);
  transition:border-color var(--ds-dur) var(--ds-ease),box-shadow var(--ds-dur) var(--ds-ease),background var(--ds-dur) var(--ds-ease);
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--ds-brand2);
  box-shadow:0 0 0 4px rgba(232,150,58,.16);
  background:#fffdf9;
}
input::placeholder{color:var(--ds-ink3)}

/* ---------- 徽章 / 标签 / 状态 ---------- */
.badge,.chip,.stat-pill{
  border-radius:999px;
  font-weight:600;
  letter-spacing:.02em;
}
.badge-ok,.badge-success{background:var(--ds-green-soft);color:var(--ds-green)}
.badge-no,.badge-warn{background:var(--ds-red-soft);color:var(--ds-red)}
.hint{color:var(--ds-ink3);font-size:12.5px;letter-spacing:.01em}

/* ---------- 表格 ---------- */
table{border-collapse:separate;border-spacing:0}
table th{
  text-transform:none;letter-spacing:.03em;
  background:var(--ds-surface2);
  color:var(--ds-ink2);
  font-weight:700;
  border-bottom:1.5px solid var(--ds-line2);
}
table td{border-bottom:1px solid var(--ds-line);color:var(--ds-ink2);font-size:13.5px}
table tr{transition:background var(--ds-dur) var(--ds-ease)}
table tbody tr:hover{background:#fdf9f1}

/* ---------- 顶部导航（base.html nav） ---------- */
nav,.topbar{
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(217,204,178,.5);
  box-shadow:0 1px 0 rgba(43,36,24,.03);
}
nav a{color:var(--ds-ink2);font-weight:600;letter-spacing:.01em;transition:color var(--ds-dur) var(--ds-ease)}
nav a:hover{color:var(--ds-brand)}
nav a.on,nav a.active{color:var(--ds-brand);border-bottom:2px solid var(--ds-brand)}

/* ---------- 进度条 ---------- */
.progress{height:8px;border-radius:999px;background:var(--ds-bg2);overflow:hidden}
.progress .bar{
  background:linear-gradient(90deg,var(--ds-brand2),var(--ds-brand));
  border-radius:999px;
  transition:width .5s var(--ds-ease);
  position:relative;
}
.progress .bar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:dsShimmer 1.6s infinite;
}
@keyframes dsShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- 骨架屏（加载占位） ---------- */
.ds-skeleton{
  border-radius:12px;
  background:linear-gradient(90deg,var(--ds-bg2) 25%,#f1e9da 50%,var(--ds-bg2) 75%);
  background-size:400% 100%;
  animation:dsSkeleton 1.4s var(--ds-ease) infinite;
}
@keyframes dsSkeleton{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* ---------- 动效库 ---------- */
.ds-fadeup{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ds-ease),transform .5s var(--ds-ease)}
.ds-fadeup.in{opacity:1;transform:none}
@keyframes dsPop{0%{transform:scale(.96);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes dsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* 数字滚动强调 */
.ds-num{font-family:var(--ds-font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- 空态插画（SVG 描边小人） ---------- */
.ds-empty{
  text-align:center;padding:48px 16px;color:var(--ds-ink3);
}
.ds-empty svg{width:96px;height:96px;margin-bottom:14px;opacity:.8}

/* ---------- 模态 ---------- */
.modal-mask{background:rgba(43,36,24,.42);backdrop-filter:blur(6px)}
.modal-content{
  border-radius:var(--ds-radius);
  box-shadow:var(--ds-shadow-lg);
  animation:dsPop .32s var(--ds-ease);
  border:1px solid var(--ds-line);
}

/* ---------- 响应式微调 ---------- */
@media (max-width:900px){
  body{background:var(--ds-bg)}
  .card{border-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--ds-line2);border-radius:999px;border:2px solid var(--ds-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--ds-ink3)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 徽标角标 ---------- */
.ds-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ds-brand2);box-shadow:0 0 0 3px rgba(232,150,58,.2);margin-right:6px}

/* ---------- 工具：muted / accent 文本 ---------- */
.ds-muted{color:var(--ds-ink3)}
.ds-accent{color:var(--ds-brand)}

/* ============================================================
   v3 增强（获奖级打磨）
   ============================================================ */

/* ---- 涟漪定位修复：按钮需要相对定位容器 ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}

/* ---- 无障碍：焦点可见 ---- */
:focus-visible{outline:2px solid var(--ds-brand2);outline-offset:2px;border-radius:6px}

/* ---- 顶栏品牌与导航动效 ---- */
.topbar{min-height:56px}
.topbar .brand{letter-spacing:.04em;font-weight:700}
.topbar .brand .logo{display:inline-block;filter:drop-shadow(0 2px 8px rgba(232,150,58,.45));animation:dsFloat 3.4s var(--ds-ease) infinite}
.topbar nav a{position:relative}
.topbar nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:-3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--ds-brand2),var(--ds-brand));
  transition:left var(--ds-dur) var(--ds-ease),right var(--ds-dur) var(--ds-ease);
}
.topbar nav a:hover::after,.topbar nav a.on::after,.topbar nav a.active::after{left:6%;right:6%}
.topbar.scrolled{box-shadow:0 2px 12px rgba(43,36,24,.08);border-bottom-color:rgba(217,204,178,.75)}
.badge.real{background:var(--ds-green-soft);color:var(--ds-green)}
.badge.lock{background:var(--ds-brand-soft);color:var(--ds-brand)}
.badge.dry{background:var(--ds-blue-soft);color:var(--ds-blue)}
.badge.nolock{background:var(--ds-red-soft);color:var(--ds-red)}

/* ---- 登录页 · 深黑鎏金高级感（覆盖旧紫色） ---- */
.center-body{
  background:
    radial-gradient(900px 520px at 78% -10%,rgba(201,111,46,.22),transparent 60%),
    radial-gradient(820px 460px at -8% 10%,rgba(232,150,58,.12),transparent 55%),
    linear-gradient(160deg,#231a12 0%,#17120c 55%,#100c08 100%) !important;
}
.login-wrap{box-shadow:0 30px 90px rgba(0,0,0,.5)}
.login-side{
  background:linear-gradient(165deg,rgba(201,111,46,.16),rgba(23,18,12,.28)),#241a10;
  color:#f3e9d7;
}
.login-side h1{
  background:linear-gradient(120deg,#f7d9a8,#e8963a 60%,#c96f2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-side .cards-deco{color:var(--ds-brand2);text-shadow:0 0 26px rgba(232,150,58,.55)}
.login-side p{color:#d8c5a6}
.login-card{
  background:rgba(30,24,18,.72);
  backdrop-filter:blur(18px);
  border:1px solid rgba(217,204,178,.18);
  border-radius:0 22px 22px 0;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.login-card h2{color:#f3e9d7;letter-spacing:.14em}
.login-card label{color:#d8c5a6;font-weight:600}
.login-card input{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(217,204,178,.25);
  color:#f7efdf;
  border-radius:12px;
  padding:12px 14px;
  width:100%;
}
.login-card input:focus{border-color:var(--ds-brand2);box-shadow:0 0 0 4px rgba(232,150,58,.18);background:rgba(255,255,255,.10)}
.login-card input::placeholder{color:#8f7d5e}
.login-card .big{
  background:linear-gradient(135deg,var(--ds-brand2),var(--ds-brand));
  color:#fff;border:none;border-radius:12px;
  box-shadow:0 8px 22px rgba(201,111,46,.35);
  font-weight:700;letter-spacing:.22em;padding:13px;
}
.login-card .big:hover{filter:brightness(1.06);box-shadow:0 12px 30px rgba(201,111,46,.45)}
.login-hint details{background:rgba(255,255,255,.05);border:1px solid rgba(217,204,178,.16)}
.login-hint summary{color:#d8c5a6}
.login-note{color:#f0b35c !important}

/* ---- 门户 hero 流光 ---- */
.hero{position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.20) 46%,transparent 62%);
  transform:translateX(-130%);
  animation:dsSheen 6.5s var(--ds-ease) infinite;
}
@keyframes dsSheen{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(135%)}}

/* ---- 状态点脉冲 ---- */
.ds-dot{animation:dsPulse 2.2s ease-out infinite}
@keyframes dsPulse{
  0%{box-shadow:0 0 0 0 rgba(232,150,58,.45)}
  70%{box-shadow:0 0 0 8px rgba(232,150,58,0)}
  100%{box-shadow:0 0 0 0 rgba(232,150,58,0)}
}

/* ---- 表格斑马纹微交替 ---- */
table tbody tr:nth-child(even){background:rgba(251,248,241,.6)}

/* ---- 数字强调 ---- */
.ds-accent-strong{color:var(--ds-brand);font-weight:800}

/* ---- 小屏导航可滚动 ---- */
@media (max-width:900px){
  .topbar{flex-wrap:wrap;padding:10px 12px}
  .topbar nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .topbar nav a::after{display:none}
  .login-wrap{border-radius:22px}
  .login-side,.login-card{border-radius:16px}
}