/* ============================================================
   灵云支付 · 靛蓝账房主题（印章 / Indigo Counting-House）
   ---------------------------------------------------------------
   设计取向：暖纸内容区 + 墨靛侧栏 + 朱红印章 + 赭金点缀。
   全部资源本地化，无外链字体 / 图片，弱网可正常呈现。
   依赖 lib/icons.php 的 icon() / brand_logo()。
   ============================================================ */
:root{
  /* 暖纸（内容区） */
  --bg:#efe9dc;
  --surface:#fffdf7;
  --surface-2:#f6f0e2;
  --surface-3:#fbf7ec;
  --border:#e6dcc6;
  --border-strong:#d8cab0;
  --text:#1d2436;
  --text-soft:#39404f;
  --muted:#746a58;
  --muted-2:#a99e89;
  /* 墨靛（主色 / 操作） */
  --primary:#2b49c4;
  --primary-2:#1c33a0;
  --primary-soft:#e9ecfb;
  --primary-line:#c9d2f6;
  /* 赭金（金额 / 价值） */
  --gold:#b1812a;
  --gold-2:#8c6320;
  --gold-soft:#f4ead0;
  /* 朱红印章（品牌 / 已付 / 记忆点） */
  --seal:#bd3b2c;
  --seal-2:#9c2c20;
  --seal-soft:#f7e3df;
  /* 状态色（暖调，贴合纸面） */
  --success:#2f8a55;
  --success-bg:#e3f1e8;
  --warning:#b27a18;
  --warning-bg:#f6edd6;
  --danger:#bd3b2c;
  --danger-bg:#f7e3df;
  /* 侧栏（墨靛夜） */
  --sidebar-bg:#141f3b;
  --sidebar-bg-2:#1c2a4e;
  --sidebar-text:#aeb9d6;
  --sidebar-muted:#5e6c90;
  --sidebar-line:rgba(255,255,255,.08);
  --radius:16px;
  --radius-sm:10px;
  --radius-xs:7px;
  --shadow:0 1px 2px rgba(40,30,10,.05),0 14px 34px -18px rgba(40,30,10,.22);
  --shadow-sm:0 1px 2px rgba(40,30,10,.05);
  --shadow-card:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -24px rgba(28,22,8,.32);
  --font:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Bahnschrift","DIN Alternate","Arial Narrow",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --serif:"Songti SC","STSong","Noto Serif SC","SimSun",serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(43,73,196,.18)}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 全局氛围：暖纸纹理 + 角落印章光晕 ---------- */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
  mix-blend-mode:multiply;
}
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 90% -8%,rgba(43,73,196,.07),transparent 60%),
    radial-gradient(760px 400px at -6% 102%,rgba(177,129,42,.07),transparent 60%);
}
.app{position:relative;z-index:1}

/* ============================================================
   登录页
   ============================================================ */
.login-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;overflow:hidden;
  background:
    radial-gradient(940px 520px at 84% -12%,rgba(43,73,196,.34),transparent 60%),
    radial-gradient(720px 460px at 6% 112%,rgba(177,129,42,.14),transparent 60%),
    linear-gradient(160deg,#0e1730 0%,#16224a 52%,#0e1730 100%);
}
.login-wrap::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;mix-blend-mode:overlay;
}

.login-wrap.split{display:grid;grid-template-columns:1.05fr .95fr;padding:0;align-items:stretch;justify-content:stretch}

/* hero：本地 SVG 插画 + 渐变遮罩 + 浮动光斑（无外链图） */
.login-hero{
  position:relative;overflow:hidden;min-height:100vh;
  background:linear-gradient(158deg,#15265e 0%,#0f1c44 55%,#0a1228 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.login-hero .hero-art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.96;
}
.login-hero .hero-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(14deg,rgba(8,14,32,.9) 0%,rgba(8,14,32,.5) 26%,rgba(8,14,32,.05) 60%,rgba(8,14,32,.34) 100%),
    linear-gradient(180deg,rgba(12,22,52,.5) 0%,transparent 34%);
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;animation:heroFloat 17s ease-in-out infinite}
.hero-orb.a{width:340px;height:340px;left:-10%;top:-12%;background:radial-gradient(circle,rgba(43,73,196,.7),transparent 68%)}
.hero-orb.b{width:260px;height:260px;right:-8%;bottom:16%;background:radial-gradient(circle,rgba(177,129,42,.42),transparent 68%);animation-delay:-6s}
.hero-orb.c{width:200px;height:200px;right:26%;top:-8%;background:radial-gradient(circle,rgba(189,59,44,.3),transparent 66%);animation-delay:-11s}
@keyframes heroFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(26px,-20px,0) scale(1.08)}66%{transform:translate3d(-18px,16px,0) scale(.94)}}

.login-hero .hero-brand{position:absolute;top:30px;left:34px;display:flex;align-items:center;gap:12px;z-index:2;animation:heroRise .7s .1s cubic-bezier(.2,.9,.3,1.1) both}
.login-hero .hero-brand .brand-logo{border-radius:11px;box-shadow:0 10px 26px -6px rgba(8,18,52,.7)}
.login-hero .hero-brand .t{color:#fff;font-size:16.5px;font-weight:700;letter-spacing:1.5px;line-height:1.3}
.login-hero .hero-brand .t small{display:block;font-size:11px;font-weight:400;color:rgba(210,228,255,.72);letter-spacing:2.5px}
.login-hero .hero-copy{position:relative;z-index:2;padding:0 40px 34px;color:#fff;animation:heroRise .8s .22s cubic-bezier(.2,.9,.3,1.1) both}
.login-hero .hero-copy h2{margin:0 0 10px;font-size:29px;line-height:1.45;letter-spacing:1px;font-weight:700;text-shadow:0 2px 24px rgba(2,10,30,.55)}
.login-hero .hero-copy h2 em{font-style:normal;color:#ffd591}
.login-hero .hero-copy p{margin:0;font-size:13.5px;color:rgba(214,229,252,.85);letter-spacing:.6px}
.login-hero .hero-feats{display:flex;gap:24px;margin-top:22px;flex-wrap:wrap;animation:heroRise .8s .34s cubic-bezier(.2,.9,.3,1.1) both}
.login-hero .hero-feats .f{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(222,235,255,.9);letter-spacing:.4px}
.login-hero .hero-feats .f .fi{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#ffd591;box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;flex:0 0 30px}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.login-panel{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:36px 28px;min-height:100vh}
@media(max-width:860px){
  .login-wrap.split{display:flex;justify-content:center}
  .login-hero{display:none}
  .login-panel{min-height:auto;flex:1}
}

.login-card{
  width:392px;max-width:100%;position:relative;z-index:1;
  background:rgba(255,253,247,.98);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;padding:38px 34px 30px;
  box-shadow:0 24px 70px -18px rgba(2,8,26,.6);
  animation:login-in .5s cubic-bezier(.2,.9,.3,1.2) both;
}
.login-panel .login-card{animation-delay:.12s}
@keyframes login-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.login-logo{width:60px;height:60px;border-radius:16px;overflow:hidden;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 10px 24px -6px rgba(189,59,44,.5),0 0 0 1px rgba(255,255,255,.25) inset;animation:logoGlow 3.6s ease-in-out infinite}
@keyframes logoGlow{0%,100%{box-shadow:0 10px 24px -6px rgba(189,59,44,.5),0 0 0 1px rgba(255,255,255,.25) inset}50%{box-shadow:0 10px 34px -4px rgba(177,129,42,.6),0 0 0 1px rgba(255,255,255,.3) inset}}
.login-logo .brand-logo,.login-logo svg{width:100%;height:100%}
.login-card h1{font-size:21px;text-align:center;margin:0 0 4px;letter-spacing:.5px}
.login-card .sub{text-align:center;color:var(--muted);margin:0 0 26px;font-size:13px}
.login-card label{display:block;font-size:13px;color:#4a4334;margin:14px 0 6px;font-weight:500}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:.18s;font-family:var(--font);background:#fffdf8;color:var(--text)}
.login-card input:hover{border-color:#c2b596}
.login-card input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(43,73,196,.12)}
.login-card button{width:100%;margin-top:24px;padding:12px;border:0;border-radius:var(--radius-sm);background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:2px;transition:.18s;position:relative;overflow:hidden;box-shadow:0 8px 18px -6px rgba(28,51,160,.5)}
.login-card button:hover{filter:brightness(1.07);transform:translateY(-1px)}
.login-card button:active{transform:translateY(0)}
.login-error{background:var(--danger-bg);color:var(--danger);border:1px solid #f0c8c2;border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;margin-bottom:6px;display:flex;align-items:center;gap:7px}
.login-hint{text-align:center;color:var(--muted-2);font-size:12px;margin-top:18px;line-height:1.7}
.login-foot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;font-size:11px;color:var(--muted-2);letter-spacing:.5px}
.login-foot .dot-sep{width:34px;height:1px;background:linear-gradient(90deg,transparent,#cfc3a6)}
.login-foot .dot-sep:last-child{background:linear-gradient(90deg,#cfc3a6,transparent)}

/* 超管登录：墨靛金主题 */
.login-wrap.super{background:radial-gradient(940px 520px at 84% -12%,rgba(189,59,44,.22),transparent 60%),radial-gradient(720px 460px at 6% 112%,rgba(177,129,42,.12),transparent 60%),linear-gradient(160deg,#190d12 0%,#241222 52%,#190d12 100%)}
.login-wrap.super .login-hero{background:linear-gradient(158deg,#3a1422 0%,#1f0d18 55%,#12060b 100%)}
.login-wrap.super .hero-orb.a{background:radial-gradient(circle,rgba(189,59,44,.6),transparent 68%)}
.login-wrap.super .hero-orb.b{background:radial-gradient(circle,rgba(177,129,42,.4),transparent 68%)}
.login-wrap.super .hero-copy h2 em{color:#ffb199}
.login-wrap.super .hero-feats .f .fi{color:#ffc79a}
.login-wrap.super .login-logo{animation-name:logoGlowGold}
@keyframes logoGlowGold{0%,100%{box-shadow:0 10px 24px -6px rgba(177,129,42,.5),0 0 0 1px rgba(255,255,255,.25) inset}50%{box-shadow:0 10px 34px -4px rgba(255,209,102,.62),0 0 0 1px rgba(255,255,255,.3) inset}}
.login-wrap.super .login-card button{background:linear-gradient(135deg,#c0392b,#9c2c20);box-shadow:0 8px 18px -6px rgba(189,59,44,.5)}
.login-wrap.super .login-card input:focus{border-color:var(--seal);box-shadow:0 0 0 4px rgba(189,59,44,.12)}

/* ============================================================
   应用骨架
   ============================================================ */
.app{display:flex;min-height:100vh}
.sidebar{
  width:240px;flex:0 0 240px;
  background:linear-gradient(180deg,var(--sidebar-bg) 0%,var(--sidebar-bg-2) 100%);
  color:var(--sidebar-text);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  overflow:visible;border-right:1px solid rgba(255,255,255,.05);
}
.sidebar::before{
  content:'';position:absolute;top:-60px;left:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(43,73,196,.34),transparent 66%);
  filter:blur(30px);pointer-events:none;animation:sideAurora 9s ease-in-out infinite;
}
@keyframes sideAurora{0%,100%{opacity:.6;transform:translate(0,0)}50%{opacity:1;transform:translate(14px,10px)}}
.sidebar .brand{display:flex;align-items:center;gap:11px;padding:20px 18px;border-bottom:1px solid var(--sidebar-line);position:relative}
.sidebar .brand::after{content:'';position:absolute;left:18px;right:18px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(177,129,42,.5),transparent)}
.sidebar .brand .logo{width:38px;height:38px;border-radius:11px;overflow:hidden;flex:0 0 38px;color:#fff;display:flex;align-items:center;justify-content:center;animation:logoGlow 3.6s ease-in-out infinite}
.sidebar .brand .logo .brand-logo{width:100%;height:100%;border-radius:11px}
.sidebar .brand .name{font-size:15px;font-weight:600;color:#fff;line-height:1.25;letter-spacing:.3px}
.sidebar .brand .name small{display:block;font-size:11px;color:var(--sidebar-muted);font-weight:400;letter-spacing:0}

body.area-super .sidebar{background:linear-gradient(180deg,#1a1410 0%,#2a1d12 100%)}
body.area-super .sidebar::before{background:radial-gradient(circle,rgba(177,129,42,.26),transparent 66%)}
body.area-super .sidebar .brand .logo{animation-name:logoGlowGold}
body.area-super .sidebar nav a.active{background:rgba(177,129,42,.15);color:#ffe2b0}
body.area-super .sidebar nav a.active::before{background:var(--gold);box-shadow:0 0 12px 2px rgba(177,129,42,.5)}
body.area-super .nav-area-tag{color:#e2b364;border-color:rgba(226,179,100,.3);background:rgba(226,179,100,.1)}

.nav-area-tag{margin:14px 14px 0;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.08em;color:#9fb6f0;border-color:rgba(159,182,240,.22);background:rgba(159,182,240,.1);align-self:flex-start;border:1px solid}
.sidebar nav{padding:12px;flex:1;overflow:auto;position:relative}
.sidebar nav a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:10px;color:var(--sidebar-text);font-size:14px;margin-bottom:3px;transition:.18s;position:relative;animation:navIn .45s both}
.sidebar nav a:nth-child(1){animation-delay:.05s}
.sidebar nav a:nth-child(2){animation-delay:.1s}
.sidebar nav a:nth-child(3){animation-delay:.15s}
.sidebar nav a:nth-child(4){animation-delay:.2s}
.sidebar nav a:nth-child(5){animation-delay:.25s}
@keyframes navIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.sidebar nav a:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff;transform:translateX(3px)}
.sidebar nav a.active{background:rgba(43,73,196,.18);color:#fff}
.sidebar nav a.active::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--primary);box-shadow:0 0 12px 2px rgba(43,73,196,.55)}
.sidebar nav a .ico{width:18px;text-align:center;font-size:15px}
.nav-switch{padding:0 12px 12px}
.nav-switch .switch-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:600;color:#cbd5e1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);transition:.16s}
.nav-switch .switch-btn:hover{text-decoration:none;color:#fff;background:rgba(255,255,255,.11)}
.nav-switch .switch-btn.super{color:#e2b364;border-color:rgba(226,179,100,.28);background:rgba(226,179,100,.08)}
.nav-switch .switch-btn.super:hover{background:rgba(226,179,100,.16);color:#ffe2b0}
.sidebar .foot{padding:14px 18px;font-size:11px;color:var(--sidebar-muted);border-top:1px solid var(--sidebar-line)}
.nav-close{display:none}

/* 侧栏插画（本地 SVG，无外链） */
.side-mascot{margin:6px 14px 12px;border-radius:14px;overflow:hidden;position:relative;background:linear-gradient(160deg,rgba(43,73,196,.16),rgba(177,129,42,.08));border:1px solid rgba(255,255,255,.1);padding:12px;display:flex;flex-direction:column;gap:9px;animation:mascotBreath 5s ease-in-out infinite}
@keyframes mascotBreath{0%,100%{box-shadow:0 0 0 rgba(177,129,42,0)}50%{box-shadow:0 6px 22px -8px rgba(177,129,42,.4)}}
.side-mascot .pic{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(150deg,#15224a,#22305c)}
.side-mascot .pic svg{width:100%;height:100%;display:block}
.side-mascot .pic .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5c78b4;font-size:11px;letter-spacing:1px}
.side-mascot .txt{font-size:12px;color:#bcd0ec;line-height:1.55;display:flex;align-items:center;gap:7px}
.side-mascot .txt .ico{color:#ffd591;flex:0 0 auto}
.side-mascot .txt small{display:block;color:#61779c;font-size:10.5px}
body.area-super .side-mascot{background:linear-gradient(160deg,rgba(177,129,42,.14),rgba(189,59,44,.07));border-color:rgba(226,179,100,.16)}
body.area-super .side-mascot .txt .ico{color:#ffe2b0}

/* 主区 */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{min-height:62px;background:rgba(255,253,247,.82);backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 26px;position:sticky;top:0;z-index:5}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 4%,rgba(43,73,196,.4) 30%,rgba(177,129,42,.4) 62%,transparent 96%)}
.topbar .crumb{font-size:15px;font-weight:600;color:var(--text);min-width:0}
.topbar .crumb small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.topbar .user{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--muted);flex-wrap:nowrap}
.topbar .user .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 34px;box-shadow:0 3px 8px -2px rgba(28,51,160,.5);position:relative}
.topbar .user .avatar::after{content:'';position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid #fff}
.hamburger{display:none;align-items:center;justify-content:center;width:38px;height:38px;flex:0 0 38px;margin-right:2px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer;padding:0}
.hamburger:active{background:var(--surface-2)}
.nav-scrim{position:fixed;inset:0;background:rgba(20,15,8,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.22s;z-index:40}
.content{padding:26px;max-width:1180px;width:100%}

.content>*{animation:cardIn .5s cubic-bezier(.2,.8,.3,1) both}
.content>*:nth-child(1){animation-delay:.02s}
.content>*:nth-child(2){animation-delay:.08s}
.content>*:nth-child(3){animation-delay:.14s}
.content>*:nth-child(4){animation-delay:.2s}
.content>*:nth-child(5){animation-delay:.26s}
.content>*:nth-child(6){animation-delay:.32s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hamburger{display:flex}
  .app{display:block}
  .sidebar{position:fixed;top:0;left:0;z-index:50;width:272px;max-width:82vw;flex:none;height:100vh;transform:translateX(-102%);transition:transform .24s cubic-bezier(.4,0,.2,1);box-shadow:0 0 40px rgba(0,0,0,.4)}
  body.nav-open .sidebar{transform:translateX(0)}
  body.nav-open .nav-scrim{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .nav-close{display:flex;align-items:center;justify-content:center;margin-left:auto;width:32px;height:32px;flex:0 0 32px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:9px;background:rgba(255,255,255,.06);color:#cbd5e1;cursor:pointer}
  .main{min-height:100vh}
  .topbar{padding:10px 14px;gap:10px}
  .topbar .crumb{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .user{gap:8px}
  .content{padding:16px 14px 32px}
  .card{padding:16px 14px;border-radius:12px}
  .page-head h2{font-size:19px}
}
@media(max-width:560px){
  .topbar .user .uname,.topbar .user .avatar{display:none}
  .topbar .user .btn .lbl{display:none}
  .topbar .user .btn{padding:8px 10px}
  .content{padding:14px 12px 28px}
  .stat .value{font-size:22px}
  .btn{padding:9px 13px}
  .btn-row .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- 通用卡片/标题 ---------- */
.page-head{margin-bottom:20px}
.page-head h2{margin:0 0 4px;font-size:22px;letter-spacing:-.2px;position:relative;padding-left:16px}
.page-head h2::before{content:'';position:absolute;left:0;top:5px;width:8px;height:20px;border-radius:3px;background:var(--seal);box-shadow:0 0 0 3px rgba(189,59,44,.14)}
.page-head p{margin:0;color:var(--muted);font-size:13px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow-card);margin-bottom:20px;position:relative;transition:box-shadow .22s,transform .22s,border-color .22s}
.card:hover{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 26px 50px -26px rgba(28,22,8,.4);border-color:var(--border-strong)}
.card h3{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px;letter-spacing:.2px}
.card h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}

/* 统计卡（账本风：顶部细尺线 + 印章指标） */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
@media(max-width:1080px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.stats{grid-template-columns:1fr;gap:12px}}
.stat{background:linear-gradient(170deg,#fffdf7 0%,#f8f2e4 100%);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.stat::before{content:'';position:absolute;left:14px;right:14px;top:0;height:1px;background:repeating-linear-gradient(90deg,var(--border-strong) 0 7px,transparent 7px 13px);opacity:.7}
.stat:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--border-strong)}
.stat .label{font-size:13px;color:var(--muted);margin-bottom:8px;margin-top:6px}
.stat .value{font-family:var(--disp);font-size:27px;font-weight:700;letter-spacing:.5px;font-variant-numeric:tabular-nums}
.stat .chip{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));box-shadow:0 6px 14px -2px rgba(43,73,196,.4);animation:chipBreath 4s ease-in-out infinite}
@keyframes chipBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.stat.ok .chip{background:linear-gradient(135deg,#2f8a55,#1f6e41);box-shadow:0 6px 14px -2px rgba(47,138,85,.4)}
.stat.warn .chip{background:linear-gradient(135deg,#c79121,#a06a14);box-shadow:0 6px 14px -2px rgba(177,129,42,.4)}
.stat.bad .chip{background:linear-gradient(135deg,#bd3b2c,#9c2c20);box-shadow:0 6px 14px -2px rgba(189,59,44,.4)}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;padding:10px 12px;border-bottom:2px solid var(--border);background:var(--surface-2);white-space:nowrap}
tbody td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr{transition:background .15s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
.mono{font-family:var(--mono);font-size:12.5px;color:#5a513c}
.key-cell{font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all;white-space:normal}
.empty{padding:34px 30px;text-align:center;color:var(--muted-2)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.table-wrap>table{min-width:640px}
@media(max-width:900px){.table-wrap{margin:0 -14px;padding:0 14px}thead th,tbody td{padding:9px 10px}}

/* 徽标 / 状态（印章风：描边方章） */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600;border:1.5px solid transparent;line-height:1.5}
.badge.green{color:var(--success);background:var(--success-bg);border-color:rgba(47,138,85,.35)}
.badge.amber{color:var(--warning);background:var(--warning-bg);border-color:rgba(177,122,24,.35)}
.badge.red{color:var(--seal);background:var(--seal-soft);border-color:rgba(189,59,44,.35)}
.badge.gray{color:var(--muted);background:#efe9db;border-color:var(--border-strong)}
.badge:not(.green):not(.amber):not(.red):not(.gray){color:var(--primary);background:var(--primary-soft);border-color:var(--primary-line)}

/* 按钮 / 表单 */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:.16s;font-family:var(--font)}
.btn:hover{text-decoration:none;border-color:#bba982;background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border:0;color:#fff;box-shadow:0 5px 14px -4px rgba(28,51,160,.5)}
.btn.primary:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--primary),var(--primary-2))}
.btn.danger{background:var(--seal);border:0;color:#fff}
.btn.danger:hover{filter:brightness(1.05)}
.btn.sm{padding:6px 12px;font-size:12.5px}
.btn.mini{font-size:12px;padding:4px 9px;border-radius:8px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

label.field{display:block;font-size:13px;color:#4a4334;margin:14px 0 6px;font-weight:500}
input.inp,textarea.inp,select.inp{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:14px;outline:none;transition:.16s;font-family:var(--font);background:#fffdf8;color:var(--text)}
input.inp:hover,textarea.inp:hover,select.inp:hover{border-color:#bba982}
input.inp:focus,textarea.inp:focus,select.inp:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(43,73,196,.12)}
textarea.inp{resize:vertical;min-height:90px;font-family:var(--mono);font-size:12.5px}

/* 提示框 */
.alert{border-radius:var(--radius-sm);padding:13px 15px;font-size:13.5px;margin-bottom:16px;line-height:1.7;border:1px solid;display:flex;align-items:flex-start;gap:8px}
.alert svg.ico{flex:0 0 auto;margin-top:1px}
.alert.info{background:#e9eefb;color:#1f3aa0;border-color:#c9d2f6}
.alert.success{background:var(--success-bg);color:#1f6e41;border-color:#bfe0cd}
.alert.warn{background:var(--warning-bg);color:#8a6012;border-color:#ecd9a6}
.alert.danger{background:var(--danger-bg);color:#9c2c20;border-color:#f0c8c2}
.alert b{font-weight:700}

/* 环境 / 通用清单 */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:10px;background:var(--surface)}
.checklist li .icon{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff}
.checklist li.pass .icon{background:var(--success)}
.checklist li.fail .icon{background:var(--seal)}
.checklist li .txt{flex:1}
.checklist li .txt b{display:block;font-size:14px}
.checklist li .txt span{font-size:12.5px;color:var(--muted)}
.checklist li .tag{font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px}
.checklist li.pass .tag{color:var(--success);background:var(--success-bg)}
.checklist li.fail .tag{color:var(--seal);background:var(--seal-soft)}

/* 代码块 / 日志 */
pre.code{background:#15203a;color:#cdd6ea;padding:14px 16px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:12.5px;overflow:auto;line-height:1.7;margin:0;border:1px solid rgba(255,255,255,.06);position:relative}
pre.code::before{content:'';position:absolute;left:12px;right:12px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(177,129,42,.5),transparent)}
pre.code .c{color:#5e6c90}
.log{background:#15203a;color:#86efac;padding:14px 16px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:12px;max-height:240px;overflow:auto;line-height:1.7;margin:0;white-space:pre-wrap;border:1px solid rgba(255,255,255,.06)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;gap:14px}}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13.5px;gap:14px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted);flex:0 0 auto}
.kv .v{font-weight:600;text-align:right;word-break:break-all}

/* 标签（必填 / 可选 / 静音） */
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:.02em;border:1px solid transparent}
.tag.req{color:#fff;background:var(--seal)}
.tag.opt{color:var(--muted);background:#efe9db;border-color:var(--border-strong)}
.tag-muted{font-weight:400;font-size:11.5px;color:var(--muted-2);margin-left:8px;border:1px solid var(--border);border-radius:999px;padding:1px 8px}

/* ---------- 接入示例（demo_shop） ---------- */
.proto-pick{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.proto-pick a{padding:8px 14px;border:1px solid var(--border-strong);border-radius:999px;font-size:13px;font-weight:600;color:var(--text)}
.proto-pick a.active{background:var(--primary);color:#fff;border-color:transparent}
.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:6px}
.good{border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;background:var(--surface);transition:.18s;position:relative;overflow:hidden}
.good::after{content:'';position:absolute;right:-20px;top:-20px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,rgba(177,129,42,.14),transparent 70%)}
.good:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.good .gname{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.good .gdesc{color:var(--muted);font-size:12.5px;margin:6px 0 10px;min-height:34px}
.good .gprice{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.good .gprice small{font-size:13px;font-weight:600;margin-right:1px}
.good .btn{width:100%;justify-content:center;margin-top:12px}

/* ---------- 超管后台表格组件 ---------- */
.sp-table{font-size:13px}
.sp-table td,.sp-table th{white-space:nowrap}
.sp-acts{display:flex;gap:6px;flex-wrap:wrap}
.sp-acts form{margin:0}
.pager{display:flex;gap:6px;align-items:center;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{padding:5px 11px;border-radius:8px;border:1px solid var(--border);font-size:13px;text-decoration:none;color:var(--text)}
.pager .cur{background:var(--primary);color:#fff;border-color:transparent}
.ready-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.ready-yes{background:#2f8a55}.ready-no{background:#c79121}
details.acc{border:1px solid var(--border);border-radius:12px;padding:10px 14px;margin-top:10px;min-width:230px}
details.acc summary{cursor:pointer;font-weight:600;font-size:13.5px}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:6px}
.filter-row .fi{display:flex;flex-direction:column;gap:5px;flex:1 1 150px}
.filter-row .inp,.filter-row select{margin:0;min-width:0;width:100%}
@media(max-width:760px){
  .mlist{display:grid;gap:12px}
  .mcard{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface)}
  .mcard .mhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
  .mcard .mhead b{font-size:15px}
  .mrow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--border)}
  .mrow:last-of-type{border-bottom:0}
  .mrow .mk{color:var(--muted);flex:0 0 auto}
  .mrow .mv{text-align:right;word-break:break-all}
  .mcard .sp-acts{margin-top:10px}
  .mcard .sp-acts .btn{flex:1 1 auto;justify-content:center}
}
@media(min-width:761px){.mlist{display:none}}
@media(max-width:760px){.dtable{display:none}}

/* ---------- 代码行内 / 步骤 ---------- */
code{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-family:var(--mono);font-size:12.5px;color:#9c2c20}
pre.code code,pre code{background:none;border:0;padding:0;color:inherit}
ol.steps{margin:0;padding-left:22px;color:#414a5e;font-size:13.5px;line-height:2}
ol.steps code{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:12.5px}
ul.steps{margin:0;padding-left:20px;color:#414a5e;font-size:13.5px;line-height:2}

/* ---------- 收款码相关 ---------- */
.qr-mode-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.qr-mode-row form{min-width:170px}
.qr-mode-row .btn{width:100%;justify-content:center}
.qr-preview{width:150px;height:150px;border:1px solid var(--border);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:12px}
.qr-preview img{max-width:100%;max-height:100%;object-fit:contain}
.qr-preview.empty-qr{color:var(--muted-2);font-size:12.5px;border-style:dashed}
.qr-test-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.qr-test{text-align:center}
.qr-test-canvas{width:148px;height:148px;background:#fff;border:1px solid var(--border);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:8px}
.qr-test-canvas img,.qr-test-canvas canvas{max-width:100%;max-height:100%}
.qr-test-label{font-size:12px;color:var(--muted);margin-top:6px}

/* 敏感值掩码 */
.masked{font-family:var(--mono);font-size:12px;color:#6b5d3f;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:8px 11px;margin-bottom:8px;display:flex;align-items:center;gap:7px;word-break:break-all}
.hint{color:var(--muted);font-size:12.5px;line-height:1.75;margin:10px 0 0}
.mono-inp{font-family:var(--mono);font-size:12.5px}
.db-grid{display:grid;grid-template-columns:96px 1fr;gap:10px 14px;align-items:center}
.db-grid .field{margin:0;text-align:right}
.db-grid .inp{width:100%}

label.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:12px 0 0;cursor:pointer;line-height:1.6}
label.check input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--primary);cursor:pointer;flex:0 0 16px}
input.inp[type=file]{padding:8px 10px;background:var(--surface-2);cursor:pointer;font-size:13px}
input.inp[type=file]::file-selector-button{margin-right:10px;padding:6px 12px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);font-family:var(--font);font-size:12.5px;font-weight:600;cursor:pointer}
input.inp[type=file]::file-selector-button:hover{border-color:var(--primary);color:var(--primary)}

/* 折叠面板 */
details.fold{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);overflow:hidden}
details.fold>summary{cursor:pointer;padding:11px 14px;font-size:13px;font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:7px;user-select:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'展开';margin-left:auto;font-weight:400;font-size:12px;color:var(--muted-2)}
details.fold[open]>summary::after{content:'收起'}
details.fold>summary:hover{color:var(--text);background:rgba(0,0,0,.02)}
details.fold .fold-body{padding:0 14px 14px;font-size:13px;line-height:1.8;color:var(--muted)}
details.fold .fold-body b{color:var(--text)}

/* 卡片头 / 底部工具 */
.card-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.card-hd h3{margin:0}
.card-hd .hint{margin:0}
.card-tools{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media(max-width:640px){.card-tools{flex-direction:column;align-items:stretch}.card-tools .btn-row{flex-wrap:wrap}}

/* SVG 图标与辅助 */
svg.ico{flex:0 0 auto;vertical-align:-3px}
.sidebar nav a svg.ico{width:18px;height:18px;opacity:.85}
.sidebar nav a.active svg.ico{opacity:1}
.sidebar .brand .logo svg.ico,.login-logo svg.ico{vertical-align:0}
.card h3 svg.ico{color:var(--primary)}
.btn svg.ico,.alert svg.ico,.login-error svg.ico{vertical-align:-3px}
.stat .chip svg.ico{vertical-align:0}
.topbar .user .avatar svg.ico{vertical-align:0}
.brand-logo{display:block}

/* 带图标的输入框 */
.inp-icon{position:relative;display:block}
.inp-icon svg.ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none}
.inp-icon input{padding-left:38px !important}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cdbf9f;border-radius:6px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#b6a684}
.sidebar::-webkit-scrollbar-thumb{background:#2a3950;border-color:transparent}

/* 动效可达性 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}