Something went wrong. Try again.
A downstream fork of Tranquil PDS for use in margin.cafe
Something went wrong. Try again.
CSS
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464@import "./tokens.css";
@property --accent { syntax: "<color>"; inherits: true; initial-value: #1a1d1d;}
@property --secondary { syntax: "<color>"; inherits: true; initial-value: #1a1d1d;}
*,*::before,*::after { box-sizing: border-box;}
body { margin: 0; font-family: system-ui, sans-serif; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: anywhere; word-break: break-word;}
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: var(--leading-tight);}
h1 { font-size: var(--text-2xl);}h2 { font-size: var(--text-xl);}h3 { font-size: var(--text-lg);}h4 { font-size: var(--text-base);}
p { margin: 0;}
a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px;}
a:hover { color: var(--secondary-hover);}
::selection { background: var(--secondary-muted);}
input,select,textarea { font-family: inherit; font-size: var(--text-base); line-height: var(--leading-normal); padding: var(--space-4); border: 1px solid var(--border-dark); background: var(--bg-input); color: var(--text-primary); width: 100%;}
input:focus,select:focus,textarea:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 2px var(--secondary-muted);}
input:disabled,select:disabled,textarea:disabled { background: var(--bg-input-disabled); color: var(--text-muted); cursor: not-allowed;}
input::placeholder,textarea::placeholder { color: var(--text-muted);}
select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-4) center; padding-right: var(--space-7);}
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: inherit; font-size: var(--text-base); font-weight: var(--font-medium); line-height: var(--leading-normal); padding: var(--space-2) var(--space-4); border: none; cursor: pointer; background: var(--accent); color: var(--text-inverse);}
button:hover:not(:disabled) { background: var(--accent-hover);}
button:disabled { opacity: 0.6; cursor: not-allowed;}
button.secondary { background: transparent; color: var(--secondary);}
button.secondary:hover:not(:disabled) { background: var(--secondary-muted-strong); color: var(--secondary);}
button.tertiary { background: transparent; color: var(--text-secondary); padding: var(--space-2) var(--space-3);}
button.tertiary:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-tertiary);}
button.danger { background: var(--danger-bg); color: var(--text-inverse);}
button.danger:hover:not(:disabled) { background: var(--danger-bg-hover);}
button.danger-outline { background: transparent; color: var(--error-text);}
button.danger-outline:hover:not(:disabled) { background: var(--error-bg);}
button.cancel { background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color);}
button.cancel:hover:not(:disabled) { background: var(--error-bg); border-color: var(--error-border); color: var(--error-text);}
button.ghost { background: transparent; color: var(--text-secondary);}
button.ghost:hover:not(:disabled) { background: var(--bg-secondary); color: var(--text-primary);}
button.link { background: none; border: none; color: var(--secondary); padding: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-normal);}
button.link:hover:not(:disabled) { background: none; text-decoration: underline;}
button.sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); min-height: 2rem;}
button.icon { background: none; border: none; color: var(--text-secondary); padding: var(--space-1); font-size: var(--text-base); min-width: 2rem; min-height: 2rem;}
button.icon:hover:not(:disabled) { background: none; color: var(--text-primary);}
label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); margin-bottom: var(--space-2);}
fieldset { border: 1px solid var(--border-color); padding: var(--space-5); margin: 0; background: var(--bg-secondary);}
fieldset legend { font-size: var(--text-sm); font-weight: var(--font-semibold); padding: 0; margin-left: calc(-1 * var(--space-1)); margin-bottom: var(--space-3); color: var(--text-secondary); float: left; width: 100%;}
@media (pointer: coarse) { button.sm, button.icon { min-width: 2.75rem; min-height: 2.75rem; }}
fieldset legend + * { clear: both;}
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-tertiary); padding: var(--space-1) var(--space-2);}
pre { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg-tertiary); padding: var(--space-4); overflow-x: auto; margin: 0;}
hr { border: none; border-top: 1px solid var(--border-color); margin: var(--space-6) 0;}
.field { display: flex; flex-direction: column; gap: var(--space-2);}
.field + .field { margin-top: var(--space-5);}
.form-row .field + .field { margin-top: 0;}
.hint { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1);}
.hint.warning { color: var(--warning-text);}
.hint.error { color: var(--error-text);}
.hint.success { color: var(--success-text);}
.message { padding: var(--space-4); font-size: var(--text-sm);}
.message.success { background: var(--success-bg); color: var(--success-text);}
.message.error { background: var(--error-bg); color: var(--error-text);}
.message.warning { background: var(--warning-bg); color: var(--warning-text);}
.message.info { background: var(--accent-muted); color: var(--secondary);}
.badge { display: inline-block; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium);}
.badge.success { background: var(--success-bg); color: var(--success-text);}
.badge.warning { background: var(--warning-bg); color: var(--warning-text);}
.badge.error { background: var(--error-bg); color: var(--error-text);}
.badge.accent { background: var(--accent); color: var(--text-inverse);}
.card { background: var(--bg-card); padding: var(--space-6); overflow: hidden; min-width: 0;}
section { background: var(--bg-secondary); padding: var(--space-6); overflow: hidden; min-width: 0;}
section + section { margin-top: var(--space-6);}
section h3 { margin: 0 0 var(--space-4) 0; font-size: var(--text-base);}
.item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: var(--bg-card);}
.item + .item { border-top: 1px solid var(--border-light);}
.item-info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;}
.item-actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0;}
.definition-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); font-size: var(--text-sm);}
.definition-list dt { color: var(--text-secondary);}
.definition-list dd { margin: 0;}
.modal-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; background: var(--overlay-bg); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;}
.modal { background: var(--bg-card); padding: var(--space-6); width: 100%; max-width: var(--width-sm); max-height: 90vh; overflow-y: auto;}
dialog.modal { position: fixed; margin: auto; border: 0; color: var(--text-primary);}
dialog.modal::backdrop { background: var(--overlay-bg);}
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-5);}
.tab { flex: 1; padding: var(--space-3); background: transparent; color: var(--text-secondary); font-size: var(--text-sm); text-align: center;}
.tab:hover:not(:disabled):not(.active) { background: var(--bg-tertiary); color: var(--text-primary);}
.tab.active,.tab.active:hover:not(:disabled) { background: var(--accent-muted-strong); color: var(--accent);}
.inline-form { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); background: var(--bg-card);}
.page { max-width: var(--width-lg); margin: 0 auto; padding: var(--space-7);}
.page-sm { max-width: var(--width-md); margin: 0 auto; padding: var(--space-7);}
.page-header { margin-bottom: var(--space-6);}
.page-header h1 { margin: 0 0 var(--space-3) 0;}
.page-header .subtitle { color: var(--text-secondary); margin: 0;}
.loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-8);}
.loading p { color: var(--text-secondary); margin: 0;}
.back-link { display: inline-block; color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-3); text-decoration: none;}
.back-link:hover { color: var(--secondary); text-decoration: none;}
.text-center { text-align: center;}
.mono { font-family: var(--font-mono);}
.split-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-6);}
@media (min-width: 800px) { .split-layout { grid-template-columns: 1fr 1fr; align-items: start; } .split-layout.sidebar-right { grid-template-columns: 1.5fr 1fr; } .split-layout.sidebar-left { grid-template-columns: 1fr 1.5fr; }}
.split-layout > * { min-width: 0;}
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, 1fr); } .form-row.thirds { grid-template-columns: repeat(3, 1fr); }}
.full-width { grid-column: 1 / -1;}
.info-panel { background: var(--bg-secondary); padding: var(--space-6); height: fit-content; overflow: hidden; min-width: 0;}
.info-panel h3 { margin: 0 0 var(--space-3) 0; font-size: var(--text-base); font-weight: var(--font-semibold);}
.info-panel p { margin: 0 0 var(--space-4) 0; font-size: var(--text-sm); color: var(--text-secondary);}
.info-panel p:last-child { margin-bottom: 0;}
.skeleton { background: var(--bg-secondary);}
.skeleton-card { height: 100px; background: var(--bg-secondary);}
.skeleton-line { height: var(--space-4); background: var(--bg-secondary);}
.section-hint { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-5) 0;}
.radio-group { display: flex; flex-direction: column; gap: var(--space-4);}
.radio-label { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-base); font-weight: var(--font-normal); margin-bottom: 0;}
.radio-label input[type="radio"] { margin-top: var(--space-1); width: auto;}
.radio-content { display: flex; flex-direction: column; gap: var(--space-1);}
.radio-hint { font-size: var(--text-xs); color: var(--text-secondary);}
.radio-label.disabled { opacity: 0.5; cursor: not-allowed;}
.radio-hint.disabled-hint { color: var(--warning-text);}
.warning-box { margin-top: var(--space-5); padding: var(--space-5); background: var(--warning-bg); font-size: var(--text-sm);}
.warning-box strong { display: block; margin-bottom: var(--space-3); color: var(--warning-text);}
.warning-box ul { margin: var(--space-4) 0 0 0; padding-left: var(--space-5);}
.warning-box li { margin-bottom: var(--space-3); line-height: var(--leading-normal);}
.warning-box li:last-child { margin-bottom: 0;}
.migrate-callout { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--accent-muted); margin-bottom: var(--space-6);}
.migrate-icon { font-size: var(--text-2xl); line-height: 1; color: var(--secondary);}
.migrate-content { flex: 1;}
.migrate-content strong { display: block; color: var(--text-primary); margin-bottom: var(--space-2);}
.migrate-content p { margin: 0 0 var(--space-3) 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed);}
.migrate-link { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--secondary); text-decoration: none;}
.migrate-link:hover { text-decoration: underline;}
.app-password-step { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--width-md); margin: 0 auto;}
.app-password-step .warning-box { margin-top: 0;}
.app-password-step .warning-box p { margin: 0; color: var(--warning-text);}
.app-password-display { background: var(--bg-card); padding: var(--space-6); text-align: center;}
.app-password-label { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-4);}
.app-password-code { display: block; font-size: var(--text-xl); font-family: var(--font-mono); letter-spacing: 0.1em; padding: var(--space-5); background: var(--bg-input); margin-bottom: var(--space-4); user-select: all;}
.copy-btn { padding: var(--space-3) var(--space-5); font-size: var(--text-sm);}
.app-password-actions { display: flex; justify-content: center; gap: var(--space-3);}
.checkbox-label { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-weight: var(--font-normal);}
.checkbox-label input[type="checkbox"] { width: auto; padding: 0;}
.form-section { min-width: 0;}
.form-links .link-text { text-align: center; color: var(--text-secondary);}
.form-links .link-text a { color: var(--secondary);}
.contact-fields { display: flex; flex-direction: column; gap: var(--space-4);}
.contact-fields .field { margin-bottom: 0;}
.provider-badge { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--bg-secondary);}
.provider-details { display: flex; flex-direction: column;}
.provider-name { font-weight: var(--font-semibold);}
.provider-username { font-size: var(--text-sm); color: var(--text-secondary);}
.error-container { text-align: center; padding: var(--space-8);}
.error-icon { width: 48px; height: 48px; background: var(--error-text); color: var(--text-inverse); display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0 auto var(--space-4);}
.error-container h2 { margin-bottom: var(--space-2);}
.error-container p { color: var(--text-secondary); margin-bottom: var(--space-6);}
.info-list { margin: 0; padding-left: var(--space-5);}
.info-list li { margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed);}
.info-list li:last-child { margin-bottom: 0;}
.required { color: var(--error-text);}
main { min-height: 100vh;}
form { display: flex; flex-direction: column; gap: var(--space-4);}
form > div { display: flex; flex-direction: column; gap: var(--space-2);}
form > button { align-self: flex-start;}
input.has-error,textarea.has-error { border-color: var(--error-text);}
input.has-error:focus,textarea.has-error:focus { border-color: var(--error-text); box-shadow: 0 0 0 2px var(--error-bg);}
button.lg { padding: var(--space-3) var(--space-5); font-size: var(--text-lg);}
a.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--accent); color: var(--text-inverse); text-decoration: none; font-weight: var(--font-medium);}
a.btn:hover { background: var(--accent-hover); color: var(--text-inverse); text-decoration: none;}
.card-interactive:hover { border-color: var(--secondary); box-shadow: 0 2px 8px var(--accent-muted);}
section.danger { background: var(--error-bg);}
section.danger h2 { color: var(--error-text);}
section h2 { margin: 0 0 var(--space-3) 0; font-size: var(--text-lg);}
section .description { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-5);}
.page > header { margin-bottom: var(--space-7);}
.header-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);}
.actions { display: flex; flex-direction: row; gap: var(--space-3);}
.empty { color: var(--text-secondary); padding: var(--space-6); text-align: center;}
.subtitle { color: var(--text-secondary); margin: 0;}
.error { padding: var(--space-3); background: var(--error-bg); color: var(--error-text);}
.toast-container { position: fixed; top: var(--space-6); right: var(--space-6); z-index: 9999; display: flex; flex-direction: column; gap: var(--space-3); max-width: min(400px, calc(100vw - 3rem)); pointer-events: none;}
.toast { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); box-shadow: var(--shadow-lg); pointer-events: auto;}
.toast-message { flex: 1; font-size: var(--text-sm); line-height: 1.4;}
.toast-dismiss { flex-shrink: 0; width: 20px; height: 20px; padding: 0; border: none; background: transparent; cursor: pointer; opacity: 0.6; font-size: var(--text-sm); line-height: 1; color: inherit;}
.toast-dismiss:hover { opacity: 1; background: var(--accent-muted);}
@media (max-width: 480px) { .toast-container { top: var(--space-4); right: var(--space-4); left: var(--space-4); max-width: none; }}
.skeleton-card { background: var(--bg-card); padding: var(--space-3);}
.skeleton-header { display: flex; gap: var(--space-2); margin-bottom: var(--space-2);}
.skeleton-line { height: 14px; background: var(--bg-tertiary); margin-bottom: var(--space-1);}
.skeleton-line.last { margin-bottom: 0;}
.skeleton-line.tiny { width: 50px; }.skeleton-line.short { width: 80px; }.skeleton-line.medium { width: 60%; }.skeleton-line.full { width: 100%; }
.skeleton-circle { width: 40px; height: 40px; background: var(--bg-tertiary);}
.account-type-switcher { display: flex; gap: var(--space-2); padding: var(--space-1); background: var(--bg-secondary); margin-bottom: var(--space-6);}
.switcher-option { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--text-secondary); font-weight: var(--font-medium);}
.switcher-option:hover { color: var(--text-primary); background: var(--bg-tertiary); text-decoration: none;}
.switcher-option.active { background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-sm);}
.switcher-option.disabled { opacity: 0.4; cursor: not-allowed;}
.switcher-option.disabled:hover { color: var(--text-secondary); background: transparent;}
.handle-input-group { display: flex; gap: var(--space-2); align-items: center;}
.handle-input-group input { flex: 1;}
.handle-input-group select { width: auto;}
.domain-suffix { color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap;}
.load-more-sentinel { height: 40px; display: flex; align-items: center; justify-content: center; margin-top: var(--space-4);}
.loading-indicator { color: var(--text-secondary); font-size: var(--text-sm);}
.loading-container { display: flex; justify-content: center; align-items: center; min-height: 200px; padding: var(--space-7);}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--border-color);}
.modal-header h2 { margin: 0; font-size: var(--text-lg);}
.close-btn { background: none; border: none; font-size: var(--text-xl); cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1;}
.close-btn:hover { color: var(--text-primary);}
.modal-content { padding: var(--space-6);}
.modal-content form > div { margin-bottom: var(--space-4);}
.modal-content button:not(.tab):not(.secondary) { width: 100%;}
.modal-footer { padding: 0 var(--space-6) var(--space-6); display: flex; justify-content: flex-end;}
.modal-body { padding: var(--space-5);}
.modal-actions { display: flex; flex-direction: row; gap: var(--space-3); flex-wrap: wrap;}
.modal .error-message { margin: var(--space-4) var(--space-6) 0; padding: var(--space-3); background: var(--error-bg); color: var(--error-text); font-size: var(--text-sm);}
.modal .tabs { margin-bottom: 0; padding: var(--space-4) var(--space-6) 0; gap: var(--space-2);}
.modal .tab { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-color);}
.modal .tab.active { border-color: var(--accent);}
.passkey-auth { text-align: center;}
svg.sso-icon { display: block;}
.form-actions { display: flex; flex-direction: row; gap: var(--space-4); margin-top: var(--space-5);}
.form-actions .primary { flex: 1;}
.section-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4);}
.section-header-row h3 { margin: 0;}
.info-box { background: var(--accent-muted); padding: var(--space-5); margin-bottom: var(--space-5);}
.info-box h3 { margin: 0 0 var(--space-3) 0; font-size: var(--text-base);}
.info-box ol,.info-box ul { margin: 0; padding-left: var(--space-5);}
.info-box li { margin-bottom: var(--space-2); color: var(--text-secondary);}
.info-box p { margin: 0; color: var(--text-secondary);}
.info-box strong { display: block; margin-bottom: var(--space-3);}
.or-divider { text-align: center; color: var(--text-muted); font-size: var(--text-sm); margin: var(--space-5) 0;}
.separator { margin: 0 var(--space-2);}
.forgot-links { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); text-align: center;}
.forgot-links a { color: var(--secondary);}
.help-links { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm);}
.help-links a { color: var(--secondary); text-decoration: none;}
.help-links a:hover { text-decoration: underline;}
.section-description { color: var(--text-secondary); font-size: var(--text-sm); margin: 0 0 var(--space-4) 0;}
.confirm-checkbox { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; padding: var(--space-3); background: var(--bg-tertiary); margin-bottom: var(--space-4);}
.confirm-checkbox input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;}
.confirm-checkbox span { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary); line-height: 1.4;}
.toggle-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); background: var(--bg-card); margin-bottom: var(--space-4);}
.toggle-info { display: flex; flex-direction: column; gap: var(--space-1);}
.toggle-label { font-weight: var(--font-medium);}
.toggle-description { font-size: var(--text-sm); color: var(--text-secondary);}
.toggle-button { position: relative; width: 52px; height: 28px; padding: 0; background: var(--border-color); border: none; cursor: pointer; flex-shrink: 0;}
.toggle-button.on { background: var(--accent);}
.toggle-button.on:hover:not(:disabled) { background: var(--accent-hover);}
.toggle-button:disabled { opacity: 0.6; cursor: not-allowed;}
.toggle-slider { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; background: var(--text-inverse); box-shadow: var(--shadow-sm);}
.toggle-button.on .toggle-slider { transform: translateX(24px);}