/* Gryffindor — schooly, vibrant, edtech design system.
   Distinct from SMCS / SystemOne (no rose, no Syne, no purple).
   Font: Nunito (rounded, friendly — the edtech staple).
   Primary: electric teal. Accent: warm amber-gold.
   Topbar: deep-teal-to-cyan gradient = instantly schooly, zero corporate. */

:root {
    /* ── Brand colours ── */
    --color-primary:       #0891B2;  /* electric teal (sky-600) */
    --color-primary-hover: #0E7490;
    --color-primary-light: #E0F7FA;  /* pale cyan tint */
    --color-primary-glow:  rgba(8,145,178,.35);
    --color-accent:        #F59E0B;  /* warm amber-gold */
    --color-accent-hover:  #D97706;
    --color-secondary:     #6D28D9;  /* violet — for occasional accents only */

    /* ── Semantic colours ── */
    --color-danger:  #EF4444;
    --color-success: #10B981;
    --color-warning: #F59E0B;

    /* ── Surfaces ── */
    --color-surface:   #ffffff;
    --color-surface-2: #F0FDFF;   /* pale cyan — clearly intentional, not just off-white */
    --color-surface-3: #CFFAFE;   /* stronger cyan for highlighted areas */

    /* ── Text ── */
    --color-text:   #0C2D3F;   /* deep teal-navy — warm, not cold slate */
    --color-muted:  #6B7280;
    --color-border: #BAE6FD;   /* light sky-blue border */

    /* ── Shape ── */
    --radius:      24px;    /* cards — chunky and friendly */
    --radius-sm:   14px;    /* inputs */
    --radius-pill: 999px;   /* buttons — true pill */

    /* ── Shadows ── */
    --shadow-sm: 0 2px 8px rgba(8,145,178,.07);
    --shadow:    0 6px 20px rgba(8,145,178,.12);
    --shadow-lg: 0 16px 48px rgba(8,145,178,.16);

    /* ── Gradients ── */
    --topbar-gradient:    linear-gradient(135deg, #075985 0%, #0891B2 55%, #0EA5E9 100%);
    --btn-gradient:       linear-gradient(135deg, #0891B2 0%, #06B6D4 100%);
    --btn-gradient-hover: linear-gradient(135deg, #0E7490 0%, #0891B2 100%);
    --avatar-gradient:    linear-gradient(135deg, #0891B2 0%, #06B6D4 60%, #38BDF8 100%);

    /* ── Typography ── */
    --font:         'Nunito', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body {
    padding: 0; margin: 0;
    font-family: var(--font);
    font-size: 15px;
    color: var(--color-text);
    background: var(--color-surface-2);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 900; letter-spacing: -.03em; line-height: 1.2; }

/* ── Left sidebar navigation ─────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 220px;
    background: var(--topbar-gradient);
    display: flex; flex-direction: column;
    z-index: 200; overflow: hidden;
    box-shadow: 4px 0 24px rgba(7,89,133,.22);
}

.sidebar-brand {
    display: flex; align-items: center;
    height: 56px; flex-shrink: 0;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.sidebar-brand .brand {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 900; letter-spacing: -.05em;
    color: #fff; text-decoration: none; white-space: nowrap;
    text-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.sidebar-brand .brand:hover { text-decoration: none; }
.sidebar-brand .brand .dot { color: var(--color-accent); }
.sidebar-brand .brand-icon { display: none; }

.sidebar-nav {
    flex: 1; overflow-y: auto; padding: 10px 8px;
    scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.sidebar-section {
    font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.38); margin: 12px 0 4px; padding: 0 10px;
}

.sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 12px;
    color: rgba(255,255,255,.75);
    font-size: 13px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: background 120ms, color 120ms;
}
.sidebar-link:hover {
    background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
}
.sidebar-link.active {
    background: rgba(255,255,255,.22); color: #fff;
}
.sidebar-icon {
    font-size: 17px; line-height: 1;
    flex-shrink: 0; width: 22px; text-align: center;
}
.sidebar-label { flex: 1; }
.sidebar-badge {
    background: var(--color-accent); color: #0C2D3F;
    font-size: 10px; font-weight: 900;
    padding: 1px 5px; border-radius: 999px;
    min-width: 17px; text-align: center;
}

.sidebar-footer {
    flex-shrink: 0; padding: 10px 8px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 12px;
    color: rgba(255,255,255,.8); font-size: 13px; font-weight: 700;
    margin-bottom: 5px;
}
.sidebar-user .avatar-sm {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.22);
    display: grid; place-items: center;
    font-size: 13px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.sidebar-user .user-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidebar-signout {
    display: block; width: 100%;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.65);
    border-radius: 10px; padding: 6px 0;
    font: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: background 120ms, color 120ms;
}
.sidebar-signout:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── Slim top bar (search + notifications + greeting) ────────────── */
.topbar-slim {
    position: fixed;
    top: 0; left: 220px; right: 0;
    height: 56px;
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    display: flex; align-items: center; gap: 14px;
    padding: 0 20px; z-index: 100;
    box-shadow: 0 2px 8px rgba(8,145,178,.06);
}
.topbar-search {
    /* Centred horizontally inside the topbar using absolute positioning   */
    /* so the right-side icons always sit flush right regardless of screen */
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 420px; max-width: calc(100% - 240px);
    display: flex;
}
.topbar-search input {
    width: 100%; border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    padding: 7px 18px; font-size: 14px; font-family: var(--font);
    background: var(--color-surface-2); color: var(--color-text);
    transition: border-color 150ms, box-shadow 150ms;
}
.topbar-search input:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8,145,178,.13); background: white;
}
.topbar-search input::placeholder { color: var(--color-muted); }
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-greeting { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.topbar-greeting strong { color: var(--color-text); }

/* ── Notification bell + drawer ──────────────────────────────────── */
.notif-wrap { position: relative; }
.notif-btn {
    background: none; border: none; cursor: pointer;
    font-size: 20px; padding: 8px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 150ms; position: relative;
}
.notif-btn:hover { background: var(--color-primary-light); }

.notif-drawer {
    position: absolute; top: calc(100% + 8px); right: -8px;
    width: 380px;
    background: white;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg), 0 0 0 2px var(--color-border);
    display: none; z-index: 500; overflow: hidden;
}
.notif-drawer.open { display: block; }
.notif-drawer-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px; border-bottom: 2px solid var(--color-border);
}
.notif-drawer-header h4 { margin: 0; font-size: 15px; }
.notif-drawer-body { max-height: 420px; overflow-y: auto; }
.notif-item {
    display: block; padding: 13px 20px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text); text-decoration: none;
    transition: background 120ms;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-surface-2); text-decoration: none; }
.notif-item.unread { background: var(--color-primary-light); }
.notif-item.unread:hover { background: #BAE6FD; }
.notif-item-title { font-size: 13px; font-weight: 700; margin: 0 0 2px; }
.notif-item-body  { font-size: 12px; color: var(--color-muted); margin: 0; }
.notif-item-time  { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
.notif-drawer-footer {
    padding: 12px 20px; text-align: center;
    border-top: 2px solid var(--color-border);
}

/* ── Main content area (offset for sidebar + slim topbar) ────────── */
main {
    margin-left: 220px;
    margin-top: 56px;
    min-height: calc(100vh - 56px);
}
/* No sidebar = no offsets (landing, auth pages) */
body.no-chrome main {
    margin-left: 0;
    margin-top: 0;
    min-height: 100vh;
}

/* ── Layout containers ───────────────────────────────────────────── */
.page        { max-width: 960px;  margin: 32px auto; padding: 0 20px; }
.page.narrow { max-width: 560px; }
.page.wide   { max-width: 1200px; }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 24px 28px;
    margin-bottom: 16px;
}
.card h2, .card h3 { margin-top: 0; }

/* Auth card */
.auth-card {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px;
    max-width: 460px;
    margin: 60px auto;
}
.auth-card h1 {
    margin: 0 0 6px;
    font-size: 28px; font-weight: 900; letter-spacing: -.05em;
}
.auth-card p.muted { margin-bottom: 24px; }

/* ── Forms ───────────────────────────────────────────────────────── */
.row { margin-bottom: 16px; display: flex; flex-direction: column; }
.row.inline { flex-direction: row; align-items: center; gap: 10px; }
label {
    font-size: 13px; font-weight: 700;
    color: var(--color-text); margin-bottom: 5px;
    letter-spacing: .01em;
}
label .hint { font-weight: 400; color: var(--color-muted); }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input:not([type]), textarea, select {
    width: 100%; padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit; color: inherit;
    background: var(--color-surface);
    transition: border-color 150ms, box-shadow 150ms;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(8,145,178,.13);
}
textarea { min-height: 90px; resize: vertical; }
label.checkbox {
    display: flex; gap: 8px; align-items: center;
    font-weight: 500; font-size: 14px; cursor: pointer;
}
label.checkbox input { width: auto; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary, button[type=submit], .btn {
    display: inline-block;
    background: var(--btn-gradient); color: white;
    border: none; padding: 10px 24px;
    border-radius: var(--radius-pill);
    font-family: var(--font); font-weight: 800; cursor: pointer; font-size: 14px;
    letter-spacing: .01em;
    transition: background 150ms ease, transform 130ms ease, box-shadow 150ms ease;
    box-shadow: 0 4px 14px var(--color-primary-glow);
}
.btn-primary:hover, button[type=submit]:hover, .btn:hover {
    background: var(--btn-gradient-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--color-primary-glow);
    text-decoration: none;
    color: white;
}
.btn-primary:active, button[type=submit]:active, .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px var(--color-primary-glow);
}

.btn.ghost, .btn-ghost {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    box-shadow: none;
}
.btn.ghost:hover, .btn-ghost:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    box-shadow: none;
    transform: translateY(-1px);
    color: var(--color-primary);
    text-decoration: none;
}
.btn.small, .btn-small { padding: 6px 14px; font-size: 13px; }
.btn.accent {
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
    color: #0C2D3F;
    box-shadow: 0 4px 14px rgba(245,158,11,.30);
}
.btn.accent:hover {
    background: linear-gradient(135deg, #D97706 0%, #EA580C 100%);
    box-shadow: 0 8px 24px rgba(245,158,11,.40);
    color: #0C2D3F;
}
.btn-link {
    background: none; border: none;
    color: var(--color-primary); cursor: pointer;
    padding: 0; font: inherit; font-weight: 700;
}
.btn-danger {
    background: transparent; border: 2px solid #FECACA;
    color: var(--color-danger); cursor: pointer;
    padding: 5px 12px; border-radius: var(--radius-pill);
    font: inherit; font-weight: 600; font-size: 13px;
    transition: background 150ms;
}
.btn-danger:hover { background: #FEF2F2; }

/* ── Utility ─────────────────────────────────────────────────────── */
.muted   { color: var(--color-muted); }
.small   { font-size: 13px; }
.text-danger  { color: var(--color-danger); font-size: 13px; }
.text-success { color: var(--color-success); }
.divider { height: 2px; background: var(--color-border); margin: 20px 0; border-radius: 999px; }
.flex { display: flex; gap: 12px; align-items: center; }
.flex.between { justify-content: space-between; }

/* Tags / chips */
.tag {
    display: inline-block; padding: 3px 10px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 800;
    letter-spacing: .025em;
}
.tag.muted     { background: #F3F4F6; color: var(--color-muted); }
.tag.amber     { background: #FEF3C7; color: #92400E; }
.tag.emerald   { background: #D1FAE5; color: #065F46; }
.tag.rose      { background: #FFE4E6; color: #9F1239; }
.tag.violet    { background: #EDE9FE; color: #5B21B6; }

/* Unread badge */
.badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--color-accent); color: #0C2D3F;
    border-radius: var(--radius-pill);
    font-size: 11px; font-weight: 800; margin-left: 4px;
    vertical-align: middle;
}

/* ── Feed list ───────────────────────────────────────────────────── */
.feed-list { display: flex; flex-direction: column; gap: 12px; }
.feed-item {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-left: 4px solid var(--color-primary-light);
    border-radius: var(--radius);
    padding: 18px 22px;
    transition: box-shadow 160ms, transform 160ms, border-left-color 160ms;
}
.feed-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
    border-left-color: var(--color-primary);
}
.feed-item header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 6px;
}
.feed-item header .author { font-weight: 800; }
.feed-item header .meta { font-size: 12px; color: var(--color-muted); }
.feed-item p { margin: 4px 0; white-space: pre-wrap; line-height: 1.6; }

/* ── Feed engagement ─────────────────────────────────────────────── */
.feed-engagement {
    display: flex; align-items: center; gap: 12px;
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.reaction-bar { display: flex; align-items: center; gap: 4px; }
.reaction-btn {
    background: none; border: 1.5px solid transparent;
    border-radius: 999px; padding: 3px 9px;
    font-size: 18px; cursor: pointer; line-height: 1.4;
    transition: background 120ms, border-color 120ms, transform 80ms;
}
.reaction-btn:hover { background: var(--color-bg); border-color: var(--color-border); transform: scale(1.15); }
.reaction-btn.active { background: var(--color-primary-light); border-color: var(--color-primary); }
.reaction-count { font-size: 12px; color: var(--color-muted); min-width: 60px; }
.comment-toggle-btn {
    background: none; border: none; cursor: pointer;
    font-size: 13px; color: var(--color-muted); padding: 2px 6px; border-radius: 6px;
    transition: color 120ms;
}
.comment-toggle-btn:hover { color: var(--color-text); }

/* ── Comment section ─────────────────────────────────────────────── */
.comment-section {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--color-border);
}
.comment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.comment { background: var(--color-bg); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.comment p { margin: 4px 0 0; }
.comment-form { display: flex; gap: 8px; align-items: center; }
.comment-input {
    flex: 1; padding: 8px 12px; border: 1.5px solid var(--color-border);
    border-radius: 999px; font-size: 14px; outline: none;
    background: var(--color-bg); color: var(--color-text);
    transition: border-color 150ms;
}
.comment-input:focus { border-color: var(--color-primary); }

/* ── Admin panel ─────────────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
    text-align: left; padding: 10px 16px;
    background: var(--color-bg); color: var(--color-muted);
    font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 2px solid var(--color-border);
}
.admin-table td { padding: 10px 16px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--color-bg); }
.quick-tile--alert { border: 2px solid var(--color-amber, #d97706); }

/* ── Inbox / DMs ─────────────────────────────────────────────────── */
.inbox-thread-list { display: flex; flex-direction: column; gap: 0; border: 2px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.inbox-thread {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    border-bottom: 1px solid var(--color-border); text-decoration: none;
    color: var(--color-text); transition: background 120ms;
}
.inbox-thread:last-child { border-bottom: none; }
.inbox-thread:hover { background: var(--color-bg); }
.inbox-thread--unread { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.inbox-thread-avatar {
    position: relative; width: 44px; height: 44px; border-radius: 50%;
    background: var(--color-primary-light); display: flex; align-items: center;
    justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; overflow: visible;
}
.inbox-thread-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.unread-badge {
    position: absolute; top: -4px; right: -4px; background: var(--color-primary);
    color: #fff; border-radius: 50%; font-size: 10px; font-weight: 700;
    width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
}
.inbox-thread-body { flex: 1; min-width: 0; }
.inbox-thread-name { font-weight: 700; }
.inbox-thread-preview { margin: 2px 0 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-thread-time { flex-shrink: 0; font-size: 12px; }

/* ── Chat window ─────────────────────────────────────────────────── */
.chat-window {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 520px; overflow-y: auto; padding: 18px;
    border: 2px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg); margin-bottom: 16px;
}
.chat-bubble {
    max-width: 72%; padding: 10px 14px; border-radius: 18px;
    font-size: 14px; line-height: 1.5;
}
.chat-bubble p { margin: 0 0 2px; }
.chat-time { display: block; font-size: 11px; }
.chat-bubble--mine {
    background: var(--color-primary); color: #fff;
    align-self: flex-end; border-bottom-right-radius: 4px;
}
.chat-bubble--mine .chat-time { color: rgba(255,255,255,.7); text-align: right; }
.chat-bubble--theirs {
    background: var(--color-surface); border: 1.5px solid var(--color-border);
    align-self: flex-start; border-bottom-left-radius: 4px;
}
.chat-compose { display: flex; gap: 10px; align-items: flex-end; }
.chat-input {
    flex: 1; padding: 10px 14px; border: 1.5px solid var(--color-border);
    border-radius: 16px; font-size: 14px; resize: none; line-height: 1.5;
    background: var(--color-bg); color: var(--color-text); outline: none;
    transition: border-color 150ms;
}
.chat-input:focus { border-color: var(--color-primary); }

/* ── Profile ─────────────────────────────────────────────────────── */
.profile-head { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; }
.profile-avatar {
    width: 96px; height: 96px; border-radius: 50%;
    background: var(--avatar-gradient);
    color: white;
    display: grid; place-items: center;
    font-size: 36px; font-weight: 900;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
.profile-name { font-size: 26px; font-weight: 900; margin: 0; letter-spacing: -.03em; }
.profile-meta { color: var(--color-muted); font-size: 14px; margin: 4px 0 0; }

/* ── Validation ──────────────────────────────────────────────────── */
.validation-summary-errors {
    background: #FEF2F2; color: var(--color-danger);
    border: 2px solid #FECACA; border-radius: var(--radius-sm);
    padding: 10px 14px; margin-bottom: 16px;
    list-style: none;
}
.validation-summary-errors ul { margin: 0; padding: 0 0 0 16px; }
.field-validation-error { color: var(--color-danger); font-size: 13px; }

/* ── Landing page helpers ────────────────────────────────────────── */
.hero-title {
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 900; letter-spacing: -.05em;
    line-height: 1.05;
}
.highlight      { color: var(--color-primary); }
.highlight-warm { color: var(--color-accent); }

/* ── Next-step widget ────────────────────────────────────────────── */
.next-step-card {
    border-left: 4px solid var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* ── Path stage list ─────────────────────────────────────────────── */
.stage-list { list-style: none; padding: 0; margin: 0; counter-reset: stage; }
.stage-list li {
    counter-increment: stage;
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 0;
    border-bottom: 2px solid var(--color-border);
}
.stage-list li:last-child { border-bottom: none; }
.stage-list li::before {
    content: counter(stage);
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; flex-shrink: 0;
    background: var(--btn-gradient); color: white;
    border-radius: 50%; font-weight: 900; font-size: 13px;
    margin-top: 1px;
    box-shadow: 0 2px 10px var(--color-primary-glow);
}
.stage-list li.current::before {
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
    color: #0C2D3F;
    box-shadow: 0 2px 10px rgba(245,158,11,.40);
}

/* ── Page hero banner ────────────────────────────────────────────── */
.page-hero {
    background: var(--topbar-gradient);
    padding: 36px 24px 32px;
}
.page-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
}
.page-hero .hero-emoji {
    font-size: 38px;
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}
.page-hero h1 {
    margin: 0 0 6px;
    font-size: 28px; font-weight: 900; letter-spacing: -.04em;
    color: #fff;
}
.page-hero .hero-sub {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 15px;
    max-width: 560px;
}
.page-hero .hero-actions {
    margin-top: 18px;
    display: flex; gap: 10px; flex-wrap: wrap;
}
.btn-white {
    display: inline-block;
    background: #fff; color: var(--color-primary);
    border: none; padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font); font-weight: 800; cursor: pointer; font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
    transition: background 150ms, transform 130ms, box-shadow 150ms;
    text-decoration: none;
}
.btn-white:hover {
    background: rgba(255,255,255,.88);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.24);
    color: var(--color-primary);
    text-decoration: none;
}
.btn-white-ghost {
    display: inline-block;
    background: rgba(255,255,255,.15); color: #fff;
    border: 2px solid rgba(255,255,255,.45);
    padding: 9px 20px;
    border-radius: var(--radius-pill);
    font-family: var(--font); font-weight: 700; font-size: 14px;
    text-decoration: none;
    transition: background 150ms, transform 130ms;
}
.btn-white-ghost:hover {
    background: rgba(255,255,255,.28);
    transform: translateY(-1px);
    color: #fff; text-decoration: none;
}

/* ── Quick-action emoji tiles ────────────────────────────────────── */
/* ── Status pills ───────────────────────────────────────────────────── */
.pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.pill--green   { background: #D1FAE5; color: #065F46; }
.pill--red     { background: #FEE2E2; color: #991B1B; }
.pill--amber   { background: #FEF3C7; color: #92400E; }
.pill--neutral { background: var(--color-surface-2, #f3f4f6); color: var(--color-muted); }
.pill--blue    { background: #DBEAFE; color: #1E40AF; }

.quick-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.quick-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 22px 12px 18px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 150ms, transform 150ms, border-color 150ms;
}
.quick-tile:hover {
    box-shadow: var(--shadow);
    transform: translateY(-3px);
    border-color: var(--color-primary);
    text-decoration: none;
}
.quick-tile .qt-icon  { font-size: 30px; line-height: 1; }
.quick-tile .qt-label { font-size: 13px; font-weight: 800; }
.quick-tile .qt-sub   { font-size: 11px; color: var(--color-muted); font-weight: 500; }

/* ── Two-column layout with sticky sidebar ───────────────────────── */
.layout-2col {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
}
.layout-main { min-width: 0; }
.layout-side  { display: flex; flex-direction: column; gap: 14px; }
.layout-side .card {
    position: sticky;
    top: calc(56px + 16px); /* slim topbar + gap */
    margin-bottom: 0;
}

/* Widget card links */
.widget-link {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--color-text); font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: background 120ms;
}
.widget-link:hover {
    background: var(--color-surface-3);
    text-decoration: none;
}
.stat-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
}
.stat-row:last-child { border-bottom: none; }
.stat-value { font-weight: 800; color: var(--color-primary); }

/* ── Mobile bottom navigation ────────────────────────────────────── */
.mobile-nav {
    display: none;  /* shown only on mobile via media query */
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface);
    border-top: 2px solid var(--color-border);
    padding: 6px 0 max(8px, env(safe-area-inset-bottom));
    z-index: 50;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 -4px 16px rgba(8,145,178,.10);
}
.mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 6px;
    color: var(--color-muted);
    font-size: 10px; font-weight: 700;
    text-decoration: none; letter-spacing: .02em;
    border-radius: 10px;
    transition: color 120ms;
}
.mobile-nav a .mn-icon { font-size: 22px; line-height: 1; }
.mobile-nav a.active,
.mobile-nav a:hover { color: var(--color-primary); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar collapses to icon-only (≤ 1100px) ────────────────────── */
@media (max-width: 1100px) {
    .sidebar { width: 64px; }
    .sidebar-label, .sidebar-section { display: none; }
    .sidebar-brand { padding: 0; justify-content: center; }
    .sidebar-brand .brand-name { display: none; }
    .sidebar-brand .brand-icon { display: inline; }
    .sidebar-user { padding: 6px; justify-content: center; }
    .sidebar-user .user-name { display: none; }
    .sidebar-badge { display: none; }
    .topbar-slim { left: 64px; }
    main { margin-left: 64px; }
    .topbar-greeting { display: none; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Sidebar hidden — bottom nav takes over */
    .sidebar { display: none; }
    .topbar-slim { left: 0; }
    main { margin-left: 0; padding-bottom: 72px; }

    /* Notification drawer full-width on mobile */
    .notif-drawer { width: calc(100vw - 20px); right: 0; left: auto; }

    /* Layout */
    .page { margin: 16px auto; padding: 0 14px; }
    .page.narrow { max-width: 100%; }

    /* Cards */
    .card { padding: 16px 18px; border-radius: 18px; }
    .auth-card { padding: 26px 20px; margin: 20px auto; border-radius: 18px; }
    .auth-card h1 { font-size: 24px; }

    /* Feed */
    .feed-item { padding: 14px 16px; border-radius: 18px; }

    /* Profile */
    .profile-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .profile-avatar { width: 72px; height: 72px; font-size: 28px; }
    .profile-name { font-size: 22px; }

    /* Utility */
    .flex.between { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Stage list */
    .stage-list li { gap: 10px; padding: 12px 0; }
    .stage-list li::before { width: 28px; height: 28px; font-size: 12px; }

    /* Two-column: collapse to single on mobile */
    .layout-2col { grid-template-columns: 1fr; }
    .layout-side  { display: none; }

    /* Bottom nav */
    .mobile-nav { display: grid; }

    /* Quick tiles: 2-up on phone */
    .quick-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Page hero */
    .page-hero { padding: 24px 16px 20px; }
    .page-hero h1 { font-size: 22px; }
    .page-hero .hero-emoji { font-size: 30px; }
}