/* ==========================================================================
   取自 Apple HIG 的系统色板与排版。
   刻意不做"每块都描一圈边 + 统一大圆角"那套 —— Apple 的分组列表是
   一整块背景 + 发丝分隔线，边框只出现在最外层，视觉噪音少得多。
   ========================================================================== */

:root{
  color-scheme: light;
  /* iOS 系统色 */
  --bg:#F2F2F7;              /* systemGroupedBackground */
  --card:#FFFFFF;            /* secondarySystemGroupedBackground */
  --ink:#000000;             /* label */
  --dim:rgba(60,60,67,.6);   /* secondaryLabel */
  --faint:rgba(60,60,67,.3); /* tertiaryLabel */
  --line:rgba(60,60,67,.22); /* separator */
  --fill:rgba(118,118,128,.12);
  --accent:#007AFF;          /* systemBlue */
  --accent-ink:#fff;
  --green:#34C759; --green-bg:rgba(52,199,89,.14);
  --orange:#FF9500; --orange-bg:rgba(255,149,0,.14);
  --red:#FF3B30;
  --gray:#8E8E93;
  --r:10px;                  /* 分组列表圆角 */
  --r-btn:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#000000;
    --card:#1C1C1E;
    --ink:#FFFFFF;
    --dim:rgba(235,235,245,.6);
    --faint:rgba(235,235,245,.3);
    --line:rgba(84,84,88,.55);
    --fill:rgba(118,118,128,.24);
    --accent:#0A84FF;
    --green:#30D158; --green-bg:rgba(48,209,88,.18);
    --orange:#FF9F0A; --orange-bg:rgba(255,159,10,.18);
    --red:#FF453A;
  }
}

*{box-sizing:border-box}
/* 必须有：.view.center 的 display:flex 优先级（0,2,0）盖得过浏览器默认的
   [hidden]{display:none}，不加这条登录页和已登录页会同时渲染叠在一起 */
[hidden]{display:none!important}

body{
  margin:0;padding:0 16px;background:var(--bg);color:var(--ink);
  /* SF 在前，PingFang SC 是 Apple 自家的中文字体，和 SF 是配套设计的，
     字重、字面、笔画粗细都对得上，混排不会一边胖一边瘦 */
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",
    "PingFang SC","Hiragino Sans GB","Helvetica Neue",system-ui,sans-serif;
  font-size:17px;line-height:1.47;          /* iOS body */
  letter-spacing:-.01em;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.view.center{display:flex;align-items:center;justify-content:center;min-height:100svh}
button{font:inherit;letter-spacing:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font:inherit;letter-spacing:inherit}
/* 数字用等宽字形，验证码和倒计时不会跳来跳去 */
code,.tnum{font-variant-numeric:tabular-nums}

/* ---------- 通用排版 ---------- */
.t-large{font-size:28px;line-height:1.2;font-weight:700;letter-spacing:-.022em}
.t-title{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.t-body{font-size:17px}
.t-sub{font-size:15px;color:var(--dim)}
.t-cap{font-size:13px;color:var(--dim);letter-spacing:0}

/* ==========================================================================
   登录 / 申请
   ========================================================================== */
.gate{width:100%;max-width:360px;padding-block:32px;text-align:center}
.lock{width:56px;height:56px;margin:0 auto 20px;border-radius:16px;display:grid;place-items:center;
  background:var(--accent);color:#fff}
.gate h1{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.022em}
.gate .sub{margin:0 0 24px;font-size:15px;line-height:1.4;color:var(--dim);letter-spacing:0}

/* iOS 分段控件 */
.tabs{display:flex;gap:2px;margin-bottom:18px;padding:2px;border-radius:9px;background:var(--fill)}
/* 后台的分段控件宽度要跟内容对齐（.pane 也是 640）——
   少了这条它会撑满整个窗口，桌面端看着就是一条横贯屏幕的灰带 */
.tabs.wide{max-width:640px;margin:16px auto 20px}
.tab{flex:1;padding:7px 8px;border-radius:7px;font-size:14px;font-weight:500;color:var(--ink);
  transition:background .18s}
.tab.on{background:var(--card);font-weight:600;
  box-shadow:0 3px 8px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04)}

/* 分组输入：一整块白底，行与行之间只有发丝线 */
.field-group{background:var(--card);border-radius:var(--r);overflow:hidden;margin-bottom:16px;text-align:left}
.field-group input{width:100%;padding:13px 16px;border:0;background:transparent;color:var(--ink);
  font-size:17px;outline:none;display:block}
.field-group input+input{box-shadow:0 -.5px 0 var(--line)}
.field-group input::placeholder{color:var(--faint)}

.btn{display:block;width:100%;padding:14px;border-radius:var(--r-btn);
  font-size:17px;font-weight:600;letter-spacing:-.01em;text-align:center;
  transition:opacity .15s}
.btn:active{opacity:.7}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:disabled{opacity:.45;cursor:default}
.btn-plain{color:var(--accent)}
.btn-gray{background:var(--fill);color:var(--ink)}

.msg{min-height:20px;margin:14px 0 0;font-size:14px;color:var(--dim);letter-spacing:0}
.msg.err{color:var(--red)}

.claim{margin-top:4px;padding:20px 16px;background:var(--card);border-radius:var(--r);text-align:center}
.claim-hint{margin:0 0 12px;font-size:14px;color:var(--dim);letter-spacing:0}
.claim-code{display:flex;align-items:center;gap:10px}
.claim-code code{flex:1;padding:14px 8px;border-radius:8px;background:var(--fill);
  font:700 30px/1.2 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  letter-spacing:.14em;user-select:all}
.claim-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--dim);text-align:left;letter-spacing:0}

/* ==========================================================================
   已登录
   ========================================================================== */
.bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  max-width:640px;margin-inline:auto;
  padding:calc(16px + env(safe-area-inset-top,0px)) 0 12px;
  position:sticky;top:0;z-index:5;background:var(--bg);
  box-shadow:0 .5px 0 var(--line)}
.who{min-width:0}
.who strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.022em}
.who .quota{font-size:13px;color:var(--dim);letter-spacing:0}
.bar-right{display:flex;gap:16px;flex:none;padding-top:5px}
.bar-right button{font-size:16px;color:var(--accent)}

.pane{max-width:640px;margin:0 auto;padding:18px 0 calc(32px + env(safe-area-inset-bottom,0px))}
.pane-tip{margin:0 0 20px;font-size:13px;line-height:1.5;color:var(--dim);letter-spacing:0;padding-inline:4px}
.sec-h{margin:26px 4px 7px;font-size:13px;color:var(--dim);letter-spacing:0}
.sec-h:first-child{margin-top:0}
.foot-note{margin:26px 4px 0;font-size:13px;color:var(--dim);text-align:center;letter-spacing:0}
.dim{color:var(--dim);font-size:15px;padding:40px 0;text-align:center}

/* ---------- 分组列表 ---------- */
.list{background:var(--card);border-radius:var(--r);overflow:hidden}
.list+.list{margin-top:18px}

/* iOS 设置那种：彩色圆角图标 + 标题副标题 + 右侧尖角 */
.row-nav{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;text-align:left}
.row-nav+.row-nav{box-shadow:0 -.5px 0 var(--line)}
.row-nav:active{background:var(--fill)}
.row-ico{flex:none;width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:#fff}
.row-body{flex:1;min-width:0}
.row-t{display:block;font-size:17px;letter-spacing:-.01em}
.row-d{display:block;margin-top:1px;font-size:13px;color:var(--dim);letter-spacing:0}
.row-x{flex:none;font-size:16px;color:var(--dim)}
.chev{flex:none;color:var(--faint)}
.row-nav.off{opacity:.42}

/* ---------- 内容块 ---------- */
.card{background:var(--card);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.card.dimmed{opacity:.55}
.head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.head h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.type{margin:1px 0 0;font-size:13px;color:var(--dim);letter-spacing:0;overflow-wrap:anywhere}
.badge{flex:none;padding:3px 9px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:0}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.warn{background:var(--orange-bg);color:var(--orange)}
.badge.off{background:var(--fill);color:var(--dim)}
.notes{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--dim);letter-spacing:0}
.reg{margin:8px 0 0;font-size:13px;color:var(--dim);letter-spacing:0}

.row{display:flex;align-items:center;gap:10px;margin-top:10px}
.row .k{flex:none;min-width:34px;font-size:13px;color:var(--dim);letter-spacing:0}
.row code{flex:1;min-width:0;padding:9px 11px;border-radius:8px;background:var(--fill);
  font:15px/1.45 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  overflow-wrap:anywhere;user-select:all}
.cp{flex:none;padding:7px 13px;border-radius:100px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:600;letter-spacing:0}
.cp:active{opacity:.7}

.act{width:100%;margin-top:12px;padding:12px;border-radius:var(--r-btn);
  font-size:16px;font-weight:500;letter-spacing:-.01em}
.act-fill{background:var(--fill);color:var(--ink)}
.act-tint{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.act:disabled{color:var(--dim);cursor:default}
.creds{margin-top:14px;padding-top:12px;box-shadow:0 -.5px 0 var(--line)}
.countdown{margin:9px 0 0;font-size:12px;color:var(--dim);text-align:right;letter-spacing:0}

/* ---------- 邮件结果 ---------- */
.mailout{margin-top:14px}
.mailitem{padding-top:12px;margin-top:12px;box-shadow:0 -.5px 0 var(--line)}
.mailitem:first-child{margin-top:0;padding-top:0;box-shadow:none}
.subj{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--dim);letter-spacing:0;overflow-wrap:anywhere}
.subj b{color:var(--ink);font-weight:600}
.bigcode{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bigcode code{flex:1;padding:12px;border-radius:9px;background:var(--fill);text-align:center;
  font:600 30px/1.2 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;letter-spacing:.1em;user-select:all}
.safelink{display:block;margin-top:10px;padding:13px;border-radius:var(--r-btn);text-align:center;
  background:var(--green-bg);color:var(--green);font-size:16px;font-weight:600;text-decoration:none;letter-spacing:-.01em}
.warn{margin:12px 0 0;padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.5;letter-spacing:0;
  background:var(--orange-bg);color:var(--orange)}
.mailmsg{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--dim);letter-spacing:0}
.mailmsg.err{color:var(--red)}

/* ---------- 表单 ---------- */
.fl{display:block;margin-bottom:12px;font-size:13px;color:var(--dim);letter-spacing:0}
.mi{width:100%;margin-top:5px;padding:11px 13px;border:0;border-radius:9px;background:var(--fill);
  color:var(--ink);font-size:17px;letter-spacing:-.01em;outline:none}
.mi:focus{box-shadow:inset 0 0 0 2px var(--accent)}
select.mi{appearance:none;background-image:none}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- Netflix 等待 ---------- */
.wait-title{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.wait-sub{margin:0;font-size:14px;color:var(--dim);letter-spacing:0}
.spinner{width:20px;height:20px;margin:16px auto 4px;border-radius:50%;
  border:2px solid var(--fill);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation-duration:2.4s}}

/* ---------- 后台日志 ---------- */
.log{background:var(--card);border-radius:var(--r);overflow:hidden}
.logrow{display:grid;grid-template-columns:auto auto 1fr;gap:3px 10px;padding:10px 14px;font-size:13px;letter-spacing:0}
.logrow+.logrow{box-shadow:0 -.5px 0 var(--line)}
.lt{color:var(--dim);font-variant-numeric:tabular-nums}
.le{font-weight:600}
.ln{color:var(--dim)}
.ld{grid-column:1/4;color:var(--dim);overflow-wrap:anywhere}

/* ---------- toast / PIN 面板 ---------- */
.toast{position:fixed;left:16px;right:16px;bottom:calc(24px + env(safe-area-inset-bottom,0px));
  max-width:380px;margin-inline:auto;padding:13px 18px;border-radius:14px;z-index:50;
  background:rgba(28,28,30,.94);color:#fff;font-size:15px;line-height:1.4;text-align:center;
  backdrop-filter:saturate(180%) blur(20px);box-shadow:0 10px 32px rgba(0,0,0,.24)}

.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.4);backdrop-filter:blur(3px)}
.modal-card{width:100%;max-width:340px;padding:22px 20px;border-radius:18px;
  background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}
.pb-title{margin:0 0 5px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pb-sub{margin:0 0 16px;font-size:13px;line-height:1.45;color:var(--orange);letter-spacing:0}
.pb-code{margin-bottom:16px;padding:16px 10px;border-radius:11px;background:var(--fill)}
.pb-code code{font:700 24px/1.3 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  letter-spacing:.04em;overflow-wrap:anywhere;user-select:all}
.modal-card .btn+.two{margin-top:10px}
.modal-card .two .btn{padding:11px}
.modal-card .mailmsg{text-align:center;min-height:18px}

/* ---------- 后台表单 ---------- */
.sec-title{margin:24px 4px 8px;font-size:13px;color:var(--dim);letter-spacing:0}
.sec-title:first-child{margin-top:0}
.acct-row{display:flex;align-items:center;gap:10px;padding:11px 14px}
.acct-row+.acct-row{box-shadow:0 -.5px 0 var(--line)}
.acct-main{flex:1;min-width:0}
.acct-t{font-size:16px;letter-spacing:-.01em}
.acct-s{margin-top:1px;font-size:13px;color:var(--dim);letter-spacing:0;overflow-wrap:anywhere}
.acct-act{flex:none;font-size:15px;color:var(--accent)}
.editor{margin-top:12px;padding-top:12px;box-shadow:0 -.5px 0 var(--line)}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sw{width:30px;height:30px;border-radius:8px;padding:0}
.sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}
.icons{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--fill);color:var(--ink)}
.ic.on{background:var(--accent);color:#fff}
.hintbox{margin:10px 0 0;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.5;letter-spacing:0;
  background:var(--orange-bg);color:var(--orange)}