/* Shared material and motion system. Content stays readable; controls carry glass. */
:root {
  --g-canvas:#f2f4f8; --g-text:#20232b; --g-secondary:#626875;
  --g-panel:rgba(255,255,255,.76); --g-solid:#fff; --g-well:#eef0f5;
  --g-edge:rgba(255,255,255,.86); --g-divider:rgba(40,49,71,.10);
  --g-shadow:0 8px 32px rgba(35,47,75,.07),inset 0 1px 0 rgba(255,255,255,.8);
  --g-ease:cubic-bezier(.2,.8,.2,1); --g-spring:cubic-bezier(.2,.9,.25,1.12);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body.theme-dark {
  --g-canvas:#101218; --g-text:#f0f2f8; --g-secondary:#a3a9b6;
  --g-panel:rgba(33,37,47,.84); --g-solid:#20242d; --g-well:#171a22;
  --g-edge:rgba(255,255,255,.12); --g-divider:rgba(220,227,255,.10);
  --g-shadow:0 8px 32px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.07);
}
body:is(.theme-dark, :not(.theme-dark)) {background:var(--g-canvas);color:var(--g-text);-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
button {transition:background .2s var(--g-ease),box-shadow .2s var(--g-ease),transform .32s var(--g-spring),color .2s ease;border-radius:14px;touch-action:manipulation}
button:not(:disabled):active {transform:scale(.97);transition-duration:80ms}
a {text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible {outline:3px solid #4287ed;outline-offset:4px}
body:is(.theme-dark, :not(.theme-dark)) :is(input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select,textarea) {border-radius:13px;border-color:var(--g-divider);background:var(--g-well);color:var(--g-text);box-shadow:none;transition:border-color .2s,box-shadow .2s}
body:is(.theme-dark, :not(.theme-dark)) :is(input,select,textarea):focus-visible {outline:0;border-color:#528ff0;box-shadow:0 0 0 3px #528ff022}
input[type=checkbox] {accent-color:#3478ec}
body:is(.theme-dark, :not(.theme-dark)) .brand {color:var(--g-text);letter-spacing:-.9px;font-weight:750}
body:is(.theme-dark, :not(.theme-dark)) .primary {border:1px solid #ffffff24;border-radius:999px;padding-inline:22px;box-shadow:inset 0 1px 0 #ffffff30,0 4px 12px #12365614;color:#fff;background:var(--green,#3478ed)}
body:is(.theme-dark, :not(.theme-dark)) .primary:hover {filter:brightness(1.06)}
body:is(.theme-dark, :not(.theme-dark)) :is(.soft-button,.call-button,.composer-tool,.close-button) {background:var(--g-panel);color:var(--g-text);border:1px solid var(--g-divider);border-radius:999px;box-shadow:inset 0 1px 0 var(--g-edge)}
body:is(.theme-dark, :not(.theme-dark)) :is(.soft-button,.call-button,.composer-tool):hover {background:var(--g-solid)}
body:is(.theme-dark, :not(.theme-dark)) :is(.sidebar,.social-header,.chat-header,.composer-wrap,.modal-card,.incoming-card,.account-bar) {background:var(--g-panel);border-color:var(--g-divider);color:var(--g-text)}
@supports (backdrop-filter:blur(20px)) {
  body:is(.theme-dark, :not(.theme-dark)) :is(.sidebar,.social-header,.chat-header,.composer-wrap,.modal-card,.incoming-card),.public-glass-header {backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
}
/* Desktop shell, with one clear hierarchy instead of nested boxes. */
body:is(.theme-dark, :not(.theme-dark)) .app {background:var(--g-canvas);grid-template-columns:292px minmax(0,1fr)}
body:is(.theme-dark, :not(.theme-dark)) .sidebar {border-right:1px solid var(--g-divider)}
body:is(.theme-dark, :not(.theme-dark)) .side-top {height:78px;border:0;padding:0 22px}
body:is(.theme-dark, :not(.theme-dark)) .area-tabs {margin:0 14px 12px;padding:5px;border:1px solid var(--g-edge);border-radius:999px;background:var(--g-well);box-shadow:inset 0 1px 3px #15214709;gap:3px}
body:is(.theme-dark, :not(.theme-dark)) .area-tab {border-radius:999px;font-size:13px;font-weight:650;color:var(--g-secondary);min-height:42px;transition:background .24s,box-shadow .24s,color .24s,transform .25s var(--g-spring)}
body:is(.theme-dark, :not(.theme-dark)) .area-tab.active {color:var(--g-text);background:var(--g-solid);box-shadow:0 2px 7px #17243b13,inset 0 1px 0 var(--g-edge)}
body:is(.theme-dark, :not(.theme-dark)) .area-tab:hover {background:var(--g-panel)}
body:is(.theme-dark, :not(.theme-dark)) .community-side {padding:20px 22px}
body:is(.theme-dark, :not(.theme-dark)) .community-side-intro strong {color:var(--g-text);font-size:23px;letter-spacing:-.8px}
body:is(.theme-dark, :not(.theme-dark)) .community-side-intro p {font-size:13px;color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .community-side .section-head h2 {font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .account-bar {border-top:1px solid var(--g-divider);background:transparent}
body:is(.theme-dark, :not(.theme-dark)) .drive-launcher {margin:12px;border-radius:19px;border-color:var(--g-divider);background:var(--g-panel)}
body:is(.theme-dark, :not(.theme-dark)) :is(.social-panel,.chat-panel,.message-feed) {background:transparent;color:var(--g-text)}
body:is(.theme-dark, :not(.theme-dark)) .social-header {min-height:104px;border-bottom:1px solid var(--g-divider);padding-inline:clamp(24px,4vw,64px)}
body:is(.theme-dark, :not(.theme-dark)) .social-header h1 {font-size:34px;font-weight:750;letter-spacing:-1.3px}
body:is(.theme-dark, :not(.theme-dark)) .social-eyebrow {color:var(--g-secondary);font-weight:500}
body:is(.theme-dark, :not(.theme-dark)) .social-content {max-width:1120px;padding:32px clamp(24px,4vw,64px) 60px}
body:is(.theme-dark, :not(.theme-dark)) .social-welcome {background:var(--g-panel);border:1px solid var(--g-edge);border-radius:24px;box-shadow:var(--g-shadow);padding:24px 26px;margin-bottom:40px;color:var(--g-text)}
body:is(.theme-dark, :not(.theme-dark)) .social-welcome p {color:var(--g-secondary);font-size:13px;max-width:610px}
body:is(.theme-dark, :not(.theme-dark)) .social-introduction h2 {font-size:clamp(27px,3vw,38px);line-height:1.15;font-weight:720;letter-spacing:-1.25px;max-width:650px}
body:is(.theme-dark, :not(.theme-dark)) .social-introduction p {margin-top:14px;color:var(--g-secondary);line-height:1.65}
body:is(.theme-dark, :not(.theme-dark)) :is(.community-card,.person-card,.community-detail,.post-card) {border-radius:24px;background:var(--g-solid);border:1px solid var(--g-divider);box-shadow:0 4px 18px #1d2b4804;color:var(--g-text)}
body:is(.theme-dark, :not(.theme-dark)) .community-card {padding:26px;transition:transform .3s var(--g-ease),box-shadow .3s var(--g-ease)}
body:is(.theme-dark, :not(.theme-dark)) :is(.community-card,.person-card) p {color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .social-empty {border:0;border-radius:26px;padding:48px 28px;background:var(--g-panel);box-shadow:inset 0 1px 0 var(--g-edge);color:var(--g-text)}
body:is(.theme-dark, :not(.theme-dark)) .social-empty p {color:var(--g-secondary);max-width:420px;margin-inline:auto}
body:is(.theme-dark, :not(.theme-dark)) .interest-chip {border-radius:999px;background:var(--g-well);color:var(--g-secondary);padding:7px 12px}
body:is(.theme-dark, :not(.theme-dark)) .feed-filters {gap:10px;margin-block:26px}
body:is(.theme-dark, :not(.theme-dark)) .feed-filters input,body:is(.theme-dark, :not(.theme-dark)) .feed-filters select {background:var(--g-solid);border-radius:14px}
body:is(.theme-dark, :not(.theme-dark)) :is(.conversation,.friend-row,.request-row) {width:calc(100% - 16px);border-radius:15px;margin-inline:8px;transition:background .2s,transform .2s var(--g-ease)}
body:is(.theme-dark, :not(.theme-dark)) .conversation:hover,body:is(.theme-dark, :not(.theme-dark)) .friend-row:hover {transform:none;background:var(--g-well)}
body:is(.theme-dark, :not(.theme-dark)) .conversation.active {background:var(--green-pale);box-shadow:none}
body:is(.theme-dark, :not(.theme-dark)) .message p {border-radius:19px;padding:12px 16px;background:var(--g-solid);color:var(--g-text);box-shadow:0 1px 2px #17233308}
body:is(.theme-dark, :not(.theme-dark)) .message.mine p {background:var(--green);color:#fff;border-radius:19px 19px 5px 19px}
body:is(.theme-dark, :not(.theme-dark)) .composer-wrap {border:0;padding:12px 22px 18px}
body:is(.theme-dark, :not(.theme-dark)) .composer {border-radius:24px;border:1px solid var(--g-divider);background:var(--g-solid);box-shadow:0 4px 20px #14233c08}
body:is(.theme-dark, :not(.theme-dark)) .composer textarea {background:transparent}
body:is(.theme-dark, :not(.theme-dark)) .send-button {border-radius:50%}
body:is(.theme-dark, :not(.theme-dark)) .modal-layer {background:rgba(14,22,40,.30);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
body:is(.theme-dark, :not(.theme-dark)) :is(.modal-card,.incoming-card) {border:1px solid var(--g-edge);border-radius:28px;box-shadow:0 30px 90px #08142d30,inset 0 1px 0 var(--g-edge);padding:30px}
body:is(.theme-dark, :not(.theme-dark)) .modal-card h2 {letter-spacing:-.7px}
body:is(.theme-dark, :not(.theme-dark)) .modal-head p,body:is(.theme-dark, :not(.theme-dark)) .setting-help {color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .settings-section {border-color:var(--g-divider)}
body:is(.theme-dark, :not(.theme-dark)) .beginner-welcome {width:min(460px,calc(100vw - 32px))}
body:is(.theme-dark, :not(.theme-dark)) .beginner-welcome::backdrop {background:#111b334d;backdrop-filter:blur(6px)}
body:is(.theme-dark, :not(.theme-dark)) .toast {border-radius:999px;background:var(--g-panel);border:1px solid var(--g-edge);color:var(--g-text);box-shadow:var(--g-shadow);backdrop-filter:blur(20px)}
/* Sign in is a composed two-column view, not a stack of marketing cards. */
body:is(.theme-dark, :not(.theme-dark)) .auth-view {background:radial-gradient(ellipse at 12% 8%,#b9dce977,transparent 55%),radial-gradient(ellipse at 85% 92%,#d9c9f050,transparent 50%),var(--g-canvas);padding:clamp(24px,5vw,72px);gap:clamp(30px,6vw,110px);grid-template-columns:minmax(0,1fr) minmax(360px,470px)}
body:is(.theme-dark, :not(.theme-dark)) .auth-story {padding:30px clamp(10px,3vw,48px);background:none;color:var(--g-text)}
body:is(.theme-dark, :not(.theme-dark)) .auth-story h1 {font-size:clamp(48px,6vw,82px);font-weight:730;letter-spacing:-.065em;line-height:1.02}
body:is(.theme-dark, :not(.theme-dark)) .auth-story p {color:var(--g-secondary);font-size:19px;max-width:410px}
body:is(.theme-dark, :not(.theme-dark)) .story-mark {width:60px;height:60px;border-radius:17px;margin-bottom:44px;box-shadow:0 8px 24px #2247591c}
body:is(.theme-dark, :not(.theme-dark)) .auth-story ul {color:var(--g-secondary);font-size:13px;font-weight:500;gap:14px}
body:is(.theme-dark, :not(.theme-dark)) .auth-story li::before {color:var(--green)}
body:is(.theme-dark, :not(.theme-dark)) .auth-card {width:100%;padding:34px;background:var(--g-panel);border:1px solid var(--g-edge);border-radius:30px;box-shadow:var(--g-shadow);backdrop-filter:blur(24px)}
body:is(.theme-dark, :not(.theme-dark)) .auth-card h1 {font-size:30px;letter-spacing:-1px}
body:is(.theme-dark, :not(.theme-dark)) .auth-card>p {font-size:14px;margin-bottom:20px}
body:is(.theme-dark, :not(.theme-dark)) .auth-card .fine-print {font-size:11px;line-height:1.7;color:var(--g-secondary)!important}
body:is(.theme-dark, :not(.theme-dark)) .auth-card .public-summary {font-size:13px!important;color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .auth-card label {color:var(--g-secondary)}
body:is(.theme-dark, :not(.theme-dark)) .auth-card input {height:50px;padding-inline:15px}
body:is(.theme-dark, :not(.theme-dark)) .auth-card .primary {min-height:49px}
body:is(.theme-dark, :not(.theme-dark)) .auth-language-picker {margin-bottom:26px}
/* Motion has a short settling curve and no continuously moving decoration. */
@keyframes glass-arrive {from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes glass-sheet {from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes glass-leave {to{opacity:0;transform:translateY(8px) scale(.97)}}
body:is(.theme-dark, :not(.theme-dark)) .modal-layer:not(.hidden):not(.is-closing) .modal-card,body:is(.theme-dark, :not(.theme-dark)) dialog[open] {animation:glass-sheet .38s var(--g-spring) both}
body:is(.theme-dark, :not(.theme-dark)) .modal-layer.is-closing .modal-card {animation:glass-leave .18s ease both}
body:is(.theme-dark, :not(.theme-dark)) .modal-card :is(form,.settings-section) {animation:none}
body:is(.theme-dark, :not(.theme-dark)) .presence:not(.offline) {animation:none}
body:is(.theme-dark, :not(.theme-dark)) .social-introduction,body:is(.theme-dark, :not(.theme-dark)) .social-welcome,body:is(.theme-dark, :not(.theme-dark)) .community-grid>:nth-child(-n+6) {animation:glass-arrive .38s var(--g-ease) both}
body:is(.theme-dark, :not(.theme-dark)) .community-grid>:nth-child(2) {animation-delay:35ms}body:is(.theme-dark, :not(.theme-dark)) .community-grid>:nth-child(3) {animation-delay:65ms}body:is(.theme-dark, :not(.theme-dark)) .community-grid>:nth-child(4) {animation-delay:95ms}
@media(hover:hover) and (pointer:fine) {body:is(.theme-dark, :not(.theme-dark)) .community-card:hover {transform:translateY(-3px);box-shadow:0 12px 32px #14243e0d}body:is(.theme-dark, :not(.theme-dark)) .primary:hover {box-shadow:0 6px 18px #18345320}}
@media(max-width:900px){body:is(.theme-dark, :not(.theme-dark)) .app{grid-template-columns:260px minmax(0,1fr)}body:is(.theme-dark, :not(.theme-dark)) .auth-view{gap:28px;padding:30px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}body:is(.theme-dark, :not(.theme-dark)) .auth-story{padding:20px 0}}
@media(max-width:700px){body:is(.theme-dark, :not(.theme-dark)) .app{grid-template-columns:1fr}body:is(.theme-dark, :not(.theme-dark)) .auth-view{grid-template-columns:1fr;padding:28px 20px;gap:24px}body:is(.theme-dark, :not(.theme-dark)) .auth-story{display:none}body:is(.theme-dark, :not(.theme-dark)) .auth-card{max-width:470px;padding:28px;border-radius:28px}body:is(.theme-dark, :not(.theme-dark)) .mobile-brand{display:flex;margin-bottom:24px}body:is(.theme-dark, :not(.theme-dark)) .social-header{min-height:94px;padding:20px}body:is(.theme-dark, :not(.theme-dark)) .social-content{padding:24px 18px 45px}body:is(.theme-dark, :not(.theme-dark)) .social-welcome{border-radius:22px;padding:20px;margin-bottom:30px}body:is(.theme-dark, :not(.theme-dark)) .area-tabs{margin:4px 14px 10px}body:is(.theme-dark, :not(.theme-dark)) :is(.modal-card,.incoming-card){padding:24px;border-radius:25px}body:is(.theme-dark, :not(.theme-dark)) .social-introduction h2{font-size:29px}body:is(.theme-dark, :not(.theme-dark)) .sidebar{border-color:var(--g-divider)}}
@media(prefers-reduced-transparency:reduce){:root{--g-panel:#fff}body.theme-dark{--g-panel:#242832}body:is(.theme-dark, :not(.theme-dark)) :is(.sidebar,.social-header,.chat-header,.composer-wrap,.modal-card,.auth-card){backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){:root{--g-divider:#8c93a2;--g-secondary:#3c4250;--g-panel:#fff}body.theme-dark{--g-divider:#858d9e;--g-secondary:#c6cbd5;--g-panel:#20242d}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

body a:not(.primary){color:var(--green-dark,#3a7cd4)}
/* Tint follows the selected accent without recoloring entire surfaces. */
body:is(.theme-dark,:not(.theme-dark))[data-accent] .auth-story{background:transparent;color:var(--g-text)}
body:is(.theme-dark,:not(.theme-dark))[data-accent] .auth-view{background:radial-gradient(ellipse at 10% 5%,#7bb4ed24,transparent 55%),radial-gradient(ellipse at 90% 95%,#a994dc20,transparent 50%),var(--g-canvas)}
body:is(.theme-dark,:not(.theme-dark)) .app{background:radial-gradient(ellipse at 95% 0%,#82a8ea12,transparent 65%),var(--g-canvas)}
body:is(.theme-dark,:not(.theme-dark))[data-accent] .social-header{background:var(--g-panel);color:var(--g-text)}
body:is(.theme-dark,:not(.theme-dark))[data-accent] .drive-launcher{border-radius:20px;background:var(--g-panel);border-color:var(--g-divider)}
body:is(.theme-dark,:not(.theme-dark))[data-accent] .auth-story p,body:is(.theme-dark,:not(.theme-dark))[data-accent] .auth-story ul{color:var(--g-secondary)}
body.theme-dark .auth-card a{color:#a8c9f5}body.theme-dark .auth-card .link-button{color:#a8c9f5}
@media(max-width:600px){body:is(.theme-dark,:not(.theme-dark)) .social-section-head{flex-wrap:wrap;align-items:flex-start;gap:12px}body:is(.theme-dark,:not(.theme-dark)) .social-section-head h2{flex:1 0 100%;margin:0}body:is(.theme-dark,:not(.theme-dark)) .social-section-head .setting-help{flex:1 1 150px;min-width:0;margin:0}}
#conversation-actions #chat-play-game{display:inline-flex;align-items:center;min-height:44px;padding:9px 16px;border:1px solid var(--g-divider);border-radius:999px;background:var(--g-panel);color:var(--g-text);text-decoration:none;font-size:14px}#conversation-actions #chat-play-game[hidden]{display:none}
/* Regression fixes for compact viewports and native controls. */
body.theme-dark{color-scheme:dark}body:not(.theme-dark){color-scheme:light}
body:is(.theme-dark,:not(.theme-dark)) .modal-card{max-width:100%;min-width:0}
#mfa-secret,#mfa-recovery-codes{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
@media(max-width:720px){
 .app.social-mode .chat-mode-picker{display:none}
 body:is(.theme-dark,:not(.theme-dark)) .admin-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:8px}
 body:is(.theme-dark,:not(.theme-dark)) .admin-metric{min-width:0}
 body:is(.theme-dark,:not(.theme-dark)) .admin-tabs{position:static;flex-wrap:wrap;gap:4px 10px;overflow:visible}
 body:is(.theme-dark,:not(.theme-dark)) .admin-tab{min-height:44px;flex:1 1 auto;padding:10px 8px}
 body:is(.theme-dark,:not(.theme-dark)) :is(input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]),select,textarea){font-size:max(16px,1em)}
 body:is(.theme-dark,:not(.theme-dark)) .auth-view{min-height:100svh}
 body:is(.theme-dark,:not(.theme-dark)) .chat-mode-picker{flex:none;padding:10px 16px}
 body:is(.theme-dark,:not(.theme-dark)) .chat-mode-picker p{font-size:11px;line-height:1.5}
}