:root{
  --text:#2C2C2B;--muted:#6B6863;--canvas:#F6F5F3;--surface:#FFFFFF;--soft:#F9F8F7;--soft-2:#F0EFED;--border:#E6E5E3;--border-strong:#D3D1CD;
  --accent:#1F6FC5;--accent-hover:#1A5FA9;--accent-soft:#E5F2FC;
  --ok:#2A6F4B;--ok-soft:#E8F1EC;--warn:#96501A;--warn-soft:#FBEBDE;--danger:#C24135;--danger-soft:#FCE9E7;
  --radius:8px;--radius-lg:12px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",Arial,sans-serif;
  color:var(--text);background:var(--canvas);font-size:16px;line-height:1.5;-webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--canvas)}
[hidden]{display:none!important}
p{margin:0}
h1,h2,h3{margin:0;font-weight:600}

.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:clamp(24px,8vh,72px) 16px 24px}
.brand-bar{margin-bottom:24px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-height:44px;border-radius:var(--radius)}
.mark{width:28px;height:28px;fill:var(--text);flex:none}
.brand-name{font-size:17px;font-weight:600;letter-spacing:.02em}
.brand-sub{font-size:14px;color:var(--muted);padding-left:10px;border-left:1px solid var(--border-strong)}

.card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04)}
.card.wide{max-width:480px}
.site-foot{margin-top:auto;padding-top:32px;font-size:14px;color:var(--muted)}

.title{font-size:22px;line-height:1.35;letter-spacing:.01em}
.lead{color:var(--muted);margin:8px 0 24px;overflow-wrap:anywhere}
.note{font-size:14px;color:var(--muted);line-height:1.55}
.note.center{text-align:center;text-wrap:balance}
.qr-help{text-wrap:balance}
.muted{color:var(--muted)}
.stack>*+*{margin-top:16px}
.stack>.title+*{margin-top:20px}.stack>.title+.lead{margin-top:8px}

/* message */
#message{background:var(--accent-soft);color:#174C82;border:1px solid #CFE3F7;border-radius:var(--radius);padding:12px 14px;margin-bottom:24px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}

/* segmented control */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--soft-2);border-radius:10px;margin-bottom:28px}
.seg button{min-height:44px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.seg button:hover{color:var(--text)}
.seg button.selected{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.03)}

/* fields */
.field label,.label-row label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--text)}
.label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;min-height:24px}
.label-row label{margin:0}
input,select{display:block;width:100%;min-height:46px;padding:10px 12px;font:inherit;font-size:16px;color:var(--text);background:var(--surface);border:1px solid #949089;border-radius:var(--radius);outline:none;transition:border-color .15s,box-shadow .15s}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236B6863' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center}
input::placeholder{color:#6B6863}
input:hover,select:hover{border-color:#77736D}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,111,197,.18)}

/* buttons */
button{font:inherit;cursor:pointer}
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 18px;border-radius:var(--radius);font-size:16px;font-weight:600;border:1px solid transparent;transition:background-color .15s,border-color .15s}
.primary{background:var(--accent);color:#fff}
.primary:hover{background:var(--accent-hover)}
.secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong)}
.secondary:hover{background:var(--soft)}
.block{display:flex;width:100%}
.large{min-height:52px;font-size:17px}
button:disabled{cursor:not-allowed}
.primary:disabled{background:#C9C7C2;color:#fff}
.secondary:disabled{color:#8E8A84;background:var(--soft);border-color:var(--border)}
.link{background:none;border:0;padding:10px 2px;min-height:44px;color:var(--accent);font-size:15px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;border-radius:6px}
.link:hover{text-decoration:underline;text-underline-offset:3px}
.link.small{font-size:14px;min-height:44px;padding:10px 2px}
.label-row .link.small{min-height:44px;margin:-10px 0}
.link.danger{color:var(--danger)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seg button:focus-visible{outline-offset:0}

.switch{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:20px;font-size:15px;color:var(--muted)}
.foot-link{text-align:center;margin-top:16px}

/* collapsible options in forms */
.options{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.options summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 40px 0 14px;font-size:14px;color:var(--text);cursor:pointer;list-style:none;position:relative;border-radius:var(--radius)}
.options summary::-webkit-details-marker,.row summary::-webkit-details-marker{display:none}
.options-meta{margin-left:auto;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.options summary::after,.row summary::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.options[open] summary::after,.row[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.options-body{padding:4px 14px 14px;border-top:1px solid var(--border)}
.options-body>*{margin-top:12px}

/* QR */
.qr-wrap{display:flex;flex-direction:column;align-items:center}
#qr-box{width:216px;height:216px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:8px;position:relative}
#qr-box img{width:198px;height:198px;display:block}
#qr-box.expired img{opacity:.08}
.qr-placeholder{font-size:14px;color:var(--muted);text-align:center;padding:0 16px}
.qr-expired{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:0;background:rgba(255,255,255,.86);border-radius:var(--radius-lg);color:var(--text);font-size:15px;font-weight:600}
.qr-expired span{font-size:14px;font-weight:500;color:var(--accent)}
.qr-code{margin-top:14px;font-size:15px;color:var(--muted);min-height:24px;text-align:center}
.qr-code b{color:var(--text);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:.12em;margin-left:4px}
.qr-help{margin:16px 0 20px;font-size:14px;color:var(--muted);text-align:center;line-height:1.6}
.qr-help b{color:var(--text);font-weight:600;white-space:nowrap}
#tab-qr .options{margin-bottom:12px}

/* dashboard */
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.dash-head .title{overflow-wrap:anywhere;min-width:0}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:999px;font-size:14px;font-weight:500;background:var(--soft-2);color:var(--muted)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}

.approval{border:1px solid #EFC9A6;background:#FFF8F1;border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}
.approval h2{font-size:17px}
.approval-detail{margin:8px 0 4px;font-size:16px;overflow-wrap:anywhere}
.approval .note{margin-bottom:16px}
.approval .link{display:flex;margin:4px auto 0}

.teach{background:var(--soft);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px}
.hint{margin-top:12px;font-size:14px;color:var(--warn);text-align:center}
.teach-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:12px;min-height:24px;font-size:14px}
.teach-foot .link{margin:-10px 0}
#lease-info{overflow-wrap:anywhere}

.settings{margin-top:24px;border-top:1px solid var(--border)}
.row{border-bottom:1px solid var(--border)}
.row summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 32px 10px 0;cursor:pointer;list-style:none;position:relative;border-radius:4px}
.row summary::after{right:6px}
.row-title{font-size:16px;font-weight:500;flex:none}
.row-meta{margin-left:auto;font-size:14px;color:var(--muted);text-align:right;min-width:0;overflow-wrap:anywhere}
.row-meta.stacked{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.row-meta .warn,#email-status.warn{color:var(--warn)}
.row-body{padding:0 0 20px}
.row-body>*+*{margin-top:12px}
.row-actions{display:flex;gap:20px;flex-wrap:wrap}

.subscription{display:flex;align-items:center;justify-content:space-between;gap:12px}
.subscription .secondary{flex:none;white-space:nowrap}
#price-label{font-size:15px;color:var(--text)}
.order{font-size:14px;color:var(--muted);padding:8px 0;border-top:1px solid var(--border);overflow-wrap:anywhere}

.device{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border)}
.device:first-child{border-top:0;padding-top:0}
.device strong{display:block;font-size:15px;font-weight:500;overflow-wrap:anywhere}
.device p{font-size:14px;margin-top:2px}
.device button{flex:none;min-height:44px;min-width:64px;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);color:var(--danger);font-size:14px;font-weight:500}
.device button:hover{background:var(--danger-soft);border-color:#EBB8B2}

.secret{background:var(--soft);border-radius:var(--radius-lg);padding:20px}
.secret code{display:block;overflow-wrap:anywhere;background:#fff;padding:14px;margin:16px 0;user-select:all}

@media (max-width:520px){
  .page{padding:16px 16px 20px}
  .brand-bar{margin-bottom:16px}
  .card{padding:24px 20px;border-radius:var(--radius-lg)}
  .title{font-size:20px}
  .site-foot{padding-top:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.row summary.stacked-summary{flex-direction:column;align-items:flex-start;gap:2px;padding-top:14px;padding-bottom:14px}
.stacked-summary .row-meta.stacked{margin-left:0;align-items:flex-start;text-align:left}
.primary:disabled{background:var(--soft-2);color:#77736D;border-color:var(--border)}

/* Dedicated settings; keep the teaching home focused. */
.home-settings{margin-top:20px;text-align:center}
#settings-heading{margin-bottom:20px}
#settings-heading .link{margin-top:-12px;margin-bottom:8px}
#list-price{text-decoration:none;margin-top:4px}
.approval-choice{margin:16px 0}
.approval-choice .note{margin:8px 0 0}
.device>div:first-child{min-width:0}
.device-actions{display:flex;gap:8px;flex:none}
.device .rename-device{color:var(--accent)}
#settings-content .device{flex-wrap:wrap;padding:14px 0}
#settings-content .device-actions{margin-left:auto}
@media(max-width:520px){.subscription{align-items:flex-start}.device-actions button{padding:8px 10px}.device-actions{gap:6px}}

.field-error{color:var(--danger);font-size:14px;line-height:1.5;margin-top:6px}
input[aria-invalid="true"]{border-color:var(--danger)}
#password-rule{margin-top:8px}
.email-attention{padding:12px 14px;border:1px solid #EFC9A6;border-radius:8px;background:#FFF8F1;margin-bottom:20px;font-size:14px;color:#7D4419}
.email-attention .link{margin:2px 0 -8px}
#email-repair-hint{margin-bottom:16px}

.password-input{position:relative;width:100%}
.password-input input{padding-right:48px}
.password-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:44px;min-height:44px;border:0;border-radius:8px;background:transparent;color:#7D7A75;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:10px}
.password-toggle svg{width:22px;height:22px;pointer-events:none}
.password-toggle:hover{color:#2C2C2B;background:#F0EFED}
.password-toggle:focus-visible{outline:2px solid #2783DE;outline-offset:2px}
.phone-switch>*+*{margin-top:16px}
.phone-switch h2{font-size:20px}

.remote-teaching{border-top:1px solid var(--border);padding-top:24px;margin-top:24px}
.remote-teaching h2{font-size:18px;margin-bottom:16px}
.remote-teaching>*+*{margin-top:12px}

/* ===== Settings v2: quiet grouped layout ===== */
.mark.app-icon{width:36px;height:36px;object-fit:cover;border-radius:9px;display:block}
.top-back{display:none;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--text);color:#fff;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .15s}
.top-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top-back:hover{background:#000}
.hero-text{min-width:0}
.hero-name{font-size:15px;line-height:1.5;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

body.is-settings{background:#F4F3F1}
.is-settings .page{padding:28px 32px 24px;align-items:stretch}
.is-settings .brand-bar,.is-settings .card{width:100%;max-width:960px;margin-left:auto;margin-right:auto}
.is-settings .brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:32px;min-height:44px}
.is-settings .brand{flex:none;gap:12px}
.is-settings .brand-name{font-size:17px;font-weight:600;letter-spacing:.02em}
.is-settings .brand-sub,.is-settings .avatar,.is-settings .hero-sub,.is-settings .dash-head,.is-settings .site-foot{display:none}
.is-settings #settings-heading{display:flex;align-items:center;min-width:0;flex:1;margin:0;padding-left:14px;border-left:1px solid var(--border-strong);height:18px}
.is-settings .top-back{display:inline-flex;flex:none;margin-left:auto}
.is-settings .card,.is-settings .card.wide{max-width:960px;background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}

/* Flatten wrappers so the page reads as one two-column sheet. */
.is-settings #dashboard{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:24px;row-gap:16px;align-items:start}
.is-settings #dashboard>*{grid-column:1/-1}
.is-settings #settings-content,.is-settings .set-grid{display:contents}
.is-settings .settings{margin:0;border:0}
.is-settings #dashboard .plan-panel{grid-column:1;grid-row:1}
.is-settings #dashboard .email-panel{grid-column:1;grid-row:2}
.is-settings #dashboard .logout-row{grid-column:1;grid-row:3}
.is-settings #dashboard .device-panel{grid-column:2;grid-row:1/span 3;align-self:stretch;display:flex;flex-direction:column}
.is-settings .device-panel .panel-foot{margin-top:auto}
.panel>.fold{padding-left:0;padding-right:0}
.panel>.plan-buy{padding-left:0;padding-right:0}

.panel{position:relative;background:var(--surface);border-radius:14px;padding:0;min-width:0;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03)}
.panel>*{padding-left:20px;padding-right:20px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:4px;margin:0}
.panel-head h2,.pass-label{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em}
.panel-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-note{font-size:13px;color:var(--muted);line-height:1.5;padding-bottom:8px}
.panel-foot{font-size:13px;color:var(--muted);padding-top:12px;padding-bottom:14px;border-top:1px solid var(--border);margin:0}

/* Plan */
.pass,.pass.inactive{display:grid;grid-template-columns:1fr auto;grid-template-areas:"top top" "main left";align-items:end;gap:6px 12px;min-height:0;padding:16px 20px 0;color:var(--text);background:none;border-radius:0;overflow:visible}
.pass-top{grid-area:top;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pass-state{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ok)}
.pass-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pass.inactive .pass-state{color:var(--warn)}
.pass-main{grid-area:main;display:flex;align-items:baseline;gap:8px;margin:0;padding:0;min-width:0}
.pass-caption{font-size:13px;color:var(--muted)}
.pass-expiry{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.pass.inactive .pass-expiry{display:none}
.pass.inactive .pass-caption{font-size:15px;color:var(--text)}
.is-settings #pass-bar{display:none}
.is-settings #pass-bar-wrap{display:block;height:auto;background:none;border-radius:0;margin:0;grid-area:left;font-size:13px;color:var(--muted);white-space:nowrap;padding-bottom:3px}
.is-settings #pass-bar-wrap::after{content:attr(data-left)}
.plan-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 20px 0;padding:12px 0 0;border-top:1px solid var(--border)}
.price{display:flex;align-items:baseline;gap:3px;min-width:0;white-space:nowrap}
.price #price-label{font-size:15px;font-weight:600;color:var(--text)}
.price .unit{font-size:13px;color:var(--muted)}
.price s{margin-left:6px;font-size:13px;color:#A6A39E}
.plan-buy .secondary{min-width:0;min-height:32px;padding:4px 14px;font-size:13px;font-weight:500;border-radius:999px;border:0;background:var(--accent-soft);color:var(--accent);cursor:pointer}
.plan-buy .secondary:hover{background:#D6E9FA}
.plan-buy .secondary:disabled{background:var(--soft-2);color:var(--muted)}
.plan-fine{padding-top:4px;padding-bottom:12px;font-size:12px;color:#A6A39E}

/* Folds */
.fold{margin:0;border-top:1px solid var(--border)}
.fold summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;font-size:14px;font-weight:400;color:var(--text);cursor:pointer;list-style:none;position:relative}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1.5px solid #A6A39E;border-bottom:1.5px solid #A6A39E;transform:rotate(-45deg);transition:transform .15s}
.fold:not(:has(.fold-meta)) summary::after{margin-left:auto}
.fold[open] summary::after{transform:rotate(45deg)}
.fold summary:hover{background:var(--soft)}
.panel>.fold:last-child summary,.panel>.fold:last-child{border-radius:0 0 14px 14px}
.fold-meta{margin-left:auto;color:var(--muted);font-size:13px}
.fold>form,#orders{padding:4px 20px 16px}
.order{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:40px;padding:0;border-top:1px solid var(--border);font-size:13px;font-variant-numeric:tabular-nums}
.order:first-child{border-top:0}
.order-date{color:var(--muted);min-width:80px}.order-amount{font-weight:500}.order .chip{margin-left:auto}
.chip{display:inline-flex;align-items:center;min-height:22px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;background:var(--soft-2);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip:empty{display:none}

/* Email */
.email-addr{font-size:15px;padding-top:2px;padding-bottom:14px;overflow-wrap:anywhere}
.email-addr.empty{color:var(--muted)}
.email-panel .row-actions{display:flex;gap:16px;margin:0;padding-top:4px;padding-bottom:12px}
.email-panel .row-actions:not(:has(button:not([hidden]))){display:none}

/* Devices */
#devices{padding-top:4px;padding-bottom:4px}
#settings-content .device{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;padding:10px 0;border-top:1px solid var(--border);min-width:0}
#settings-content .device:first-child{border-top:0}
.device-icon{width:38px;height:38px;border-radius:10px;background:var(--soft-2);color:#55524D;display:grid;place-items:center;flex:none}
.device-icon svg{width:19px;height:19px}
.device-text{flex:1;min-width:0}
.device-text strong{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.device-text p{font-size:13px;color:var(--muted);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.here{font-size:11px;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:1px 6px;border-radius:999px;margin-left:8px;vertical-align:2px}
#settings-content .device-actions{display:flex;gap:2px;flex:none;margin-left:0}
#settings-content .device button{min-width:44px;min-height:36px;padding:6px 8px;border:0;border-radius:8px;background:transparent;font-size:13px;color:var(--muted);cursor:pointer}
#settings-content .device button:hover{background:var(--soft-2);color:var(--text)}
#settings-content .device button:not(.rename-device):hover{background:var(--danger-soft);color:var(--danger)}

/* Logout as a quiet grouped row */
.logout-row{margin:0;text-align:left}
.logout-btn{width:100%;min-height:46px;padding:0 20px;border:0;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);color:var(--danger);font-size:14px;text-align:left;cursor:pointer}
.logout-btn:hover{background:var(--danger-soft)}

@media(max-height:700px) and (min-width:761px){
 .is-settings .page{padding-top:16px;padding-bottom:12px}.is-settings .brand-bar{margin-bottom:18px}
 .is-settings #dashboard{row-gap:12px}
}
@media(max-width:760px){
 body.is-settings{background:#F2F1EF}
 .is-settings .page{padding:14px 14px 20px}
 .is-settings .brand-bar{gap:10px;margin-bottom:18px}
 .is-settings .brand{gap:9px}.is-settings .brand-name{font-size:15px;letter-spacing:0}
 .is-settings .mark.app-icon{width:32px;height:32px;border-radius:8px}
 .is-settings #settings-heading{padding-left:10px}
 .hero-name{font-size:14px}
 .top-back{min-height:36px;padding:0 12px 0 8px;font-size:13px}
 .is-settings #dashboard{grid-template-columns:minmax(0,1fr);row-gap:12px}
 .is-settings #dashboard .plan-panel,.is-settings #dashboard .email-panel,.is-settings #dashboard .logout-row,.is-settings #dashboard .device-panel{grid-column:1;grid-row:auto}
 .is-settings #dashboard .plan-panel{order:1}.is-settings #dashboard .device-panel{order:2}.is-settings #dashboard .email-panel{order:3}.is-settings #dashboard .logout-row{order:4}
 .panel>*{padding-left:16px;padding-right:16px}.plan-buy{margin-left:16px;margin-right:16px}
 .pass,.pass.inactive{padding:14px 16px 0}.fold summary{padding:0 16px}.fold>form,#orders{padding-left:16px;padding-right:16px}
 .pass-expiry{font-size:20px}
 .logout-btn{padding:0 16px;text-align:center}
}
@media(max-width:360px){
 .is-settings .brand-bar{gap:8px}.is-settings #settings-heading{padding-left:8px}
 .is-settings .brand{gap:6px}.is-settings .brand-name{font-size:14px}
 .top-back svg{display:none}.top-back{padding:0 10px}
 #settings-content .device{gap:10px}.device-icon{width:32px;height:32px}
 #settings-content .device-actions{gap:0}#settings-content .device button{min-width:40px;padding:6px 4px}
}

/* Clear first-use decision; existing paid settings retain their compact layout. */
body:not(.is-settings):has(#access-choice:not([hidden])) .card.wide{max-width:740px}
.access-choice{margin:24px 0}.access-choice h2{font-size:23px;line-height:1.4}.access-copy{color:var(--muted);margin:6px 0 20px;font-size:15px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.choice-tile{border:1px solid var(--border-strong);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px}.choice-tile.trial-tile{background:#f1f7fd;border-color:#9bc2e8}.choice-kicker{font-size:14px;color:var(--muted)}.choice-tile h3{font-size:27px;line-height:1.3}.choice-tile h3 small{font-size:15px;font-weight:400;margin-left:5px}.choice-tile p{font-size:14px;color:var(--muted);margin-bottom:6px}.choice-tile button{margin-top:auto}.purchase-only .choice-grid{grid-template-columns:1fr}.trial-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;background:#eef6fe;border:1px solid #bed8ef;border-radius:10px;margin:20px 0}.trial-banner strong{font-size:16px}.trial-banner p{font-size:14px;color:var(--muted);margin-top:4px}.catalog-entry{display:inline-block;margin-bottom:12px;font-size:14px}body.is-settings .access-choice{grid-column:1/-1;margin-top:0}.is-settings .trial-banner{margin:0 0 14px}
@media(max-width:540px){.choice-grid{grid-template-columns:1fr;gap:12px}.choice-tile{padding:18px}.choice-tile h3{font-size:25px}.trial-banner{align-items:flex-start}.trial-banner button{flex-shrink:0}.access-choice h2{font-size:21px}}

.home-settings{display:flex;flex-direction:column;align-items:center;gap:8px}.home-settings .catalog-entry{margin-bottom:0}

.home-settings{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:20px;row-gap:0}