/* 三個方向共用的介面層：Apple 玻璃擬態，乾淨、極簡。品牌深藍 #022a41 出自 FACTS-adholic */
:root{
  --navy:#022a41; --navy2:#0b3a56; --ink:#1d1d1f; --muted:#6e6e73; --faint:#a1a1a6;
  --hair:rgba(0,0,0,.08); --hair2:rgba(0,0,0,.14);
  --glass:rgba(255,255,255,.62); --glass-hi:rgba(255,255,255,.82); --glass-edge:rgba(255,255,255,.75);
  --field:rgba(255,255,255,.7); --sel:rgba(2,42,65,.07); --focus:rgba(10,132,255,.35);
  --r-card:14px; --r-in:10px; --r-btn:8px; --r-tag:6px;
  --blur:saturate(180%) blur(28px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--ff);font-weight:400;color:var(--ink);font-size:13px;line-height:1.5;
  font-variant-numeric:tabular-nums;font-feature-settings:"zero" 0;-webkit-font-smoothing:antialiased;overflow:hidden;
  background:#eef1f5}
/* 背景：極淡的冷色光暈，讓玻璃有東西可以透 */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 45% at 12% 18%,rgba(120,170,215,.38),transparent 70%),
    radial-gradient(38% 40% at 88% 12%,rgba(190,205,230,.55),transparent 70%),
    radial-gradient(45% 50% at 70% 92%,rgba(150,190,220,.32),transparent 70%),
    #eef1f5}
.ic{flex:none;display:block}
.glass{background:rgba(250,251,253,.92);border:1px solid var(--glass-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 8px 32px rgba(15,35,60,.06)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}}
.btn{height:36px;padding:0 16px;border-radius:var(--r-btn);border:1px solid var(--hair2);background:var(--field);
  font:inherit;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  transition:background .2s,border-color .2s,transform .15s}
.btn:hover{background:#fff;border-color:rgba(0,0,0,.2)}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.pri:hover{background:var(--navy2)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--sel);color:var(--ink)}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus)!important}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(0,0,0,.05);gap:2px}
.seg button{height:28px;padding:0 14px;border-radius:999px;border:0;background:none;font:inherit;color:var(--muted);cursor:pointer;transition:.2s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:12px;color:var(--muted)}
.fld input{height:36px;border:1px solid var(--hair);border-radius:var(--r-btn);padding:0 12px;font:inherit;color:var(--ink);
  background:var(--field);transition:border-color .2s,background .2s}
.fld input:hover{border-color:var(--hair2)}
.fld input:focus{background:#fff;border-color:rgba(10,132,255,.6)}
.fld input[disabled]{background:rgba(0,0,0,.03);color:var(--muted)}
.fld input.num{text-align:right}
.chk{display:flex;align-items:center;gap:10px;height:36px;padding:0 8px;border-radius:var(--r-btn);cursor:pointer;transition:background .2s}
.chk:hover{background:var(--sel)}
.chk i{width:18px;height:18px;border-radius:999px;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}
.chk.off i{background:none;border:1.5px solid var(--hair2)}
.chk.off{color:var(--faint)}
.chk em{margin-left:auto;font-style:normal;font-size:12px;color:var(--faint);max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paper{box-shadow:0 1px 2px rgba(15,35,60,.06),0 12px 40px rgba(15,35,60,.10)}
.reveal{opacity:0;transform:translateY(6px);animation:rv .55s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rv{to{opacity:1;transform:none}}
.flash{animation:fl .7s}
@keyframes fl{0%{background:rgba(10,132,255,.16)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}.flash{animation:none}}