:root { --ink:#202723; --muted:#68726b; --line:#dce2db; --surface:#fff; --canvas:#f5f6f2; --green:#356a53; --green-deep:#285440; --green-soft:#e8f0e9; --danger:#a5413a; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font:14px "Noto Sans SC",system-ui,sans-serif; } button,input { font:inherit; } button { cursor:pointer; } .hidden { display:none!important; }
.app-shell { width:min(720px,100%); min-height:100vh; margin:0 auto; padding:0 18px 44px; }.app-header { display:flex; align-items:center; justify-content:space-between; min-height:74px; border-bottom:1px solid var(--line); }.brand { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:16px; font-weight:700; text-decoration:none; }.brand-mark { display:grid; place-items:center; width:29px; height:29px; border-radius:7px; color:#1e2d24; background:#a8c8a9; }.header-actions,.connection-state { display:flex; align-items:center; gap:9px; }.connection-state { color:var(--muted); font-size:12px; }.status-dot { width:7px; height:7px; border-radius:50%; background:#aeb8af; }.connected .status-dot { background:#68a278; }.icon-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:5px; color:var(--muted); background:#fff; }.icon-button:hover { color:var(--ink); background:#edf0eb; }
.announcement-card { display:grid; grid-template-columns:30px minmax(0,1fr); gap:11px; margin:18px 0; padding:13px 14px; border:1px solid #cddfce; border-radius:8px; color:#31563f; background:var(--green-soft); }.announcement-card > .icon { padding-top:2px; font-size:17px; }.announcement-card p { margin:0 0 3px; font-size:12px; font-weight:700; }.announcement-card #announcement-content { overflow-wrap:anywhere; color:#42604a; font-size:12px; line-height:1.65; white-space:pre-wrap; }
.panel,.identity-card { border:1px solid var(--line); border-radius:8px; background:var(--surface); }.panel { padding:22px; margin-top:18px; }.panel-header,.membership-heading,.activity-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }.section-label,.card-kicker { margin:0 0 6px; color:var(--green); font:500 11px "DM Mono",monospace; letter-spacing:.08em; }.card-kicker { display:flex; align-items:center; gap:5px; }.panel h1,.panel h2,.membership-heading h2,.activity-head h2 { margin:0; font-size:18px; line-height:1.3; }.login-panel { margin-top:44px; }.panel-header { margin-bottom:20px; } form { display:grid; gap:9px; } label { display:grid; gap:6px; color:#3e4941; font-size:13px; font-weight:600; } input { width:100%; min-height:43px; padding:10px 11px; border:1px solid #bec8bf; border-radius:5px; color:var(--ink); background:#fff; outline:none; } input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(53,106,83,.12); }.password-field { position:relative; }.password-field input { padding-right:45px; }.field-action { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:4px; color:var(--muted); background:transparent; }.button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:43px; margin-top:12px; border:0; border-radius:5px; font-size:13px; font-weight:700; }.button.primary { color:#fff; background:var(--green); }.button.primary:hover { background:var(--green-deep); }.button.secondary { color:var(--green-deep); background:#e8ece7; }.button:disabled { cursor:wait; opacity:.65; }.privacy-note { display:flex; align-items:center; gap:7px; margin:16px 0 0; color:var(--muted); font-size:12px; }
.identity-card { min-width:0; padding:17px; }.membership-panel { margin-top:18px; }.member-account { overflow:hidden; margin:0 0 8px; color:var(--ink); text-overflow:ellipsis; white-space:nowrap; font:500 14px "DM Mono",monospace; }.member-expiry { margin:0; color:var(--muted); font-size:12px; }.membership-heading { margin-bottom:8px; }.member-badge { display:inline-flex; align-items:center; min-height:24px; padding:4px 7px; border-radius:4px; color:#566057; background:#ecefeb; font-size:11px; font-weight:700; white-space:nowrap; }.member-badge.active { color:var(--green-deep); background:var(--green-soft); }.membership-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:12px 0 0; }.text-button { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:0; border:0; color:var(--green-deep); background:transparent; font-size:12px; font-weight:700; }.text-button:disabled { color:#a4aaa5; cursor:not-allowed; }.redeem-box { display:grid; gap:7px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }.redeem-box > label { font-size:12px; }.redeem-input { display:grid; grid-template-columns:minmax(0,1fr) 34px 34px; overflow:hidden; border:1px solid #bec8bf; border-radius:5px; background:#fff; }.redeem-input:focus-within { border-color:var(--green); box-shadow:0 0 0 3px rgba(53,106,83,.12); }.redeem-input input { min-width:0; min-height:39px; padding:8px 10px; border:0; border-radius:0; box-shadow:none!important; font:500 12px "DM Mono",monospace; }.redeem-input button { display:grid; place-items:center; border:0; border-left:1px solid var(--line); color:var(--muted); background:#fff; }.redeem-input button:hover { color:var(--green-deep); background:#f3f6f1; }.redeem-box .button { width:100%; min-height:38px; margin-top:1px; }.plan-list { display:grid; gap:7px; margin-top:12px; }.plan-row { display:flex; align-items:center; justify-content:space-between; gap:9px; padding-top:10px; border-top:1px solid var(--line); }.plan-row strong { display:block; font-size:13px; }.plan-row small { display:block; margin-top:3px; color:var(--muted); font:11px "DM Mono",monospace; }.plan-row button { min-height:30px; padding:0 9px; border:1px solid var(--green); border-radius:4px; color:var(--green-deep); background:#fff; font-size:11px; font-weight:700; }
.connected-tag { display:inline-flex; align-items:center; gap:5px; padding:5px 7px; border-radius:4px; color:var(--green-deep); background:var(--green-soft); font-size:11px; font-weight:700; white-space:nowrap; }.connected-tag strong { font:500 11px "DM Mono",monospace; }.step-input { position:relative; }.step-input input { min-height:63px; padding:13px 67px 13px 14px; font:500 29px "DM Mono",monospace; }.step-input span { position:absolute; top:50%; right:13px; transform:translateY(-50%); color:var(--muted); font:11px "DM Mono",monospace; }.quick-values { display:flex; flex-wrap:wrap; gap:7px; }.quick-values button { padding:5px 8px; border:1px solid var(--line); border-radius:4px; color:#4e5a51; background:#fbfcfa; font:12px "DM Mono",monospace; }.result-line { min-height:19px; margin-top:14px; color:var(--green-deep); font-size:12px; }.result-line.error { color:var(--danger); }.auto-control { display:flex; align-items:center; gap:9px; min-width:0; }.auto-status { overflow:hidden; color:var(--muted); text-align:right; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.auto-status.error { color:var(--danger); }.auto-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.auto-grid label { font-size:12px; }.auto-grid input,.auto-grid select { font-family:"DM Mono",monospace; }.auto-grid select { width:100%; min-width:0; min-height:43px; padding:10px 9px; border:1px solid #bec8bf; border-radius:5px; color:var(--ink); background:#fff; outline:none; }.auto-grid select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(53,106,83,.12); }.auto-range { grid-column:1 / -1; }.auto-range-fields { display:grid; grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr); align-items:center; gap:6px; }.auto-range-fields b { color:var(--muted); text-align:center; font-weight:500; }.switch { flex:0 0 auto; display:inline-flex; align-items:center; width:42px; height:24px; padding:2px; border-radius:12px; background:#aeb8af; cursor:pointer; }.switch input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }.switch span { width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .16s ease; }.switch:has(input:checked) { background:var(--green); }.switch:has(input:checked) span { transform:translateX(18px); }
.activity-head { align-items:center; padding-bottom:13px; border-bottom:1px solid var(--line); }.operation-log-list { display:grid; margin:0; padding:0; list-style:none; }.operation-log { display:grid; grid-template-columns:18px minmax(0,1fr); gap:9px; padding:11px 0; border-bottom:1px solid var(--line); }.operation-log-icon { display:grid; place-items:center; width:18px; height:18px; color:var(--green-deep); font-size:14px; }.operation-log.failed .operation-log-icon { color:var(--danger); }.operation-log-message { display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }.operation-log-message strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.operation-log-message time { flex:0 0 auto; color:var(--muted); font:10px "DM Mono",monospace; white-space:nowrap; }.operation-log-empty { padding:17px 0; color:var(--muted); font-size:12px; }
.payment-dialog { width:min(360px,calc(100vw - 32px)); border:1px solid var(--line); border-radius:8px; padding:20px; color:var(--ink); background:#fff; box-shadow:0 20px 52px rgba(17,30,20,.24); }.payment-dialog::backdrop { background:rgba(24,32,26,.48); }.payment-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:15px; }.payment-dialog h2 { margin:0; font-size:17px; }.payment-dialog img { display:block; width:min(280px,100%); height:auto; margin:0 auto; }.payment-amount { margin:14px 0 5px; color:var(--green-deep); text-align:center; font:500 18px "DM Mono",monospace; }.payment-status { margin:0; color:var(--muted); text-align:center; font-size:12px; }.migration-dialog { width:min(390px,calc(100vw - 32px)); }.migration-notice { margin:0 0 17px; color:var(--muted); font-size:12px; line-height:1.65; }.dialog-actions { display:grid; grid-template-columns:1fr 1.5fr; gap:9px; }.dialog-actions .button { margin-top:4px; }.toast { position:fixed; right:16px; bottom:16px; max-width:min(360px,calc(100vw - 32px)); padding:11px 13px; border-radius:5px; color:#fff; background:#26332a; box-shadow:0 12px 28px rgba(17,30,20,.18); opacity:0; pointer-events:none; transform:translateY(8px); transition:.18s ease; }.toast.show { opacity:1; transform:translateY(0); }.toast.error { background:#803b35; }
@media (max-width:560px) { .app-shell { padding:0 13px 30px; }.app-header { min-height:64px; }.connection-state span:last-child { display:none; }.announcement-card { margin:13px 0; }.login-panel { margin-top:25px; }.panel { padding:17px; margin-top:13px; }.membership-panel { margin-top:13px; }.identity-card { padding:15px; }.auto-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.operation-log-message { display:block; }.operation-log-message time { display:block; margin-top:3px; }.activity-head { align-items:flex-end; }.toast { z-index:30; top:12px; right:12px; bottom:auto; left:12px; display:flex; align-items:center; min-height:48px; max-width:none; padding:13px 15px; font-size:13px; transform:translateY(-12px); }.toast.show { transform:translateY(0); } }
@media (max-width:760px) { input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px!important; } }
.feedback-panel { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,1.2fr); gap:18px; align-items:end; margin-top:18px; padding:16px 18px; border-top:1px solid var(--line); color:var(--muted); }.feedback-panel h2 { margin:0; color:var(--ink); font-size:15px; }.feedback-panel p:not(.section-label) { margin:5px 0 0; font-size:12px; }.feedback-panel form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:end; }.feedback-panel textarea { width:100%; min-height:58px; resize:vertical; padding:9px 10px; border:1px solid #bec8bf; border-radius:5px; color:var(--ink); font:12px "Noto Sans SC",system-ui,sans-serif; }.feedback-panel textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(53,106,83,.12); }.feedback-panel .text-button { min-height:38px; white-space:nowrap; } @media (max-width:560px) { .feedback-panel { grid-template-columns:1fr; gap:10px; margin-top:13px; padding:15px 2px 0; }.feedback-panel form { grid-template-columns:1fr; }.feedback-panel .text-button { justify-content:center; width:100%; border:1px solid var(--line); border-radius:5px; } }

/* Compact component rhythm: shared dimensions keep every form calm and aligned. */
.app-shell { width:min(760px,100%); padding-bottom:36px; }
.app-header { min-height:68px; }
.panel { margin-top:14px; padding:20px; }
.login-panel { margin-top:34px; }
.panel-header { margin-bottom:16px; }
.panel h1,.panel h2,.membership-heading h2,.activity-head h2 { font-size:17px; }
form { gap:11px; }
label,.field { line-height:1.35; }
.field { display:grid; gap:6px; }
input,.auto-grid select,.feedback-panel textarea { border-color:#b9c4ba; }
input { min-height:42px; padding:9px 11px; }
.button { min-height:42px; margin-top:4px; }
#login-form { gap:12px; }
#login-form .button { margin-top:2px; }
.password-field { display:block; }
.password-field input { min-height:42px; }
.field-action { top:4px; right:4px; width:34px; height:34px; }
.identity-card { padding:16px 18px; }
.membership-heading { margin-bottom:7px; }
.redeem-box { gap:8px; margin-top:13px; padding-top:13px; }
.redeem-box .button { min-height:38px; }
.plan-list { gap:5px; margin-top:10px; }
.plan-row { min-height:47px; padding-top:8px; }
#steps-form { gap:10px; }
.step-input input { min-height:58px; padding:10px 63px 10px 13px; font-size:27px; }
.quick-values { gap:6px; }
.quick-values button { min-height:29px; padding:4px 8px; }
.auto-grid { gap:10px 12px; }
.auto-grid input,.auto-grid select { min-height:40px; padding:8px 9px; }
.auto-range-fields { gap:7px; }
#auto-form .button { margin-top:2px; }
.feedback-panel { gap:16px; margin-top:14px; padding:15px 2px 0; }
.feedback-panel textarea { min-height:54px; }
.payment-dialog { padding:18px; }
.payment-dialog-head { margin-bottom:13px; }
.migration-dialog .field { gap:6px; }

/* Checkout needs a clear payment-method and amount hierarchy without affecting other dialogs. */
#payment-dialog { width:min(386px,calc(100vw - 28px)); padding:20px; border-color:#b9c9bd; }
#payment-dialog .payment-dialog-head { margin-bottom:14px; }
#payment-dialog h2 { font-size:19px; }
.payment-method-hint { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; margin-bottom:14px; padding:11px 12px; border:1px solid #cbd8cf; border-radius:6px; background:#f4f7f3; }
.payment-method-hint > i { display:grid; place-items:center; width:30px; height:30px; border-radius:5px; color:#fff; background:#2d6ea9; font-size:16px; }
.payment-method-hint strong,.payment-method-hint span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.payment-method-hint strong { color:#26352b; font-size:13px; }
.payment-method-hint span { margin-top:3px; color:var(--muted); font-size:11px; }
.payment-method-hint b { padding:4px 6px; border:1px solid #b9d2e8; border-radius:4px; color:#23679e; background:#fff; font-size:11px; white-space:nowrap; }
.payment-qr-wrap { padding:10px; border:1px solid var(--line); border-radius:6px; background:#fff; }
#payment-dialog .payment-qr-wrap img { width:min(258px,100%); }
.payment-summary { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:14px; padding:0 2px; }
.payment-summary span { overflow:hidden; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
#payment-dialog .payment-amount { margin:0; color:#b7492a; font-size:24px; font-weight:700; }
#payment-dialog .payment-status { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:7px; color:#45604b; font-size:12px; }
#payment-dialog .payment-status::before { width:6px; height:6px; border-radius:50%; background:#5d9b70; content:""; }
.auto-status.membership-limited { color:#93612a; }

/* Shared dialog rhythm keeps payment, account migration and WeChat binding aligned. */
.payment-dialog { max-height:calc(100dvh - 28px); overflow:auto; }
.payment-dialog-head { align-items:center; gap:14px; }
.payment-dialog-head > div { min-width:0; }
.payment-dialog .section-label { margin:0 0 3px; line-height:1.2; }
.payment-dialog h2 { line-height:1.35; }
.payment-dialog .icon-button { flex:0 0 auto; }
.migration-dialog,.wechat-binding-dialog { width:min(390px,calc(100vw - 28px)); }
.migration-dialog h2,.wechat-binding-dialog h2 { font-size:18px; }
.migration-dialog .migration-notice,.wechat-binding-dialog .migration-notice { margin:0 0 14px; padding:10px 11px; border-left:3px solid #9cbba4; border-radius:0 5px 5px 0; background:#f4f7f3; color:#506057; line-height:1.65; }
.migration-dialog form { gap:12px; }
.dialog-actions { margin-top:2px; }
.dialog-actions .button { min-width:0; margin-top:0; white-space:nowrap; }
.wechat-binding-dialog { text-align:left; }
.wechat-binding-qr-wrap { display:grid; place-items:center; margin-bottom:12px; padding:10px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.wechat-binding-qr-wrap:has(.hidden) { display:none; }
.wechat-binding-dialog .payment-status { min-height:20px; margin:0 0 10px; color:#365b43; text-align:left; line-height:1.5; }
.wechat-binding-dialog .migration-notice { margin-bottom:12px; }
.wechat-binding-dialog .button { width:100%; margin-top:0; }

@media (max-width:560px) {
  .app-shell { padding:0 13px 30px; }
  .app-header { min-height:62px; }
  .panel { margin-top:12px; padding:16px; }
  .login-panel { margin-top:22px; }
  .identity-card { padding:15px 16px; }
  input,.auto-grid select { min-height:44px; }
  .button { min-height:44px; }
  .step-input input { min-height:56px; font-size:25px; }
  .auto-grid { gap:9px; }
  .feedback-panel { padding-top:14px; }
  .payment-dialog { max-height:calc(100dvh - 20px); }
  .migration-dialog,.wechat-binding-dialog,#payment-dialog { width:calc(100vw - 24px); padding:17px; }
  .wechat-binding-qr-wrap { padding:8px; }
}