/* Open Orbit — the approved blue / teal / midnight identity.
   Shared chrome establishes the brand; content and personal profile palettes stay independent.
   Media dimensions, privacy controls and scrolling/viewport behavior are intentionally inherited. */
:root {
  --brand-blue:#2457f5; --brand-teal:#2bd4c7; --brand-navy:#142b47;
  --brand-blue-soft:#edf2ff; --brand-outline:#c6d3f5;
  --bg:#f5f7fc; --panel:#fff; --ink:#142b47; --muted:#61718a;
  --line:#dfe6f0; --accent:#2457f5; --soft:#edf2ff; --scene:#e3edff;
  --family:#965524; --friends:#7044be; --work:#176f65; --world:#2457f5; --heart:#a53e6d;
  --media-mat:#eef2f7; --on-accent:#fff;
  --shadow:0 3px 16px #142b4705,0 1px 2px #142b4703;
  --sidebar:232px;
}
:root[data-space=world]{--bg:#f5f7fc;--ink:#142b47;--muted:#61718a;--line:#dfe6f0;--accent:#2457f5;--soft:#edf2ff;--scene:#e3edff}
:root[data-space=family]{--bg:#faf8f4;--ink:#3a302b;--muted:#786959;--line:#e8e1d7;--accent:#965524;--soft:#f8eee1;--scene:#f1e1c9}
:root[data-space=friends]{--bg:#f8f6fd;--ink:#32294b;--muted:#746582;--line:#e5dff1;--accent:#7044be;--soft:#f1ebfb;--scene:#e8dafa}
:root[data-space=work]{--bg:#f3f7f8;--ink:#203a42;--muted:#60767b;--line:#dce6e8;--accent:#176f65;--soft:#e9f3f0;--scene:#d5eae5}
:root[data-space=heart]{--bg:#fcf7fa;--ink:#432b40;--muted:#7c6475;--line:#ecdfe7;--accent:#a53e6d;--soft:#faebf2;--scene:#f3dce8}
:root[data-theme=dark]{
  --bg:#0d1727;--panel:#152338;--ink:#edf4ff;--muted:#b0c0d6;--line:#30435d;
  --accent:#aac3ff;--soft:#203554;--scene:#294669;--media-mat:#0c1523;--on-accent:#13243e;
  --brand-blue-soft:#203554;--brand-outline:#4a6490;
  --family:#e9ba91;--friends:#d0b7ff;--work:#99ddcb;--world:#aac3ff;--heart:#f3b6d1;
  --shadow:0 4px 20px #00000012;
}
:root[data-theme=dark][data-space=world]{--bg:#0d1727;--panel:#152338;--ink:#edf4ff;--muted:#b0c0d6;--line:#30435d;--accent:#aac3ff;--soft:#203554;--scene:#294669}
:root[data-theme=dark][data-space=family]{--bg:#1c1917;--panel:#29241f;--ink:#fbf1e6;--muted:#d0bda9;--line:#4b3f32;--accent:#e9ba91;--soft:#3b3025;--media-mat:#191613}
:root[data-theme=dark][data-space=friends]{--bg:#1a1728;--panel:#272239;--ink:#f6f0ff;--muted:#c7badf;--line:#483c60;--accent:#d0b7ff;--soft:#382d50;--media-mat:#171422}
:root[data-theme=dark][data-space=work]{--bg:#111e24;--panel:#1b2c32;--ink:#edf8f5;--muted:#b0c9c7;--line:#345057;--accent:#99ddcb;--soft:#2a403f;--media-mat:#101d22}
:root[data-theme=dark][data-space=heart]{--bg:#221a24;--panel:#302532;--ink:#fff0f7;--muted:#d7bbce;--line:#533e50;--accent:#f3b6d1;--soft:#433044;--media-mat:#1e1720}

/* Round, confident branding; calmer typography where people read and write. */
body{font-family:'Manrope','Noto Sans Devanagari','Noto Sans Arabic',sans-serif;letter-spacing:0;line-height:1.6}
h1,h2,h3{font-family:inherit;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
h4,.field,.button{letter-spacing:-.01em}
button,input,textarea,select{font-family:inherit}
.brand{gap:10px;isolation:isolate}
.brand-symbol{width:36px;height:40px;object-fit:contain;filter:none;flex:none}
.brand-word{display:inline-flex;align-items:center;font-weight:800;letter-spacing:-.055em;color:var(--brand-navy)}
.brand-word>span{font-weight:800}
.brand-word .brand-word-text{display:none}
.brand-wordmark{display:block;width:134px;height:30px;aspect-ratio:1075/234;object-fit:contain;flex:none}
.initial-brand .brand-wordmark{width:clamp(170px,50vw,268px);height:auto}
.opening-lockup .brand-wordmark{width:clamp(160px,55vw,460px);height:auto}
.appearance-preview .brand-wordmark{width:180px;height:auto}
.auth-identity .brand-wordmark{width:min(210px,56vw);height:auto}
:root[data-theme=dark] .brand-wordmark{content:url('/assets/brand/wordmark-light.svg?v=approved-20261016')}
:root[data-theme=dark] .brand-symbol{content:url('/assets/brand/mark-light.svg')}
.sidebar .brand-wordmark{content:url('/assets/brand/wordmark-light.svg?v=approved-20261016')}
.sidebar .brand-symbol{content:url('/assets/brand/mark-light.svg');width:33px;height:37px}

/* Compact branded shell; there is no decorative banner above the feed. */
.sidebar{background:var(--brand-navy);border:0;padding:27px 18px 18px;--ink:#f3f7ff;--muted:#b2c5df;--line:#304b6c;--soft:#233f60;--panel:#1b3656}
.sidebar .brand{margin-inline:4px}
.sidebar .brand-caption{font-size:.71rem;line-height:1.7;max-width:180px;margin:11px 4px 28px;color:#b2c5df}
.sidebar .side-label{color:#a7bdd9;font-weight:700;letter-spacing:.14em;font-size:.64rem;padding-inline:11px}
.sidebar .space-nav{gap:4px;padding-bottom:18px}
.sidebar .space-link{min-height:46px;border-radius:12px;padding:8px 12px;gap:9px;color:#bed0e4;font-weight:650;border:1px solid transparent}
.sidebar .space-link .space-icon,.sidebar .space-link .icon.small{color:inherit}
.sidebar .space-link.selected{background:#29486e;color:#fff;border-color:#355780;box-shadow:inset 3px 0 var(--brand-teal)}
.sidebar .space-link.selected .space-icon{color:#89e7dc}
.sidebar .space-link:hover,.sidebar .sidebar-settings:hover,.sidebar .circle-link:hover{background:#223f62;color:#fff}
.sidebar .sidebar-settings{color:#c0d2e6;font-size:.76rem;border-radius:11px;min-height:41px;padding-inline:12px}
.sidebar .account{background:#1c3656;border:1px solid #335172;border-radius:14px;padding:12px;gap:10px}
.sidebar .account strong{color:#fff;font-size:.78rem;line-height:1.5}
.sidebar .account small,.sidebar .connection-note{color:#b0c6df;font-size:.65rem}
.sidebar .account .avatar-initials{background:#2d527e;color:#fff}
.sidebar .circle-link{color:#c7d8ea;min-height:43px;border-radius:11px}
.sidebar .circle-link.selected{background:#28496e;color:#fff}
.sidebar .circle-num{color:#b3cce8}
.sidebar .side-heading .icon-button{color:#c3d5eb}
.sidebar .connection-note{margin-top:5px;min-height:33px}
.topbar{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 96%,transparent);padding-inline:28px;gap:18px;box-shadow:0 1px 0 #2457f503}
.topbar .search-box{height:46px;max-width:470px;border-radius:14px;background:var(--bg);border:1px solid var(--line)}
.topbar .search-box:focus-within{border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-soft)}
.topbar .search-box input{font-size:.83rem;color:var(--ink)}
.topbar .search-box input::placeholder{color:var(--muted);opacity:1}
.top-actions{gap:7px}
.top-actions .mode-top{background:var(--brand-blue-soft);border:1px solid var(--brand-outline);color:var(--world);font-weight:800}
.top-actions>.icon-button[data-action=theme]{background:var(--panel);border-color:var(--line);color:var(--ink)}
.top-actions .inbox-top{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.top-actions .button.primary,.top-actions .auth-link{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue);box-shadow:0 3px 8px #2457f51c}
.quick-spaces{gap:12px;padding-inline:28px;background:var(--panel)}
.quick-spaces button{border-radius:0;min-height:48px;font-size:.77rem;letter-spacing:0;padding-inline:17px}
.quick-spaces button.selected{background:color-mix(in srgb,var(--color) 6%,var(--panel));border-bottom-width:2px}
.content{max-width:1320px;padding:27px 32px 44px}
.two-column{grid-template-columns:minmax(0,720px) minmax(238px,290px);gap:26px}
.page-heading{padding-block:3px 20px;margin-bottom:22px;align-items:center}
.page-heading h1{font-weight:800;font-size:clamp(1.85rem,2.7vw,2.5rem);letter-spacing:-.045em}
.page-heading .eyebrow{color:var(--muted);font-size:.63rem;font-weight:700;letter-spacing:.15em}
.heading-dot{width:8px;height:8px;box-shadow:0 0 0 5px var(--soft)}
.heading-actions .button{background:var(--panel);border:1px solid var(--line);font-size:.77rem;min-height:43px;box-shadow:var(--shadow)}
.button{border-radius:12px;font-weight:750;min-height:43px}
.button.primary{box-shadow:0 3px 8px color-mix(in srgb,var(--accent) 12%,transparent)}
.button.subtle{background:var(--soft);border-color:var(--line)}
.chip{border-radius:11px;font-weight:650}
.text-button{font-weight:650;text-underline-offset:4px}
:is(button,a,input,textarea,select,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sidebar :is(button,a):focus-visible{outline-color:#86e9de}

/* Reading surfaces: precise spacing and no unnecessary decoration on posts. */
.card,.rail-card,.composer-card,.post{border-radius:19px;border-color:var(--line);box-shadow:var(--shadow)}
.post{margin-bottom:24px}
.post-header{padding:20px 22px 12px}
.author strong{font-weight:800;font-size:.91rem;line-height:1.45}
.author small{font-size:.72rem;line-height:1.6;color:var(--muted)}
.post-body{padding:2px 22px 18px}
.post-body>p{font-size:.96rem;line-height:1.8;color:var(--ink);letter-spacing:0}
.post-stats{padding:13px 22px;font-size:.74rem;line-height:1.6}
.post-actions{margin-inline:16px;padding:6px 0;gap:6px}
.post-actions>button{min-height:45px;font-size:.78rem;border-radius:10px}
.post-actions .is-liked{color:var(--heart)}
.post-topic{font-size:.71rem}
.composer-card{padding:0;overflow:hidden}
.composer-main{padding:17px 18px;gap:12px}
.composer-main>button:not(.audience-compact){border-radius:13px;background:var(--bg);font-size:.86rem;min-height:46px}
.composer-tools{padding:0 14px 13px;margin-top:0;gap:7px;border-top:0}
.composer-tool{font-size:.73rem;min-height:41px;border-radius:10px;background:transparent}
.composer-tool:hover{background:var(--soft)}
.stories-bar{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:17px 18px;gap:18px;box-shadow:var(--shadow)}
.story-ring{border:2px solid var(--accent);padding:3px;background:var(--panel)}
.story-item>span:last-child{font-size:.72rem;line-height:1.5;margin-top:7px}
.feed-tabs{justify-content:center;gap:clamp(12px,2vw,24px);padding:0 0 11px;border-bottom:1px solid var(--line);margin:0 0 22px}
.feed-tabs>button:not(.icon-button){padding:11px 18px;min-height:44px;font-size:.83rem;border:1px solid transparent;border-radius:11px;font-weight:700}
.feed-tabs>button.active{border-color:var(--line);background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.topic-chips{gap:9px}
.topic-chips .chip{border-radius:30px;padding-inline:16px;min-height:37px}
.discovery-controls{border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.discovery-orbit{background:var(--brand-blue-soft);color:var(--world);border:1px solid var(--brand-outline)}
.right-rail .rail-card{padding:22px;margin-bottom:19px}
.right-rail .rail-icon{border:1px solid var(--line);background:var(--soft)}
.right-rail h3{font-size:1.03rem;line-height:1.45}
.right-rail .topic-card{background:var(--panel);border-top:3px solid var(--brand-teal)}
.right-rail .topic-card p,.right-rail .topic-card>small{color:var(--muted)}
.main-footer{border-top:1px solid var(--line);font-size:.7rem;line-height:1.7;padding-top:20px;color:var(--muted)}
.main-footer>span{max-width:72%}

/* Distinct spaces use their own useful structures, within one recognizable brand. */
:root[data-space=work] .page-heading{border-bottom:2px solid var(--line)}
:root[data-space=work] .work-dashboard{border-inline-start:3px solid var(--accent);padding-inline-start:16px;margin-bottom:25px}
.work-actions-grid{gap:10px}
.work-actions-grid .work-action-tile{background:var(--panel);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);color:var(--ink);font-weight:750}
.work-action-tile .icon{color:var(--accent)}
.work-action-tile:hover{border-color:var(--accent);background:var(--soft)}
.work-quick-links{gap:9px 16px}
.work-task-card{border-radius:15px;border-inline-start:3px solid var(--line)}
.work-task-card:has(.work-status.in_progress){border-inline-start-color:#5689ec}
.work-task-card:has(.work-status.completed){border-inline-start-color:#48a78a}
.work-task-card:has(.work-status.blocked){border-inline-start-color:#bd8a3f}
.work-task-top{gap:8px}
.work-task-bottom{padding-top:16px;font-variant-numeric:tabular-nums}
:root[data-space=family] .together-reminders{background:var(--soft);border:1px solid var(--line);border-radius:24px;padding:20px 22px}
:root[data-space=family] .together-board{border-top:0;border-inline-start:4px solid var(--accent);background:var(--panel);border-radius:20px}
:root[data-space=family] .together-item{border-radius:20px}
:root[data-space=friends] .friend-circle-chips{gap:11px;padding-block:3px 11px}
:root[data-space=friends] .friend-circle-chips>button{border-radius:30px;border:1px solid var(--line);padding-inline:17px;min-height:43px}
:root[data-space=friends] .together-board{background:var(--panel);border-top:3px solid var(--accent);border-radius:18px}
:root[data-space=heart] .heart-person{border-radius:24px;border-top:3px solid var(--accent);background:var(--panel);box-shadow:var(--shadow)}
:root[data-space=heart] .relationship-card{border-radius:24px;background:linear-gradient(125deg,var(--soft),var(--panel) 75%)}
:root[data-space=heart] .together-reminders{border-inline-start:3px solid var(--accent);padding-inline-start:20px}
.together-heading h2{font-size:clamp(1.5rem,2.2vw,2rem)}
.together-heading p,.together-board p,.together-item>p{line-height:1.8;font-size:.86rem}
.together-tabs{gap:11px}
.together-reactions{gap:7px;flex-wrap:wrap}
.together-comment{border-radius:12px;border:1px solid var(--line);background:var(--bg)}
.explore-launch{background:var(--brand-navy);color:#fff;border:1px solid #254568;border-radius:17px;padding:18px 20px}
.explore-launch small{color:#bed0e5}
.explore-launch>span>.icon{color:var(--brand-teal)}
.interest-tile{border-radius:16px;isolation:isolate}
.discovery-start{padding-top:10px}
.onboarding-number{border-color:var(--line);color:var(--accent);background:var(--panel)}
.event-invitation{border-radius:20px;background:var(--soft);border-color:var(--line)}
.event-invitation h3{color:var(--ink);letter-spacing:-.045em}
.event-invitation p{color:var(--muted)}
.event-invitation>div>.icon{color:var(--accent)}
.empty-state{padding:34px 22px;max-width:560px;margin-inline:auto;line-height:1.75}
.empty-state .empty-icon{background:var(--soft);border:1px solid var(--line);border-radius:19px;color:var(--accent);box-shadow:none}
.empty-state h3{font-size:1.18rem;margin:17px 0 9px}
.empty-state p{font-size:.84rem;line-height:1.8;color:var(--muted);max-width:42ch;margin-inline:auto}

/* Profile frames respect user-selected profile colors and every original photo. */
.identity-page{border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow);overflow:hidden}
.identity-cover:not(.has-cover){background:linear-gradient(115deg,var(--profile-soft,var(--soft)),var(--panel));border-bottom:1px solid var(--line)}
.identity-cover-ribbon{opacity:.09;transform:rotate(-12deg);width:170px;height:190px;top:-20px;inset-inline-end:4%}
.identity-cover>span{color:var(--profile-ink,var(--ink))}
.identity-summary h2{font-weight:800;letter-spacing:-.045em;line-height:1.2}
.identity-headline{font-size:.94rem;line-height:1.65}
.identity-facts,.identity-role{line-height:1.7}
.identity-actions{gap:9px}
.profile-about p,.profile-section-body{line-height:1.85}
.profile-skills{gap:9px}
.profile-skills .chip{border-radius:8px}
.resume-summary,.resume-skills,.resume-group{border-radius:16px;box-shadow:none}
.resume-summary{padding:23px}
.resume-group h3{font-size:1.1rem;font-weight:800}
.resume-jump{gap:9px}
.resume-jump a{border-radius:9px;min-height:40px}
.resume-entries .profile-section{padding-block:22px}
.profile-section .profile-period{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.media-library{gap:18px}
.media-library-item{border-radius:16px;overflow:hidden}
.media-library-item .gallery-caption{background:var(--panel);line-height:1.55}
.person-card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:19px}
.person-profession{min-height:58px}
.person-profession p{line-height:1.55!important}
.person-profession small{line-height:1.6}

/* Dialogs use the same measured typography and comfortable touch targets. */
dialog:not(.call-dialog):not(.group-stage-dialog){border-color:var(--line);border-radius:24px;box-shadow:0 24px 90px #07172d38}
dialog::backdrop{background:#081b365c;backdrop-filter:blur(9px)}
.dialog-head{padding:20px 25px;border-color:var(--line);background:var(--panel)}
.dialog-head h2{font-size:1.18rem;font-weight:800;letter-spacing:-.035em;line-height:1.4}
.dialog-head>.icon-button{width:42px;height:42px;min-width:42px;border:1px solid var(--line);border-radius:50%;background:var(--bg)}
.dialog-body{padding:24px 25px}
.dialog-body>p{font-size:.86rem;line-height:1.8}
.field{font-size:.79rem;gap:8px;margin-bottom:20px}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:11px;background:var(--panel);font-size:.88rem;min-height:46px;padding:11px 13px}
.field textarea{line-height:1.8}
.field small,.fine-print{line-height:1.7}
.audience-details,.post-extra-fields{border-radius:14px;background:var(--bg);border-color:var(--line)}
.upload-box{border:1px dashed var(--accent);border-radius:16px;background:var(--soft);padding:23px}
.upload-box .icon{color:var(--accent)}
.option-list .button{min-height:48px}
.language-options{gap:10px}
.language-option{border-radius:13px;border-color:var(--line)}
.language-option:has(input:checked){background:var(--brand-blue-soft);border-color:var(--brand-outline)}
.welcome-art{background:linear-gradient(125deg,var(--brand-blue-soft),var(--panel) 65%);color:var(--ink);border-bottom:1px solid var(--line)}
.welcome-art h3{color:var(--ink);letter-spacing:-.045em}
.welcome-art p{color:var(--muted);line-height:1.8}
.welcome-logo .brand-wordmark{width:190px;height:auto}
.initial-loader{background:var(--bg);color:var(--muted)}
.initial-loader strong{color:var(--ink);font-weight:800}
.toast{border:1px solid #ffffff20;background:var(--brand-navy);color:#fff;border-radius:14px;box-shadow:0 12px 40px #142b4726;line-height:1.6}

/* Messaging: legible receipts, quiet transcript, one obvious writing area. */
.messenger-tabs{gap:10px;border-color:var(--line)}
.messenger-tabs .chip{border-radius:10px}
.chat-categories .chip{border-radius:30px;gap:7px}
.inbox-thread{padding:17px 12px;border-radius:12px;margin-block:3px;border-bottom-color:var(--line)}
.inbox-thread:hover{background:var(--soft)}
.inbox-thread.has-unread{background:color-mix(in srgb,var(--brand-blue-soft) 60%,var(--panel))}
.inbox-thread.has-unread strong::before{background:var(--brand-blue)}
.inbox-thread strong{font-size:.89rem;line-height:1.5}
.inbox-thread p{font-size:.77rem;line-height:1.6}
.chat-layout{border-radius:17px}
.chat-contacts{background:var(--bg)}
.chat-contacts>button{border:1px solid transparent}
.chat-contacts>button.active{background:var(--brand-blue-soft);border-color:var(--brand-outline);color:var(--world)}
.chat-heading{background:var(--panel)}
.chat-heading strong{font-weight:800;font-size:.96rem}
.chat-call-actions .icon-button{border-radius:13px;background:var(--brand-blue-soft);border:1px solid var(--brand-outline);color:var(--world);min-width:44px;min-height:44px}
.chat-bubbles{background:color-mix(in srgb,var(--bg) 75%,var(--panel));padding:20px}
.bubble{font-size:.88rem;line-height:1.75;padding:12px 15px;box-shadow:0 1px 3px #142b4705}
.bubble.sent{background:var(--brand-blue);color:#fff;border-radius:17px 17px 5px 17px}
.bubble.received{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:17px 17px 17px 5px}
.bubble .message-meta small{font-size:.72rem;line-height:1.6;font-variant-numeric:tabular-nums;opacity:1}
.bubble.sent .message-meta,.bubble.sent .message-meta small{color:#eff4ff}
.bubble.sent .receipt{color:#eff4ff}
.bubble.sent .receipt.read{color:#b7fff3}
.bubble.received .message-meta small{color:var(--muted)}
.bubble .message-more{color:inherit}
.bubble.sent .message-more:hover{background:#ffffff1c}
.message-form{background:var(--panel);border-top-color:var(--line);gap:8px}
.message-form input[name=body]{border-radius:15px;font-size:16px;background:var(--bg)}
.message-form button[type=submit]{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;border-radius:14px}
.message-form .voice-record-button,.message-form .message-file{border-radius:12px;color:var(--muted)}
.message-form .voice-record-button:hover,.message-form .message-file:hover{background:var(--brand-blue-soft);color:var(--world)}
.voice-note-controls{border:1px solid var(--line);background:var(--soft);border-radius:14px}
.voice-note-controls:has(.fine-print){border:0}
.voice-message audio{accent-color:var(--brand-blue)}
.voice-message-tools{font-size:.75rem}
.message-send-status{border-top:1px solid var(--line);background:var(--brand-blue-soft);color:var(--ink)}
:root[data-theme=dark] .bubble.received{background:var(--panel)}

/* Calls and creative tools: intentional dark stages, with clear controls. */
.call-dialog,.group-stage-dialog{background:#0d1c31;border:1px solid #385271;box-shadow:0 30px 130px #020a18a6}
.call-screen{background:radial-gradient(ellipse at 15% 0,#2457f51c,transparent 55%),#0d1c31}
.call-brand>img{content:url('/assets/brand/mark-light.svg');width:31px;height:35px}
.call-brand>span{font-weight:800;letter-spacing:-.04em}
.call-brand strong{font-weight:800;color:#fff}
.call-brand .call-wordmark{display:block;width:133px;height:29px;object-fit:contain;max-width:100%;filter:none}
.call-status-pill{background:#1b3653;border-color:#355675;color:#d9e9fb;border-radius:30px}
.call-status-pill>i{background:#9bb6ff}
.connected .call-status-pill>i{background:var(--brand-teal)}
.call-stage{background:radial-gradient(ellipse at 75% 70%,#2bd4c70e,transparent 60%),#152c46;border-color:#35516d;border-radius:22px}
.call-avatar{background:#2457f5;border:2px solid #84a5ff;box-shadow:0 0 0 14px #2457f514,0 0 0 29px #2bd4c708;font-weight:750}
.call-person h2{font-weight:800;letter-spacing:-.035em}
.call-person p,.call-help{color:#bdcde2}
.call-controls{background:#12263e;border-color:#2c4765;border-radius:23px;gap:10px;padding:9px}
.call-control{background:#203b5c;border-color:#3b5a7c;border-radius:15px;font-size:.7rem;line-height:1.5;min-height:72px}
.call-control:hover{background:#2c4c72}
.call-control.answer{background:#137d70;border-color:#48b8a3}
.call-control.hangup{background:#bb3f5b;border-color:#e26b83}
.call-control[aria-pressed=true]{background:#e6efff;color:#142b47;border-color:#e6efff}
.call-network{color:#abc0d9}
.local-preview{border-color:#82a5c9;border-radius:14px;background:#203b5c}
.call-remote-label{background:#0c1c32cc}
.group-call-stage{background:#0d1c31}
.group-video-tile{background:#19334f;border-color:#345373}
.group-call-controls button{background:#203b5c;border-color:#3b5a7c}
.group-call-controls button:hover{background:#2c4c72}
.group-call-controls .group-leave{background:#bb3f5b}
.group-live-pill{background:#223f5d;color:#e0eefa}
.group-live-pill i{background:var(--brand-teal)}
.reel-play-stage,.reel-studio-preview,.reel-launch{background:#101e32}
.reel-feed-card{border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow)}
.reel-feed-card>header{padding:17px 20px}
.reel-launch>span:last-child{background:#142b47dc;border-color:#47668b;color:#fff;box-shadow:0 5px 25px #0002}
.reel-watch-controls{padding:12px 17px;gap:10px;background:var(--panel)}
.reel-watch-controls .button{border-radius:10px}
.reel-watch-controls select{border-radius:10px}
.reel-studio-preview{border:1px solid #294864;border-radius:17px}
.reel-studio-toolbar{gap:9px;padding:4px 0}
.reel-clip-list{gap:14px}
.reel-clip-list article{border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:14px;padding:18px;background:var(--bg)}
.reel-clip-heading{margin-bottom:12px}
.reel-clip-heading strong{font-size:.85rem;line-height:1.6}
.reel-trim-controls label{font-size:.73rem;line-height:1.6}
.reel-trim-controls input,.reel-trim-controls select{min-height:44px;border-radius:10px}
.reel-captions-editor input{min-height:44px}
.reel-section-heading h2{font-weight:800}
.fact-check-panel{border-radius:12px;background:var(--bg);box-shadow:none}

@media(min-width:1500px){.content{padding-top:32px}.two-column{gap:32px}.sidebar{padding-top:31px}.topbar{padding-inline:34px}}
@media(max-width:1180px){.content{padding-inline:24px}.two-column{grid-template-columns:minmax(0,1fr)}.topbar{padding-inline:22px;gap:12px}.top-actions{gap:5px}.topbar .search-box{min-width:120px}.top-actions .language-button>span{max-width:80px;overflow:hidden;text-overflow:ellipsis}.quick-spaces{padding-inline:22px}}
@media(max-width:960px) and (min-width:761px){:root{--sidebar:205px}.sidebar{padding-inline:13px}.sidebar .brand{gap:8px}.sidebar .brand-wordmark{width:124px;height:28px}.sidebar .brand-symbol{width:28px;height:34px}.content{padding-inline:20px}.topbar{gap:10px;padding-inline:20px}.top-actions .language-button>span{display:none}.top-actions .top-create>span{display:none}.top-actions .top-create{min-width:42px;width:42px;padding:9px}.topbar .search-box{max-width:none}.top-actions .mode-top{font-size:.72rem;padding:9px}.quick-spaces{gap:5px;padding-inline:18px}.quick-spaces button{padding-inline:10px}}
@media(max-width:760px){
  :root{--sidebar:0px}
  .topbar{padding:11px 13px 12px;gap:10px;background:var(--panel)}
  .topbar .mobile-brand{padding:0;min-width:34px}
  .topbar .mobile-brand .brand-symbol{width:31px;height:35px}
  .mobile-brand .brand-word,.mobile-brand .brand-wordmark{display:none}
  .topbar .top-actions{gap:5px}
  .topbar .search-box{height:45px;border-radius:14px;max-width:none}
  .topbar .search-box input{font-size:16px}
  .topbar .search-box input::placeholder{font-size:.87rem}
  .top-actions .mode-top{min-width:76px;max-width:110px;min-height:42px;font-size:.72rem;padding:9px}
  .top-actions .mode-top>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar:has(.auth-link) .top-actions{flex:1;flex-wrap:wrap;justify-content:flex-end}
  .topbar:has(.auth-link) .mobile-brand{align-self:flex-start;margin-top:4px}
  .top-actions .icon-button,.top-actions .language-button,.top-actions .inbox-top{min-width:42px;min-height:42px;width:42px;border-radius:12px}
  .top-actions>.icon-button[data-action=theme]{width:42px;min-width:42px;height:42px}
  .top-actions>.icon-button[data-action=notifications]{display:inline-flex}
  .quick-spaces{gap:8px;padding:7px 12px;overflow:auto;scrollbar-width:none}
  .quick-spaces button{border-radius:10px;min-height:44px;font-size:.72rem;padding:10px;flex:1 0 auto;min-width:62px;border-bottom:0}
  .quick-spaces button.selected{background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
  .content{padding:19px 13px calc(96px + env(safe-area-inset-bottom))}
  .page-heading{padding-block:0 16px;margin-bottom:19px;gap:12px}
  .page-heading h1{font-size:1.9rem}
  .page-heading .eyebrow{font-size:.6rem;line-height:1.6;letter-spacing:.12em}
  .heading-actions .button{font-size:.7rem;min-height:43px;padding:10px 12px;max-width:158px}
  .card,.post,.composer-card,.rail-card{border-radius:18px}
  .post-header{padding:16px 16px 11px}
  .author strong{font-size:.88rem}.author small{font-size:.7rem}
  .post-body{padding:1px 16px 15px}.post-body>p{font-size:.92rem;line-height:1.75}
  .post-stats{padding:11px 16px;gap:10px;font-size:.72rem}
  .post-actions{margin-inline:10px;gap:3px;padding:6px 0}
  .post-actions>button{font-size:.74rem;min-height:45px;padding-inline:7px}
  .composer-main{padding:14px;gap:10px}.composer-main>button:not(.audience-compact){font-size:.82rem;padding:12px}
  .composer-tools{gap:4px;padding:0 9px 11px}.composer-tool{font-size:.68rem;gap:5px;min-height:42px}
  .stories-bar{padding:14px 13px;gap:16px}.story-item>span:last-child{font-size:.7rem}
  .feed-tabs{gap:9px;justify-content:space-evenly;margin-bottom:20px;padding-bottom:10px}
  .feed-tabs>button:not(.icon-button){font-size:.78rem;padding:10px 12px;flex:0 0 auto}
  .topic-chips{gap:8px}.topic-chips .chip{padding-inline:13px;font-size:.75rem}
  .work-actions-grid{gap:8px}.work-actions-grid .work-action-tile{border-radius:12px}
  .work-quick-links{gap:6px 10px}.work-quick-links .text-button{font-size:.75rem}
  :root[data-space=work] .work-dashboard{padding-inline-start:12px;margin-bottom:22px}
  :root[data-space=family] .together-reminders{padding:17px;border-radius:19px}
  .together-heading h2{font-size:1.6rem}.together-board,.together-item{padding:19px}
  .together-tabs{gap:8px}.together-tabs .chip{padding-inline:15px;min-height:44px}
  .identity-page{border-radius:19px}.identity-summary h2{font-size:1.85rem}.identity-headline{font-size:.88rem}
  .identity-actions .button{min-height:42px;font-size:.72rem}.resume-summary{padding:19px}
  .empty-state{padding:30px 19px}.empty-state h3{font-size:1.14rem}
  .main-footer{font-size:.67rem;padding-top:18px}
  dialog:not(.call-dialog):not(.group-stage-dialog):not(.messenger-dialog){border-radius:20px}
  .dialog-head{padding:16px 17px}.dialog-head h2{font-size:1.12rem}.dialog-head>.icon-button{width:40px;height:40px;min-width:40px}
  .dialog-body{padding:20px 17px}.field input,.field select,.field textarea{font-size:16px;min-height:46px}
  .messenger-dialog{border-radius:0!important}
  .messenger-dialog .dialog-head{position:static;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top))}
  .messenger-dialog .dialog-body{padding:9px 10px max(8px,env(safe-area-inset-bottom))}
  .messenger-tabs{gap:8px}.messenger-tabs>.chip{font-size:.75rem;padding-inline:13px;min-height:42px}
  .chat-layout{border-radius:0}.chat-bubbles{padding:15px 9px;border-radius:14px}
  .chat-heading{padding:10px 3px;min-height:65px}.chat-heading strong{font-size:.92rem}
  .chat-call-actions{gap:6px}.chat-call-actions .icon-button{border-radius:12px}
  .chat-contacts{padding-block:7px}.chat-contacts>button{font-size:.75rem;padding:7px 10px}
  .message-form{gap:5px;padding:9px 0 2px}.message-form input[name=body]{padding:10px;min-height:44px}
  .message-form .voice-record-button,.message-form .message-file{min-width:40px;min-height:44px}
  .message-form button[type=submit]{min-width:44px;min-height:44px}
  .bubble{font-size:.87rem;padding:11px 13px}.bubble .message-meta small{font-size:.71rem}
  .voice-note-controls{margin-inline:0}.inbox-thread{padding:15px 9px}
  .call-screen{padding:15px 13px}.call-controls{padding:7px;gap:7px;max-width:100%}
  .call-control{min-width:60px;min-height:66px;padding:9px 11px;font-size:.63rem;border-radius:13px}
  .call-control.hangup{min-width:78px}.call-stage{border-radius:18px}.call-brand>img{width:28px;height:31px}
  .call-brand>span{font-size:1.02rem}.call-status-pill{font-size:.66rem;line-height:1.5;padding:8px 10px}
  .group-call-stage>footer{background:#0d1c31f5}.group-call-controls button{min-height:66px;border-radius:12px}
  .reel-watch-controls{padding:10px;gap:8px}.reel-watch-controls .button{font-size:.72rem}
  .reel-clip-list article{padding:14px}.reel-clip-heading strong{font-size:.78rem}
  .reel-trim-controls input,.reel-trim-controls select,.reel-captions-editor input{font-size:16px;min-height:44px}
  .reel-section-heading .button{font-size:.72rem;min-height:42px}
  .mobile-dock{background:color-mix(in srgb,var(--panel) 97%,transparent);border-top:1px solid var(--line);box-shadow:0 -4px 18px #142b4705;padding-top:8px;gap:4px}
  .mobile-dock button{min-height:49px;border-radius:14px;min-width:48px}
  .mobile-dock button.active{background:var(--soft);color:var(--accent)}
  .mobile-dock .dock-create{background:var(--brand-blue);color:#fff;border-radius:17px;box-shadow:0 3px 10px #2457f524}
  .mobile-dock button>span{font-size:.65rem;font-weight:650}
}
@media(max-width:390px){
  .topbar{padding-inline:10px;gap:9px}.topbar .top-actions{gap:4px}
  .topbar .mobile-brand{min-width:30px}.topbar .mobile-brand .brand-symbol{width:28px;height:32px}
  .top-actions .icon-button,.top-actions .language-button,.top-actions .inbox-top{min-width:39px;width:39px}
  .top-actions>.icon-button[data-action=theme]{min-width:39px;width:39px}
  .top-actions .mode-top{min-width:68px;max-width:84px;font-size:.68rem;padding-inline:7px}
  .content{padding-inline:10px}.page-heading h1{font-size:1.75rem}
  .post-actions>button{font-size:.7rem;gap:5px;padding-inline:5px}
  .composer-tool{font-size:.65rem;gap:4px}.composer-tool .icon{width:17px;height:17px}
  .feed-tabs{gap:6px;justify-content:flex-start}.feed-tabs>button:not(.icon-button){padding-inline:12px;font-size:.75rem}
  .call-controls{gap:5px;padding:6px}.call-control{min-width:55px;padding-inline:9px}.call-control.hangup{min-width:65px}
}
[dir=rtl] .sidebar .space-link.selected{box-shadow:inset -3px 0 var(--brand-teal)}
[dir=rtl] .brand-wordmark{direction:ltr}
[dir=rtl] .bubble.sent{border-radius:17px 17px 17px 5px}
[dir=rtl] .bubble.received{border-radius:17px 17px 5px 17px}
[dir=rtl] :is(h1,h2,h3,.page-heading .eyebrow,.brand-caption){letter-spacing:0}
@media(prefers-contrast:more){:root{--line:#8b9bb0;--muted:#42536a}:root[data-theme=dark]{--line:#8191a9;--muted:#d0daea}.card{box-shadow:none}.button,.chip,.icon-button{border-width:1px}}