/* ── The account pages in theme 4, Postal ─────────────────────────────
   The landing (subnsub.com) and the tools' theme 4 are drawn in Postal;
   sign-in, reset and verified were the relay's warm paper, Public Sans and
   cyan (user 2026-11-03: 这个登录页面跟主landingpage和现在的4号主题已经有点跟不上
   视觉风格了, then picked key B off the demo at myserver:8800). This sheet
   draws those pages, their markup and script untouched, in Postal's terms,
   from landing.html's and the tools' html[data-ledger] values: a black
   stage (#f1f1f1 by day), the form on one panel (#202020, a 1px #383838
   rim, 28px), fields sunk into beds (#171717, 14px), every press a capsule
   (#383838), a choice made in grey, the one blue for what a link does,
   names of things in spaced Geist capitals, figures in Geist Mono. The
   ice keys stay as ice-key.css draws them. A page opts in with
   <html data-look="postal"> (theme.js then writes POSTAL_THEMES) and links
   this sheet after its own <style>; every rule is scoped to that
   attribute, so it outranks the page's equal selectors. */

@font-face{font-family:'Geist Postal';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono Postal';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-mono-var-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* The greys and the blue. theme.js writes the same values inline (its
   POSTAL_THEMES); these are what the first paint reads. The theme's own
   layers follow from them. */
html[data-look="postal"]{
  --sans:'Geist Postal',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,'PingFang SC','Hiragino Sans','Noto Sans CJK SC','Microsoft YaHei',sans-serif;
  --ui:var(--sans);
  --mono:'Geist Mono Postal',ui-monospace,SFMono-Regular,Menlo,Consolas,'PingFang SC','Hiragino Sans',monospace;
  --r-sheet:28px;--r-card:21.7px;--r-seg:18px;--r-tog:15px;--r-bed:14px;--r-key:9px;--cap:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --bg:oklch(0 0 0);--bg-sub:oklch(0.205 0 0);--surface:oklch(0.244 0 0);--hover:oklch(0.285 0 0);
  --line:oklch(0.341 0 0);--line-2:oklch(0.309 0 0);--line-hover:oklch(0.4 0 0);
  --fg:oklch(0.97 0 0);--fg-mid:oklch(0.757 0 0);--fg-dim:oklch(0.66 0 0);
  --accent:oklch(0.575 0.206 261.5);--accent-bg:oklch(0.33 0.088 259.8);--accent-dim:oklch(0.45 0.13 260);
  --on-accent:oklch(1 0 0);
  --warn:oklch(0.835 0.145 81);--warn-bg:oklch(0.36 0.057 82.4);
  --danger:oklch(0.734 0.163 25.8);--danger-bg:oklch(0.295 0.074 26.2);--danger-line:oklch(0.48 0.12 26);
  --page-glow:transparent;
  --panel:var(--surface);--bed:var(--bg-sub);--card:var(--hover);
  --press:oklch(0.341 0 0);--press-hi:color-mix(in oklab,var(--press),var(--fg) 9%);
  --thumb:oklch(0.341 0 0);--thumb-sh:0 0 0 0 transparent;--pick:oklch(0.341 0 0);
  --rim:oklch(0.37 0 0);--chip:var(--card);--float:var(--card);
  --card-hi:color-mix(in oklab,var(--card),var(--fg) 5%);
  --bed-hi:color-mix(in oklab,var(--bed),var(--fg) 4%);
  --accent-text:oklch(0.779 0.097 252.8);
  --lift:0 24px 64px oklch(0 0 0 / .66),0 3px 10px oklch(0 0 0 / .45);
  /* the tab switch's wipe, in the blue */
  --sweep:oklch(0.72 0.16 258 / .85);
  color-scheme:dark;
}
html[data-look="postal"][data-mode="light"]{
  --bg:oklch(0.957 0 0);--bg-sub:oklch(0.94 0 0);--surface:oklch(1 0 0);--hover:oklch(0.968 0 0);
  --line:oklch(0.905 0 0);--line-2:oklch(0.93 0 0);--line-hover:oklch(0.86 0 0);
  --fg:oklch(0.2 0 0);--fg-mid:oklch(0.43 0 0);--fg-dim:oklch(0.51 0 0);
  --accent-bg:oklch(0.935 0.032 258);--accent-dim:oklch(0.8 0.085 258);
  --warn:oklch(0.53 0.115 68);--warn-bg:oklch(0.955 0.048 88);
  --danger:oklch(0.54 0.2 27);--danger-bg:oklch(0.945 0.03 20);--danger-line:oklch(0.76 0.12 22);
  --press:oklch(0.905 0 0);--press-hi:color-mix(in oklab,var(--press),var(--fg) 7%);
  --thumb:oklch(1 0 0);--thumb-sh:0 0 0 1px oklch(0 0 0 / .1),0 1px 3px oklch(0 0 0 / .14);--pick:oklch(0.875 0 0);
  --rim:oklch(0.85 0 0);--chip:oklch(1 0 0);--float:oklch(1 0 0);
  --accent-text:oklch(0.5 0.19 261);
  --lift:0 18px 48px oklch(0 0 0 / .13),0 2px 8px oklch(0 0 0 / .07);
  --sweep:oklch(0.62 0.18 260 / .8);
  color-scheme:light;
}

/* The stage. */
html[data-look="postal"] body{background:var(--bg);font-family:var(--sans);font-feature-settings:normal;letter-spacing:-.006em;padding:72px var(--page-pad) 40px}
html[data-look="postal"] ::selection{background:var(--accent-bg);color:var(--fg)}

/* ── The bar: the theme's own, its left a disc and the clock, its right the
   look-and-language disc. ── */
.ps-bar{position:fixed;left:0;right:0;top:0;z-index:40;height:64px;pointer-events:none}
.ps-bar .lt{position:absolute;top:16px;left:20px;display:flex;align-items:center;gap:8px;pointer-events:auto}
.ps-disc{display:grid;place-items:center;flex:none;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:var(--cap);background:var(--chip);color:var(--fg-mid);text-decoration:none;transition:background-color .15s,color .15s}
.ps-disc:hover{background:var(--press-hi);color:var(--fg)}
.ps-disc svg{width:17px;height:17px}
.ps-clock{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid transparent;border-radius:var(--cap);background:var(--chip);color:var(--fg);font:500 12.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.ps-clock .sep{animation:psClockBlink 1s steps(1,end) infinite}
@keyframes psClockBlink{0%,49.99%{opacity:1}50%,100%{opacity:.22}}
html[data-look="postal"] .theme-btn{top:16px;right:20px;width:32px;height:32px;border:1px solid transparent;border-radius:var(--cap);background:var(--chip);color:var(--fg-mid);backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-look="postal"] .theme-btn:hover{background:var(--press-hi);color:var(--fg);border-color:transparent}
html[data-look="postal"] .theme-btn svg{width:16px;height:16px}

/* The look-and-language layer: a layer that floats (card grey, the rim,
   the lift); the Mode row is the theme's segmented switch, its pick grey;
   a language is a row. */
html[data-look="postal"] .theme-panel{top:56px;right:20px;width:252px;padding:10px;background:var(--float);border:1px solid var(--rim);border-radius:var(--r-card);filter:none;box-shadow:var(--lift);transform-origin:calc(100% - 16px) 0;animation:psPop .18s var(--ease)}
html[data-look="postal"][data-mode="dark"] .theme-panel{filter:none}
@keyframes psPop{from{opacity:0;transform:translateY(-4px) scale(.98)}}
html[data-look="postal"] .tp-lbl{font:500 10.5px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim);margin:4px 4px 8px}
html[data-look="postal"] .tp-modes{gap:2px;padding:3px;margin-bottom:12px;border-radius:var(--r-seg);background:var(--bed)}
html[data-look="postal"] .tp-mode{gap:5px;padding:8px 0 7px;border:0;border-radius:var(--r-tog);background:transparent;color:var(--fg-mid);font:500 12px/1 var(--sans);letter-spacing:0;text-transform:none;transition:color .15s,background-color .15s}
html[data-look="postal"] .tp-mode:hover:not(.active){color:var(--fg)}
html[data-look="postal"] .tp-mode.active{background:var(--thumb);box-shadow:var(--thumb-sh);color:var(--fg)}
html[data-look="postal"] .tp-divider{margin:0 4px 10px;background:var(--line-2)}
html[data-look="postal"] .lang-list{gap:2px}
html[data-look="postal"] .lang-item{min-height:32px;padding:0 10px;border:0;border-radius:var(--r-key);background:transparent;color:var(--fg);font:500 12.5px/1.2 var(--sans)}
html[data-look="postal"] .lang-item:hover{background:var(--card-hi);color:var(--fg)}
html[data-look="postal"] .lang-item.active{background:var(--pick);color:var(--fg)}

/* ── The panel: the form stands on the stage as a theme 4 sheet does. ── */
html[data-look="postal"] .shell{width:min(440px,calc(100vw - (var(--page-pad) * 2)));margin:clamp(8px,4vh,40px) 0 auto;padding:26px 30px 22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sheet)}
html[data-look="postal"] .wordmark{margin:0 0 20px}
html[data-look="postal"] .wordmark .name{color:var(--fg-dim)}
html[data-look="postal"] .wordmark:hover .name{color:var(--fg)}
html[data-look="postal"] .auth-head{margin-bottom:18px}
html[data-look="postal"] .auth-head h1{margin:0 0 8px;font:500 28px/1.15 var(--sans);letter-spacing:-.03em}
html[data-look="postal"] .auth-head .lead{font-size:14px;line-height:1.55;color:var(--fg-mid)}

/* Sign in / Sign up: a bed, the grey thumb under the one picked. */
html[data-look="postal"] .auth-tabs{gap:4px;padding:3px;margin-bottom:14px;border:0;border-radius:var(--r-seg);background:var(--bed)}
html[data-look="postal"] .auth-thumb{top:3px;bottom:3px;left:3px;width:calc((100% - 10px) / 2);border:0;border-radius:var(--r-tog);background:var(--thumb);box-shadow:var(--thumb-sh);transition:transform .26s var(--ease)}
html[data-look="postal"] .auth-tab{padding:9px 0;border-radius:var(--r-tog);color:var(--fg-mid);font:500 13px/16px var(--sans);letter-spacing:-.005em}
html[data-look="postal"] .auth-tab.active,html[data-look="postal"] .auth-tab:hover:not(.active){color:var(--fg)}

/* Google, the passkey and the factor switch: presses, capsules in the
   press grey; the one blue is the key's. */
html[data-look="postal"] :is(.oauth-btn,.pk-signin-btn,.alt-btn){height:42px;padding:0 16px;gap:9px;border:0;border-radius:var(--cap);background:var(--press);color:var(--fg);font:500 14px/1 var(--sans);letter-spacing:-.005em;opacity:1;transition:background-color .15s,transform .15s var(--ease)}
html[data-look="postal"] :is(.oauth-btn,.pk-signin-btn,.alt-btn):hover{background:var(--press-hi);border-color:transparent;opacity:1}
html[data-look="postal"] :is(.oauth-btn,.pk-signin-btn,.alt-btn):active{transform:scale(.985)}
html[data-look="postal"] .pk-signin-btn{margin-top:8px}
html[data-look="postal"] :is(.oauth-btn,.pk-signin-btn) svg{width:17px;height:17px}

html[data-look="postal"] .divider{margin:16px 0;color:var(--fg-dim);font:500 10.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase}
html[data-look="postal"] .divider::before,html[data-look="postal"] .divider::after{background:var(--line-2)}

/* Fields: the name of each a spaced capital, the field a sunk bed with no
   stroke, a breath lighter under the pointer; the caret draws the blue
   round it, the danger ink once it has been told what is wrong. */
html[data-look="postal"] .auth-form{gap:14px}
html[data-look="postal"] .field{gap:7px}
html[data-look="postal"] .field label{margin:0 2px;font:500 10.5px/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--fg-dim)}
html[data-look="postal"] .field-lbl{margin:0 2px}
html[data-look="postal"] .field-lbl label{margin:0}
html[data-look="postal"] .field-opt{font:500 10px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--fg-dim);opacity:.75}
html[data-look="postal"] .field input{height:44px;padding:0 15px;border:1px solid transparent;border-radius:var(--r-bed);background:var(--bed);color:var(--fg);font:500 14px/1 var(--sans);letter-spacing:-.005em;box-shadow:none;border-image:none;transition:border-color .15s,box-shadow .15s,background-color .15s}
html[data-look="postal"] .field input:hover{border-color:transparent;background:var(--bed-hi)}
html[data-look="postal"] .field input:focus{border-color:var(--accent);background:var(--bed);box-shadow:0 0 0 1px var(--accent);border-image:none;animation:none}
html[data-look="postal"] .field input::placeholder{color:var(--fg-dim);opacity:.85}
html[data-look="postal"] .field input[aria-invalid="true"]{border-color:var(--danger)}
html[data-look="postal"] .field input[aria-invalid="true"]:focus{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger);border-image:none;animation:none}
html[data-look="postal"] .field-hint>span{padding:1px 3px 0;font:400 12.5px/1.45 var(--sans)}

html[data-look="postal"] .pw-wrap input{padding-right:46px}
html[data-look="postal"] .pw-eye{right:7px;border-radius:var(--cap);color:var(--fg-dim)}
html[data-look="postal"] .pw-eye:hover{background:var(--press);color:var(--fg)}
html[data-look="postal"] .pw-frost{left:15px;right:48px;bottom:6px}

/* What only the server can say: a bright word on a dark bed of its hue. */
html[data-look="postal"] .form-error .fe-in{padding:10px 13px;border:0;border-radius:var(--r-bed);background:var(--danger-bg);color:var(--danger);font:500 13px/1.45 var(--sans)}

html[data-look="postal"] .submit-btn{margin-top:6px}
html[data-look="postal"] .form-foot{font-size:12.5px}
html[data-look="postal"] :is(.form-foot,.verify-back,.forgot-back) a{color:var(--fg-mid)}
html[data-look="postal"] :is(.form-foot,.verify-back,.forgot-back) a:hover{color:var(--fg)}

html[data-look="postal"] .signup-consent{padding:12px 13px;border:0;border-radius:var(--r-bed);background:var(--bed)}
html[data-look="postal"] .legal-check{font-size:12.5px;color:var(--fg-mid)}
html[data-look="postal"] .legal-hint{font-size:11px}

html[data-look="postal"] .auth-alt{margin:16px 0 0;font-size:13.5px;color:var(--fg-mid)}
html[data-look="postal"] .auth-alt a{color:var(--accent-text);font-weight:500}
/* The foot: the hairline between rows, then the small print. */
html[data-look="postal"] .auth-legal{margin:14px 0 0;font-size:12px;color:var(--fg-dim)}
html[data-look="postal"] .auth-body + .auth-legal{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2)}
/* Spaced capitals are a Latin voice: a CJK name of a field takes a size it reads at. */
html[data-look="postal"]:is(:lang(zh),:lang(ja),:lang(ko)) :is(.field label,.tp-lbl){font-size:12px;letter-spacing:0}
html[data-look="postal"]:is(:lang(zh),:lang(ja),:lang(ko)) .divider{font-size:11.5px;letter-spacing:0}
html[data-look="postal"] :is(.legal-check,.auth-legal) a{color:var(--fg-mid);text-decoration-color:var(--line-hover)}
html[data-look="postal"] :is(.legal-check,.auth-legal) a:hover{color:var(--fg)}

/* The panels that stand in for the form: words, an address in mono on a
   bed, a note on the blue's bed (or the danger's). */
html[data-look="postal"] .verify-lead{font-size:14px;color:var(--fg-mid)}
html[data-look="postal"] .verify-email{padding:12px 14px;border:0;border-radius:var(--r-bed);background:var(--bed);color:var(--fg);font:500 13px/1.4 var(--mono)}
html[data-look="postal"] .verify-msg{padding:10px 13px;border:0;border-radius:var(--r-bed);background:var(--accent-bg);color:var(--fg);font-size:13px}
html[data-look="postal"] .verify-msg.is-warn{background:var(--danger-bg);color:var(--danger)}
html[data-look="postal"] .tf-cell{height:46px;border:1px solid transparent;border-radius:var(--r-bed);background:var(--bed);color:var(--fg-dim);font:500 17px/1 var(--mono)}
html[data-look="postal"] .tf-otp:hover .tf-cell{border-color:transparent}
html[data-look="postal"] .tf-cell.filled{color:var(--fg)}
html[data-look="postal"] .tf-cell.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);border-image:none;animation:none}
html[data-look="postal"] .tf-cell.sel{background:var(--accent-bg);border-color:var(--accent-dim)}
/* Reset and verified: the check before the form, the state that stands in
   for it, its note, the banner (the box itself there, not a grid around
   one) and the way back, under the hairline. */
html[data-look="postal"] .loading-state{font-size:14px;color:var(--fg-mid)}
html[data-look="postal"] .state-lead{font-size:14px;color:var(--fg-mid)}
html[data-look="postal"] .state-msg{padding:10px 13px;border:0;border-radius:var(--r-bed);background:var(--danger-bg);color:var(--danger);font-size:13px}
html[data-look="postal"] .state-msg.is-info{background:var(--accent-bg);color:var(--fg)}
html[data-look="postal"] .form-error:not(:has(.fe-in)){padding:10px 13px;border:0;border-radius:var(--r-bed);background:var(--danger-bg);color:var(--danger);font:500 13px/1.45 var(--sans)}
html[data-look="postal"] .foot{margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line-2);text-align:left;font:400 12.5px/1.4 var(--sans);letter-spacing:0;text-transform:none}
html[data-look="postal"] .foot a{color:var(--fg-mid)}
html[data-look="postal"] .foot a:hover{color:var(--fg)}

/* The curve: a box on the site's superellipse, a disc, a press and a
   capsule on the true arc. The radii are written out here as well:
   squircle.js reads this gate back on engines without corner-shape and
   lays each one as the arc that matches it (x0.7465, !important), as it
   does for every gate on the account pages; a capsule's 999px is left a
   capsule. */
@supports (corner-shape:superellipse(1.53)){
  html[data-look="postal"] .shell{border-radius:28px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] .theme-panel{border-radius:21.7px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] :is(.auth-tabs,.tp-modes){border-radius:18px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] :is(.auth-thumb,.auth-tab,.tp-mode){border-radius:15px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] :is(.field input,.form-error .fe-in,.form-error:not(:has(.fe-in)),.signup-consent,.verify-email,.verify-msg,.state-msg,.tf-cell){border-radius:14px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] .lang-item{border-radius:9px;corner-shape:superellipse(1.53)}
  html[data-look="postal"] :is(.ps-disc,.ps-clock,.theme-btn,.oauth-btn,.pk-signin-btn,.alt-btn,.pw-eye){corner-shape:round}
  @media (max-width:640px){html[data-look="postal"] .shell{border-radius:24px}}
}

/* A short screen (a 13" laptop's 800): the panel draws up so all of it fits. */
@media (max-height:860px) and (min-width:641px){
  html[data-look="postal"] body{padding-top:62px}
  html[data-look="postal"] .shell{margin-top:0;padding:22px 28px 18px}
  html[data-look="postal"] .wordmark{margin-bottom:14px}
  html[data-look="postal"] .auth-head{margin-bottom:16px}
  html[data-look="postal"] .auth-head h1{margin-bottom:6px;font-size:26px}
  html[data-look="postal"] .divider{margin:14px 0}
}
@media (max-width:640px){
  html[data-look="postal"] body{padding:72px 12px 28px}
  html[data-look="postal"] .shell{width:100%;max-width:440px;margin:4px 0 auto;padding:24px 20px 20px;border-radius:24px}
  html[data-look="postal"] .auth-head h1{font-size:24px}
  .ps-bar .lt{top:calc(12px + env(safe-area-inset-top));left:12px}
  html[data-look="postal"] .theme-btn{top:calc(12px + env(safe-area-inset-top));right:12px;width:32px;height:32px}
  html[data-look="postal"] .theme-panel{top:calc(52px + env(safe-area-inset-top));right:12px;left:12px;width:auto}
}