/* Afragram 2.4 • calm messaging settings, inspired by the user-provided layout references.
   Original brand; no Telegram marks, assets or copyrighted icon artwork embedded. */
:root { --af-ref-blue:#299eeb; --af-ref-bg:#f1f1f3; --af-ref-card:#fff; --af-ref-ink:#1c1d21; --af-ref-muted:#898d93; --af-ref-divider:#e6e7e9; }
[data-theme="dark"]{--af-ref-blue:#64b5f6;--af-ref-bg:#141c25;--af-ref-card:#1d2a37;--af-ref-ink:#eef5fb;--af-ref-muted:#91a4b6;--af-ref-divider:#354251}
.af-settings-page{width:100%;height:100%;overflow:auto;background:var(--af-ref-bg);color:var(--af-ref-ink);font-family:Roboto,"Noto Sans Arabic",Tahoma,Arial,sans-serif}
.af-settings-container{margin:auto;max-width:750px;min-height:100%;padding-bottom:36px}
.af-settings-header{display:flex;align-items:center;gap:22px;min-height:76px;background:var(--af-ref-bg);padding:12px 22px;position:sticky;top:0;z-index:5}
.af-settings-header h2{font-size:23px;font-weight:600;line-height:1.3;letter-spacing:-.02em;flex:1}
.af-settings-header .icon-btn{border-radius:50%;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.af-settings-header .icon-btn:hover{background:#a7b7c326}
.af-settings-content{padding:0 22px 20px}
.af-settings-card{border-radius:24px;background:var(--af-ref-card);margin-bottom:18px;padding:9px 20px;overflow:hidden}
.af-settings-card h3{font-size:16px;color:var(--af-ref-blue);font-weight:600;padding:15px 8px 6px;margin:0;line-height:1.5}
.af-setting-item,.af-switch-row,.af-language-row,.af-folder-line{width:100%;display:flex;align-items:center;gap:15px;min-height:69px;padding:13px 8px;text-align:start;direction:inherit;color:var(--af-ref-ink);background:transparent;border:none;border-bottom:1px solid var(--af-ref-divider);font-size:16px}
.af-setting-item:last-child,.af-switch-row:last-child,.af-language-row:last-child,.af-folder-line:last-child{border-bottom:0}
.af-setting-item:focus-visible,.af-switch-row:focus-within,.af-language-row:focus-visible,.af-create-folder:focus-visible{outline:2px solid var(--af-ref-blue);outline-offset:-2px}
.af-setting-ico{width:27px;min-width:27px;display:grid;place-items:center;color:var(--af-ref-muted)}
.af-setting-ico svg{width:24px;height:24px}
.af-setting-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.af-setting-txt>b,.af-language-row b{font-size:16px;font-weight:500;line-height:1.4}
.af-setting-txt small,.af-language-row small{font-size:13px;line-height:1.55;color:var(--af-ref-muted)}
.af-settings-card .af-setting-item .af-chev{color:var(--af-ref-muted);width:16px;height:16px;opacity:.8}
.af-setting-trailing{font-size:14px;color:var(--af-ref-blue);white-space:nowrap}
.af-switch-row{cursor:pointer;position:relative}
.af-switch-row input[role="switch"]{position:absolute;opacity:0;width:1px;height:1px;inset-inline-end:42px}
.af-ui-toggle{position:relative;display:block;flex:0 0 40px;width:40px;height:23px;background:#b0b7bc;border-radius:20px;transition:background .15s}
.af-ui-toggle:before{content:"";position:absolute;top:3px;inset-inline-start:3px;background:#fff;width:17px;height:17px;border-radius:50%;box-shadow:0 1px 4px #0003;transition:transform .15s}
.af-switch-row input:checked+.af-ui-toggle{background:#299eeb}
.af-switch-row input:checked+.af-ui-toggle:before{transform:translateX(-17px)}
[dir=ltr] .af-switch-row input:checked+.af-ui-toggle:before{transform:translateX(17px)}
.af-settings-note{font-size:13px;line-height:1.75;color:var(--af-ref-muted);padding:0 20px 16px}
.af-folder-intro{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--af-ref-muted);text-align:center;padding:22px 20px 28px;font-size:15px;line-height:1.7}
.af-folder-illustration{font-size:75px;line-height:1.3}
.af-folder-line .af-folder-label{display:flex;align-items:center;gap:16px;flex:1;overflow:hidden}
.af-folder-line .af-folder-label b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-folder-line .af-folder-label svg{color:#a0a5a9;width:24px}
.af-folder-line button{color:#9da7ae;flex:0 0 36px}
.af-create-folder{display:flex;align-items:center;gap:16px;color:var(--af-ref-blue);padding:20px 10px;width:100%;font-size:17px;font-weight:500}
.af-create-folder svg{width:26px;height:26px}
.af-small-action{background:var(--af-ref-blue);border-radius:24px;padding:4px 12px;color:white;font-weight:600}
.af-language-row .af-radio{width:24px;height:24px;border-radius:50%;border:2px solid #adb4b7;flex:none}
.af-language-row .af-radio.checked{border:3px solid var(--af-ref-blue);box-shadow:inset 0 0 0 4px var(--af-ref-card);background:var(--af-ref-blue)}
.af-language-row span:last-child{display:flex;flex-direction:column;gap:2px}
.af-low-power *, .af-low-power *:before,.af-low-power *:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* Reference-like settings, privacy, and active session presentation */
[data-theme=light] .workspace:has(.settings-grid),[data-theme=light] .workspace:has(.privacy-page){--bg:#f1f1f3;--card:#fff;--panel:#fff;--text:#1c1d21;--muted:#8d9298;--border:#e5e7e9}
.view-page:has(.settings-grid),.view-page.privacy-page{background:var(--af-ref-bg);color:var(--af-ref-ink)}
.view-page:has(.settings-grid) .card,.view-page.privacy-page .card{background:var(--af-ref-card)!important;border:0!important;border-radius:24px!important;box-shadow:none!important;padding:11px 20px!important;margin-bottom:17px}
.view-page:has(.settings-grid) .setting-row{min-height:64px;padding:12px 4px;gap:14px;color:var(--af-ref-ink)}
.view-page:has(.settings-grid) .setting-row b{font-size:16px;font-weight:500}
.view-page:has(.settings-grid) .setting-row small{font-size:13px;color:var(--af-ref-muted)}
.view-page:has(.settings-grid) .setting-icon{background:transparent!important;color:var(--af-ref-blue)!important}
.view-page:has(.settings-grid) .setting-row>.icon,.view-page:has(.settings-grid) .setting-icon svg{width:22px;height:22px}
.view-page:has(.settings-grid) .view-title,.view-page.privacy-page .view-title{position:sticky;top:0;z-index:4;padding:18px 8px;background:var(--af-ref-bg);margin:0 0 8px;min-height:67px}
.view-page:has(.settings-grid) .view-title h2,.view-page.privacy-page .view-title h2{font-size:23px;font-weight:600}
.view-page.privacy-page .privacy-row{border-color:var(--af-ref-divider);min-height:67px}
.view-page.privacy-page .privacy-row>span{color:var(--af-ref-blue)}
.view-page.privacy-page .section-caption{font-size:16px;color:var(--af-ref-blue);font-weight:600}
[data-theme=light] .modal.glass{background:#fff!important;color:#222!important}
.premium-hero{background:linear-gradient(120deg,#6d9cf9 0%,#9d6cf4 55%,#db54b5 100%);color:#fff;padding:26px;border-radius:20px 20px 14px 14px}
.premium-hero .premium-gem{color:#fff;font-size:55px;text-shadow:0 5px 20px #5c45c680}
.premium-hero p{color:#ffffffd9}
.premium-features .setting-row{border-bottom:1px solid var(--af-ref-divider);padding:15px 8px}
.premium-features .setting-icon{border-radius:13px;color:#fff;background:linear-gradient(135deg,#5da3f6,#65c7a3)}
/* Existing theme editor remains connected to users/appearance; visual polish only. */
.appearance-page .theme-card{border-radius:22px!important}
.appearance-page .theme-preset-grid{gap:9px}
.appearance-page .theme-preset{border-radius:15px;overflow:hidden}
.af-saved-themes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.af-saved-themes button{padding:7px 12px;border:1px solid var(--border);border-radius:18px;color:var(--text);font-weight:500}
.af-saved-themes .af-theme-new{color:var(--af-ref-blue);border-color:var(--af-ref-blue)}
@media (max-width:760px){
 .af-settings-container{max-width:100%}.af-settings-header{min-height:68px;padding:10px 18px;gap:14px}.af-settings-header h2{font-size:20px}
 .af-settings-content{padding:0 13px 34px}.af-settings-card{border-radius:21px;padding:5px 18px;margin-bottom:15px}.af-settings-card h3{padding:15px 6px 5px}
 .af-setting-item,.af-switch-row,.af-language-row{min-height:68px;padding:12px 4px}
 .workspace.af-settings-detail-open .mobile-nav{display:none!important}
 .workspace.af-settings-detail-open .main-pane{bottom:0!important}
 .view-page:has(.settings-grid),.view-page.privacy-page{padding:4px 15px 28px!important}
 .view-page:has(.settings-grid) .view-title,.view-page.privacy-page .view-title{margin-inline:-8px}
 .appearance-page .appearance-layout{grid-template-columns:1fr}
}