.settings-page {
    padding: 110px 0 80px;
    min-height: 100vh;
}
.settings-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px;
}
.settings-page-header {
    margin-bottom: 40px;
}
.settings-page-header h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}
.settings-page-header p {
    font-size: 0.9rem;
    color: var(--text-2);
}
.settings-card {
    background: var(--ink-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}
.settings-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
}
.settings-card-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--g-glow);
    border: 1px solid var(--border-g);
    display: flex; align-items: center; justify-content: center;
    color: var(--g);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.settings-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
}
.settings-card-desc {
    font-size: 0.8rem;
    color: var(--text-2);
    margin: 0;
}
.settings-card-body {
    padding: 24px;
}
/* Theme option cards */
.theme-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 480px) {
    .theme-options { grid-template-columns: 1fr; }
}
.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--ink-3);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color .2s, background .2s, box-shadow .2s;
    position: relative;
    text-align: center;
}
.theme-option:hover {
    border-color: rgba(255,255,255,0.14);
    background: var(--ink-4);
}
.theme-option.active {
    border-color: var(--g);
    background: var(--g-glow);
    box-shadow: 0 0 18px var(--g-glow);
}
.theme-option-check {
    display: none;
    position: absolute;
    top: 10px; right: 10px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--g);
    align-items: center; justify-content: center;
    font-size: 0.6rem;
    color: #000;
}
.theme-option.active .theme-option-check { display: flex; }
.theme-option-preview {
    width: 52px; height: 52px;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: border-color .2s;
}
.theme-option.active .theme-option-preview {
    border-color: var(--border-g);
}
.theme-option-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-1);
    line-height: 1;
}
.theme-option-sub {
    font-size: 0.72rem;
    color: var(--text-2);
    margin-top: 2px;
}

/* System preview icon */
.system-icon {
    width: 28px; height: 28px;
    position: relative;
    flex-shrink: 0;
}

/* Light mode overrides */
html[data-theme="light"] .settings-card {
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
html[data-theme="light"] .theme-option {
    background: var(--ink-3);
}
html[data-theme="light"] .theme-option:hover {
    background: var(--ink-4);
    border-color: rgba(0,0,0,0.15);
}
html[data-theme="light"] .theme-option.active {
    border-color: #00aa55;
    background: rgba(0,170,85,0.06);
    box-shadow: 0 0 18px rgba(0,170,85,0.1);
}
html[data-theme="light"] .theme-option-check {
    background: #00aa55;
}

/* ── Font Size ── */
.fs-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:22px;}
@media(max-width:560px){.fs-presets{grid-template-columns:repeat(3,1fr);}}
.fs-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 6px 13px;background:var(--ink-3);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;position:relative;text-align:center;}
.fs-btn:hover{border-color:rgba(255,255,255,.14);background:var(--ink-4);}
.fs-btn.active{border-color:var(--g);background:rgba(0,230,118,.065);box-shadow:0 0 14px rgba(0,230,118,.10);}
.fs-a{font-weight:700;color:var(--text-1);line-height:1;font-family:'Space Grotesk',sans-serif;transition:color .15s;}
.fs-btn.active .fs-a{color:var(--g);}
.fs-tag{font-size:.6rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;line-height:1.35;}
.fs-btn.active .fs-tag{color:var(--g);opacity:.8;}
.fs-check{display:none;position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;background:var(--g);align-items:center;justify-content:center;font-size:.48rem;color:#000;}
.fs-btn.active .fs-check{display:flex;}
.fs-slider-row{display:flex;align-items:center;gap:12px;padding:8px 2px 0;}
.fs-min-lbl{font-size:10px;font-weight:700;color:var(--text-3);flex-shrink:0;line-height:1;user-select:none;}
.fs-max-lbl{font-size:17px;font-weight:700;color:var(--text-3);flex-shrink:0;line-height:1;user-select:none;}
.fs-slider-box{flex:1;position:relative;}
.fs-slider{width:100%;height:4px;-webkit-appearance:none;appearance:none;border-radius:100px;outline:none;cursor:pointer;transition:background .1s;}
.fs-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--g);border:2.5px solid var(--ink-2);box-shadow:0 0 0 3px rgba(0,230,118,.18),0 2px 6px rgba(0,0,0,.30);cursor:pointer;transition:box-shadow .2s,transform .15s;}
.fs-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(0,230,118,.22),0 2px 8px rgba(0,0,0,.35);transform:scale(1.08);}
.fs-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--g);border:2.5px solid var(--ink-2);cursor:pointer;}
.fs-slider:focus-visible{outline:2px solid var(--g);outline-offset:4px;}
.fs-val{min-width:44px;text-align:right;font-size:.82rem;font-weight:700;color:var(--g);flex-shrink:0;font-variant-numeric:tabular-nums;}
html[data-theme="light"] .fs-btn:hover{border-color:rgba(0,0,0,.12);background:var(--ink-4);}
html[data-theme="light"] .fs-btn.active{border-color:#00aa55;background:rgba(0,170,85,.06);box-shadow:0 0 14px rgba(0,170,85,.08);}
html[data-theme="light"] .fs-btn.active .fs-a{color:#00aa55;}
html[data-theme="light"] .fs-btn.active .fs-tag{color:#00aa55;}
html[data-theme="light"] .fs-check{background:#00aa55;}
html[data-theme="light"] .fs-val{color:#00aa55;}
html[data-theme="light"] .fs-slider::-webkit-slider-thumb{background:#00aa55;box-shadow:0 0 0 3px rgba(0,170,85,.18),0 2px 6px rgba(0,0,0,.12);}
html[data-theme="light"] .fs-slider::-webkit-slider-thumb:hover{box-shadow:0 0 0 5px rgba(0,170,85,.22),0 2px 8px rgba(0,0,0,.15);}
html[data-theme="light"] .fs-slider::-moz-range-thumb{background:#00aa55;}

/* ── Language picker ── */
.lang-picker{display:flex;flex-direction:column;gap:10px;}
.lang-search-wrap{position:relative;}
.lang-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:.75rem;pointer-events:none;}
.lang-search{width:100%;padding:9px 12px 9px 34px;background:var(--ink-3);border:1.5px solid var(--border);border-radius:var(--radius-md);color:var(--text-1);font-size:.82rem;font-family:'Inter',sans-serif;outline:none;transition:border-color .2s;}
.lang-search:focus{border-color:var(--border-g);}
.lang-search::placeholder{color:var(--text-3);}
.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-height:340px;overflow-y:auto;padding-right:2px;}
@media(max-width:520px){.lang-list{grid-template-columns:1fr;}}
.lang-list::-webkit-scrollbar{width:4px;}
.lang-list::-webkit-scrollbar-track{background:transparent;}
.lang-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.lang-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-md);border:1.5px solid transparent;background:transparent;cursor:pointer;transition:background .15s,border-color .15s;width:100%;text-align:left;font-family:'Inter',sans-serif;}
.lang-item:hover{background:var(--ink-3);border-color:var(--border);}
.lang-item-active{background:rgba(0,230,118,.07)!important;border-color:var(--border-g)!important;}
.lang-flag{font-size:1.2rem;line-height:1;flex-shrink:0;width:1.4rem;text-align:center;}
.lang-names{flex:1;min-width:0;}
.lang-native{font-size:.82rem;font-weight:600;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lang-english{font-size:.68rem;color:var(--text-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lang-check{margin-left:auto;flex-shrink:0;width:15px;height:15px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.5rem;color:#000;opacity:0;transition:opacity .15s;}
.lang-item-active .lang-check{opacity:1;}
.lang-none{padding:16px;text-align:center;color:var(--text-3);font-size:.8rem;}
html[data-theme="light"] .lang-item:hover{background:var(--ink-4);}
html[data-theme="light"] .lang-item-active{background:rgba(0,170,85,.06)!important;border-color:#00aa55!important;}
html[data-theme="light"] .lang-item-active .lang-check{background:#00aa55;}
html[data-theme="light"] .lang-search{border-color:rgba(0,0,0,.14);}
html[data-theme="light"] .lang-search:focus{border-color:#00aa55;}