.app-shell{height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--rail);grid-template-rows:var(--topbar) minmax(0,1fr);transition:grid-template-columns .2s var(--ease)}.app-shell.sidebar-collapsed{--sidebar:76px}.topbar{grid-column:1/-1;display:grid;grid-template-columns:var(--sidebar) minmax(320px,760px) 1fr;align-items:center;gap:18px;padding:10px 14px;background:var(--bg);z-index:20}.brand-zone{display:flex;align-items:center;gap:12px;min-width:0}.brand-logo{height:38px;width:auto;max-width:178px}.icon-btn,.right-rail button{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;transition:.15s var(--ease)}.icon-btn:hover,.right-rail button:hover{background:var(--surface-hover)}.icon-btn:active{transform:scale(.95)}.icon-btn img,.right-rail img{width:20px;height:20px}.search-wrap{height:48px;border-radius:24px;background:#eaf0f7;display:flex;align-items:center;padding:0 8px 0 10px;box-shadow:inset 0 0 0 1px transparent;transition:.18s var(--ease)}body.dark .search-wrap{background:#202b3a}.search-wrap:focus-within{background:var(--surface);box-shadow:0 0 0 1px var(--line-strong),var(--shadow-soft)}.search-wrap input{flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px;min-width:0;padding:0 10px}.search-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer}.search-icon img{width:20px}.top-actions{justify-self:end;display:flex;align-items:center;gap:4px}.avatar{border:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#1769e0,#6d5ce7);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 0 0 3px rgba(23,105,224,.1)}.connection-pill{height:32px;padding:0 12px;border-radius:16px;background:var(--surface);display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;border:1px solid var(--line)}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(19,138,80,.1)}.connection-pill.error .connection-dot{background:var(--danger)}
.sidebar{grid-column:1;grid-row:2;display:flex;flex-direction:column;overflow:hidden;padding:8px 14px 14px 0}.sidebar:hover{overflow-y:auto}.compose-btn{margin:0 0 14px 10px;height:56px;min-width:144px;width:max-content;padding:0 22px;border-radius:18px;display:flex;align-items:center;gap:14px;background:var(--compose);font-weight:700;cursor:pointer;box-shadow:var(--shadow-soft);transition:.15s}.compose-btn:hover{box-shadow:0 5px 16px rgba(31,35,40,.14);transform:translateY(-1px)}.compose-btn img{width:24px}.nav-list{display:flex;flex-direction:column}.nav-item{height:34px;width:100%;display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:16px;padding:0 18px 0 26px;border-radius:0 17px 17px 0;cursor:pointer;text-align:left;font-size:14px;white-space:nowrap}.nav-item img{width:18px;height:18px}.nav-item:hover{background:var(--surface-hover)}.nav-item.active{background:var(--brand-soft);font-weight:750;color:var(--brand-deep)}.nav-count{font-size:12px}.sidebar-section-title{height:48px;margin-top:8px;padding:0 18px 0 26px;display:flex;align-items:center;justify-content:space-between;font-weight:700}.sidebar-section-title img{width:18px;opacity:.65}.sidebar-footer{margin:auto 14px 0 18px;padding-top:14px;border-top:1px solid var(--line)}.server-card{display:flex;gap:10px;align-items:flex-start;font-size:11px}.server-card strong,.server-card small{display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-card small{color:var(--muted);margin-top:2px}.app-shell.sidebar-collapsed .brand-logo,.app-shell.sidebar-collapsed .compose-btn span,.app-shell.sidebar-collapsed .nav-label,.app-shell.sidebar-collapsed .nav-count,.app-shell.sidebar-collapsed .sidebar-section-title,.app-shell.sidebar-collapsed .nav-list.secondary,.app-shell.sidebar-collapsed .sidebar-footer{display:none}.app-shell.sidebar-collapsed .compose-btn{min-width:56px;width:56px;padding:0;justify-content:center}.app-shell.sidebar-collapsed .nav-item{grid-template-columns:1fr;padding:0;justify-items:center}.main-area{grid-column:2;grid-row:2;min-width:0;padding:0 0 12px}.mail-surface{height:100%;display:flex;flex-direction:column;background:var(--surface);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(229,233,240,.7);box-shadow:0 1px 2px rgba(31,35,40,.03)}.right-rail{grid-column:3;grid-row:2;display:flex;align-items:center;flex-direction:column;padding-top:10px;gap:8px}.rail-divider{height:1px;width:24px;background:var(--line);margin:8px 0}