:root{
  --bg:#070908;
  --ink:#e9f1ed;
  --ink-dim:#8b9c95;
  --green:#22a06d;
  --green-hi:#3ee0a1;
  --green-deep:#0b4a33;
  --lcd:#4dffa6;
  --line:#212825;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(90% 55% at 50% -8%, #16231d 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 112%, #0f1a15 0%, transparent 70%),
    #070908;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:16px;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
input,button{font-family:inherit}

.app{
  max-width:560px;
  margin:0 auto;
  padding:12px 12px 30px;
}

/* ============ 顶部 ============ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 2px 12px;gap:10px;
}
.brand{
  display:flex;align-items:center;gap:9px;
  font-size:17px;font-weight:600;letter-spacing:.02em;
}
.brand-sub{
  font-size:10.5px;letter-spacing:.22em;color:var(--ink-dim);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:nowrap;
}
.led{
  width:9px;height:9px;border-radius:50%;
  background:#1a2420;
  box-shadow:inset 0 0 3px #000, 0 0 0 1px #0b0f0d;
  transition:background .2s;
  flex:0 0 auto;
}
.led.on{
  background:var(--green-hi);
  box-shadow:0 0 8px rgba(62,224,161,.9), inset 0 0 2px #fff;
  animation:ledPulse 2.2s ease-in-out infinite;
}
@keyframes ledPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============ 布局 ============ */
.grid{display:block}

/* ============ 表盘卡片 ============ */
.meter-card{
  position:relative;
  border-radius:24px;
  padding:16px 12px 14px;
  background:linear-gradient(180deg,#1a201e 0%,#0e1211 55%,#090c0b 100%);
  border:1px solid #202724;
  box-shadow:
    0 1px 0 rgba(255,255,255,.075) inset,
    0 -1px 0 rgba(0,0,0,.65) inset,
    0 20px 44px -20px rgba(0,0,0,.95),
    0 2px 0 rgba(0,0,0,.5);
}
.screw{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4c5751, #151a18 62%, #050706);
  box-shadow:0 1px 1px rgba(255,255,255,.07), inset 0 -1px 2px rgba(0,0,0,.9);
  pointer-events:none;
}
.screw::after{
  content:'';position:absolute;inset:0;margin:auto;
  width:5px;height:1px;border-radius:1px;
  background:#080b0a;transform:rotate(38deg);
}
.screw.tl{top:11px;left:11px}
.screw.tr{top:11px;right:11px}
.screw.bl{bottom:11px;left:11px}
.screw.br{bottom:11px;right:11px}

.dial-wrap{max-width:470px;margin:0 auto -8px}
#dial{display:block;width:100%;height:auto}

/* ============ LCD ============ */
.lcd{
  margin:6px auto 0;
  max-width:470px;
  border-radius:13px;
  padding:10px 16px;
  background:linear-gradient(180deg,#06110a,#040b07);
  border:1px solid #15241c;
  box-shadow:
    0 2px 7px rgba(0,0,0,.85) inset,
    0 -1px 0 rgba(77,255,166,.07) inset,
    0 1px 0 rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lcd-main{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:clamp(34px,9.4vw,46px);
  font-weight:600;line-height:1;
  color:var(--lcd);
  letter-spacing:.02em;
  text-shadow:0 0 14px rgba(77,255,166,.4);
  white-space:nowrap;
}
.lcd-main small{
  font-size:.36em;font-weight:500;
  color:#2e7a57;margin-left:3px;
  text-shadow:none;letter-spacing:.06em;
}
.lcd-meta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13.5px;line-height:1.75;color:#3c8462;text-align:right;
  white-space:nowrap;
}
.lcd-meta b{color:#63d9a2;font-weight:600}

.status{
  text-align:center;
  font-size:13px;letter-spacing:.05em;
  color:var(--ink-dim);
  padding:8px 4px 0;
  min-height:18px;
  transition:color .2s;
}
.status.warn{color:#d9a76a}
.status.err{color:#d97a6a}

/* ============ 面板（玻璃拟态） ============ */
.side{margin-top:12px}

/* 兜底：不支持 backdrop-filter 时用实色，保证层次不塌 */
.panel{
  border-radius:18px;
  padding:14px;
  background:linear-gradient(160deg,#1a211e 0%,#0d1210 100%);
  border:1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 12px 26px -16px #000;
}
.panel + .panel{
  margin-top:12px;
  background:linear-gradient(160deg,#161c1a 0%,#0b0f0d 100%);
}

/* 支持玻璃拟态时的升级版 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .panel{
    background:linear-gradient(160deg, rgba(36,56,48,.62) 0%, rgba(13,20,17,.76) 100%);
    -webkit-backdrop-filter:blur(12px) saturate(130%);
    backdrop-filter:blur(12px) saturate(130%);
    border-color:rgba(126,168,151,.16);
    box-shadow:
      0 1px 0 rgba(255,255,255,.10) inset,
      0 -1px 0 rgba(0,0,0,.55) inset,
      0 16px 34px -20px rgba(0,0,0,.95);
  }
  .panel + .panel{
    background:linear-gradient(160deg, rgba(26,38,33,.58) 0%, rgba(9,14,12,.80) 100%);
  }
}

/* 手机端降低模糊半径，低配机更稳 */
@media (max-width:999px){
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    .panel{
      -webkit-backdrop-filter:blur(9px) saturate(125%);
      backdrop-filter:blur(9px) saturate(125%);
    }
  }
}

.panel h2{
  margin:0 0 12px;
  font-size:13.5px;font-weight:600;
  letter-spacing:.16em;color:var(--ink-dim);
  text-transform:uppercase;
}

/* ============ 按钮 ============ */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #262f2b;
  background:linear-gradient(180deg,#212825 0%,#161b19 50%,#0f1312 100%);
  color:var(--ink);
  border-radius:14px;
  padding:15px 14px;
  font-size:15.5px;font-weight:600;letter-spacing:.03em;
  cursor:pointer;user-select:none;
  touch-action:manipulation;
  transition:transform .07s ease, box-shadow .07s ease, background .18s;
  box-shadow:
    0 1px 0 rgba(255,255,255,.09) inset,
    0 -2px 5px rgba(0,0,0,.55) inset,
    0 4px 10px -5px rgba(0,0,0,.9);
}
.btn:active{
  transform:translateY(2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 -1px 2px rgba(0,0,0,.5) inset,
    0 1px 3px -1px rgba(0,0,0,.7);
}
.btn.block{display:flex;width:100%}
.btn.small{padding:11px 14px;font-size:14.5px;border-radius:12px}

.btn.primary{
  background:linear-gradient(180deg,#1f9066 0%,#14714e 46%,#0a4531 100%);
  border-color:rgba(62,224,161,.34);
  color:#eafff5;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
  box-shadow:
    0 1px 0 rgba(255,255,255,.24) inset,
    0 -3px 7px rgba(0,0,0,.38) inset,
    0 8px 20px -8px rgba(34,160,109,.85);
}
.btn.primary.active{
  background:linear-gradient(180deg,#f4f8f6 0%,#d3ded8 55%,#b6c5be 100%);
  border-color:rgba(255,255,255,.35);
  color:#0a2b1e;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -3px 7px rgba(0,0,0,.12) inset,
    0 8px 20px -8px rgba(230,245,238,.4);
}

.btn-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}

/* ============ 校准 ============ */
.cal-panel{margin-top:12px;padding-top:12px;border-top:1px solid rgba(150,180,165,.12)}
.cal-panel label{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:13.5px;color:var(--ink-dim);letter-spacing:.04em;margin-bottom:9px;
}
.cal-panel output{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:16px;color:var(--green-hi);font-weight:600;
}
.hint{
  margin:9px 0 0;font-size:12.5px;line-height:1.6;color:#6d7f78;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:26px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:5px;
  background:linear-gradient(180deg,#0a0d0c,#1b221f);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
  border:1px solid #1e2522;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #3ee0a1, #1b8a5e 55%, #0b4531);
  border:1px solid #0a2a1e;
  box-shadow:0 2px 5px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.25) inset;
}
input[type=range]::-moz-range-track{
  height:8px;border-radius:5px;background:#141a18;
  border:1px solid #1e2522;
}
input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;border:1px solid #0a2a1e;
  background:radial-gradient(circle at 36% 30%, #3ee0a1, #1b8a5e 55%, #0b4531);
  box-shadow:0 2px 5px rgba(0,0,0,.75);
}

/* ============ 记录 ============ */
.rec-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:stretch;
}
.field{
  display:flex;align-items:center;
  border-radius:12px;
  padding:0 12px;
  min-height:42px;
  background:linear-gradient(180deg,#070b09,#0c100e);
  border:1px solid #1c2320;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85);
  overflow:hidden;
}
.field input{
  flex:1;min-width:0;
  -webkit-appearance:none;appearance:none;
  background:transparent;
  border:0;border-radius:0;outline:none;
  color:var(--lcd);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:18px;font-weight:600;
  line-height:1.15;
  padding:0;
  text-shadow:0 0 10px rgba(77,255,166,.3);
}
.field span{font-size:12.5px;color:#4d7b66;margin-left:6px;letter-spacing:.06em}
.field input::-webkit-outer-spin-button,
.field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field input[type=number]{-moz-appearance:textfield}

.rec-list{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.rec-empty{
  font-size:13px;color:#6a7b74;text-align:center;
  padding:12px 6px;line-height:1.7;
}
.rec-item{
  display:grid;
  grid-template-columns:64px 1fr 56px 26px;
  align-items:center;gap:8px;
  padding:9px 10px;
  border-radius:11px;
  background:linear-gradient(180deg,#111614,#0a0e0c);
  border:1px solid #1b2220;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.rec-dist{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px;color:#a3b8af;letter-spacing:.02em;
}
.rec-bar{
  height:6px;border-radius:4px;overflow:hidden;
  background:#0a0e0c;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
.rec-bar i{
  display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,#0e5c40,#22a06d,#3ee0a1);
  transition:width .3s ease;
}
.rec-db{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;font-weight:600;color:var(--green-hi);
  text-align:right;
}
.rec-del{
  width:26px;height:26px;padding:0;
  border-radius:8px;border:1px solid #232b28;
  background:linear-gradient(180deg,#1a201e,#101413);
  color:#8b9c95;font-size:15px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .15s,background .15s;
}
.rec-del:active{background:#20110f;color:#d97a6a}

/* ============ 页脚 ============ */
.footnote{
  text-align:center;
  font-size:12px;
  letter-spacing:0em;
  color:#5f6f69;
  margin:38px 0 0;
  line-height:28px;
}
.footnote.tech-line{
  margin-top:10px;
  font-size:12px;
  color:#5a6862;
}
.tech-line a{
  color:#7D9189;
  text-decoration:none;
  border-bottom:0;
  transition:color .15s;
}
.tech-line a:hover,
.tech-line a:focus{
  color:#7D9189;
  text-decoration:none;
}

/* ============ 电脑端 ============ */
@media(min-width:1000px){
  .app{max-width:1100px;padding:16px 22px 22px}

  .topbar{padding:6px 4px 16px}
  .brand{font-size:19.5px;gap:11px}
  .brand-sub{font-size:12px;letter-spacing:.24em}
  .led{width:10px;height:10px}

  .grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    gap:22px;align-items:start;
  }
  .side{margin-top:0}

  .meter-card{padding:22px 24px 18px;border-radius:30px}
  .screw{width:11px;height:11px}
  .screw.tl{top:14px;left:14px}
  .screw.tr{top:14px;right:14px}
  .screw.bl{bottom:14px;left:14px}
  .screw.br{bottom:14px;right:14px}

  .dial-wrap{max-width:420px;margin:0 auto -10px}

  .lcd{max-width:420px;padding:12px 20px;border-radius:14px}
  .lcd-main{font-size:54px}
  .lcd-meta{font-size:14.5px;line-height:1.75}

  .status{font-size:13.5px;padding:10px 6px 2px;min-height:22px}

  .panel{padding:18px;border-radius:20px}
  .panel + .panel{margin-top:14px}
  .panel h2{font-size:13.5px;margin-bottom:12px;letter-spacing:.16em}

  .btn{font-size:15.5px;padding:20px 16px}
  .btn.small{font-size:14px;padding:12px 18px}
  .btn-row{gap:10px;margin-top:10px}

  .cal-panel{margin-top:14px;padding-top:14px}
  .cal-panel label{font-size:13.5px;margin-bottom:9px}
  .cal-panel output{font-size:16px}
  .hint{font-size:12.5px;line-height:1.65;margin:9px 0 0}
  input[type=range]{height:30px}
  input[type=range]::-webkit-slider-runnable-track{height:9px}
  input[type=range]::-webkit-slider-thumb{width:26px;height:26px;margin-top:-9.5px}

  .field{padding:0 14px;min-height:46px}
  .field input{font-size:17px;padding:0}
  .field span{font-size:12.5px}

  /* 列表内部滚动，保证整页一屏 */
  .rec-list{
    margin-top:12px;gap:8px;
    max-height:216px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-right:4px;
  }
  .rec-list::-webkit-scrollbar{width:6px}
  .rec-list::-webkit-scrollbar-track{background:transparent}
  .rec-list::-webkit-scrollbar-thumb{background:#26302c;border-radius:3px}
  .rec-empty{font-size:12.5px;padding:16px 6px}
  .rec-item{grid-template-columns:76px 1fr 62px 28px;padding:9px 11px;gap:10px}
  .rec-dist{font-size:13.5px}
  .rec-bar{height:7px}
  .rec-db{font-size:14.5px}
  .rec-del{width:28px;height:28px;font-size:16px}

  .footnote{font-size:14px;margin-top:30px}
  .footnote.tech-line{font-size:14px;margin-top:10px}
}

/* ============ 电脑端 · 矮屏紧凑（笔记本小屏一屏显示） ============ */
@media(min-width:1000px) and (max-height:860px){
  .app{padding:12px 20px 16px}

  .topbar{padding:4px 4px 10px}
  .brand{font-size:17.5px}

  .meter-card{padding:16px 20px 12px;border-radius:26px}
  .dial-wrap{max-width:350px;margin-bottom:-8px}
  .lcd{max-width:350px;padding:10px 16px}
  .lcd-main{font-size:44px}
  .lcd-meta{font-size:13px}

  .status{font-size:12.5px;padding:8px 4px 0;min-height:18px}

  .panel{padding:14px}
  .panel + .panel{margin-top:12px}
  .panel h2{margin-bottom:10px}

  .btn{padding:11px 14px;font-size:15px}
  .btn.small{padding:10px 16px;font-size:13.5px}

  .rec-list{max-height:150px;margin-top:10px}
  .rec-item{padding:8px 10px}

  .footnote{margin-top:12px}
}

@media (prefers-reduced-motion: reduce){
  .led.on{animation:none}
  *{transition-duration:.01ms !important}
}