/* MERIDIAN OS · 子午 — 共享设计层
   锁屏 / 核验页 index.html 使用本文件：字体、配色令牌、切角面板、弹窗骨架、关机层。
   改配色、字体、面板切角、弹窗骨架都在这里，页面内 <style> 只放各自专属结构。 */

/* ============ 字体（本地自托管，离线可用） ============ */
@font-face{font-family:Rajdhani;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Rajdhani-Medium.woff2) format('woff2')}
@font-face{font-family:Rajdhani;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Rajdhani-SemiBold.woff2) format('woff2')}
@font-face{font-family:Rajdhani;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Rajdhani-Bold.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/space-grotesk-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-latin-700-normal.woff2) format('woff2')}

/* ============ 设计令牌 ============
   配色全部采样自 img/background.jpeg：
   --cyan  取地球边缘辉光 #5d85b5 提亮   --violet 取左侧星云 #3e3b5f 提亮
   刻意不用绿色：既是科幻 HUD 的俗套色，也避开国内金融语境的歧义。 */
:root{
  --void:#05080f;
  --panel-a:rgba(11,18,33,.80);
  --panel-b:rgba(6,11,21,.92);
  --ink:#eaf2fc;
  --dim:#95a9c6;
  --faint:#5c7093;
  --cyan:#7dd6ff;
  --cyan-2:#3f9fd6;
  --violet:#b79bff;
  --amber:#ffbe7a;
  --edge:rgba(150,195,240,.15);
  --edge-2:rgba(150,195,240,.30);
  --edge-3:rgba(125,214,255,.55);
  --f-display:'Rajdhani','PingFang SC','Microsoft YaHei',sans-serif;
  --f-ui:'Space Grotesk','PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;
  --f-mono:'JetBrains Mono','PingFang SC','Microsoft YaHei',monospace;
  --cut:20px;          /* 面板切角 */
  --ls:.18em;          /* 全局字距，.trk 用它做中轴补偿 */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============ 基础 ============ */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:clip}   /* clip 而非 hidden：不建滚动容器，否则子树 position:sticky 失效 */
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--f-ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  position:relative;user-select:none;-webkit-user-select:none;
}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer}
input{font:inherit;color:inherit}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* 居中 + 字距的文本：shrink-to-fit 左对齐块 + text-indent=letter-spacing，墨迹中心才归零。
   注意：text-align:center 的块不能这么补，会反向右偏 ls/2。 */
.trk{display:block;width:fit-content;margin-inline:auto;text-align:left;
     letter-spacing:var(--ls);text-indent:var(--ls)}

/* 仅键盘导航时显示焦点环 */
:focus{outline:none}
body.kb :focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* 细滚动条 */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.02)}
::-webkit-scrollbar-thumb{background:var(--edge-2)}
::-webkit-scrollbar-thumb:hover{background:rgba(125,214,255,.4)}

/* ============ 切角面板（登录卡 / 弹窗 / 会话卡共用） ============ */
.frame{position:relative;padding:1px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(150deg,rgba(125,214,255,.46),rgba(150,195,240,.10) 42%,rgba(183,155,255,.34) 88%)}
.frame::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent)}
.panel{position:relative;padding:clamp(24px,3vw,32px);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:linear-gradient(168deg,var(--panel-a),var(--panel-b));
  backdrop-filter:blur(16px) saturate(118%)}
.ticks{position:absolute;top:0;left:var(--cut);right:0;height:6px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--edge-2) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 70%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 25%,#000 70%,transparent)}

/* ============ 自绘弹窗 ============ */
.mroot{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px}
.mroot[hidden]{display:none}
.mbd{position:absolute;inset:0;background:rgba(3,6,12,.72);backdrop-filter:blur(9px);
  animation:fadein .3s var(--ease)}
.mbox{position:relative;width:min(430px,100%);animation:pop .38s var(--ease)}
.mbox .panel{padding:0}
.mhead{display:flex;align-items:center;justify-content:center;gap:12px;padding:20px 24px 16px;
  border-bottom:1px solid var(--edge);position:relative}
.mhead h4{margin:0;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--ink)}
.mhead .x{position:absolute;top:14px;right:16px;width:24px;height:24px;display:grid;place-items:center;
  color:var(--faint);font-size:16px;transition:.2s}
.mhead .x:hover{color:var(--cyan)}
.mbody{padding:18px 24px 6px;max-height:min(46vh,380px);overflow:auto}
.mbody p{margin:0 0 14px;font-size:12.5px;line-height:1.75;color:var(--dim)}
.mbody time{display:block;font-family:var(--f-mono);font-size:10px;color:var(--faint);margin-bottom:10px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--edge);font-size:12.5px}
.list li:last-child{border-bottom:0}
.list li .st{margin-left:auto;font-family:var(--f-mono);font-size:10px;color:var(--faint);letter-spacing:.06em}
.list li.act .st{color:var(--cyan)}
.list li .nm{color:var(--dim)}
.list li.act .nm{color:var(--ink)}
.mfoot{display:flex;gap:1px;background:var(--edge);border-top:1px solid var(--edge);margin-top:14px}
.mfoot button{flex:1;padding:14px;background:rgba(7,12,22,.7);font-family:var(--f-display);font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);transition:.25s}
.mfoot button:hover{background:rgba(125,214,255,.12);color:var(--cyan)}
.mfoot button.danger:hover{background:rgba(255,190,122,.12);color:var(--amber)}
.mfoot button.prime{color:var(--cyan)}
.sw{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:12px 0;border-bottom:1px solid var(--edge);font-size:12.5px;color:var(--dim)}
.sw:last-child{border-bottom:0}
.sw .tg{width:34px;height:16px;border:1px solid var(--edge-2);position:relative;flex:none;transition:.25s}
.sw .tg::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--faint);transition:.25s}
.sw[aria-checked=true] .tg{border-color:var(--cyan)}
.sw[aria-checked=true] .tg::after{left:20px;background:var(--cyan);box-shadow:0 0 10px rgba(125,214,255,.8)}

/* ============ 关机 / 待机 ============ */
.off{position:fixed;inset:0;z-index:80;background:#02040a;display:grid;place-items:center;
     pointer-events:none;opacity:0;visibility:hidden;
     transition:opacity .8s var(--ease),visibility 0s .8s}
body.st-off .off{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s,0s}
.off .in{display:grid;justify-items:center;gap:26px;text-align:center}
.led{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 18px 3px rgba(255,190,122,.5);animation:breathe 3.4s var(--ease) infinite}
.off p{margin:0;font-size:10.5px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--faint)}
.wake{border:1px solid var(--edge-2);padding:11px 26px;font-family:var(--f-display);font-weight:600;
  font-size:12px;letter-spacing:.20em;text-indent:.20em;color:var(--dim);transition:.3s}
.wake:hover{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 26px -8px rgba(125,214,255,.7)}

/* ============ 共用动效 ============ */
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(4px)}50%{transform:translateX(-5px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(125,214,255,.5)}70%{box-shadow:0 0 0 9px rgba(125,214,255,0)}
                  100%{box-shadow:0 0 0 0 rgba(125,214,255,0)}}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);
     box-shadow:0 0 0 0 rgba(125,214,255,.55);animation:pulse 2.6s infinite;flex:none}

/* ============ 减弱动效 ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body.no-motion *,body.no-motion *::before,body.no-motion *::after{animation-duration:.001ms!important;
  animation-iteration-count:1!important;transition-duration:.01ms!important}