html[data-theme="classic"]{--ink:#362e28;--muted:#8c7e70;--line:#e7dccd;--bg:#f5efe5;--purple:#9a6246;--purple2:#b27b58}
html[data-theme="classic"] body{background:var(--bg)}html[data-theme="classic"] .topbar,html[data-theme="classic"] .card,html[data-theme="classic"] .side-profile,html[data-theme="classic"] .side-nav,html[data-theme="classic"] .theme-menu{background:#fffdf8}html[data-theme="classic"] .side-nav a.active{background:#f7eadb;color:#8f583b}html[data-theme="classic"] .welcome-card{background:linear-gradient(140deg,#f5e8d9,#fff8ed 60%,#f4e5da);border-color:#ead7c3}html[data-theme="classic"] .story-studio .studio-art{background:#f4e9dc}html[data-theme="classic"] .brand-mark{background:#9a6246}html[data-theme="classic"] .primary-btn,html[data-theme="classic"] .mobile-nav button{background:#9a6246}
html[data-theme="arabesque"]{--ink:#26352f;--muted:#7f9288;--line:#dce9e1;--bg:#f0f7f3;--purple:#167b66;--purple2:#21957a}html[data-theme="arabesque"] body{background-color:var(--bg);background-image:repeating-linear-gradient(45deg,#16806408 0 2px,transparent 2px 28px),repeating-linear-gradient(-45deg,#16806407 0 2px,transparent 2px 28px)}html[data-theme="arabesque"] .topbar{border-bottom:2px solid #d6b65b}html[data-theme="arabesque"] .brand-mark{background:#167b66}html[data-theme="arabesque"] .side-nav a.active{background:#e4f4eb;color:#126a58}html[data-theme="arabesque"] .welcome-card{background:linear-gradient(140deg,#e2f1e7,#f7f4df 65%,#d6eee5);border-color:#dfd29e}html[data-theme="arabesque"] .story-studio .studio-art{background:#e4f2e9}html[data-theme="arabesque"] .primary-btn,html[data-theme="arabesque"] .mobile-nav button{background:linear-gradient(135deg,#167b66,#259678)}
.theme-btn{height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;color:#77798a;padding:0 9px;font-size:16px}.theme-btn span{font-size:10px;margin-right:3px}.top-actions{position:relative}.theme-menu{position:absolute;z-index:20;top:43px;right:0;width:245px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 40px #26223b1b}.theme-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:7px;background:#fff;padding:9px;color:var(--purple);text-align:right}.theme-menu button:hover{background:#f6f4ff}.theme-menu button span{display:block;color:var(--ink)}.theme-menu b,.theme-menu small{display:block}.theme-menu b{font-size:11px}.theme-menu small{font-size:9px;color:var(--muted);margin-top:2px}
.empty-state{text-align:center;padding:35px 15px}.empty-state>span{font-size:27px;color:var(--purple)}.empty-state b{display:block;margin-top:5px}.empty-state p,.empty-small{font-size:11px;color:#999dab;line-height:1.8}.empty-state button{height:38px;padding:0 15px}.empty-small{text-align:center;padding:18px 10px}.post-image-preview{position:relative;margin:-3px 0 12px}.post-image-preview img{width:100%;max-height:190px;object-fit:cover;border-radius:8px}.post-image-preview button{position:absolute;top:8px;left:8px;border:0;background:#171624b5;color:#fff;border-radius:6px;padding:6px 9px;font-size:10px}.signup-name .input-wrap{margin-bottom:14px}
@media(max-width:700px){.theme-btn{width:33px;padding:0;font-size:18px}.theme-btn span{display:none}.theme-menu{right:auto;left:-73px}.top-actions{gap:8px}}

/* SAWSALA visual refresh: an expressive editorial feed with clear depth and contrast. */
:root{--ink:#21183a;--muted:#817b94;--line:#e9e4f2;--bg:#f5f2fa;--purple:#7047d8;--purple2:#9a76ed;--white:#fff}
body{background:radial-gradient(ellipse at 50% -18%,#e8dfff 0,transparent 43%),#f5f2fa;color:var(--ink)}
.topbar{height:78px;background:#ffffffeb;backdrop-filter:blur(18px);border-bottom:1px solid #e8e0f3;padding-inline:max(calc((100% - 1320px)/2),32px);gap:42px;box-shadow:0 8px 28px #38206008}
.brand{font-size:22px;letter-spacing:-.3px;gap:11px}.brand-mark{width:41px;height:41px;border-radius:15px;background:linear-gradient(145deg,#7552e4,#2dbbd2);box-shadow:0 8px 18px #7552e444;padding:2px}
.search-box{height:44px;border:1px solid #ebe6f3;border-radius:14px;background:#f8f6fb;padding-inline:15px}.search-box:focus-within{border-color:#ae99e7;box-shadow:0 0 0 4px #8c6be514}
.top-actions{gap:13px}.icon-btn,.theme-btn{width:40px;height:40px;border:1px solid #ece7f4;border-radius:13px;background:#fff;color:#685a85;display:grid;place-items:center;transition:.2s}.theme-btn{display:flex;width:auto;padding:0 12px;gap:7px}.icon-btn:hover,.theme-btn:hover{background:#f3effc;color:var(--purple);transform:translateY(-2px)}
.profile-chip{padding:5px 10px 5px 5px;border:1px solid #ece7f4;border-radius:15px;background:#fff;gap:9px}.profile-chip img{width:34px;height:34px;border:2px solid #e8e0fa}
.layout{max-width:1320px;grid-template-columns:244px minmax(430px,650px) 300px;gap:28px;margin:32px auto}.left-sidebar,.right-sidebar{top:104px}.side-profile,.side-nav,.card,.composer{border-color:#ebe5f3;box-shadow:0 12px 35px #35204f0a;border-radius:18px}.side-profile{padding:23px 16px 17px;background:linear-gradient(160deg,#fff,#fbf9ff)}.side-profile>img{width:70px;height:70px;border:3px solid #efe9ff;padding:3px}.side-profile strong{font-size:15px}.side-nav{padding:10px;margin-top:15px}.side-nav a{height:47px;border-radius:11px;padding:0 13px;font-size:13px}.side-nav a.active{background:linear-gradient(100deg,#f1ecff,#faf8ff);box-shadow:inset -3px 0 #7952df;color:#6745c8}
.feed-heading{position:relative;isolation:isolate;overflow:hidden;min-height:170px;border-radius:24px;padding:28px 30px;margin-bottom:20px;background:linear-gradient(112deg,#292044 0%,#4e347e 54%,#7951d3 100%);color:white;box-shadow:0 18px 38px #4e347e2b}.feed-heading:after{content:"";position:absolute;z-index:-1;width:250px;height:250px;border:1px solid #ffffff28;border-radius:50%;left:25px;top:-135px;box-shadow:0 0 0 30px #ffffff09,0 0 0 62px #ffffff07}.feed-heading .eyebrow{color:#d7c9ff;font-size:12px}.feed-heading h1{font-size:30px;margin-top:7px;letter-spacing:-.5px}.feed-heading h1:after{content:"مساحة تشبهك، وأناس يشبهونك";display:block;font-size:12px;font-weight:400;letter-spacing:0;color:#e7def8;margin-top:8px}.feed-heading .sun{color:#ffd27c}.filter-btn{align-self:flex-start;border:1px solid #ffffff4a;background:#ffffff17;color:#fff;border-radius:11px;font-size:11px;backdrop-filter:blur(8px)}
.stories{background:#fff;border:1px solid #ebe5f3;border-radius:18px;padding:15px 17px 12px;margin-bottom:15px;box-shadow:0 10px 28px #35204f08}.story{flex-basis:66px}.story button{width:62px;height:62px;border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#25c7d4,#7d53df,#f080b4) border-box;padding:3px}.story.add-story button{border:1px dashed #b8a8e4;background:#f8f5ff}.story.add-story button span{background:linear-gradient(135deg,#eee7ff,#e4f9fb)}.story small{font-size:10px;font-weight:500}
.composer{height:78px;padding:12px 14px;gap:12px;border-radius:18px;margin-bottom:17px}.avatar{width:45px;height:45px;border:2px solid #eee8fa}.composer-placeholder{border:1px solid #eeeaf4;background:#f9f7fc;border-radius:13px;padding:0 14px;font-size:13px;transition:.2s}.composer-placeholder:hover{background:#f2edfb;color:#694ac7}.composer-tools button{color:#2cae98;font-size:21px}
.post{border-radius:20px;padding:19px 20px 15px;margin-bottom:17px;box-shadow:0 12px 32px #35204f0a;transition:transform .2s,box-shadow .2s}.post:hover{transform:translateY(-2px);box-shadow:0 18px 40px #35204f12}.post-head img{width:44px;height:44px;border:2px solid #eee8fa}.post-person b{font-size:14px;color:#2d2345}.post-person small{font-size:10px}.post-text{font-size:14px;line-height:2;color:#4e4760;margin:14px 0}.post-meta{font-size:11px;color:#8c849d}.post-actions{gap:16px}.post-actions button{font-size:11px;border-radius:9px;padding:6px 8px;transition:.15s}.post-actions button:hover{background:#f5f1fb;color:#694ac7}.post-actions button span{color:#7855d9}
.welcome-card{border-radius:21px;min-height:245px;padding:22px;background:linear-gradient(150deg,#271e41,#563986 67%,#7954d3);color:white;box-shadow:0 18px 38px #4b317b24}.welcome-card .eyebrow{color:#d5c6ff}.welcome-card h2{font-size:25px;line-height:1.45;margin:11px 0}.welcome-card p{color:#e5dcf3;font-size:11px}.welcome-card button{border-radius:10px;color:#4d3581;font-size:11px;padding:10px 13px}.welcome-spark{color:#f4ca76}.welcome-shape{border-color:#ffffff30;box-shadow:0 0 0 18px #ffffff0a,0 0 0 36px #ffffff08}.suggestions{border-radius:18px;padding:18px}.section-title h3{font-size:14px}.legal-links{font-size:10px}
.empty-state{border:1px dashed #d8cdea;border-radius:18px;background:linear-gradient(145deg,#fff,#faf8ff);padding:45px 18px}.empty-state>span{display:inline-grid;place-items:center;background:#f1ebff;width:54px;height:54px;border-radius:18px;color:#744ed6}.empty-state b{font-size:15px;color:#34264f}.empty-state p{font-size:12px}.empty-state button{padding-inline:18px;border-radius:11px}
.feature-view .view-heading,.story-studio,.chat-layout{border-radius:20px}.view-heading{padding:18px 4px}.view-heading h1{font-size:27px;color:#2f2449}.reel-tile{border-radius:18px;box-shadow:0 14px 30px #24133b24}.modal-card{border-radius:22px;box-shadow:0 25px 90px #17102b40}.primary-btn{background:linear-gradient(110deg,#7047d8,#8c65e7);border-radius:11px;box-shadow:0 8px 20px #7047d826}.primary-btn:hover{background:linear-gradient(110deg,#6240c2,#7954d4)}
.login-art{background:radial-gradient(circle at 74% 30%,#9b7ceb 0,transparent 26%),linear-gradient(145deg,#251d3e,#60449a 56%,#7656d2)}.login-box{padding:32px;border:1px solid #eee9f4;border-radius:24px;box-shadow:0 24px 70px #2d1c4d12;background:#fff}.login-heading h2{color:#2e2444}.login-submit{border-radius:12px}
@media(max-width:1100px){.layout{grid-template-columns:205px minmax(390px,650px);max-width:940px;gap:22px}.topbar{padding-inline:24px}}
@media(max-width:700px){body{background:radial-gradient(ellipse at 50% -100px,#e7ddfb 0,transparent 45%),#f5f2fa}.topbar{height:64px;padding-inline:13px;background:#ffffffed}.brand{font-size:16px;gap:8px}.brand-mark{width:34px;height:34px;border-radius:12px}.top-actions{gap:7px}.icon-btn,.theme-btn{width:34px;height:34px;border-radius:11px}.profile-chip{border:0;background:transparent;padding:0}.layout{margin:15px auto 84px;padding:0 12px}.feed-heading{min-height:145px;border-radius:20px;padding:21px 20px;margin-bottom:13px}.feed-heading h1{font-size:25px}.feed-heading h1:after{font-size:11px;margin-top:5px}.filter-btn{padding:7px 9px}.stories{border-radius:16px;padding:12px 12px 10px;margin-bottom:12px;gap:10px}.story,.story button{width:57px}.story{flex-basis:57px}.story button{height:57px}.composer{height:68px;padding:9px 10px;border-radius:16px;margin-bottom:12px}.avatar{width:39px;height:39px}.composer-placeholder{font-size:11px}.post{border-radius:17px;padding:15px 13px 12px;margin-bottom:12px}.post-head img{width:40px;height:40px}.post-person b{font-size:12px}.post-text{font-size:13px}.post-actions{gap:5px;justify-content:space-between}.post-actions button{font-size:10px;padding:6px 5px}.mobile-nav{height:69px;background:#fffffff2;backdrop-filter:blur(16px);border-color:#e9e3f1;box-shadow:0 -8px 25px #36204e0a}.mobile-nav a{font-size:19px}.mobile-nav a.active{color:#7047d8}.mobile-nav button{width:45px;height:45px;border-radius:16px;background:linear-gradient(140deg,#7047d8,#31b7cb);box-shadow:0 8px 18px #7047d84d}.modal-card{border-radius:20px}.login-panel{background:radial-gradient(ellipse at 50% -100px,#e8def9,transparent 48%),#faf8fc}.login-box{padding:25px 20px;border-radius:20px;box-shadow:0 16px 48px #30204412}.mobile-brand{margin-bottom:35px}.login-footer{color:#8e879c}}
.feed-heading h1:after{content:none}.creator-credit{display:flex;align-items:center;gap:7px;margin:10px 0 0;color:#efe8ff;font-size:11px;font-weight:500}.creator-credit span{color:#ffd27c;font-size:15px}
.creator-signature{display:flex;align-items:center;gap:11px;margin-top:25px;padding:12px 14px;border:1px solid #ffffff30;border-radius:14px;background:#ffffff10;backdrop-filter:blur(10px);width:max-content;max-width:100%}.creator-star{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#f6d483,#e8ac56);color:#493063;font-size:17px;box-shadow:0 5px 15px #ffc95735}.creator-signature small,.creator-signature b{display:block}.creator-signature small{font-size:9px;color:#e0d4fb;margin-bottom:3px}.creator-signature b{font-size:12px;color:#fff;letter-spacing:.1px}
@media(max-width:700px){.creator-credit{font-size:10px;margin-top:7px}.creator-signature{margin-top:19px;padding:10px 12px;width:100%;justify-content:flex-start}.creator-signature b{font-size:11px}}
.site-marquee{position:fixed;inset-inline:0;bottom:0;height:34px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(90deg,#2d2048,#6143a0 50%,#2b4564);color:#f8f4ff;z-index:11;box-shadow:0 -5px 22px #29194618}.marquee-track{direction:ltr;display:flex;align-items:center;width:max-content;white-space:nowrap;animation:sawsalaMarquee 26s linear infinite}.marquee-track span{font-size:11px;font-weight:600;letter-spacing:.7px;padding-inline:30px}.marquee-track i{font-style:normal;color:#ffd37a;font-size:12px}@keyframes sawsalaMarquee{to{transform:translateX(-50%)}}.site-marquee:hover .marquee-track{animation-play-state:paused}
body{padding-bottom:42px}.mobile-nav{bottom:34px}.site-marquee{height:34px}.feed-heading,.composer,.post,.stories,.side-profile,.side-nav,.welcome-card,.suggestions{border-color:#e9e3f1}.post-meta{border-color:#efeaf5}.post-actions{border-color:#efeaf5}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;justify-content:center;width:100%}}
@media(max-width:700px){body{padding-bottom:104px}.mobile-nav{bottom:34px}.site-marquee{height:34px}.marquee-track span{font-size:10px;padding-inline:22px}.feed-heading{min-height:145px}.feed-heading h1{margin-top:4px}.creator-credit{line-height:1.6}.post{box-shadow:0 8px 24px #35204f0a}}
/* Primary SAWSALA theme: cocoa brown and warm milk, while preserving the classic and Arabic palettes. */
:root{--ink:#35281f;--muted:#887a6d;--line:#e9ddce;--bg:#f7f2e9;--purple:#8a5d3b;--purple2:#b58661;--white:#fffdf7}
html[data-theme="modern"],html:not([data-theme]){--ink:#35281f;--muted:#887a6d;--line:#e9ddce;--bg:#f7f2e9;--purple:#8a5d3b;--purple2:#b58661;--white:#fffdf7}
html[data-theme="modern"] body,html:not([data-theme]) body{background:radial-gradient(ellipse at 50% -18%,#eee1d0 0,transparent 43%),#f7f2e9;color:var(--ink)}
html[data-theme="modern"] .topbar,html:not([data-theme]) .topbar{background:#fffdf7ed;border-color:#e9ddce}
html[data-theme="modern"] .brand,html:not([data-theme]) .brand{color:#3b2b20}
html[data-theme="modern"] .brand-mark,html:not([data-theme]) .brand-mark{background:linear-gradient(145deg,#8a5d3b,#d0a579);box-shadow:0 8px 18px #8a5d3b35}
html[data-theme="modern"] .search-box,html:not([data-theme]) .search-box{background:#f8f3ea;border-color:#eadfD1}
html[data-theme="modern"] .side-profile,html[data-theme="modern"] .side-nav,html[data-theme="modern"] .card,html[data-theme="modern"] .composer,html[data-theme="modern"] .stories,html[data-theme="modern"] .suggestions,html:not([data-theme]) .side-profile,html:not([data-theme]) .side-nav,html:not([data-theme]) .card,html:not([data-theme]) .composer,html:not([data-theme]) .stories,html:not([data-theme]) .suggestions{background-color:#fffdf7;border-color:#e9ddce}
html[data-theme="modern"] .side-profile,html:not([data-theme]) .side-profile{background:linear-gradient(160deg,#fffdf8,#f7f0e5)}
html[data-theme="modern"] .side-profile>img,html[data-theme="modern"] .post-head img,html:not([data-theme]) .side-profile>img,html:not([data-theme]) .post-head img{border-color:#ead9c4}
html[data-theme="modern"] .side-nav a.active,html:not([data-theme]) .side-nav a.active{background:linear-gradient(100deg,#f0e5d5,#faf5ec);box-shadow:inset -3px 0 #8a5d3b;color:#754b30}
html[data-theme="modern"] .feed-heading,html:not([data-theme]) .feed-heading{background:linear-gradient(112deg,#39291f 0%,#705039 55%,#a27650 100%);box-shadow:0 18px 38px #65432628}
html[data-theme="modern"] .story button,html:not([data-theme]) .story button{background:linear-gradient(#fffdf7,#fffdf7) padding-box,linear-gradient(135deg,#d5a66f,#9b6845,#d9bd92) border-box}
html[data-theme="modern"] .story.add-story button,html:not([data-theme]) .story.add-story button{background:#fbf6ec;border-color:#c9ab87}
html[data-theme="modern"] .story.add-story button span,html:not([data-theme]) .story.add-story button span{background:linear-gradient(135deg,#f4e6d2,#f8f3e9)}
html[data-theme="modern"] .composer-placeholder,html:not([data-theme]) .composer-placeholder{background:#faf6ee;border-color:#ece1d1}
html[data-theme="modern"] .post-person b,html:not([data-theme]) .post-person b{color:#3b2b20}
html[data-theme="modern"] .post-text,html:not([data-theme]) .post-text{color:#514235}
html[data-theme="modern"] .post-actions button span,html:not([data-theme]) .post-actions button span{color:#8a5d3b}
html[data-theme="modern"] .post-actions button:hover,html:not([data-theme]) .post-actions button:hover{background:#f2e7d9;color:#67452f}
html[data-theme="modern"] .welcome-card,html:not([data-theme]) .welcome-card{background:linear-gradient(150deg,#39291f,#76543a 67%,#a27650);box-shadow:0 18px 38px #65432624}
html[data-theme="modern"] .primary-btn,html[data-theme="modern"] .mobile-nav button,html:not([data-theme]) .primary-btn,html:not([data-theme]) .mobile-nav button{background:linear-gradient(110deg,#8a5d3b,#ad7a53);box-shadow:0 8px 20px #8a5d3b2b}
html[data-theme="modern"] .primary-btn:hover,html:not([data-theme]) .primary-btn:hover{background:linear-gradient(110deg,#70472e,#926342)}
html[data-theme="modern"] .login-art,html:not([data-theme]) .login-art{background:radial-gradient(circle at 74% 30%,#b48a62 0,transparent 26%),linear-gradient(145deg,#35271e,#74523a 56%,#9b704e)}
html[data-theme="modern"] .login-panel,html:not([data-theme]) .login-panel{background:radial-gradient(ellipse at 50% -100px,#eee1d0,transparent 48%),#f9f5ed}
html[data-theme="modern"] .login-box,html:not([data-theme]) .login-box{border-color:#e9ddce;box-shadow:0 24px 70px #50382412}
html[data-theme="modern"] .login-heading h2,html:not([data-theme]) .login-heading h2{color:#3b2b20}
html[data-theme="modern"] .theme-btn,html[data-theme="modern"] .icon-btn,html[data-theme="modern"] .profile-chip,html:not([data-theme]) .theme-btn,html:not([data-theme]) .icon-btn,html:not([data-theme]) .profile-chip{background-color:#fffdf7;border-color:#e9ddce;color:#76543b}
html[data-theme="modern"] .theme-menu,html:not([data-theme]) .theme-menu{background:#fffdf7;border-color:#e9ddce}
html[data-theme="modern"] .theme-menu button,html:not([data-theme]) .theme-menu button{background:transparent}
html[data-theme="modern"] .theme-menu button:hover,html[data-theme="modern"] .theme-menu button:focus-visible,html:not([data-theme]) .theme-menu button:hover,html:not([data-theme]) .theme-menu button:focus-visible{background:#f1e5d6;color:#67442e;box-shadow:inset -3px 0 #9a6a46}
html[data-theme="modern"] .empty-state,html:not([data-theme]) .empty-state{border-color:#dfcfbb;background:linear-gradient(145deg,#fffdf7,#f8f1e6)}
html[data-theme="modern"] .empty-state>span,html:not([data-theme]) .empty-state>span{background:#f1e5d6;color:#805838}
html[data-theme="modern"] .mobile-nav,html:not([data-theme]) .mobile-nav{background:#fffdf7f2;border-color:#e9ddce}
html[data-theme="modern"] .mobile-nav a.active,html:not([data-theme]) .mobile-nav a.active{color:#815534}
html[data-theme="modern"] .site-marquee,html:not([data-theme]) .site-marquee{background:linear-gradient(90deg,#35271e,#78543a 50%,#403024)}
html[data-theme="modern"] .creator-credit span,html:not([data-theme]) .creator-credit span{color:#e7c28d}
html[data-theme="modern"] .side-nav a:hover:not(.active),html[data-theme="modern"] .mobile-nav a:hover,html[data-theme="modern"] .sidebar-bottom button:hover,html[data-theme="modern"] .legal-links a:hover,html[data-theme="modern"] .suggestion:hover,html[data-theme="modern"] .chat-person:hover,html[data-theme="modern"] .filter-btn:hover,html[data-theme="modern"] .outline-btn:hover,html:not([data-theme]) .side-nav a:hover:not(.active),html:not([data-theme]) .mobile-nav a:hover,html:not([data-theme]) .sidebar-bottom button:hover,html:not([data-theme]) .legal-links a:hover,html:not([data-theme]) .suggestion:hover,html:not([data-theme]) .chat-person:hover,html:not([data-theme]) .filter-btn:hover,html:not([data-theme]) .outline-btn:hover{background-color:#f1e6d8;color:#754b30}
html[data-theme="modern"] button:not(:disabled):focus-visible,html[data-theme="modern"] a:focus-visible,html[data-theme="modern"] input:focus-visible,html[data-theme="modern"] textarea:focus-visible,html:not([data-theme]) button:not(:disabled):focus-visible,html:not([data-theme]) a:focus-visible,html:not([data-theme]) input:focus-visible,html:not([data-theme]) textarea:focus-visible{outline:3px solid #bd936d;outline-offset:2px}
html[data-theme="modern"] .feed-heading .eyebrow,html:not([data-theme]) .feed-heading .eyebrow{color:#eddbc5}
html[data-theme="modern"] .welcome-card .eyebrow,html:not([data-theme]) .welcome-card .eyebrow{color:#ead6bd}
html[data-theme="modern"] .story button,html:not([data-theme]) .story button{background:linear-gradient(#fffdf7,#fffdf7) padding-box,linear-gradient(135deg,#d5b58e,#9b6845,#dfc9a7) border-box}
html[data-theme="modern"] .composer-tools button,html:not([data-theme]) .composer-tools button{color:#9a714e}
/* Responsive refinements, friend actions, and profile avatar picker */
.side-nav a,.mobile-nav a,.mobile-nav button{transition:color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease}
.side-nav a:hover,.side-nav a:focus-visible{color:var(--purple);background:#efe5d8;outline:none}
.friend-requests-title{font-size:11px;font-weight:700;color:var(--purple);padding:7px 0 10px;border-top:1px solid var(--line)}
.friend-btn{max-width:95px;min-height:29px;padding:4px 7px;border-radius:9px;border:1px solid #e2d1bd;background:#f5ecdf;color:#775139;font-size:9px;font-weight:700;white-space:nowrap}
.friend-btn:hover:not(:disabled),.friend-btn:focus-visible{background:#8a5d3b;color:#fff;outline:2px solid #8a5d3b44;outline-offset:2px}
.friend-btn:disabled{opacity:.78;cursor:default}.friend-btn.accept{background:#8a5d3b;color:#fff;border-color:#8a5d3b}
.avatar-choices{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:0 0 13px}
.avatar-choice{aspect-ratio:1;border:2px solid transparent;padding:2px;border-radius:50%;background:#f1e6d8;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s}
.avatar-choice img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.avatar-choice:hover{transform:translateY(-2px)}.avatar-choice.selected{border-color:#8a5d3b;box-shadow:0 0 0 3px #8a5d3b22}
.profile-edit-avatar{color:var(--muted)}.profile-edit-avatar img{border:2px solid #ead9c6}
.mobile-nav{padding-bottom:max(4px,env(safe-area-inset-bottom));height:calc(69px + env(safe-area-inset-bottom));background:color-mix(in srgb,#fffaf2 93%,transparent);backdrop-filter:blur(18px);box-shadow:0 -8px 26px #4a34200c}
.mobile-nav a{min-width:54px;min-height:50px;justify-content:center;padding:3px 8px;border-radius:13px;color:#8e8073}
.mobile-nav a:hover,.mobile-nav a:focus-visible,.mobile-nav a.active{background:#f2e8dc;color:#815639;outline:none}
.mobile-nav button{background:linear-gradient(145deg,#a8734d,#805236);box-shadow:0 6px 16px #8a5d3b44}
.mobile-nav button:hover,.mobile-nav button:focus-visible{transform:translateY(-3px);box-shadow:0 9px 20px #8a5d3b55;outline:2px solid #8a5d3b44;outline-offset:2px}
@media(max-width:700px){body{padding-bottom:env(safe-area-inset-bottom)}.layout{margin-bottom:calc(90px + env(safe-area-inset-bottom))}.mobile-nav{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}.mobile-nav a{font-size:19px}.mobile-nav a small{font-size:10px}.mobile-nav button{width:43px;height:43px;border-radius:15px;flex:0 0 43px}.chat-layout{min-height:0}.chat-list{max-height:190px;overflow:auto}.chat-person:not(.selected){display:flex}.message-area{min-height:190px;max-height:42vh;overflow:auto}.message-compose{position:sticky;bottom:0;background:#fffaf2}.profile-modal-card{max-height:calc(100dvh - 24px);overflow:auto}.avatar-choices{grid-template-columns:repeat(4,minmax(0,1fr));max-width:260px}.friend-btn{max-width:80px}}
@media(min-width:701px) and (max-width:900px){.layout{grid-template-columns:185px minmax(0,1fr);gap:16px;padding:0 14px}.topbar{gap:20px;padding:0 18px}.brand{min-width:150px}.top-actions{gap:10px}}
@media(prefers-reduced-motion:reduce){.side-nav a,.mobile-nav a,.mobile-nav button,.avatar-choice{transition:none}}
.notification-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.mobile-nav a{background:transparent!important;color:#958678;min-width:56px;min-height:48px;padding:5px 11px}
.mobile-nav a svg,.mobile-nav button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav a.active{color:#805236;box-shadow:none}
.mobile-nav a:hover,.mobile-nav a:focus-visible{background:#eee0cf!important;color:#805236;box-shadow:0 2px 8px #8a5d3b13}
.mobile-nav button{display:grid;place-items:center;background:linear-gradient(145deg,#a8734d,#805236)}
.mobile-nav button svg{width:24px;height:24px}
.moderation-note{font-size:10px;line-height:1.7;color:var(--muted);margin:0 0 12px}.mobile-nav a:focus-visible{outline:2px solid #8a5d3b;outline-offset:2px}
.search-box{position:relative;z-index:12}
.search-results{position:absolute;top:calc(100% + 9px);right:0;width:min(440px,90vw);max-height:min(64vh,520px);overflow:auto;border:1px solid #e9dac8;border-radius:15px;background:#fffaf2;box-shadow:0 18px 48px #392a1f22;padding:9px;z-index:30}
.search-person{display:flex;align-items:center;gap:9px;padding:9px 7px;border-radius:11px;transition:background .15s}
.search-person:hover{background:#f1e6d8}.search-person>img{width:39px;height:39px;object-fit:cover;border-radius:50%}.search-person-info{flex:1;min-width:0}.search-person-info b,.search-person-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-person-info b{font-size:12px}.search-person-info small{font-size:10px;color:var(--muted);direction:ltr;text-align:right}.search-chat{width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#805236;font-size:17px}.search-chat:hover,.search-chat:focus-visible{background:#e9d6c2;outline:none}.search-empty{padding:16px 10px;text-align:center;font-size:12px;color:var(--muted)}.chat-empty{padding:20px 12px;text-align:center;line-height:1.8}
.mobile-search svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(max-width:700px){.search-box{display:none}.search-box.open{display:flex;position:absolute;top:calc(100% + 7px);right:12px;left:12px;width:auto;max-width:none;height:47px;background:#fffaf2;border:1px solid #e9dac8;box-shadow:0 8px 25px #392a1f1a;z-index:20}.search-box.open input{font-size:14px}.search-results{width:100%;top:calc(100% + 8px);max-height:58vh}.search-person{min-height:54px}}

/* Theme tokens keep every surface and label readable when the appearance changes. */
html[data-theme="modern"],html:not([data-theme]){--surface:#fffdf7;--surface-alt:#faf5ed;--field:#f8f1e7;--hover:#f0e5d6;--soft-text:#67594d;--accent-soft:#f0e5d5;--page-shadow:#4a342012}
html[data-theme="classic"]{--surface:#fffaf2;--surface-alt:#f5eadc;--field:#f8efe4;--hover:#ead9c5;--soft-text:#665548;--accent-soft:#f1e4d3;--page-shadow:#4a342014}
html[data-theme="arabesque"]{--surface:#fbfdf9;--surface-alt:#eaf3ed;--field:#f1f7f2;--hover:#deede4;--soft-text:#4e665a;--accent-soft:#e3f1e8;--page-shadow:#254d3b14}
body{color:var(--ink);background-color:var(--bg)}
.topbar,.side-profile,.side-nav,.card,.composer,.stories,.theme-menu,.theme-btn,.icon-btn,.profile-chip,.modal-card,.mobile-nav,.search-results,.chat-search,.message-area,.chat-person,.filter-btn,.outline-btn,.friends-search,.profile-modal-card form input,.story-preview input,.comment-input input,.message-compose input,.composer-placeholder,.google-btn,.input-wrap{background-color:var(--surface);color:var(--ink);border-color:var(--line)}
.side-profile,.side-nav,.card,.composer,.stories,.theme-menu,.modal-card,.search-results,.friends-panel,.incoming-panel{box-shadow:0 12px 34px var(--page-shadow)}
.search-box,.search-box.open,.chat-search,.composer-placeholder,.message-compose input,.comment-input input,.friends-search,.story-preview input,.modal-addons{background:var(--field);color:var(--ink);border-color:var(--line)}
.search-box input,.chat-search input,.friends-search input,.message-compose input,.comment-input input,.story-preview input,.profile-modal-card form input,.modal-card textarea{color:var(--ink)}
.search-box input::placeholder,.friends-search input::placeholder,.composer-placeholder,.message-compose input::placeholder,.chat-search input::placeholder,.story-preview input::placeholder,.modal-card textarea::placeholder{color:var(--muted);opacity:1}
.post-person b,.post-text,.view-heading h1,.side-profile strong,.section-title h3,.empty-state b,.trend b,.comment-row b{color:var(--ink)}
.post-meta,.post-person small,.side-profile>span,.side-stats small,.suggestion small,.trend small,.empty-state p,.empty-small,.view-heading p,.profile-form-hint,.friends-hint,.legal-links,.modal-user small{color:var(--muted)}
.post-meta,.comments,.comment-row,.chat-person,.thread-head,.message-compose,.chat-search,.post-actions,.incoming-panel .section-title{border-color:var(--line)}
.side-nav a,.mobile-nav a,.sidebar-bottom button,.legal-links a,.theme-menu button span,.theme-btn,.profile-chip,.icon-btn,.outline-btn,.search-chat{color:var(--ink)}
.side-nav a.active,.side-nav a:hover:not(.active),.mobile-nav a.active,.mobile-nav a:hover,.theme-menu button:hover,.suggestion:hover,.chat-person:hover,.chat-person.selected,.post-actions button:hover,.search-person:hover,.search-chat:hover,.avatar-choice{background:var(--accent-soft);color:var(--purple)}
.primary-btn,.mobile-nav button,.friend-btn.accept{background:linear-gradient(110deg,var(--purple),var(--purple2));color:#fff;border-color:transparent}
.primary-btn:hover{filter:brightness(.94)}
.friend-btn{background:var(--accent-soft);border-color:var(--line);color:var(--purple)}
.friend-btn:hover:not(:disabled),.friend-btn.accept:hover{background:var(--purple);color:#fff}
.side-nav a:hover:not(.active),.mobile-nav a:hover,.sidebar-bottom button:hover,.legal-links a:hover,.filter-btn:hover,.outline-btn:hover{background:var(--hover);color:var(--purple)}
.welcome-card{background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 22%,var(--surface)),var(--surface-alt));border-color:var(--line);color:var(--ink)}.welcome-card .eyebrow,.welcome-card p{color:var(--soft-text)}.welcome-card button{background:var(--surface);color:var(--purple)}
.feed-heading{background:linear-gradient(112deg,color-mix(in srgb,var(--ink) 88%,var(--purple)),var(--purple));color:#fff}.feed-heading h1,.feed-heading .eyebrow,.feed-heading .creator-credit{color:#fff}.feed-heading .creator-credit span{color:var(--surface-alt)}
.site-marquee{background:linear-gradient(90deg,var(--ink),var(--purple),var(--ink))}
.story-studio .studio-art,.message-area,.empty-state,.profile-edit-avatar,.avatar-choice{background-color:var(--surface-alt);color:var(--ink)}
.story-studio .studio-art span,.outline-btn,.modal-addons button,.comment-input button{color:var(--purple)}
.friend-results,.incoming-panel{margin-top:10px}.friends-panel,.incoming-panel{padding:18px;border-radius:18px}.friends-search{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:13px}.friends-search>span{font-size:23px;color:var(--purple)}.friends-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;font-size:13px}.friends-search button{border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:22px}.friends-search button:hover{background:var(--hover);color:var(--purple)}.friends-hint{font-size:11px;margin:9px 2px 12px}.friend-results .search-person,.incoming-panel .search-person{border-bottom:1px solid var(--line)}.incoming-panel{margin-top:15px}.incoming-panel .section-title{margin-bottom:8px}
.logout-action{display:block;width:100%;margin-top:16px;padding:11px 14px;border:1px solid color-mix(in srgb,#b74646 28%,var(--line));border-radius:11px;background:color-mix(in srgb,#b74646 8%,var(--surface));color:#a43d3d;font-size:12px;font-weight:700;transition:background .18s,color .18s}.logout-action:hover,.logout-action:focus-visible{background:#a43d3d;color:white;outline:none}
html[data-theme="classic"] .feed-heading,html[data-theme="classic"] .welcome-card,html[data-theme="classic"] .login-art{background:linear-gradient(130deg,#3d2d22,#8b6242 65%,#b4855d)}
html[data-theme="arabesque"] .feed-heading,html[data-theme="arabesque"] .welcome-card,html[data-theme="arabesque"] .login-art{background:linear-gradient(130deg,#203f34,#197d67 65%,#3b9d7c)}
html[data-theme="classic"] .primary-btn,html[data-theme="classic"] .mobile-nav button{background:linear-gradient(110deg,#8a5d3b,#b58661)}
html[data-theme="arabesque"] .primary-btn,html[data-theme="arabesque"] .mobile-nav button{background:linear-gradient(110deg,#167b66,#50a184)}
.mobile-nav a[data-view="friends"]{font-size:16px}@media(max-width:700px){.mobile-nav a{min-width:45px;padding-inline:4px}.mobile-nav a small{font-size:9px}.mobile-nav{gap:1px}.friend-results .search-person,.incoming-panel .search-person{flex-wrap:wrap}.friend-btn{max-width:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
html[data-theme] .topbar,html[data-theme] .side-profile,html[data-theme] .side-nav,html[data-theme] .card,html[data-theme] .composer,html[data-theme] .stories,html[data-theme] .theme-menu,html[data-theme] .modal-card,html[data-theme] .mobile-nav,html[data-theme] .search-results,html[data-theme] .friends-search{background-color:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme] .search-box,html[data-theme] .composer-placeholder,html[data-theme] .message-compose input,html[data-theme] .comment-input input,html[data-theme] .chat-search,html[data-theme] .story-preview input,html[data-theme] .profile-modal-card form input,html[data-theme] .friends-search{background-color:var(--field);color:var(--ink);border-color:var(--line)}
html[data-theme] .search-box input,html[data-theme] .friends-search input,html[data-theme] .chat-search input,html[data-theme] .message-compose input,html[data-theme] .profile-modal-card form input,html[data-theme] .modal-card textarea{color:var(--ink)}
html[data-theme] .search-box input::placeholder,html[data-theme] .friends-search input::placeholder,html[data-theme] .composer-placeholder,html[data-theme] .message-compose input::placeholder,html[data-theme] .chat-search input::placeholder,html[data-theme] .modal-card textarea::placeholder{color:var(--muted);opacity:1}
html[data-theme] .post-person b,html[data-theme] .post-text,html[data-theme] .view-heading h1,html[data-theme] .side-profile strong,html[data-theme] .section-title h3,html[data-theme] .empty-state b,html[data-theme] .trend b,html[data-theme] .comment-row b{color:var(--ink)}
html[data-theme] .post-person small,html[data-theme] .post-meta,html[data-theme] .empty-state p,html[data-theme] .empty-small,html[data-theme] .view-heading p,html[data-theme] .friends-hint,html[data-theme] .profile-form-hint,html[data-theme] .legal-links,html[data-theme] .suggestion small,html[data-theme] .trend small{color:var(--muted)}
html[data-theme] .side-nav a.active,html[data-theme] .side-nav a:hover:not(.active),html[data-theme] .mobile-nav a.active,html[data-theme] .mobile-nav a:hover,html[data-theme] .theme-menu button:hover,html[data-theme] .chat-person.selected,html[data-theme] .chat-person:hover,html[data-theme] .search-person:hover,html[data-theme] .suggestion:hover{background:var(--accent-soft);color:var(--purple)}
html[data-theme] .mobile-nav a.active{color:var(--purple)}html[data-theme] .mobile-nav button{color:#fff;background:linear-gradient(110deg,var(--purple),var(--purple2))}
html[data-theme] .welcome-card{background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 22%,var(--surface)),var(--surface-alt));border-color:var(--line);color:var(--ink)}html[data-theme] .welcome-card .eyebrow,html[data-theme] .welcome-card p{color:var(--soft-text)}html[data-theme] .welcome-card button{background:var(--surface);color:var(--purple)}
html[data-theme] .feed-heading{background:linear-gradient(112deg,color-mix(in srgb,var(--ink) 88%,var(--purple)),var(--purple));color:#fff}html[data-theme] .feed-heading h1,html[data-theme] .feed-heading .eyebrow,html[data-theme] .feed-heading .creator-credit{color:#fff}
html[data-theme] .login-panel{background:var(--bg)}html[data-theme] .login-box{background:var(--surface);color:var(--ink);border-color:var(--line)}html[data-theme] .login-heading h2,html[data-theme] .login-box form>label,html[data-theme] .login-box .input-wrap{color:var(--ink)}html[data-theme] .login-heading p,html[data-theme] .demo-hint,html[data-theme] .login-footer{color:var(--muted)}html[data-theme] .login-art{color:#fff}html[data-theme] .login-art .art-copy p,html[data-theme] .login-art .eyebrow,html[data-theme] .login-art .art-note{color:#fff}
html[data-theme] .theme-btn,html[data-theme] .icon-btn,html[data-theme] .profile-chip,html[data-theme] .theme-menu button,html[data-theme] .outline-btn,html[data-theme] .filter-btn,html[data-theme] .side-nav a,html[data-theme] .sidebar-bottom button{color:var(--ink)}html[data-theme] .primary-btn,html[data-theme] .friend-btn.accept{color:#fff}
html[data-theme] .story-studio .studio-art,html[data-theme] .message-area,html[data-theme] .empty-state,html[data-theme] .avatar-choice,html[data-theme] .story.add-story button{background-color:var(--surface-alt);color:var(--ink)}html[data-theme] .story-studio .studio-art span,html[data-theme] .search-chat,html[data-theme] .post-actions button span,html[data-theme] .outline-btn,html[data-theme] .comment-input button{color:var(--purple)}
html[data-theme] .bubble.received{background:var(--surface-alt);color:var(--ink)}html[data-theme] .bubble.sent{background:linear-gradient(110deg,var(--purple),var(--purple2));color:#fff}
html[data-theme] button:not(:disabled):focus-visible,html[data-theme] a:focus-visible,html[data-theme] input:focus-visible,html[data-theme] textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--purple) 55%,transparent);outline-offset:2px}

/* PhoneZone-inspired controls and cards, recolored by the active Sawsala theme. */
html[data-theme]{--component-radius:15px;--card-lift-shadow:0 18px 42px color-mix(in srgb,var(--purple) 15%,transparent)}
html[data-theme] .story button{border-radius:50%}
html[data-theme] .search-box,html[data-theme] .friends-search,html[data-theme] .chat-search{border-radius:17px;transition:border-color .2s,box-shadow .2s,background-color .2s}
html[data-theme] .search-box:focus-within,html[data-theme] .friends-search:focus-within,html[data-theme] .chat-search:focus-within{border-color:color-mix(in srgb,var(--purple) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--purple) 12%,transparent)}
html[data-theme] .primary-btn,html[data-theme] .friend-btn.accept{background:linear-gradient(125deg,var(--purple),var(--purple2));border:1px solid transparent;border-radius:var(--component-radius);color:#fff;transition:transform .18s,box-shadow .18s,filter .18s}
html[data-theme] .primary-btn:hover:not(:disabled),html[data-theme] .friend-btn.accept:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 9px 22px color-mix(in srgb,var(--purple) 25%,transparent)}
html[data-theme] .outline-btn,html[data-theme] .filter-btn,html[data-theme] .friend-btn:not(.accept){border-radius:var(--component-radius);transition:transform .18s,background-color .18s,color .18s,border-color .18s,box-shadow .18s}
html[data-theme] .outline-btn:hover,html[data-theme] .filter-btn:hover,html[data-theme] .friend-btn:not(.accept):hover:not(:disabled){transform:translateY(-1px);border-color:color-mix(in srgb,var(--purple) 42%,var(--line));box-shadow:0 6px 16px color-mix(in srgb,var(--purple) 10%,transparent)}
html[data-theme] .theme-btn,html[data-theme] .icon-btn,html[data-theme] .profile-chip{border-radius:14px;transition:transform .18s,background-color .18s,border-color .18s,color .18s,box-shadow .18s}
html[data-theme] .theme-btn:hover,html[data-theme] .icon-btn:hover,html[data-theme] .profile-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--purple) 35%,var(--line));background:var(--accent-soft);color:var(--purple);box-shadow:0 7px 18px color-mix(in srgb,var(--purple) 10%,transparent)}
html[data-theme] .side-nav a,html[data-theme] .mobile-nav a,html[data-theme] .theme-menu button,html[data-theme] .search-chat,html[data-theme] .post-actions button,html[data-theme] .story button,html[data-theme] .avatar-choice{border-radius:13px;transition:transform .18s,background-color .18s,color .18s,border-color .18s,box-shadow .18s}
html[data-theme] .side-nav a:hover:not(.active),html[data-theme] .theme-menu button:hover,html[data-theme] .search-chat:hover,html[data-theme] .post-actions button:hover{background:var(--hover);color:var(--purple)}
html[data-theme] .mobile-nav a:hover,html[data-theme] .mobile-nav a:focus-visible{background:var(--hover)!important;color:var(--purple)}
html[data-theme] .card,html[data-theme] .side-profile,html[data-theme] .side-nav,html[data-theme] .suggestions,html[data-theme] .welcome-card,html[data-theme] .post,html[data-theme] .reel-tile{transition:border-color .22s,box-shadow .22s,transform .22s}
@media(hover:hover){html[data-theme] .post:hover,html[data-theme] .reel-tile:hover,html[data-theme] .suggestion:hover{transform:translateY(-4px);box-shadow:var(--card-lift-shadow);border-color:color-mix(in srgb,var(--purple) 27%,var(--line))}html[data-theme] .story:not(.add-story):hover button,html[data-theme] .avatar-choice:hover{transform:translateY(-3px);box-shadow:0 9px 20px color-mix(in srgb,var(--purple) 16%,transparent)}}
html[data-theme] .filter-btn{backdrop-filter:blur(8px)}
html[data-theme] .more-btn:hover{background:var(--hover);color:var(--purple);border-radius:10px}
@media(prefers-reduced-motion:reduce){html[data-theme] .primary-btn,html[data-theme] .friend-btn,html[data-theme] .theme-btn,html[data-theme] .icon-btn,html[data-theme] .profile-chip,html[data-theme] .card,html[data-theme] .post,html[data-theme] .reel-tile{transition:none}}
html[data-theme] .stories .story button{border-radius:50%}
.language-btn{min-width:38px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer}.language-btn:hover,.settings-quick:hover{background:var(--accent-soft);color:var(--purple)}.settings-quick{font-size:17px}.settings-card{padding:20px;margin:0 0 14px;border-radius:17px}.settings-card h2{font-size:17px;margin:0 0 13px;color:var(--ink)}.settings-card h3{font-size:14px;margin:20px 0 10px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink)}.setting-row select,.block-add input{min-width:140px;max-width:55%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--field);color:var(--ink)}.setting-row input[type=checkbox]{width:19px;height:19px;accent-color:var(--purple)}.settings-note,.settings-card>p{font-size:12px;line-height:1.7;color:var(--muted)}#saveSettings{min-height:40px;padding:0 18px;margin-top:8px}.block-add{display:flex;gap:8px}.block-add .outline-btn{padding:0 16px}.blocked-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}.unblock-btn{border:0;background:transparent;color:var(--purple);font-weight:600;cursor:pointer}.settings-card .logout-action{margin-top:14px}
html[dir=ltr] .settings-card{text-align:left}html[dir=ltr] .setting-row{direction:ltr}html[dir=ltr] .search-box{direction:ltr}html[dir=ltr] .topbar{direction:ltr}html[dir=ltr] .side-nav{text-align:left}html[dir=ltr] .profile-modal-card h2{text-align:left}
@media(max-width:700px){.settings-card{padding:16px}.language-btn{min-width:34px;height:32px;padding:0 7px}.settings-card h2{font-size:15px}.setting-row{font-size:12px}.block-add input{min-width:0;flex:1}}

/* Keep controls and dialogs clear of one another on narrow screens. */
.topbar{min-width:0}.top-actions{min-width:0;flex:0 1 auto;display:flex;align-items:center;gap:clamp(5px,1vw,12px)}
.brand{flex:0 0 auto}.search-box{min-width:0;flex:1 1 220px}.top-actions>*{flex:0 0 auto}
.modal{padding:16px;overflow-y:auto;place-items:center}.modal-card{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.profile-modal-card{width:min(500px,calc(100vw - 28px));padding:clamp(17px,4vw,24px)}
.avatar-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px}
.avatar-choice{min-width:0;min-height:66px;display:grid;place-items:center;border:1px solid var(--line);border-radius:15px;padding:7px;cursor:pointer}
.avatar-choice img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.avatar-choice[aria-pressed="true"]{outline:2px solid var(--purple);outline-offset:2px}
.profile-edit-avatar{min-width:0;flex-wrap:wrap}.profile-edit-avatar span{flex:1 1 180px}
.settings-card,.setting-row,.friends-search,.chat-layout,.chat-thread,.message-compose{min-width:0;max-width:100%}
.setting-row{gap:12px;flex-wrap:wrap}.setting-row>span{flex:1 1 180px}.setting-row select{max-width:100%}
.message-compose input,.friends-search input{min-width:0}
@media(max-width:700px){
 .topbar{gap:8px;padding-inline:10px}.brand{font-size:15px;min-width:0;max-width:42vw}.brand>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-mark{flex:0 0 auto}
 .top-actions{gap:5px}.top-actions .theme-btn span,.top-actions .profile-chip span,.top-actions .profile-chip b{display:none}.top-actions .theme-btn{padding:6px}.top-actions .icon-btn,.top-actions .language-btn{width:32px;min-width:32px;height:32px;padding:0;display:grid;place-items:center}.profile-chip img{width:29px;height:29px}.notification-btn{display:none}
 .modal{padding:10px}.modal-card{width:min(500px,100%);max-height:calc(100dvh - 20px);padding:19px 15px}.profile-modal-card{width:min(500px,100%)}
 .avatar-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.avatar-choice{min-height:58px;padding:5px}.avatar-choice img{width:42px;height:42px}
 .chat-layout{grid-template-columns:minmax(0,1fr)}.chat-list,.chat-thread{min-width:0;width:100%}.message-compose{gap:6px;padding-inline:8px}.message-compose input{flex:1}
 .mobile-nav{padding-bottom:calc(5px + env(safe-area-inset-bottom));height:calc(63px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.topbar{padding-inline:7px}.brand{max-width:34vw}.top-actions{gap:3px}.top-actions .language-btn{font-size:11px}.avatar-choices{gap:6px}.mobile-nav a{min-width:39px}}
.account-setting-info{display:grid;gap:9px;margin:14px 0}.account-setting-info p{margin:0}.account-setting-info small{font-size:11px;color:var(--muted)}