:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #0F172A;
  --ink-soft: #444655;
  --ink-faint: #64748B;
  --bg: #F4F6FB;
  --surface: #FAF8FF;
  --surface-2: #FFFFFF;
  --surface-3: #F2F3FF;
  --border: #E2E8F0;
  --border-strong: #C4C5D7;
  --accent: #2346D5;
  --accent-strong: #4361EE;
  --accent-soft: #EAEDFF;
  --online: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --success: #10B981;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 18px 45px rgba(35, 70, 213, .10);
  --shadow-lg: 0 30px 90px rgba(35, 70, 213, .16);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #EEF0FF;
  --ink-soft: #C4C5D7;
  --ink-faint: #8A8CA6;
  --bg: #10121E;
  --surface: #171A2B;
  --surface-2: #1D2036;
  --surface-3: #262A44;
  --border: rgba(238,240,255,.09);
  --border-strong: rgba(238,240,255,.16);
  --accent: #7C89FF;
  --accent-strong: #96A1FF;
  --accent-soft: rgba(67,97,238,.18);
  --online: #10B981;
  --danger: #EF4444;
  --warning: #F59E0B;
  --success: #10B981;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28);
  --shadow-md: 0 20px 55px rgba(0,0,0,.35);
  --shadow-lg: 0 32px 90px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::selection { background: rgba(35, 70, 213,.18); }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
button,input,textarea { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
a { color: var(--accent); }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 9px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:0 16px; border:1px solid transparent;
  border-radius:12px; font-size:13px; font-weight:700; letter-spacing:-.01em;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-primary {
  color:#fff;
  background:linear-gradient(135deg,#2563EB,#4F46E5);
  box-shadow:0 10px 26px rgba(37, 99, 235,.22);
}
.btn-primary:hover:not(:disabled) { box-shadow:0 14px 32px rgba(37, 99, 235,.30); }
.btn-soft { color:var(--ink); background:var(--surface-3); border-color:var(--border); }
.btn-soft:hover:not(:disabled) { background:var(--surface-2); border-color:var(--border-strong); }
.btn-sm { min-height:34px; padding:0 12px; font-size:12px; }

.icon-btn {
  width:40px; height:40px; border:1px solid transparent; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover:not(:disabled) { background:var(--surface-3); color:var(--ink); border-color:var(--border); transform:translateY(-1px); }
.icon-btn svg { width:19px; height:19px; }

.avatar { position:relative; display:inline-flex; flex:none; width:44px; height:44px; border-radius:50%; }
.avatar.has-trace {
  padding: 2.5px;
  background: linear-gradient(135deg, #7653FA 0%, #2376FC 52%, #01B3D9 100%);
  box-shadow: 0 0 0 2px var(--surface), 0 0 12px rgba(139,92,246,.22);
}
.avatar.has-trace img,.avatar.has-trace .avatar-fallback {
  border-radius:50%;
}
.avatar img,.avatar .avatar-fallback { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar img { display:block; }
.avatar .avatar-fallback { display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; background:var(--avatar-tint,var(--accent)); }
.avatar.sm { width:36px; height:36px; }.avatar.sm .avatar-fallback{font-size:12px;}
.avatar.lg { width:58px; height:58px; }.avatar.lg .avatar-fallback{font-size:18px;}
.status-dot { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border-radius:50%; background:#171F30; border:2px solid var(--surface); box-shadow:0 0 0 1px rgba(15, 23, 42,.02); }
.status-dot.online { background:var(--online); }

.brand-lockup { display:flex; align-items:center; gap:10px; }
.brand-symbol { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:17px; font-weight:800; background:linear-gradient(135deg,#2563EB,#4F46E5); box-shadow:0 10px 24px rgba(35, 70, 213,.20); }
.brand-mark { display:flex; flex-direction:column; line-height:1.05; }
.brand-mark strong { font-size:17px; font-weight:800; letter-spacing:.01em; }
.brand-mark span { margin-top:5px; font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint); }
.eyebrow { display:inline-block; font-size:9.5px; line-height:1; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }

.dropdown-menu {
  position:absolute; min-width:216px; padding:7px; background:rgba(248,250,252,.96);
  background:color-mix(in srgb, var(--surface) 96%, transparent);
  border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-md);
  z-index:2200; backdrop-filter:blur(18px);
}
.menu-profile-summary { display:flex; align-items:center; gap:10px; padding:8px 8px 11px; margin-bottom:4px; border-bottom:1px solid var(--border); }
.menu-profile-summary strong { display:block; font-size:13px; }
.menu-profile-summary span:last-child { display:block; margin-top:2px; color:var(--ink-faint); font-size:10.5px; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dropdown-item { width:100%; min-height:40px; display:flex; align-items:center; gap:10px; padding:0 11px; border-radius:10px; text-align:left; font-size:12.5px; font-weight:650; }
.dropdown-item:hover { background:var(--surface-3); }
.dropdown-item svg { width:18px; height:18px; flex:none; }
.danger-item { color:var(--danger); }
.danger-item:hover { background:rgba(79, 70, 229,.10); }
.dropdown-label { padding:7px 10px 5px; color:var(--ink-faint); font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }

.toast-stack { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center; z-index:5000; padding:0 16px; width:100%; pointer-events:none; }
.toast { background:var(--ink); color:var(--bg); padding:11px 17px; border-radius:999px; font-size:12px; font-weight:650; box-shadow:var(--shadow-md); opacity:0; transform:translateY(8px); transition:opacity .25s var(--ease),transform .25s var(--ease); max-width:92vw; text-align:center; }
.toast.show{opacity:1;transform:translateY(0)}
.toast-error{background:var(--danger);color:#fff}.toast-success{background:var(--success);color:#fff}

.lightbox { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15, 23, 42,.94); opacity:0; pointer-events:none; transition:opacity .2s var(--ease); }
.lightbox.open{opacity:1;pointer-events:auto}.lightbox img{max-width:100%;max-height:100%;border-radius:18px;box-shadow:0 28px 90px rgba(15, 23, 42,.45)}.lightbox-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;background:rgba(248,250,252,.12);color:#fff;font-size:26px;display:grid;place-items:center}

.modal { position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(15, 23, 42,.38); backdrop-filter:blur(10px); }
.modal[hidden]{display:none}
.modal-content{width:min(560px,96vw);max-height:min(78vh,720px);display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow-lg)}
.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:24px 24px 17px;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:22px;letter-spacing:-.03em;margin-top:6px}.modal-header p{margin-top:7px;font-size:12px;color:var(--ink-faint);line-height:1.5}
.requests-list,.saved-list,.new-chat-results{overflow:auto;min-height:0;flex:1}
.empty-state{padding:28px 18px;text-align:center;color:var(--ink-faint);font-size:12.5px;line-height:1.6}.empty-state span{color:var(--ink-faint)}.empty-state.big{padding:48px 18px}

.auth-gate{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:24px}.auth-gate[hidden]{display:none}.auth-gate-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 34px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-md);text-align:center}.auth-gate-card span{font-size:12px;color:var(--ink-faint)}.spinner-ring{width:28px;height:28px;border:3px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}

@keyframes spin{to{transform:rotate(360deg)}}
body.modal-open { overflow: hidden; }
.confirm-modal { width:min(430px,94vw); padding:26px; border-radius:24px; }
.confirm-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:rgba(79, 70, 229,.11); color:var(--danger); }
.confirm-icon svg { width:24px; height:24px; }
.confirm-copy h2 { margin-top:18px; font-size:20px; letter-spacing:-.03em; }
.confirm-copy p { margin-top:7px; color:var(--ink-faint); font-size:12.5px; line-height:1.55; }
.confirm-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:24px; }
.confirm-actions .btn { min-width:112px; }
.btn.danger-confirm { background:var(--danger); color:#fff; border-color:transparent; box-shadow:0 10px 24px rgba(79, 70, 229,.18); }

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15, 23, 42,.28);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(15, 23, 42,.42)}

@media(max-width:820px){.toast-stack{bottom:16px}.modal{padding:10px}.modal-content{max-height:90vh;border-radius:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* V6 avatar invariant: hidden avatar layers must never be displayed by component CSS. */
.avatar img[hidden], .avatar .avatar-fallback[hidden], [hidden] { display:none !important; }
.avatar img { display:block; }
/* CUNNACT V6 brand system — aligned to Stitch "Connective Clarity" palette */
:root{
  --cunnact-blue:#2346D5;
  --cunnact-purple:#4F46E5;
  --cunnact-cyan:#10B981;
  --cunnact-slate:#0F172A;
  --accent:#2346D5;
  --accent-strong:#4361EE;
  --accent-soft:#EAEDFF;
}
:root[data-theme="dark"]{
  --accent:#7C89FF;
  --accent-strong:#96A1FF;
  --accent-soft:rgba(124, 137, 255,.16);
}
.brand-symbol,.brand-icon-logo,.nav-logo img,.auth-brand img,.page-brand-icon,.public-brand img{width:38px;height:38px;object-fit:contain;display:block}
.brand-icon-logo{border-radius:11px}
.brand-mark-hidden{display:none}
.brand-wordmark-logo{display:none}
.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:30px}
.auth-brand strong{display:block;font-size:20px;font-weight:800;letter-spacing:.01em}
.auth-brand span{display:block;margin-top:4px;font-size:9px;color:var(--ink-faint);letter-spacing:.16em;text-transform:uppercase}
.profile-title-wrap{display:flex;align-items:center;gap:12px}.page-brand-icon{width:34px;height:34px;border-radius:10px}
.public-brand{display:flex;align-items:center;gap:11px}.public-brand img{width:36px;height:36px;border-radius:10px}.public-brand strong{display:block;font-size:16px}.public-brand span{display:block;margin-top:3px;font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint)}
body,.profile-page,.public-profile-page{background:radial-gradient(circle at 10% -10%,rgba(35, 70, 213,.08),transparent 28%),radial-gradient(circle at 95% 110%,rgba(79, 70, 229,.06),transparent 28%),var(--bg)}
/* Strict avatar invariant: a valid photo and initials can never be visible together. */
.avatar.has-photo .avatar-fallback{display:none!important;visibility:hidden!important}
.avatar.has-fallback img{display:none!important;visibility:hidden!important}

/* CUNNACT brand logo system — shared across all pages */
.theme-logo-dark{display:none!important}
:root[data-theme="dark"] .theme-logo-light{display:none!important}
:root[data-theme="dark"] .theme-logo-dark{display:block!important}
.brand-wordmark-wrap{display:block;text-decoration:none;color:inherit;min-width:0}
.brand-wordmark-wrap .brand-wordmark-logo{width:176px;height:auto;max-height:54px;object-fit:contain;object-position:left center}
.auth-brand{min-height:58px}
.auth-brand .auth-wordmark-logo{width:min(290px,100%);height:auto;object-fit:contain;object-position:left center}
.public-brand .public-wordmark-logo{width:min(205px,100%);height:auto;max-height:58px;object-fit:contain;object-position:left center}
.welcome-orb img{width:60px;height:60px;object-fit:contain;display:block}
/* Theme variants for full wordmark images */
.brand-wordmark-wrap .theme-logo-dark{display:none!important}
:root[data-theme="dark"] .brand-wordmark-wrap .theme-logo-light{display:none!important}
:root[data-theme="dark"] .brand-wordmark-wrap .theme-logo-dark{display:block!important}

.verify-spam-note{color:var(--ink-faint);font-size:11px;line-height:1.5}

.offline-bar{position:fixed;left:0;right:0;top:0;z-index:500;padding:9px 14px;text-align:center;background:#9a3412;color:#fff;font-size:12px;font-weight:700;letter-spacing:.01em;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.keyboard-hint{font-size:9px;color:var(--ink-faint);opacity:.85}.desktop-only{display:inline-grid}@media(max-width:820px){.desktop-only{display:none}.offline-bar{font-size:11px}}
body.popup-mode .nav-rail,body.popup-mode .sidebar,body.popup-mode .mobile-only{display:none!important}body.popup-mode .app-shell{grid-template-columns:1fr!important}body.popup-mode .chat-panel{border:0;max-width:none}
.messages.drop-target{outline:2px dashed rgba(35,70,213,.55);outline-offset:-10px;background:rgba(35,70,213,.045)}
.settings-inline-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.is-enabled{border-color:rgba(22,163,74,.35)!important;color:#15803d!important}.btn-danger-account{margin-top:12px;border:1px solid rgba(185,28,28,.28);background:rgba(185,28,28,.08);color:#b91c1c;border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer}.btn-danger-account:disabled{opacity:.55;cursor:not-allowed}.account-tools-card{margin-top:18px}.danger-account-card{margin-top:18px;border-color:rgba(185,28,28,.18)}

.notification-browser-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}