:root {
  color-scheme: dark;
  --bg: #090b12; --panel: rgba(21,25,38,.72); --panel-strong: rgba(27,32,48,.92);
  --border: rgba(255,255,255,.085); --text: #f4f5fb; --muted: #9097aa;
  --accent: #a891ff; --accent-2: #78e5d1; --danger: #ff7789;
  --shadow: 0 24px 80px rgba(0,0,0,.35); --radius: 22px;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; font-synthesis: none; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); }
body.light { color-scheme: light; --bg: #f2f4fa; --panel: rgba(255,255,255,.68); --panel-strong: rgba(255,255,255,.94); --border: rgba(31,37,58,.10); --text: #171a27; --muted: #71788b; --shadow: 0 24px 80px rgba(42,49,76,.13); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.ambient { position: fixed; width: 420px; height: 420px; filter: blur(100px); opacity: .15; border-radius: 50%; z-index: -1; pointer-events: none; }
.ambient-one { background: #7857ff; left: -200px; top: -160px; }
.ambient-two { background: #3cd6bd; right: -250px; bottom: -220px; opacity: .10; }
.loading-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); }
.brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; font: 800 24px Arial, Helvetica, sans-serif; color: #10111a; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 8px 32px #a891ff33; }
.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(300px,1.02fr) minmax(380px,.98fr); align-items: center; max-width: 1260px; margin: auto; padding: 48px; gap: clamp(50px,10vw,150px); }
.auth-story { max-width: 510px; }
.wordmark { display: flex; align-items: center; gap: 12px; font: 800 21px Arial, Helvetica, sans-serif; letter-spacing: .14em; }
.wordmark .brand-mark { width: 42px; height: 42px; font-size: 22px; border-radius: 14px; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .16em; font-size: 11px; font-weight: 700; }
.auth-story h1 { font: 700 clamp(42px,5.5vw,74px)/1.08 Arial, Helvetica, sans-serif; letter-spacing: -.055em; margin: 50px 0 22px; }
.gradient-text { background: linear-gradient(100deg,var(--accent),var(--accent-2)); background-clip: text; -webkit-text-fill-color: transparent; }
.auth-story > p { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 410px; }
.feature-pills { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.feature-pills span,.tag { border:1px solid var(--border); border-radius:999px; padding:8px 12px; color:var(--muted); font-size:12px; background:#ffffff07; }
.feature-pills span { display:inline-flex; align-items:center; gap:7px; }
.auth-card,.glass { background: var(--panel); border:1px solid var(--border); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: var(--shadow); }
.auth-card { width:100%; max-width:440px; padding:34px; border-radius:28px; }
.auth-card h2 { font:700 25px Arial, Helvetica, sans-serif; margin:0 0 8px; }
.muted { color:var(--muted); }
.auth-card .muted { margin:0 0 28px; font-size:14px; }
.field { display:grid; gap:8px; margin-bottom:17px; }
.field label { color:var(--muted); font-size:12px; font-weight:700; }
.field input,.field textarea,.field select,.search-input { width:100%; border:1px solid var(--border); border-radius:13px; padding:13px 14px; color:var(--text); background:#ffffff08; transition:border .2s,background .2s; }
.field input:focus,.field textarea:focus,.search-input:focus { border-color:#a891ff8c; background:#ffffff0c; outline:0; }
.field textarea { min-height:94px; resize:vertical; }
.field select option { background:var(--bg); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:13px; padding:11px 16px; font-weight:700; cursor:pointer; transition:transform .2s,background .2s,border .2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:#10111a; background:linear-gradient(110deg,#b29cff,#7ce5d1); box-shadow:0 8px 24px #9280f323; }
.button-secondary { background:#ffffff0b; border-color:var(--border); }
.button-quiet { color:var(--muted); background:transparent; }
.button-danger { color:#ff9caa; background:#ff66751a; border-color:#ff66752b; }
.button-small { padding:8px 11px; font-size:12px; border-radius:10px; }
.button-block { width:100%; }
.text-button { display:inline-flex; align-items:center; gap:5px; border:0; padding:0; background:none; color:var(--accent-2); cursor:pointer; font-size:13px; }
.auth-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; font-size:13px; }
.form-error { min-height:18px; margin:0 0 12px; color:var(--danger); font-size:13px; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:252px minmax(0,1fr); }
.sidebar { height:100vh; position:sticky; top:0; display:flex; flex-direction:column; padding:26px 16px 18px; border-right:1px solid var(--border); background:#ffffff04; backdrop-filter:blur(24px); }
.sidebar .wordmark { margin:0 10px 40px; }
.nav-label { padding:0 12px; margin:18px 0 9px; color:#747c90; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.nav-button { display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:12px; color:var(--muted); background:transparent; text-align:left; font-weight:700; cursor:pointer; transition:.18s; }
.nav-button:hover,.nav-button.active { color:var(--text); background:#ffffff0c; }
.nav-button.active { box-shadow:inset 2px 0 var(--accent); }
.nav-icon { display:grid; width:20px; place-items:center; text-align:center; font-size:17px; }
.nav-count { margin-left:auto; color:var(--accent-2); font-size:11px; }
.sidebar-bottom { margin-top:auto; }
.profile-mini { display:flex; align-items:center; gap:11px; padding:12px 9px 4px; border-top:1px solid var(--border); }
.profile-copy { min-width:0; flex:1; }
.profile-copy b,.profile-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-copy b { font-size:13px; font-weight:700; }.profile-copy small { margin-top:4px; color:var(--muted); font-size:11px; font-weight:700; }
.avatar { width:39px; height:39px; flex:none; display:grid; place-items:center; overflow:hidden; border-radius:14px; color:#151521; font-weight:700; background:linear-gradient(135deg,#b39cff,#7ce5d1); }
.avatar img { width:100%; height:100%; object-fit:cover; }
.main-column { min-width:0; }
.topbar { height:80px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 clamp(20px,4vw,56px); border-bottom:1px solid var(--border); }
.topbar h1 { font:700 18px Arial, Helvetica, sans-serif; margin:0; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.icon-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:13px; background:#ffffff08; cursor:pointer; }
.content { max-width:1320px; margin:0 auto; padding:36px clamp(20px,4vw,56px) 70px; }
.greeting { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:4px 0 30px; }
.greeting h2 { font:700 clamp(27px,3vw,37px) Arial, Helvetica, sans-serif; letter-spacing:-.04em; margin:7px 0; }
.greeting p { color:var(--muted); margin:0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin:32px 0 17px; }
.section-heading h3 { font:700 16px Arial, Helvetica, sans-serif; margin:0; }
.section-heading p { font-size:12px; margin:5px 0 0; color:var(--muted); }
.stats-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stat-card { padding:18px; border-radius:18px; }
.stat-card .stat-icon { display:flex; align-items:center; gap:8px; color:var(--accent-2); }
.stat-card .stat-icon .nova-icon { width:20px; height:20px; }
.stat-card strong { display:block; margin:15px 0 3px; font:700 25px Arial, Helvetica, sans-serif; }
.stat-card span { color:var(--muted); font-size:12px; }
.grid-spaces { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:15px; }
.space-card { min-height:158px; padding:19px; text-align:left; border-radius:19px; cursor:pointer; transition:transform .2s,border .2s; }
.space-card:hover { transform:translateY(-4px); border-color:#a891ff5e; }
.space-card-head { display:flex; justify-content:space-between; align-items:center; }
.space-emoji { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; color:var(--accent); background:#a891ff18; }
.space-card h4 { margin:18px 0 5px; font:700 15px Arial, Helvetica, sans-serif; }
.space-card p { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.space-meta { display:flex; justify-content:space-between; margin-top:17px; color:var(--muted); font-size:11px; }
.empty-state { grid-column:1/-1; display:grid; justify-items:center; text-align:center; padding:43px 20px; border:1px dashed var(--border); border-radius:20px; color:var(--muted); }
.empty-state .empty-icon { display:grid; place-items:center; margin-bottom:11px; color:var(--accent-2); }
.empty-state .empty-icon .nova-icon { width:28px; height:28px; }
.empty-state h4 { color:var(--text); margin:0 0 7px; font:700 14px Arial, Helvetica, sans-serif; }
.empty-state p { max-width:320px; margin:0 0 17px; font-size:12px; line-height:1.7; }
.table-card { overflow:auto; border-radius:18px; }
table { width:100%; border-collapse:collapse; min-width:580px; }
th,td { padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); font-size:12px; }
th { color:var(--muted); font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; padding:5px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:#ffffff07; font-size:10px; }
.badge.online { color:var(--accent-2); }.badge.status-done { color:#7de1c0; }.badge.status-doing { color:#a891ff; }
.page-title { margin:0 0 7px; font:700 30px Arial, Helvetica, sans-serif; letter-spacing:-.04em; }
.page-subtitle { margin:0 0 26px; color:var(--muted); font-size:13px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:18px; }
.toolbar .search-input { width:min(330px,100%); }
.idea-list { display:grid; gap:12px; }
.idea-card { padding:18px; border-radius:18px; }
.idea-head { display:flex; justify-content:space-between; gap:14px; }
.idea-head h4 { margin:0 0 7px; font:700 15px Arial, Helvetica, sans-serif; }
.idea-card p { color:var(--muted); font-size:12px; line-height:1.7; margin:8px 0; }
.idea-card img { max-width:220px; max-height:150px; border-radius:12px; object-fit:cover; }
.idea-tags,.idea-links { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.idea-links a { color:var(--accent-2); font-size:11px; }
.checklist { display:grid; gap:6px; color:var(--muted); font-size:12px; }
.checklist span.done { text-decoration:line-through; opacity:.6; }
.people-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:13px; }
.person-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:17px; }
.person-details { min-width:0; flex:1; }
.person-details b,.person-details span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-details b { font-size:13px; }.person-details span { margin-top:4px; color:var(--muted); font-size:11px; }
.messages-layout { display:grid; grid-template-columns:minmax(210px,280px) minmax(0,1fr); min-height:560px; overflow:hidden; border-radius:20px; }
.conversation-list { padding:15px; border-right:1px solid var(--border); }
.conversation { display:flex; gap:10px; align-items:center; width:100%; padding:11px 8px; border:0; border-radius:12px; background:transparent; text-align:left; cursor:pointer; }
.conversation:hover,.conversation.active { background:#ffffff0c; }
.conversation-copy { flex:1; min-width:0; }.conversation-copy b,.conversation-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.conversation-copy b { font-size:12px; }.conversation-copy small { margin-top:5px; color:var(--muted); font-size:10px; }
.chat-panel { display:flex; flex-direction:column; min-width:0; }
.chat-header { display:flex; align-items:center; justify-content:space-between; padding:13px 17px; border-bottom:1px solid var(--border); }
.chat-body { flex:1; display:flex; flex-direction:column; gap:10px; max-height:410px; padding:18px; overflow:auto; }
.message { max-width:min(78%,520px); align-self:flex-start; padding:10px 13px; border:1px solid var(--border); border-radius:15px 15px 15px 4px; font-size:12px; line-height:1.55; background:#ffffff09; overflow-wrap:anywhere; }
.message.mine { align-self:flex-end; border-color:#a891ff29; border-radius:15px 15px 4px 15px; background:linear-gradient(120deg,#a891ff21,#78e5d114); }
.message time { display:block; margin-top:5px; color:var(--muted); font-size:9px; text-align:right; }
.chat-compose { display:flex; align-items:center; gap:9px; padding:13px; border-top:1px solid var(--border); }
.chat-compose input { flex:1; min-width:0; padding:12px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:#ffffff08; }
.chat-compose .attachment-button { flex:none; position:relative; }
.chat-compose .voice-button { flex:none; touch-action:none; user-select:none; -webkit-user-select:none; }
.chat-compose .voice-button.recording { color:#fff; border-color:#ff77899c; background:#ff7789a6; transform:scale(1.08); }
.recording-dot { width:8px; height:8px; border-radius:50%; background:currentColor; animation:call-pulse 1s infinite; }
.voice-instructions { margin:0; padding:7px 14px 0; color:var(--muted); font-size:10px; text-align:right; }
.voice-message { display:block; width:min(300px,65vw); height:42px; margin-top:5px; accent-color:var(--accent); }
.call-stage { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.call-tile { display:grid; place-items:center; align-content:center; min-height:240px; padding:20px; border-radius:20px; text-align:center; }
.call-tile video { width:100%; max-height:310px; border-radius:14px; background:#090b12; object-fit:cover; }
.call-controls { position:sticky; bottom:12px; display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; padding:12px; border-radius:18px; }
.call-timer { margin:5px 0 16px; color:var(--muted); font-size:12px; }
.nova-icon { display:block; flex:none; }
.in-call-screen { overflow:hidden; background:#080a10; }
.call-screen { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; overflow:hidden; color:#f7f7fb; background:radial-gradient(ellipse at 50% 40%,#24263a 0,#11131e 48%,#080a10 100%); padding:calc(18px + env(safe-area-inset-top)) 22px 14px; }
.call-screen-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(100%,780px); margin:0 auto; }
.call-secure { display:flex; align-items:center; gap:8px; color:#c3c5d2; font-size:12px; font-weight:700; }
.call-screen-header > div { display:grid; justify-items:center; gap:5px; }
.call-screen-header > div b { font-size:15px; }
.call-screen-header > div span { color:#b6b9c8; font-size:12px; }
.call-screen-header > div time { min-height:14px; color:#c3c5d2; font-size:11px; }
.call-screen-header > div span::before { display:inline-block; width:7px; height:7px; margin:0 7px 1px 0; border-radius:50%; background:#5bdeb0; content:""; }
.call-screen.is-ringing .call-screen-header > div span::before { background:#f3c96c; animation:call-pulse 1.2s infinite; }
.call-kind { justify-self:end; color:#d6d5e2; }
.call-screen-stage { position:relative; flex:1; width:min(100%,1000px); min-height:0; margin:20px auto; }
.call-screen .call-stage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.call-screen .call-tile { min-width:0; min-height:0; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.call-screen .call-tile:not(#local-tile) { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; gap:12px; }
.call-screen .call-tile:not(#local-tile) video { width:100%; height:100%; max-height:none; border-radius:25px; object-fit:cover; }
.call-screen .call-tile:not(#local-tile) h3 { position:absolute; left:18px; bottom:15px; padding:9px 12px; border-radius:12px; background:#080a10a8; font-size:13px; }
.call-screen .call-tile:not(#local-tile) .avatar { width:clamp(130px,24vw,210px); height:clamp(130px,24vw,210px); border-radius:50%; font-size:40px; }
.call-screen .call-tile#local-tile { position:absolute; z-index:2; top:16px; right:16px; display:flex; width:clamp(94px,18vw,180px); min-height:120px; flex-direction:column; justify-content:center; gap:5px; overflow:hidden; padding:8px; border:1px solid #ffffff22; border-radius:18px; background:#252634; box-shadow:0 12px 38px #0006; }
.call-screen #local-tile video { width:100%; height:100%; max-height:180px; border-radius:12px; object-fit:cover; }
.call-screen #local-tile .avatar { width:42px; height:42px; border-radius:50%; }
.call-screen #local-tile h3 { max-width:100%; margin:3px 0 0; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.call-screen #local-tile .call-timer { margin:0; color:#c3c5d2; font-size:10px; }
.call-waiting { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.call-waiting[hidden] { display:none; }
.call-waiting .call-avatar { width:clamp(120px,23vw,190px); height:clamp(120px,23vw,190px); border-radius:50%; font-size:38px; animation:call-pulse 2s infinite; }
.call-waiting h2 { margin:22px 0 5px; font-size:clamp(22px,4vw,34px); }
.call-waiting p { color:#b6b9c8; font-size:14px; }
.call-dock { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:19px; width:min(100%,680px); margin:0 auto; padding:13px 16px calc(13px + env(safe-area-inset-bottom)); border:1px solid #ffffff12; border-radius:27px; background:#ffffff0b; backdrop-filter:blur(24px); }
.call-control-group { display:flex; align-items:center; justify-content:center; gap:clamp(18px,5vw,40px); }
.call-control { display:flex; min-width:56px; flex-direction:column; align-items:center; gap:7px; padding:0; border:0; color:#f7f7fb; background:transparent; cursor:pointer; }
.call-control .nova-icon { width:25px; height:25px; }
.call-control span,.call-hangup span { font-size:10px; font-weight:600; }
.call-control.is-off { color:#ff8797; }
.call-audio-enable { padding:10px 14px; border:1px solid #ffffff2b; border-radius:999px; color:#f7f7fb; background:#ffffff12; cursor:pointer; font-size:12px; font-weight:700; }
.call-audio-enable[hidden] { display:none; }
.call-hangup { display:flex; width:62px; height:62px; min-width:62px; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; color:#fff; background:#ed4358; cursor:pointer; box-shadow:0 8px 22px #ed43584a; }
.call-hangup .nova-icon { transform:rotate(135deg); }
.call-hangup:focus-visible,.answer-slider-thumb:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.call-screen.is-incoming .call-dock { flex-direction:row; gap:22px; }
.answer-slider-track { position:relative; display:flex; width:min(340px,calc(100vw - 150px)); height:66px; align-items:center; justify-content:center; overflow:hidden; border:1px solid #ffffff24; border-radius:999px; color:#e7e6f1; background:#ffffff13; touch-action:none; user-select:none; }
.answer-slider-track > span:first-of-type { padding-left:48px; font-size:12px; font-weight:700; pointer-events:none; }
.answer-slider-thumb { position:absolute; z-index:1; left:4px; display:grid; width:56px; height:56px; place-items:center; border:0; border-radius:50%; color:#fff; background:#35b982; box-shadow:0 5px 18px #35b98266; cursor:grab; touch-action:none; transform:translateX(var(--answer-offset,0px)); }
.answer-slider-thumb:active { cursor:grabbing; }
.answer-slider-arrow { position:absolute; right:18px; display:flex; color:#ffffff77; pointer-events:none; }
.incoming-decline { flex:none; }
.call-picker { margin-top:16px; padding:18px; border-radius:19px; }
.call-friend-list { display:grid; gap:9px; }
.call-friend-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px; }
.call-friend-card .button { white-space:nowrap; }
@keyframes call-pulse { 0%,100% { box-shadow:0 0 0 0 #a891ff22; } 50% { box-shadow:0 0 0 14px #a891ff00; } }
.notification-list { display:grid; gap:10px; }
.notification-item { display:flex; gap:12px; align-items:flex-start; padding:15px; border-radius:16px; }
.notification-icon { display:grid; width:34px; height:34px; flex:none; place-items:center; border-radius:11px; color:var(--accent-2); background:#78e5d118; }
.notification-item p { margin:0; font-size:12px; line-height:1.6; }.notification-item time { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.modal { width:min(570px,calc(100vw - 28px)); max-height:min(88vh,850px); padding:25px; border:1px solid var(--border); border-radius:23px; color:var(--text); background:var(--panel-strong); backdrop-filter:blur(30px); box-shadow:var(--shadow); }
.modal::backdrop { background:#03040ab8; backdrop-filter:blur(6px); }
.modal h2 { margin:0 0 18px; font:700 20px Arial, Helvetica, sans-serif; }
.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:9px; margin-top:18px; }
.check-row { display:flex; gap:9px; margin-bottom:8px; }.check-row input[type=text] { flex:1; min-width:0; }
.admin-tabs { display:flex; gap:8px; overflow:auto; padding-bottom:5px; margin-bottom:18px; }
.admin-tabs .button { white-space:nowrap; }
.location-switcher { display:none; gap:8px; margin:18px 0 10px; }
.location-workspace { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(270px,.8fr); gap:14px; min-height:620px; }
.location-map-panel { position:relative; min-width:0; min-height:620px; overflow:hidden; border-radius:20px; }
.location-map { position:absolute; inset:0; background:#202636; }
.location-map-status { position:absolute; z-index:2; top:14px; left:14px; max-width:min(420px,calc(100% - 28px)); padding:10px 13px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:var(--panel-strong); box-shadow:var(--shadow); font-size:12px; line-height:1.5; }
.location-map-status[hidden] { display:none; }
.location-share-controls { position:absolute; z-index:2; right:14px; bottom:28px; left:14px; display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 28px); padding:10px; border-radius:14px; }
.location-share-controls span { color:var(--muted); font-size:11px; }
.location-people-panel { min-width:0; max-height:620px; overflow:auto; padding:18px; border-radius:20px; }
.location-people-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.location-people-heading h3 { margin:0; font-size:15px; }
.location-people-heading p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.location-person { display:flex; align-items:center; gap:10px; width:100%; padding:11px 4px; border:0; border-top:1px solid var(--border); color:var(--text); background:transparent; text-align:left; cursor:pointer; }
.location-person:hover { background:#ffffff08; }
.location-person-avatar { width:37px; height:37px; border-radius:13px; }
.location-person > span:nth-child(2) { display:grid; flex:1; min-width:0; gap:4px; }
.location-person b,.location-person small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.location-person b { font-size:12px; }
.location-person small { color:var(--muted); font-size:10px; }
.location-empty .empty-state { padding:25px 8px; }
.location-map-marker { display:grid; justify-items:center; gap:4px; cursor:pointer; filter:drop-shadow(0 3px 7px #0008); }
.location-marker-avatar { width:39px; height:39px; border:3px solid white; border-radius:50%; box-shadow:0 2px 8px #0008; }
.location-map-marker > span { max-width:140px; overflow:hidden; padding:4px 8px; border-radius:999px; color:#fff; background:#111827e8; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.location-map .maplibregl-ctrl-group { overflow:hidden; border-radius:12px; }
.toast-region { position:fixed; right:18px; bottom:18px; z-index:20; display:grid; gap:9px; }
.toast { max-width:min(380px,calc(100vw - 36px)); padding:13px 16px; border:1px solid var(--border); border-radius:14px; background:var(--panel-strong); box-shadow:var(--shadow); animation:slide-in .24s ease both; font-size:12px; }
.mobile-menu { display:none; }
@keyframes slide-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:950px) { .app-shell { grid-template-columns:78px minmax(0,1fr); }.sidebar { align-items:center; padding-inline:10px; }.sidebar .wordmark { margin:0 0 32px; }.sidebar .wordmark > span:last-child,.nav-label,.nav-button .nav-text,.nav-count,.profile-copy,.sidebar-bottom .button { display:none; }.nav-button { justify-content:center; width:52px; height:48px; padding:0; }.nav-icon { font-size:20px; }.profile-mini { justify-content:center; padding-inline:0; }.sidebar-bottom { width:100%; }.profile-mini .avatar { width:38px; height:38px; }.auth-layout { gap:50px; padding:35px; } }
@media (max-width:700px) { .auth-layout { display:flex; flex-direction:column; justify-content:center; padding:25px 18px; gap:28px; }.auth-story { width:100%; max-width:440px; }.auth-story h1 { font-size:43px; margin:27px 0 13px; }.auth-story>p { font-size:13px; }.feature-pills { display:none; }.auth-card { padding:25px; }.app-shell { display:block; padding-bottom:68px; }.sidebar { position:fixed; top:auto; bottom:0; z-index:10; width:100%; height:65px; flex-direction:row; justify-content:space-around; padding:7px 10px; border-right:0; border-top:1px solid var(--border); background:var(--panel-strong); }.sidebar .wordmark,.sidebar .nav-label,.sidebar-bottom { display:none; }.sidebar nav { display:flex; justify-content:space-around; width:100%; }.nav-button { width:48px; height:48px; }.nav-button.active { box-shadow:inset 0 -2px var(--accent); }.topbar { height:65px; padding-inline:17px; }.content { padding:25px 16px 45px; }.greeting { align-items:flex-start; }.greeting .button { font-size:11px; padding:10px; }.greeting h2 { font-size:27px; }.stats-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.stat-card { padding:14px; }.stat-card strong { font-size:22px; }.grid-spaces { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.space-card { min-height:150px; padding:14px; }.space-card h4 { font-size:13px; }.space-meta { font-size:9px; }.messages-layout { grid-template-columns:1fr; min-height:580px; }.conversation-list { display:flex; gap:6px; overflow:auto; border-right:0; border-bottom:1px solid var(--border); }.conversation { width:190px; flex:none; }.chat-body { max-height:390px; }.topbar-actions .button { padding:9px; font-size:11px; }.form-row { grid-template-columns:1fr; gap:0; }.toolbar .search-input { width:100%; }.toolbar { align-items:stretch; }.toolbar .button { flex:1; }.call-tile { min-height:190px; }.call-screen { padding-right:14px; padding-left:14px; }.call-screen-stage { margin:16px auto; }.call-screen .call-tile#local-tile { top:12px; right:6px; width:100px; min-height:112px; }.call-dock { gap:17px; padding:13px 12px calc(13px + env(safe-area-inset-bottom)); }.call-control-group { gap:25px; }.call-hangup { min-width:165px; }.call-friend-card { grid-template-columns:auto minmax(0,1fr); }.call-friend-card .button { grid-row:2; }.call-friend-card .button:nth-last-child(2) { grid-column:1; }.call-friend-card .button:last-child { grid-column:2; } }
@media (max-width:700px) { .call-hangup { width:58px; height:58px; min-width:58px; padding:0; }.call-screen.is-incoming .call-dock { gap:12px; }.answer-slider-track { width:min(300px,calc(100vw - 118px)); height:62px; }.answer-slider-thumb { width:52px; height:52px; }.answer-slider-track > span:first-of-type { padding-left:44px; font-size:11px; } }
@media (max-width:700px) {
  .app-shell { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  .sidebar { bottom:12px; height:calc(76px + env(safe-area-inset-bottom)); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--panel-strong); -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px); }
  .sidebar nav { height:100%; align-items:center; }
  .sidebar nav > .nav-button[data-page="notifications"],
  .sidebar nav > .nav-button[data-page="admin"],
  .sidebar nav > .nav-label { display:none; }
  .sidebar nav > .nav-button { position:relative; display:flex; width:16.6667%; min-width:0; height:60px; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:5px 2px; border-radius:14px; }
  .sidebar nav > .nav-button .nav-icon { width:25px; height:25px; font-size:20px; }
  .sidebar nav > .nav-button .nav-text { display:block; max-width:100%; overflow:hidden; font-size:9px; line-height:12px; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar nav > .nav-button.active { color:var(--accent-2); background:#a891ff12; box-shadow:none; }
  .sidebar nav > .nav-button.active .nav-icon { transform:translateY(-1px); }
  .sidebar nav > .nav-button .nav-count { position:absolute; top:2px; right:calc(50% - 22px); display:grid; min-width:16px; height:16px; place-items:center; margin:0; padding:0 4px; border-radius:99px; color:#10111a; background:var(--accent-2); font-size:9px; }
  .topbar { height:60px; }
  .topbar-actions { gap:6px; }
  .topbar-actions .icon-button { width:36px; height:36px; }
  .topbar-actions > .button[data-action="create-space"] { width:38px; height:38px; padding:0; }
  .topbar-actions > .button[data-action="create-space"] span { display:none; }
}
@media (max-width:700px) {
  .location-switcher { display:flex; }
  .location-workspace { display:block; min-height:0; }
  .location-map-panel { min-height:58vh; }
  .location-people-panel { display:none; max-height:58vh; min-height:300px; }
  .location-workspace.location-panel-people .location-map-panel { display:none; }
  .location-workspace.location-panel-people .location-people-panel { display:block; }
  .location-workspace.location-panel-map .location-people-panel { display:none; }
  .location-share-controls { right:9px; bottom:24px; left:9px; gap:8px; max-width:calc(100% - 18px); padding:8px; }
  .location-share-controls span { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }

/* NOVA FULLSCREEN LOCATION UPDATE */
.location-page { position:fixed; inset:0; z-index:30; width:100%; height:100vh; height:100dvh; overflow:hidden; background:#e8edf3; isolation:isolate; }
.location-page .location-map { position:absolute; inset:0; z-index:0; width:100%; height:100%; touch-action:none; }
.location-page .maplibregl-map,.location-page .maplibregl-canvas-container,.location-page .maplibregl-canvas { width:100%; height:100%; }
.location-page .location-map-status { position:absolute; z-index:3; top:calc(12px + env(safe-area-inset-top)); left:12px; display:grid; gap:8px; max-width:min(360px,calc(100% - 24px)); padding:9px 12px; border:1px solid #ffffff75; border-radius:13px; color:#202633; background:#fffffff0; box-shadow:0 5px 24px #10182730; font-size:12px; line-height:1.45; pointer-events:auto; }
.location-page .location-map-status[hidden] { display:none; }
.location-page .location-share-controls { position:absolute; z-index:4; top:calc(12px + env(safe-area-inset-top)); right:12px; left:auto; bottom:auto; display:grid; justify-items:end; gap:6px; width:auto; max-width:calc(100% - 24px); padding:8px; border:1px solid #ffffff80; border-radius:15px; background:#fffffff0; box-shadow:0 5px 24px #10182730; }
.location-page .location-share-controls .button { min-height:38px; }
.location-page .location-share-controls span { max-width:220px; color:#343b49; font-size:10px; text-align:right; }
.profile-location-controls { position:relative; inset:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px; width:min(620px,100%); max-width:620px; margin:0 0 15px; padding:18px; }
.profile-location-controls h3 { flex:1 1 100%; margin:0; color:var(--text); font-size:15px; }
.profile-location-controls > span { flex:1 1 100%; max-width:none; color:var(--muted); font-size:11px; line-height:1.6; text-align:left; }
.location-user-dock { position:absolute; z-index:4; right:0; bottom:calc(78px + env(safe-area-inset-bottom)); left:0; padding:0 12px 8px; pointer-events:none; }
.location-user-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; width:max-content; max-width:100%; margin:0 0 8px; padding:7px 11px; border:1px solid #ffffff85; border-radius:999px; color:#263040; background:#ffffffed; box-shadow:0 3px 16px #10182724; font-size:11px; font-weight:700; }
.location-user-heading > span:last-child { display:grid; min-width:20px; height:20px; place-items:center; padding:0 5px; border-radius:99px; color:#10111a; background:linear-gradient(135deg,#b39cff,#7ce5d1); font-size:10px; }
.location-user-rail { display:flex; align-items:stretch; gap:9px; width:100%; overflow-x:auto; overflow-y:hidden; padding:1px 1px 8px; scrollbar-width:none; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; touch-action:pan-x; pointer-events:auto; }
.location-user-rail::-webkit-scrollbar { display:none; }
.location-user-card { display:grid; flex:0 0 76px; justify-items:center; align-content:center; gap:4px; min-height:88px; padding:7px 4px; border:1px solid #ffffffad; border-radius:16px; color:#202633; background:#ffffffed; box-shadow:0 4px 18px #10182730; cursor:pointer; scroll-snap-align:start; touch-action:pan-x; }
.location-user-card:active { transform:scale(.96); }
.location-user-avatar { width:42px; height:42px; border:2px solid white; border-radius:50%; box-shadow:0 2px 7px #1113; }
.location-user-card > span:last-child { max-width:64px; overflow:hidden; font-size:9px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.location-user-card .location-user-age { max-width:70px; overflow:hidden; color:#626c7e; font-size:8px; font-weight:500; line-height:10px; text-overflow:ellipsis; white-space:nowrap; }
.location-user-empty { display:flex; flex:0 0 auto; align-items:center; min-height:54px; padding:10px 14px; border:1px solid #ffffffad; border-radius:15px; color:#293243; background:#ffffffed; box-shadow:0 4px 18px #10182730; font-size:11px; }
.location-bottom-nav { position:absolute; z-index:5; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:space-around; width:100%; height:calc(72px + env(safe-area-inset-bottom)); padding:5px 7px calc(5px + env(safe-area-inset-bottom)); border-top:1px solid #ffffffa6; background:#fffffff2; box-shadow:0 -5px 24px #10182720; -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); touch-action:pan-x; }
.location-bottom-nav .nav-button { display:flex; flex:1 1 0; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:auto; min-width:0; height:58px; padding:4px 2px; border-radius:13px; color:#697386; }
.location-bottom-nav .nav-button.active { color:#5142a2; background:#a891ff1b; box-shadow:none; }
.location-bottom-nav .nav-icon { width:24px; height:24px; font-size:20px; }
.location-bottom-nav .nav-text { display:block; max-width:100%; overflow:hidden; font-size:9px; line-height:12px; text-overflow:ellipsis; white-space:nowrap; }
.location-bottom-nav .nav-count { position:absolute; top:1px; margin:0; font-size:9px; }
.location-page .maplibregl-ctrl-top-right { top:calc(62px + env(safe-area-inset-top)); right:8px; }
.location-page .maplibregl-ctrl-group { overflow:hidden; border-radius:12px; }
@media (min-width:701px) {
  .location-page .location-user-dock { bottom:calc(82px + env(safe-area-inset-bottom)); padding-right:24px; padding-left:24px; }
  .location-page .location-user-rail { gap:12px; }
  .location-page .location-user-card { flex-basis:90px; min-height:90px; }
  .location-bottom-nav { right:auto; left:50%; width:min(540px,calc(100% - 32px)); height:70px; padding-bottom:5px; border:1px solid #ffffffaa; border-bottom:0; border-radius:18px 18px 0 0; transform:translateX(-50%); }
}