.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--bg-app);
}

#sidebar-root { display: flex; }

/* Tune the drop-in IFP sidebar component to the portal's blue/light theme.
   Per the component's own README: override variables, never edit sidebar.css. */
.ifp-sidebar {
    --sb-width-expanded: 250px;
    --sb-accent: var(--brand-blue-600);
    position: sticky;
    top: 0;
    height: 100vh;
}
.ifp-sidebar[data-sidebar-theme="light"] {
    --sb-active-bg: var(--brand-blue-50);
}
.ifp-sidebar[data-sidebar-theme="light"] .ifp-sidebar__link.is-active {
    color: var(--brand-blue-600);
}
.ifp-sidebar__brand { padding: var(--space-4) var(--space-4) var(--space-2); }
.ifp-sidebar__brand img.ifp-sidebar__logo-full { width: auto; height: auto; max-width: 190px; max-height: 34px; }
.ifp-sidebar__brand img.ifp-sidebar__logo-mark { width: auto; height: auto; max-width: 34px; max-height: 32px; }

.main-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.topbar {
    height: var(--topbar-height);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 { font-size: var(--text-lg); margin: 0; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }

.page-content {
    padding: var(--space-6);
    flex: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.page-header p { margin: var(--space-1) 0 0; }

.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.toolbar .input, .toolbar .select { width: auto; min-width: 180px; }

/* Auth pages */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-app);
}
.auth-visual {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08), transparent 45%),
        linear-gradient(160deg, var(--ink-900), var(--brand-blue-800));
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-12);
}
.auth-visual .brand-mark {
    width: auto; height: auto;
    max-width: 140px; max-height: 46px;
}
.auth-visual .pitch { max-width: 420px; }
.auth-visual .pitch h2 { color: #fff; font-size: var(--text-2xl); }
.auth-visual .pitch p { color: rgba(255,255,255,0.72); }
.auth-visual .footnote { font-size: var(--text-xs); color: rgba(255,255,255,0.45); }

.auth-form-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--bg-app);
}
.auth-form-wrap { width: 100%; max-width: 380px; }
.auth-form-wrap h1 { margin-bottom: var(--space-1); }
.auth-form-wrap .lede { margin-bottom: var(--space-6); }

@media (max-width: 900px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}

@media (max-width: 640px) {
    .page-content { padding: var(--space-4); }
    .topbar { padding: 0 var(--space-4); }
}