:root{--bg:#edeef0;--surface:#fff;--surface-invert:#000;--surface-hover:#f2f3f5;--surface-hover-invert:#000;--surface-2:#f2f3f5;--surface-3:#e8e9eb;--surface-3-invert:#2c2c2c;--text:#000;--text-invert:#fff;--text-secondary:#626d7a;--muted:#818c99;--border:#d3d9de;--border-invert:#fff;--accent:#ff7a18;--accent-hover:#e56a12;--accent-fg:#fff;--accent-subtle:#ff7a181a;--verified:#07f;--danger:#e64646;--danger-fg:#fff;--shell-max-width:1280px;--col-left:240px;--col-right:320px;--col-gap:16px;--shell-px:20px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:12px;--radius-full:9999px;--shadow-card:0 1px 2px #0000000a;--shadow-elevated:0 4px 12px #00000014;--shadow-modal:0 16px 40px #0000001f;--text-micro:11px;--text-xs:13px;--text-body:15px;--text-title-card:18px;--text-title-name:20px;--text-title-sec:24px;--text-title-page:36px;--line-height-micro:14px;--line-height-xs:16px;--line-height-body:20px;--line-height-card:22px;--line-height-name:24px;--line-height-sec:28px;--line-height-page:40px;--topbar-height:48px;--topbar-bg:var(--surface);--topbar-border:var(--border);--z-base:0;--z-raised:10;--z-sticky:40;--z-overlay:50;--z-modal:100}.dark{--bg:#0f0f0f;--surface:#181818;--surface-invert:#fff;--surface-hover:#262626;--surface-hover-invert:#000;--surface-2:#222;--surface-3:#2a2a2a;--surface-3-invert:#b9b9b9;--text:#e1e3e6;--text-invert:#000;--text-secondary:#9aa0a6;--muted:#76787a;--border:#2a2a2a;--border-invert:#fff;--accent:#ff7a18;--accent-hover:#ff9645;--accent-fg:#fff;--accent-subtle:#ff7a1826;--shadow-card:0 1px 2px #0003;--shadow-elevated:0 4px 12px #0000004d;--shadow-modal:0 16px 48px #00000080;--topbar-bg:#181818;--topbar-border:#2a2a2a}.surface{background-color:var(--surface);color:var(--text)}.surface-hover{background-color:var(--surface-hover);color:var(--text)}.surface-hover-invert{background-color:var(--surface-hover-invert);color:var(--text-invert)}.surface-card{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--muted)}.text-accent{color:var(--accent)}@media (max-width:768px){:root{--shell-px:12px;--col-gap:8px;--space-4:12px}}.page-shell{max-width:var(--shell-max-width);padding:0 var(--shell-px);padding-top:var(--space-4);padding-bottom:var(--space-8);margin:0 auto}.main-grid{grid-template-columns:var(--col-left) minmax(0, 1fr) var(--col-right);gap:var(--col-gap);align-items:start;display:grid}.main-grid--no-right{grid-template-columns:var(--col-left) minmax(0, 1fr)}@media (max-width:1024px){.main-grid{grid-template-columns:var(--col-left) minmax(0, 1fr)}}@media (max-width:768px){.main-grid{gap:var(--space-3);grid-template-columns:minmax(0,1fr)}}@media (max-width:480px){.page-shell{padding-left:0;padding-right:0}.main-grid{gap:var(--space-2)}}.profile-grid{grid-template-columns:var(--col-left) minmax(0, 1fr) var(--col-right);gap:var(--col-gap);grid-template-areas:"nav header header""nav main right";align-items:start;display:grid}.profile-nav{top:calc(var(--topbar-height) + var(--space-4));height:calc(100vh - var(--topbar-height) - var(--space-8));grid-area:nav;position:sticky;overflow-y:auto}.profile-nav::-webkit-scrollbar{display:none}.profile-nav{-ms-overflow-style:none;scrollbar-width:none}.profile-header{grid-area:header;min-width:0}.profile-main{grid-area:main;min-width:0}.profile-right{grid-area:right;min-width:0}@media (max-width:1024px){.profile-grid{grid-template-columns:var(--col-left) minmax(0, 1fr);grid-template-areas:"nav header""nav main""nav right"}}@media (max-width:768px){.profile-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"header""right""main";padding:0}.profile-nav{display:none}}.messages-layout{flex-direction:column;min-height:0;padding:0;display:flex}@media (min-width:640px){.messages-layout{padding:var(--space-4) var(--shell-px);max-width:var(--shell-max-width);width:100%;margin:0 auto}}.messages-grid{grid-template-columns:var(--col-left) minmax(0, 1fr);gap:var(--col-gap);align-items:stretch;height:100%;display:grid}@media (max-width:1024px){.messages-grid{grid-template-columns:minmax(0,1fr)}}
