/* ═══════════════════════════════════════════════════════════════════════════
   playchat UI · 样式表
   来自「像素3 · 柴犬机」这一版设计。2026-08-07。

   这是产品的唯一样式来源。所有页面从这里取，不各写各的。

   ─── 这套东西长什么样，一句话 ───
   一台掌上游戏机。面板是塑料件不是卡片，零圆角，靠 2px 的亮暗边做出厚度。
   结构、颜色与角色都取自像素3的柴犬掌机。
   动画一格一格跳，不做平滑过渡。

   ─── 九条规矩，实现时逐条对照 ───
   1.  所有尺寸是 4 的倍数。4 是这套界面的一个像素。
   2.  零圆角。要柔和用像素圆角（.pc-pxr），不用 border-radius。
   3.  一屏之内，柴犬橙只出现在「正在进行的那一件事」上。多处高亮 = 没有重点。
   4.  黄色不做常规交互色，只做奖励、提醒与出厂。
   5.  高饱和品牌色作底时一律配深色字；小号彩色文字必须使用对比度达标的深色派生值。
   6.  动画一律 steps()。8-bit 没有亚像素运动，缓动一上就露馅。
   7.  游戏画面不受主题影响。那是用户的东西，外壳不许给它加滤镜、加纹理、改色。
   8.  深色模式下不放高亮面。深底上一块接近纯白的面就是一盏灯，扎眼。
       区分靠凸起和凹陷，不靠亮度。
   9.  位图字只用于英文和数字，中文用系统黑体。
       Google Fonts 没有可靠的简体点阵中文字；硬凑只会让中文难读。
       像素感由外壳、图形、动画承担，不由汉字承担。

   ─── 字体 ───
   需要在页面里先引入：
   <link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
   要中文也点阵，得自托管 Zpix 一类字体（约 1–2MB，可按用到的字裁剪），另说。

   ─── 目录 ───
   01 设计变量
   02 基础与排版
   03 形状：塑料件、像素圆角
   04 按钮
   05 标签与计数
   06 面板与卡片
   07 表单
   08 对话
   09 进度：读条、关卡地图
   10 导航：顶栏、标签页、菜单
   11 反馈：弹窗、提示条、空状态、加载
   12 工具类
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 01 设计变量 ═══════════════════════════════════════════════════════════ */

:root{
  /* 像素单位。所有尺寸是它的整数倍 */
  --u:4px;

  /* 间距级别 */
  --sp-1:4px;  --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px; --sp-6:24px;  --sp-8:32px;  --sp-10:40px; --sp-12:48px;

  /* 字体。
     bit 是位图字，只给短英文标签和数字——Silkscreen 只有大写字形，
     小写会被画成大写，所以代码、路径、任何区分大小写的内容一律不能用它，走 mono。 */
  --pc-bit:"Silkscreen",ui-monospace,"SF Mono",Menlo,monospace;
  --pc-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pc-han:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;

  /* 字号。位图字只走 bit 那一档，中文走 han 那一档 */
  --bit-xs:9px;  --bit-sm:10px; --bit-md:11px; --bit-lg:13px; --bit-xl:15px;
  --han-xs:11px; --han-sm:12px; --han-md:13px; --han-lg:14px;
  --han-xl:16px; --han-2xl:20px; --han-3xl:26px;

  /* 边宽。塑料件的亮暗边固定 2px，再粗就笨 */
  --bd:2px;
  --corner:4px;   /* 像素圆角切掉的方块 */

  /* 层级。全站只认这四个数，别在组件里写零散的 z-index——
     下拉浮层跑到弹窗底下、提示条被遮住，十有八九是这里没统一。 */
  --z-sticky:50;    /* 顶栏、吸顶的东西 */
  --z-menu:200;     /* 下拉、菜单、气泡 */
  --z-dialog:300;   /* 弹窗和它的遮罩 */
  --z-toast:400;    /* 提示条。它要能盖住弹窗 */
}

/* ── 夜里：像素3棕黑塑料机身。这是默认 ──
   变量同时挂在 :root 上，所以就算 data-theme 属性丢了、脚本没跑，
   页面也是深色，不会因为找不到变量而崩成一片白。
   深色是这个产品的常态：同类工具（Godot、Blender、Unity）都是暗的，
   而且全屏唯一该鲜艳的是用户的游戏画面。 */
:root,[data-theme="dark"]{
  /* 这一行管的是浏览器自己画的那些东西：select 展开后的选项列表、
     滚动条、日期时间选择器、自动填充的背景色。不写它，深色界面里
     一点开下拉就是一片白底黑字。这是最省事也最容易被漏掉的一行。 */
  color-scheme:dark;

  --night:#14100B;   /* 机身缝隙 · 页面底 */
  --case:#221B12;    /* 塑料面 */
  --case2:#2E251A;   /* 凸起的塑料面 */
  --case3:#392E20;   /* 悬停 */
  --hi:#4A3A26;      /* 塑料上高光边 */
  --lo:#0A0705;      /* 塑料下阴影边 */
  --road:#4A3A26;    /* 还没走到的路、还没填的格子 */

  --shiba:#FF8A2B;
  --shiba-txt:#FF8A2B;
  --shiba-hi:#FFC08A; --shiba-lo:#8A3705;
  --ember:#C2540A;
  --gold:#FFC43D;
  --gold-txt:#FFC43D;
  --gold-hi:#FFE59A; --gold-lo:#9B6E10;
  --moss:#7FD65C;
  --moss-lo:#4E9A32;
  --rust:#E0714A;
  --rust-bg:#35170F;
  --ink:#1A1410;

  --txt:#EDE0CE;
  --dim:#9A8975;
  --focus:#FF8A2B;
  --grain:rgba(255,240,220,.045);
  --scrim:rgba(10,7,5,.76);

  /* 肥柴说话的那块面。只比机身亮一档，靠凸起区分，不靠亮度 */
  --sheet:#2E241A;     --sheet-hi:#433523;  --sheet-lo:#140E08;
  --sheet2:#241C13;    --sheet-line:#3F3122;
  --sheet-btn:#3A2E1F; --sheet-btn-lo:#160F08;
  --sheet-dim:#A2937C;
  --on-sheet:#F0E4D2;
  --sheet-accent:#FF8A2B;
  --bx-bg:#1A1410;
  /* 你说的那块：比机身更深，沉下去 */
  --me-bg:#181109;     --me-line:#433523;   --on-ink:#E8DCC8;
}

/* ── 白天：像素3米白塑料机身 ── */
[data-theme="light"]{
  color-scheme:light;

  --night:#D6CFC0;
  --case:#EDE7D9;
  --case2:#F6F1E6;
  --case3:#FFF7ED;
  --hi:#FFFFFF;
  --lo:#AFA592;
  --road:#C4B9A4;

  --shiba:#FF8A2B;
  --shiba-txt:#C2540A;
  --shiba-hi:#FFC08A;  --shiba-lo:#A8450A;
  --ember:#C2540A;
  --gold:#FFC43D;
  --gold-txt:#8A6A0A;
  --gold-hi:#FFE59A;   --gold-lo:#9B6E10;
  --moss:#7FD65C;
  --moss-lo:#4E9A32;
  --rust:#B33C1A;
  --rust-bg:#FBE7DE;
  --ink:#1A1410;

  --txt:#2A2118;
  --dim:#7D7263;
  --focus:#C2540A;
  --grain:transparent;   /* 白天不铺颗粒，浅底上一层点就是满屏麻子 */
  --scrim:rgba(26,20,16,.52);

  --sheet:#FFFFFF;     --sheet-hi:#FFFFFF;  --sheet-lo:#C4B9A4;
  --sheet2:#F7F2E8;    --sheet-line:#E2D9C7;
  --sheet-btn:#EFE9DC; --sheet-btn-lo:#B7AC97;
  --sheet-dim:#6B5B45;
  --on-sheet:#1A1410;
  --sheet-accent:#C2540A;
  --bx-bg:#FFFFFF;
  --me-bg:#1A1410;     --me-line:#0A0705;   --on-ink:#FFF7ED;
}


/* ══ 02 基础与排版 ═════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--night);color:var(--txt);
  font-family:var(--pc-han);font-size:var(--han-md);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
p{margin:0}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:700}
h1{font-size:var(--han-3xl)}
h2{font-size:var(--han-2xl)}
h3{font-size:var(--han-xl)}
h4{font-size:var(--han-lg)}
a{color:var(--shiba-txt);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--shiba);color:var(--ink)}

/* 键盘焦点。用反色，不占用任何状态色 */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* 机身表面的颗粒。挂在最外层容器上，白天自动没有 */
.pc-grain{position:relative}
.pc-grain::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background-image:radial-gradient(var(--grain) 1px,transparent 1px);
  background-size:4px 4px;
}

/* 位图字。只给英文和数字，别套在中文上 */
.pc-bit{font-family:var(--pc-bit);font-weight:400;letter-spacing:.02em}
/* 代码、文件路径、任何区分大小写的东西 */
.pc-code{font-family:var(--pc-mono);font-size:12px;line-height:1.75}
/* 小标签：全大写英文 */
.pc-label{font-family:var(--pc-bit);font-size:var(--bit-sm);color:var(--dim);letter-spacing:.06em}

/* 滚动条 */
.pc-scroll{overflow-y:auto}
.pc-scroll::-webkit-scrollbar{width:10px;height:10px}
.pc-scroll::-webkit-scrollbar-track{background:var(--night)}
.pc-scroll::-webkit-scrollbar-thumb{background:var(--case2);border:2px solid var(--lo)}
.pc-scroll::-webkit-scrollbar-thumb:hover{background:var(--case3)}

/* 分隔线。塑料上的一道刻痕：一暗一亮两条 */
.pc-hr{height:0;border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);
       margin:var(--sp-4) 0}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}


/* ══ 03 形状 ═══════════════════════════════════════════════════════════════ */

/* 塑料件。.pc-plate 凸起（亮边在上），.pc-slot 凹陷（亮边在下）。
   立体感全靠这两个类，不用阴影。 */
.pc-plate{background:var(--case);border:var(--bd) solid;
          border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-slot{background:var(--night);border:var(--bd) solid;
         border-color:var(--lo) var(--hi) var(--hi) var(--lo)}

/* 像素圆角：四角各切掉一格。
   只用在不需要键盘焦点的大面板——clip-path 会把焦点环一起裁掉。
   按钮、输入框这类要接焦点的，一律保持直角。 */
.pc-pxr{
  clip-path:polygon(
    var(--corner) 0, calc(100% - var(--corner)) 0,
    calc(100% - var(--corner)) var(--corner), 100% var(--corner),
    100% calc(100% - var(--corner)), calc(100% - var(--corner)) calc(100% - var(--corner)),
    calc(100% - var(--corner)) 100%, var(--corner) 100%,
    var(--corner) calc(100% - var(--corner)), 0 calc(100% - var(--corner)),
    0 var(--corner), var(--corner) var(--corner));
}


/* ══ 04 按钮 ═══════════════════════════════════════════════════════════════ */

/* 按钮就是一块塑料按键：凸起，按下去时边框翻过来、整体往右下沉 1px。
   文案写「按了会发生什么」——「发送」不是「提交」，「拿走文件」不是「导出」。 */
.pc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--pc-bit);font-size:var(--bit-md);line-height:1;
  padding:9px 14px;cursor:pointer;user-select:none;white-space:nowrap;
  background:var(--case2);color:var(--txt);
  border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
}
.pc-btn:hover{background:var(--case3)}
.pc-btn:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo);transform:translate(1px,1px)}

/* 主要按钮 · 柴犬橙。一屏之内只用一次，给「正在做的那一件事」 */
.pc-btn--primary{background:var(--shiba);color:var(--ink);
  border-color:var(--shiba-hi) var(--shiba-lo) var(--shiba-lo) var(--shiba-hi)}
.pc-btn--primary:hover{background:#FF9C4A}
.pc-btn--primary:active{border-color:var(--shiba-lo) var(--shiba-hi) var(--shiba-hi) var(--shiba-lo)}

/* 金 · 只给出厂、拿走文件、领奖励。不要拿它当"更强的主要按钮"用 */
.pc-btn--gold{background:var(--gold);color:var(--ink);
  border-color:var(--gold-hi) var(--gold-lo) var(--gold-lo) var(--gold-hi)}
.pc-btn--gold:hover{background:#FFD05C}
.pc-btn--gold:active{border-color:var(--gold-lo) var(--gold-hi) var(--gold-hi) var(--gold-lo)}

/* 危险 · 删除、放弃。它不该是最显眼的那个，所以不填满色 */
.pc-btn--danger{background:var(--case2);color:var(--rust);border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-btn--danger:hover{background:var(--rust);color:var(--ink);
  border-color:#F19A78 #7A2B17 #7A2B17 #F19A78}

/* 幽灵 · 次要动作，不占塑料面 */
.pc-btn--ghost{background:transparent;border-color:transparent;color:var(--dim)}
.pc-btn--ghost:hover{background:var(--case2);color:var(--txt);
  border-color:var(--hi) var(--lo) var(--lo) var(--hi)}

/* 尺寸 */
.pc-btn--sm{font-size:var(--bit-sm);padding:6px 10px;gap:5px}
.pc-btn--lg{font-size:var(--bit-lg);padding:13px 22px;gap:9px}
.pc-btn--block{display:flex;width:100%}

/* 禁用。按钮不该无缘无故变灰——能点不能点，用户要能提前知道原因 */
.pc-btn[disabled],.pc-btn[aria-disabled="true"]{
  opacity:.4;cursor:not-allowed;pointer-events:none}

/* 图标按钮：正方形，只放一个图标，必须给 aria-label */
.pc-iconbtn{width:34px;height:34px;padding:0;flex:none}
.pc-iconbtn.pc-btn--sm{width:26px;height:26px}
.pc-iconbtn.pc-btn--lg{width:44px;height:44px}

/* 按钮里的图标。12×12 或 16×16，跟着文字色走 */
.pc-btn .pc-ic{width:12px;height:12px;flex:none;fill:currentColor}
.pc-btn--lg .pc-ic{width:16px;height:16px}

/* 一排按钮 */
.pc-btnrow{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}


/* ══ 05 标签与计数 ═════════════════════════════════════════════════════════ */

/* 状态标签。方块点 + 位图字，不用胶囊——胶囊是圆的，这套里没有圆。
   一个区域里只放一个「正在做」。 */
.pc-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--pc-bit);font-size:var(--bit-sm);line-height:1;
  padding:5px 9px;white-space:nowrap;color:var(--ink);background:var(--case2);
}
.pc-tag::before{content:"";width:6px;height:6px;background:currentColor;flex:none}
.pc-tag--live{background:var(--shiba)}                    /* 正在做 */
.pc-tag--live::before{animation:pc-blip 1s steps(1) infinite}
.pc-tag--ok{background:var(--moss)}                       /* 通过、能玩了 */
.pc-tag--gold{background:var(--gold)}                     /* 出厂、奖励 */
.pc-tag--warn{background:var(--rust);color:var(--ink)} /* 出错 */
.pc-tag--quiet{background:transparent;color:var(--dim);border:2px solid var(--road)}
.pc-tag--plain::before{display:none}

@keyframes pc-blip{0%,50%{opacity:1}51%,100%{opacity:0}}

/* 计数徽章。贴在图标或标题右上 */
.pc-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  font-family:var(--pc-bit);font-size:var(--bit-xs);line-height:1;
  background:var(--shiba);color:var(--ink);
}
.pc-badge--quiet{background:var(--road);color:var(--txt)}


/* ══ 06 面板与卡片 ═════════════════════════════════════════════════════════ */

/* 面板：一块凸起的塑料，带标题条 */
.pc-panel{background:var(--case);border:var(--bd) solid;
          border-color:var(--hi) var(--lo) var(--lo) var(--hi);
          display:flex;flex-direction:column;min-height:0}
.pc-panel__head{flex:none;display:flex;align-items:center;gap:var(--sp-3);
                padding:9px var(--sp-3);border-bottom:var(--bd) solid var(--lo)}
.pc-panel__title{font-size:var(--han-sm);font-weight:700;color:var(--txt)}
.pc-panel__meta{font-family:var(--pc-bit);font-size:var(--bit-sm);color:var(--dim)}
.pc-panel__head .pc-tag,.pc-panel__head .pc-btn{margin-left:auto}
.pc-panel__head .pc-tag~.pc-tag,.pc-panel__head .pc-btn~*{margin-left:0}
.pc-panel__body{flex:1;min-height:0;padding:var(--sp-4)}
.pc-panel__foot{flex:none;padding:var(--sp-3);border-top:var(--bd) solid var(--lo);
                display:flex;align-items:center;gap:var(--sp-2)}

/* 凹槽：放屏幕、放代码、放任何"嵌进机身"的东西 */
.pc-well{background:var(--night);border:var(--bd) solid;
         border-color:var(--lo) var(--hi) var(--hi) var(--lo);padding:var(--sp-3)}

/* 卡片：一个游戏一张。整块可点，hover 时抬起来 */
.pc-card{display:block;background:var(--case);border:var(--bd) solid;
         border-color:var(--hi) var(--lo) var(--lo) var(--hi);
         color:inherit;text-decoration:none;cursor:pointer}
.pc-card:hover{background:var(--case2);text-decoration:none}
.pc-card:active{border-color:var(--lo) var(--hi) var(--hi) var(--lo);transform:translate(1px,1px)}
.pc-card__shot{aspect-ratio:16/10;background:#14100B;color:#FFFFFF;overflow:hidden;
               border-bottom:var(--bd) solid #1A1410;image-rendering:pixelated}
.pc-card__shot img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated}
/* 游戏内容有自己的固定底色和边界，不继承页面的深浅主题。 */
body .thumb{background:#14100B;border-color:#1A1410;color:#FFFFFF}
body .gm{color:#FFFFFF}
.pc-card__body{padding:var(--sp-3)}
.pc-card__title{font-size:var(--han-lg);font-weight:700;color:var(--txt);
                display:flex;align-items:center;gap:var(--sp-2)}
.pc-card__meta{margin-top:2px;font-family:var(--pc-bit);font-size:var(--bit-sm);color:var(--dim)}
.pc-card__foot{margin-top:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}

/* 卡片网格。
   ⚠️ 别用 repeat(auto-fill, minmax(240px, 1fr))。
   那个写法配上卡片里的 aspect-ratio 缩略图会让 Chrome 把行高算错——
   实测一行卡片被撑到 787px，实际只需要 299px，卡片下面留一大片空白。
   原因是 auto-fill 定列数和 aspect-ratio 定高度互相依赖，浏览器取了 max-content 宽度去算。
   写死列数就没这个问题，而且断点几列一目了然，比 auto-fill 更好控制。
   另外每列用 minmax(0,1fr) 而不是 1fr——1fr 的最小值是 auto，
   长文件名之类的内容会把列撑破。 */
.pc-grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(4,minmax(0,1fr));
         align-items:start}
@media (max-width:1180px){.pc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.pc-grid{grid-template-columns:minmax(0,1fr)}}
/* 要一行固定几张时用这几个，别再手写 grid-template-columns */
.pc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-grid--5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* 读数窗：嵌进机身的小屏，显示一个数 */
.pc-readout{display:flex;gap:2px}
.pc-readout__cell{background:var(--night);border:var(--bd) solid var(--lo);
                  padding:4px 11px;text-align:center}
.pc-readout__k{display:block;font-family:var(--pc-bit);font-size:var(--bit-xs);color:var(--dim)}
.pc-readout__v{display:block;font-family:var(--pc-bit);font-size:var(--bit-lg);color:var(--shiba-txt)}
.pc-readout__cell--gold .pc-readout__v{color:var(--gold-txt)}
.pc-readout__cell--ok .pc-readout__v{color:var(--moss-lo)}


/* ══ 07 表单 ═══════════════════════════════════════════════════════════════ */

/* 一组：标签 + 控件 + 说明 */
.pc-field{display:flex;flex-direction:column;gap:6px}
.pc-field__label{font-size:var(--han-sm);font-weight:600;color:var(--txt)}
.pc-field__hint{font-size:var(--han-xs);color:var(--dim)}
.pc-field__error{font-size:var(--han-xs);color:var(--rust)}

/* 输入框：凹进去的一道槽 */
.pc-input,.pc-textarea,.pc-select{
  font-family:var(--pc-han);font-size:var(--han-md);line-height:1.6;color:var(--txt);
  background:var(--night);padding:9px 11px;width:100%;
  border:var(--bd) solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  border-radius:0;appearance:none;
}
.pc-textarea{resize:vertical;min-height:80px}
.pc-input::placeholder,.pc-textarea::placeholder{color:var(--dim)}
.pc-input:focus,.pc-textarea:focus,.pc-select:focus{outline:none;border-color:var(--shiba)}
.pc-input[aria-invalid="true"],.pc-textarea[aria-invalid="true"]{border-color:var(--rust)}
.pc-input[disabled],.pc-textarea[disabled],.pc-select[disabled]{opacity:.45;cursor:not-allowed}

/* ── ⚠️ 原生 <select> 一律不用 ───────────────────────────
   没有例外，手机上也不用。

   原因：收起来那一条能改成我们的样子，但展开后那个列表在 macOS 上
   由系统绘制——圆角、蓝色高亮、系统字体，全都改不动。
   一套零圆角的像素界面里点开下拉冒出一个 macOS 圆角菜单，前面所有的功夫都白费。
   Windows 和 Linux 上 option 的颜色能改一点，也仅此而已，而且三个平台各长一样。

   下面这条规则让任何 select 都描红，写的时候当场就能发现。
   这不是提示，是拦截——不要为了让红框消失而去加 class，
   正确做法是换成 .pc-dropdown。 */
select{outline:3px solid var(--rust) !important;
       outline-offset:2px !important}
select::after{content:"用 .pc-dropdown 替换"}

/* ── 下拉 · 自己画的 ─────────────────────────────────────
   要图标、要说明文字、要搜索、要多选、要分组时才用它。
   结构固定成三层，别自己另发明：
     .pc-dropdown           外壳，只管定位关系
       .pc-dropdown__btn    触发器，长得跟输入框一样（凹槽）
       .pc-dropdown__panel  浮层，必须带 popover 属性
         .pc-option         选项

   ⚠️ 浮层必须写 popover 属性，不是可选项：
   <div class="pc-dropdown__panel" popover>…</div>
   浏览器会把带 popover 的元素提到顶层（top layer），于是三件事自动解决——
   不会被任何祖先的 overflow:hidden 裁掉、不受任何 z-index 影响、
   按 Esc 自动关、点外面自动关。自己用 position:absolute 画浮层，
   这四件事每一件都要手写，而且每一件都会出错。 */
.pc-dropdown{position:relative;display:inline-block}
.pc-dropdown--block{display:block;width:100%}

.pc-dropdown__btn{
  display:flex;align-items:center;gap:8px;width:100%;
  font-family:var(--pc-han);font-size:var(--han-md);line-height:1.6;color:var(--txt);
  background:var(--night);padding:9px 11px;cursor:pointer;text-align:left;
  border:var(--bd) solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo);
}
.pc-dropdown__btn:hover{background:var(--case)}
.pc-dropdown__btn[aria-expanded="true"]{border-color:var(--shiba)}
.pc-dropdown__btn[disabled]{opacity:.45;cursor:not-allowed}
/* 没选东西时显示占位文字，颜色要和真选了区分开 */
.pc-dropdown__btn.is-empty{color:var(--dim)}
/* 尾部的像素三角。展开时翻过来 */
.pc-dropdown__btn::after{
  content:"";margin-left:auto;flex:none;width:8px;height:6px;background:currentColor;
  clip-path:polygon(0 0,100% 0,100% 2px,75% 2px,75% 4px,25% 4px,25% 2px,0 2px,
                    25% 2px,25% 4px,75% 4px,75% 6px,25% 6px,25% 4px)}
.pc-dropdown__btn[aria-expanded="true"]::after{transform:scaleY(-1)}

.pc-dropdown__panel{
  /* popover 默认是 fixed 定位、居中在视口，位置由 JS 算完写进 left/top。
     不要给它设 position:absolute——那会让它掉回普通层，前面说的四件好事全没了。 */
  margin:0;padding:var(--sp-1);inset:auto;
  min-width:180px;max-height:280px;overflow-y:auto;
  background:var(--case2);color:var(--txt);
  border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
}
.pc-dropdown__panel::backdrop{background:transparent}
.pc-dropdown__panel::-webkit-scrollbar{width:10px}
.pc-dropdown__panel::-webkit-scrollbar-track{background:var(--night)}
.pc-dropdown__panel::-webkit-scrollbar-thumb{background:var(--road);border:2px solid var(--lo)}
/* 浏览器不支持 popover 时的兜底：退回绝对定位，至少能用 */
@supports not selector(:popover-open){
  .pc-dropdown__panel{position:absolute;z-index:var(--z-menu);top:100%;left:0;
                      display:none;margin-top:2px}
  .pc-dropdown__panel.is-open{display:block}
}

/* 选项。整行可点，别只让文字可点 */
.pc-option{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;font-family:var(--pc-han);font-size:var(--han-sm);
  color:var(--txt);background:transparent;border:0;text-align:left;cursor:pointer;
}
.pc-option:hover,.pc-option.is-active{background:var(--shiba);color:var(--ink)}
.pc-option[aria-selected="true"]{background:var(--case3)}
.pc-option[aria-selected="true"]:hover,.pc-option[aria-selected="true"].is-active{
  background:var(--shiba);color:var(--ink)}
.pc-option[disabled]{opacity:.4;cursor:not-allowed;background:transparent}
.pc-option .pc-ic{width:12px;height:12px;flex:none;fill:currentColor}
.pc-option__text{flex:1;min-width:0}
.pc-option__note{display:block;font-size:var(--han-xs);opacity:.72;line-height:1.4}
/* 选中打勾。位置固定在行尾，不要让它挤动文字 */
.pc-option__tick{margin-left:auto;flex:none;width:12px;height:12px;position:relative;visibility:hidden}
.pc-option[aria-selected="true"] .pc-option__tick{visibility:visible}
.pc-option__tick::after{content:"";position:absolute;left:0;top:5px;width:2px;height:2px;
  background:currentColor;
  box-shadow:2px 2px 0 currentColor,4px 0 0 currentColor,6px -2px 0 currentColor,8px -4px 0 currentColor}

/* 分组标题。不可点，别做成看起来能点的样子 */
.pc-optgroup{padding:8px 10px 4px;font-family:var(--pc-bit);font-size:var(--bit-xs);
             color:var(--dim);letter-spacing:.06em}
.pc-option+.pc-optgroup{border-top:1px solid var(--lo);margin-top:var(--sp-1);padding-top:8px}

/* 浮层里的搜索框。选项超过约 10 条就该有 */
.pc-dropdown__search{padding:var(--sp-1);border-bottom:var(--bd) solid var(--lo);
                     margin:calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) var(--sp-1);
                     background:var(--case2);position:sticky;top:calc(var(--sp-1) * -1);z-index:1}
.pc-dropdown__search .pc-input{padding:6px 9px;font-size:var(--han-sm)}

/* 一条都没匹配上。不要只显示空白 */
.pc-dropdown__none{padding:16px 10px;text-align:center;font-size:var(--han-sm);color:var(--dim)}

/* 手机上换个形态：浮层从底部升起，占满宽度。
   小屏幕上把一个浮层锚在触发器旁边，横竖都挤，键盘一弹还会盖住。
   底部面板是移动端的标准解法——注意这不是"退回原生 select"，
   样式仍然完全受控，选项行也放大到手指点得准的尺寸。
   is-sheet 由 playchat-dropdown.js 在窄屏时自动加上。 */
.pc-dropdown__panel.is-sheet{
  left:0;right:0;top:auto;bottom:0;width:100%;min-width:0;max-width:none;
  max-height:64vh;padding:var(--sp-2) 0 var(--sp-4);
  border-width:var(--bd) 0 0;border-color:var(--hi);
}
.pc-dropdown__panel.is-sheet::backdrop{background:var(--scrim)}
.pc-dropdown__panel.is-sheet .pc-option{padding:14px var(--sp-4);font-size:var(--han-md)}
.pc-dropdown__panel.is-sheet .pc-optgroup{padding-left:var(--sp-4);padding-right:var(--sp-4)}
.pc-dropdown__panel.is-sheet .pc-dropdown__search{padding:0 var(--sp-4) var(--sp-2);margin:0 0 var(--sp-2)}
/* 顶上一道横杠，告诉用户这块是能往下拉走的 */
.pc-dropdown__panel.is-sheet::before{
  content:"";display:block;width:40px;height:4px;background:var(--road);
  margin:0 auto var(--sp-2)}

/* 输入区：对话那一块。整块是槽，里面放提示文字和一排按钮 */
.pc-composer{background:var(--night);padding:var(--sp-3);
             border:var(--bd) solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.pc-composer:focus-within{border-color:var(--shiba)}
.pc-composer__input{font-family:var(--pc-han);font-size:var(--han-sm);color:var(--txt);
  background:transparent;border:0;outline:none;width:100%;resize:none;
  min-height:22px;line-height:1.6;padding:0}
.pc-composer__input::placeholder{color:var(--dim)}
.pc-composer__row{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3)}
.pc-composer__row .pc-btn--primary{margin-left:auto}
/* 光标：一格一格闪，不做淡入淡出 */
.pc-caret{display:inline-block;width:8px;height:14px;background:var(--shiba);
          vertical-align:-2px;animation:pc-blip .9s steps(1) infinite}

/* 复选框。设置项和普通清单使用。 */
.pc-check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
          font-size:var(--han-md);color:var(--txt)}
.pc-check input{position:absolute;opacity:0;width:0;height:0}
.pc-check__bx{width:16px;height:16px;flex:none;position:relative;background:var(--bx-bg);
              border:var(--bd) solid var(--road)}
.pc-check input:focus-visible+.pc-check__bx{outline:3px solid var(--focus);outline-offset:2px}
.pc-check input:checked+.pc-check__bx{background:var(--moss);border-color:var(--moss-lo)}
/* 对勾逐格点出来，不用 rotate——旋转会产生亚像素边缘，像素风一眼看得出 */
.pc-check input:checked+.pc-check__bx::after{
  content:"";position:absolute;left:1px;top:6px;width:2px;height:2px;background:var(--ink);
  box-shadow:2px 2px 0 var(--ink),4px 0 0 var(--ink),6px -2px 0 var(--ink),8px -4px 0 var(--ink)}
.pc-check input:disabled~*{opacity:.45}

/* 单选：同样是方的。这套里没有圆 */
.pc-radio{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
          font-size:var(--han-md);color:var(--txt)}
.pc-radio input{position:absolute;opacity:0;width:0;height:0}
.pc-radio__bx{width:16px;height:16px;flex:none;position:relative;background:var(--bx-bg);
              border:var(--bd) solid var(--road)}
.pc-radio input:focus-visible+.pc-radio__bx{outline:3px solid var(--focus);outline-offset:2px}
.pc-radio input:checked+.pc-radio__bx{border-color:var(--shiba)}
.pc-radio input:checked+.pc-radio__bx::after{
  content:"";position:absolute;inset:2px;background:var(--shiba)}

/* 开关：一个滑块在槽里，一格跳到另一格，中间没有过渡 */
.pc-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
           font-size:var(--han-md);color:var(--txt)}
.pc-switch input{position:absolute;opacity:0;width:0;height:0}
.pc-switch__track{width:40px;height:20px;flex:none;position:relative;background:var(--night);
                  border:var(--bd) solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.pc-switch input:focus-visible+.pc-switch__track{outline:3px solid var(--focus);outline-offset:2px}
.pc-switch__track::after{content:"";position:absolute;left:0;top:0;width:16px;height:16px;
  background:var(--road);border:var(--bd) solid;
  border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-switch input:checked+.pc-switch__track{background:var(--ember)}
.pc-switch input:checked+.pc-switch__track::after{left:20px;background:var(--shiba);
  border-color:var(--shiba-hi) var(--shiba-lo) var(--shiba-lo) var(--shiba-hi)}
.pc-switch input:disabled~*{opacity:.45}

/* 组件库兼容层：产品原型按需复用 pcx 控件，不整包引入目录页样式。 */
.pcx-radio,.pcx-switch{min-height:44px;display:inline-flex;align-items:center;gap:9px;
  position:relative;cursor:pointer;font-size:var(--han-md);color:var(--txt)}
.pcx-radio input,.pcx-switch input{position:absolute;opacity:0;width:1px;height:1px}
.pcx-radio__box{width:18px;height:18px;flex:none;position:relative;background:var(--bx-bg);
  border:var(--bd) solid var(--road)}
.pcx-radio input:focus-visible+.pcx-radio__box,.pcx-switch input:focus-visible+.pcx-switch__track{
  outline:3px solid var(--focus);outline-offset:2px}
.pcx-radio input:checked+.pcx-radio__box{border-color:var(--shiba)}
.pcx-radio input:checked+.pcx-radio__box::after{content:"";position:absolute;inset:4px;background:var(--shiba)}
.pcx-switch__track{width:44px;height:24px;padding:2px;flex:none;position:relative;background:var(--night);
  border:var(--bd) solid;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
.pcx-switch__track::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;
  background:var(--road);border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  transition:transform 120ms steps(2,end)}
.pcx-switch input:checked+.pcx-switch__track{background:var(--ember)}
.pcx-switch input:checked+.pcx-switch__track::after{background:var(--shiba);
  border-color:var(--shiba-hi) var(--shiba-lo) var(--shiba-lo) var(--shiba-hi);
  transform:translate3d(20px,0,0)}
.pcx-radio input:disabled~*,.pcx-switch input:disabled~*{opacity:.45}


/* ══ 08 对话 ═══════════════════════════════════════════════════════════════ */

.pc-stream{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4)}

/* 你说的话：比机身更深，沉下去 */
.pc-msg--me{align-self:flex-end;max-width:88%;background:var(--me-bg);color:var(--on-ink);
  padding:9px var(--sp-3);font-size:var(--han-md);
  border:var(--bd) solid;border-color:var(--me-line) var(--lo) var(--lo) var(--me-line)}

/* 肥柴说的话：只比机身亮一档，凸起。深色下别用高亮面 */
.pc-msg--ai{max-width:97%;background:var(--sheet);color:var(--on-sheet);
  padding:11px var(--sp-3);font-size:var(--han-md);
  border:var(--bd) solid;border-color:var(--sheet-hi) var(--sheet-lo) var(--sheet-lo) var(--sheet-hi)}
.pc-msg__who{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);
  padding-bottom:var(--sp-2);border-bottom:var(--bd) solid var(--sheet-line)}
.pc-msg__who .pc-avatar{width:24px;height:24px}
.pc-msg__name{font-family:var(--pc-bit);font-size:var(--bit-md);color:var(--sheet-accent)}
/* 肥柴那块面上的按钮，配色跟着面走，不跟着机身走 */
.pc-msg__acts{margin-top:var(--sp-3);display:flex;gap:var(--sp-2)}
.pc-msg__acts .pc-btn{background:var(--sheet-btn);color:var(--on-sheet);
  border-color:var(--sheet-hi) var(--sheet-btn-lo) var(--sheet-btn-lo) var(--sheet-hi)}
.pc-msg__acts .pc-btn--primary{background:var(--shiba);color:var(--ink);
  border-color:var(--shiba-hi) var(--shiba-lo) var(--shiba-lo) var(--shiba-hi)}

/* 头像 */
.pc-avatar{width:28px;height:28px;flex:none;image-rendering:pixelated}

/* 正在做什么：一行字加一条一格格填的读条。
   只说用户看得懂的事——「正在写角色移动」，不是「正在调用 write_file」 */
.pc-busy{display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--night);
  border:var(--bd) solid var(--lo);font-family:var(--pc-bit);font-size:var(--bit-sm);color:var(--txt)}


/* ══ 09 进度 ═══════════════════════════════════════════════════════════════ */

/* 读条：一格一格填，不用连续的条。填到哪格就是哪格 */
.pc-meter{display:flex;gap:2px}
.pc-meter__cell{width:6px;height:12px;background:var(--road);flex:none}
.pc-meter__cell.is-on{background:var(--shiba)}
.pc-meter__cell.is-now{background:var(--shiba);animation:pc-blip .5s steps(1) infinite}
.pc-meter--lg .pc-meter__cell{width:10px;height:18px}

/* 关卡地图：一步一关，柴犬站在正在做的那一关上。
   为什么不是百分比进度条：百分比是给内行看的数字；
   一格一关、走到哪停在哪，不懂技术的用户一眼就懂。 */
.pc-map{display:flex;align-items:flex-end;padding-top:26px}
.pc-map__stop{flex:1;position:relative;display:flex;flex-direction:column;
              align-items:center;gap:var(--sp-2)}
/* 关卡之间的路：一节一节的虚线，不是连续线 */
.pc-map__stop:not(:last-child)::before{
  content:"";position:absolute;left:50%;right:-50%;top:9px;height:4px;
  background:repeating-linear-gradient(90deg,var(--road) 0 6px,transparent 6px 12px)}
.pc-map__stop.is-done:not(:last-child)::before{
  background:repeating-linear-gradient(90deg,var(--moss) 0 6px,transparent 6px 12px)}
.pc-map__node{position:relative;z-index:2;width:22px;height:22px;
              background:var(--night);border:3px solid var(--road)}
.pc-map__stop.is-done .pc-map__node{background:var(--moss);border-color:var(--moss-lo)}
.pc-map__stop.is-done .pc-map__node::after{
  content:"";position:absolute;left:1px;top:8px;width:3px;height:3px;background:var(--ink);
  box-shadow:3px 3px 0 var(--ink),6px 0 0 var(--ink),9px -3px 0 var(--ink),12px -6px 0 var(--ink)}
.pc-map__stop.is-now .pc-map__node{background:var(--shiba);border-color:var(--shiba-hi);
  animation:pc-pulse .9s steps(2) infinite}
@keyframes pc-pulse{0%{box-shadow:0 0 0 0 var(--shiba)}50%{box-shadow:0 0 0 4px rgba(255,138,43,.35)}}
.pc-map__stop.is-ship .pc-map__node{border-color:var(--gold-txt)}
.pc-map__stop.is-ship .pc-map__node::after{
  content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;background:var(--gold)}
.pc-map__name{font-size:var(--han-xs);color:var(--dim);text-align:center;
              line-height:1.35;max-width:11ch}
.pc-map__stop.is-done .pc-map__name{color:var(--txt)}
.pc-map__stop.is-now .pc-map__name{color:var(--shiba-txt);font-weight:700}
.pc-map__stop.is-ship .pc-map__name{color:var(--gold-txt)}
/* 柴犬站在当前那一关上 */
.pc-map__walker{position:absolute;top:-30px;left:50%;margin-left:-14px;width:28px;height:28px;
                animation:pc-hop .8s steps(2) infinite;image-rendering:pixelated}
@keyframes pc-hop{0%{transform:translateY(0)}50%{transform:translateY(-4px)}}


/* ══ 10 导航 ═══════════════════════════════════════════════════════════════ */

/* 顶栏：机身上沿 */
.pc-topbar{position:relative;z-index:var(--z-sticky);
  flex:none;height:56px;display:flex;align-items:center;gap:18px;
  padding:0 var(--sp-4);background:var(--case);border-bottom:var(--bd) solid var(--lo);
  box-shadow:0 2px 0 var(--case2);overflow:hidden}
.pc-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt)}
.pc-brand:hover{text-decoration:none}
.pc-brand__mark{width:28px;height:28px;flex:none}
.pc-brand__name{font-family:var(--pc-bit);font-size:var(--bit-xl);letter-spacing:.04em}
.pc-brand__sub{font-size:var(--han-xs);color:var(--dim);margin-left:2px}
.pc-topbar__right{display:flex;gap:var(--sp-2);margin-left:auto}

/* 项目牌：当前打开的是哪个游戏 */
.pc-projtag{display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;
  background:var(--night);border:var(--bd) solid var(--lo)}
.pc-projtag__name{font-size:var(--han-sm);font-weight:600;white-space:nowrap}
.pc-projtag__no{font-family:var(--pc-bit);font-size:var(--bit-sm);color:var(--dim)}

/* 标签页 */
.pc-tabs{display:flex;gap:2px;border-bottom:var(--bd) solid var(--lo)}
.pc-tab{font-family:var(--pc-han);font-size:var(--han-sm);font-weight:600;
  padding:9px var(--sp-4);cursor:pointer;color:var(--dim);background:transparent;
  border:var(--bd) solid transparent;border-bottom:0;margin-bottom:calc(var(--bd) * -1)}
.pc-tab:hover{color:var(--txt)}
.pc-tab[aria-selected="true"]{color:var(--txt);background:var(--case);
  border-color:var(--hi) var(--lo) transparent var(--hi)}

/* 菜单：点开的那一列 */
.pc-menu{min-width:180px;padding:var(--sp-1);background:var(--case2);
  border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-menu__item{display:flex;align-items:center;gap:9px;width:100%;
  padding:8px 10px;font-size:var(--han-sm);color:var(--txt);cursor:pointer;
  background:transparent;border:0;text-align:left;font-family:var(--pc-han)}
.pc-menu__item:hover{background:var(--shiba);color:var(--ink)}
.pc-menu__item .pc-ic{width:12px;height:12px;flex:none;fill:currentColor}
.pc-menu__item--danger{color:var(--rust)}
.pc-menu__item--danger:hover{background:var(--rust);color:var(--ink)}
.pc-menu__sep{height:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);
  margin:var(--sp-1) 0}


/* ══ 11 反馈 ═══════════════════════════════════════════════════════════════ */

/* 弹窗。只在必须打断时用——需要用户当场决定、而且这个决定不能撤销 */
.pc-scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-dialog);
  display:flex;align-items:center;justify-content:center;padding:var(--sp-5)}
.pc-dialog{width:100%;max-width:440px;background:var(--case);
  border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-dialog__head{padding:var(--sp-3) var(--sp-4);border-bottom:var(--bd) solid var(--lo);
  display:flex;align-items:center;gap:var(--sp-3)}
.pc-dialog__title{font-size:var(--han-lg);font-weight:700}
.pc-dialog__body{padding:var(--sp-4);font-size:var(--han-md);color:var(--txt)}
.pc-dialog__foot{padding:var(--sp-3) var(--sp-4);border-top:var(--bd) solid var(--lo);
  display:flex;gap:var(--sp-2);justify-content:flex-end}

/* 组件库对话框：深暖标题、奶油正文、独立操作区。 */
.pcx-dialog{--pcx-dialog-body:#241C13;--pcx-dialog-foot:#2E251A;--pcx-dialog-text:#F0E4D2;
  --pcx-dialog-line:#5A4632;width:min(100%,440px);max-height:min(88dvh,720px);overflow:auto;
  background:var(--pcx-dialog-body);color:var(--pcx-dialog-text);border:var(--bd) solid;
  border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:8px 8px 0 rgba(26,20,16,.42)}
.pcx-dialog:is([data-theme="light"] *),[data-theme="light"] .pcx-dialog{
  --pcx-dialog-body:#FFF7ED;--pcx-dialog-foot:#F6F1E6;--pcx-dialog-text:#34261E;--pcx-dialog-line:#D8BE98}
.pcx-dialog__head{min-height:56px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  align-items:stretch;background:#2E251A;color:#F0E4D2;border-bottom:4px solid var(--shiba)}
.pcx-dialog__mark{display:grid;place-items:center;background:var(--shiba);color:var(--ink);
  font:7px var(--pc-bit);letter-spacing:.04em}
.pcx-dialog__title{align-self:center;padding:8px 12px;color:#F0E4D2;font-size:var(--han-lg);font-weight:700}
.pcx-dialog__close{align-self:center;margin-right:8px;background:#3A2E1F;color:#F0E4D2;
  border-color:#4A3A26 #0A0705 #0A0705 #4A3A26}
.pcx-dialog__close:hover{background:var(--shiba);color:var(--ink)}
.pcx-dialog__body{padding:18px;background:var(--pcx-dialog-body);color:var(--pcx-dialog-text);font-size:var(--han-md)}
.pcx-dialog__foot{min-height:62px;padding:10px 18px;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:8px;background:var(--pcx-dialog-foot);border-top:var(--bd) solid var(--pcx-dialog-line)}

@media(max-width:520px){
  .pcx-dialog__foot{flex-direction:column-reverse;align-items:stretch}
  .pcx-dialog__foot .pc-btn{width:100%}
}

/* 提示条堆叠的容器。固定在角落，新的压在上面 */
.pc-toasts{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:var(--z-toast);
  display:flex;flex-direction:column-reverse;gap:var(--sp-2);max-width:360px}

/* 提示条：做完了一件事之后的回执。自己消失，不用用户关 */
.pc-toast{display:flex;align-items:center;gap:10px;padding:10px var(--sp-3);
  background:var(--case2);color:var(--txt);font-size:var(--han-sm);
  border:var(--bd) solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
.pc-toast .pc-ic{width:14px;height:14px;flex:none;fill:currentColor}
.pc-toast--ok{border-left:4px solid var(--moss)}
.pc-toast--warn{border-left:4px solid var(--rust)}
.pc-toast--gold{border-left:4px solid var(--gold)}

/* 出错要说清楚：出了什么事、怎么办。不道歉、不含糊 */
.pc-alert{display:flex;gap:10px;padding:var(--sp-3);font-size:var(--han-sm);
  background:var(--rust-bg);color:var(--txt);border:var(--bd) solid var(--rust)}
.pc-alert__title{font-weight:700;color:var(--rust)}

/* 空状态：一句话说清这里为什么空，加一个能立刻开始的按钮。
   不要只放一句「暂无数据」——空屏是邀请用户动手的地方 */
.pc-empty{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-12) var(--sp-5);text-align:center;color:var(--dim)}
.pc-empty__art{width:64px;height:64px;image-rendering:pixelated;opacity:.85}
.pc-empty__title{font-size:var(--han-lg);font-weight:700;color:var(--txt)}
.pc-empty__text{font-size:var(--han-sm);max-width:34ch}

/* 加载：四格方块顺时针跳，一格一格，不转圈 */
.pc-spinner{display:inline-grid;grid-template-columns:repeat(2,8px);gap:2px;width:18px}
.pc-spinner i{width:8px;height:8px;background:var(--shiba);font-style:normal;
  animation:pc-spin 1s steps(1) infinite}
.pc-spinner i:nth-child(1){animation-delay:0s}
.pc-spinner i:nth-child(2){animation-delay:.25s}
.pc-spinner i:nth-child(4){animation-delay:.5s}
.pc-spinner i:nth-child(3){animation-delay:.75s}
@keyframes pc-spin{0%,25%{opacity:1}26%,100%{opacity:.2}}

/* 骨架屏：等内容的时候占个位。一格一格闪，不做扫光 */
.pc-skel{background:var(--road);animation:pc-skel 1.2s steps(2) infinite}
@keyframes pc-skel{0%{opacity:1}50%{opacity:.5}}


/* ══ 12 工具类 ═════════════════════════════════════════════════════════════ */

.pc-row{display:flex;align-items:center;gap:var(--sp-2)}
.pc-col{display:flex;flex-direction:column;gap:var(--sp-2)}
.pc-spread{margin-left:auto}
.pc-dim{color:var(--dim)}
.pc-nowrap{white-space:nowrap}
.pc-pixel{image-rendering:pixelated}
.pc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
       clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 窄屏时让顶栏自然增高并换行，避免动作按钮被机身边缘裁掉。 */
@media(max-width:520px){
  .pc-topbar{height:auto!important;min-height:56px;flex-wrap:wrap;overflow:visible}
  .pc-brand{min-width:0}
  .pc-brand__sub{display:none}
  .pc-projtag{order:3;max-width:100%;min-width:0}
  .pc-topbar__right{width:100%;margin-left:0;flex-wrap:wrap}
}