/* 鹭港智策 · 全局视觉增强：大标题、深色渐变、玻璃卡片、动效 */
:root{
  --ui-ink:#0b1f2a;
  --ui-teal:#0d9488;
  --ui-teal-dark:#0f766e;
  --ui-amber:#f59e0b;
  --ui-line:rgba(15,23,42,.08);
  --ui-shadow:0 24px 60px rgba(15,23,42,.12);
}
html{scroll-behavior:smooth}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed;
  inset:-20vh -10vw auto auto;
  width:520px;height:520px;
  background:radial-gradient(circle at 30% 30%,rgba(13,148,136,.22),transparent 65%);
  filter:blur(10px);
  pointer-events:none;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:auto auto -18vh -12vw;
  width:460px;height:460px;
  background:radial-gradient(circle at 60% 40%,rgba(245,158,11,.16),transparent 65%);
  filter:blur(12px);
  pointer-events:none;
  z-index:0;
}
body > *{position:relative;z-index:1}

/* 顶部滚动进度条 */
.ui-progress{
  position:fixed;left:0;top:0;height:3px;width:0%;
  background:linear-gradient(90deg,#0d9488,#f59e0b);
  z-index:99999;transition:width .12s linear;border-radius:0 3px 3px 0;
}

/* 标题更有力量 */
h1,h2{letter-spacing:-.03em}
body[data-page="manager"] h1,
body[data-page="admin"] h1,
body[data-page="staff"] h1,
body[data-page="decorate"] h1{
  font-weight:900;
}

/* 通用按钮：渐变、光扫 */
button,.btn{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
button:active,.btn:active{transform:scale(.98)}
.btn:not(.ghost):not(.danger),
button.btn:not(.ghost):not(.danger){
  background-image:linear-gradient(135deg,#0f766e 0%,#0d9488 50%,#14b8a6 100%);
  color:#fff;
  border:0;
  box-shadow:0 12px 28px rgba(13,148,136,.28);
  position:relative;
  overflow:hidden;
}
.btn:not(.ghost):not(.danger)::after,
button.btn:not(.ghost):not(.danger)::after{
  content:"";position:absolute;top:-60%;left:-40%;width:30%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:rotate(18deg);transition:left .55s ease;
}
.btn:not(.ghost):not(.danger):hover::after,
button.btn:not(.ghost):not(.danger):hover::after{left:120%}
.btn:not(.ghost):not(.danger):hover,
button.btn:not(.ghost):not(.danger):hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(13,148,136,.34);
}
input,select,textarea{transition:border-color .18s,box-shadow .18s,background .18s}
input:focus,select:focus,textarea:focus{
  outline:0;border-color:rgba(13,148,136,.65)!important;
  box-shadow:0 0 0 4px rgba(13,148,136,.12);
}

/* 卡片：抬升 + 入场 */
.card,.kpi,.stat,.login,.panel{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover,.kpi:hover,.stat:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 56px rgba(15,23,42,.14)!important;
  border-color:rgba(13,148,136,.25)!important;
}
@keyframes ui-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
body[data-page] .card,
body[data-page] .kpi,
body[data-page] .stat{animation:ui-rise .65s cubic-bezier(.2,.7,.2,1) both}
body[data-page] .cards > *:nth-child(1),
body[data-page] .kpis > *:nth-child(1){animation-delay:.04s}
body[data-page] .cards > *:nth-child(2),
body[data-page] .kpis > *:nth-child(2){animation-delay:.09s}
body[data-page] .cards > *:nth-child(3),
body[data-page] .kpis > *:nth-child(3){animation-delay:.14s}
body[data-page] .cards > *:nth-child(4),
body[data-page] .kpis > *:nth-child(4){animation-delay:.19s}
body[data-page] .cards > *:nth-child(5),
body[data-page] .kpis > *:nth-child(5){animation-delay:.24s}
body[data-page] .cards > *:nth-child(6){animation-delay:.29s}
body[data-page] .cards > *:nth-child(7){animation-delay:.34s}

/* 首页：更强的深色开场 */
body[data-page="index"]{background:#f4f7f9}
body[data-page="index"] .hero{
  background:
    radial-gradient(900px 380px at 18% 0%,rgba(20,184,166,.55),transparent 65%),
    radial-gradient(700px 420px at 90% 10%,rgba(245,158,11,.18),transparent 60%),
    linear-gradient(135deg,#07171f 0%,#0b2b2e 48%,#0f4a46 100%)!important;
  padding:92px 24px 104px!important;
  position:relative;overflow:hidden;
}
body[data-page="index"] .hero::before{
  content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  border:1px solid rgba(94,234,212,.25);right:-80px;top:-120px;
  box-shadow:0 0 0 40px rgba(94,234,212,.04),0 0 0 90px rgba(94,234,212,.03);
}
body[data-page="index"] .hero::after{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.24),transparent 65%);
  left:-60px;bottom:-110px;
}
body[data-page="index"] .logo{
  font-size:54px!important;letter-spacing:6px!important;
  text-shadow:0 16px 40px rgba(0,0,0,.35);
}
body[data-page="index"] .logo span{
  background:linear-gradient(90deg,#fde68a,#f59e0b);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body[data-page="index"] .hero p{font-size:16px;letter-spacing:1px;margin-top:18px}
body[data-page="index"] .hero .badge{
  margin-top:28px;padding:9px 18px;font-size:12px;letter-spacing:1px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  border-color:rgba(153,246,228,.35);
}
body[data-page="index"] .wrap{max-width:1080px;margin-top:-62px}
body[data-page="index"] .cards{gap:18px}
body[data-page="index"] .card{
  position:relative;overflow:hidden;
  border-radius:22px;padding:26px;background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 50px rgba(15,23,42,.12);
}
body[data-page="index"] .card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#0d9488,#f59e0b,#0d9488);
  opacity:0;transition:opacity .2s;
}
body[data-page="index"] .card:hover::before{opacity:1}
body[data-page="index"] .card .ico{
  width:52px;height:52px;border-radius:16px;font-size:25px;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
body[data-page="index"] .card h3{font-size:20px}
body[data-page="index"] .card .go{margin-top:20px;font-size:13px;transition:transform .2s}
body[data-page="index"] .card:hover .go{transform:translateX(4px)}
body[data-page="index"] .note{
  background:rgba(255,255,255,.72);backdrop-filter:blur(12px);
  border:1px solid rgba(226,232,240,.9);border-radius:18px;
}

/* 会员端：手机壳更有质感 */
body[data-page="app"]{background:#cfdae3}
body[data-page="app"] .phone{
  box-shadow:0 30px 80px rgba(11,31,42,.22);
  background:linear-gradient(180deg,#eef4f6 0%,#f6f9fa 100%);
}
body[data-page="app"] .head{
  background:
    radial-gradient(420px 220px at 85% 0%,rgba(20,184,166,.5),transparent 60%),
    linear-gradient(145deg,#062a2a 0%,#0b4a44 55%,#0f766e 100%)!important;
  padding-bottom:76px!important;
}
body[data-page="app"] .head::after{
  width:220px;height:220px;background:radial-gradient(circle,rgba(245,158,11,.2),transparent 65%);
}
body[data-page="app"] .draw-btn{
  background:linear-gradient(110deg,#f59e0b,#f97316 55%,#ef4444)!important;
  box-shadow:0 16px 34px rgba(249,115,22,.38)!important;
  animation:ui-pulse 3s ease-in-out infinite;
}
@keyframes ui-pulse{0%,100%{box-shadow:0 16px 34px rgba(249,115,22,.38)}50%{box-shadow:0 18px 44px rgba(249,115,22,.55)}}
body[data-page="app"] .card{border-radius:20px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px)}

/* 店员端：深色核销台 */
body[data-page="staff"]{background:linear-gradient(180deg,#eef4f6,#f8fafb)}
body[data-page="staff"] .head{
  background:
    radial-gradient(600px 260px at 80% 0%,rgba(20,184,166,.35),transparent 60%),
    linear-gradient(135deg,#07171f,#0b2b2e 60%,#0f4a46);
  color:#fff;padding:34px 24px 30px;border-radius:0 0 26px 26px;margin:-1px -1px 20px;
}
body[data-page="staff"] .head h1{font-size:34px;color:#fff}
body[data-page="staff"] .head p{color:#cbd5e1}
body[data-page="staff"] .head .k{color:#99f6e4;letter-spacing:1px}
body[data-page="staff"] .wrap{max-width:760px}
body[data-page="staff"] .card{border-radius:20px;box-shadow:0 18px 44px rgba(15,23,42,.09)}
body[data-page="staff"] .code-input{
  height:64px;font-size:28px;letter-spacing:8px;text-align:center;
  border:2px solid rgba(13,148,136,.25);background:#f8fafc;
}
body[data-page="staff"] .result.ok{background:linear-gradient(135deg,#ecfdf5,#d1fae5);border-color:#6ee7b7}

/* 渠道端 */
body[data-page="channel"] .hero{
  background:
    radial-gradient(600px 300px at 85% 0%,rgba(20,184,166,.45),transparent 60%),
    linear-gradient(135deg,#07171f,#0b2b2e 55%,#0f4a46)!important;
  border-radius:0 0 30px 30px;
}
body[data-page="channel"] .top{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(226,232,240,.8)}
body[data-page="channel"] .card{border-radius:20px;background:rgba(255,255,255,.94)}
body[data-page="channel"] .btn.full{box-shadow:0 14px 30px rgba(13,148,136,.28)}

/* 管理后台：侧栏更有层次 */
body[data-page="admin"]{background:#eef3f6}
body[data-page="admin"] .side{
  background:
    radial-gradient(300px 300px at 0% 0%,rgba(13,148,136,.22),transparent 65%),
    linear-gradient(180deg,#07171f,#0b1f2a 65%,#0e2d36)!important;
  box-shadow:18px 0 50px rgba(11,31,42,.16);
}
body[data-page="admin"] .nav a.on{
  background:linear-gradient(135deg,#0d9488,#14b8a6)!important;
  box-shadow:0 10px 24px rgba(13,148,136,.35);
}
body[data-page="admin"] .main{background:linear-gradient(180deg,#f3f7f8,#eef3f6)}
body[data-page="admin"] .card{border-radius:18px;background:rgba(255,255,255,.94)}
body[data-page="admin"] .top h1{font-size:24px}

/* 店长看板 */
body[data-page="manager"]{background:
  radial-gradient(700px 300px at 90% 0%,rgba(13,148,136,.14),transparent 60%),
  linear-gradient(180deg,#eef5f6,#f6f9fa)}
body[data-page="manager"] .login{
  border-radius:22px;background:rgba(255,255,255,.94);
  box-shadow:0 30px 70px rgba(15,23,42,.16);
}
body[data-page="manager"] .kpi{
  border-radius:16px;background:rgba(255,255,255,.94);
}
body[data-page="manager"] .kpi b{
  background:linear-gradient(135deg,#0b1f2a,#0d9488);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body[data-page="manager"] .card{border-radius:18px;background:rgba(255,255,255,.94)}

/* 获客看板：更强对比 */
body[data-page="growth"] .hero{
  background:
    radial-gradient(800px 380px at 15% 0%,rgba(13,148,136,.55),transparent 60%),
    radial-gradient(500px 300px at 95% 20%,rgba(245,158,11,.18),transparent 65%),
    linear-gradient(135deg,#061217,#0b1f2a 55%,#082f2f);
}
body[data-page="growth"] .hero::before{
  content:"";position:absolute;right:-80px;top:-140px;width:480px;height:480px;border-radius:50%;
  border:1px solid rgba(94,234,212,.25);
  box-shadow:0 0 0 50px rgba(94,234,212,.04),0 0 0 110px rgba(94,234,212,.03);
}
body[data-page="growth"] .kpi{
  border-radius:18px;box-shadow:0 18px 40px rgba(11,31,42,.08);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
}
body[data-page="growth"] .kpi b{font-size:34px;letter-spacing:-2px}
body[data-page="growth"] .card{border-radius:20px;box-shadow:0 20px 48px rgba(11,31,42,.08)}
body[data-page="growth"] .bar i{transition:width 1.1s cubic-bezier(.2,.7,.2,1)!important}

/* 客屏 */
body[data-page="welcome"]{
  background:
    radial-gradient(700px 360px at 80% 0%,rgba(13,148,136,.4),transparent 60%),
    linear-gradient(145deg,#061217 0%,#0b1f2a 55%,#0d3f3b)!important;
}
body[data-page="welcome"] .logo,.welcome .sname{text-shadow:0 18px 50px rgba(0,0,0,.35)}

/* 装修 */
body[data-page="decorate"]{background:#eef4f6}
body[data-page="decorate"] .top{
  background:
    radial-gradient(500px 220px at 90% 0%,rgba(20,184,166,.35),transparent 60%),
    linear-gradient(135deg,#07171f,#0b2b2e 60%,#0f4a46);
  color:#fff;border-radius:0 0 24px 24px;
}
body[data-page="decorate"] .top .brand{color:#fff}
body[data-page="decorate"] .card{border-radius:18px;background:rgba(255,255,255,.94)}

/* 隐私/规则：阅读页 */
body[data-page="privacy"],body[data-page="rules"]{
  background:linear-gradient(180deg,#f4f8f8,#eef4f6);
}
body[data-page="privacy"] h1,body[data-page="rules"] h1{
  padding-left:14px;border-left:5px solid #0d9488;letter-spacing:-.02em;
}

/* 移动端 */
@media (max-width:760px){
  body[data-page="index"] .hero{padding:64px 20px 86px!important}
  body[data-page="index"] .logo{font-size:38px!important;letter-spacing:4px!important}
  body[data-page="index"] .wrap{margin-top:-48px}
  body[data-page="staff"] .head h1{font-size:28px}
  body[data-page="admin"] .side{display:none}
  body[data-page="admin"] .main{margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}