/* moment酒吧 · 客户端/员工 H5 共享样式
   ============================================================
   2026-09-25 视觉改版（第二版）：**夜场实景 + 清爽电蓝**。
   从「暖木质酒吧」切到「到酒吧听歌、点歌、互动」的年轻夜场：
     · 实景图片继续做主角，蓝色只承担「光、节奏、交互、正在发生」
     · 不做满屏蓝，也不做霓虹；克制、清醒、有秩序
     · 珊瑚红**只**用于 LIVE / 正在演出 / 提醒，不扩散到普通按钮
   三条落地原则：
     ① 普通信息**不裹卡片**：页面底色直接承载，靠分割线 + 间距 + 区块标题分层
     ② 需要强调的用**雾蓝面板**（当前消费 / 订单状态 / 选中项 / 支付金额）
     ③ 现场类内容用**午夜蓝舞台块**（LIVE / 当前演出 / 点播中 / 会员头部 / 购物车条）
   ============================================================ */
:root{
  /* ---- 页面与层次 ---- */
  --bg:#F4F8FC;                 /* 页面浅底：点单 / 功能中心这类明亮页面 */
  --panel:#E6F1FB;              /* 雾蓝底：分区背景 / 轻面板 / 强调块 */
  --panel2:#EDF5FD;             /* 更浅一档：选中行底 / 输入底 */
  --panel-r:14px;               /* 面板圆角（规范值） */
  --panel-line:rgba(12,68,124,.16);     /* 面板描边 */
  --line:rgba(4,44,83,.10);             /* 普通分割线（浅蓝细线） */
  --line-strong:rgba(55,138,221,.42);   /* 重点边框（行动蓝） */

  /* ---- 兼容旧令牌名 ----
     ⚠️ `--card` 不能设成 transparent：它还被输入框 / 数量控件 / 抽屉 / 卡面
     当作「表面」引用。这里设成雾蓝，真正的「去白卡」靠逐类删 background/border/shadow。 */
  --card:var(--panel);
  --card2:var(--panel2);

  --ink:#042C53;                /* 正文深蓝：标题与重要金额 */
  --ink2:#1B4A78;
  --ink3:#6B8DAE;               /* 浅蓝灰：次要信息 */
  --accent:#378ADD;             /* 行动蓝：主按钮 / 选中态 / 链接 / 进度 */
  --accent2:#85B7EB;            /* 高亮蓝：选中描边 / 图标 / 辅助信息 */
  --deep:#0C447C;               /* 深海蓝：图片遮罩 / 深色面板 / 重要状态 */
  --mid:#185FA5;                /* 中深蓝：浅底上的价格与强调文字 */
  --sky:#B5D4F4;                /* 浅蓝：描边 / 图片底衬 */
  --r:16px;
  /* 语义色：LIVE 珊瑚红只给「正在发生」，成功绿只做状态点缀 */
  --live:#E24B4A;
  --ok:#4E9A6A;
  --warn:#C9832F;
  --danger:#D0463F;

  /* ---- 阴影收敛 ---- 不靠浮起来分层，靠底色差 + 1px 分割线。
     只留 --shadow 给真正浮在页面之上的少数东西（抽屉 / 浮球）。 */
  --shadow:0 12px 30px rgba(4,44,83,.10);
  --shadow-sm:none;

  /* 兼容旧内联 var 引用 */
  --text-main:var(--ink); --text-dim:var(--ink3);
  --gold:var(--accent); --pink:var(--accent); --green:var(--deep);
  --navy:var(--deep);

  /* ===== 主题令牌（浅色形态；暗色覆盖见 assets/css/theme.css） =====
     --stage      手机壳外的桌面留白底
     --block      「午夜蓝舞台」面（LIVE / 当前演出 / 购物车条这类深底白字的块）
     --ring       灵动球外圈
     --tabbar-bg  底部导航半透底
     --av-grad    艺人头像浅底渐变
     --soft-grad  柔和浅底渐变（花束横幅 / 扑克背面）
     --chip-green 成功绿小标底色
     --pill / --veil  照片页上的浮层（menu.css 消费） */
  --stage:#E7EFF7;
  --block:#07121F;
  --ring:rgba(244,248,252,.92);
  --tabbar-bg:rgba(244,248,252,.94);
  --av-grad:linear-gradient(135deg,#D7E7F7,var(--accent2));
  --soft-grad:linear-gradient(135deg,var(--accent2),#D7E7F7);
  --chip-green:#DFF0E6;
  --pill:rgba(230,241,251,.9);
  --veil:rgba(230,241,251,.95);

  /* ===== 动效令牌（全站唯一来源，禁止再散落硬编码曲线） =====
     曲线取自 Emil Kowalski 的 UI 缓动标准：
       ease-out   进场/退场（强收尾，UI 默认）
       ease-in-out 屏内位移/形变
       ease-drawer 抽屉、面板拉出
     时长预算：按压 150ms · 标签浮层 200ms · 面板 300ms
     CSS 内置的 ease-out 太弱，用在刻意的动效上会显得拖沓。 */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --dur-press:150ms;
  --dur-pop:200ms;
  --dur-panel:300ms;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--stage);color:var(--ink);-webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
.phone-stage{display:flex;justify-content:center;padding:28px 0;min-height:100%}
.phone{
  width:390px;max-width:100%;min-height:810px;background:var(--bg);
  border-radius:38px;box-shadow:0 24px 60px rgba(4,44,83,.16);
  display:flex;flex-direction:column;overflow:hidden;position:relative;
  border:1px solid rgba(4,44,83,.06);
}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 6px;font-size:12px;color:var(--ink2);font-weight:600;letter-spacing:.2px}
.phone-content{flex:1;padding:10px 18px 96px;overflow-y:auto}
.page-head{display:flex;align-items:center;gap:10px;padding:6px 2px 14px}
.page-head .back{font-size:24px;color:var(--ink2);width:28px;line-height:1}
.page-head h1{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:.3px;flex:1}
.page-head .right{font-size:12px;color:var(--ink3);font-weight:600}
.section{margin-top:22px}
/* 区块标题：无卡布局里就靠「标题 + 一条分割线」分层（编辑型界面的读法） */
.stitle{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.2px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.stitle .bar{width:4px;height:16px;border-radius:2px;background:var(--accent)}
.stitle .more{margin-left:auto;font-size:12px;color:var(--ink3);font-weight:500}
/* 通用分割行：无卡列表的标准写法（末尾一条不画，避免和下一块标题叠线） */
.rule-row{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.rule-row:last-child{border-bottom:none}
/* 暖色面板：**需要强调**的内容才用它（当前消费 / 订单状态 / 选中礼物 / 支付金额）。
   规范 = 暖面板色 + 1px 暖描边 + 14px 圆角，**不靠阴影**。
   普通信息不要用它 —— 直接铺在页面底色上，用分割线分层。 */
.card{background:var(--panel);border:1px solid var(--panel-line);border-radius:var(--panel-r);padding:14px}
/* 标签：不再是一排白色胶囊。常规 = 雾蓝底 + 深海蓝字；成功 = 低饱和绿描边。 */
.chip{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px;background:var(--panel);color:var(--deep);border:1px solid transparent;white-space:nowrap}
.chip.pink{background:var(--panel2);color:var(--deep);border-color:transparent}
.chip.green{background:transparent;color:var(--ok);border-color:rgba(78,154,106,.42)}
.chip.gold{background:var(--accent);color:#fff;border-color:transparent}
/* 按钮体系（去白卡化）：
   主操作 = 木色实底 · 次操作 = 透明底 + 木色字 · 取消 = 灰字 · 当前选择 = 浅木底。
   一律不再用「白底描边」当主视觉，也不再靠投影浮起来。 */
.btn{display:block;text-align:center;padding:13px 18px;border:none;border-radius:13px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.4px;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-pop) ease,color var(--dur-pop) ease,border-color var(--dur-pop) ease;line-height:1.2}
.btn-block{width:100%}
.btn-lg{padding:15px 22px;font-size:16px}
.btn-gold{background:var(--accent);color:#fff}
.btn-pink{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid var(--line-strong)}
.btn-cancel{background:transparent;color:var(--ink3);border:none}
.btn-sel{background:var(--panel2);color:var(--ink)}
/* hover 只在真有指针的设备生效：触摸屏点按后会把 hover 状态「粘住」不放 */
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover,.btn-pink:hover{background:#2E7AC7}
  .btn-ghost:hover{background:var(--panel2)}
}
.t-dim{color:var(--ink3)}
.t-gold{color:var(--accent)}
.t-pink{color:var(--accent)}
.t-green{color:var(--navy)}
.t-mute{color:var(--ink3)}
.t1{font-size:14px;font-weight:700;color:var(--ink)}
.t2{font-size:12px;color:var(--ink3);margin-top:2px}
.between{display:flex;align-items:center;justify-content:space-between}
.row{display:flex;align-items:center}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.hscroll .item{flex:0 0 auto;width:118px}
.tabbar{position:absolute;left:0;right:0;bottom:0;background:var(--tabbar-bg);backdrop-filter:blur(10px);display:flex;border-top:1px solid var(--line);padding:8px 8px calc(10px + env(safe-area-inset-bottom));z-index:5}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--ink3);padding:6px 0;transition:color .18s ease;letter-spacing:.2px;position:relative}
.tabbar a:active{opacity:.6}
.tabbar a.active{color:var(--accent)}
.tabbar a.active::before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:18px;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.tabbar .ti{width:22px;height:22px;display:flex;align-items:center;justify-content:center}
.tabbar .tab-gap{flex:1;pointer-events:none}

/* ===== 打赏灵动球：悬浮于底部导航正中间，可拖拽 =====
   电蓝方向：深海蓝 → 行动蓝的**纯色层次**，并降低呼吸幅度
   （用户在看演出、点歌，不是在玩赛博游戏；避免持续晃动的霓虹感） */
.float-ball{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);width:54px;height:54px;border-radius:50%;background:linear-gradient(145deg,var(--deep),var(--accent));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(12,68,124,.42),0 0 0 5px var(--ring);z-index:30;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transition:box-shadow .2s ease;animation:fb-breathe 3.4s ease-in-out infinite}
.float-ball svg{pointer-events:none}
.float-ball:active{cursor:grabbing}
.float-ball.on{background:linear-gradient(145deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(55,138,221,.5),0 0 0 5px var(--ring),0 0 0 8px rgba(55,138,221,.16)}
.float-ball.dragging{animation:none;cursor:grabbing;box-shadow:0 12px 26px rgba(12,68,124,.48),0 0 0 5px var(--ring)}
.float-ball.placed{animation:none;transform:none}
@keyframes fb-breathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
@media (prefers-reduced-motion: reduce){.float-ball{animation:none}}
/* ===== 首页 home ===== */
/* 深色舞台块：现场内容（现场视频 / LIVE / 当前演出）—— 午夜蓝压暗层，全页唯一重色 */
.hero{margin:10px 0 6px;background:var(--block);border:none;border-radius:var(--r);padding:22px 20px;color:#fff}
/* LIVE 标签：深海蓝半透明底 + 珊瑚红呼吸点（珊瑚红只给「正在发生」） */
.hero .live{display:inline-flex;align-items:center;gap:6px;background:rgba(12,68,124,.6);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.3px;border:1px solid rgba(133,183,235,.5)}
.hero .live i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:livePulse 1.7s ease-out infinite}
.hero h2{font-size:22px;font-weight:800;letter-spacing:.3px;margin-top:12px;color:#fff}
.hero h2 em{font-style:normal;color:var(--accent2)}
.hero p{color:rgba(230,241,251,.66);font-size:13px;margin-top:8px;line-height:1.6}
/* LIVE 呼吸点（珊瑚红）—— 全站共用一份 */
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(226,75,74,.6)}70%{box-shadow:0 0 0 6px rgba(226,75,74,0)}100%{box-shadow:0 0 0 0 rgba(226,75,74,0)}}
@media (prefers-reduced-motion: reduce){.hero .live i{animation:none}}
.poker-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.poker-back{aspect-ratio:3/4.2;border-radius:10px;background:var(--panel2);border:1px solid var(--line-strong);position:relative;background-image:radial-gradient(circle at 50% 38%,var(--accent2) 0 7px,transparent 8px),linear-gradient(135deg,transparent 48%,rgba(55,138,221,.10) 49% 51%,transparent 52%)}
.poker-back::after{content:"";position:absolute;inset:7px;border:1px solid rgba(55,138,221,.35);border-radius:7px}
.singer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 歌手：不再是白卡方块。横向一行 —— 头像 / 名字 / 当前歌曲 / 右侧点歌，底部细分线 */
.singer-card{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;
  padding:13px 2px;display:flex;flex-direction:row;align-items:center;gap:12px}
.singer-card:last-child{border-bottom:none}
.singer-card .sb{flex:1;min-width:0}
.av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:var(--ink);background:var(--av-grad);border:1px solid var(--line-strong);position:relative;flex-shrink:0}
.av.alt{background:linear-gradient(135deg,#0C447C,#184F86);color:#EAF2FA;border-color:transparent}
.av .rank{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--accent);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;letter-spacing:.2px}
.av .rank.r2{background:var(--block)}
.av .rank.r3{background:var(--accent2);color:var(--ink)}
.av .rank.rm{background:var(--navy);color:#fff}
.singer-card .name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.singer-card .song{font-size:12px;color:var(--ink3);margin-top:3px}
.singer-card .tip{font-size:11px;color:var(--accent);font-weight:600;margin-top:5px}
/* 右侧点歌入口：透明底 + 木色字（次操作） */
.singer-card .go{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--accent);
  border:1px solid var(--line-strong);border-radius:20px;padding:6px 13px;background:transparent}

/* ===== 点单 order ===== */
/* 分段控件：容器用暖面板，选中项用更浅的木底（规范里的「当前选择：浅木色底」） */
.tabs-pill{display:flex;gap:8px;background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;padding:5px;margin:2px 0 4px}
.tabs-pill a{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--ink3);padding:9px 0;border-radius:10px;transition:color var(--dur-pop) ease,background-color var(--dur-pop) ease;letter-spacing:.2px}
.tabs-pill a.active{background:var(--panel2);color:var(--ink)}
/* 商品行：不再是一件件浮起的白卡 —— 与页面同底，靠分割线断开 */
.drink-card{display:flex;gap:12px;align-items:center;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:13px 2px}
.drink-card:last-child{border-bottom:none}
.drink-card .col{flex:1;min-width:0}
.drink-card .name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:.2px}
.drink-card .desc{font-size:12px;color:var(--ink3);margin-top:4px}
.drink-card .ctl{display:flex;align-items:center;margin-top:9px}
.price{font-size:16px;font-weight:800;color:var(--ink)}
.price .y{font-size:11px;font-weight:700;color:var(--accent);margin-right:1px}
/* 数量控件：透明底 + 细木描边，不再用白底方块 */
.qty{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-strong);border-radius:10px;padding:3px}
.qty button{width:26px;height:26px;border:none;border-radius:8px;background:var(--panel2);color:var(--ink2);font-size:15px;font-weight:700;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-press) ease,color var(--dur-press) ease}
@media (hover:hover) and (pointer:fine){.qty button:hover{background-color:var(--accent);color:#fff}}
.qty span{min-width:22px;text-align:center;font-size:13px;font-weight:700;color:var(--ink)}
/* 购物车底栏 = 深色舞台块（页面里最重的一块） */
.cart-bar{position:absolute;left:14px;right:14px;bottom:92px;display:flex;align-items:center;gap:12px;background:var(--block);border-radius:16px;padding:12px 14px;box-shadow:0 16px 34px rgba(27,24,21,.3);color:#fff;z-index:4}
.cart-bar .total{flex:1}
.cart-bar .lbl{font-size:11px;color:rgba(255,255,255,.62)}
.cart-bar .amt{font-size:18px;font-weight:800;margin-top:2px}
.cart-bar .btn{background:var(--accent);color:#fff;border-radius:11px;padding:11px 20px}

/* ===== 我的 mine =====
   普通数据不再一格一格裹白卡；整页只给「本场战绩」用一次浅木面板强调 */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-box{background:transparent;border:none;border-radius:0;padding:0}
.stat-box .lbl{font-size:11px;color:var(--ink3)}
.stat-box .val{font-size:22px;font-weight:800;color:var(--ink);margin-top:6px}
.stat-box .delta{font-size:11px;color:var(--ink3);margin-top:5px}
.delta.up{color:var(--accent)}
.delta.down{color:var(--danger)}
/* 浅木面板：留给「本场战绩」这类唯一重点 */
.stat-board{background:var(--panel2);border:1px solid var(--panel-line);border-radius:var(--panel-r);padding:14px}
.prog{height:8px;border-radius:6px;background:var(--panel);overflow:hidden}
/* 进度条：进入页面时从 0 伸长到目标值。用 scaleX 而不是 width —— 不触发布局重排 */
.prog i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--accent2),var(--accent));transform-origin:left center;animation:progIn 700ms var(--ease-out) both}
@keyframes progIn{from{transform:scaleX(0)}}
.order-item{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.order-item:last-child{border-bottom:none}
.order-item .tb{flex:1;min-width:0}
.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.func{background:transparent;border:none;border-radius:0;padding:14px 4px;display:flex;flex-direction:column;align-items:center;gap:7px}
.func .ei{font-size:20px;color:var(--ink2)}
.func .en{font-size:11.5px;font-weight:600;color:var(--ink2)}
/* ===== 打赏 tip ===== */
.flower-banner{background:var(--panel2);border-radius:var(--panel-r);padding:20px;text-align:center;border:1px solid var(--panel-line);margin-top:22px}
.flower-banner .big{font-size:38px}
.flower-banner .y{font-size:14px;color:var(--accent);font-weight:700}
.flower-banner .pn{font-size:34px;font-weight:800;color:var(--ink)}
/* 礼物格：透明底，选中才用浅木底（规范里的「当前选择」） */
.gift-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gift{background:transparent;border:1px solid transparent;border-radius:14px;padding:12px 4px;text-align:center;cursor:pointer;transition:transform var(--dur-press) var(--ease-out),border-color var(--dur-pop) ease,background-color var(--dur-pop) ease}
.gift .emoji{font-size:24px;line-height:1.2}
.gift .gn{font-size:11px;font-weight:600;color:var(--ink2);margin-top:6px}
.gift .gp{font-size:11px;color:var(--accent);font-weight:700;margin-top:3px}
.gift.sel{border-color:var(--line-strong);background:var(--panel2);animation:giftSel 320ms var(--ease-out)}
/* 选中时回弹一下，让「点中了」这件事有手感；只在切换选中时触发，连点同一个不会重播 */
@keyframes giftSel{0%{transform:scale(1)}38%{transform:scale(.93)}100%{transform:scale(1)}}
.gift .emoji{color:var(--ink3);transition:color .18s ease;display:flex;align-items:center;justify-content:center}
.gift.sel .emoji{color:var(--accent)}
.fxbg{height:120px;border-radius:var(--panel-r);background:radial-gradient(circle at 50% 60%,rgba(199,181,166,.35),transparent 70%);border:1px solid var(--panel-line);display:flex;align-items:center;justify-content:center}
.fxemoji{font-size:44px}
.draw-stage{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.draw-card{perspective:900px;width:150px;height:210px;cursor:pointer}
.draw-card .inner{position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d}
.draw-card.flip .inner{transform:rotateY(180deg)}
.draw-card .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel2)}
.draw-card .face.front{transform:rotateY(180deg)}
.draw-card .face.back{background:linear-gradient(135deg,#0C447C,#184F86);color:#EAF2FA;font-size:36px}
.song-list .li{display:flex;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.song-list .li:last-child{border-bottom:none}
.song-list .no{width:22px;height:22px;border-radius:50%;background:transparent;border:1px solid var(--line-strong);color:var(--ink3);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.song-list .tt{flex:1}
.song-list .pl{font-size:11px;color:var(--accent);font-weight:600}

/* ===== 翻扑克牌 poker ===== */
.poker-game{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.pcard{perspective:800px;cursor:pointer;aspect-ratio:3/4.6}
.pcard .pin{position:relative;width:100%;height:100%;transition:transform .5s ease;transform-style:preserve-3d}
.pcard.up .pin{transform:rotateY(180deg)}
.pcard .pf{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel2);font-size:26px}
.pcard .pf.front{transform:rotateY(180deg)}
.pcard .pf.back{background:var(--soft-grad);color:var(--ink)}

/* ===== 导航 index hub ===== */
.hub{max-width:560px;margin:0 auto;padding:44px 20px;min-height:100vh}
.hub-logo{font-size:26px;font-weight:900;letter-spacing:4px;color:var(--ink)}
.hub-sub{font-size:13px;color:var(--ink3);margin-top:8px;letter-spacing:1px}
.hub-cards{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.hub-card{display:block;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:20px 4px}
.hub-card .ic{font-size:30px}
.hub-card h3{font-size:17px;font-weight:800;color:var(--ink);margin-top:10px}
.hub-card p{font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.7}
.hub-card .tag{display:inline-block;margin-top:12px;font-size:11px;color:var(--accent);background:transparent;border:1px solid var(--line-strong);padding:4px 10px;border-radius:12px;font-weight:600}
.hub-foot{margin-top:36px;text-align:center;font-size:11px;color:var(--ink3);letter-spacing:.5px}

/* ===== 员工 staff ===== */
.login-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.login-logo{font-size:24px;font-weight:900;letter-spacing:4px;color:var(--ink);margin-top:10px}
.login-sub{font-size:11px;color:var(--ink3);letter-spacing:3px}
.role-pick{display:flex;gap:10px;width:100%;max-width:340px}
.role-pick .r{flex:1;text-align:center;padding:10px 0;border-radius:12px;border:1px solid var(--line-strong);background:transparent;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-pop) ease,border-color var(--dur-pop) ease,color var(--dur-pop) ease}
/* 当前选择 = 浅木底（规范），不是木色实底 —— 木色实底留给「主操作」 */
.role-pick .r.sel{background:var(--panel2);color:var(--ink);border-color:transparent}
.field{width:100%;max-width:340px}
.field .lbl{font-size:12px;color:var(--ink2);font-weight:600;margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--panel2);font-size:14px;color:var(--ink);outline:none;transition:border .18s ease}
.field input:focus{border-color:var(--accent)}
.switch{display:inline-block;width:40px;height:22px;border-radius:12px;background:var(--panel);position:relative;transition:background-color var(--dur-pop) ease;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--panel2);transition:transform var(--dur-pop) var(--ease-out)}
.switch.on{background:var(--accent)}
.switch.on::after{transform:translateX(18px)}
/* 状态标签：常规 = 雾蓝底 + 深海蓝字；选中/进行中 = 深海蓝底 + 白字；
   成功 = 低饱和绿，只做点缀，不抢蓝色主调 */
.st{font-size:11px;font-weight:700;padding:4px 9px;border-radius:10px;border:1px solid transparent}
.st.new{background:var(--panel);color:var(--deep);border-color:transparent}
.st.doing{background:var(--deep);color:#fff}
.st.done{background:transparent;color:var(--ok);border-color:rgba(78,154,106,.42)}

/* ===== 减少动态效果：更少更轻，而不是全关 =====
   去掉位移、生长、呼吸这类「动起来」的动画；
   保留按下时 3.5% 的缩放（它是反馈，幅度小且帮助确认操作已生效）。 */
@media (prefers-reduced-motion: reduce){
  .prog i{animation:none}
  .gift.sel{animation:none}
}