.settings-page{max-width:780px;margin:0 auto}
.settings-back{margin:0 0 18px -8px;gap:8px}
.settings-back-icon{display:inline-flex;transform:rotate(180deg)}
.settings-heading{margin-bottom:32px}
.settings-palette{display:flex;align-items:center;gap:6px;padding:10px 0 10px 10px}
.settings-palette i{display:block;width:22px;height:22px;border-radius:50%;background:#e5eddf}
.settings-palette i:nth-child(2){background:#eee4e8}
.settings-palette i:nth-child(3){background:#e6edf0}
.settings-group{margin-bottom:28px}
.settings-group>h2{font-size:14px;letter-spacing:.04em;margin:0 0 10px 4px;color:var(--muted);font-weight:600}
.settings-card{border:1px solid var(--line);border-radius:20px;background:var(--paper);overflow:hidden}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}
.settings-setting-copy{min-width:0;flex:1}
.settings-setting-copy h3{font-size:17px;line-height:1.5}
.settings-setting-copy p{font-size:13px;line-height:1.75;color:var(--muted);margin:5px 0 0;max-width:430px}
.settings-control{display:flex;align-items:center;gap:12px;flex-shrink:0}
.settings-switch-state{font-size:12px;color:var(--muted)}
.settings-switch{position:relative;display:block;width:58px;height:44px;padding:0;border-radius:24px;background:transparent;flex-shrink:0}
.settings-switch::before{content:"";position:absolute;inset:6px 0;border:1px solid #c9d3c8;border-radius:20px;background:#edf1ec;transition:background .18s,border-color .18s}
.settings-switch-thumb{position:absolute;top:10px;left:4px;width:24px;height:24px;border-radius:50%;background:white;box-shadow:0 1px 4px #46565026;transition:transform .18s}
.settings-switch[aria-checked=true]::before{background:#819a82;border-color:#819a82}
.settings-switch[aria-checked=true] .settings-switch-thumb{transform:translateX(26px)}
.settings-switch:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.settings-material-preview{position:relative;display:flex;align-items:center;justify-content:center;min-height:106px;overflow:hidden;margin:0 24px 24px;background:#f7f9f5;border:1px solid #edf0e9;border-radius:14px;isolation:isolate}
.settings-preview-orb{position:absolute;width:105px;height:105px;border-radius:50%;z-index:-1}
.settings-preview-orb-green{background:#dfe9d8;left:15%;top:25px}
.settings-preview-orb-pink{background:#efe2e8;right:16%;top:-48px}
.settings-preview-bar{display:flex;gap:24px;align-items:center;justify-content:center;background:#fff;border:1px solid #e6ebe1;border-radius:18px;padding:13px 24px}
.settings-preview-bar>span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--green);white-space:nowrap}
.settings-preview-bar .icon{width:17px;height:17px}
.settings-material-preview.is-glass .settings-preview-bar{background:rgba(255,255,255,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:#ffffffb8;box-shadow:inset 0 1px 1px #fff,0 3px 12px #46565006}
.settings-inline-note{padding:0 24px 22px;color:var(--muted);font-size:12px;line-height:1.75}
.settings-storage-note{display:flex;align-items:flex-start;gap:8px;margin:4px 4px 0;color:var(--muted);font-size:12px;line-height:1.75}
.settings-storage-note .icon{width:16px;height:16px;margin-top:2px}
.easy .settings-setting-copy h3{font-size:20px}
.easy .settings-setting-copy p,.easy .settings-inline-note,.easy .settings-storage-note,.easy .settings-switch-state{font-size:15px}
.easy .settings-group>h2{font-size:17px}
@media(max-width:720px){.settings-heading{margin-bottom:26px}.settings-row{padding:20px;gap:16px}.settings-control{flex-direction:column-reverse;gap:0}.settings-switch-state{font-size:11px}.settings-material-preview{margin:0 20px 20px}.settings-preview-bar{gap:18px;padding:13px 18px}.settings-inline-note{padding:0 20px 20px}.settings-palette i{width:18px;height:18px}.settings-setting-copy p{font-size:13px}.settings-back{margin-bottom:16px}}
@media(max-width:360px){.settings-row{padding:17px;gap:12px}.settings-preview-bar{gap:14px;padding:12px}.settings-preview-bar>span{gap:4px}}
@media(prefers-reduced-motion:reduce){.settings-switch::before,.settings-switch-thumb{transition:none}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.settings-material-preview.is-glass .settings-preview-bar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}}