/* ============================================================
   胡77 解压生态区 · 2026 Calm UI 主题色板
   三套主题（html[data-theme] 一键切换，localStorage 记忆，逻辑不变）
     默认       火星红（暖陶粉白）：#fff4ef 暖陶底 + 赭红 #C1440E + 陶土点缀
     mint      77紫（柔和云灰）：#f1eef7 云灰底 + 深紫 #6B3FD4 + 淡紫点缀
     night     Per黑（纯炭OLED）：#0c0e12 炭黑底 + 无彩色银灰 + 中性高光

   规范：液态玻璃只用于卡片/弹窗/抽屉，不铺满页面；
         弱 Z 轴分层，靠留白 + 层级区隔；柔和大圆角、轻薄软阴影；
         细描边不用粗线；文字三级（深标题/中正文/浅辅助）对比达标。
   ============================================================ */
:root{
  /* ---- 主色：火星红（白字/渐变按钮/选中态） ---- */
  --brand:#C1440E;          /* 主按钮 / 主色块 · 赭红（火星地表色） */
  --brand-rgb:193,68,14;    /* 主色 RGB 三元组（页面内 rgba(var(--brand-rgb),a) 强调色用） */
  --brand-lt:#9E340A;       /* 高亮文字 / 数字强调（深赭红，浅底可读） */
  --brand-ink:#9E340A;      /* 主色文字专用（按钮是白字，文字色要单独一档才双达标） */
  --brand-hi:#C24E1A;       /* hover / 柔和渐变起点（白字对比 4.77:1） */
  --brand-dk:#8C2E08;       /* 渐变收尾 / 按下 */

  /* ---- 底色阶：暖陶粉白（不用死白 #fff） ---- */
  --bg0:#F2DCD2;
  --bg1:#FFF4EF;
  --bg2:#FBE7DE;
  --bg3:#FFFAF7;
  --bg4:#F9E6DC;

  /* ---- 中性文字：暖炭标题 / 暖灰正文 / 浅暖灰辅助 ---- */
  --ink:#2A1A13;
  --soft:#6E5445;
  --dim:#8A6450;            /* 辅助文字也要够读（4.84:1） */

  /* ---- 点缀：火星暖调（赭红 / 陶土 / 暖金） ---- */
  --cyan:#C2552F;           /* 渐变收尾 / 链接触发（陶土红） */
  --gold:#B8862E;
  --orange:#D9601F;

  /* ---- 语义 ---- */
  --ok:#2E8B62; --warn:#C2820F; --bad:#D64550;

  /* ---- 表面 / 液态玻璃（暖调） ---- */
  --card:rgba(255,248,243,.74);            /* 半透暖陶玻璃卡 */
  --glass:rgba(255,242,235,.62);           /* 次级玻璃（按钮 ghost / 图标底） */
  --glass-2:rgba(255,248,243,.92);
  --glass-border:rgba(140,70,40,.09);      /* 1px 细描边（暖） */
  --brand-border:rgba(193,68,14,.28);      /* 主色强调描边 */
  --inset-hi:rgba(255,255,255,.6);         /* 玻璃顶部内高光 */
  --shadow:0 1px 2px rgba(80,40,20,.04),0 8px 22px rgba(80,40,20,.07);
  --shadow-brand:0 2px 4px rgba(140,46,8,.12),0 10px 26px rgba(140,46,8,.16);
  --sel-bg:rgba(193,68,14,.10);            /* 选中态背景块（不用粗线） */
  --sel-line:rgba(193,68,14,.30);

  /* ---- 底栏 / 顶栏浮层：通透暖玻璃 ---- */
  --nav-bg:rgba(255,244,239,.74);
  --nav-line:rgba(140,70,40,.07);
  --nav-shadow:0 -8px 24px rgba(80,40,20,.07);

  /* ---- 氛围光晕 / 点纹 / 按钮影 / 中性标签 ---- */
  --glow-a:rgba(193,68,14,.10);            /* 赭红光晕 */
  --glow-b:rgba(200,95,55,.08);            /* 陶土光晕 */
  --glow-c:rgba(220,130,90,.06);           /* 暖桃光晕 */
  --dot:rgba(140,70,40,.045);
  --btn-shadow:rgba(140,46,8,.26);
  --tag-bg:rgba(193,68,14,.08); --tag-line:rgba(193,68,14,.22); --tag-ink:#9E340A;

  /* ---- 语义标签（浅底） ---- */
  --tag-red-bg:rgba(214,69,80,.08);  --tag-red-line:rgba(214,69,80,.26);  --tag-red-ink:#C03A44;
  --tag-gold-bg:rgba(185,138,46,.10);--tag-gold-line:rgba(185,138,46,.30);--tag-gold-ink:#8A6214;
  --tag-cyan-bg:rgba(194,85,47,.09);--tag-cyan-line:rgba(194,85,47,.28);--tag-cyan-ink:#A3441F;
  --tag-green-bg:rgba(46,139,98,.10);--tag-green-line:rgba(46,139,98,.30);--tag-green-ink:#1E6B49;

  /* ---- toast（浅色主题用深 toast） ---- */
  --toast-bg:#2A2F3A; --toast-tx:#F7F8FB; --toast-line:rgba(255,255,255,.10);

  /* iOS 安全区 */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --nav-h:58px;

  /* ---- 统一设计令牌：字号梯度 / 间距 / 遮罩 / 危险色 ---- */
  --danger:var(--bad);
  --fs-display:26px; --fs-h1:22px; --fs-h2:17px; --fs-h3:15px;
  --fs-sec:13.5px; --fs-body:13px; --fs-aux:11.5px; --fs-tiny:10.5px;
  --pad-card:14px 15px; --gap-card:12px; --gap-sec:14px;
  --mask:rgba(13,18,30,.34);   /* 弹层遮罩统一色，深色主题下自然适配 */
}

/* ---------- 77紫：柔和云灰底 + 深紫主色（白字对比达标） ---------- */
:root[data-theme="mint"]{
  --brand:#6B3FD4; --brand-rgb:107,63,212; --brand-lt:#5A31B8; --brand-hi:#7C57E2; --brand-dk:#4A28A0;
  --brand-ink:#5A31B8;
  --bg0:#DFDCE8; --bg1:#F1EEF7; --bg2:#E7E3F0; --bg3:#F9F8FC; --bg4:#E3DFED;
  --ink:#1F2230; --soft:#555A68; --dim:#676B79;
  --cyan:#8A5BE0; --gold:#A9842F; --orange:#D38138;
  --ok:#2E8B62; --warn:#B27A10; --bad:#D23B46;
  --card:rgba(255,255,255,.70);
  --glass:rgba(255,255,255,.58); --glass-2:rgba(255,255,255,.88);
  --glass-border:rgba(15,22,40,.08);
  --brand-border:rgba(107,63,212,.28);
  --inset-hi:rgba(255,255,255,.5);
  --shadow:0 1px 2px rgba(15,22,40,.05),0 10px 28px rgba(15,22,40,.10);
  --shadow-brand:0 2px 4px rgba(74,40,160,.12),0 12px 30px rgba(74,40,160,.16);
  --sel-bg:rgba(107,63,212,.10); --sel-line:rgba(107,63,212,.32);
  --nav-bg:rgba(241,238,247,.74);
  --nav-line:rgba(15,22,40,.07);
  --nav-shadow:0 -8px 26px rgba(15,22,40,.10);
  --glow-a:rgba(107,63,212,.12);
  --glow-b:rgba(138,91,224,.10);
  --glow-c:rgba(120,90,220,.06);
  --dot:rgba(15,22,40,.05);
  --btn-shadow:rgba(74,40,160,.28);
  --tag-bg:rgba(107,63,212,.08); --tag-line:rgba(107,63,212,.24); --tag-ink:#5A31B8;
  --tag-cyan-bg:rgba(138,91,224,.08); --tag-cyan-line:rgba(138,91,224,.28); --tag-cyan-ink:#5F3AC0;
  --toast-bg:#2A2F3A; --toast-tx:#F7F8FB;
}

/* ---------- Per黑：纯炭黑 OLED + 无彩色（黑白灰，不用纯黑） ---------- */
:root[data-theme="night"]{
  /* 主色用中深银灰：按钮是固定白字，主色必须够深才读得清（白字 6.23:1） */
  /* 炭底上要显示主色文字时改用 --brand-ink（亮银灰 11.97:1）：
     同一个色不可能同时满足「白字按钮 >=4.5」和「黑底文字 >=4.5」，必须拆两档 */
  --brand:#5A616E; --brand-rgb:90,97,110; --brand-lt:#B9C0CB; --brand-hi:#6A7180; --brand-dk:#3A404B;
  --brand-ink:#C6CCD6;
  --bg0:#08090C; --bg1:#0C0E12; --bg2:#111319; --bg3:#171A21; --bg4:#1F222B;
  --ink:#EAECF0; --soft:#A3A9B4; --dim:#6C727E;
  --cyan:#9AA2AE; --gold:#C4BCAB; --orange:#B9A99C;
  --ok:#5FBE8B; --warn:#D9B45C; --bad:#E2707A;
  --card:rgba(255,255,255,.05);             /* 深色液态玻璃 */
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.11);
  --glass-border:rgba(255,255,255,.08);
  --brand-border:rgba(190,198,210,.24);
  --inset-hi:rgba(255,255,255,.05);         /* 微弱内发光，不刺眼 */
  --shadow:0 2px 6px rgba(0,0,0,.35),0 16px 36px rgba(0,0,0,.40);
  --shadow-brand:0 2px 6px rgba(0,0,0,.35),0 16px 36px rgba(120,130,150,.18);
  --sel-bg:rgba(150,160,175,.14); --sel-line:rgba(175,185,200,.30);
  --nav-bg:rgba(12,14,18,.78);
  --nav-line:rgba(255,255,255,.06);
  --nav-shadow:0 -10px 30px rgba(0,0,0,.5);
  --glow-a:rgba(150,160,175,.09);
  --glow-b:rgba(190,198,210,.05);
  --glow-c:rgba(130,140,155,.05);
  --dot:rgba(255,255,255,.03);
  --btn-shadow:rgba(0,0,0,.4);
  --tag-bg:rgba(185,192,203,.08); --tag-line:rgba(185,192,203,.20); --tag-ink:#C6CCD6;
  --tag-red-bg:rgba(226,112,122,.12);  --tag-red-line:rgba(226,112,122,.34);  --tag-red-ink:#E88F98;
  --tag-gold-bg:rgba(217,180,92,.10);  --tag-gold-line:rgba(217,180,92,.32);  --tag-gold-ink:#E8D2A0;
  --tag-cyan-bg:rgba(154,162,174,.10); --tag-cyan-line:rgba(154,162,174,.30); --tag-cyan-ink:#C3CAD4;
  --tag-green-bg:rgba(95,190,139,.10); --tag-green-line:rgba(95,190,139,.30); --tag-green-ink:#A8E0C2;
  --toast-bg:rgba(246,248,251,.94); --toast-tx:#1B1F29; --toast-line:rgba(255,255,255,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

/* html 也铺底色：iOS 主屏模式下拉橡皮筋时露出的是这一层 */
html{background:var(--bg0); overscroll-behavior-y:none;}
html,body{margin:0;min-height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(90% 55% at 10% -5%,var(--glow-a),transparent 58%),
    radial-gradient(85% 60% at 100% 100%,var(--glow-b),transparent 55%),
    radial-gradient(70% 45% at 85% -8%,var(--glow-c),transparent 60%),
    linear-gradient(165deg,var(--bg1),var(--bg2));
  min-height:100vh;
  user-select:none;
  touch-action:manipulation;
  transition:background .3s ease, color .2s ease;
}
/* 极淡点纹（克制：低于 5% 透明度，仅打破大片纯色） */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:26px 26px;
}

/* 主容器：上避状态栏，下让出底栏 + 小横条。 */
#app{
  position:relative; z-index:1; max-width:520px; margin:0 auto;
  padding:18px 16px calc(var(--nav-h) + 18px);
  padding:calc(18px + var(--sat)) calc(16px + var(--sar)) calc(var(--nav-h) + 18px + var(--sab)) calc(16px + var(--sal));
  min-height:100vh;
}

/* ---------- 通用卡片 · 液态玻璃（不铺全页） ---------- */
.panel{
  background:var(--card);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:16px 16px;
  box-shadow:inset 0 1px 0 var(--inset-hi), var(--shadow);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  margin-bottom:16px;
  transition:transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.panel.hot{border-color:var(--brand-border); box-shadow:inset 0 1px 0 var(--inset-hi), var(--shadow-brand);}
@media (hover:hover){
  .panel:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 var(--inset-hi), var(--shadow-brand); }
  .panel:active{ transform:translateY(0); }
}

/* ---------- 通用按钮 · 大圆角 + 柔和渐变，hover 仅微动 ---------- */
.btn{
  background:linear-gradient(180deg,var(--brand-hi),var(--brand) 52%,var(--brand-dk));
  color:#fff; border:none; border-radius:16px; padding:8px 16px;
  font-size:14.5px; font-weight:800; font-family:inherit; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px var(--btn-shadow);
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 9px 20px var(--btn-shadow); }
  .btn:active{ transform:translateY(0); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 3px 8px var(--btn-shadow); }
}
.btn:active{ transform:scale(.98); box-shadow:0 3px 8px var(--btn-shadow); }
.btn.ghost{
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--ink); box-shadow:none;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn.ghost:hover{ background:var(--glass-2); }
.btn.sm{padding:8px 16px; font-size:12.5px; border-radius:13px;}
.btn:disabled{opacity:.45; cursor:default;}
.btn:disabled:active{transform:none;}

/* ---------- 通用输入：无粗边框，聚焦微弱发光描边 ---------- */
.input{
  width:100%;
  background:var(--glass);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--glass-border);
  border-radius:12px; padding:8px 16px; color:var(--ink);
  font-size:14px; font-family:inherit; outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--sel-bg), 0 0 0 1px var(--sel-line);
}
.input::placeholder{color:var(--dim);}
textarea.input{resize:none; line-height:1.6;}

/* ---------- 页头 ---------- */
.page-head{margin-bottom:16px;}
.page-title{
  font-size:var(--fs-h1); font-weight:900; margin:0 0 4px; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-sub{font-size:12.5px; color:var(--soft); margin:0; line-height:1.55;}
/* 顶栏已承担页面名：正文只留一行浅色导语 */
.page-lead{
  display:block; margin:0 2px 16px; font-size:12px; color:var(--soft); line-height:1.6;
}

/* 渐变标题文字（统一取代各处重复的 background-clip 写法） */
.grad-text{
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 分区小标题（用小色条 + 留白，不用横线） ---------- */
.sec-title{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; color:var(--ink);
  margin:0 0 8px; letter-spacing:.3px;
}
.sec-title:before{
  content:""; width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,var(--brand-lt),var(--cyan));
}
.sec-title .n{margin-left:auto; font-size:11px; font-weight:700; color:var(--dim);}

/* ---------- 空状态 ---------- */
.empty{
  text-align:center; padding:24px 16px; color:var(--dim); font-size:12.5px; line-height:1.7;
}
.empty .e-ic{font-size:34px; display:block; margin-bottom:8px; opacity:.6;}

/* ---------- 徽章（低饱和浅底 + 细描边） ---------- */
.tag{
  display:inline-flex; align-items:center; gap:3px;
  font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:999px;
  background:var(--tag-bg,#0000); border:1px solid var(--tag-line,#0000); color:var(--tag-ink);
  white-space:nowrap;
}
.tag.red{background:var(--tag-red-bg); border-color:var(--tag-red-line); color:var(--tag-red-ink);}
.tag.gold{background:var(--tag-gold-bg); border-color:var(--tag-gold-line); color:var(--tag-gold-ink);}
.tag.cyan{background:var(--tag-cyan-bg); border-color:var(--tag-cyan-line); color:var(--tag-cyan-ink);}
.tag.green{background:var(--tag-green-bg); border-color:var(--tag-green-line); color:var(--tag-green-ink);}

/* ---------- 合规提示 ---------- */
.notice{
  text-align:center; font-size:10.5px; color:var(--soft);
  opacity:.8; line-height:1.75; letter-spacing:.2px; padding:0 8px;
}
.notice p{margin:1px 0;}

/* ---------- 顶部返回/标题条 ---------- */
.topbar{
  display:flex; align-items:center; gap:8px; margin-bottom:16px;
}
.topbar .back{
  background:var(--glass); border:1px solid var(--glass-border); color:var(--soft);
  width:34px; height:34px; border-radius:12px; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex:none;
  font-family:inherit; transition:transform .1s;
}
.topbar .back:active{transform:scale(.94); color:var(--ink);}
.topbar h2{
  font-size:var(--fs-h2); font-weight:900; margin:0; letter-spacing:.5px;
  background:linear-gradient(90deg,var(--brand-lt),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 细分隔线（克制使用） ---------- */
.split{
  height:1px; margin:8px 0;
  background:linear-gradient(90deg,transparent,var(--glass-border),transparent);
}

/* ---------- 骨架/载入 ---------- */
.loading{text-align:center; color:var(--dim); font-size:12.5px; padding:24px 0;}

/* ---------- Toast ---------- */
#toastHost{position:fixed; left:0; right:0; bottom:calc(var(--nav-h) + var(--sab) + 16px);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:10030; pointer-events:none;}
.toast{
  background:var(--toast-bg); border:1px solid var(--toast-line);
  color:var(--toast-tx); font-size:13px; font-weight:700; padding:8px 16px;
  border-radius:13px; box-shadow:0 10px 26px rgba(16,24,40,.18); backdrop-filter:blur(10px);
  animation:toastIn .22s ease both; max-width:80vw; text-align:center;
}
@keyframes toastIn{
  from{opacity:0; transform:translateY(10px) scale(.94);}
  to{opacity:1; transform:none;}
}

/* ============================================================
   PC 适配（宽屏 ≥820px）：内容容器加宽，左侧固定导航竖栏
   —— 一次改动覆盖全部页面（导航与容器为全站共享）
   ============================================================ */
@media (min-width:820px){
  :root{ --rail:216px; }
  body{ overflow-x:hidden; }
  html:not(.hu-embed) #app{
    max-width:1000px;
    margin:0 0 0 var(--rail);          /* 右移给左侧导航栏，内容成为居左的"应用列" */
    padding:32px 48px 64px;
  }
  /* 有固定顶栏的页面（body.hu-top，注意类在 body 不在 html）：顶部必须让出顶栏高度 */
  html:not(.hu-embed) body.hu-top #app{ padding-top:calc(66px + var(--sat)); }
  html:not(.hu-embed) #toastHost{ left:var(--rail); right:0; bottom:24px; }
  .panel{ padding:16px 24px; }
}

/* 各游戏页底部健康提示（6 个游戏共用，插在 #app 末尾） */
.hu-play-tip{
  margin:24px 0 2px; text-align:center;
  font-size:11px; line-height:1.7; color:var(--dim); letter-spacing:.2px;
}