/* Operations center: one finishing layer for the pages added over time. Loaded last.
   Forms keep a readable width, facts and option groups share one look, tables are denser. */

/* ---- Forms ---- */
#page form:where(.form-grid,.stack):not(.wide-form,#history-form){max-width:920px}
#page .workbench-columns form:where(.form-grid,.stack){max-width:none}
#page :where(input,select,textarea){border-color:#cfd8e6;transition:border-color .12s,box-shadow .12s}
#page :where(input,select,textarea):hover{border-color:#b3c0d4}
#page :where(input,select,textarea):focus{outline:0;border-color:#e63259;box-shadow:0 0 0 3px #e6325922}
#page :where(input,select,textarea):disabled{background:#f3f5f9;color:#7a879b}
#page input[type=number]{font-variant-numeric:tabular-nums}
#page label>small,#page label+small{color:var(--muted);font-size:12px;line-height:1.6}
#page .form-actions{position:static;background:transparent;border-top:1px solid var(--line);padding:16px 0 0;margin-top:8px;justify-content:flex-start;gap:12px}
#page .form-actions span{margin-right:0;order:2;width:auto}
#page .form-actions button{min-width:132px}

/* Option groups: a quiet box with its title on the border line; the outer wrapper that only disables a form stays invisible. */
#page fieldset{min-width:0;margin:0;border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px}
#page fieldset>legend{padding:0 8px;margin-left:-8px;font-size:13px;font-weight:700;color:#263851}
#page .profile-form fieldset,#page form>fieldset:only-child,#page form>fieldset.stack:first-child:last-child,#page fieldset.segmented{border:0;padding:0;border-radius:0}
#page .check{display:flex;align-items:flex-start;gap:10px;line-height:1.6;color:#22324c}
#page .check input,#page input[type=checkbox],#page input[type=radio]{flex:none;width:17px;height:17px;margin:3px 0 0;accent-color:#e63259}

/* ---- Facts: label and value side by side ---- */
#page dl.facts{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:0;margin:0 0 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:13px}
#page dl.facts>dt{padding:11px 16px;background:#f7f9fc;color:#5a6a83;border-bottom:1px solid var(--line)}
#page dl.facts>dd{margin:0;padding:11px 16px;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere;color:#14213d}
#page dl.facts>dt:last-of-type,#page dl.facts>dd:last-of-type{border-bottom:0}
#page dl.facts code{font-size:12px;background:#f1f4f9;border-radius:5px;padding:2px 6px}

/* ---- Panels, notices, tables ---- */
#page .panel>h2:first-child,#page .panel>.panel-title:first-child{margin-bottom:14px}
#page .panel>h2+p.muted,#page .panel>.panel-title+p.muted{margin-top:-6px}
#page p.muted{line-height:1.7}
#page .notice{border-radius:8px}
#page .gift-summary{background:#f4f6fa;color:#4c5b74;border:1px solid var(--line)}
#page table{font-variant-numeric:tabular-nums}
#page table td small{line-height:1.5}
#page .table-actions .small{white-space:nowrap}

/* ---- Summary strip: several figures in one bordered row ---- */
.figure-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-bottom:18px}
.figure-strip>div{padding:16px 20px;border-right:1px solid var(--line);min-width:0}
.figure-strip>div:last-child{border-right:0}
.figure-strip span{display:block;font-size:12px;color:#62758d}
.figure-strip strong{display:block;font-size:26px;line-height:1.3;font-variant-numeric:tabular-nums;margin-top:4px}
.figure-strip small{display:block;font-size:11px;color:var(--muted);line-height:1.5;min-height:1.5em}

/* ---- 会员与支付 ---- */
.membership-panels .workspace-tabs{margin-bottom:18px}
.membership-panels [role=tabpanel]{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.membership-panels [role=tabpanel][hidden]{display:none}
.membership-panels .panel{margin:0}
.membership-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.status-line{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.status-line strong{font-size:20px}
.plan-matrix{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.plan-matrix th,.plan-matrix td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.plan-matrix tr:last-child>*{border-bottom:0}
.plan-matrix thead th{background:#f7f9fc;font-size:13px;color:#263851}
.plan-matrix thead th small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.plan-matrix tbody th{font-weight:500;font-size:13px;color:#33445e;width:26%;background:#fbfcfe}
.plan-matrix td{width:24.6%}
.plan-matrix td input{max-width:170px;text-align:right}
.plan-matrix td.none{color:#9aa6b8}
.unit-field{display:flex;align-items:center;gap:8px}
.unit-field span{font-size:12px;color:var(--muted);white-space:nowrap}
.plan-basics{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:16px}
.paypal-keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.paypal-keys form{max-width:none!important}
.paypal-keys fieldset{display:grid;gap:14px;background:#fbfcfe}
.paypal-keys .form-grid{grid-template-columns:1fr}
.payment-check{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.payment-steps{margin:0 0 16px;padding-left:20px;color:#33445e;font-size:13px;line-height:1.9}
.event-list{display:flex;flex-wrap:wrap;gap:4px 6px}
.event-list code{white-space:nowrap}
@media(max-width:1100px){.membership-duo,.paypal-keys{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.plan-matrix{display:block;overflow-x:auto}.plan-basics{grid-template-columns:1fr}}

/* ---- 邀请：学习班用 ---- */
#page .invitation-plan{display:grid;gap:14px;background:#fbfcfe}
#page .invitation-plan .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
#page .invitation-plan p.muted{margin:0;font-size:12px}
@media(max-width:900px){#page .invitation-plan .form-grid{grid-template-columns:1fr}}
#page .paypal-keys form>fieldset.stack:first-child:last-child{border:1px solid var(--line);border-radius:10px;padding:16px 18px 18px}
#page .paypal-keys+p.muted{margin:14px 0 0;font-size:12px}
#page code{font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace}

/* Settings pages built as "status + settings": the form takes the wide column, the status card sits beside it. */
#page .workbench-columns:has(>.panel:nth-child(2) form):not(:has(>.panel:first-child form))>.panel:first-child{order:2}
#page .workbench-columns:has(>.panel:nth-child(2) form) dl.facts{grid-template-columns:minmax(96px,max-content) minmax(0,1fr)}
#page input[type=checkbox],#page input[type=radio]{padding:0;border-radius:4px;min-height:0;height:17px}
#page label:has(>input[type=checkbox]:first-child){display:flex;align-items:flex-start;gap:10px;line-height:1.6}
#page fieldset>legend{max-width:100%;line-height:1.5}

/* Settings forms in titled sections; switch rows for the AI display switches. */
#page .form-section{display:grid;gap:14px;padding:20px 0;border-top:1px solid #e6ebf3}
#page .form-section:first-child{padding-top:4px;border-top:0}
#page .form-section:last-child{padding-bottom:0}
#page .form-section>h3{margin:0;font-size:14px;font-weight:700;color:#14213d}
#page .form-section>h3+p.muted{margin:-8px 0 0}
#page .form-section .form-actions{margin-top:2px;padding-top:0;border-top:0}
#page .form-notes{margin:0;padding-left:18px;color:#6b7890;font-size:13px;line-height:1.75}
#page .check-list{display:grid;gap:10px;padding:14px 16px;border:1px solid #e6ebf3;border-radius:10px;background:#fafbfd}
#page .badge-line{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#page .ai-switches{margin-bottom:18px}
#page .ai-switches form{max-width:none}
#page .switch-rows{border:1px solid #e6ebf3;border-radius:10px;overflow:hidden}
#page .switch-row{display:flex;align-items:center;gap:16px;padding:14px 18px;cursor:pointer;background:#fff}
#page .switch-row+.switch-row{border-top:1px solid #e6ebf3}
#page .switch-row:hover{background:#fafbfd}
#page .switch-row__text{flex:1;min-width:0;display:grid;gap:2px}
#page .switch-row__text strong{font-size:14px;color:#14213d}
#page .switch-row__text small{color:#6b7890;font-size:12.5px}
#page input[type=checkbox].switch{appearance:none;flex:none;width:42px;height:24px;margin:0;border-radius:999px;background:#c9d2e0;position:relative;cursor:pointer;transition:background .15s}
#page input[type=checkbox].switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(20,33,61,.25);transition:transform .15s}
#page input[type=checkbox].switch:checked{background:#e63259}
#page input[type=checkbox].switch:checked::after{transform:translateX(18px)}
#page input[type=checkbox].switch:disabled{opacity:.55;cursor:not-allowed}
#page input[type=checkbox].switch:focus-visible{outline:2px solid #e85d8b;outline-offset:3px}
#page .ai-switches .form-actions{margin-top:14px;padding-top:0;border-top:0}

#page .test-guide{margin-top:20px;padding-top:18px;border-top:1px solid #e6ebf3}
#page .test-guide h3{margin:0 0 10px;font-size:14px;font-weight:700;color:#14213d}
#page .test-guide .payment-steps li{margin-bottom:10px;line-height:1.75}
#page .test-guide .payment-steps li strong{color:#14213d}

/* The AI tools page: module tabs above the page, master switch and module rows. */
.ai-tabs{margin:0 0 18px}
#page .ai-overview{max-width:none;display:grid;gap:18px}
#page .ai-overview .panel{margin:0}
#page div.switch-row{cursor:default}
#page .switch-row--master{background:#fbfcfe}
#page .switch-row--master .switch-row__text strong{font-size:15px}
#page .switch-row .small,#page .switch-row button{flex:none}
#page .ai-overview .form-actions{margin-top:14px;padding-top:0;border-top:0}

/* Payment providers: the same key forms as PayPal's, and switch rows in a form of full width. */
#page #payment-providers-form{max-width:none}
#page #payment-providers-form .form-actions{margin-top:14px;padding-top:0;border-top:0}
#page .paypal-keys .stripe-keys-form>fieldset.stack:first-child:last-child{border:1px solid var(--line,#e2e7f0);border-radius:12px;padding:18px 18px 16px}

/* No text under 11px in the staff shell. */
.staff-authenticated .nav-caption,.staff-nav-caption{font-size:11px}
.staff-environment{font-size:11px}