/* ==========================================================
   知易疗愈师 · 预览版 样式系统
   依据规格说明书 第十部分 UI 设计系统
   ========================================================== */

:root{
  --gold:#C9A96E;
  --gold-l:#E0C88A;
  --gold-d:#A88B4A;
  --violet:#7B6B9E;
  --violet-l:#9B8BBE;
  --violet-d:#5B4B7E;

  --bg:#1A1A2E;
  --bg2:#24243E;
  --card:#2D2D44;
  --card2:#33334E;
  --line:#3D3D5C;

  --text:#F5F0E8;
  --text2:#A0A0B0;
  --hint:#6A6A7A;

  --ok:#4CAF50;
  --err:#E74C3C;
  --warn:#F39C12;
  --info:#3498DB;

  --wx-metal:#F5F0E8;
  --wx-wood:#4CAF50;
  --wx-water:#3498DB;
  --wx-fire:#E74C3C;
  --wx-earth:#F39C12;

  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px;

  --serif:'Songti SC','STSong','Noto Serif SC','Source Han Serif SC',serif;
  --sans:'PingFang SC','Hiragino Sans GB','Noto Sans SC','Microsoft YaHei',sans-serif;
  --num:'DIN Alternate','Bahnschrift','Helvetica Neue',sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
div[style*="display:flex"] > .btn{width:auto;min-width:0;white-space:nowrap;}
.glass.card,#birthForm{overflow-x:hidden;}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;min-height:44px;} touch-action: manipulation; -webkit-tap-highlight-color: transparent;height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 12% -10%, #2a2350 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 110%, #22183a 0%, transparent 55%),
    #12121f;
  font-family:var(--sans);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  padding:28px 20px;
  overflow-x:hidden;
}

/* ================= 舞台 ================= */
.stage{display:flex; gap:44px; align-items:flex-start;}

/* --------------- 侧栏 --------------- */
.side{width:274px; padding-top:12px; user-select:none;}
.side-brand{display:flex; gap:12px; align-items:center; margin-bottom:26px;}
.side-logo{
  width:46px;height:46px;border-radius:14px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:linear-gradient(145deg,rgba(201,169,110,.28),rgba(123,107,158,.18));
  border:1px solid rgba(201,169,110,.45);color:var(--gold-l);
  box-shadow:0 6px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
}
.side-title{font-family:var(--serif);font-size:19px;letter-spacing:2px;color:var(--gold-l);}
.side-sub{font-size:11.5px;color:var(--hint);margin-top:3px;letter-spacing:1px;}

.side-block{margin-bottom:22px;}
.side-label{
  font-size:11px;color:var(--gold);letter-spacing:2.4px;margin-bottom:10px;
  text-transform:uppercase;font-weight:600;
}
.side-list{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:1.95;color:var(--text2);}
.side-list li{padding-left:14px;position:relative;}
.side-list li::before{
  content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:.75;
}
.side-list b{color:var(--gold-l);font-weight:600;}
.side-list.dim li::before{background:var(--violet-l);}

.side-chips{display:flex;flex-wrap:wrap;gap:8px;}
.side-chip{
  border:1px solid var(--line);background:rgba(45,45,68,.6);color:var(--text2);
  padding:6px 11px;border-radius:20px;font-size:12px;cursor:pointer;
  transition:.22s;font-family:var(--sans);
}
.side-chip:hover{border-color:var(--gold);color:var(--gold-l);transform:translateY(-1px);}

.side-foot{
  font-size:11px;color:#4d4d63;line-height:1.8;border-top:1px solid #26263a;padding-top:14px;
}

/* --------------- 手机外壳 --------------- */
.device-shell{position:relative;}
.device-frame{
  position:relative;
  width:416px;height:866px;
  border-radius:56px;
  padding:13px;
  background:linear-gradient(160deg,#3a3a52 0%,#1b1b2c 45%,#2c2c42 100%);
  box-shadow:
    0 46px 90px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 2px 0 rgba(255,255,255,.12) inset;
}
.device-frame::after{
  content:'';position:absolute;inset:0;border-radius:56px;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,transparent 32%,transparent 66%,rgba(255,255,255,.07) 100%);
  z-index:9;
}
.device-screen{
  position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;
  background:
    radial-gradient(520px 420px at 50% -8%, #2b2550 0%, transparent 62%),
    linear-gradient(180deg,#1d1d33 0%,var(--bg) 42%,#15152a 100%);
  display:flex;flex-direction:column;
}
.device-btn-side{position:absolute;right:-3px;top:196px;width:3px;height:96px;border-radius:3px;background:#2c2c40;}
.device-btn-vol{position:absolute;left:-3px;top:148px;width:3px;height:56px;border-radius:3px;background:#2c2c40;}
.device-btn-vol.v2{top:216px;height:56px;}

/* --------------- 状态栏 --------------- */
.status-bar{
  height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 30px;font-size:12.5px;color:var(--text);letter-spacing:.4px;
  position:relative;z-index:30;
}
.status-mid{font-size:11px;color:var(--hint);display:flex;align-items:center;gap:5px;}
.sb-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);}
.status-right{display:flex;align-items:center;gap:3px;}
.sig{display:block;width:3px;background:var(--text2);border-radius:1px;margin-left:1.5px;}
.sig:nth-child(1){height:5px;} .sig:nth-child(2){height:8px;} .sig:nth-child(3){height:11px;}
.batt{width:19px;height:10px;border:1px solid var(--text2);border-radius:2.5px;margin-left:5px;position:relative;}
.batt::after{content:'';position:absolute;right:-3px;top:2.5px;width:2px;height:5px;background:var(--text2);border-radius:0 1px 1px 0;}
.batt::before{content:'';position:absolute;left:1px;top:1px;bottom:1px;width:12px;background:var(--gold);border-radius:1px;}

/* ================= 应用主体 ================= */
.app-root{flex:1;position:relative;overflow:hidden;}
.page{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:0 18px 22px;
  -webkit-overflow-scrolling:touch;
  animation:pageIn .34s cubic-bezier(.22,.9,.28,1);
}
.page::-webkit-scrollbar{width:0;height:0;}
.page.sub{background:linear-gradient(180deg,#191930 0%,#15152a 100%);}
@keyframes pageIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
@keyframes pageInBack{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}

/* --------------- 通用文本 --------------- */
.h-sec{font-family:var(--serif);font-size:17px;letter-spacing:1.6px;color:var(--text);margin:20px 0 11px;display:flex;align-items:center;gap:9px;}
.h-sec::before{content:'';width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,var(--gold),var(--violet));}
.h-sec .more{margin-left:auto;font-size:12px;color:var(--hint);letter-spacing:0;cursor:pointer;font-family:var(--sans);}
.muted{color:var(--text2);} .dim{color:var(--hint);}
.gold{color:var(--gold-l);}
.t-serif{font-family:var(--serif);}
.t-num{font-family:var(--num);}

/* --------------- 卡片 / 玻璃 --------------- */
.glass{
  background:linear-gradient(150deg,rgba(51,51,78,.86),rgba(38,38,60,.78));
  border:1px solid var(--line);border-radius:var(--r-l);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.card{padding:15px 16px;}
.card-tight{padding:12px 13px;}

/* --------------- 按钮 --------------- */
.btn{
  height:52px;border-radius:var(--r-l);border:none;cursor:pointer;
  font-size:16px;font-family:var(--sans);letter-spacing:2px;color:#1b1508;
  background:linear-gradient(135deg,var(--gold-l),var(--gold) 55%,var(--gold-d));
  box-shadow:0 8px 22px rgba(201,169,110,.26);
  transition:.18s;width:100%;
}
.btn:active{transform:scale(.978);}
.btn.ghost{
  background:rgba(45,45,68,.7);color:var(--gold-l);border:1px solid rgba(201,169,110,.4);box-shadow:none;
}
.btn.violet{background:linear-gradient(135deg,var(--violet-l),var(--violet) 60%,var(--violet-d));color:#fff;box-shadow:0 8px 22px rgba(123,107,158,.3);}
.btn.sm{height:40px;font-size:13.5px;border-radius:var(--r-m);letter-spacing:1px;}
.btn[disabled]{opacity:.45;pointer-events:none;}

/* --------------- 顶部标题条 --------------- */
.nav-top{
  display:flex;align-items:center;gap:10px;height:52px;margin:0 -18px 4px;padding:0 16px;
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(26,26,46,.96),rgba(26,26,46,.72));
  backdrop-filter:blur(12px);
}
.nav-top .back{
  width:34px;height:34px;border-radius:11px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  background:rgba(45,45,68,.7);color:var(--gold-l);font-size:17px;
}
.nav-top .back:active{transform:scale(.92);}
.nav-top h3{margin:0;font-family:var(--serif);font-size:16.5px;letter-spacing:2px;font-weight:600;}
.nav-top .rt{margin-left:auto;font-size:12px;color:var(--hint);}

/* --------------- 底部 Tab --------------- */
.tab-bar{
  flex:none;height:78px;display:flex;align-items:flex-start;padding-top:9px;
  border-top:1px solid rgba(61,61,92,.6);
  background:linear-gradient(180deg,rgba(26,26,46,.86),rgba(21,21,38,.98));
  backdrop-filter:blur(16px);position:relative;z-index:25;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  color:var(--hint);font-size:10.5px;letter-spacing:1px;transition:.2s;
}
.tab .ico{font-size:19px;line-height:1;filter:grayscale(.55);opacity:.7;transition:.2s;}
.tab.on{color:var(--gold-l);}
.tab.on .ico{filter:none;opacity:1;transform:translateY(-1px);}
.tab.on::after{content:'';width:16px;height:2px;border-radius:2px;background:var(--gold);margin-top:2px;}
.home-indicator{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:126px;height:4.5px;border-radius:4px;background:rgba(245,240,232,.3);z-index:30;}

/* ================= 首页 ================= */
.greet-wrap{display:flex;align-items:center;gap:12px;padding:6px 0 14px;}
.avatar{
  width:50px;height:50px;border-radius:16px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-family:var(--serif);color:#1b1508;
  background:linear-gradient(140deg,var(--gold-l),var(--gold-d));
  box-shadow:0 6px 18px rgba(201,169,110,.28);
}
.greet-name{font-family:var(--serif);font-size:19px;letter-spacing:1.4px;}
.greet-sub{font-size:11.5px;color:var(--text2);margin-top:4px;display:flex;align-items:center;gap:7px;}
.rank-chip{
  display:inline-block;padding:2px 8px;border-radius:9px;font-size:10.5px;
  background:rgba(201,169,110,.15);border:1px solid rgba(201,169,110,.35);color:var(--gold-l);
}
.stat-row{margin-left:auto;text-align:right;font-size:11px;color:var(--text2);line-height:1.7;}
.stat-row b{color:var(--gold-l);font-family:var(--num);font-size:13px;}

/* 每日一卦 */
.daily-card{position:relative;overflow:hidden;padding:17px 18px;}
.daily-card::before{
  content:'';position:absolute;right:-40px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,110,.2),transparent 68%);
}
.daily-tag{font-size:11px;letter-spacing:3px;color:var(--gold);margin-bottom:9px;}
.daily-main{display:flex;align-items:center;gap:16px;}
.hex-big{font-size:62px;line-height:1;color:var(--gold-l);text-shadow:0 0 26px rgba(201,169,110,.4);}
.daily-name{font-family:var(--serif);font-size:27px;letter-spacing:5px;}
.daily-ci{font-size:12.5px;color:var(--text2);margin-top:5px;line-height:1.65;}
.daily-xiang{font-size:11.5px;color:var(--gold);margin-top:7px;font-family:var(--serif);letter-spacing:.6px;}

/* 环进度 */
.ring-wrap{display:flex;justify-content:space-around;padding:6px 0 2px;}
.ring{text-align:center;}
.ring svg{display:block;margin:0 auto;}
.ring .rv{font-family:var(--num);font-size:15px;fill:var(--text);}
.ring .rl{font-size:10.5px;color:var(--text2);margin-top:5px;letter-spacing:1px;}

/* 快捷入口 */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.quick{
  text-align:center;padding:13px 4px 11px;border-radius:var(--r-m);cursor:pointer;
  background:rgba(45,45,68,.55);border:1px solid var(--line);transition:.2s;
}
.quick:active{transform:scale(.95);}
.quick .qi{font-size:21px;line-height:1;}
.quick .qt{font-size:11px;color:var(--text2);margin-top:7px;letter-spacing:.5px;}

/* 列表行 */
.row{
  display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:var(--r-m);
  background:rgba(45,45,68,.5);border:1px solid var(--line);margin-bottom:9px;cursor:pointer;transition:.2s;
}
.row:active{background:rgba(45,45,68,.85);}
.row .rw{width:38px;height:38px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(201,169,110,.1);border:1px solid rgba(201,169,110,.22);}
.row .rt2{flex:1;min-width:0;}
.row .rt2 .t{font-family:var(--serif);font-size:15px;letter-spacing:.5px;}
.row .rt2 .d{font-size:11px;color:var(--hint);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row .rarr{color:var(--hint);font-size:15px;}

/* ================= 学习 ================= */
.seg{
  display:flex;gap:5px;padding:4px;border-radius:14px;background:rgba(36,36,60,.85);
  border:1px solid var(--line);margin:8px 0 14px;
}
.seg div{flex:1;text-align:center;padding:8px 0;font-size:13px;color:var(--text2);border-radius:10px;cursor:pointer;transition:.2s;letter-spacing:1px;}
.seg div.on{background:linear-gradient(135deg,rgba(201,169,110,.9),rgba(168,139,74,.85));color:#1b1508;font-weight:600;}

.course-sys{margin-bottom:16px;}
.sys-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.sys-badge{
  width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-family:var(--serif);background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.3);
}
.sys-name{font-family:var(--serif);font-size:16px;letter-spacing:2px;}
.sys-prog{margin-left:auto;font-size:11px;color:var(--hint);}
.lv-card{
  display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-m);
  background:linear-gradient(120deg,rgba(51,51,78,.8),rgba(38,38,60,.65));
  border:1px solid var(--line);margin-bottom:8px;cursor:pointer;transition:.2s;
}
.lv-card:active{transform:scale(.99);}
.lv-no{
  width:34px;height:34px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;font-family:var(--num);background:rgba(201,169,110,.14);color:var(--gold-l);
  border:1px solid rgba(201,169,110,.28);
}
.lv-card.locked{opacity:.5;}
.lv-title{font-size:13.5px;}
.lv-sub{font-size:11px;color:var(--hint);margin-top:3px;}
.bar-thin{height:3px;border-radius:3px;background:rgba(61,61,92,.9);margin-top:6px;overflow:hidden;}
.bar-thin i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold-l));}

/* 游戏卡 */
.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.game-card{
  position:relative;overflow:hidden;border-radius:var(--r-l);padding:14px 13px 13px;cursor:pointer;
  border:1px solid var(--line);background:linear-gradient(150deg,rgba(51,51,78,.9),rgba(36,36,60,.75));
  transition:.22s;
}
.game-card:active{transform:scale(.975);}
.game-card .gico{font-size:27px;line-height:1;}
.game-card .gname{font-family:var(--serif);font-size:14.5px;letter-spacing:1.4px;margin-top:9px;}
.game-card .gdesc{font-size:10.5px;color:var(--hint);margin-top:5px;line-height:1.6;height:34px;overflow:hidden;}
.game-card .gbest{font-size:10px;color:var(--gold);margin-top:7px;letter-spacing:.5px;}
.game-card .ghow{font-size:10.5px;color:var(--text2);margin-top:9px;line-height:1.62;
  background:rgba(201,169,110,.07);border-left:2px solid var(--gold);border-radius:4px;padding:7px 9px;}
.game-card .ghow-tag{display:inline-block;font-size:9.5px;color:#fff;background:var(--gold);
  border-radius:3px;padding:1px 5px;margin-right:6px;letter-spacing:.5px;vertical-align:middle;}
.game-card::after{
  content:'';position:absolute;right:-24px;bottom:-24px;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,110,.14),transparent 70%);
}

/* ================= 通用：小标签 ================= */
.tag{
  display:inline-block;padding:2.5px 9px;border-radius:9px;font-size:10.5px;letter-spacing:.6px;
  background:rgba(123,107,158,.16);border:1px solid rgba(123,107,158,.34);color:var(--violet-l);
}
.tag.gold{background:rgba(201,169,110,.14);border-color:rgba(201,169,110,.34);color:var(--gold-l);}
.tag.ok{background:rgba(76,175,80,.14);border-color:rgba(76,175,80,.34);color:#7fd183;}
.tag.err{background:rgba(231,76,60,.14);border-color:rgba(231,76,60,.34);color:#f09185;}
.tag.gray{background:rgba(106,106,122,.14);border-color:rgba(106,106,122,.3);color:var(--hint);}
.tag.violet{background:rgba(123,107,158,.16);border-color:rgba(123,107,158,.4);color:var(--violet-l);}
.ai-prev{background:linear-gradient(160deg,rgba(123,107,158,.10),rgba(36,36,60,.7));border:1px solid rgba(123,107,158,.32);}

/* ================= 游戏容器 ================= */
.game-wrap{display:flex;flex-direction:column;height:100%;padding:0 0 0;}
.g-top{display:flex;align-items:center;gap:11px;padding:4px 16px 10px;flex:none;}
.g-top .gclose{width:33px;height:33px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(45,45,68,.75);border:1px solid var(--line);color:var(--text2);cursor:pointer;font-size:16px;}
.g-top .gname{font-family:var(--serif);font-size:15px;letter-spacing:2px;}
.g-top .gmeta{margin-left:auto;text-align:right;font-size:11px;color:var(--text2);line-height:1.55;}
.g-top .gmeta b{font-family:var(--num);font-size:14px;color:var(--gold-l);}
.g-body{position:relative;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 16px;}
.g-body::-webkit-scrollbar{width:0;}
.g-foot{flex:none;padding:10px 16px 14px;display:flex;gap:10px;}

.pill{
  display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:20px;font-size:11.5px;
  background:rgba(45,45,68,.7);border:1px solid var(--line);color:var(--text2);cursor:pointer;transition:.2s;
}
.pill.on{background:rgba(201,169,110,.16);border-color:rgba(201,169,110,.5);color:var(--gold-l);}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px;}

/* 工具·应用层「怎么用」引导块 */
.tool-use{font-size:11px;color:var(--text2);line-height:1.8;margin-top:11px;
  background:rgba(201,169,110,.07);border:1px solid rgba(201,169,110,.22);border-radius:8px;padding:10px 12px;}
.tool-use .tu-tag{display:inline-block;font-size:9.5px;color:#fff;background:var(--gold);
  border-radius:3px;padding:1px 6px;margin-right:6px;letter-spacing:.5px;vertical-align:middle;}
.tool-use b{color:var(--gold-l);}

/* 工具·错综互变 64 卦网格选择器 */
.rel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:236px;overflow:auto;padding:2px;}
.rel-grid .rc{font-size:11px;color:var(--text2);background:rgba(45,45,68,.7);border:1px solid var(--line);
  border-radius:7px;padding:6px 4px;text-align:center;cursor:pointer;transition:.18s;line-height:1.3;}
.rel-grid .rc .rs{font-size:14px;font-family:var(--serif);display:block;margin-bottom:1px;}
.rel-grid .rc.on{background:rgba(201,169,110,.16);border-color:rgba(201,169,110,.55);color:var(--gold-l);}
.rel-grid .rc:active{transform:scale(.96);}

/* 进度条（题目倒计时） */
.time-bar{height:4px;border-radius:4px;background:rgba(61,61,92,.85);overflow:hidden;margin:10px 0 14px;}
.time-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--err),var(--warn));transition:width .1s linear;}

/* 卦象显示区 */
.hex-stage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 0 20px;
}
.hex-char{font-size:88px;line-height:1;color:var(--gold-l);text-shadow:0 0 34px rgba(201,169,110,.45);animation:pop .34s cubic-bezier(.2,1.2,.3,1);}
@keyframes pop{from{opacity:0;transform:scale(.75);}to{opacity:1;transform:none;}}
.yao-stack{display:flex;flex-direction:column;gap:7px;align-items:center;margin-top:6px;}
.yao-row{display:flex;align-items:center;gap:9px;}
.yao-idx{font-size:10.5px;color:var(--hint);width:52px;text-align:right;font-family:var(--num);}
.yao{display:flex;gap:8px;width:150px;justify-content:center;}
.yao i{display:block;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--gold-l),var(--gold-d));box-shadow:0 1px 6px rgba(201,169,110,.34);}
.yao.yin i{width:64px;background:linear-gradient(90deg,var(--violet-l),var(--violet-d));box-shadow:0 1px 6px rgba(123,107,158,.34);}
.yao.yang i{width:150px;}
.yao-mark{width:52px;font-size:10px;color:var(--warn);}

/* 选项 */
.opt-grid{display:grid;gap:10px;}
.opt-grid.c4{grid-template-columns:1fr 1fr;}
.opt-grid.c6{grid-template-columns:1fr 1fr 1fr;}
.opt{
  border:2px solid var(--line);background:rgba(45,45,68,.7);border-radius:var(--r-m);
  padding:14px 8px;text-align:center;cursor:pointer;transition:.16s;
  font-size:19px;font-family:var(--serif);letter-spacing:2px;color:var(--text);
}
.opt.small{font-size:15px;letter-spacing:1px;padding:12px 6px;}
.opt:active{transform:scale(.97);}
.opt.sel{border-color:var(--gold);background:rgba(201,169,110,.14);}
.opt.right{border-color:var(--ok);background:rgba(76,175,80,.16);color:#8fe093;animation:shakeOk .4s;}
.opt.wrong{border-color:var(--err);background:rgba(231,76,60,.16);color:#f09185;animation:shakeNo .4s;}
.opt.dis{opacity:.4;pointer-events:none;}
@keyframes shakeNo{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes shakeOk{0%{transform:scale(1)}45%{transform:scale(1.05)}100%{transform:scale(1)}}

.fb{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-m);font-size:12.5px;line-height:1.85;
  border:1px solid rgba(201,169,110,.28);background:rgba(201,169,110,.08);color:var(--text2);
  animation:pageIn .3s;
}
.fb .fbt{font-family:var(--serif);font-size:14px;color:var(--gold-l);letter-spacing:1.4px;margin-bottom:5px;}

/* 连击 */
.combo-fly{
  position:absolute;top:52%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:60;
  font-family:var(--num);font-size:34px;color:var(--warn);text-shadow:0 0 22px rgba(243,156,18,.6);
  animation:comboUp .72s ease-out forwards;
}
@keyframes comboUp{0%{opacity:0;transform:translate(-50%,-40%) scale(.6);}25%{opacity:1;transform:translate(-50%,-58%) scale(1.18);}100%{opacity:0;transform:translate(-50%,-100%) scale(1);}}

/* 舒尔特网格 */
.grid-box{display:grid;gap:5px;margin:4px auto 8px;width:100%;max-width:352px;}
.cell{
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  border-radius:var(--r-s);border:1.5px solid var(--line);background:rgba(45,45,68,.72);
  font-weight:700;color:var(--text);transition:.14s;user-select:none;
  aspect-ratio:1/1;font-size:21px;font-family:var(--num);
}
.cell.tiny{font-size:20px;}
.cell.mini{font-size:15px;}
.cell.done{border-color:var(--ok);background:rgba(76,175,80,.2);color:#8fe093;box-shadow:0 0 12px rgba(76,175,80,.28);}
.cell.bad{border-color:var(--err);background:rgba(231,76,60,.3);color:#f09185;}
.cell:active{transform:scale(.94);}
.next-hint{text-align:center;font-size:12px;color:var(--hint);margin-bottom:9px;}
.next-hint b{color:var(--gold-l);font-size:15px;font-family:var(--num);}

/* 五行色 */
.wx-metal{color:var(--wx-metal)!important;border-color:rgba(245,240,232,.5)!important;}
.wx-wood{color:#7fd183!important;border-color:rgba(76,175,80,.5)!important;}
.wx-water{color:#67b6e8!important;border-color:rgba(52,152,219,.5)!important;}
.wx-fire{color:#f09185!important;border-color:rgba(231,76,60,.5)!important;}
.wx-earth{color:var(--warn)!important;border-color:rgba(243,156,18,.5)!important;}

/* 起卦 */
.coin-row{display:flex;justify-content:center;gap:20px;padding:26px 0 18px;}
.coin{
  width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:23px;font-weight:700;
  background:linear-gradient(145deg,var(--gold-l),var(--gold-d));color:#1b1508;
  box-shadow:0 8px 22px rgba(201,169,110,.34),inset 0 2px 0 rgba(255,255,255,.35);
  animation:flip .82s cubic-bezier(.3,.9,.3,1);
}
.coin.back{background:linear-gradient(145deg,#4a4a66,#2b2b40);color:var(--violet-l);box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.08);}
@keyframes flip{0%{transform:rotateX(0) scale(1);}60%{transform:rotateX(900deg) scale(1.16);}100%{transform:rotateX(1080deg) scale(1);}}
.result-pair{display:flex;gap:10px;margin-top:12px;}
.result-pair>div{flex:1;text-align:center;padding:14px 8px;border-radius:var(--r-m);background:rgba(45,45,68,.6);border:1px solid var(--line);}
.result-pair .rp-label{font-size:10.5px;color:var(--hint);letter-spacing:2px;margin-bottom:6px;}
.result-pair .rp-hex{font-size:44px;line-height:1;color:var(--gold-l);}
.result-pair .rp-name{font-family:var(--serif);font-size:18px;letter-spacing:3px;margin-top:7px;}

.ai-box{margin-top:14px;padding:14px 15px;border-radius:var(--r-m);border:1px solid rgba(123,107,158,.34);background:linear-gradient(150deg,rgba(123,107,158,.13),rgba(45,45,68,.6));}
.ai-head{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--violet-l);letter-spacing:1.4px;margin-bottom:9px;}
.ai-head .dot{width:7px;height:7px;border-radius:50%;background:var(--violet-l);box-shadow:0 0 9px var(--violet-l);}
.ai-body{font-size:13px;line-height:2.02;color:var(--text2);min-height:56px;white-space:pre-wrap;}
.ai-body .cursor{display:inline-block;width:7px;height:15px;background:var(--gold);vertical-align:-2px;animation:blink .8s infinite;}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.ai-foot{font-size:10.5px;color:var(--hint);margin-top:10px;letter-spacing:.4px;}
.ai-body{max-height:230px;overflow-y:auto;}
.ai-input{display:flex;gap:8px;margin-top:11px;align-items:flex-end;}
.ai-input textarea{flex:1;padding:10px 12px;border-radius:var(--r-m);background:rgba(36,36,60,.9);border:1px solid var(--line);color:var(--text);font-size:13px;font-family:var(--sans);outline:none;resize:none;height:46px;line-height:1.5;box-sizing:border-box;}
.ai-input textarea:focus{border-color:rgba(201,169,110,.6);}
.ai-send{flex:none;height:46px;padding:0 16px;border-radius:var(--r-m);border:none;cursor:pointer;font-size:13.5px;letter-spacing:1px;color:#1b1508;background:linear-gradient(135deg,var(--gold-l),var(--gold) 55%,var(--gold-d));box-shadow:0 6px 16px rgba(201,169,110,.26);transition:.15s;}
.ai-send:active{transform:scale(.97);}

/* 输入 */
.field{margin-bottom:13px;}
.field label{display:block;font-size:11.5px;color:var(--text2);margin-bottom:7px;letter-spacing:1.2px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 13px;border-radius:var(--r-m);
  background:rgba(36,36,60,.9);border:1px solid var(--line);color:var(--text);
  font-size:14px;font-family:var(--sans);outline:none;box-sizing:border-box;
}
.field input:focus,.field textarea:focus{border-color:rgba(201,169,110,.6);}

/* 起卦·常用问题模板 */
.q-tpl-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.q-chip{font-size:10.5px;color:var(--text2);background:rgba(45,45,68,.7);border:1px solid var(--line);
  border-radius:999px;padding:5px 10px;cursor:pointer;transition:.18s;line-height:1.45;}
.q-chip:active{transform:scale(.96);}
.q-chip:hover{border-color:rgba(201,169,110,.5);color:var(--gold-l);background:rgba(201,169,110,.12);}
.field textarea{resize:none;height:78px;line-height:1.7;}
.field input[type=date]{color-scheme:dark;}

/* 结算 */
.res-hero{text-align:center;padding:14px 0 6px;}
.res-score{font-family:var(--num);font-size:60px;line-height:1;color:var(--gold-l);text-shadow:0 0 30px rgba(201,169,110,.4);}
.res-new{display:inline-block;margin-top:9px;padding:3px 12px;border-radius:20px;font-size:11.5px;background:linear-gradient(135deg,var(--gold-l),var(--gold-d));color:#1b1508;letter-spacing:1.5px;animation:pop .5s .2s backwards;}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0 6px;}
.res-cell{text-align:center;padding:12px 4px;border-radius:var(--r-m);background:rgba(45,45,68,.6);border:1px solid var(--line);}
.res-cell .rv{font-family:var(--num);font-size:20px;color:var(--text);}
.res-cell .rl{font-size:10.5px;color:var(--hint);margin-top:4px;}
.res-reward{display:flex;justify-content:center;gap:14px;margin:14px 0 4px;font-size:12px;color:var(--gold-l);}
.res-reward span{display:flex;align-items:center;gap:5px;}

/* 社区 */
.post{padding:13px 14px;border-radius:var(--r-m);background:rgba(45,45,68,.5);border:1px solid var(--line);margin-bottom:10px;}
.post-head{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.post-av{width:31px;height:31px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13px;font-family:var(--serif);background:rgba(123,107,158,.22);color:var(--violet-l);border:1px solid rgba(123,107,158,.3);}
.post-name{font-size:12.5px;}
.post-time{font-size:10.5px;color:var(--hint);margin-top:2px;}
.post-tags{margin-left:auto;display:flex;gap:5px;}
.post-body{font-size:13px;line-height:1.85;color:var(--text2);}
.post-foot{display:flex;gap:18px;margin-top:10px;font-size:11.5px;color:var(--hint);}
.post-foot span{cursor:pointer;display:flex;align-items:center;gap:4px;}

/* 我的 */
.prof-card{position:relative;overflow:hidden;padding:18px 17px;}
.prof-card::before{content:'';position:absolute;left:-40px;bottom:-70px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.18),transparent 70%);}
.prof-top{display:flex;align-items:center;gap:13px;}
.prof-av{width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:26px;font-family:var(--serif);color:#1b1508;background:linear-gradient(140deg,var(--gold-l),var(--gold-d));box-shadow:0 8px 22px rgba(201,169,110,.3);}
.prof-name{font-family:var(--serif);font-size:20px;letter-spacing:2px;}
.prof-rank{margin-top:6px;}
.exp-line{display:flex;align-items:center;gap:9px;margin-top:13px;font-size:11px;color:var(--hint);}
.exp-bar{flex:1;height:6px;border-radius:6px;background:rgba(61,61,92,.9);overflow:hidden;}
.exp-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold-d),var(--gold-l));transition:width .7s cubic-bezier(.2,.9,.3,1);}
.coin-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px;}
.coin3{text-align:center;padding:11px 4px;border-radius:var(--r-m);background:rgba(36,36,60,.7);border:1px solid var(--line);}
.coin3 .cv{font-family:var(--num);font-size:19px;color:var(--gold-l);}
.coin3 .cl{font-size:10.5px;color:var(--hint);margin-top:4px;}

.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
.cday{aspect-ratio:1/1;border-radius:5px;background:rgba(45,45,68,.5);border:1px solid rgba(61,61,92,.7);
  display:flex;align-items:center;justify-content:center;}
.cday span{font-size:9.5px;color:var(--text2);line-height:1;}
.cday.l3 span{color:#1b1508;font-weight:600;}
.mini-stat{flex:1;text-align:center;padding:9px 4px;border-radius:12px;background:rgba(36,36,60,.6);border:1px solid var(--line);}
/* 社区点赞 */
.post-foot .lk{transition:color .15s;}
.post-foot .lk.on{color:var(--gold-l);}
/* 卦典：64 卦格子 */
.hex-cell{text-align:center;padding:9px 3px;border-radius:12px;cursor:pointer;
  background:rgba(45,45,68,.5);border:1px solid var(--line);transition:transform .12s,border-color .12s;}
.hex-cell:hover{border-color:rgba(201,169,110,.5);}
.hex-cell:active{transform:scale(.96);}
/* 会员 / 权益行 */
.biz-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(61,61,92,.5);}
.biz-row:last-child{border-bottom:0;}
/* 条目排版全站统一：大字标题（同首页「今日 · 干支与月相」）+ 小字描述 */
.biz-row .t{font-family:var(--serif);font-size:15px;letter-spacing:.5px;}
.biz-row .d{font-size:11px;color:var(--hint);margin-top:3px;line-height:1.7;}
.biz-plan{border-radius:16px;padding:13px 14px;border:1px solid var(--line);background:rgba(45,45,68,.5);cursor:pointer;transition:border-color .15s;}
.biz-plan.on{border-color:var(--gold);background:rgba(201,169,110,.10);}
.cday.l1{background:rgba(201,169,110,.24);border-color:rgba(201,169,110,.4);}
.cday.l2{background:rgba(201,169,110,.46);border-color:rgba(201,169,110,.6);}
.cday.l3{background:linear-gradient(145deg,var(--gold-l),var(--gold));border-color:var(--gold-l);}
.cday.today{outline:1.5px solid var(--violet-l);}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px;}
.cal-head div{text-align:center;font-size:10px;color:var(--hint);}

.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.badge{text-align:center;padding:13px 4px 11px;border-radius:var(--r-m);background:rgba(45,45,68,.5);border:1px solid var(--line);}
.badge.got{border-color:rgba(201,169,110,.45);background:rgba(201,169,110,.1);}
.badge .bi{font-size:23px;filter:grayscale(1);opacity:.35;}
.badge.got .bi{filter:none;opacity:1;}
.badge .bn{font-size:11px;margin-top:6px;color:var(--text2);}
.badge .bd{font-size:9.5px;color:var(--hint);margin-top:3px;line-height:1.5;}

/* 命盘 */
.chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
.palace{
  min-height:88px;padding:6px 4px 5px;border-radius:var(--r-s);text-align:center;
  background:rgba(45,45,68,.55);border:1px solid var(--line);position:relative;
}
.palace.hi{background:rgba(201,169,110,.13);border-color:rgba(201,169,110,.45);}
.palace .pz{font-size:10px;color:var(--gold);letter-spacing:1px;}
.palace .pn{font-size:9.5px;color:var(--hint);margin-top:1px;}
.palace .pstars{font-size:10.5px;line-height:1.45;margin-top:4px;color:var(--text);font-family:var(--serif);}
.palace .pstar{display:block;}
.palace .pfour{font-size:8.5px;color:var(--violet-l);letter-spacing:.5px;}
.palace.dyn{box-shadow:0 0 0 1.5px rgba(243,156,18,.8) inset;border-color:rgba(243,156,18,.55);}
.palace.target{border-color:var(--gold);border-style:dashed;background:rgba(201,169,110,.06);}
.palace.correct{border-color:var(--ok);background:rgba(76,175,80,.14);}
.palace.wrongmark{border-color:var(--err);background:rgba(231,76,60,.16);}
/* 紫微命盘：辅煞 / 身宫 / 大限区间 */
.palace .pminor{font-size:8.5px;line-height:1.4;margin-top:3px;opacity:.9;}
.palace .pminor .ps-minor{display:inline-block;margin:0 2px;}
.palace .pbody{position:absolute;top:3px;right:5px;font-size:8.5px;color:var(--gold);font-weight:600;}
.palace .pdec{font-size:8px;color:var(--hint);margin-top:3px;letter-spacing:.3px;}
.zw-grid .palace{min-height:104px;}

/* 紫微命盘：中心 命主/身主/五行局/纳音 + 三方四正连线 */
.zw-grid-wrap{position:relative;}
.zw-center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(circle at 50% 45%,rgba(201,169,110,.16),rgba(36,36,60,.7));
  border:1px solid rgba(201,169,110,.4);border-radius:var(--r-s);padding:6px;
}
.zw-c-row{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--text2);}
.zw-c-row .dim{font-size:10px;color:var(--hint);min-width:34px;text-align:right;}
.zw-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;}
.zw-l{stroke:rgba(201,169,110,.6);stroke-width:1.6;}
.zw-l-dash{stroke:rgba(123,107,158,.7);stroke-width:1.6;stroke-dasharray:5 4;}

/* 问答 */
.q-card{text-align:center;padding:18px 14px 16px;}
.q-label{font-size:11.5px;color:var(--hint);letter-spacing:2px;margin-bottom:10px;}
.q-main{font-family:var(--serif);font-size:52px;line-height:1.1;color:var(--gold-l);text-shadow:0 0 26px rgba(201,169,110,.35);}
.q-sub{font-size:13px;color:var(--text2);margin-top:9px;}

/* 对战 */
.battle-arena{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0 10px;}
.bside{text-align:center;flex:1;}
.bside .bcard{
  height:104px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:38px;letter-spacing:2px;
  border:1.5px solid var(--line);background:rgba(45,45,68,.6);transition:.3s;
}
.bcard.win{animation:okPulse .6s;}
.bcard.lose{animation:badPulse .6s;}
@keyframes okPulse{0%{transform:scale(1)}40%{transform:scale(1.09);box-shadow:0 0 30px rgba(76,175,80,.5);}100%{transform:scale(1)}}
@keyframes badPulse{0%{transform:scale(1)}40%{transform:scale(.93);box-shadow:0 0 26px rgba(231,76,60,.45);}100%{transform:scale(1)}}
.bname{font-size:11.5px;color:var(--text2);margin-top:8px;letter-spacing:1px;}
.vs{font-family:var(--num);font-size:22px;color:var(--gold-l);}
.battle-log{text-align:center;font-size:13px;color:var(--text2);margin:6px 0 10px;min-height:22px;}
.battle-log b{color:var(--gold-l);}
.score-strip{display:flex;justify-content:center;gap:22px;font-size:12px;color:var(--text2);margin-bottom:10px;}
.score-strip b{font-family:var(--num);font-size:19px;color:var(--gold-l);}

/* 拖拽块 */
.drag-pool{display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:var(--r-m);background:rgba(36,36,60,.6);border:1px dashed var(--line);min-height:56px;margin-bottom:12px;}
.drag-item{
  padding:7px 12px;border-radius:10px;font-size:12.5px;cursor:pointer;
  background:rgba(201,169,110,.14);border:1px solid rgba(201,169,110,.38);color:var(--gold-l);
  transition:.16s;font-family:var(--serif);letter-spacing:1px;
}
.drag-item.on{background:var(--gold);color:#1b1508;box-shadow:0 0 14px rgba(201,169,110,.5);}
.drag-item.gone{display:none;}

/* 表格 */
.tb{width:100%;border-collapse:collapse;font-size:12px;}
.tb th,.tb td{padding:8px 6px;text-align:center;border-bottom:1px solid rgba(61,61,92,.7);}
.tb th{color:var(--hint);font-weight:500;font-size:10.5px;letter-spacing:1px;}
.tb td b{font-family:var(--serif);font-size:19px;letter-spacing:2px;}
.tb tr:last-child td{border-bottom:none;}

/* dialog & toast —— absolute：以手机屏（.device-screen，relative）为定位基准，
   桌面预览宽窗口时弹窗仍居中于手机屏内；真机全屏时行为不变 */
.dialog-root,.toast-root{position:absolute;inset:0;pointer-events:none;z-index:999;}
.mask{
  position:absolute;inset:0;background:rgba(8,8,16,.68);backdrop-filter:blur(4px);pointer-events:auto;
  display:flex;align-items:center;justify-content:center;animation:fadeIn .24s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  width:330px;max-width:calc(100% - 36px);max-height:78vh;overflow-y:auto;border-radius:22px;padding:20px 19px;
  background:linear-gradient(160deg,#33334e,#232338);
  border:1px solid rgba(201,169,110,.28);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  animation:sheetIn .32s cubic-bezier(.2,1.1,.3,1);pointer-events:auto;
}
.sheet::-webkit-scrollbar{width:0;}
@keyframes sheetIn{from{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:none}}
.sheet h4{margin:0 0 6px;font-family:var(--serif);font-size:17px;letter-spacing:2px;text-align:center;color:var(--gold-l);}
.sheet p{margin:0 0 14px;text-align:center;font-size:12px;color:var(--hint);line-height:1.7;}
.toast{
  position:absolute;left:50%;top:96px;transform:translateX(-50%);
  padding:10px 20px;border-radius:24px;font-size:13px;pointer-events:none;
  background:rgba(35,35,54,.96);border:1px solid rgba(201,169,110,.35);color:var(--text);
  box-shadow:0 12px 30px rgba(0,0,0,.45);animation:toastIn .3s cubic-bezier(.2,1.2,.3,1);
  white-space:nowrap;max-width:300px;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}

/* 响应式 */
@media (max-width:1080px){
  .side{display:none;}
  body{padding:0;align-items:flex-start;}
  .stage{gap:0;}
  .device-frame{width:100vw;height:100vh;border-radius:0;padding:0;box-shadow:none;}
  .device-frame::after{display:none;}
  .device-screen{border-radius:0;}
  .device-btn-side,.device-btn-vol{display:none;}
  .status-bar{padding:0 22px;}
  .home-indicator{bottom:5px;}
}

/* =========================================================================
   2.0 闯关学习路径 + 关卡播放器
   ========================================================================= */
.lv-overall{background:linear-gradient(135deg,rgba(201,169,110,.16),rgba(123,107,158,.12));
  border:1px solid rgba(201,169,110,.28);border-radius:var(--r-l);
  padding:16px;text-align:center;margin-bottom:12px;}
.lv-overall-num{font-family:var(--num);font-size:30px;color:var(--gold-l);}
.lv-overall-txt{font-size:11.5px;color:var(--text2);margin-top:2px;letter-spacing:1px;}

.lv-sub{display:flex;align-items:center;gap:12px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);padding:13px;margin-bottom:10px;cursor:pointer;transition:.18s;}
.lv-sub:active{transform:scale(.985);}
.lv-sub-ico{font-size:26px;width:42px;text-align:center;flex:none;}
.lv-sub-name{font-family:var(--serif);font-size:16px;color:var(--text);letter-spacing:1px;}
.lv-sub-blurb{font-size:11px;color:var(--hint);margin:3px 0 7px;line-height:1.5;}
.lv-sub-go{font-size:12px;color:var(--gold-l);flex:none;}

.lv-ch{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:13px;margin-bottom:10px;cursor:pointer;transition:.18s;}
.lv-ch:active{transform:scale(.985);}
.lv-ch-name{font-family:var(--serif);font-size:15.5px;color:var(--text);letter-spacing:1px;}
.lv-ch .bar-thin i{background:linear-gradient(90deg,var(--violet-l),var(--gold));}

.lv-lv{display:flex;align-items:center;gap:11px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-m);padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:.18s;}
.lv-lv:active{transform:scale(.985);}
.lv-lv-no{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--num);font-size:13px;background:rgba(201,169,110,.14);
  border:1px solid rgba(201,169,110,.3);color:var(--gold-l);}
.lv-lv-title{font-size:13.5px;color:var(--text);}
.lv-lv-tag{font-size:10.5px;color:var(--hint);margin-top:2px;}

.lv-top{display:flex;align-items:center;gap:8px;padding:4px 0 12px;}
.lv-back{font-size:14px;color:var(--gold-l);flex:none;width:44px;cursor:pointer;}
.lv-top-title{font-family:var(--serif);font-size:16px;letter-spacing:1.5px;color:var(--text);flex:1;}

/* ---- 播放器 ---- */
.lp-wrap{padding:6px 2px 4px;}
.lp-tag{display:inline-block;font-size:11px;color:var(--gold-l);letter-spacing:2px;
  border:1px solid rgba(201,169,110,.3);border-radius:20px;padding:2px 11px;margin-bottom:9px;}
.lp-know{font-size:14px;line-height:1.95;color:var(--text);}
.lp-points{margin:10px 0 0;}
.lp-point{font-size:12.5px;color:var(--text2);line-height:1.85;margin:2px 0;}
.lp-source{font-size:11px;color:var(--hint);margin-top:8px;font-style:italic;}
.lp-ex{font-size:13px;line-height:1.9;color:var(--text2);background:rgba(123,107,158,.1);
  border-left:3px solid var(--violet);border-radius:8px;padding:10px 12px;margin-top:4px;}
.lp-start{width:100%;margin-top:18px;}

.lp-prog{font-family:var(--num);font-size:12px;color:var(--hint);margin-bottom:6px;letter-spacing:1px;}
.lp-qtext{font-size:15px;line-height:1.85;color:var(--text);margin:6px 0 14px;}
.lp-ans{margin-bottom:6px;}

.lp-opts{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.lp-opt{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px 14px;font-size:14px;color:var(--text);cursor:pointer;transition:.15s;
  display:flex;align-items:center;gap:9px;}
.lp-opt:active{transform:scale(.985);}
.lp-opt.chosen{border-color:var(--gold);background:rgba(201,169,110,.14);}
.lp-opt.locked{pointer-events:none;opacity:.85;}
.lp-opt.right{border-color:var(--ok);background:rgba(76,175,80,.16);color:#cfe9d0;}
.lp-opt.wrong{border-color:var(--err);background:rgba(231,76,60,.16);}
.lp-multi .lp-opt{padding-left:13px;}
.lp-chk{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--hint);flex:none;transition:.15s;}
.lp-opt.chosen .lp-chk{background:var(--gold);border-color:var(--gold);}

.lp-fill{display:flex;flex-direction:column;gap:8px;}
.lp-input{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px 14px;font-size:15px;color:var(--text);font-family:var(--sans);}
.lp-input:focus{outline:none;border-color:var(--gold);}
.lp-hint{font-size:11px;color:var(--hint);}

.lp-pair{display:flex;gap:10px;}
.lp-col{flex:1;display:flex;flex-direction:column;gap:8px;}
.lp-pi{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:10px 8px;font-size:13.5px;text-align:center;color:var(--text);cursor:pointer;transition:.15s;}
.lp-pi.sel{border-color:var(--violet-l);background:rgba(123,107,158,.2);}
.lp-pi.paired{border-color:var(--ok);background:rgba(76,175,80,.16);pointer-events:none;opacity:.8;}

.lp-order-instr{font-size:11.5px;color:var(--hint);margin-bottom:8px;}
.lp-order-tray{min-height:40px;display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;
  padding:9px;background:rgba(45,45,68,.6);border:1px dashed var(--line);border-radius:var(--r-m);}
.lp-tray-slot{background:linear-gradient(135deg,var(--violet-l),var(--violet));color:#fff;
  border-radius:8px;padding:6px 10px;font-size:13px;cursor:pointer;}

.lp-classify{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.lp-ci{background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-size:13.5px;color:var(--text);cursor:pointer;transition:.15s;position:relative;}
.lp-ci.sel{border-color:var(--gold);}
.lp-ci.assigned{border-color:var(--ok);background:rgba(76,175,80,.16);}
.lp-ci-tag{margin-left:5px;color:var(--ok);}
.lp-groups{display:flex;flex-direction:column;gap:8px;}
.lp-group{background:rgba(45,45,68,.5);border:1.5px solid var(--line);border-radius:var(--r-m);
  padding:11px 13px;font-size:13.5px;color:var(--text2);cursor:pointer;transition:.15s;}
.lp-group.sel{border-color:var(--gold);color:var(--text);background:rgba(201,169,110,.1);}
.lp-group-h{font-family:var(--serif);}

.lp-memory{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.lp-card{width:94px;height:94px;position:relative;cursor:pointer;}
.lp-card-front,.lp-card-back{position:absolute;inset:0;backface-visibility:hidden;
  border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:13px;padding:6px;border:1px solid var(--line);transition:transform .4s;}
.lp-card-front{background:linear-gradient(135deg,rgba(201,169,110,.2),rgba(123,107,158,.18));color:var(--text);}
.lp-card-back{background:linear-gradient(135deg,rgba(76,175,80,.22),rgba(52,152,219,.16));color:var(--gold-l);transform:rotateY(180deg);}
.lp-card.flipped .lp-card-front{transform:rotateY(180deg);}
.lp-card.flipped .lp-card-back{transform:rotateY(0);}
/* 题目 / 记忆卡 配图 */
.lp-diagram{margin:8px 0 13px;}
.lp-cd{margin-bottom:4px;opacity:.95;}
.lp-card-front,.lp-card-back{font-size:11px;}

.lp-steps{background:rgba(45,45,68,.5);border:1px solid var(--line);border-radius:var(--r-m);
  padding:12px 14px;margin-bottom:10px;}
.lp-step{font-size:13px;color:var(--text2);line-height:1.9;}

.lp-puzzle{display:flex;align-items:center;gap:9px;justify-content:center;margin:6px 0 16px;flex-wrap:wrap;}
.lp-tile{width:74px;height:90px;border-radius:14px;background:linear-gradient(160deg,var(--card2),var(--bg2));
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;}
.lp-tile b{font-size:34px;color:var(--gold-l);line-height:1;}
.lp-tile span{font-size:12px;color:var(--text2);}
.lp-tile-q{font-size:30px;color:var(--hint);}
.lp-plus{font-size:22px;color:var(--text2);}

.lp-audio{text-align:center;margin-bottom:12px;}
.lp-speak{background:rgba(123,107,158,.18);border:1px solid rgba(123,107,158,.4);border-radius:20px;
  padding:8px 16px;font-size:13px;color:var(--text);cursor:pointer;}
.lp-speedbar{height:4px;border-radius:4px;background:var(--err);margin:0 0 12px;transition:width 1s linear;}

.lp-explain{font-size:12.5px;line-height:1.8;color:var(--text2);background:rgba(45,45,68,.6);
  border-radius:10px;padding:10px 12px;margin:14px 0 4px;}
.lp-explain .ok{color:var(--ok);} .lp-explain .no{color:var(--err);}
.lp-actions{margin-top:14px;}
.lp-submit{width:100%;}
.lp-stars{text-align:center;font-size:30px;color:var(--gold-l);letter-spacing:6px;margin:6px 0 2px;}

/* =========================================================================
   视觉规范统一 v2 —— 克制 · 安静 · 禅意
   1) 字阶收敛：分区标题 17px → 14px，减少视觉噪音
   2) 圆角统一：--r-m 14px / --r-l 18px，所有 var() 引用同步生效
   3) 弱化描边、加大留白，层级更柔和
   4) 响应式：平板 / 大桌面 / 小屏 / 矮屏 适配
   ========================================================================= */
:root{
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:22px;
}

/* 分区标题：更小更轻，留出呼吸 */
.h-sec{
  font-size:14px; letter-spacing:1.4px;
  color:var(--gold-l); opacity:.95;
  margin:22px 0 11px;
}
.h-sec::before{
  width:3px; height:13px;
  background:linear-gradient(180deg,var(--gold),rgba(123,107,158,.85));
  opacity:.85;
}

/* 卡片：统一圆角 + 更轻盈描边 */
.glass.card, .glass.card-tight{
  border-radius:var(--r-l);
  border:1px solid rgba(61,61,92,.55);
}
.card{padding:16px 17px;}
.card-tight{padding:13px 14px;}

/* 行列表 / 药丸 / 标签 / 按钮：圆角统一 */
.row{border-radius:var(--r-m);}
.pill{border-radius:999px;}
.tag{border-radius:999px;}
.btn{border-radius:var(--r-m);}

/* 页面底部留白，避免内容贴底 */
.app-root{padding-bottom:10px;}

/* 表格表头更安静 */
.tb th{font-size:11px; letter-spacing:.6px; color:var(--text2); font-weight:400;}

/* 说明性小字：行高更舒服 */
.dim{line-height:1.8;}

/* ---------- 响应式 ---------- */
/* 平板 / 中小桌面：收紧侧栏与间距 */
@media (min-width:1081px) and (max-width:1400px){
  .side{width:238px;}
  .stage{gap:28px;}
  body{padding:20px 14px;}
}
/* 大桌面：放宽呼吸 */
@media (min-width:1401px){
  .stage{gap:52px;}
  .side{width:292px;}
}
/* 小屏手机：留白收紧 */
@media (max-width:380px){
  .card{padding:13px 14px;}
  .h-sec{font-size:13px;margin:18px 0 9px;}
  .status-bar{padding:0 18px;}
}
/* 矮屏桌面：等比缩放手机框，避免被裁切 */
/* 矮屏桌面：等比缩放由 index.html 内 fitStage() 动态接管（JS 精确计算） */
/* 行卡片：人物档案列表项间距（由 UI.rowCard 统一生成，保持原视觉） */
.people-row{margin-bottom:8px;}

/* ============ 浅色模式（日间主题） ============ */
body.light{
  --bg:#F6F2EA; --bg2:#F0EBE0; --card:#FFFFFF; --card2:#FBF8F1; --line:#E4DCCB;
  --text:#2B2620; --text2:#6E6656; --hint:#A59B85;
  --gold:#A8853F; --gold-l:#8A6B2E; --gold-d:#6E5424;
  --violet:#6B5B8F; --violet-l:#7B6B9E; --violet-d:#55466F;
  --ok:#3B8C3F; --err:#C0392B; --warn:#C87F0A; --info:#2980B9;
  --input-rgb:255,255,255;
  --chip-rgb:252,249,242;
  --line-rgb:214,204,182;
  --scrim-rgb:250,247,240;
}
body.light .device-screen{
  background:
    radial-gradient(520px 420px at 50% -8%, #FBF3DF 0%, transparent 62%),
    linear-gradient(180deg,#FDFBF6 0%,var(--bg) 42%,#F2EDE2 100%);
}
body.light .status-bar{color:var(--text);}
body.light .exp-bar{background:rgba(190,175,145,.35);}
body.light .bar-thin{background:rgba(190,175,145,.3);}

/* 进入社区：呼吸光圈（更明显的入口提示） */
.more-breathe{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:rgba(201,169,110,.14); border:1px solid rgba(201,169,110,.5);
  color:var(--gold-l); font-size:11px; letter-spacing:1px;
  animation:commBreathe 2.2s ease-in-out infinite;
}
@keyframes commBreathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,169,110,.38); transform:scale(1); }
  50%{ box-shadow:0 0 0 7px rgba(201,169,110,0); transform:scale(1.04); }
}