:root {
    --h33-bg: #f8faff;
    --h33-surface: #ffffff;
    --h33-surface-soft: rgba(255, 255, 255, 0.86);
    --h33-border: rgba(114, 125, 177, 0.1);
    --h33-border-strong: rgba(108, 83, 255, 0.18);
    --h33-shadow: 0 24px 72px rgba(41, 54, 94, 0.07);
    --h33-shadow-soft: 0 16px 42px rgba(32, 44, 79, 0.045);
    --h33-text: #16203f;
    --h33-text-muted: #65718d;
    --h33-text-soft: #8d97b4;
    --h33-purple: #6d4df2;
    --h33-purple-strong: #5633de;
    --h33-purple-soft: #f0edff;
    --h33-blue: #4c8bf7;
    --h33-blue-soft: #eef5ff;
    --h33-mint: #2fbf7a;
    --h33-mint-soft: #effcf5;
    --h33-gold: #f3a018;
    --h33-gold-soft: #fff8eb;
    --h33-pink: #eb64d4;
    --h33-pink-soft: #fff0fb;
    --h33-danger: #f36868;
    --h33-card-radius: 28px;
    --h33-card-radius-sm: 20px;
    --h33-shell-radius: 34px;
    --h33-pill-radius: 999px;
    --h33-page-width: 1540px;
    --h33-nav-height: 84px;
    --h33-outline-width: 240px;
    --h33-builder-border: rgba(114, 125, 177, 0.1);
    --h33-accent-selected: rgba(109, 77, 242, 0.22);
    --h33-rail-bg: #ffffff;
    --h33-drawer-shadow: -18px 0 44px rgba(24, 33, 66, 0.16);
    --h33-drawer-scrim: rgba(20, 26, 48, 0.32);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(121, 99, 255, 0.06), transparent 30%),
        radial-gradient(circle at top right, rgba(69, 174, 255, 0.06), transparent 28%),
        linear-gradient(180deg, #fbfcff 0%, #f7f9ff 100%);
    color: var(--h33-text);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.h33-app {
    width: calc(100% - 8px);
    margin: 4px auto 18px;
}

#hub-app.is-pointer-dragging {
    user-select: none;
}

#hub-app.is-pointer-dragging .h33-drag-handle,
#hub-app.is-pointer-dragging .h33-palette-item {
    cursor: grabbing;
}

.h33-shell {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: var(--h33-shell-radius);
    box-shadow: var(--h33-shadow);
    overflow: hidden;
    backdrop-filter: blur(22px);
}

.h33-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: var(--h33-nav-height);
    padding: 18px 26px;
    border-bottom: 1px solid rgba(114, 125, 177, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9));
}

.h33-logo {
    display: inline-flex;
    align-items: center;
}

.h33-logo img {
    width: 132px;
    height: auto;
}

.h33-logo-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.h33-logo-label {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.h33-logo-subtitle {
    color: var(--h33-text-muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.h33-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.h33-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 14px;
    color: var(--h33-text);
    font-size: 12px;
    font-weight: 800;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.h33-nav-link:hover,
.h33-nav-link:focus-visible {
    color: var(--h33-text);
    background: rgba(109, 77, 242, 0.08);
}

.h33-nav-link.is-active {
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.06);
}

.h33-nav-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.h33-nav-search {
    width: min(360px, 42vw);
    min-width: 240px;
}

.h33-segmented {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    border: 1px solid var(--h33-border);
    background: rgba(245, 247, 255, 0.78);
}

.h33-segmented button {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease;
}

.h33-segmented button.is-active {
    color: var(--h33-text);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(70, 87, 141, 0.12);
}

.h33-notification {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--h33-border);
    background: rgba(255, 255, 255, 0.95);
    color: var(--h33-text-muted);
}

.h33-notification-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--h33-pill-radius);
    background: #f14d78;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px 7px 8px;
    border-radius: 18px;
    border: 1px solid var(--h33-border);
    background: rgba(255, 255, 255, 0.95);
}

.h33-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6d4df2, #436ef5);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.h33-profile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.h33-profile-eyebrow {
    color: var(--h33-text-soft);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-profile-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.h33-page {
    padding: 30px 28px 36px;
}

.h33-stack {
    display: grid;
    gap: 24px;
}

.h33-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.h33-eyebrow {
    margin: 0 0 10px;
    color: var(--h33-purple);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-headline {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(32px, 3.4vw, 52px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.h33-subhead {
    margin: 10px 0 0;
    max-width: 720px;
    color: var(--h33-text-muted);
    font-size: 17px;
    line-height: 1.6;
}

.h33-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 18px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.h33-button:hover,
.h33-button:focus-visible {
    transform: translateY(-1px);
}

.h33-button.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #744df7, #4d5bf4);
    box-shadow: 0 16px 28px rgba(90, 84, 240, 0.28);
}

.h33-button.is-secondary {
    color: var(--h33-purple-strong);
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(109, 77, 242, 0.18);
    box-shadow: var(--h33-shadow-soft);
}

.h33-button.is-ghost {
    color: var(--h33-text);
    background: rgba(255, 255, 255, 0.96);
    border-color: var(--h33-border);
}

.h33-button.is-small {
    min-height: 42px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 14px;
}

.h33-button.is-stretch {
    width: 100%;
}

.h33-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.h33-card {
    position: relative;
    background: var(--h33-surface);
    border: 1px solid var(--h33-border);
    border-radius: var(--h33-card-radius);
    box-shadow: var(--h33-shadow-soft);
    /* Default inner breathing room so bare cards (e.g. the Understand/Insights
       section cards) don't render their heading + content flush against the
       border. Padded card variants (.h33-create-list-panel, spotlight, etc.) are
       declared later in this file at equal specificity, so they still override
       this; full-bleed cards that need edge-to-edge content opt out explicitly. */
    padding: 20px;
}

.h33-card.is-soft {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.78));
    backdrop-filter: blur(18px);
}

.h33-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--h33-pill-radius);
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
    font-size: 12px;
    font-weight: 700;
}

.h33-pill.is-filled {
    background: linear-gradient(135deg, #7a58f7, #5a46f0);
    color: #fff;
}

.h33-pill.is-success {
    background: rgba(47, 191, 122, 0.12);
    color: #1f8a57;
}

.h33-pill.is-warning {
    background: rgba(243, 160, 24, 0.14);
    color: #b06a08;
}

.h33-grid-today {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(320px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

.h33-top-priority {
    padding: 22px;
    background:
        linear-gradient(135deg, rgba(242, 239, 255, 0.94), rgba(255, 255, 255, 0.92) 56%, rgba(243, 247, 255, 0.98)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.92));
}

.h33-top-priority-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(270px, 0.95fr);
    gap: 18px;
    align-items: center;
}

.h33-priority-copy {
    display: grid;
    gap: 16px;
}

.h33-priority-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(34px, 3vw, 48px);
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.h33-priority-subtitle {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 17px;
    line-height: 1.6;
}

.h33-priority-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h33-metric-card {
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(109, 77, 242, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
    display: grid;
    gap: 10px;
}

.h33-metric-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
}

.h33-metric-value {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.h33-metric-label {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.h33-priority-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    gap: 12px;
}

.h33-priority-preview {
    padding: 16px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(241, 243, 255, 0.98));
    border: 1px solid rgba(133, 147, 200, 0.18);
    box-shadow: 0 18px 40px rgba(98, 109, 160, 0.1);
}

.h33-preview-window {
    position: relative;
    min-height: 288px;
    border-radius: 26px;
    background: linear-gradient(145deg, #f7f3ff, #edf5ff);
    overflow: hidden;
    border: 1px solid rgba(109, 77, 242, 0.12);
}

.h33-preview-window::before,
.h33-preview-window::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(109, 77, 242, 0.14);
}

.h33-preview-window::before {
    width: 164px;
    height: 164px;
    right: -46px;
    top: -28px;
}

.h33-preview-window::after {
    width: 120px;
    height: 120px;
    left: -22px;
    bottom: -30px;
}

.h33-preview-browser {
    position: absolute;
    inset: 18px 22px auto 22px;
    height: 206px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(117, 128, 180, 0.12);
    box-shadow: 0 16px 34px rgba(93, 105, 156, 0.16);
    overflow: hidden;
}

.h33-preview-browser-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(117, 128, 180, 0.12);
}

.h33-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(120, 130, 170, 0.35);
}

.h33-preview-browser-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    height: calc(100% - 49px);
}

.h33-preview-sidebar {
    padding: 12px 10px;
    border-right: 1px solid rgba(117, 128, 180, 0.12);
    background: rgba(247, 249, 255, 0.92);
    display: grid;
    gap: 10px;
}

.h33-preview-sidebar-line,
.h33-preview-content-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(160, 171, 212, 0.18);
}

.h33-preview-content {
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(130px, 0.9fr);
    gap: 12px;
}

.h33-preview-hero {
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(145deg, #7c5cff, #5d40f5);
    color: #fff;
    display: grid;
    align-content: start;
    gap: 10px;
}

.h33-preview-hero h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.06;
}

.h33-preview-hero p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    line-height: 1.5;
}

.h33-preview-card-stack {
    display: grid;
    gap: 12px;
}

.h33-preview-mini-card {
    border-radius: 16px;
    border: 1px solid rgba(109, 77, 242, 0.1);
    background: rgba(249, 250, 255, 0.96);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.h33-preview-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.h33-preview-mini-pill {
    min-height: 28px;
    border-radius: 12px;
    background: rgba(109, 77, 242, 0.08);
}

.h33-rail {
    display: grid;
    gap: 18px;
}

.h33-action-card {
    padding: 22px;
    display: grid;
    gap: 14px;
}

.h33-action-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.h33-action-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.h33-action-card-icon.is-mint {
    background: var(--h33-mint-soft);
    color: var(--h33-mint);
}

.h33-action-card-icon.is-gold {
    background: var(--h33-gold-soft);
    color: var(--h33-gold);
}

.h33-action-card-icon.is-blue {
    background: var(--h33-blue-soft);
    color: var(--h33-blue);
}

.h33-action-card-eyebrow {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 4px;
}

.h33-action-card-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.h33-action-card-copy {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.h33-progress-strip {
    padding: 20px 22px;
    display: grid;
    gap: 18px;
}

.h33-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.h33-section-title {
    margin: 0;
    color: var(--h33-purple);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.h33-progress-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.h33-progress-card {
    display: grid;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(252, 253, 255, 0.95);
    border: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h33-progress-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
}

.h33-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(152, 167, 210, 0.16);
    overflow: hidden;
}

.h33-progress-fill {
    height: 100%;
    border-radius: inherit;
}

.h33-progress-fill.is-green {
    background: linear-gradient(90deg, #2fbf7a, #58d897);
}

.h33-progress-fill.is-blue {
    background: linear-gradient(90deg, #4c8bf7, #5f74f8);
}

.h33-progress-fill.is-purple {
    background: linear-gradient(90deg, #8a58f6, #6d4df2);
}

.h33-progress-fill.is-gold {
    background: linear-gradient(90deg, #f3a018, #ffbb4f);
}

.h33-project-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.h33-project-card {
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(251, 252, 255, 0.95));
}

.h33-project-cover {
    position: relative;
    min-height: 178px;
    padding: 18px;
    display: grid;
    align-content: space-between;
    color: #fff;
}

.h33-project-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(10, 20, 44, 0.28));
    pointer-events: none;
}

.h33-project-cover.is-violet {
    background: linear-gradient(135deg, #7b59f7, #5736df);
}

.h33-project-cover.is-gold {
    background: linear-gradient(135deg, #ffbf48, #ff8f45);
}

.h33-project-cover.is-mint {
    background: linear-gradient(135deg, #3ecf8e, #1fae77);
}

.h33-project-cover.is-blue {
    background: linear-gradient(135deg, #5c8eff, #2f58d5);
}

.h33-project-cover.is-pink {
    background: linear-gradient(135deg, #a85cf7, #ed6bce);
}

.h33-project-cover h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.h33-project-cover-copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
}

.h33-project-cover .h33-mini-window {
    position: absolute;
    right: 14px;
    bottom: 16px;
    width: 112px;
    height: 88px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.h33-project-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.h33-project-meta {
    display: grid;
    gap: 6px;
}

.h33-project-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.h33-project-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--h33-text-muted);
}

.h33-create-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(210px, 1fr));
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.h33-create-grid::-webkit-scrollbar {
    display: none;
}

.h33-create-card {
    min-height: 210px;
    padding: 24px;
    display: grid;
    gap: 18px;
    align-content: start;
    border: 1px solid rgba(114, 125, 177, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.95));
}

.h33-create-card h3,
.h33-utility-card h3,
.h33-builder-card h3,
.h33-builder-card h4 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    letter-spacing: -0.03em;
}

.h33-create-card p,
.h33-utility-card p,
.h33-builder-card p {
    margin: 0;
    color: var(--h33-text-muted);
    line-height: 1.55;
}

.h33-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.h33-card-icon .h33-icon,
.h33-workspace-page-icon .h33-icon,
.h33-media-thumb .h33-icon,
.h33-avatar-badge .h33-icon,
.h33-focus-avatar .h33-icon {
    width: 20px;
    height: 20px;
}

.h33-card-icon.is-violet {
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
}

.h33-card-icon.is-gold {
    background: rgba(243, 160, 24, 0.14);
    color: #d88a07;
}

.h33-card-icon.is-mint {
    background: rgba(47, 191, 122, 0.12);
    color: #18925b;
}

.h33-card-icon.is-blue {
    background: rgba(76, 139, 247, 0.12);
    color: #3874dc;
}

.h33-card-icon.is-pink {
    background: rgba(235, 100, 212, 0.12);
    color: #c53fa7;
}

.h33-utility-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.92fr;
    gap: 18px;
}

.h33-utility-card {
    padding: 24px;
    display: grid;
    gap: 18px;
}

.h33-list {
    display: grid;
    gap: 14px;
}

.h33-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.h33-list-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-list-item-copy {
    display: grid;
    gap: 4px;
}

.h33-list-label {
    font-size: 14px;
    font-weight: 700;
}

.h33-list-meta {
    color: var(--h33-text-muted);
    font-size: 13px;
}

.h33-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.h33-quick-action {
    min-height: 72px;
    padding: 16px 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: left;
}

.h33-idea-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
}

.h33-toast-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 40;
    display: grid;
    gap: 10px;
}

.h33-toast {
    max-width: 320px;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid rgba(109, 77, 242, 0.16);
    background: rgba(20, 28, 57, 0.94);
    color: #fff;
    box-shadow: 0 18px 40px rgba(17, 22, 48, 0.26);
}

.h33-toast-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.h33-toast-copy {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.55;
}

.h33-builder-page {
    display: grid;
    gap: 28px;
    align-content: start;
}

.h33-builder-back-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.h33-builder-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-builder-back-link:hover,
.h33-builder-back-link:focus-visible {
    color: var(--h33-purple-strong);
}

.h33-builder-back-icon {
    display: inline-flex;
    transform: rotate(180deg);
}

.h33-builder-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.h33-builder-breadcrumbs span:last-child {
    color: var(--h33-text);
}

.h33-builder-top {
    display: grid;
    gap: 14px;
}

.h33-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.h33-builder-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.h33-builder-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.h33-builder-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(32px, 2.5vw, 46px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.05;
}

.h33-builder-subtitle {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 720px;
}

.h33-builder-top-actions {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
}

.h33-builder-button-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.h33-saved-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-saved-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--h33-mint);
}

.h33-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border-radius: 22px;
}

.h33-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    flex: 1 1 180px;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.h33-step:hover,
.h33-step:focus-visible {
    border-color: rgba(109, 77, 242, 0.26);
    color: var(--h33-text);
}

.h33-step.is-active {
    color: var(--h33-purple-strong);
    border-color: rgba(109, 77, 242, 0.2);
    background: rgba(244, 240, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.12);
}

.h33-step-index {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(109, 77, 242, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.h33-builder-grid {
    display: grid;
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(280px, 320px);
    gap: 24px;
    align-items: start;
}

.h33-builder-grid.is-rail-collapsed {
    grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(82px, 96px);
}

.h33-outline-tools {
    margin-bottom: 8px;
}

/* In the narrow outline rail the shared 2-col .h33-form-grid squeezes the Filter
   select to ~108px and truncates "All lessons". Force a single full-width column. */
.h33-builder-column--outline .h33-outline-tools {
    grid-template-columns: minmax(0, 1fr);
}

/* Outline module cards use overflow:hidden (for rounded corners), which gives them a
   0 automatic-min in the grid and lets the row collapse below content — clipping the
   action buttons that now stack below the title. Size rows to their content instead. */
.h33-outline-list {
    grid-auto-rows: min-content;
    align-content: start;
}

.h33-mobile-action-bar {
    display: none;
}

.h33-mobile-action-copy {
    display: grid;
    gap: 4px;
}

.h33-mobile-action-copy strong {
    color: var(--h33-text);
    font-size: 13px;
}

.h33-mobile-action-copy span {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.h33-mobile-action-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h33-builder-column {
    display: grid;
    gap: 18px;
    align-content: start;
}

.h33-builder-column--outline,
.h33-builder-column--rail {
    position: sticky;
    top: 24px;
}

.h33-builder-column--outline .h33-card,
.h33-builder-column--rail .h33-card {
    border-color: rgba(114, 125, 177, 0.08);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 34px rgba(66, 79, 130, 0.05);
}

.h33-builder-column--outline .h33-builder-card,
.h33-builder-column--rail .h33-builder-card {
    padding: 18px;
    gap: 14px;
}

.h33-builder-column--canvas .h33-builder-panel {
    padding: 30px;
    border-color: rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 252, 255, 0.96));
    box-shadow: 0 24px 60px rgba(69, 80, 125, 0.08);
}

.h33-builder-card {
    padding: 20px;
    display: grid;
    gap: 14px;
}

.h33-builder-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.h33-builder-shell-card {
    gap: 18px;
}

.h33-builder-shell-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.h33-builder-shell-kicker,
.h33-builder-main-kicker {
    color: var(--h33-purple-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-builder-shell-title {
    margin: 6px 0 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 26px;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.h33-builder-shell-progress {
    display: flex;
    align-items: center;
    gap: 16px;
}

.h33-builder-progress-ring {
    --h33-progress: 0;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    padding: 6px;
    background: conic-gradient(#5f49f5 calc(var(--h33-progress) * 1%), rgba(226, 231, 246, 0.9) 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.h33-builder-progress-ring-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(114, 125, 177, 0.1);
}

.h33-builder-progress-ring-core strong {
    display: block;
    color: var(--h33-text);
    font-size: 22px;
    line-height: 1;
}

.h33-builder-progress-ring-core span {
    color: var(--h33-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.h33-builder-progress-copy {
    display: grid;
    gap: 6px;
}

.h33-builder-progress-copy strong {
    color: var(--h33-text);
    font-size: 16px;
}

.h33-builder-progress-copy span {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.h33-builder-shell-nav {
    display: grid;
    gap: 8px;
}

.h33-builder-shell-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
    border: 1px solid transparent;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.h33-builder-shell-nav-item:hover,
.h33-builder-shell-nav-item:focus-visible {
    background: rgba(248, 247, 255, 0.92);
    color: var(--h33-text);
}

.h33-builder-shell-nav-item.is-active {
    color: var(--h33-purple-strong);
    border-color: rgba(109, 77, 242, 0.12);
    background: linear-gradient(135deg, rgba(109, 77, 242, 0.1), rgba(244, 241, 255, 0.96));
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.04);
}

.h33-builder-shell-nav-icon {
    display: inline-flex;
    width: 18px;
    color: inherit;
}

.h33-builder-shell-checklist {
    display: grid;
    gap: 10px;
}

.h33-builder-shell-check-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
}

.h33-builder-shell-check-row strong {
    color: var(--h33-text);
    font-size: 13px;
}

.h33-builder-shell-check-row span {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-builder-shell-check-row .h33-mini-progress {
    grid-column: 1 / -1;
}

.h33-builder-shell-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h33-builder-shell-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(250, 251, 255, 0.94);
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-builder-shell-link:hover,
.h33-builder-shell-link:focus-visible {
    color: var(--h33-purple-strong);
    border-color: rgba(109, 77, 242, 0.2);
}

.h33-builder-help-card strong {
    color: var(--h33-text);
    font-size: 15px;
    line-height: 1.45;
}

.h33-builder-card-title {
    margin: 0;
    font-size: 20px;
}

.h33-outline-list,
.h33-settings-list,
.h33-palette-list,
.h33-assistant-stack,
.h33-readiness-list,
.h33-summary-list,
.h33-activity-list {
    display: grid;
    gap: 12px;
}

.h33-outline-module {
    border: 1px solid rgba(114, 125, 177, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    overflow: hidden;
}

.h33-outline-module-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 12px;
}

.h33-outline-module-head > [data-action="select-module"] {
    width: 100%;
    flex: none !important;
}

.h33-outline-module-head .h33-inline-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

.h33-outline-module-meta {
    display: grid;
    gap: 4px;
}

.h33-outline-kicker {
    color: var(--h33-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-outline-title {
    font-size: 15px;
    font-weight: 700;
}

.h33-outline-count {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-outline-toggle {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--h33-text-muted);
}

.h33-lesson-list {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.h33-lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.96);
    text-align: left;
}

.h33-lesson-item.is-active {
    border-color: rgba(109, 77, 242, 0.28);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.18);
}

.h33-lesson-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-lesson-left span:last-child {
    display: grid;
    gap: 3px;
}

.h33-lesson-left small {
    color: var(--h33-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.h33-lesson-index {
    color: var(--h33-purple);
    font-size: 12px;
    font-weight: 800;
}

.h33-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--h33-mint);
}

.h33-status-dot.is-warning {
    background: #f0a326;
}

.h33-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 700;
    padding: 10px 12px 4px;
}

.h33-settings-list button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    color: var(--h33-text-muted);
    font-size: 14px;
    text-align: left;
}

.h33-progress-panel {
    display: grid;
    gap: 14px;
}

.h33-progress-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h33-progress-panel-head strong {
    font-size: 18px;
}

.h33-progress-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--h33-text-muted);
    font-size: 14px;
}

.h33-mini-progress {
    display: grid;
    gap: 10px;
}

.h33-mini-progress-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    color: var(--h33-text-muted);
    font-size: 13px;
}

.h33-mini-progress-row strong {
    color: var(--h33-text);
    font-size: 13px;
}

.h33-builder-main {
    display: grid;
    gap: 18px;
}

.h33-builder-panel {
    padding: 24px;
    display: grid;
    gap: 20px;
}

.h33-builder-main-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.h33-builder-main-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.h33-builder-main-meta.is-stacked {
    display: grid;
    gap: 8px;
    align-items: flex-start;
}

.h33-builder-main-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.h33-builder-main-caption {
    color: var(--h33-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.h33-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(252, 253, 255, 0.96);
}

.h33-toolbar-tabs,
.h33-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.h33-toolbar-tab {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-toolbar-tab.is-active {
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
}

.h33-toolbar-icon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    color: var(--h33-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-builder-metric-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.h33-builder-metric-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.96);
}

.h33-builder-metric-card span {
    color: var(--h33-text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-builder-metric-card strong {
    color: var(--h33-text);
    font-size: 15px;
    line-height: 1.35;
}

.h33-canvas-assistant-card {
    display: grid;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(109, 77, 242, 0.1);
    background: linear-gradient(180deg, rgba(249, 247, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.h33-canvas-assistant-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.h33-canvas-assistant-copy {
    display: grid;
    gap: 8px;
}

.h33-canvas-assistant-copy strong {
    color: var(--h33-text);
    font-size: 20px;
    line-height: 1.25;
}

.h33-canvas-assistant-copy span:last-child {
    color: var(--h33-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.h33-canvas-assistant-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.h33-canvas-assistant-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 700;
}

.h33-hero-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.94fr);
    gap: 0;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 20px 38px rgba(76, 91, 148, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.h33-hero-block-copy {
    padding: 34px 30px;
    background: linear-gradient(145deg, rgba(241, 237, 255, 0.96), rgba(255, 255, 255, 0.98));
    display: grid;
    gap: 18px;
    align-content: center;
}

.h33-hero-block-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(32px, 2.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.h33-hero-block-copy p {
    color: var(--h33-text-muted);
    font-size: 16px;
}

.h33-hero-visual {
    min-height: 290px;
    padding: 24px;
    background:
        radial-gradient(circle at 75% 20%, rgba(109, 77, 242, 0.18), transparent 24%),
        radial-gradient(circle at 16% 74%, rgba(76, 139, 247, 0.18), transparent 22%),
        linear-gradient(145deg, rgba(253, 254, 255, 0.96), rgba(240, 244, 255, 0.98));
    display: grid;
    place-items: center;
}

.h33-hero-illustration {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 255, 0.98));
    border: 1px solid rgba(114, 125, 177, 0.12);
    overflow: hidden;
}

.h33-hero-illustration::before,
.h33-hero-illustration::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(109, 77, 242, 0.12);
}

.h33-hero-illustration::before {
    width: 170px;
    height: 170px;
    top: -36px;
    right: -38px;
}

.h33-hero-illustration::after {
    width: 130px;
    height: 130px;
    left: -26px;
    bottom: -26px;
}

.h33-hero-window {
    position: absolute;
    inset: 26px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    display: grid;
    grid-template-rows: 42px 1fr;
}

.h33-hero-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-hero-window-body {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
}

.h33-hero-window-sidebar {
    padding: 12px 10px;
    display: grid;
    gap: 10px;
    background: rgba(247, 249, 255, 0.92);
    border-right: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-hero-window-main {
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 14px;
}

.h33-hero-window-hero {
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(145deg, #734af6, #4b5cf4);
    color: #fff;
    display: grid;
    gap: 10px;
}

.h33-hero-window-cards {
    display: grid;
    gap: 10px;
}

.h33-hero-window-card {
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(248, 250, 255, 0.96);
}

.h33-canvas-actions {
    display: flex;
    justify-content: center;
}

.h33-canvas-intro {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 22px;
    border: 1px solid rgba(114, 125, 177, 0.09);
    background: linear-gradient(180deg, rgba(252, 253, 255, 0.98), rgba(246, 249, 255, 0.92));
}

.h33-canvas-intro-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.h33-canvas-intro-copy strong {
    display: block;
    margin-bottom: 4px;
    color: var(--h33-text);
}

.h33-canvas-intro-copy span,
.h33-inline-save-note {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-inline-ai-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h33-inline-ai-companion {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(109, 77, 242, 0.12);
    background: linear-gradient(180deg, rgba(246, 241, 255, 0.88), rgba(255, 255, 255, 0.98));
}

.h33-inline-ai-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.h33-inline-ai-head strong {
    display: block;
    color: var(--h33-text);
    font-size: 16px;
    letter-spacing: -0.02em;
}

.h33-inline-ai-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.h33-inline-ai-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.96);
    text-align: left;
}

.h33-inline-ai-choice strong {
    display: block;
    color: var(--h33-text);
    font-size: 13px;
}

.h33-inline-ai-choice span span {
    display: block;
    margin-top: 4px;
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-inline-ai-choice-icon {
    color: var(--h33-purple-strong);
    flex: 0 0 auto;
}

.h33-inline-ai-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.h33-inline-ai-prompt-row input {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 15px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
}

.h33-inline-ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(109, 77, 242, 0.14);
    background: rgba(244, 240, 255, 0.76);
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 700;
}

.h33-inline-ai-chip.is-subtle {
    min-height: 34px;
    padding: 0 12px;
    background: rgba(246, 248, 255, 0.92);
    border-color: rgba(114, 125, 177, 0.1);
    color: var(--h33-text);
}

.h33-add-block-button {
    width: 100%;
    min-height: 52px;
    border-radius: 18px;
    border: 1px dashed rgba(109, 77, 242, 0.24);
    background: rgba(249, 246, 255, 0.64);
    color: var(--h33-purple-strong);
    font-size: 14px;
    font-weight: 700;
}

.h33-add-block-button.is-drop-target,
.h33-block-list.is-drop-target {
    border-color: rgba(76, 139, 247, 0.34);
    box-shadow: 0 0 0 2px rgba(76, 139, 247, 0.12);
}

.h33-block-list {
    display: grid;
    gap: 16px;
}

.h33-block-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(114, 125, 177, 0.09);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(251, 252, 255, 0.96));
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.h33-block-card.is-selected {
    border-color: rgba(109, 77, 242, 0.22);
    box-shadow: 0 24px 46px rgba(93, 85, 232, 0.12);
    transform: translateY(-1px);
}

.h33-block-card.is-drop-target,
.h33-outline-module.is-drop-target,
.h33-lesson-row.is-drop-target {
    border-color: rgba(76, 139, 247, 0.34);
    box-shadow: 0 0 0 2px rgba(76, 139, 247, 0.12);
}

.h33-block-card.is-collapsed {
    gap: 12px;
}

.h33-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.h33-block-workflow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h33-block-workflow-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.96);
    color: var(--h33-text);
    font-size: 12px;
    font-weight: 700;
}

.h33-block-head-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-drag-handle {
    width: 22px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a0accf;
    border: 1px dashed rgba(114, 125, 177, 0.16);
    background: rgba(248, 250, 255, 0.9);
    cursor: grab;
    flex-shrink: 0;
}

.h33-drag-handle.is-dragging,
.is-dragging.h33-drag-handle {
    opacity: 0.55;
    cursor: grabbing;
}

.h33-block-title {
    font-size: 15px;
    font-weight: 700;
}

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

.h33-block-action {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--h33-text-muted);
    background: rgba(255, 255, 255, 0.84);
}

.h33-block-action[data-action="toggle-block-collapse"] .h33-icon {
    transition: transform 160ms ease;
}

.h33-block-card.is-collapsed .h33-block-action[data-action="toggle-block-collapse"] .h33-icon {
    transform: rotate(-90deg);
}

.h33-inline-block-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.h33-inline-block-tools-label {
    color: var(--h33-text-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.h33-block-body {
    color: var(--h33-text-muted);
    font-size: 15px;
    line-height: 1.6;
}

.h33-block-collapsed-preview {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.92);
    color: var(--h33-text-muted);
}

.h33-block-image {
    display: grid;
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.h33-block-media {
    border-radius: 18px;
    min-height: 96px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background:
        linear-gradient(145deg, rgba(247, 244, 255, 0.95), rgba(240, 245, 255, 0.98));
    overflow: hidden;
    display: grid;
    place-items: stretch;
}

.h33-block-media.is-small,
.h33-preview-media.is-small {
    max-width: 180px;
}

.h33-block-media.is-medium,
.h33-preview-media.is-medium {
    max-width: 260px;
}

.h33-block-media.is-large,
.h33-preview-media.is-large {
    max-width: 340px;
}

.h33-block-media.is-full,
.h33-preview-media.is-full {
    max-width: none;
}

.h33-block-media.is-align-left,
.h33-preview-media.is-align-left {
    justify-self: start;
}

.h33-block-media.is-align-center,
.h33-preview-media.is-align-center {
    justify-self: center;
}

.h33-block-media.is-align-right,
.h33-preview-media.is-align-right {
    justify-self: end;
}

.h33-media-asset {
    width: 100%;
    height: 100%;
    min-height: 96px;
    object-fit: cover;
    display: block;
}

.h33-media-empty,
.h33-video-link-copy {
    min-height: 100%;
    padding: 16px;
    display: grid;
    gap: 8px;
    align-content: center;
    justify-items: start;
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-media-empty strong,
.h33-video-link-copy strong {
    color: var(--h33-text);
    font-size: 14px;
}

.h33-block-stack {
    display: grid;
    gap: 10px;
}

.h33-video-thumb {
    position: relative;
    border-radius: 18px;
    min-height: 102px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: linear-gradient(145deg, rgba(225, 232, 249, 0.72), rgba(248, 249, 255, 0.96));
    overflow: hidden;
}

.h33-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin-left: -26px;
    margin-top: -26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--h33-purple-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(50, 59, 102, 0.18);
}

.h33-video-frame {
    width: 100%;
    min-height: 182px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: #111729;
}

.h33-video-frame iframe,
.h33-video-frame video {
    width: 100%;
    height: 100%;
    min-height: 182px;
    border: 0;
    display: block;
}

.h33-tab-shell {
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    overflow: hidden;
}

.h33-tab-shell.is-editable {
    background: rgba(255, 255, 255, 0.98);
}

.h33-tab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: rgba(248, 250, 255, 0.96);
    border-bottom: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-tab-button {
    min-height: 46px;
    padding: 0 18px;
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.h33-tab-button.is-active {
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-purple-strong);
}

.h33-tab-editor-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 8px 10px;
    border-right: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-tab-editor-pill.is-active {
    background: rgba(255, 255, 255, 0.98);
}

.h33-tab-activate {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
    flex: 0 0 auto;
}

.h33-tab-label-editor {
    min-width: 88px;
    font-size: 14px;
    font-weight: 700;
    color: var(--h33-text);
}

.h33-tab-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 700;
}

.h33-tab-body {
    padding: 18px 22px;
}

.h33-tab-body ul {
    margin: 0;
    padding-left: 18px;
    color: var(--h33-text-muted);
    line-height: 1.7;
}

.h33-quiz-block,
.h33-file-block,
.h33-embed-block,
.h33-callout-block,
.h33-certificate-block,
.h33-audio-block,
.h33-accordion-block,
.h33-button-preview {
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(248, 250, 255, 0.96);
    padding: 16px 18px;
}

.h33-callout-block {
    background: rgba(255, 248, 235, 0.72);
    border-color: rgba(243, 160, 24, 0.2);
}

.h33-callout-block.is-info {
    background: rgba(236, 244, 255, 0.92);
    border-color: rgba(91, 137, 247, 0.18);
}

.h33-callout-block.is-tip {
    background: rgba(239, 252, 246, 0.94);
    border-color: rgba(33, 163, 107, 0.18);
}

.h33-callout-block.is-warning {
    background: rgba(255, 248, 235, 0.94);
    border-color: rgba(243, 160, 24, 0.22);
}

.h33-callout-block.is-success {
    background: rgba(239, 252, 246, 0.94);
    border-color: rgba(33, 163, 107, 0.18);
}

.h33-divider-block {
    height: 1px;
    background: rgba(114, 125, 177, 0.14);
}

.h33-divider-block.is-dashed {
    border-top: 1px dashed rgba(114, 125, 177, 0.24);
    background: transparent;
}

.h33-divider-block.is-accent {
    height: 2px;
    background: linear-gradient(90deg, rgba(109, 77, 242, 0.18), rgba(91, 137, 247, 0.46), rgba(109, 77, 242, 0.18));
}

.h33-divider-block.is-tight {
    margin: 8px 0;
}

.h33-divider-block.is-medium {
    margin: 16px 0;
}

.h33-divider-block.is-wide {
    margin: 28px 0;
}

.h33-block-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.h33-comment-pill {
    border: 1px solid rgba(114, 125, 177, 0.12);
    border-radius: var(--h33-pill-radius);
    background: rgba(248, 250, 255, 0.96);
    color: var(--h33-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
    cursor: pointer;
}

.h33-comment-pill.is-open {
    background: rgba(255, 247, 231, 0.94);
    color: #8f5f06;
}

.h33-comment-pill.is-resolved {
    background: rgba(237, 251, 244, 0.96);
    color: #157347;
}

.h33-inline-fix {
    border: 0;
    background: transparent;
    color: var(--h33-purple-strong);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 0 2px;
    cursor: pointer;
}

.h33-inline-fix:focus-visible {
    outline: 2px solid rgba(76, 139, 247, 0.38);
    outline-offset: 3px;
    border-radius: 6px;
}

.h33-validation-item {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 247, 229, 0.72);
    border: 1px solid rgba(230, 171, 72, 0.18);
}

.h33-validation-item strong {
    color: var(--h33-text);
    font-size: 13px;
}

.h33-validation-item span,
.h33-validation-item em {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

.h33-inline-note,
.h33-inline-warning {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}

.h33-inline-note {
    background: rgba(246, 248, 255, 0.9);
    color: var(--h33-text-muted);
}

.h33-inline-warning {
    background: rgba(255, 247, 231, 0.92);
    color: #8f5f06;
}

.h33-button-preview.is-align-center {
    text-align: center;
}

.h33-button-preview.is-align-right {
    text-align: right;
}

.h33-audio-player {
    display: grid;
    gap: 10px;
}

.h33-audio-player audio {
    width: 100%;
}

.h33-audio-player.is-empty {
    min-height: 72px;
}

.h33-file-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.92);
}

.h33-file-download.is-empty {
    border-style: dashed;
}

.h33-embed-frame {
    position: relative;
    width: 100%;
    margin-top: 12px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: #fff;
}

.h33-embed-frame::before {
    content: "";
    display: block;
    padding-top: var(--h33-embed-ratio, 56.25%);
}

.h33-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.h33-accordion-item + .h33-accordion-item {
    margin-top: 10px;
}

.h33-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    text-align: left;
    flex: 0 0 auto;
}

.h33-accordion-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-accordion-title-editor {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--h33-text);
}

.h33-accordion-item.is-open .h33-preview-copy {
    margin-top: 12px;
}

.h33-quiz-options {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.h33-quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.96);
    text-align: left;
}

.h33-quiz-option.is-selected {
    border-color: rgba(109, 77, 242, 0.3);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.18);
}

.h33-quiz-option-mark {
    display: inline-flex;
}

.h33-preview-textarea {
    width: 100%;
    min-height: 120px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    resize: vertical;
}

.h33-certificate-preview {
    display: grid;
    gap: 12px;
}

.h33-certificate-title {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.h33-certificate-meta {
    display: grid;
    gap: 6px;
    color: var(--h33-text-muted);
    font-size: 13px;
}

.h33-certificate-criteria-list {
    display: grid;
    gap: 10px;
}

.h33-certificate-criterion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.92);
}

.h33-certificate-criterion .h33-inline-editor {
    flex: 1 1 auto;
    min-width: 0;
}

.h33-certificate-summary {
    border-radius: 16px;
    background: rgba(246, 248, 255, 0.9);
}

.h33-block-body.is-quote {
    border-left: 3px solid rgba(109, 77, 242, 0.3);
    padding-left: 14px;
    font-style: italic;
}

.h33-block-body.is-callout {
    border-radius: 18px;
    background: rgba(244, 239, 255, 0.64);
    padding: 14px 16px;
}

.h33-preview-copy.is-quote {
    border-left: 3px solid rgba(109, 77, 242, 0.3);
    padding-left: 14px;
    font-style: italic;
}

.h33-preview-copy.is-callout {
    border-radius: 18px;
    background: rgba(244, 239, 255, 0.64);
    padding: 14px 16px;
}

.h33-side-tabs {
    display: inline-flex;
    width: 100%;
    padding: 4px;
    gap: 4px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(246, 248, 255, 0.9);
}

.h33-side-tabs--expanded {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-side-tab {
    flex: 1 1 0;
    min-height: 44px;
    border-radius: 12px;
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.h33-side-tab.is-active {
    color: var(--h33-purple-strong);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 18px rgba(70, 87, 141, 0.12);
}

.h33-palette-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    text-align: left;
    cursor: grab;
}

.h33-right-rail {
    gap: 18px;
}

.h33-right-rail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.h33-right-rail-body {
    display: grid;
    gap: 18px;
}

.h33-builder-rail-stack {
    display: grid;
    gap: 16px;
}

.h33-builder-rail-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.h33-builder-rail-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(250, 251, 255, 0.92);
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-builder-rail-chip.is-active {
    color: var(--h33-purple-strong);
    border-color: rgba(109, 77, 242, 0.16);
    background: rgba(244, 240, 255, 0.9);
}

.h33-side-compact-nav {
    display: grid;
    gap: 10px;
}

.h33-side-compact-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 74px;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(250, 251, 255, 0.96);
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-side-compact-button.is-active {
    color: var(--h33-purple-strong);
    border-color: rgba(109, 77, 242, 0.18);
    background: rgba(244, 240, 255, 0.9);
}

.h33-palette-item.is-dragging {
    opacity: 0.62;
    cursor: grabbing;
}

.h33-palette-item-copy {
    display: grid;
    gap: 4px;
}

.h33-palette-item-title {
    font-size: 14px;
    font-weight: 700;
}

.h33-palette-item-copy span {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

.h33-builder-utility-card {
    gap: 16px;
}

.h33-builder-utility-card.is-highlighted {
    border-color: rgba(109, 77, 242, 0.18);
    box-shadow: 0 20px 38px rgba(84, 88, 212, 0.08);
}

.h33-builder-utility-chip-row {
    display: grid;
    gap: 10px;
}

.h33-assistant-quick,
.h33-assistant-latest {
    display: grid;
    gap: 8px;
}

.h33-builder-utility-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.h33-builder-utility-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.h33-builder-utility-metric {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(250, 251, 255, 0.96);
}

.h33-builder-utility-metric strong {
    color: var(--h33-text);
    font-size: 16px;
}

.h33-builder-utility-metric span {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-builder-utility-note {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(250, 251, 255, 0.9);
}

.h33-builder-utility-note strong {
    color: var(--h33-text);
}

.h33-builder-utility-note span {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-builder-source-list,
.h33-builder-checklist {
    display: grid;
    gap: 10px;
}

.h33-builder-source-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.98);
}

.h33-builder-source-copy {
    display: grid;
    gap: 4px;
}

.h33-builder-source-copy strong {
    color: var(--h33-text);
    font-size: 14px;
}

.h33-builder-source-copy span {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-builder-source-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(114, 125, 177, 0.1);
    color: var(--h33-text-muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.h33-builder-source-state.is-ready {
    background: rgba(47, 191, 122, 0.12);
    color: #1f8a57;
}

.h33-builder-empty-state {
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px dashed rgba(109, 77, 242, 0.2);
    background: rgba(249, 246, 255, 0.7);
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.h33-builder-template-grid {
    display: grid;
    gap: 10px;
}

.h33-builder-template-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    text-align: left;
}

.h33-builder-template-card span:last-child {
    display: grid;
    gap: 4px;
}

.h33-builder-template-card strong {
    color: var(--h33-text);
    font-size: 14px;
}

.h33-builder-template-card span:last-child span {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-builder-checklist-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
}

.h33-builder-checklist-row + .h33-builder-checklist-row {
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-builder-checklist-row strong {
    color: var(--h33-text);
    font-size: 14px;
}

.h33-builder-checklist-row span {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-builder-checklist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c48710;
}

.h33-builder-checklist-icon.is-complete {
    color: #1f8a57;
}

.h33-builder-page.is-course-builder {
    gap: 20px;
}

.h33-builder-page.is-course-builder .h33-builder-top {
    gap: 18px;
}

.h33-builder-page.is-course-builder .h33-builder-back-row {
    justify-content: flex-start;
}

.h33-builder-page.is-course-builder .h33-builder-header {
    align-items: flex-start;
}

.h33-builder-page.is-course-builder .h33-builder-title {
    font-size: clamp(26px, 2.6vw, 44px);
}

.h33-builder-page.is-course-builder .h33-builder-grid {
    grid-template-columns: minmax(var(--h33-outline-width), 260px) minmax(0, 1fr);
    gap: 22px;
}

.h33-builder-page.is-course-builder .h33-builder-grid.is-rail-collapsed {
    grid-template-columns: minmax(var(--h33-outline-width), 260px) minmax(0, 1fr);
}

.h33-builder-page.is-course-builder {
    overflow-x: hidden;
}

.h33-builder-page.is-course-builder .h33-builder-column--canvas .h33-builder-panel {
    padding: 22px;
    gap: 22px;
}

.h33-builder-page.is-course-builder .h33-builder-column--rail {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(420px, 92vw);
    max-width: 92vw;
    z-index: 60;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px 20px calc(env(safe-area-inset-bottom, 0px) + 96px);
    background: var(--h33-rail-bg);
    box-shadow: var(--h33-drawer-shadow);
    transform: translateX(0);
    transition: transform 220ms ease;
}

.h33-builder-page.is-course-builder .h33-builder-column--rail.is-collapsed {
    transform: translateX(100%);
    box-shadow: none;
    pointer-events: none;
}

.h33-builder-rail-scrim {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--h33-drawer-scrim);
    backdrop-filter: blur(2px);
}

/* Desktop: the AI Assistant rail is a PERSISTENT side column, not a blocking overlay.
   The builder stays fully visible and interactive — no scrim, no blur. The fixed drawer +
   scrim treatment above is retained only for tablet/mobile (below 1200px). */
@media (min-width: 1200px) {
    .h33-builder-page.is-course-builder .h33-builder-grid:not(.is-rail-collapsed) {
        grid-template-columns: minmax(var(--h33-outline-width), 260px) minmax(0, 1fr) min(400px, 30vw);
    }
    .h33-builder-page.is-course-builder .h33-builder-column--rail {
        position: sticky;
        top: 16px;
        right: auto;
        height: auto;
        max-height: calc(100vh - 32px);
        width: auto;
        max-width: none;
        z-index: 1;
        box-shadow: none;
        border-left: 1px solid #e8ebf2;
        transform: none;
        transition: none;
    }
    .h33-builder-page.is-course-builder .h33-builder-column--rail.is-collapsed {
        display: none;
    }
    .h33-builder-rail-scrim {
        display: none !important;
    }
}

.h33-builder-sidebar-shell {
    display: grid;
    gap: 18px;
}

.h33-builder-sidebar-nav-card {
    display: grid;
    gap: 10px;
    padding-top: 8px;
}

.h33-builder-sidebar-title {
    margin: 0;
    padding: 0 14px 6px;
    color: var(--h33-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.h33-builder-shell-nav.is-sidebar {
    gap: 6px;
}

.h33-builder-shell-nav.is-sidebar .h33-builder-shell-nav-item {
    font-weight: 600;
}

.h33-builder-page.is-course-builder .h33-builder-shell-nav-item {
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
}

.h33-builder-progress-card {
    gap: 18px;
}

.h33-builder-progress-card-head strong {
    color: var(--h33-text);
    font-size: 15px;
}

.h33-builder-page.is-course-builder .h33-builder-progress-card .h33-builder-shell-progress {
    justify-content: center;
}

.h33-builder-progress-checklist {
    display: grid;
    gap: 10px;
}

.h33-builder-page.is-course-builder .h33-builder-column--outline .h33-builder-card.is-course-compact {
    padding: 14px;
    gap: 10px;
}

.h33-builder-page.is-course-builder .h33-builder-column--outline .h33-outline-list {
    max-height: calc(100vh - 320px);
    overflow: auto;
}

.h33-builder-page.is-course-builder .h33-builder-column--outline .h33-builder-progress-card .h33-builder-progress-ring {
    transform: scale(0.8);
}

.h33-builder-page.is-course-builder .h33-builder-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.h33-builder-page.is-course-builder .h33-builder-top-actions .h33-saved-state {
    margin-right: auto;
}

.h33-builder-progress-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-builder-progress-check-icon {
    display: inline-flex;
    color: rgba(109, 77, 242, 0.55);
}

.h33-builder-progress-check-icon.is-complete {
    color: #1f8a57;
}

.h33-builder-workspace-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.h33-builder-workspace-tabs,
.h33-builder-workspace-meta,
.h33-builder-workspace-actions,
.h33-hero-action-row,
.h33-hero-block-kicker-row,
.h33-canvas-assistant-kicker-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.h33-builder-workspace-meta {
    justify-content: flex-end;
}

.h33-builder-workspace-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-builder-workspace-tab.is-active {
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
    box-shadow: inset 0 -2px 0 rgba(109, 77, 242, 0.28);
}

.h33-builder-workspace-tab-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(114, 125, 177, 0.12);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-builder-page.is-course-builder .h33-hero-block {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
    border-radius: 24px;
}

.h33-builder-page.is-course-builder .h33-hero-block-copy {
    padding: 38px 32px 30px;
    gap: 20px;
}

.h33-hero-block-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
    font-size: 11px;
    font-weight: 800;
}

.h33-builder-page.is-course-builder .h33-hero-block-title {
    font-size: clamp(28px, 2.5vw, 48px);
}

.h33-builder-page.is-course-builder .h33-builder-metric-row {
    gap: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-builder-page.is-course-builder .h33-builder-metric-card {
    border-radius: 0;
    border: 0;
    border-right: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-builder-page.is-course-builder .h33-builder-metric-card:last-child {
    border-right: 0;
}

.h33-canvas-assistant-card.is-course-builder {
    gap: 18px;
    padding: 20px 20px 22px;
}

.h33-canvas-assistant-actions.is-five-up {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.h33-canvas-assistant-action.is-course-builder {
    min-height: 0;
    padding: 14px;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    display: grid;
    gap: 6px;
}

.h33-canvas-assistant-action-title {
    color: var(--h33-text);
    font-size: 14px;
    font-weight: 700;
}

.h33-canvas-assistant-action.is-course-builder span:last-child {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-canvas-assistant-prompt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
}

.h33-canvas-assistant-prompt-row input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.14);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.h33-builder-comment-row {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.h33-builder-page.is-course-builder .h33-builder-rail-stack.is-course-builder {
    gap: 14px;
}

.h33-assistant-card {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(250, 251, 255, 0.98);
    display: grid;
    gap: 14px;
}

.h33-assistant-prompt-grid {
    display: grid;
    gap: 10px;
}

.h33-assistant-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.h33-assistant-output {
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(244, 239, 255, 0.92), rgba(255, 255, 255, 0.98));
    border: 1px solid rgba(109, 77, 242, 0.12);
    color: var(--h33-text-muted);
    line-height: 1.6;
}

.h33-assistant-apply-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.h33-summary-grid {
    display: grid;
    grid-template-columns: 0.96fr 1.08fr 1.08fr 0.78fr;
    gap: 16px;
}

.h33-summary-card {
    padding: 22px;
    display: grid;
    gap: 16px;
}

.h33-summary-visual {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.h33-summary-thumbnail {
    min-height: 92px;
    border-radius: 18px;
    background:
        radial-gradient(circle at 75% 24%, rgba(109, 77, 242, 0.18), transparent 24%),
        linear-gradient(145deg, #eef3ff, #f4efff);
    border: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-readiness-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    color: var(--h33-text-muted);
    font-size: 14px;
}

.h33-readiness-row strong,
.h33-readiness-copy strong {
    color: var(--h33-text);
}

.h33-readiness-copy {
    display: grid;
    gap: 4px;
}

.h33-readiness-copy span,
.h33-readiness-copy em {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

.h33-mini-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(114, 125, 177, 0.13);
}

.h33-mini-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #56c7a5, #4c8bf7);
}

.h33-readiness-state.is-complete {
    color: #21a36b;
}

.h33-readiness-state.is-progress {
    color: #b17b07;
}

.h33-next-step-card {
    background: linear-gradient(145deg, #6f4ef6, #4f5bf1);
    color: #fff;
}

.h33-next-step-card p,
.h33-next-step-card .h33-list-meta {
    color: rgba(255, 255, 255, 0.76);
}

.h33-next-step-actions {
    display: grid;
    gap: 12px;
}

.h33-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(19, 23, 39, 0.54);
    backdrop-filter: blur(10px);
}

.h33-modal {
    width: min(1120px, calc(100vw - 28px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    padding: 24px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 70px rgba(19, 24, 46, 0.28);
}

/* Desktop preview should fill the browser like a real desktop viewport; tablet/mobile
   keep the roomy modal but constrain the surface (handled on .h33-preview-surface). */
.h33-modal.is-preview-desktop {
    width: calc(100vw - 28px);
    max-width: none;
}

/* Dark-mode preview darkens the WHOLE modal (chrome + both content columns), not just the
   left lesson surface. Scoped to .is-preview-dark so light mode is untouched. */
.h33-modal--preview.is-preview-dark {
    background: #0d1220;
    border-color: rgba(255, 255, 255, 0.08);
}
.h33-modal--preview.is-preview-dark .h33-modal-title {
    color: #f4f7ff;
}
.h33-modal--preview.is-preview-dark .h33-eyebrow {
    color: #aab4d4;
}
.h33-modal--preview.is-preview-dark .h33-subhead {
    color: #c3ccdf;
}
.h33-modal--preview.is-preview-dark .h33-toolbar-tab {
    color: #c3ccdf;
}
.h33-modal--preview.is-preview-dark .h33-toolbar-tab.is-active {
    background: rgba(124, 111, 255, 0.24);
    color: #ffffff;
}
.h33-modal--preview.is-preview-dark .h33-modal-head .h33-button.is-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: #e7ecf7;
}

.h33-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.h33-modal-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 30px;
    letter-spacing: -0.04em;
}

.h33-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 18px;
}

.h33-preview-surface {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.94));
    display: grid;
    gap: 16px;
    /* Pack rows at the top so the two-column modal grid can't stretch them tall (which ballooned
       the pill/buttons when the aside column was taller than the lesson). */
    align-content: start;
}
/* In the preview modal keep the lesson card sized to its content instead of stretching to match
   the (often taller) aside column. */
.h33-modal-grid > .h33-preview-surface {
    align-self: start;
}
/* The status pill is a grid child; keep its natural inline size rather than stretching full-width. */
.h33-preview-surface > .h33-pill {
    justify-self: start;
}

.h33-preview-surface h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 36px;
    line-height: 1.06;
    letter-spacing: -0.05em;
}

.h33-preview-surface p {
    margin: 0;
    color: var(--h33-text-muted);
    line-height: 1.65;
}

.h33-preview-surface .h33-block-list {
    gap: 12px;
}

.h33-empty-state {
    min-height: 150px;
    border-radius: 20px;
    border: 1px dashed rgba(109, 77, 242, 0.28);
    background: rgba(249, 246, 255, 0.62);
    color: var(--h33-text-muted);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
}

.h33-hidden {
    display: none !important;
}

@media (max-width: 1420px) {
    .h33-grid-today,
    .h33-summary-grid {
        grid-template-columns: 1fr;
    }

    .h33-project-grid,
    .h33-create-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h33-utility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-builder-grid {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
    }

    .h33-builder-column:last-child {
        grid-column: 1 / -1;
        position: static;
    }

    .h33-builder-page.is-course-builder .h33-builder-grid {
        grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
    }

    .h33-builder-page.is-course-builder .h33-builder-workspace-bar {
        grid-template-columns: 1fr;
    }

    .h33-builder-page.is-course-builder .h33-builder-workspace-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 1120px) {
    .h33-nav {
        flex-wrap: wrap;
        gap: 16px;
    }

    .h33-nav-links {
        order: 3;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .h33-nav-links::-webkit-scrollbar {
        display: none;
    }

    .h33-nav .h33-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .h33-top-priority-grid,
    .h33-builder-grid,
    .h33-modal-grid {
        grid-template-columns: 1fr;
    }

    .h33-builder-grid.is-rail-collapsed {
        grid-template-columns: 1fr;
    }

    /* Course builder: collapse the outline+canvas grid to a single column on tablet/phone.
       The base .is-course-builder .h33-builder-grid rule (0,3,0) outranks the plain
       .h33-builder-grid 1fr rule above (0,1,0), so course needs its own equal-specificity
       collapse here (later in source order wins over the wider @1420 course 2-col rule). */
    .h33-builder-page.is-course-builder .h33-builder-grid,
    .h33-builder-page.is-course-builder .h33-builder-grid.is-rail-collapsed {
        grid-template-columns: 1fr;
    }

    .h33-priority-actions {
        grid-template-columns: 1fr;
    }

    .h33-progress-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-create-grid,
    .h33-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-utility-grid {
        grid-template-columns: 1fr;
    }

    .h33-builder-column--outline,
    .h33-builder-column--rail {
        position: static;
        top: auto;
    }

    .h33-builder-page.is-course-builder .h33-builder-column--outline .h33-outline-list {
        max-height: 46vh;
        overflow: auto;
    }

    .h33-builder-utility-metrics,
    .h33-builder-metric-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-builder-rail-switcher,
    .h33-canvas-assistant-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-nav-search {
        width: 100%;
        min-width: 0;
    }

    .h33-canvas-assistant-actions.is-five-up {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .h33-app {
        width: calc(100% - 12px);
        margin: 8px auto 24px;
    }

    .h33-nav {
        padding: 16px;
    }

    .h33-nav .h33-logo {
        min-width: 0;
    }

    .h33-nav .h33-nav-controls {
        min-width: 0;
        flex: 1 1 auto;
    }

    .h33-nav .h33-nav-search {
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
    }

    .h33-nav .h33-profile {
        min-width: 0;
        flex-shrink: 1;
    }

    .h33-nav .h33-profile-copy {
        min-width: 0;
    }

    .h33-nav .h33-profile-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 140px;
    }

    .h33-page {
        padding: 22px 16px 28px;
    }

    .h33-page-header,
    .h33-builder-header {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-builder-back-row,
    .h33-builder-top-actions {
        align-items: stretch;
    }

    .h33-builder-page.is-course-builder .h33-builder-column--rail {
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        top: auto;
        bottom: 0;
        height: min(82vh, 560px);
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .h33-builder-page.is-course-builder .h33-builder-column--rail:not(.is-collapsed) {
        transform: translateY(0);
    }

    .h33-builder-button-row {
        justify-content: stretch;
        flex-wrap: wrap;
    }

    .h33-button.is-stretch-mobile,
    .h33-builder-button-row .h33-button {
        width: 100%;
    }

    .h33-progress-grid,
    .h33-project-grid,
    .h33-create-grid,
    .h33-quick-actions {
        grid-template-columns: 1fr;
    }

    .h33-priority-metrics {
        grid-template-columns: 1fr;
    }

    .h33-stepper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-builder-main-head,
    .h33-toolbar,
    .h33-block-image,
    .h33-summary-visual,
    .h33-readiness-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: flex-start;
    }

    .h33-source-grid,
    .h33-compare-grid {
        grid-template-columns: 1fr;
    }

    .h33-builder-metric-row,
    .h33-builder-utility-metrics,
    .h33-builder-rail-switcher,
    .h33-canvas-assistant-actions {
        grid-template-columns: 1fr;
    }

    .h33-hero-block {
        grid-template-columns: 1fr;
    }

    .h33-block-image {
        display: grid;
    }

    .h33-builder-shell-progress,
    .h33-canvas-assistant-head {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-builder-workspace-bar,
    .h33-canvas-assistant-prompt-row {
        grid-template-columns: 1fr;
    }

    .h33-builder-workspace-meta {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .h33-mobile-action-bar {
        position: sticky;
        bottom: 10px;
        z-index: 8;
        display: grid;
        gap: 12px;
        margin-top: 18px;
        padding: 16px;
        border: 1px solid var(--h33-border-strong);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 44px rgba(24, 33, 66, 0.14);
        backdrop-filter: blur(16px);
    }

    .h33-mobile-action-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .h33-nav .h33-nav-search .h33-hub-search-shortcut {
        display: none;
    }

    .h33-nav .h33-profile-name {
        max-width: 96px;
    }
}

@media (max-width: 560px) {
    .h33-nav-controls {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .h33-nav-search {
        min-width: 0;
        width: 100%;
    }

    .h33-headline {
        font-size: 36px;
    }

    .h33-priority-title,
    .h33-builder-title {
        font-size: 34px;
    }

    .h33-stepper {
        grid-template-columns: 1fr;
    }

    .h33-builder-workspace-tabs {
        width: 100%;
    }

    .h33-builder-workspace-tab {
        flex: 1 1 calc(50% - 10px);
    }

    .h33-canvas-assistant-actions.is-five-up {
        grid-template-columns: 1fr;
    }

    .h33-builder-breadcrumbs {
        gap: 6px;
        font-size: 12px;
    }

    .h33-toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .h33-toast {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

.h33-breadcrumb-link {
    color: var(--h33-purple-strong);
    font-weight: 700;
}

.h33-card-button,
.h33-list-button {
    width: 100%;
    text-align: left;
}

.h33-list-button {
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    padding: 12px 14px;
    background: rgba(248, 250, 255, 0.88);
}

.h33-list-button.is-active {
    border-color: rgba(109, 77, 242, 0.28);
    box-shadow: 0 10px 22px rgba(93, 85, 232, 0.12);
}

.h33-inline-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.h33-inline-structured-actions {
    margin-left: auto;
    flex-wrap: wrap;
}

.h33-inline-actions.is-lesson {
    padding-right: 10px;
}

.h33-lesson-row {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: rgba(248, 250, 255, 0.78);
    border: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-lesson-row .h33-lesson-item {
    flex: 1;
}

.h33-builder-panel-stack,
.h33-overlay-stack {
    display: grid;
    gap: 18px;
}

.h33-create-grid.is-overlay {
    grid-template-columns: 1fr;
}

.h33-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.h33-choice-grid.is-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h33-choice-card {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(250, 252, 255, 0.96);
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.h33-choice-card.is-active {
    border-color: rgba(109, 77, 242, 0.28);
    box-shadow: 0 16px 30px rgba(93, 85, 232, 0.12);
}

.h33-choice-card:hover,
.h33-choice-card:focus-visible,
.h33-list-button:hover,
.h33-list-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(109, 77, 242, 0.18);
}

.h33-choice-card strong {
    display: block;
    color: var(--h33-text);
}

.h33-choice-card span:last-child {
    color: var(--h33-text-muted);
    line-height: 1.55;
}

.h33-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.h33-field {
    display: grid;
    gap: 8px;
}

.h33-field.is-full {
    grid-column: 1 / -1;
}

.h33-field span {
    font-size: 13px;
    font-weight: 700;
    color: var(--h33-text-muted);
}

.h33-field input,
.h33-field textarea,
.h33-field select {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(248, 250, 255, 0.92);
    color: var(--h33-text);
    /* Explicit font metrics: without these the native <select> option popup inherits an oversized
       ancestor font and renders huge on macOS. Pin a normal size so the dropdown list is sane. */
    font-size: 15px;
    line-height: 1.4;
    font-family: inherit;
    resize: vertical;
}

.h33-checkbox-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(248, 250, 255, 0.92);
    color: var(--h33-text);
}

.h33-checkbox-line input {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
}

.h33-richtext-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(248, 250, 255, 0.92);
}

.h33-richtext-toolbar-label {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 4px;
}

.h33-richtext-button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.14);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 12px;
    font-weight: 700;
}

.h33-richtext-input {
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(248, 250, 255, 0.92);
    color: var(--h33-text);
    outline: none;
    line-height: 1.6;
}

.h33-richtext-input:focus {
    box-shadow: 0 0 0 2px rgba(109, 77, 242, 0.16);
    border-color: rgba(109, 77, 242, 0.2);
}

.h33-builder-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.h33-editor-mode-toggle {
    display: inline-flex;
    gap: 8px;
    padding: 4px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(246, 248, 255, 0.9);
}

.h33-inline-editor {
    position: relative;
    outline: none;
    border-radius: 16px;
    transition: box-shadow 160ms ease, background-color 160ms ease;
}

.h33-inline-editor.is-copy {
    padding: 8px 10px;
}

.h33-inline-editor:focus {
    background: rgba(109, 77, 242, 0.06);
    box-shadow: 0 0 0 2px rgba(109, 77, 242, 0.16);
}

.h33-inline-editor ul,
.h33-inline-editor ol,
.h33-richtext-input ul,
.h33-richtext-input ol,
.h33-preview-copy ul,
.h33-preview-copy ol {
    margin: 10px 0 10px 18px;
    padding: 0;
}

.h33-inline-editor p,
.h33-richtext-input p,
.h33-preview-copy p {
    margin: 0 0 10px;
}

.h33-inline-editor p:last-child,
.h33-richtext-input p:last-child,
.h33-preview-copy p:last-child {
    margin-bottom: 0;
}

.h33-media-editor {
    display: grid;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(248, 250, 255, 0.94);
}

.h33-media-editor-preview {
    min-height: 180px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.96);
}

.h33-media-editor-preview .h33-block-card {
    margin: 0;
    box-shadow: none;
    border: 0;
}

.h33-inspector-group {
    border: 1px solid rgba(114, 125, 177, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    padding: 16px;
}

.h33-inspector-group + .h33-inspector-group {
    margin-top: 14px;
}

.h33-inspector-group summary {
    cursor: pointer;
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 14px;
}

.h33-source-grid,
.h33-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.h33-source-metric {
    display: grid;
    gap: 5px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(246, 248, 255, 0.82);
    border: 1px solid rgba(114, 125, 177, 0.12);
}

.h33-source-metric strong {
    color: var(--h33-text);
    font-size: 12px;
}

.h33-source-metric span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-preview-device-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.h33-preview-theme-toggle {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.h33-preview-surface.is-tablet {
    max-width: 760px;
    margin-inline: auto;
}

.h33-preview-surface.is-mobile {
    max-width: 390px;
    margin-inline: auto;
}

/* Preview side panel: keep it in view while the (often long) lesson scrolls, and darken it
   together with the lesson when Dark mode is on so the whole preview matches (not just the left). */
.h33-preview-aside {
    position: sticky;
    top: 0;
    align-self: start;
}
.h33-preview-aside.is-dark .h33-card {
    background: #141a2c;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.h33-preview-aside.is-dark .h33-builder-card-title,
.h33-preview-aside.is-dark .h33-list-label,
.h33-preview-aside.is-dark strong {
    color: #eef2fb;
}
.h33-preview-aside.is-dark p,
.h33-preview-aside.is-dark .h33-list-meta {
    color: #a9b4d0;
}
.h33-preview-aside.is-dark .h33-button.is-secondary {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e7ecf7;
}
.h33-preview-aside.is-dark .h33-card-icon.is-blue {
    background: rgba(124, 111, 255, 0.22);
    color: #d7d2ff;
}
.h33-preview-aside.is-dark .h33-list-button.is-active {
    background: rgba(124, 111, 255, 0.16);
}

.h33-structured-editor-stack {
    display: grid;
    gap: 12px;
}

.h33-structured-editor-card {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    display: grid;
    gap: 12px;
}

.h33-preview-copy {
    color: var(--h33-text-muted);
    line-height: 1.65;
}

.h33-preview-media {
    margin-top: 12px;
    border-radius: 18px;
    overflow: hidden;
}

.h33-preview-surface.is-inline {
    padding: 0;
    border: 0;
    background: transparent;
}

.h33-preview-surface.is-dark {
    border-color: rgba(121, 136, 192, 0.22);
    background: linear-gradient(180deg, rgba(19, 25, 42, 0.98), rgba(14, 19, 32, 0.96));
    color: rgba(243, 246, 255, 0.94);
}

.h33-preview-surface.is-dark h2,
.h33-preview-surface.is-dark strong,
.h33-preview-surface.is-dark .h33-preview-copy,
.h33-preview-surface.is-dark .h33-list-meta {
    color: rgba(243, 246, 255, 0.94);
}

.h33-preview-surface.is-dark p {
    color: rgba(216, 224, 247, 0.82);
}

.h33-preview-surface.is-dark .h33-block-card,
.h33-preview-surface.is-dark .h33-quiz-block,
.h33-preview-surface.is-dark .h33-file-block,
.h33-preview-surface.is-dark .h33-embed-block,
.h33-preview-surface.is-dark .h33-callout-block,
.h33-preview-surface.is-dark .h33-certificate-block,
.h33-preview-surface.is-dark .h33-audio-block,
.h33-preview-surface.is-dark .h33-accordion-block,
.h33-preview-surface.is-dark .h33-button-preview,
.h33-preview-surface.is-dark .h33-tab-shell {
    border-color: rgba(121, 136, 192, 0.18);
    background: rgba(28, 36, 60, 0.88);
}

.h33-preview-surface.is-dark .h33-tab-list {
    background: rgba(18, 24, 40, 0.92);
    border-bottom-color: rgba(121, 136, 192, 0.16);
}

.h33-preview-surface.is-dark .h33-tab-button {
    color: rgba(216, 224, 247, 0.74);
}

.h33-preview-surface.is-dark .h33-tab-button.is-active,
.h33-preview-surface.is-dark .h33-tab-editor-pill.is-active {
    background: rgba(33, 43, 72, 0.96);
    color: rgba(255, 255, 255, 0.96);
}

.h33-preview-surface.is-dark .h33-media-empty,
.h33-preview-surface.is-dark .h33-video-link-copy,
.h33-preview-surface.is-dark .h33-block-body,
.h33-preview-surface.is-dark .h33-preview-copy {
    color: rgba(216, 224, 247, 0.82);
}

.h33-preview-surface.is-dark .h33-button.is-secondary,
.h33-preview-surface.is-dark .h33-button.is-ghost {
    border-color: rgba(121, 136, 192, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(243, 246, 255, 0.94);
}

.h33-preview-surface.is-dark .h33-button.is-primary {
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.24);
}

.h33-comment-list {
    display: grid;
    gap: 12px;
}

.h33-comment-card {
    gap: 12px;
}

.h33-comment-body {
    margin: 0;
    color: var(--h33-text-muted);
    line-height: 1.65;
}

.h33-pill.is-warning {
    background: rgba(255, 247, 231, 0.94);
    color: #8f5f06;
}

kbd {
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid rgba(114, 125, 177, 0.18);
    background: rgba(248, 250, 255, 0.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

.h33-overlay-root {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    justify-content: flex-end;
}

.h33-overlay-scrim {
    position: absolute;
    inset: 0;
    background: rgba(17, 23, 43, 0.32);
}

.h33-overlay-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    height: 100%;
    padding: 24px;
    overflow: auto;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: -18px 0 48px rgba(19, 28, 58, 0.16);
}

.h33-overlay-panel.is-wide {
    width: min(100%, 680px);
}

.h33-overlay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.h33-overlay-body {
    display: grid;
    gap: 18px;
}

.h33-contract-card {
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(248, 250, 255, 0.95);
}

.h33-code-block {
    margin: 0;
    padding: 16px;
    overflow: auto;
    border-radius: 16px;
    background: #11182f;
    color: #e8ecff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
}

.h33-today-primary-grid,
.h33-builder-picker-grid,
.h33-create-studio-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(320px, 0.82fr);
    gap: 20px;
}

.h33-current-work-card,
.h33-builder-picker,
.h33-builder-spotlight,
.h33-create-studio-grid-card,
.h33-latest-draft-card {
    display: grid;
    gap: 18px;
}

.h33-current-work-card.is-featured {
    padding: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% 18%, rgba(109, 77, 242, 0.1), transparent 20%),
        radial-gradient(circle at 14% 82%, rgba(76, 139, 247, 0.08), transparent 18%),
        linear-gradient(180deg, rgba(253, 254, 255, 0.98), rgba(248, 250, 255, 0.94));
}

.h33-current-work-surface {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.82fr);
    gap: 24px;
    align-items: stretch;
}

.h33-current-work-copy {
    display: grid;
    gap: 18px;
    align-content: start;
}

.h33-featured-work-preview {
    display: grid;
    gap: 12px;
    align-content: start;
}

.h33-preview-window-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.h33-current-work-head,
.h33-builder-spotlight-head,
.h33-studio-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.h33-current-work-meta,
.h33-builder-spotlight-list,
.h33-studio-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.h33-current-work-stat,
.h33-builder-spotlight-list > div,
.h33-studio-card-meta > div {
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(255, 255, 255, 0.78);
    display: grid;
    gap: 6px;
}

.h33-current-work-stat span,
.h33-builder-spotlight-list span,
.h33-studio-card-meta span {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--h33-text-muted);
}

.h33-current-work-stat strong,
.h33-builder-spotlight-list strong,
.h33-studio-card-meta strong {
    color: var(--h33-text);
    line-height: 1.45;
}

.h33-builder-choice-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.h33-builder-choice-grid::-webkit-scrollbar {
    display: none;
}

.h33-builder-choice {
    width: 100%;
    min-height: 146px;
    padding: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
    display: grid;
    gap: 12px;
    text-align: left;
    color: inherit;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.h33-builder-choice strong {
    font-size: 15px;
}

.h33-builder-choice span:last-child {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-builder-choice:hover,
.h33-builder-choice:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(112, 99, 255, 0.24);
    box-shadow: 0 12px 24px rgba(112, 99, 255, 0.1);
}

.h33-builder-choice.is-selected {
    border-color: rgba(112, 99, 255, 0.28);
    box-shadow: 0 18px 34px rgba(112, 99, 255, 0.1);
    background: linear-gradient(180deg, rgba(248, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.h33-prompt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.h33-latest-draft-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.h33-create-studio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.h33-studio-card {
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
}

.h33-studio-card.is-selected {
    border-color: rgba(109, 77, 242, 0.2);
    box-shadow: 0 20px 38px rgba(99, 85, 232, 0.1);
}

.h33-studio-card-copy {
    display: grid;
    gap: 8px;
}

.h33-studio-card-copy p {
    margin: 0;
    color: var(--h33-text-muted);
    line-height: 1.6;
}

.h33-surface-page {
    gap: 22px;
}

.h33-dashboard-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.h33-surface-metric {
    padding: 18px 20px;
    border-radius: 22px;
    gap: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
}

.h33-dashboard-split {
    display: grid;
    grid-template-columns: minmax(0, 1.58fr) minmax(340px, 0.92fr);
    gap: 18px;
    align-items: stretch;
}

.h33-surface-spotlight,
.h33-surface-draft-card,
.h33-surface-panel {
    padding: 22px;
}

.h33-surface-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(240px, 0.82fr);
    gap: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(109, 77, 242, 0.97), rgba(72, 93, 244, 0.94));
    color: #fff;
    border-color: rgba(109, 77, 242, 0.22);
    box-shadow: 0 26px 48px rgba(85, 84, 220, 0.22);
}

.h33-surface-spotlight.is-gold {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(243, 160, 24, 0.96), rgba(236, 116, 24, 0.92));
}

.h33-surface-spotlight.is-blue {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(76, 139, 247, 0.96), rgba(64, 108, 235, 0.94));
}

.h33-surface-spotlight .h33-eyebrow,
.h33-surface-spotlight .h33-surface-title,
.h33-surface-spotlight .h33-surface-copy,
.h33-surface-spotlight .h33-surface-stat strong,
.h33-surface-spotlight .h33-surface-preview strong,
.h33-surface-spotlight .h33-preview-mini-card p,
.h33-surface-spotlight .h33-list-meta {
    color: #fff;
}

.h33-surface-spotlight .h33-eyebrow {
    color: rgba(255, 255, 255, 0.78);
}

.h33-surface-spotlight .h33-tag {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.h33-surface-spotlight .h33-preview-mini-card {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.14);
}

.h33-surface-spotlight .h33-button.is-secondary,
.h33-surface-spotlight .h33-button.is-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.h33-surface-spotlight-copy,
.h33-surface-preview,
.h33-surface-draft-card {
    display: grid;
    gap: 16px;
}

.h33-surface-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(28px, 2.6vw, 42px);
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.h33-surface-copy {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 16px;
    line-height: 1.6;
}

.h33-surface-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.h33-surface-stat {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.14);
}

.h33-surface-stat span {
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.h33-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h33-tag {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(109, 77, 242, 0.12);
    background: rgba(109, 77, 242, 0.08);
    color: var(--h33-purple-strong);
    font-size: 12px;
    font-weight: 700;
}

.h33-dashboard-status {
    display: grid;
    justify-items: end;
    gap: 6px;
    text-align: right;
}

.h33-surface-message-card {
    padding: 18px;
    border-radius: 22px;
    border: 1px solid rgba(109, 77, 242, 0.1);
    background: linear-gradient(180deg, rgba(245, 242, 255, 0.82), rgba(255, 255, 255, 0.94));
    display: grid;
    gap: 10px;
}

.h33-surface-message-card p {
    margin: 0;
    color: var(--h33-text);
    font-size: 15px;
    line-height: 1.7;
}

.h33-dashboard-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.h33-dashboard-action-grid > * {
    min-width: 0;
}

.h33-dashboard-action-grid .h33-button,
.h33-opportunity-card .h33-button {
    width: 100%;
    min-width: 0;
    line-height: 1.24;
    text-align: center;
}

/* Follow-up card: keep one clear purple primary ("Use Message"); everything else neutral. */
.h33-action-hint {
    margin: 2px 0 -4px;
    color: var(--h33-text-soft);
    opacity: 0.85;
}

.h33-dashboard-action-grid .h33-button.is-secondary,
.h33-dashboard-action-grid .h33-button.is-ghost {
    background: #f4f5fa;
    color: #474c60;
    border-color: rgba(120, 124, 150, 0.18);
    box-shadow: none;
}

.h33-dashboard-action-grid .h33-button.is-secondary:hover,
.h33-dashboard-action-grid .h33-button.is-ghost:hover {
    background: #eceef6;
    color: #2c3040;
}

.h33-dashboard-action-group {
    display: grid;
    gap: 6px;
}

.h33-dashboard-action-note {
    color: var(--h33-text-soft);
    font-size: 12px;
    line-height: 1.45;
}

.h33-dashboard-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.h33-dashboard-card-grid.is-insights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h33-surface-panel {
    display: grid;
    gap: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.94));
}

.h33-surface-list,
.h33-surface-feed,
.h33-signal-stack {
    display: grid;
    gap: 12px;
}

.h33-surface-list-item,
.h33-surface-feed-row,
.h33-signal-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.88);
}

.h33-surface-list-head,
.h33-surface-feed-row > div,
.h33-signal-item > div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h33-surface-list-head span,
.h33-surface-feed-row span,
.h33-signal-item p {
    color: var(--h33-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

.h33-signal-item p {
    margin: 0;
}

.h33-surface-bullet-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 12px;
    color: var(--h33-text-muted);
    line-height: 1.6;
}

.h33-app--workspace .h33-shell {
    min-height: calc(100vh - 20px);
}

.h33-workspace-shell {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: calc(100vh - 8px);
}

.h33-workspace-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 18px 14px 14px;
    border-right: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 250, 255, 0.965));
}

.h33-workspace-sidebar-brand {
    display: block;
    padding: 6px 8px 2px;
}

.h33-workspace-sidebar-brand img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

.h33-workspace-sidebar-title {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.h33-workspace-primary-nav,
.h33-workspace-sidebar-links,
.h33-workspace-sidebar-sections {
    display: grid;
    gap: 8px;
}

.h33-workspace-primary-link,
.h33-workspace-sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.h33-workspace-primary-link svg,
.h33-workspace-sidebar-link svg,
.h33-workspace-tab svg,
.h33-workspace-utility svg,
.h33-workspace-create-button svg {
    width: 18px;
    height: 18px;
}

.h33-workspace-primary-link:hover,
.h33-workspace-primary-link:focus-visible,
.h33-workspace-sidebar-link:hover,
.h33-workspace-sidebar-link:focus-visible {
    color: var(--h33-text);
    background: rgba(109, 77, 242, 0.08);
}

.h33-workspace-primary-link.is-active,
.h33-workspace-sidebar-link.is-active {
    color: var(--h33-purple-strong);
    background: linear-gradient(135deg, rgba(109, 77, 242, 0.1), rgba(244, 241, 255, 0.92));
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.05);
}

.h33-workspace-sidebar-section {
    display: grid;
    gap: 10px;
}

.h33-workspace-sidebar-section h3 {
    margin: 0;
    padding: 0 14px;
    color: var(--h33-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.h33-workspace-sidebar-link {
    min-height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.h33-workspace-sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: 14px;
}

.h33-workspace-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--h33-shadow-soft);
}

.h33-workspace-user-copy {
    display: grid;
    gap: 2px;
    text-align: left;
    flex: 1;
}

.h33-workspace-user-copy strong {
    font-size: 14px;
}

.h33-workspace-user-copy span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-workspace-footer-actions {
    display: flex;
    gap: 10px;
    padding: 0 4px;
}

.h33-workspace-footer-button,
.h33-workspace-icon-button {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--h33-shadow-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-workspace-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(circle at top left, rgba(121, 99, 255, 0.035), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 251, 255, 0.98));
}

.h33-workspace-header {
    display: grid;
    gap: 16px;
    padding: 18px 30px 4px;
}

.h33-workspace-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.h33-workspace-title-group {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
}

.h33-workspace-page-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.h33-workspace-page-icon.is-violet {
    background: rgba(109, 77, 242, 0.12);
    color: var(--h33-purple-strong);
}

.h33-workspace-page-icon.is-blue {
    background: rgba(76, 139, 247, 0.12);
    color: var(--h33-blue);
}

.h33-workspace-page-icon.is-mint {
    background: rgba(47, 191, 122, 0.12);
    color: var(--h33-mint);
}

.h33-workspace-title {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(30px, 2.7vw, 44px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.h33-workspace-subtitle {
    margin: 8px 0 0;
    color: var(--h33-text-muted);
    font-size: 15px;
    line-height: 1.5;
}

.h33-workspace-header-actions,
.h33-workspace-action-cluster,
.h33-workspace-tabs,
.h33-tab-chip-row,
.h33-line-legend,
.h33-bottom-action-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-workspace-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.h33-workspace-action-cluster,
.h33-tab-chip-row,
.h33-line-legend,
.h33-bottom-action-buttons {
    flex-wrap: wrap;
}

.h33-workspace-header-actions--today {
    gap: 16px;
}

.h33-workspace-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--h33-shadow-soft);
}

.h33-workspace-status-pill strong,
.h33-workspace-status-pill span {
    display: block;
}

.h33-workspace-status-pill strong {
    font-size: 14px;
}

.h33-workspace-status-pill span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-workspace-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--h33-mint);
    box-shadow: 0 0 0 6px rgba(47, 191, 122, 0.12);
}

.h33-workspace-utility {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--h33-shadow-soft);
    font-size: 14px;
    font-weight: 700;
    color: var(--h33-text);
}

.h33-workspace-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--h33-shadow-soft);
}

.h33-workspace-profile-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.h33-workspace-profile-copy span {
    color: var(--h33-text-soft);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.h33-workspace-profile-copy strong {
    font-size: 14px;
}

.h33-workspace-icon-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--h33-purple);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-workspace-tabs {
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.h33-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 14px;
    color: var(--h33-text);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(114, 125, 177, 0.1);
    box-shadow: 0 10px 24px rgba(39, 52, 98, 0.045);
    font-size: 13px;
    font-weight: 700;
}

.h33-workspace-tab.is-active {
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.06);
}

.h33-workspace-content {
    padding: 10px 30px 30px;
    display: grid;
    gap: 20px;
    min-width: 0;
}

.h33-workspace-metric-strip {
    display: grid;
    gap: 16px;
}

.h33-workspace-metric-strip.is-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Today 5-up: compact cards — no reserved sparkline row or dead min-height */
.h33-workspace-metric-strip.is-five .h33-workspace-metric {
    grid-template-rows: none;
    min-height: 0;
    gap: 12px;
    align-content: start;
}

.h33-workspace-metric-strip.is-five .h33-workspace-metric-copy {
    grid-template-rows: none;
}

.h33-workspace-metric-strip.is-five .h33-workspace-metric-meta {
    min-height: 0;
}

.h33-workspace-metric-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    align-self: end;
    color: var(--h33-purple-strong);
    font-size: 12.5px;
    font-weight: 700;
}

.h33-workspace-metric-link:hover,
.h33-workspace-metric-link:focus-visible {
    text-decoration: underline;
}

.h33-workspace-metric {
    display: grid;
    grid-template-rows: auto minmax(48px, auto);
    gap: 14px;
    min-height: 170px;
    padding: 18px 18px 15px;
    border-radius: 22px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 250, 255, 0.97));
    box-shadow: 0 12px 28px rgba(33, 45, 88, 0.04);
    overflow: hidden;
}

.h33-workspace-metric-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.h33-workspace-metric-copy {
    display: grid;
    grid-template-rows: auto auto minmax(38px, auto);
    gap: 4px;
    min-width: 0;
    align-content: start;
}

.h33-workspace-metric-label,
.h33-workspace-metric-meta,
.h33-workspace-panel-kicker,
.h33-media-copy span,
.h33-activity-row span,
.h33-avatar-row-copy span,
.h33-opportunity-list-row span,
.h33-event-copy span,
.h33-bar-row span,
.h33-status-row span,
.h33-goal-copy span {
    color: var(--h33-text-muted);
}

.h33-workspace-metric-label {
    font-size: 14px;
    font-weight: 600;
}

.h33-workspace-metric-value-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}

.h33-workspace-metric-value-row strong {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 20px;
    letter-spacing: -0.04em;
}

.h33-workspace-delta {
    font-size: 14px;
    font-weight: 700;
}

.h33-workspace-delta.is-positive {
    color: #18a161;
}

.h33-workspace-delta.is-negative {
    color: var(--h33-danger);
}

.h33-workspace-metric-meta {
    font-size: 13px;
    line-height: 1.5;
    min-height: 38px;
}

.h33-workspace-sparkline {
    margin-top: 6px;
    min-height: 54px;
    align-self: end;
}

.h33-workspace-sparkline svg,
.h33-workspace-chart-card svg,
.h33-gauge-wrap svg {
    width: 100%;
    display: block;
}

.h33-workspace-sparkline svg {
    height: 48px;
}

.h33-workspace-grid {
    display: grid;
    gap: 18px;
}

.h33-workspace-grid--today-hero {
    grid-template-columns: minmax(0, 1.68fr) minmax(360px, 0.92fr);
}

.h33-workspace-grid--today-main {
    /* Today's Opportunities now spans full width (Actions & History removed). */
    grid-template-columns: minmax(0, 1fr);
}

.h33-workspace-grid--today-bottom {
    /* Two columns: Saved from PodOps AI (left) + Recent Activity (right). */
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
}

@media (max-width: 900px) {
    .h33-workspace-grid--today-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

.h33-workspace-grid--revenue-bottom {
    grid-template-columns: minmax(0, 1.56fr) minmax(320px, 0.9fr);
}

.h33-workspace-grid--audience-top,
.h33-workspace-grid--revenue-top,
.h33-workspace-grid--community-top,
.h33-workspace-grid--insights-top {
    grid-template-columns: minmax(0, 1.48fr) minmax(320px, 1.02fr) minmax(320px, 0.94fr);
}

.h33-workspace-grid--audience-middle,
.h33-workspace-grid--community-middle,
.h33-workspace-grid--insights-bottom {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.98fr) minmax(0, 0.96fr);
}

.h33-workspace-grid--revenue-middle {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr) minmax(0, 0.9fr);
}

.h33-workspace-grid--audience-bottom {
    grid-template-columns: minmax(0, 1.54fr) minmax(320px, 0.82fr);
}

.h33-workspace-panel {
    padding: 22px;
    border-radius: 28px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 251, 255, 0.97));
    box-shadow: 0 14px 34px rgba(36, 48, 86, 0.045);
}

.h33-workspace-chart-card {
    position: relative;
    margin-top: 16px;
    display: grid;
    gap: 14px;
}

.h33-workspace-chart-grid line {
    stroke: rgba(114, 125, 177, 0.14);
    stroke-width: 1;
}

.h33-workspace-chart-labels {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    color: var(--h33-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.h33-workspace-chart-callout {
    position: absolute;
    top: 50px;
    right: 18px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(114, 125, 177, 0.12);
    box-shadow: var(--h33-shadow-soft);
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
    text-align: right;
}

.h33-workspace-chart-callout span {
    display: block;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.h33-donut-layout,
.h33-demographics-grid {
    display: grid;
    gap: 18px;
}

.h33-donut-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: center;
    margin-top: 10px;
}

.h33-donut-chart {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    padding: 24px;
    display: grid;
    place-items: center;
}

.h33-donut-hole {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    text-align: center;
    box-shadow: inset 0 0 0 1px rgba(114, 125, 177, 0.08);
}

.h33-donut-hole strong,
.h33-gauge-copy strong {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 30px;
    letter-spacing: -0.05em;
}

.h33-donut-hole span,
.h33-gauge-copy span {
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.h33-donut-legend,
.h33-status-list,
.h33-goal-list {
    display: grid;
    gap: 12px;
}

.h33-donut-legend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    min-width: 0;
}

.h33-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
}

.h33-donut-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.h33-media-list,
.h33-opportunity-list,
.h33-location-list,
.h33-activity-list,
.h33-avatar-list,
.h33-event-list,
.h33-table-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.h33-media-row,
.h33-opportunity-list-row,
.h33-activity-row,
.h33-avatar-row,
.h33-event-row,
.h33-table-row,
.h33-goal-row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.9);
    min-width: 0;
    overflow: hidden;
}

.h33-media-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(82px, auto);
    align-items: start;
}

.h33-opportunity-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.h33-activity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.h33-avatar-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(88px, auto);
    align-items: start;
}

.h33-activity-row.is-table {
    grid-template-columns: minmax(0, 1fr) minmax(104px, auto) minmax(124px, auto);
    align-items: center;
}

.h33-table-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.h33-goal-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) auto;
}

.h33-media-thumb,
.h33-avatar-badge,
.h33-focus-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    background: linear-gradient(145deg, #7b5af8, #5d47f1);
    overflow: hidden;
}

.h33-media-thumb.is-mint,
.h33-avatar-badge.is-mint {
    background: linear-gradient(145deg, #35cb89, #1cae69);
}

.h33-media-thumb.is-gold,
.h33-avatar-badge.is-gold {
    background: linear-gradient(145deg, #f5b235, #ed8c19);
}

.h33-media-thumb.is-blue,
.h33-avatar-badge.is-blue {
    background: linear-gradient(145deg, #5f9dff, #3e72ea);
}

.h33-media-thumb.is-pink,
.h33-avatar-badge.is-pink {
    background: linear-gradient(145deg, #ef75d8, #d54eb7);
}

.h33-media-copy,
.h33-media-stat,
.h33-opportunity-list-main,
.h33-opportunity-list-meta,
.h33-activity-main,
.h33-avatar-row-copy,
.h33-event-copy,
.h33-goal-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
    align-content: start;
}

.h33-media-stat,
.h33-opportunity-list-meta {
    text-align: right;
    align-self: center;
    justify-items: end;
    min-width: 0;
}

.h33-opportunity-list-main,
.h33-activity-main,
.h33-create-resume-main,
.h33-create-source-main {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.h33-activity-row.is-table .h33-activity-main {
    width: 100%;
    min-width: 0;
    grid-template-columns: 40px minmax(0, 1fr);
}

.h33-activity-row.is-table > strong,
.h33-activity-row.is-table > em {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

.h33-media-copy strong,
.h33-opportunity-list-main strong,
.h33-activity-main strong,
.h33-avatar-row-copy strong,
.h33-event-copy strong,
.h33-create-draft-copy strong,
.h33-create-resume-main strong,
.h33-create-source-main strong {
    display: block;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.h33-media-copy strong {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h33-media-copy span,
.h33-opportunity-list-main span,
.h33-activity-main span,
.h33-avatar-row-copy span,
.h33-event-copy span,
.h33-create-draft-copy span,
.h33-create-resume-main span,
.h33-create-source-meta,
.h33-create-source-status,
.h33-create-progress-wrap em {
    line-height: 1.45;
}

.h33-activity-main > div,
.h33-opportunity-list-main > div,
.h33-avatar-row-copy,
.h33-event-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h33-demographic-age-list,
.h33-status-list,
.h33-history-panel,
.h33-history-block {
    display: grid;
    gap: 12px;
}

.h33-bar-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.h33-bar-track,
.h33-gender-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(114, 125, 177, 0.12);
    overflow: hidden;
}

.h33-bar-track span,
.h33-gender-bar span,
.h33-goal-row .h33-bar-track span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #6d4df2, #8b6cff);
}

.h33-gender-strip {
    display: grid;
    gap: 12px;
}

.h33-gender-bar {
    height: 16px;
}

.h33-gender-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
}

.h33-gauge-wrap {
    position: relative;
    margin-top: 10px;
    min-height: 208px;
    display: grid;
    justify-items: center;
    align-items: start;
    overflow: hidden;
    padding-top: 10px;
}

.h33-gauge-track,
.h33-gauge-progress {
    fill: none;
    stroke-width: 18;
    stroke-linecap: round;
}

.h33-gauge-track {
    stroke: rgba(114, 125, 177, 0.14);
}

.h33-gauge-copy {
    position: absolute;
    inset: 54px 0 auto 0;
    display: grid;
    justify-items: center;
    gap: 2px;
}

.h33-gauge-wrap svg {
    width: min(100%, 240px);
    max-width: 240px;
    justify-self: center;
}

.h33-mini-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.h33-mini-stat-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-mini-stat-grid > div {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.9);
    display: grid;
    gap: 4px;
}

.h33-segment-grid,
.h33-opportunity-grid {
    display: grid;
    gap: 14px;
}

.h33-segment-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 14px;
}

.h33-opportunity-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 16px;
}

.h33-segment-card,
.h33-opportunity-card {
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.9);
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
}

.h33-opportunity-card {
    /* Flex column so the action row pins to the bottom; grid row-stretch keeps all
       four cards equal height, so buttons line up regardless of text length. */
    display: flex;
    flex-direction: column;
}

.h33-opportunity-card > div:last-child {
    margin-top: auto;
}

.h33-opportunity-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.h33-segment-card h4,
.h33-opportunity-card h3,
.h33-focus-copy h2,
.h33-grow-card h3,
.h33-bottom-action-bar h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.h33-segment-card span,
.h33-opportunity-card p,
.h33-grow-card p,
.h33-bottom-action-bar p,
.h33-status-note p,
.h33-message-surface p,
.h33-focus-copy p,
.h33-avatar-row-copy p {
    margin: 0;
    color: var(--h33-text-muted);
    line-height: 1.55;
}

.h33-opportunity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.h33-opportunity-badge.is-mint {
    background: rgba(47, 191, 122, 0.12);
    color: #18925b;
}

.h33-opportunity-badge.is-gold {
    background: rgba(243, 160, 24, 0.14);
    color: #d88a07;
}

.h33-opportunity-badge.is-blue {
    background: rgba(76, 139, 247, 0.12);
    color: #3874dc;
}

.h33-opportunity-badge.is-violet {
    background: rgba(109, 77, 242, 0.12);
    color: var(--h33-purple-strong);
}

.h33-grow-card {
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(145deg, rgba(245, 241, 255, 0.96), rgba(255, 255, 255, 0.98));
}

.h33-focus-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 150px;
    gap: 16px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.18), transparent 42%),
        radial-gradient(circle at 6% 94%, rgba(44, 197, 255, 0.40), transparent 48%),
        linear-gradient(135deg, #7b3ff2 0%, #5b4df5 46%, #2f7ad1 100%);
    box-shadow: 0 26px 48px rgba(50, 70, 150, 0.28);
}

.h33-focus-copy,
.h33-message-card,
.h33-history-panel,
.h33-bottom-action-bar,
.h33-workspace-stack {
    display: grid;
    gap: 16px;
}

.h33-focus-copy .h33-eyebrow,
.h33-focus-copy h2,
.h33-focus-copy p,
.h33-focus-card .h33-tag {
    color: #fff;
}

.h33-focus-card .h33-tag {
    background: rgba(255, 255, 255, 0.30);
    border-color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.h33-focus-card .h33-tag-row .h33-tag:nth-child(3n + 1) {
    background: rgba(44, 197, 255, 0.48);
    border-color: rgba(150, 230, 255, 0.85);
}

.h33-focus-card .h33-tag-row .h33-tag:nth-child(3n + 3) {
    background: rgba(255, 190, 110, 0.48);
    border-color: rgba(255, 214, 160, 0.85);
}

.h33-focus-portrait {
    position: relative;
    display: grid;
    place-items: center;
}

.h33-focus-avatar {
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f4ff, #ffffff);
    color: var(--h33-purple-strong);
    box-shadow: 0 20px 38px rgba(18, 26, 54, 0.18);
}

.h33-focus-status {
    position: absolute;
    right: 18px;
    bottom: 12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--h33-mint);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Recommendation / resume heroes are not people: show an icon, never a person avatar + online dot. */
.h33-focus-avatar--icon .h33-icon {
    width: 44px;
    height: 44px;
}

/* Mobile primary navigation (bottom tab bar) — hidden on desktop, shown below 1120px. */
.h33-workspace-mobile-nav {
    display: none;
}

.h33-message-card h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.h33-message-surface,
.h33-status-note {
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.9);
}

.h33-status-note span {
    display: block;
    margin-bottom: 10px;
    color: var(--h33-text-soft);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.h33-message-helper {
    display: block;
    margin-top: 10px;
    color: var(--h33-text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}

.h33-activity-empty {
    gap: 10px;
    align-content: center;
}

.h33-activity-empty p {
    margin: 0;
    max-width: 320px;
    line-height: 1.55;
}

.h33-bottom-action-bar {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(247, 241, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.h33-community-mini-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.h33-community-mini-stats > div,
.h33-balance-primary,
.h33-funnel-row {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(248, 250, 255, 0.9);
    display: grid;
    gap: 4px;
}

.h33-funnel-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 12px;
    min-width: 0;
}

.h33-funnel-graphic {
    display: grid;
    gap: 10px;
    justify-items: center;
}

.h33-funnel-graphic span {
    display: block;
    background: linear-gradient(145deg, #7b5af8, #b296ff);
    clip-path: polygon(10% 0, 90% 0, 78% 100%, 22% 100%);
    opacity: 0.95;
}

.h33-funnel-graphic .is-step-1 { width: 176px; height: 42px; }
.h33-funnel-graphic .is-step-2 { width: 144px; height: 42px; }
.h33-funnel-graphic .is-step-3 { width: 114px; height: 42px; }
.h33-funnel-graphic .is-step-4 { width: 74px; height: 42px; }

.h33-funnel-stats {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.h33-funnel-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
}

.h33-funnel-row strong,
.h33-funnel-row span,
.h33-funnel-row em {
    overflow-wrap: anywhere;
}

.h33-funnel-row em {
    color: var(--h33-text-muted);
    font-style: normal;
    justify-self: end;
}

.h33-balance-card {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.h33-event-row {
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: start;
}

.h33-event-row .h33-pill {
    grid-column: 3;
    justify-self: end;
    align-self: start;
}

.h33-event-date {
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(109, 77, 242, 0.08);
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
}

.h33-line-legend {
    margin-top: 8px;
    flex-wrap: wrap;
}

.h33-line-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.h33-line-legend i {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    display: inline-block;
}

.h33-goal-row {
    gap: 12px;
}

.h33-workspace-main--create {
    background:
        radial-gradient(circle at top center, rgba(117, 96, 255, 0.05), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.98));
}

.h33-workspace-header--create-landing {
    padding-bottom: 0;
}

.h33-workspace-content--create-landing {
    padding-top: 18px;
}

.h33-create-topbar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 18px;
}

.h33-create-topbar-spacer {
    min-height: 1px;
}

.h33-create-topbar-nav {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.h33-create-topbar-nav .h33-workspace-tabs {
    justify-content: center;
    min-width: 0;
}

.h33-create-topbar-nav .h33-workspace-tab svg {
    display: none;
}

.h33-create-topbar-actions {
    display: flex;
    justify-content: flex-end;
}

.h33-create-topbar-actions .h33-workspace-header-actions {
    width: 100%;
    justify-content: flex-end;
}

.h33-workspace-title--create {
    font-size: clamp(34px, 3.1vw, 56px);
}

.h33-workspace-subtitle--create {
    font-size: 16px;
}

.h33-create-landing-hero,
.h33-create-heading-block,
.h33-create-paths-section,
.h33-create-list-panel,
.h33-create-resume-list,
.h33-create-draft-list,
.h33-create-source-list {
    display: grid;
    gap: 18px;
}

.h33-create-hero-grid,
.h33-create-support-grid {
    display: grid;
    gap: 18px;
}

.h33-create-hero-grid {
    grid-template-columns: minmax(0, 1.56fr) minmax(332px, 0.94fr);
    align-items: start;
}

.h33-create-support-grid {
    grid-template-columns: minmax(0, 1.36fr) minmax(0, 1.1fr) minmax(320px, 0.92fr);
}

/* Top-align card content. These support-grid panels stretch to equal height
   (matched to the tallest column, e.g. "Your sources"). CSS grid's default
   align-content is `normal`, which for a grid container resolves to `stretch` —
   so a short panel balloons its section header (17px -> ~174px) and floats its
   single card into the vertical middle, opening a large gap under the header.
   Pack every level to the start so the card sits directly under its header and
   any slack collects at the BOTTOM of the (still equal-height) card. Rows keep
   their own align-items (e.g. the resume row stays vertically centered in its
   wide 3-column layout). */
.h33-create-list-panel {
    align-content: start;
}

.h33-create-resume-list,
.h33-create-draft-list,
.h33-create-source-list {
    align-content: start;
    align-items: start;
}

.h33-create-resume-row,
.h33-create-draft-row {
    align-content: start;
}

.h33-create-list-panel .h33-section-head {
    align-self: start;
}

.h33-create-ask-card,
.h33-create-recommendation-card,
.h33-create-path-card,
.h33-create-list-panel,
.h33-create-bottom-cta {
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.992), rgba(250, 251, 255, 0.975));
    box-shadow: 0 18px 42px rgba(38, 49, 87, 0.04);
}

.h33-create-ask-card,
.h33-create-recommendation-card,
.h33-create-list-panel {
    padding: 16px 18px;
    border-radius: 24px;
}

.h33-create-ask-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.h33-create-ask-copy {
    display: grid;
    gap: 6px;
}

.h33-create-ask-helper {
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.h33-create-ask-copy label,
.h33-create-kicker {
    color: var(--h33-purple-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-create-ask-copy input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--h33-text);
    font-size: 15px;
    font-weight: 600;
    outline: none;
}

.h33-create-ask-copy input::placeholder {
    color: var(--h33-text-muted);
    opacity: 1;
    font-weight: 500;
}

.h33-create-recommendation-card {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.h33-create-recommendation-head,
.h33-create-resume-main,
.h33-create-source-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.h33-create-recommendation-card h2,
.h33-create-bottom-cta h2 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.h33-create-recommendation-card p,
.h33-create-bottom-cta p {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-create-recommendation-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.h33-create-recommendation-meta > div,
.h33-create-path-meta > div {
    display: grid;
    gap: 4px;
}

.h33-create-recommendation-meta span,
.h33-create-path-meta span,
.h33-create-resume-main span,
.h33-create-draft-copy span,
.h33-create-source-meta,
.h33-create-source-status,
.h33-create-progress-wrap em {
    color: var(--h33-text-muted);
    font-size: 13px;
}

.h33-create-recommendation-meta strong,
.h33-create-path-meta strong,
.h33-create-resume-main strong,
.h33-create-draft-copy strong,
.h33-create-source-main strong {
    font-size: 14px;
}

.h33-create-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(255, 255, 255, 0.92);
}

.h33-create-view-button,
.h33-create-path-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.h33-create-view-button.is-active,
.h33-create-path-chip.is-active {
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.06);
}

.h33-create-path-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.h33-create-path-grid.is-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-create-path-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    gap: 12px;
    min-height: 286px;
    padding: 16px 12px 12px;
    border-radius: 22px;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.h33-create-path-card.is-selected {
    border-color: rgba(109, 77, 242, 0.18);
    box-shadow: 0 22px 48px rgba(52, 63, 112, 0.07);
}

.h33-create-path-card:hover {
    transform: translateY(-1px);
}

.h33-create-path-card-top {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 58px;
}

.h33-create-path-select {
    justify-self: center;
}

.h33-create-path-copy,
.h33-create-path-meta,
.h33-create-path-actions,
.h33-create-draft-copy,
.h33-create-progress-wrap {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.h33-create-path-copy h3 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-align: center;
}

.h33-create-path-copy p {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.h33-create-path-meta {
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-create-path-actions {
    gap: 6px;
    align-content: end;
    margin-top: auto;
}

.h33-create-path-grid.is-list .h33-create-path-card {
    grid-template-columns: auto minmax(0, 0.78fr) minmax(0, 1fr) auto;
    align-items: start;
    min-height: auto;
}

.h33-create-path-grid.is-list .h33-create-path-meta {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.h33-create-path-grid.is-list .h33-create-path-copy h3,
.h33-create-path-grid.is-list .h33-create-path-copy p {
    text-align: left;
}

.h33-create-path-grid.is-list .h33-create-path-card-top {
    justify-content: flex-start;
}

.h33-create-path-meta > div {
    min-height: 0;
}

.h33-create-path-meta span {
    color: var(--h33-text-soft);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.h33-create-path-meta strong {
    display: block;
    color: var(--h33-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.h33-create-path-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px solid rgba(109, 77, 242, 0.14);
    background: rgba(255, 255, 255, 0.92);
    color: var(--h33-purple-strong);
    font-size: 11px;
    font-weight: 700;
}

.h33-create-selected-pill {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(109, 77, 242, 0.1);
    color: var(--h33-purple-strong);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.h33-create-coming-soon {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
}

.h33-create-path-card.is-coming-soon {
    opacity: 0.72;
}

.h33-create-path-card.is-coming-soon .h33-create-path-select {
    cursor: default;
}

/* Start-with-AI course draft modal */
.h33-ai-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.h33-ai-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e8ebf2;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.28);
    padding: 24px;
}
.h33-ai-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(100, 116, 139, 0.1);
    color: #475569;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.h33-ai-modal-close:hover { background: rgba(100, 116, 139, 0.18); }
.h33-ai-modal-title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
/* Track E — onboarding modal */
.h33-onb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:14px;}
.h33-onb-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px;border:1px solid rgba(114,125,177,.2);border-radius:14px;background:transparent;cursor:pointer;text-align:left;transition:border-color .15s,background .15s;}
.h33-onb-card:hover{border-color:#6d5ce0;background:rgba(109,92,224,.06);}
.h33-onb-card strong{font:700 14px/1.2 Poppins,sans-serif;color:var(--h33-text,#1f2340);}
.h33-onb-card span{font-size:11.5px;color:var(--h33-text-muted,#8a879a);}
.h33-onb-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(109,92,224,.1);margin-bottom:4px;}
.h33-onb-icon .h33-icon svg{width:18px;height:18px;stroke:#6d5ce0;fill:none;stroke-width:2;}
.h33-onb-goals{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.h33-onb-goal{padding:9px 14px;border:1px solid rgba(114,125,177,.22);border-radius:999px;background:transparent;cursor:pointer;font:600 13px/1 Poppins,sans-serif;color:var(--h33-text,#1f2340);}
.h33-onb-goal.is-on{border-color:#6d5ce0;background:rgba(109,92,224,.1);color:#5a48c8;}
.h33-onb-plan{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.h33-onb-plan li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(114,125,177,.16);border-radius:12px;}
.h33-onb-plan strong{display:block;font-size:14px;}
.h33-onb-plan span{font-size:12px;color:var(--h33-text-muted,#8a879a);}
.h33-onb-pi{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(109,92,224,.1);}
.h33-onb-pi .h33-icon svg{width:17px;height:17px;stroke:#6d5ce0;fill:none;stroke-width:2;}
.h33-onb-badge{margin-left:auto;font-size:11px;font-weight:700;color:var(--h33-text-muted,#8a879a);white-space:nowrap;}
.h33-onb-badge.is-do{color:#5a48c8;}
.h33-onb-badge.is-done{color:#15803d;display:inline-flex;align-items:center;gap:4px;}
.h33-onb-badge.is-done .h33-icon svg{width:13px;height:13px;stroke:#15803d;fill:none;stroke-width:2.4;}
.h33-ai-modal-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #64748b; }
.h33-ai-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.h33-ai-field > span { font-size: 12.5px; font-weight: 700; color: #334155; }
.h33-ai-field input,
.h33-ai-field textarea {
    width: 100%;
    border: 1px solid #e2e6f0;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    outline: none;
    resize: vertical;
}
.h33-ai-field input:focus,
.h33-ai-field textarea:focus { border-color: rgba(109, 26, 134, 0.4); box-shadow: 0 0 0 3px rgba(109, 26, 134, 0.08); }
.h33-ai-modal-error { margin: 4px 0 0; color: #b91c1c; font-size: 12.5px; }
.h33-ai-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.h33-ai-modal-actions.is-review { justify-content: space-between; }
.h33-ai-modal-loading { text-align: center; padding: 28px 8px; }
.h33-ai-spinner {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 3px solid rgba(109, 26, 134, 0.18);
    border-top-color: #6d1af2;
    animation: h33-ai-spin 0.9s linear infinite;
}
@keyframes h33-ai-spin { to { transform: rotate(360deg); } }
.h33-ai-review-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #475569; }
.h33-ai-review-block { margin-bottom: 14px; }
.h33-ai-review-block h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.04em; }
.h33-ai-review-block ul { margin: 0; padding-left: 18px; }
.h33-ai-review-block li { font-size: 13px; line-height: 1.5; color: #475569; }
.h33-ai-review-block.is-assumptions li { color: #94a3b8; }
.h33-ai-review-module { margin-bottom: 10px; }
.h33-ai-review-module h4 { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: #0f172a; }
.h33-ai-review-module ul { margin: 0; padding-left: 18px; }
@media (max-width: 560px) {
    .h33-ai-modal-overlay { padding: 16px 10px; }
    .h33-ai-modal { padding: 18px; border-radius: 14px; }
    .h33-ai-modal-actions.is-review { justify-content: flex-end; }
}
.h33-ai-modal.is-wide { max-width: 640px; }
.h33-create-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.h33-button.is-danger { background: #fdeaea; color: #c0392b; border: 1px solid #f4c9c9; }
.h33-button.is-danger:hover { background: #fadadb; border-color: #eaadad; color: #a5281f; }
/* Course manager list */
.h33-cm-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; margin-top: 4px; }
.h33-cm-empty { padding: 18px; border-radius: 12px; background: rgba(114, 125, 177, 0.06); color: #64748b; font-size: 14px; }
.h33-cm-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 12px; border: 1px solid #eceff5; background: #fff;
}
.h33-cm-row-main { min-width: 0; flex: 1 1 auto; }
.h33-cm-row-main h4 { margin: 0 0 3px; font-size: 14px; font-weight: 700; color: #0f172a; }
.h33-cm-row-main p { margin: 0; font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.h33-cm-status { text-transform: capitalize; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(100, 116, 139, 0.12); color: #475569; }
.h33-cm-status.is-published { background: rgba(16, 185, 129, 0.14); color: #047857; }
.h33-cm-row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.h33-cm-confirm {
    flex-basis: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e2e6f0; font-size: 12.5px; color: #475569;
}
.h33-cm-confirm > span { flex: 1 1 auto; min-width: 140px; }
.h33-cm-confirm-error { color: #b91c1c; flex: 1 1 auto; }
.h33-cm-row-btn { width: 100%; text-align: left; cursor: pointer; font: inherit; }
.h33-cm-row-btn:hover { border-color: rgba(109, 77, 242, 0.3); }
.h33-source-connectors { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.h33-source-upload-label { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.h33-rail-draft-note {
    display: flex; align-items: center; gap: 6px;
    margin: 12px 0 0; padding: 8px 10px; border-radius: 8px;
    background: rgba(100, 116, 139, 0.07); color: #64748b; font-size: 11.5px; line-height: 1.4;
}
.h33-rail-draft-note span { color: #94a3b8; font-size: 13px; }
.h33-rail-context-chip {
    display: inline-flex; align-items: center; max-width: 100%;
    margin-top: 4px; padding: 3px 9px; border-radius: 999px;
    background: rgba(109, 77, 242, 0.09); color: var(--h33-purple-strong, #6d1af2);
    font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* In-rail course AI generator (form / generating / preview) */
.h33-aigen { display: flex; flex-direction: column; gap: 10px; }
.h33-aigen-label { font-size: 12px; font-weight: 800; color: #0f172a; letter-spacing: 0.01em; }
.h33-aigen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h33-select {
    width: 100%; border: 1px solid #e2e6f0; border-radius: 10px; padding: 9px 11px;
    font-size: 13.5px; color: #0f172a; background: #fff;
}
.h33-aigen-error { margin: 0; color: #b91c1c; font-size: 12px; }
.h33-aigen-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 22px 8px; }
.h33-aigen-loading strong { font-size: 14px; color: #0f172a; }
.h33-aigen-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h33-aigen-preview-head strong { font-size: 13px; font-weight: 800; color: #0f172a; }
.h33-aigen-title { margin: 2px 0 0; font-size: 15px; font-weight: 800; color: #0f172a; }
.h33-aigen-modules { display: flex; flex-direction: column; gap: 6px; }
.h33-aigen-module {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 10px; border: 1px solid #eceff5; background: #fff;
}
.h33-aigen-module-index {
    flex: 0 0 auto; min-width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px; background: rgba(109, 77, 242, 0.1); color: var(--h33-purple-strong, #6d1af2);
    font-size: 11px; font-weight: 800;
}
.h33-aigen-module-body { min-width: 0; display: flex; flex-direction: column; }
.h33-aigen-module-body strong { font-size: 13px; font-weight: 700; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h33-aigen-module-body span { font-size: 11.5px; color: #64748b; }
.h33-builder-actions.is-split { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }

.h33-create-resume-row,
.h33-create-draft-row,
.h33-create-source-row {
    display: grid;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
    min-width: 0;
    overflow: hidden;
}

.h33-create-resume-row {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.34fr) auto;
}

/* The resume card lives in a ~430px support-grid column, so the 3-across template
   (title | 140px progress | Continue) starves the title column to ~99px and crushes
   "Internal Training Program" into a vertical letter stack. The viewport media query
   that stacks this row never fires (the card is narrow inside a WIDE viewport), so
   stack it by the card's OWN width via a container query — reusing the same stacked
   layout. */
.h33-create-resume-list {
    container-type: inline-size;
}

@container (max-width: 460px) {
    .h33-create-resume-row {
        grid-template-columns: 1fr;
    }

    .h33-create-progress-wrap {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .h33-create-progress-wrap em {
        text-align: right;
    }

    .h33-create-resume-row .h33-button {
        width: 100%;
    }
}

.h33-create-progress-wrap .h33-bar-track {
    height: 7px;
}

.h33-create-draft-row {
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    color: inherit;
    align-items: center;
}

.h33-create-draft-row em,
.h33-create-progress-wrap em {
    font-style: normal;
}

.h33-create-draft-row em {
    grid-column: auto;
    justify-self: end;
}

.h33-create-draft-row > .h33-icon {
    justify-self: end;
    align-self: center;
}

.h33-create-source-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    color: inherit;
}

.h33-create-source-status {
    font-weight: 700;
    text-align: right;
}

.h33-create-source-row.is-static {
    cursor: default;
}

.h33-create-source-status.is-muted {
    color: var(--h33-text-soft);
}

.h33-create-draft-row em,
.h33-create-source-status,
.h33-create-source-meta,
.h33-create-progress-wrap em {
    white-space: nowrap;
}

.h33-create-source-meta {
    text-align: right;
}

.h33-create-recommendation-card .h33-priority-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.h33-create-recommendation-card .h33-priority-actions .h33-button {
    width: 100%;
    padding-inline: 16px;
    min-width: 0;
    line-height: 1.24;
    text-align: center;
}

.h33-create-bottom-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(247, 242, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.h33-hub-shell {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 255, 0.98));
}

.h33-hub-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 12px 12px;
    border-right: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(247, 249, 255, 0.985));
}

.h33-hub-sidebar-brand {
    display: block;
    padding: 6px 8px 2px;
}

.h33-hub-sidebar-brand img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
}

.h33-hub-sidebar-brand > div {
    min-width: 0;
}

.h33-hub-sidebar-brand strong {
    display: block;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.h33-hub-sidebar-brand span {
    color: var(--h33-text-muted);
    font-size: 10px;
    font-weight: 700;
}

.h33-hub-sidebar-sections {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    gap: 12px;
}

.h33-hub-sidebar-list,
.h33-hub-sidebar-foot-list {
    display: grid;
    gap: 8px;
}

.h33-hub-sidebar-section {
    display: grid;
    gap: 10px;
}

.h33-hub-sidebar-section h3 {
    margin: 0;
    color: var(--h33-text-soft);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0 14px;
}

.h33-hub-sidebar-item,
.h33-hub-sidebar-foot-link,
.h33-hub-rail-action {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    text-align: left;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* Match the /apps launcher nav weight + font: darker resting color and a slightly
   larger label so hub nav items read with the same presence as the Apps page. */
.h33-hub-sidebar-item {
    color: var(--h33-text);
    font-size: 15px;
    font-weight: 650;
}
.h33-hub-sidebar-item-copy span {
    font-weight: 650;
}

.h33-hub-sidebar-foot-link,
.h33-hub-rail-action {
    min-height: 46px;
    padding: 10px 14px;
    border-color: rgba(114, 125, 177, 0.06);
    background: rgba(250, 251, 255, 0.76);
}

.h33-hub-sidebar-item:hover,
.h33-hub-sidebar-item:focus-visible,
.h33-hub-sidebar-foot-link:hover,
.h33-hub-sidebar-foot-link:focus-visible,
.h33-hub-rail-action:hover,
.h33-hub-rail-action:focus-visible {
    color: var(--h33-text);
    background: rgba(109, 77, 242, 0.08);
    border-color: rgba(109, 77, 242, 0.12);
}

.h33-hub-sidebar-item.is-active {
    color: var(--h33-purple-strong);
    background: linear-gradient(135deg, rgba(109, 77, 242, 0.1), rgba(244, 241, 255, 0.96));
    border-color: rgba(109, 77, 242, 0.12);
    box-shadow: inset 0 0 0 1px rgba(109, 77, 242, 0.04);
}

.h33-hub-sidebar-item-copy {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.h33-hub-sidebar-item-copy .h33-icon svg,
.h33-hub-sidebar-meta .h33-icon svg {
    width: 18px;
    height: 18px;
}

.h33-hub-sidebar-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(109, 77, 242, 0.12);
    color: var(--h33-purple-strong);
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-hub-sidebar-foot-link {
    display: grid;
    align-items: flex-start;
    gap: 2px;
}

.h33-hub-sidebar-foot-link strong,
.h33-hub-rail-row strong,
.h33-hub-note-row p {
    font-size: 12.5px;
}

.h33-hub-sidebar-foot-link span,
.h33-hub-rail-row span,
.h33-hub-note-row span,
.h33-hub-file-row span {
    color: var(--h33-text-muted);
    font-size: 11px;
}

.h33-hub-sidebar-bottom {
    display: grid;
    gap: 12px;
    margin-top: auto;
}

.h33-hub-assistant-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(109, 77, 242, 0.12), rgba(244, 241, 255, 0.98));
    color: var(--h33-purple-strong);
    font-weight: 800;
    border: 1px solid rgba(109, 77, 242, 0.1);
}

.h33-hub-sidebar-meta {
    display: grid;
    gap: 6px;
    padding: 0 6px;
}

.h33-hub-sidebar-meta button,
.h33-hub-sidebar-meta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-hub-main {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    background:
        radial-gradient(circle at top left, rgba(121, 99, 255, 0.03), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.98));
}

.h33-hub-topbar,
.h33-hub-topbar-tools,
.h33-hub-toolbar-actions,
.h33-hub-community-filter-row,
.h33-hub-community-action-row,
.h33-hub-community-comment-actions,
.h33-hub-detail-actions,
.h33-hub-inline-tags,
.h33-hub-audience-tabs,
.h33-hub-revenue-detail-tabs {
    display: flex;
    align-items: center;
    gap: 12px;
}

.h33-hub-topbar-tools,
.h33-hub-toolbar-actions,
.h33-hub-community-filter-row,
.h33-hub-inline-tags,
.h33-hub-audience-tabs,
.h33-hub-revenue-detail-tabs {
    flex-wrap: wrap;
}

.h33-hub-topbar {
    justify-content: space-between;
    gap: 18px;
    padding: 14px 28px 0;
}

.h33-hub-topbar-nav {
    min-width: 0;
    overflow: hidden;
}

.h33-hub-tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.h33-hub-tabs::-webkit-scrollbar {
    display: none;
}

.h33-hub-tab {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 15px;
    border-radius: 999px;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background 0.15s ease, color 0.15s ease;
}

.h33-hub-tab:hover {
    color: var(--h33-text);
    background: rgba(114, 125, 177, 0.09);
}

.h33-hub-tab.is-active {
    color: #fff;
    font-weight: 800;
    background: linear-gradient(135deg, #6f4df5, #4f45e6);
    box-shadow: 0 6px 16px rgba(79, 69, 230, 0.24);
}

.h33-hub-tab.is-active:hover {
    color: #fff;
    background: linear-gradient(135deg, #6f4df5, #4f45e6);
}

.h33-hub-topbar-tools {
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.h33-hub-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    width: min(100%, 260px);
    min-width: 200px;
    padding: 0 12px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--h33-shadow-soft);
}

.h33-hub-search--panel {
    width: 100%;
    min-width: 0;
    box-shadow: none;
}

/* Today: prominent full-width "ask Copilot / search" bar at the top of the page. */
.h33-today-search {
    display: flex;
    width: 100%;
    max-width: 720px;
    min-height: 54px;
    padding: 0 8px 0 16px;
    border-radius: 18px;
}

.h33-today-search input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    font-size: 15px;
    min-width: 0;
    outline: none;
}

.h33-today-search .h33-button {
    flex: 0 0 auto;
}

.h33-hub-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 600;
    outline: none;
}

.h33-hub-search-shortcut {
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(114, 125, 177, 0.08);
    color: var(--h33-text-muted);
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.h33-hub-profile-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(114, 125, 177, 0.12);
    box-shadow: var(--h33-shadow-soft);
}

.h33-hub-profile-copy {
    display: grid;
    gap: 2px;
    text-align: left;
}

.h33-hub-profile-copy strong {
    font-size: 12px;
}

.h33-hub-profile-copy span {
    color: var(--h33-text-muted);
    font-size: 10px;
}

.h33-hub-content {
    padding: 14px 28px 28px;
    display: grid;
    gap: 18px;
    /* The content sits in .h33-hub-main's `1fr` row (min-height:100vh), so a grid
       with the default align-content stretches/floats short pages away from the top.
       Pack to the top so short pages stay top-aligned; extra space collects at the
       bottom. */
    align-content: start;
}

.h33-hub-page-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.h33-hub-page-intro h1,
.h33-hub-audience-toolbar h1,
.h33-hub-community-topbar h1 {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: clamp(32px, 2.5vw, 46px);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.h33-hub-page-intro p,
.h33-hub-audience-toolbar p {
    margin: 6px 0 0;
    color: var(--h33-text-muted);
    font-size: 15px;
}

.h33-hub-today-intro-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 640px) {
    .h33-hub-today-intro-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

.h33-hub-page-intro--compact h1,
.h33-hub-revenue-detail-head h2,
.h33-hub-community-thread-surface h2 {
    font-size: 24px;
}

.h33-workspace-metric-strip.is-six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.h33-hub-metric-strip .h33-workspace-metric {
    min-height: 136px;
    border-radius: 20px;
}

.h33-hub-breadcrumb-link,
.h33-hub-breadcrumb-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-hub-inline-tags {
    flex-wrap: wrap;
}

.h33-hub-key-value-list,
.h33-hub-rail-list,
.h33-hub-table,
.h33-hub-funnel-copy,
.h33-hub-timeline-list,
.h33-hub-journey-list,
.h33-hub-audience-stat-list {
    display: grid;
    gap: 12px;
}

.h33-hub-rail-row {
    display: grid;
    gap: 6px;
}

.h33-hub-key-value-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-hub-key-value-list > div,
.h33-hub-funnel-copy > div {
    display: grid;
    gap: 4px;
}

.h33-hub-key-value-list span,
.h33-hub-audience-stat-row em,
.h33-hub-task-row span,
.h33-hub-community-thread-meta span,
.h33-hub-community-author span,
.h33-hub-community-comment-meta span,
.h33-hub-table-head span,
.h33-hub-table-row span,
.h33-hub-funnel-copy em {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-key-value-list strong,
.h33-hub-community-thread-card strong,
.h33-hub-revenue-opportunity strong {
    font-size: 13px;
}

.h33-hub-create-page,
.h33-hub-audience-page,
.h33-hub-revenue-page,
.h33-hub-community-page,
.h33-hub-insights-page {
    display: grid;
    gap: 18px;
}

.h33-hub-create-hero,
.h33-hub-create-support-grid,
.h33-hub-create-bottom-grid,
.h33-hub-insights-top-grid,
.h33-hub-insights-middle-grid,
.h33-hub-insights-bottom-grid {
    display: grid;
    gap: 18px;
}

.h33-hub-create-hero {
    grid-template-columns: minmax(0, 1.46fr) minmax(340px, 0.96fr);
    align-items: start;
}

.h33-hub-create-support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h33-hub-create-bottom-grid {
    grid-template-columns: minmax(0, 1.48fr) minmax(320px, 0.82fr);
}

.h33-hub-create-prompt-card,
.h33-hub-create-recommendation-card,
.h33-hub-create-ai-card,
.h33-hub-create-readiness-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 251, 255, 0.98));
    box-shadow: 0 16px 36px rgba(35, 47, 88, 0.04);
}

.h33-hub-create-prompt-row {
    display: grid;
    grid-template-columns: auto minmax(180px, 0.46fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.h33-hub-create-prompt-row label {
    color: var(--h33-text-muted);
    font-size: 14px;
    font-weight: 700;
}

.h33-hub-create-prompt-row input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    outline: none;
}

.h33-hub-create-card-top,
.h33-hub-audience-profile-main,
.h33-hub-community-author,
.h33-hub-media-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.h33-hub-create-recommendation-card {
    display: grid;
    gap: 14px;
}

.h33-hub-create-reco-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 251, 255, 0.98));
}

.h33-hub-create-reco-banner > div {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.h33-hub-create-reco-banner > div span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-create-builds.is-primary .h33-section-title {
    font-size: 22px;
}

.h33-create-example-chip {
    border: 1px solid rgba(114, 125, 177, 0.18);
    background: rgba(250, 251, 255, 0.9);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--h33-text-muted);
}

.h33-create-example-chip:hover {
    border-color: rgba(114, 125, 177, 0.32);
    color: var(--h33-text);
}

.h33-hub-create-recommendation-card h2,
.h33-hub-create-readiness-card h2 {
    margin: 0;
    font-size: 24px;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.h33-hub-create-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.h33-hub-create-stat-grid div {
    display: grid;
    gap: 4px;
}

.h33-hub-create-stat-grid span,
.h33-hub-create-examples span,
.h33-hub-create-examples em {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-create-recommendation-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.h33-hub-create-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-inline: 6px;
}

.h33-hub-create-ai-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.h33-hub-create-ai-tool {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.86);
}

.h33-hub-create-ai-tool p,
.h33-hub-community-thread-card p,
.h33-hub-community-body,
.h33-hub-note-row p {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-hub-create-readiness-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 16px;
    align-items: start;
}

.h33-hub-create-readiness-ring {
    width: 126px;
    height: 126px;
    border-radius: 50%;
    border: 10px solid rgba(109, 77, 242, 0.12);
    display: grid;
    place-items: center;
    text-align: center;
}

.h33-hub-create-readiness-ring strong {
    font-size: 24px;
}

.h33-hub-create-readiness-ring span {
    color: var(--h33-text-muted);
    font-size: 11px;
    line-height: 1.3;
}

.h33-hub-create-readiness-list,
.h33-hub-revenue-columns,
.h33-hub-audience-contact-list,
.h33-hub-top-opportunity-list {
    display: grid;
    gap: 12px;
}

.h33-hub-create-readiness-row,
.h33-hub-audience-stat-row,
.h33-hub-deal-row,
.h33-hub-timeline-row,
.h33-hub-community-thread-meta,
.h33-hub-community-comment-meta,
.h33-hub-task-row {
    display: grid;
    align-items: center;
    gap: 12px;
}

.h33-hub-create-readiness-row,
.h33-hub-audience-stat-row {
    grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr) auto;
}

.h33-hub-create-readiness-row.is-count {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.h33-hub-create-readiness-row.is-count span {
    color: var(--h33-text-muted);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ============================================================================
   Create page — density + target layout (staging redesign)
   Denser cards, 5-across builder grid, equal-weight AI/Journey row, compact
   Resume/Drafts/Sources, tighter AI-tools + Ready-to-Publish. Scoped to the
   Create page so nothing else changes.
   ============================================================================ */
.h33-hub-create-page .h33-hub-create-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;}
.h33-hub-create-page .h33-hub-create-support-grid{gap:16px;}
.h33-hub-create-page .h33-hub-create-bottom-grid{gap:16px;grid-template-columns:minmax(0,1.7fr) minmax(300px,0.9fr);align-items:stretch;}
/* softer, less-round cards (match the Hub card language ~14px) */
.h33-hub-create-page .h33-hub-create-prompt-card,
.h33-hub-create-page .h33-hub-create-recommendation-card,
.h33-hub-create-page .h33-hub-create-ai-card,
.h33-hub-create-page .h33-hub-create-readiness-card,
.h33-hub-create-page .h33-create-path-card,
.h33-hub-create-page .h33-create-list-panel{border-radius:14px;box-shadow:0 8px 22px rgba(35,47,88,0.04);}
/* AI Create card — header + input row + suggestion chips; fills its half */
.h33-hub-create-page .h33-hub-create-prompt-card{display:flex;flex-direction:column;gap:14px;padding:20px 22px;}
.h33-hub-create-page .h33-hub-create-prompt-head{display:flex;align-items:center;gap:12px;}
.h33-hub-create-page .h33-hub-create-prompt-head h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-0.02em;}
.h33-hub-create-page .h33-hub-create-prompt-head .h33-create-kicker{margin:0;}
.h33-hub-create-page .h33-hub-create-prompt-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;background:#fff;border:1px solid var(--h33-border);border-radius:12px;padding:6px 6px 6px 14px;}
.h33-hub-create-page .h33-hub-create-prompt-row input{font-size:14px;}
.h33-hub-create-page .h33-hub-create-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
/* Journey (recommendation) card — equal visual weight */
.h33-hub-create-page .h33-hub-create-recommendation-card{padding:20px 22px;gap:12px;}
.h33-hub-create-page .h33-hub-create-recommendation-card h2{font-size:19px;}
/* Section titles */
.h33-hub-create-page .h33-hub-create-builds.is-primary .h33-section-title,
.h33-hub-create-page .h33-section-title{font-size:16px;}
/* Builder grid — 5 across, compact left-aligned cards */
.h33-hub-create-page .h33-create-path-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.h33-hub-create-page .h33-create-path-card{min-height:0;grid-template-rows:auto auto auto auto;padding:16px;gap:10px;}
.h33-hub-create-page .h33-create-path-card-top{justify-content:flex-start;min-height:0;}
.h33-hub-create-page .h33-create-path-copy h3{text-align:left;font-size:15px;}
.h33-hub-create-page .h33-create-path-copy p{text-align:left;-webkit-line-clamp:2;font-size:12px;min-height:34px;}
.h33-hub-create-page .h33-create-path-meta{grid-template-columns:1fr 1fr;gap:4px 12px;padding-top:10px;}
.h33-hub-create-page .h33-create-path-meta span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--h33-text-soft);}
.h33-hub-create-page .h33-create-path-meta strong{font-size:12px;}
/* Resume / Drafts / Sources — compact rows */
.h33-hub-create-page .h33-create-list-panel{padding:18px 20px;}
.h33-hub-create-page .h33-create-resume-row{padding:11px 13px;gap:8px;border-radius:12px;}
.h33-hub-create-page .h33-create-resume-row .h33-button{width:auto;justify-self:end;}
.h33-hub-create-page .h33-create-resume-list{gap:10px;}
.h33-hub-create-page .h33-create-draft-row,
.h33-hub-create-page .h33-create-source-row{padding:11px 13px;border-radius:12px;}
/* AI tools — 6 compact supplemental cards */
.h33-hub-create-page .h33-hub-create-ai-card{padding:18px 20px;}
.h33-hub-create-page .h33-hub-create-ai-tool{padding:12px;gap:8px;border-radius:12px;}
.h33-hub-create-page .h33-hub-create-ai-tool strong{font-size:13px;}
.h33-hub-create-page .h33-hub-create-ai-tool p{font-size:11.5px;line-height:1.45;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;}
/* Ready to publish */
.h33-hub-create-page .h33-hub-create-readiness-card{padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
.h33-hub-create-page .h33-hub-create-readiness-card h2{font-size:18px;}
.h33-hub-create-page .h33-hub-create-readiness-card > a{margin-top:auto;}
/* responsive */
@media (max-width:1280px){.h33-hub-create-page .h33-create-path-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.h33-hub-create-page .h33-hub-create-ai-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:920px){.h33-hub-create-page .h33-hub-create-hero,.h33-hub-create-page .h33-hub-create-support-grid,.h33-hub-create-page .h33-hub-create-bottom-grid{grid-template-columns:1fr;}.h33-hub-create-page .h33-create-path-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.h33-hub-create-page .h33-create-path-grid,.h33-hub-create-page .h33-hub-create-ai-grid{grid-template-columns:1fr;}}

.h33-hub-audience-toolbar,
.h33-hub-community-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.h33-hub-audience-layout,
.h33-hub-revenue-layout,
.h33-hub-community-layout,
.h33-hub-insights-layout {
    display: grid;
    gap: 18px;
}

.h33-hub-community-layout {
    grid-template-columns: 290px minmax(0, 1fr) 320px;
}

/* Live CRM layout: contact list + detail pane (no fabricated right rail). */
.h33-hub-audience-layout {
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;
}

.h33-hub-revenue-layout,
.h33-hub-insights-layout {
    grid-template-columns: minmax(0, 1fr) 336px;
}

.h33-hub-audience-list,
.h33-hub-audience-detail-card,
.h33-hub-audience-info-card,
.h33-hub-audience-engagement-card,
.h33-hub-audience-journey-card,
.h33-hub-audience-timeline-card,
.h33-hub-audience-deals-card,
.h33-hub-audience-tasks-card,
.h33-hub-revenue-pipeline-card,
.h33-hub-revenue-detail-rail,
.h33-hub-community-list,
.h33-hub-community-thread-surface,
.h33-hub-community-comment-box,
.h33-hub-community-comment-card,
.h33-hub-insights-filter-card {
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 251, 255, 0.98));
    box-shadow: 0 16px 36px rgba(35, 47, 88, 0.04);
}

.h33-hub-audience-list,
.h33-hub-audience-detail-card,
.h33-hub-audience-info-card,
.h33-hub-audience-engagement-card,
.h33-hub-audience-journey-card,
.h33-hub-audience-timeline-card,
.h33-hub-audience-deals-card,
.h33-hub-audience-tasks-card,
.h33-hub-revenue-pipeline-card,
.h33-hub-revenue-detail-rail,
.h33-hub-community-list,
.h33-hub-community-thread-surface,
.h33-hub-community-comment-box,
.h33-hub-community-comment-card,
.h33-hub-insights-filter-card {
    display: grid;
    gap: 16px;
    align-content: start;
}

.h33-hub-audience-contact,
.h33-hub-community-thread-card,
.h33-hub-revenue-opportunity,
.h33-hub-top-opportunity,
.h33-hub-rail-row.is-button {
    width: 100%;
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
    text-align: left;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.h33-hub-audience-contact:hover,
.h33-hub-community-thread-card:hover,
.h33-hub-revenue-opportunity:hover,
.h33-hub-top-opportunity:hover,
.h33-hub-rail-row.is-button:hover {
    transform: translateY(-1px);
    border-color: rgba(109, 77, 242, 0.14);
}

.h33-hub-audience-contact.is-active,
.h33-hub-community-thread-card.is-active,
.h33-hub-revenue-opportunity.is-active {
    border-color: rgba(109, 77, 242, 0.18);
    box-shadow: 0 16px 34px rgba(62, 74, 120, 0.07);
    background: linear-gradient(180deg, rgba(248, 245, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.h33-hub-audience-contact {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
}

.h33-hub-audience-contact-copy {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.h33-hub-audience-contact-copy strong {
    min-width: 0;
    overflow-wrap: normal;
}

.h33-hub-audience-contact-copy span,
.h33-hub-audience-profile-main p {
    min-width: 0;
    overflow-wrap: anywhere;
}

.h33-hub-profile-photo {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.h33-hub-profile-photo.is-violet,
.h33-avatar-badge.is-violet {
    background: linear-gradient(135deg, #7d5cff, #6340f5);
}

.h33-hub-profile-photo.is-gold,
.h33-avatar-badge.is-gold {
    background: linear-gradient(135deg, #f7b04f, #ef8f16);
}

.h33-hub-profile-photo.is-pink,
.h33-avatar-badge.is-pink {
    background: linear-gradient(135deg, #ec7adf, #d94bc4);
}

.h33-hub-profile-photo.is-mint,
.h33-avatar-badge.is-mint {
    background: linear-gradient(135deg, #59d591, #2fbf7a);
}

.h33-hub-profile-photo.is-blue,
.h33-avatar-badge.is-blue {
    background: linear-gradient(135deg, #69adff, #4c8bf7);
}

.h33-hub-audience-profile-top,
.h33-hub-audience-summary-grid,
.h33-hub-audience-content-grid,
.h33-hub-audience-deals-grid,
.h33-hub-community-comment-head,
.h33-hub-insights-demographics,
.h33-hub-filter-date-grid {
    display: grid;
    gap: 16px;
}

.h33-hub-audience-profile-top,
.h33-hub-community-comment-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.h33-hub-audience-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h33-hub-audience-summary-grid div,
.h33-hub-filter-form label {
    display: grid;
    gap: 4px;
}

.h33-hub-audience-summary-grid span,
.h33-hub-filter-form span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-audience-summary-grid strong {
    font-size: 18px;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

.h33-hub-audience-summary-grid em,
.h33-hub-community-thread-meta em,
.h33-hub-revenue-opportunity em {
    color: var(--h33-text-muted);
    font-size: 11px;
    font-style: normal;
}

.h33-hub-audience-tabs,
.h33-hub-revenue-detail-tabs {
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-hub-audience-tabs span,
.h33-hub-audience-tabs button,
.h33-hub-revenue-detail-tabs span {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
}

.h33-hub-audience-tabs button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.h33-hub-audience-tabs .is-active,
.h33-hub-revenue-detail-tabs .is-active {
    color: var(--h33-purple-strong);
    background: rgba(109, 77, 242, 0.08);
}

.h33-hub-audience-content-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.92fr);
}

.h33-hub-audience-timeline-card {
    grid-column: 1 / 3;
}

.h33-hub-audience-deals-grid {
    grid-column: 2 / 4;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-hub-journey-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
}

.h33-hub-journey-dot,
.h33-hub-task-check {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(109, 77, 242, 0.26);
    background: #fff;
    margin-top: 2px;
}

.h33-hub-journey-row.is-complete .h33-hub-journey-dot,
.h33-hub-task-check {
    background: var(--h33-purple-strong);
    border-color: var(--h33-purple-strong);
}

.h33-hub-journey-row.is-active .h33-hub-journey-dot {
    background: var(--h33-mint);
    border-color: var(--h33-mint);
}

.h33-hub-timeline-row,
.h33-hub-deal-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 12px 0;
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-hub-timeline-row:first-child,
.h33-hub-deal-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.h33-hub-note-row,
.h33-hub-file-row {
    display: grid;
    gap: 6px;
    padding: 12px 0;
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-hub-note-row:first-child,
.h33-hub-file-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.h33-hub-revenue-main {
    display: grid;
    gap: 18px;
}

.h33-hub-audience-main,
.h33-hub-audience-rail,
.h33-hub-community-main,
.h33-hub-community-rail {
    display: grid;
    gap: 18px;
}

.h33-hub-revenue-columns {
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 280px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 125, 177, 0.35) rgba(114, 125, 177, 0.1);
}

.h33-hub-revenue-columns::-webkit-scrollbar {
    height: 8px;
}

.h33-hub-revenue-columns::-webkit-scrollbar-thumb {
    background: rgba(114, 125, 177, 0.35);
    border-radius: 999px;
}

.h33-hub-revenue-columns::-webkit-scrollbar-track {
    background: rgba(114, 125, 177, 0.1);
    border-radius: 999px;
}

.h33-hub-revenue-column {
    display: grid;
    gap: 12px;
    min-width: 0;
    align-content: start;
}

.h33-hub-revenue-column-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.h33-hub-revenue-column-head span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-revenue-column-body {
    display: grid;
    gap: 12px;
}

.h33-hub-revenue-opportunity {
    min-height: 122px;
}

.h33-hub-revenue-opportunity > strong {
    white-space: nowrap;
}

.h33-hub-revenue-opportunity span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-revenue-add-link {
    color: var(--h33-purple-strong);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.h33-hub-revenue-bottom-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 0.94fr) minmax(0, 1fr) minmax(0, 1fr);
}

.h33-hub-top-opportunity {
    grid-template-columns: 24px minmax(0, 1fr) auto minmax(100px, 0.58fr) auto;
    align-items: center;
}

.h33-hub-top-opportunity > span:first-child {
    font-weight: 800;
}

.h33-hub-revenue-insight-bar {
    padding: 18px;
    border-radius: 24px;
}

.h33-hub-revenue-insight-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h33-hub-revenue-insight-pill {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
}

.h33-hub-revenue-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.h33-hub-revenue-stage-progress,
.h33-hub-community-comments,
.h33-hub-insights-main,
.h33-hub-insights-rail {
    display: grid;
    gap: 16px;
}

.h33-hub-detail-actions {
    justify-content: stretch;
    flex-wrap: wrap;
}

.h33-hub-detail-actions .h33-button {
    flex: 1 1 0;
}

.h33-hub-community-thread-list,
.h33-hub-community-comments {
    display: grid;
    gap: 14px;
}

.h33-hub-community-thread-meta {
    grid-template-columns: repeat(3, auto);
}

.h33-hub-community-comment-head textarea {
    width: 100%;
    min-height: 80px;
    border: 0;
    background: transparent;
    resize: vertical;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.h33-hub-community-comment-box {
    gap: 12px;
}

.h33-hub-community-comment-meta {
    grid-template-columns: auto auto auto;
}

.h33-hub-community-thread-card .h33-pill,
.h33-hub-community-thread-surface > .h33-pill {
    justify-self: start;
}

.h33-hub-insights-top-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.88fr);
}

.h33-hub-insights-middle-grid,
.h33-hub-insights-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-hub-insights-demographics {
    /* Reflow by the widget's OWN width, not the viewport. The old fixed
       `1.18fr 0.98fr 220px` template crushed the legend column to ~120px in a narrow
       dashboard cell (viewport media queries never fired at wide viewports), so country
       names wrapped onto their own percentages. auto-fit/minmax keeps every sub-panel
       >= 220px and drops columns (3 -> 2 -> 1) as the cell narrows. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    /* Top-align each sub-panel in its cell. When the map/age-list/donut have
       unequal heights (or auto-fit drops to 2 columns, leaving the donut on its
       own row), `align-items: center` floated the shorter panels down the middle
       of their taller cell, reading as a gap. Start-align so every sub-panel sits
       at the top of its cell. */
    align-items: start;
}

/* Understand sidebar → focus-insight-area: flash the section a clicked item points
   to, and dock a tailored AI insight panel. */
@keyframes h33InsightsFocusFlash {
    0%   { box-shadow: 0 0 0 0 rgba(109, 77, 242, 0); }
    18%  { box-shadow: 0 0 0 4px rgba(109, 77, 242, 0.35), 0 18px 42px rgba(109, 77, 242, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(109, 77, 242, 0); }
}

.h33-insights-focus-flash {
    animation: h33InsightsFocusFlash 1.6s ease-out;
    border-color: rgba(109, 77, 242, 0.55) !important;
}

.h33-insights-ai-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    width: min(360px, calc(100vw - 40px));
    display: grid;
    gap: 12px;
    padding: 18px 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(109, 77, 242, 0.22);
    background: linear-gradient(180deg, #ffffff, #f7f5ff);
    box-shadow: 0 24px 60px rgba(38, 49, 87, 0.22);
    animation: h33InsightsPanelIn 0.24s ease-out;
}

@keyframes h33InsightsPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.h33-insights-ai-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.h33-insights-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--h33-purple-strong);
    min-width: 0;
}

.h33-insights-ai-tag svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.h33-insights-ai-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.h33-insights-ai-close {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: rgba(109, 77, 242, 0.08);
    color: var(--h33-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.h33-insights-ai-close:hover {
    background: rgba(109, 77, 242, 0.16);
    color: var(--h33-text);
}

.h33-insights-ai-headline {
    margin: 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--h33-text);
}

.h33-insights-ai-points {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.h33-insights-ai-points li {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--h33-text-muted);
}

.h33-insights-ai-points li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--h33-purple-strong);
}

.h33-hub-map-surface {
    min-height: 220px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 15% 40%, rgba(109, 77, 242, 0.18), transparent 18%),
        radial-gradient(circle at 42% 32%, rgba(76, 139, 247, 0.18), transparent 16%),
        radial-gradient(circle at 68% 52%, rgba(47, 191, 122, 0.18), transparent 18%),
        radial-gradient(circle at 85% 66%, rgba(235, 100, 212, 0.14), transparent 14%),
        linear-gradient(180deg, rgba(245, 241, 255, 0.96), rgba(255, 255, 255, 0.96));
    border: 1px solid rgba(114, 125, 177, 0.08);
    padding: 16px;
}

.h33-hub-map-legend,
.h33-hub-filter-form {
    display: grid;
    gap: 12px;
}

.h33-hub-map-legend div {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.h33-hub-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--h33-purple-strong);
}

.h33-hub-filter-form input,
.h33-hub-filter-form select {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(255, 255, 255, 0.98);
    color: var(--h33-text);
    font-size: 13px;
    font-weight: 600;
}

.h33-hub-filter-date-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-hub-toggle-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.h33-hub-table {
    /* Scroll horizontally instead of clipping the right-hand columns when the grid's min-width
       exceeds the container (iPad-landscape / 13-14" laptop widths). */
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-hub-table-head,
.h33-hub-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(6, minmax(88px, 1fr));
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.94);
}

.h33-hub-table-head {
    background: rgba(246, 248, 255, 0.96);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.h33-hub-table-row {
    border-top: 1px solid rgba(114, 125, 177, 0.08);
    font-size: 13px;
}

.h33-hub-media-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
}

/* The middle text cell holds a title <strong> + date/meta <span> as inline siblings.
   Left inline they run together and wrap awkwardly ("Internal Training Program Aug 12,
   2026"), jamming the value column. Stack them: title over a muted meta line. */
.h33-hub-media-row > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.h33-hub-media-row > div > span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

@media (max-width: 1600px) {
    .h33-hub-shell {
        grid-template-columns: 194px minmax(0, 1fr);
    }

    .h33-hub-content,
    .h33-hub-topbar {
        padding-left: 22px;
        padding-right: 22px;
    }

    .h33-workspace-metric-strip.is-six {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .h33-hub-create-ai-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1480px) {
    .h33-hub-audience-layout {
        grid-template-columns: 300px minmax(0, 1fr);
    }

    .h33-hub-community-layout {
        grid-template-columns: 250px minmax(0, 1fr) 280px;
    }

    .h33-hub-revenue-layout,
    .h33-hub-insights-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .h33-hub-audience-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-hub-audience-info-card,
    .h33-hub-audience-timeline-card,
    .h33-hub-audience-deals-grid {
        grid-column: 1 / -1;
    }

    .h33-hub-revenue-bottom-grid,
    .h33-hub-insights-top-grid,
    .h33-hub-insights-middle-grid,
    .h33-hub-insights-bottom-grid {
        grid-template-columns: 1fr;
    }

    .h33-hub-insights-demographics {
        grid-template-columns: 1fr;
    }

    .h33-hub-audience-contact {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .h33-hub-audience-contact em {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-width: 1120px) {
    .h33-hub-audience-layout,
    .h33-hub-community-layout,
    .h33-hub-revenue-layout,
    .h33-hub-insights-layout,
    .h33-hub-create-hero,
    .h33-hub-create-support-grid,
    .h33-hub-create-bottom-grid,
    .h33-hub-insights-top-grid,
    .h33-hub-insights-middle-grid,
    .h33-hub-insights-bottom-grid,
    .h33-hub-revenue-bottom-grid,
    .h33-hub-audience-content-grid,
    .h33-hub-audience-deals-grid {
        grid-template-columns: 1fr;
    }

    .h33-hub-audience-timeline-card,
    .h33-hub-audience-deals-grid {
        grid-column: auto;
    }

    .h33-hub-insights-demographics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1120px) {
    .h33-hub-shell {
        grid-template-columns: 1fr;
    }

    .h33-hub-sidebar {
        display: none;
    }
}

@media (max-width: 980px) {
    .h33-hub-topbar,
    .h33-hub-page-intro,
    .h33-hub-audience-toolbar,
    .h33-hub-community-topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-hub-search {
        min-width: 0;
        width: 100%;
    }

    .h33-workspace-metric-strip.is-six,
    .h33-hub-create-ai-grid,
    .h33-hub-key-value-list,
    .h33-hub-audience-summary-grid {
        grid-template-columns: 1fr;
    }

    .h33-hub-create-prompt-row,
    .h33-hub-audience-contact,
    .h33-hub-top-opportunity {
        grid-template-columns: 1fr;
    }

    /* Responsive table: on phones each row becomes a labeled card so the numbers
       aren't an unlabeled stack. The header row is hidden and each data cell shows
       its column name via data-label. */
    .h33-hub-table-head {
        display: none;
    }

    .h33-hub-table-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 16px;
    }

    .h33-hub-table-row > strong {
        font-size: 15px;
        padding-bottom: 8px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(114, 125, 177, 0.12);
    }

    .h33-hub-table-row > span {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
    }

    .h33-hub-table-row > span[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--h33-text-muted);
    }

    .h33-hub-create-recommendation-actions {
        grid-template-columns: 1fr;
    }

    .h33-hub-top-opportunity > span:first-child {
        display: none;
    }
}

@media (max-width: 640px) {
    .h33-hub-content,
    .h33-hub-topbar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .h33-hub-revenue-columns {
        grid-auto-flow: column;
        grid-auto-columns: 88%;
        overflow-x: auto;
    }

    .h33-hub-create-prompt-row,
    .h33-hub-community-comment-head,
    .h33-hub-audience-profile-top,
    .h33-hub-create-readiness-header {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1600px) {
    .h33-workspace-shell {
        grid-template-columns: 194px minmax(0, 1fr);
    }

    .h33-workspace-sidebar {
        gap: 20px;
        padding: 16px 12px 12px;
    }

    .h33-workspace-header {
        gap: 14px;
        padding: 16px 24px 4px;
    }

    .h33-workspace-content {
        gap: 18px;
        padding: 8px 24px 24px;
    }

    .h33-workspace-title-row {
        gap: 18px;
    }

    .h33-workspace-title-group {
        gap: 16px;
    }

    .h33-workspace-page-icon {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .h33-workspace-title {
        font-size: clamp(28px, 2.45vw, 40px);
    }

    .h33-workspace-subtitle {
        margin-top: 6px;
        font-size: 14px;
    }

    .h33-workspace-grid,
    .h33-workspace-metric-strip {
        gap: 16px;
    }

    .h33-workspace-metric {
        min-height: 152px;
        gap: 12px;
        padding: 16px 16px 12px;
    }

    .h33-workspace-metric-copy {
        min-height: 0;
    }

    .h33-workspace-metric-value-row strong {
        font-size: 18px;
    }

    .h33-workspace-metric-meta {
        min-height: 32px;
        font-size: 12.5px;
    }

    .h33-workspace-sparkline {
        margin-top: 2px;
        min-height: 42px;
    }

    .h33-workspace-sparkline svg {
        height: 40px;
    }

    .h33-workspace-panel {
        padding: 20px;
    }

    .h33-focus-card {
        grid-template-columns: minmax(0, 1.16fr) 128px;
        padding: 20px;
    }

    .h33-focus-avatar {
        width: 102px;
        height: 102px;
    }

    .h33-message-surface,
    .h33-status-note {
        padding: 16px;
    }

    .h33-opportunity-grid,
    .h33-segment-grid {
        gap: 12px;
    }

    .h33-opportunity-card,
    .h33-segment-card {
        gap: 10px;
        padding: 14px;
    }

    .h33-workspace-grid--audience-top,
    .h33-workspace-grid--revenue-top,
    .h33-workspace-grid--community-top,
    .h33-workspace-grid--insights-top,
    .h33-workspace-grid--audience-middle,
    .h33-workspace-grid--community-middle,
    .h33-workspace-grid--insights-bottom,
    .h33-workspace-grid--revenue-middle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #revenue-opportunities,
    #community-spotlight,
    #insights-summary,
    #audience-top-content,
    #audience-health,
    .h33-workspace-grid--community-middle > .h33-workspace-stack,
    #insights-goals {
        grid-column: 1 / -1;
    }

    .h33-donut-layout {
        grid-template-columns: 188px minmax(0, 1fr);
        gap: 16px;
    }

    .h33-donut-chart {
        width: 176px;
        height: 176px;
        padding: 22px;
    }

    .h33-donut-legend-row {
        gap: 10px;
    }

    .h33-media-row,
    .h33-avatar-row,
    .h33-event-row,
    .h33-table-row,
    .h33-goal-row,
    .h33-activity-row,
    .h33-activity-row.is-table {
        padding: 13px 14px;
    }

    .h33-media-row {
        grid-template-columns: 56px minmax(0, 1fr) minmax(72px, auto);
        gap: 12px;
    }

    .h33-media-thumb,
    .h33-avatar-badge {
        width: 56px;
        height: 56px;
    }

    .h33-bottom-action-bar {
        padding: 18px 22px;
    }
}

@media (max-width: 1480px) {
    /* Keep the designed 5-up on real desktops (1440 screens); cards are compact now. */
    .h33-workspace-metric-strip.is-five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .h33-create-topbar {
        grid-template-columns: 1fr auto;
    }

    .h33-create-topbar-spacer,
    .h33-create-topbar-nav {
        display: none;
    }

    .h33-create-topbar-nav .h33-workspace-tabs {
        display: none;
    }

    .h33-create-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-create-path-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .h33-create-support-grid > :last-child {
        grid-column: 1 / -1;
    }

    .h33-create-resume-row {
        grid-template-columns: 1fr;
    }

    .h33-create-progress-wrap {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .h33-create-progress-wrap em {
        text-align: right;
    }

    .h33-create-resume-row .h33-button {
        width: 100%;
    }

    .h33-create-recommendation-card .h33-priority-actions {
        grid-template-columns: 1fr;
    }

    .h33-community-mini-stats,
    .h33-mini-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-workspace-grid--revenue-top,
    .h33-workspace-grid--community-top,
    .h33-workspace-grid--insights-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-workspace-grid--audience-top,
    .h33-workspace-grid--audience-middle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-workspace-grid--community-middle,
    .h33-workspace-grid--insights-bottom {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #revenue-opportunities,
    #community-spotlight,
    #insights-summary {
        grid-column: 1 / -1;
    }

    #audience-top-content,
    #audience-health {
        grid-column: 1 / -1;
    }

    .h33-workspace-grid--community-middle > .h33-workspace-stack,
    #insights-goals {
        grid-column: 1 / -1;
    }

    .h33-donut-layout {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .h33-donut-legend {
        width: 100%;
    }

    .h33-funnel-card {
        grid-template-columns: 1fr;
    }

    .h33-funnel-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .h33-funnel-row span,
    .h33-funnel-row em {
        grid-column: 1;
        justify-self: start;
    }

    .h33-media-row,
    .h33-avatar-row,
    .h33-event-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .h33-event-row {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    .h33-activity-row.is-table {
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
    }

    .h33-media-stat,
    .h33-avatar-row > .h33-pill,
    .h33-avatar-row > em,
    .h33-event-row .h33-pill {
        grid-column: 2;
        justify-self: start;
        text-align: left;
    }

    .h33-activity-row.is-table > :last-child,
    .h33-activity-row.is-table > :nth-last-child(2) {
        grid-column: auto;
        justify-self: end;
        text-align: right;
    }

    .h33-gauge-wrap {
        min-height: 196px;
    }

    .h33-gauge-wrap svg {
        width: min(100%, 240px);
        max-width: 240px;
    }

    .h33-gauge-copy {
        inset: 58px 0 auto 0;
    }

    .h33-section-head {
        gap: 12px;
    }

    .h33-section-head .h33-inline-link {
        align-self: flex-start;
    }
}

@media (max-height: 820px) and (min-width: 1121px) {
    .h33-workspace-header {
        gap: 12px;
        padding-top: 14px;
    }

    .h33-workspace-content {
        gap: 16px;
        padding-top: 6px;
    }

    .h33-workspace-metric {
        min-height: 138px;
        gap: 10px;
        padding: 14px 14px 10px;
    }

    .h33-workspace-metric-head {
        gap: 12px;
    }

    .h33-workspace-sparkline {
        min-height: 34px;
    }

    .h33-workspace-sparkline svg {
        height: 34px;
    }

    .h33-focus-card,
    .h33-workspace-panel,
    .h33-bottom-action-bar {
        padding-top: 18px;
        padding-bottom: 18px;
    }
}

@media (max-width: 1280px) {
    /* Mid widths: keep one 5-card row, horizontally scrollable (no odd 3+2 wrap). */
    .h33-workspace-metric-strip.is-five {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(200px, 1fr);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }

    .h33-workspace-metric-strip.is-five::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 1120px) {
    .h33-workspace-shell {
        grid-template-columns: 1fr;
    }

    .h33-workspace-sidebar {
        display: none;
    }

    /* Desktop sidebar is hidden here — expose the six primary routes as a fixed bottom tab bar. */
    .h33-workspace-mobile-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        display: flex;
        align-items: stretch;
        gap: 2px;
        max-width: 100%;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.97);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(114, 125, 177, 0.16);
        box-shadow: 0 -8px 24px rgba(18, 26, 54, 0.08);
    }

    .h33-workspace-mobile-nav-link {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        border-radius: 12px;
        color: var(--h33-text-soft);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;
    }

    .h33-workspace-mobile-nav-link span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .h33-workspace-mobile-nav-link .h33-icon {
        width: 22px;
        height: 22px;
    }

    .h33-workspace-mobile-nav-link.is-active {
        color: var(--h33-purple-strong);
        background: rgba(109, 77, 242, 0.1);
    }

    /* Keep page content clear of the fixed bottom nav. */
    .h33-workspace-content {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .h33-workspace-header,
    .h33-workspace-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .h33-workspace-title-row,
    .h33-workspace-header-actions,
    .h33-bottom-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-workspace-grid--today-hero,
    .h33-workspace-grid--today-main,
    .h33-workspace-grid--today-bottom,
    .h33-workspace-grid--audience-top,
    .h33-workspace-grid--audience-middle,
    .h33-workspace-grid--audience-bottom,
    .h33-workspace-grid--revenue-top,
    .h33-workspace-grid--revenue-middle,
    .h33-workspace-grid--revenue-bottom,
    .h33-workspace-grid--community-top,
    .h33-workspace-grid--community-middle,
    .h33-workspace-grid--insights-top,
    .h33-workspace-grid--insights-bottom,
    .h33-create-hero-grid,
    .h33-create-support-grid {
        grid-template-columns: 1fr;
    }

    .h33-opportunity-grid,
    .h33-segment-grid,
    .h33-create-path-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-create-path-grid.is-list {
        grid-template-columns: 1fr;
    }

    .h33-create-support-grid > :last-child,
    #revenue-opportunities,
    #community-spotlight,
    #insights-summary,
    #audience-top-content,
    #audience-health,
    .h33-workspace-grid--community-middle > .h33-workspace-stack,
    #insights-goals {
        grid-column: auto;
    }

    .h33-focus-card {
        grid-template-columns: 1fr;
    }

    .h33-message-card .h33-builder-card-head {
        align-items: flex-start;
    }

    .h33-message-card .h33-dashboard-status {
        justify-items: start;
        text-align: left;
    }

    .h33-message-card .h33-tag-row,
    .h33-focus-card .h33-tag-row {
        row-gap: 8px;
    }
}

@media (max-width: 980px) {
    .h33-choice-grid,
    .h33-choice-grid.is-compact,
    .h33-form-grid,
    .h33-assistant-apply-grid {
        grid-template-columns: 1fr;
    }

    .h33-dashboard-metric-grid,
    .h33-dashboard-card-grid,
    .h33-dashboard-card-grid.is-insights,
    .h33-dashboard-action-grid,
    .h33-today-primary-grid,
    .h33-builder-picker-grid,
    .h33-create-studio-hero,
    .h33-current-work-surface,
    .h33-create-studio-grid,
    .h33-latest-draft-card,
    .h33-dashboard-split,
    .h33-surface-spotlight,
    .h33-prompt-grid {
        grid-template-columns: 1fr;
    }

    .h33-surface-stat-row,
    .h33-current-work-meta,
    .h33-builder-spotlight-list,
    .h33-studio-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .h33-builder-choice-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
        overflow: visible;
    }

    .h33-side-tabs--expanded {
        grid-template-columns: 1fr;
    }

    .h33-canvas-intro-copy {
        flex-direction: column;
    }

    .h33-inline-ai-choice-grid,
    .h33-inline-ai-prompt-row {
        grid-template-columns: 1fr;
    }

    .h33-overlay-panel,
    .h33-overlay-panel.is-wide {
        width: 100%;
    }

    .h33-workspace-shell {
        grid-template-columns: 1fr;
    }

    .h33-workspace-sidebar {
        display: none;
    }

    .h33-workspace-header,
    .h33-workspace-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .h33-workspace-title-row,
    .h33-workspace-header-actions,
    .h33-bottom-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-create-topbar,
    .h33-create-hero-grid,
    .h33-create-support-grid,
    .h33-create-path-grid,
    .h33-create-path-grid.is-list,
    .h33-create-resume-row,
    .h33-create-bottom-cta {
        grid-template-columns: 1fr;
    }

    .h33-create-topbar {
        gap: 14px;
    }

    .h33-create-topbar-actions,
    .h33-create-topbar-nav {
        justify-content: flex-start;
    }

    .h33-create-ask-shell,
    .h33-create-path-grid.is-list .h33-create-path-card {
        grid-template-columns: 1fr;
    }

    .h33-opportunity-grid,
    .h33-segment-grid,
    .h33-workspace-grid--today-hero,
    .h33-workspace-grid--today-main,
    .h33-workspace-grid--today-bottom,
    .h33-workspace-grid--audience-top,
    .h33-workspace-grid--audience-middle,
    .h33-workspace-grid--audience-bottom,
    .h33-workspace-grid--revenue-top,
    .h33-workspace-grid--revenue-middle,
    .h33-workspace-grid--revenue-bottom,
    .h33-workspace-grid--community-top,
    .h33-workspace-grid--community-middle,
    .h33-workspace-grid--insights-top,
    .h33-workspace-grid--insights-bottom,
    .h33-donut-layout,
    .h33-demographics-grid,
    .h33-funnel-card,
    .h33-community-mini-stats,
    .h33-mini-stat-grid,
    .h33-mini-stat-grid.is-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .h33-workspace-metric-strip.is-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        overflow-x: visible;
        gap: 10px;
    }

    .h33-workspace-metric-strip.is-five .h33-workspace-metric {
        padding: 12px 12px 10px;
        border-radius: 16px;
    }

    .h33-workspace-metric-strip.is-five .h33-workspace-metric-value-row strong {
        font-size: 16px;
    }

    .h33-dashboard-metric-grid,
    .h33-current-work-meta,
    .h33-surface-stat-row,
    .h33-builder-spotlight-list,
    .h33-studio-card-meta {
        grid-template-columns: 1fr;
    }

    .h33-builder-choice-grid {
        grid-template-columns: 1fr;
    }

    .h33-workspace-header,
    .h33-workspace-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .h33-workspace-title--create {
        font-size: clamp(28px, 8vw, 38px);
    }

    .h33-bar-row,
    .h33-table-row,
    .h33-goal-row,
    .h33-event-row,
    .h33-activity-row.is-table,
    .h33-media-row,
    .h33-opportunity-list-row,
    .h33-activity-row,
    .h33-avatar-row {
        grid-template-columns: 1fr;
    }

    .h33-media-stat,
    .h33-avatar-row > .h33-pill,
    .h33-avatar-row > em,
    .h33-event-row .h33-pill,
    .h33-activity-row.is-table > :last-child,
    .h33-activity-row.is-table > :nth-last-child(2) {
        grid-column: auto;
    }

    .h33-current-work-head,
    .h33-builder-spotlight-head,
    .h33-studio-card-head {
        flex-direction: column;
    }

    .h33-inline-ai-strip,
    .h33-inline-block-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .h33-inline-ai-chip {
        justify-content: center;
    }

    .h33-create-draft-row,
    .h33-create-source-row,
    .h33-create-recommendation-meta {
        grid-template-columns: 1fr;
    }
}

#insights-overview .h33-button,
#insights-overview .h33-inline-link,
#revenue-activity .h33-inline-link,
#community-activity .h33-inline-link {
    align-self: flex-start;
}

#insights-demographics .h33-demographics-grid {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: center;
}

#insights-demographics .h33-donut-chart {
    margin-inline: auto;
}

/* ===== Insights: real-analytics wiring (sample chips, skeletons, banner) ===== */

.h33-sample-chip {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    min-height: 20px;
    padding: 0 9px;
    margin-left: 6px;
    border-radius: var(--h33-pill-radius);
    background: rgba(243, 160, 24, 0.14);
    color: #b06a08;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
}

.h33-sample-footnote {
    margin: 0;
    color: var(--h33-text-soft);
    font-size: 12px;
}

.h33-sample-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(243, 160, 24, 0.10);
    border: 1px solid rgba(243, 160, 24, 0.24);
    color: #8a5a08;
    font-size: 12.5px;
    line-height: 1.5;
}

.h33-sample-note .h33-sample-chip {
    margin-left: 0;
}

.h33-insights-sample-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(243, 160, 24, 0.28);
    background: var(--h33-gold-soft);
}

.h33-insights-sample-banner p {
    margin: 0;
    flex: 1 1 220px;
    min-width: 0;
    color: #7d4c05;
    font-size: 13px;
    font-weight: 600;
}

.h33-insights-window-pill {
    white-space: nowrap;
}

.h33-insights-window-note {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.h33-insights-lifecycle-line {
    margin: 6px 0 0;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.h33-insights-empty-note {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 13px;
}

.h33-insights-skeleton {
    display: grid;
    gap: 10px;
}

.h33-skeleton-line {
    display: block;
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(114, 125, 177, 0.1), rgba(114, 125, 177, 0.18), rgba(114, 125, 177, 0.1));
    background-size: 220% 100%;
    animation: h33-skeleton-shimmer 1.4s ease infinite;
}

.h33-insights-skeleton .h33-skeleton-line:nth-child(2n) {
    width: 72%;
}

.h33-skeleton-block {
    height: 220px;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(114, 125, 177, 0.08), rgba(114, 125, 177, 0.16), rgba(114, 125, 177, 0.08));
    background-size: 220% 100%;
    animation: h33-skeleton-shimmer 1.4s ease infinite;
}

@keyframes h33-skeleton-shimmer {
    0% {
        background-position: 0% 0;
    }
    100% {
        background-position: -120% 0;
    }
}

.h33-insights-chart-labels {
    display: flex;
    grid-template-columns: none;
    justify-content: space-between;
    gap: 8px;
}

.h33-insights-funnel-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h33-insights-funnel-steps {
    display: grid;
    gap: 12px;
}

.h33-insights-funnel-footer {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-insights-revenue-rows {
    display: grid;
    gap: 10px;
}

.h33-insights-revenue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
}

.h33-insights-revenue-row span {
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.h33-insights-revenue-row strong {
    font-size: 13px;
}

.h33-hub-rail-row.is-link {
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
}

.h33-hub-rail-row.is-link:hover {
    transform: translateY(-1px);
    border-color: rgba(109, 77, 242, 0.14);
}

.h33-insights-range-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.h33-insights-range-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 14px;
    background: rgba(114, 125, 177, 0.08);
}

.h33-insights-range-buttons .h33-create-view-button {
    min-height: 30px;
    padding: 0 10px;
    border-radius: 10px;
}

.h33-insights-compare-toggle {
    min-height: 32px;
    border: 1px solid rgba(114, 125, 177, 0.16);
}

.h33-insights-compare-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.h33-saved-report-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.h33-saved-report-open {
    flex: 1;
    display: grid;
    gap: 4px;
    text-align: left;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: rgba(250, 251, 255, 0.88);
    color: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease;
}

.h33-saved-report-open:hover {
    transform: translateY(-1px);
    border-color: rgba(109, 77, 242, 0.14);
}

.h33-saved-report-open strong {
    font-size: 13px;
}

.h33-saved-report-open span {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.h33-saved-report-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: var(--h33-surface-soft);
    color: var(--h33-text-muted);
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
}

.h33-saved-report-remove:hover {
    color: var(--h33-danger);
    border-color: rgba(243, 104, 104, 0.32);
}

@media (max-width: 640px) {
    .h33-insights-sample-banner {
        align-items: flex-start;
        flex-direction: column;
    }

    .h33-insights-sample-banner .h33-button {
        align-self: flex-start;
    }

    .h33-insights-range-controls {
        width: 100%;
    }

    .h33-insights-chart-labels span:nth-child(2n) {
        display: none;
    }
}

/* ===== Engage: real-community wiring (live threads, composer, mobile drill-in) ===== */

.h33-hub-community-subtitle {
    margin: 4px 0 0;
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.h33-hub-community-filter-row .h33-pill.is-button {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.h33-hub-community-filter-row .h33-pill.is-button:hover {
    transform: translateY(-1px);
}

.h33-hub-community-filter-note {
    margin: 0;
    color: var(--h33-text-soft);
    font-size: 12px;
    font-weight: 600;
}

.h33-hub-community-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.h33-hub-community-composer {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 24px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(249, 251, 255, 0.98));
    box-shadow: 0 16px 36px rgba(35, 47, 88, 0.04);
}

.h33-hub-community-composer-field {
    display: grid;
    gap: 6px;
}

.h33-hub-community-composer-field > span {
    color: var(--h33-text-soft);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.h33-hub-community-composer-field input,
.h33-hub-community-composer-field select,
.h33-hub-community-composer-field textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(250, 251, 255, 0.9);
    color: var(--h33-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    resize: vertical;
}

.h33-hub-community-composer-field input:focus,
.h33-hub-community-composer-field select:focus,
.h33-hub-community-composer-field textarea:focus {
    border-color: rgba(109, 77, 242, 0.32);
}

.h33-hub-community-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 14px;
    background: var(--h33-purple-soft);
    color: var(--h33-purple-strong);
    font-size: 12px;
    font-weight: 700;
}

.h33-hub-community-body {
    overflow-wrap: anywhere;
}

.h33-hub-community-body p,
.h33-hub-community-body ul,
.h33-hub-community-body ol,
.h33-hub-community-body blockquote {
    margin: 0 0 10px;
}

.h33-hub-community-body ul,
.h33-hub-community-body ol {
    padding-left: 20px;
}

.h33-hub-community-body h1,
.h33-hub-community-body h2,
.h33-hub-community-body h3,
.h33-hub-community-body h4 {
    margin: 12px 0 8px;
    color: var(--h33-text);
    font-size: 15px;
}

.h33-hub-community-body a {
    color: var(--h33-purple-strong);
    font-weight: 700;
}

.h33-hub-community-body blockquote {
    padding-left: 12px;
    border-left: 3px solid rgba(109, 77, 242, 0.24);
    color: var(--h33-text-soft);
}

.h33-hub-community-body > :last-child {
    margin-bottom: 0;
}

.h33-hub-community-comment-body {
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.h33-hub-community-comment-body p {
    margin: 0 0 8px;
}

.h33-hub-community-comment-body > :last-child {
    margin-bottom: 0;
}

.h33-hub-community-comment-card {
    margin-left: calc(var(--h33-comment-depth, 0) * 18px);
}

.h33-hub-community-comment-card.is-pending {
    opacity: 0.72;
}

.h33-button.is-community-voted,
.h33-inline-link.is-community-voted {
    color: var(--h33-purple-strong);
    font-weight: 800;
}

.h33-button.is-community-voted {
    border-color: rgba(109, 77, 242, 0.32);
    background: var(--h33-purple-soft);
}

.h33-button.is-community-saved,
.h33-button.is-community-following {
    color: var(--h33-purple-strong);
    font-weight: 800;
    border-color: rgba(109, 77, 242, 0.32);
    background: var(--h33-purple-soft);
}

.h33-hub-community-participant-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.h33-hub-community-participant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: var(--h33-pill-radius);
    border: 1px solid rgba(114, 125, 177, 0.12);
    background: rgba(250, 251, 255, 0.9);
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-hub-community-participant .h33-avatar-badge {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.h33-hub-community-about-copy {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.h33-hub-community-back {
    display: none;
}

@media (max-width: 860px) {
    .h33-hub-community-back {
        display: inline-flex;
        justify-self: start;
    }

    .h33-hub-community-layout.is-thread-active .h33-hub-community-list {
        display: none;
    }

    .h33-hub-community-layout:not(.is-thread-active) .h33-hub-community-main,
    .h33-hub-community-layout:not(.is-thread-active) .h33-hub-community-rail {
        display: none;
    }
}

/* ----- Audience (Grow) live CRM ----- */

.h33-hub-audience-segment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.h33-hub-audience-cap-note {
    margin: 0;
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
}

.h33-hub-audience-tab-body {
    display: grid;
    gap: 14px;
    align-content: start;
}

.h33-hub-audience-note-composer {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.h33-hub-audience-note-composer textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(250, 251, 255, 0.9);
    color: var(--h33-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    resize: vertical;
}

.h33-hub-audience-note-composer textarea:focus {
    border-color: var(--h33-border-strong);
}

.h33-hub-note-row.is-pending {
    opacity: 0.62;
}

.h33-hub-audience-segment-note {
    margin: 2px 0 0;
    color: var(--h33-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.h33-hub-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.h33-hub-activity-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid rgba(114, 125, 177, 0.08);
}

.h33-hub-activity-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.h33-hub-activity-row.is-pending {
    opacity: 0.62;
}

.h33-hub-activity-dot {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--h33-purple-strong);
    border: 2px solid var(--h33-purple-strong);
}

.h33-hub-activity-row.is-task .h33-hub-activity-dot {
    background: #fff;
    border-color: var(--h33-mint);
}

.h33-hub-activity-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h33-hub-activity-body strong {
    font-size: 13px;
}

.h33-hub-activity-body p {
    margin: 0;
    color: var(--h33-text);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.h33-hub-activity-body span {
    color: var(--h33-text-muted);
    font-size: 12px;
}

.h33-hub-audience-back {
    display: none;
}

@media (max-width: 860px) {
    .h33-hub-audience-back {
        display: inline-flex;
        justify-self: start;
    }

    .h33-hub-audience-layout.is-detail-active .h33-hub-audience-list {
        display: none;
    }

    .h33-hub-audience-layout:not(.is-detail-active) .h33-hub-audience-main {
        display: none;
    }
}

/* ===== Live deal pipeline (Earn) ===== */
.h33-hub-revenue-card {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.h33-hub-revenue-metrics-loading {
    padding: 18px;
    border-radius: 24px;
}

.h33-hub-revenue-composer {
    display: grid;
    gap: 16px;
}

.h33-hub-revenue-form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h33-hub-revenue-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.h33-hub-revenue-field.is-span-2 {
    grid-column: 1 / -1;
}

.h33-hub-revenue-field > span,
.h33-hub-revenue-stage-field > span {
    color: var(--h33-text-muted);
    font-size: 12px;
    font-weight: 700;
}

.h33-hub-revenue-stage-field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.h33-hub-revenue-stage-field.is-compact > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.h33-hub-revenue-field input,
.h33-hub-revenue-field select,
.h33-hub-revenue-field textarea,
.h33-hub-revenue-stage-field select,
.h33-hub-revenue-lost-reason input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(250, 251, 255, 0.9);
    color: var(--h33-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    outline: none;
}

.h33-hub-revenue-field textarea {
    resize: vertical;
}

.h33-hub-revenue-field input:focus,
.h33-hub-revenue-field select:focus,
.h33-hub-revenue-field textarea:focus,
.h33-hub-revenue-stage-field select:focus,
.h33-hub-revenue-lost-reason input:focus {
    border-color: var(--h33-border-strong);
}

.h33-hub-revenue-field input:disabled,
.h33-hub-revenue-field select:disabled,
.h33-hub-revenue-field textarea:disabled,
.h33-hub-revenue-stage-field select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.h33-hub-revenue-lost-reason {
    display: grid;
    gap: 10px;
}

.h33-hub-revenue-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
    text-align: left;
}

.h33-hub-revenue-empty h2 {
    font-size: 18px;
    font-weight: 800;
}

.h33-hub-revenue-empty p {
    color: var(--h33-text-muted);
    font-size: 14px;
}

.h33-hub-revenue-back {
    display: none;
}

@media (max-width: 860px) {
    .h33-hub-revenue-back {
        display: inline-flex;
        justify-self: start;
    }

    .h33-hub-revenue-layout.is-detail-active .h33-hub-revenue-main {
        display: none;
    }

    .h33-hub-revenue-layout:not(.is-detail-active) .h33-hub-revenue-detail-rail {
        display: none;
    }
}

@media (max-width: 640px) {
    .h33-hub-community-comment-card {
        margin-left: calc(var(--h33-comment-depth, 0) * 10px);
    }

    .h33-hub-revenue-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Guided section tours ===== */
/* Highlight ring drawn over the step's target element (positioned from JS). The page stays fully
   visible — no dimming backdrop — so the user can see exactly what the step points at. */
.h33-tour-ring {
    position: fixed;
    z-index: 2000;
    display: none;
    border-radius: 12px;
    border: 2px solid var(--h33-purple);
    box-shadow: 0 0 0 4px rgba(109, 77, 242, 0.16), 0 12px 30px rgba(86, 51, 222, 0.22);
    pointer-events: none;
    /* No position transition: the ring is repositioned on every scroll frame to stay glued to the
       target, so easing top/left/width/height would make it visibly trail the target while scrolling. */
}
@keyframes h33TourFade { from { opacity: 0; } to { opacity: 1; } }
/* Floating coach-mark card; its top/left are set inline by positionHubTourElements(). */
.h33-tour-card {
    position: fixed;
    z-index: 2001;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    background: var(--h33-surface);
    color: var(--h33-text);
    border: 1px solid var(--h33-border);
    border-radius: var(--h33-card-radius-sm);
    box-shadow: var(--h33-shadow);
    padding: 22px;
    animation: h33TourFade 0.18s ease;
}
.h33-tour-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.h33-tour-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--h33-purple);
}
.h33-tour-eyebrow .h33-icon { width: 15px; height: 15px; }
.h33-tour-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: var(--h33-purple-soft);
    color: var(--h33-text-muted);
    cursor: pointer;
    flex: 0 0 auto;
}
.h33-tour-close:hover { color: var(--h33-text); }
.h33-tour-close .h33-icon { width: 15px; height: 15px; }
.h33-tour-title { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.25; }
.h33-tour-body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--h33-text-muted); }
.h33-tour-dots { display: flex; gap: 6px; margin: 18px 0 4px; }
.h33-tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--h33-border-strong);
    transition: background 0.16s ease, width 0.16s ease;
}
.h33-tour-dot.is-active { width: 20px; border-radius: 999px; background: var(--h33-purple); }
.h33-tour-dismiss {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 4px;
    font-size: 12.5px;
    color: var(--h33-text-soft);
    cursor: pointer;
}
.h33-tour-dismiss input { width: 15px; height: 15px; accent-color: var(--h33-purple); cursor: pointer; }
.h33-tour-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
}
.h33-tour-actions .h33-button .h33-icon { width: 15px; height: 15px; }

.h33-tour-settings {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
    padding: 14px;
    border: 1px solid var(--h33-border);
    border-radius: var(--h33-card-radius-sm);
    background: var(--h33-bg);
}
.h33-tour-settings-copy { display: flex; flex-direction: column; gap: 3px; }
.h33-tour-settings-copy strong { font-size: 13px; color: var(--h33-text); }
.h33-tour-settings-copy span { font-size: 12px; color: var(--h33-text-muted); line-height: 1.45; }
.h33-tour-settings-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
    .h33-tour-launcher { right: 14px; bottom: 14px; padding: 9px 14px; }
    .h33-tour-card { max-width: 100%; padding: 20px; border-radius: 20px; }
    .h33-tour-title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .h33-tour-card { animation: none; transition: none; }
    .h33-tour-ring { transition: none; }
}

/* ================= Course Theme (scoped to the COURSE PREVIEW only) =========================
   Variables are set inline on .h33-preview-surface.course-theme (see renderPreviewModal); these
   rules map the course preview elements to them. Every selector is under .course-theme, so the
   MyPodOps app shell, sidebar, and unrelated screens are never recolored. */
.course-theme:not(.is-dark) {
    background: var(--course-surface);
    border-color: var(--course-border);
}
.course-theme:not(.is-dark) h2,
.course-theme:not(.is-dark) .h33-block-title,
.course-theme:not(.is-dark) strong {
    color: var(--course-text);
}
.course-theme:not(.is-dark) .h33-preview-copy,
.course-theme:not(.is-dark) .h33-block-body,
.course-theme:not(.is-dark) p {
    color: var(--course-text-muted);
}
.course-theme:not(.is-dark) .h33-block-card,
.course-theme:not(.is-dark) .h33-quiz-block,
.course-theme:not(.is-dark) .h33-file-block,
.course-theme:not(.is-dark) .h33-callout-block,
.course-theme:not(.is-dark) .h33-accordion-block,
.course-theme:not(.is-dark) .h33-tab-shell {
    background: var(--course-background);
    border-color: var(--course-border);
}
/* Primary CTA → themed button gradient (applies in light AND dark). */
.course-theme .h33-button.is-primary {
    background: var(--course-button-gradient);
    color: var(--course-button-text);
    border: none;
}
/* Status / category pill + icon accents → primary tint (fallback for older browsers first). */
.course-theme .h33-pill {
    background: var(--course-surface);
    color: var(--course-primary);
}
.course-theme .h33-pill {
    background: color-mix(in srgb, var(--course-primary) 12%, transparent);
}
.course-theme .h33-card-icon {
    background: var(--course-surface);
    color: var(--course-primary);
}
.course-theme .h33-card-icon {
    background: color-mix(in srgb, var(--course-primary) 16%, transparent);
}

/* ---- Course cover image editor (Design stage) ---- */
.h33-cover-editor {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr;
    gap: 16px;
    align-items: start;
}
.h33-cover-preview {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(114, 125, 177, 0.08);
    border: 1px solid rgba(114, 125, 177, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
}
.h33-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.h33-cover-preview.is-empty span {
    color: var(--h33-text-muted);
    font-size: 13px;
    font-weight: 600;
}
.h33-cover-controls {
    display: grid;
    gap: 10px;
    min-width: 0;
}
@media (max-width: 720px) {
    .h33-cover-editor { grid-template-columns: 1fr; }
}

/* ---- Course Theme control panel (lives in the preview aside; a utility/settings panel) ---- */
.h33-course-theme-panel { gap: 14px; }
.h33-course-theme-presets { display: grid; gap: 8px; }
.h33-course-theme-preset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(114, 125, 177, 0.16);
    background: rgba(255, 255, 255, 0.6);
}
.h33-course-theme-preset.is-applied {
    border-color: rgba(109, 77, 242, 0.42);
    background: rgba(109, 77, 242, 0.07);
}
.h33-course-theme-preset-main { display: grid; gap: 6px; min-width: 0; }
.h33-course-theme-preset-main strong { font-size: 13px; }
.h33-course-theme-dots { display: inline-flex; gap: 5px; }
.h33-course-theme-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: inline-block;
}
.h33-course-theme-customize { display: grid; gap: 8px; }
.h33-course-theme-customize-head { display: flex; align-items: center; justify-content: space-between; }
.h33-course-theme-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--h33-text-muted, #64748b);
}
.h33-course-theme-input { display: inline-flex; align-items: center; gap: 8px; }
.h33-course-theme-input input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(114, 125, 177, 0.24);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}
.h33-course-theme-hex {
    width: 92px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(114, 125, 177, 0.2);
    font-size: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.h33-course-theme-default-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.h33-course-theme-default-toggle > span { display: grid; gap: 2px; }
.h33-course-theme-default-toggle strong { font-size: 13px; }
/* Dark preview aside */
.h33-preview-aside.is-dark .h33-course-theme-preset { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); }
.h33-preview-aside.is-dark .h33-course-theme-hex { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #e7ecf7; }

/* ============================================================================
   Customer Hub (Phase 1) — Offers + Customer 360 polish.
   White cards + diversified colored icon tiles, matching the /apps design
   language. Top-aligned, responsive (container-relative grids).
   ============================================================================ */
.h33-ch-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
/* Customer Hub dashboard cards on the Today page (Part 15) */
.h33-hub-ch-dashboard { padding: 22px 24px; display: grid; gap: 8px; }
.h33-hub-ch-dashboard:empty { display: none; }
.h33-hub-ch-dashboard .h33-ch-metrics:last-child { margin-bottom: 0; }
.h33-ch-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(114, 125, 177, 0.08);
    background: linear-gradient(180deg, #ffffff, #fafbff);
    box-shadow: 0 14px 34px rgba(38, 49, 87, 0.04);
}
.h33-ch-metric-num { display: grid; gap: 1px; min-width: 0; }
.h33-ch-metric-num strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.h33-ch-metric-num span { font-size: 12px; color: var(--h33-text-muted); }

.h33-ch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.h33-ch-head h2 { margin: 0; }
.h33-ch-head p { margin: 2px 0 0; }

.h33-ch-offer-list { display: grid; gap: 14px; }
.h33-ch-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(114, 125, 177, 0.1);
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    box-shadow: 0 16px 38px rgba(38, 49, 87, 0.05);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.h33-ch-offer:hover { box-shadow: 0 22px 50px rgba(38, 49, 87, 0.09); transform: translateY(-1px); }
.h33-ch-offer-body { min-width: 0; display: grid; gap: 10px; }
.h33-ch-offer-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.h33-ch-offer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.h33-ch-offer-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* status + lifecycle pills */
.h33-ch-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
    background: rgba(114, 125, 177, 0.1); color: var(--h33-text-muted);
}
.h33-ch-pill.is-active { background: rgba(47, 191, 122, 0.14); color: #18925b; }
.h33-ch-pill.is-draft { background: rgba(243, 160, 24, 0.14); color: #d88a07; }
.h33-ch-pill.is-archived { background: rgba(114, 125, 177, 0.12); color: #6b7391; }
.h33-ch-pill.is-price { background: rgba(76, 139, 247, 0.12); color: #3874dc; }
.h33-ch-pill.is-purple { background: rgba(109, 77, 242, 0.1); color: var(--h33-purple-strong); }
.h33-ch-pill.is-risk { background: rgba(224, 122, 63, 0.14); color: #b45309; }

/* access + AI blocks on Customer 360 */
.h33-ch-ai {
    display: grid; gap: 6px;
    padding: 14px 16px; margin-bottom: 16px;
    border-radius: 16px;
    border: 1px solid rgba(109, 77, 242, 0.16);
    background: linear-gradient(180deg, #ffffff, #f7f5ff);
}
.h33-ch-ai p { margin: 0; }
.h33-ch-ai-summary { font-size: 13px; line-height: 1.5; }
.h33-ch-ai-suggest { font-size: 12px; color: var(--h33-text-muted); }

.h33-ch-access-list { display: grid; gap: 8px; }
.h33-ch-access-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgba(114, 125, 177, 0.09);
    background: #ffffff;
}
.h33-ch-access-row .h33-card-icon { width: 40px; height: 40px; border-radius: 12px; }
.h33-ch-access-copy { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; }
.h33-ch-access-row > .h33-button { flex: 0 0 auto; }
.h33-ch-value { justify-self: start; margin-top: 5px; font: 700 11px/1 Poppins, sans-serif; padding: 4px 9px; border-radius: 999px; }
.h33-ch-value.is-high { background: rgba(34, 197, 94, 0.16); color: #15803d; }
.h33-ch-value.is-solid { background: rgba(44, 120, 209, 0.16); color: #1d4ed8; }
.h33-ch-value.is-start { background: rgba(109, 77, 242, 0.14); color: #6d28d9; }
.h33-ch-value.is-free { background: rgba(120, 124, 140, 0.16); color: #55596b; }

/* ===== Customer Intelligence (Phase 1) ===== */
.h33-ch-intel-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.h33-ch-intel-stat { background: #fff; border: 1px solid rgba(114,125,177,0.12); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.h33-ch-intel-stat strong { font-family: "Plus Jakarta Sans","Inter",sans-serif; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.h33-ch-intel-stat span { font-size: 12px; color: var(--h33-text-muted); }
.h33-ch-intel-stat.is-risk strong { color: #be425a; }
.h33-ch-intel-note { font-weight: 600; font-size: 11px; color: var(--h33-text-soft); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.h33-ch-value-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.h33-ch-ltv { font: 700 11px/1 Poppins, sans-serif; padding: 4px 9px; border-radius: 999px; background: rgba(44,120,209,0.14); color: #1d4ed8; }
.h33-ch-risk { font: 700 11px/1 Poppins, sans-serif; padding: 4px 9px; border-radius: 999px; }
.h33-ch-risk.is-high-risk { background: rgba(190,66,90,0.16); color: #be425a; }
.h33-ch-risk.is-med-risk { background: rgba(185,120,42,0.16); color: #b9782a; }
.h33-ch-risk.is-low-risk { background: rgba(34,197,94,0.16); color: #15803d; }
@media (max-width: 720px) { .h33-ch-intel-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Creator Inbox (v1) ===== */
.h33-inbox { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: stretch; height: calc(100vh - 210px); min-height: 560px; }
.h33-inbox-list { background: #fff; border: 1px solid rgba(114,125,177,0.12); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; height: 100%; max-height: none; }
.h33-inbox-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(114,125,177,0.1); }
.h33-inbox-list-head h3 { margin: 0; font-family: "Plus Jakarta Sans","Inter",sans-serif; font-weight: 800; font-size: 15px; }
.h33-inbox-list-scroll { overflow-y: auto; }
.h33-inbox-thread { display: flex; gap: 11px; width: 100%; text-align: left; padding: 13px 15px; background: transparent; border: none; border-bottom: 1px solid rgba(114,125,177,0.08); cursor: pointer; }
.h33-inbox-thread:hover { background: rgba(114,125,177,0.06); }
.h33-inbox-thread.is-active { background: rgba(109,77,242,0.08); }
.h33-inbox-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 13px "Plus Jakarta Sans",sans-serif; color: #fff; background: linear-gradient(135deg,#6f4df5,#2f7ad1); }
.h33-inbox-thread-copy { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.h33-inbox-thread-top { display: flex; justify-content: space-between; gap: 8px; }
.h33-inbox-thread-top strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h33-inbox-thread-top em { font-style: normal; font-size: 11px; color: var(--h33-text-soft); flex: 0 0 auto; }
.h33-inbox-thread-sub { font-size: 12.5px; font-weight: 600; color: var(--h33-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h33-inbox-thread-snip { font-size: 12px; color: var(--h33-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h33-inbox-thread.is-unread .h33-inbox-thread-sub { font-weight: 800; }
.h33-inbox-main { background: #fff; border: 1px solid rgba(114,125,177,0.12); border-radius: 18px; min-height: 0; max-height: none; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.h33-inbox-main-head { padding: 16px 18px; border-bottom: 1px solid rgba(114,125,177,0.1); }
.h33-inbox-main-head h2 { margin: 0; font-family: "Plus Jakarta Sans","Inter",sans-serif; font-weight: 800; font-size: 17px; }
.h33-inbox-main-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--h33-text-muted); }
.h33-inbox-thread-view, .h33-inbox-compose { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.h33-inbox-messages { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.h33-inbox-bubble { max-width: 78%; padding: 10px 13px; border-radius: 14px; }
.h33-inbox-bubble.is-out { align-self: flex-end; background: linear-gradient(135deg,#6f4df5,#5b4df5); color: #fff; }
.h33-inbox-bubble.is-in { align-self: flex-start; background: #f1f2f8; color: #1c1d28; }
.h33-inbox-bubble-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.h33-inbox-bubble-meta { margin-top: 5px; font-size: 10.5px; opacity: 0.72; }
.h33-inbox-reply { border-top: 1px solid rgba(114,125,177,0.1); padding: 12px 16px 16px; }
.h33-inbox-textarea { width: 100%; box-sizing: border-box; min-height: 84px; resize: vertical; border: 1px solid rgba(114,125,177,0.2); border-radius: 12px; padding: 11px; font: inherit; font-size: 14px; background: #fff; color: var(--h33-text); }
.h33-inbox-actions { display: flex; gap: 8px; margin-top: 10px; }
.h33-inbox-compose { padding: 16px 18px 18px; gap: 12px; }
.h33-inbox-field { display: grid; gap: 5px; font-size: 12.5px; color: var(--h33-text-muted); font-weight: 600; }
.h33-inbox-field em { font-style: normal; color: var(--h33-text-soft); }
.h33-inbox-field input { border: 1px solid rgba(114,125,177,0.2); border-radius: 11px; padding: 10px 12px; font: inherit; font-size: 14px; background: #fff; color: var(--h33-text); }
.h33-inbox-error { color: #c0392b; font-size: 12.5px; margin: 8px 0 0; }
.h33-inbox-empty { padding: 40px 22px; text-align: center; color: var(--h33-text-muted); font-size: 13.5px; }
.h33-inbox-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-content: center; height: 100%; }
.h33-inbox-placeholder svg { width: 30px; height: 30px; opacity: 0.4; }
.h33-inbox-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid rgba(114,125,177,0.2); border-bottom: none; border-radius: 12px 12px 0 0; background: #f7f8fc; }
.h33-inbox-toolbar-spacer { flex: 1 1 auto; }
.h33-fmt-btn { min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--h33-text); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.h33-fmt-btn:hover { background: rgba(114,125,177,0.14); }
.h33-fmt-btn.h33-ai-improve { color: #6d1a86; }
.h33-fmt-btn.h33-ai-improve svg { width: 14px; height: 14px; }
.h33-fmt-btn:disabled { opacity: 0.6; cursor: default; }
.h33-inbox-editor { min-height: 150px; max-height: 340px; overflow-y: auto; border: 1px solid rgba(114,125,177,0.2); border-radius: 0 0 12px 12px; padding: 12px 13px; font: inherit; font-size: 14px; line-height: 1.6; background: #fff; color: var(--h33-text); outline: none; }
.h33-inbox-editor:focus { border-color: rgba(109,77,242,0.5); }
.h33-inbox-editor:empty:before { content: attr(data-placeholder); color: var(--h33-text-soft); pointer-events: none; }
.h33-inbox-editor p { margin: 0 0 8px; }
.h33-inbox-editor ul, .h33-inbox-editor ol { margin: 0 0 8px; padding-left: 22px; }
.h33-inbox-reply .h33-inbox-editor { min-height: 108px; }
@media (max-width: 860px) { .h33-inbox { grid-template-columns: 1fr; height: auto; } .h33-inbox-list { height: auto; max-height: 320px; } .h33-inbox-main { height: auto; min-height: 60vh; } }
.h33-hub-sidebar-item--inbox { margin-bottom: 10px; }
.h33-inbox-connect { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 11px 15px; border: 1px solid rgba(114,125,177,0.14); border-radius: 12px; background: #fbfaff; font-size: 13.5px; color: var(--h33-text-muted); }
.h33-inbox-connect.is-connected { background: rgba(12,143,128,0.07); border-color: rgba(12,143,128,0.25); }
.h33-inbox-connect strong { color: var(--h33-text); }
.h33-inbox-connect svg { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.h33-inbox-connect .h33-inline-link { margin-left: auto; }
.h33-inbox-connect-msg { flex-basis: 100%; color: var(--h33-text-soft); font-size: 12.5px; }
.h33-ch-access-copy strong { font-size: 13px; font-weight: 700; }
.h33-ch-access-copy span { font-size: 12px; color: var(--h33-text-muted); }

.h33-ch-subhead {
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--h33-text-muted); margin: 18px 0 8px;
}
.h33-ch-subhead:first-child { margin-top: 0; }

@media (max-width: 640px) {
    .h33-ch-offer { grid-template-columns: 1fr; }
    .h33-ch-offer-actions .h33-button { flex: 1 1 auto; }
}

/* "Apps" link at the top of the hub left nav — jumps back to the app switcher. */
.h33-hub-sidebar-apps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 2px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--h33-purple-strong);
    background: linear-gradient(135deg, rgba(109, 26, 134, 0.08), rgba(44, 197, 255, 0.08));
    border: 1px solid rgba(109, 77, 242, 0.14);
    transition: background 0.16s ease, transform 0.16s ease;
}
.h33-hub-sidebar-apps:hover {
    background: linear-gradient(135deg, rgba(109, 26, 134, 0.14), rgba(44, 197, 255, 0.14));
    transform: translateY(-1px);
}
.h33-hub-sidebar-apps svg { width: 18px; height: 18px; }

/* Live AI insight states for the docked PodOps AI focus panel */
.h33-insights-ai-live { margin-left:8px; font:700 9px/1 Poppins,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#0a7c5a; background:#e3f6ee; border-radius:999px; padding:3px 7px; vertical-align:middle; }
.h33-insights-ai-loading { display:flex; align-items:center; gap:10px; padding:14px 2px; color:#4a4560; font:500 13px/1.4 Poppins,sans-serif; }
.h33-insights-ai-followup { margin:10px 0 2px; font:500 12px/1.5 Poppins,sans-serif; color:#6b6580; font-style:italic; }
.h33-insights-ai-error { margin:8px 0 6px; font:500 12px/1.45 Poppins,sans-serif; color:#9a3b3b; }

/* Clickable follow-up question in the AI insight panel */
.h33-insights-ai-followup-btn { display:flex; align-items:flex-start; gap:8px; width:100%; text-align:left; margin:10px 0 2px; padding:9px 11px; font:600 12px/1.4 Poppins,sans-serif; color:#6f35d8; background:#f3effe; border:1px solid #e3d9fb; border-radius:10px; cursor:pointer; transition:background .15s,border-color .15s; }
.h33-insights-ai-followup-btn:hover { background:#ebe3fd; border-color:#c9b6f5; }
.h33-insights-ai-followup-btn svg, .h33-insights-ai-followup-btn i { flex:0 0 auto; margin-top:1px; }

/* Per-bullet 'save to follow-ups' + the saved follow-ups to-do list in the AI insight panel */
#mk-hub .h33-insights-ai-points li { display:flex; align-items:flex-start; gap:8px; }
.h33-insight-point-text { flex:1 1 auto; }
.h33-insight-save-btn { flex:0 0 auto; width:22px; height:22px; line-height:20px; text-align:center; font:700 15px/20px Poppins,sans-serif; color:#6f35d8; background:#f3effe; border:1px solid #e3d9fb; border-radius:6px; cursor:pointer; padding:0; transition:background .15s,border-color .15s; }
.h33-insight-save-btn:hover { background:#6f35d8; color:#fff; border-color:#6f35d8; }
.h33-insight-todos { margin-top:12px; padding-top:10px; border-top:1px solid #ece8f7; }
.h33-insight-todos-head { font:700 10px/1 Poppins,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#6b6580; margin-bottom:8px; }
.h33-insight-todos-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.h33-insight-todos-list li { display:flex; align-items:flex-start; gap:8px; font:500 12px/1.4 Poppins,sans-serif; color:#3a3550; }
.h33-insight-todo-text { flex:1 1 auto; }
.h33-insight-todo-actions { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.h33-insight-todo-tool { font:600 11px/1 Poppins,sans-serif; color:#fff; background:#6f35d8; border-radius:999px; padding:5px 10px; text-decoration:none; white-space:nowrap; }
.h33-insight-todo-tool:hover { background:#5a27bd; }
.h33-insight-todo-remove { flex:0 0 auto; width:20px; height:20px; line-height:18px; text-align:center; font:600 14px/18px Poppins,sans-serif; color:#9a94ad; background:transparent; border:1px solid #e0dcee; border-radius:6px; cursor:pointer; padding:0; }
.h33-insight-todo-remove:hover { color:#c0392b; border-color:#e7b7b0; }

/* Today "Your follow-ups" card (saved from PodOps AI) */
.h33-insight-followups-card .h33-insight-todos-list { margin-top:6px; }
.h33-insight-followups-card .h33-insight-todos-list li { padding:8px 0; border-bottom:1px solid #f0edf9; }

/* Saved-from-PodOps-AI panel on Today: match page type density + scroll when long. */
.h33-saved-panel .h33-insight-todos-list { max-height: 340px; overflow-y: auto; padding-right: 6px; }
.h33-saved-panel .h33-insight-todos-list li { font: 500 13px/1.55 Poppins, sans-serif; padding: 11px 0; border-bottom: 1px solid #f0edf9; }
.h33-saved-panel .h33-insight-todo-text { color: var(--h33-text-muted); }
.h33-insight-followups-card .h33-insight-todos-list li:last-child { border-bottom:0; }

/* Tabbed, scrollable AI insight panel */
.h33-insights-ai-panel { display: flex; flex-direction: column; max-height: min(78vh, 640px); }
.h33-insights-ai-panel-head, .h33-insights-ai-tabs { flex: 0 0 auto; }
.h33-insights-ai-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.h33-insights-ai-tabs { display: flex; gap: 6px; }
.h33-insights-ai-tab { flex: 1 1 auto; padding: 7px 10px; font: 600 12px/1 Poppins, sans-serif; color: #6b6580; background: #f2effa; border: 1px solid #ece8f7; border-radius: 8px; cursor: pointer; }
.h33-insights-ai-tab.is-active { color: #fff; background: #6f35d8; border-color: #6f35d8; }
.h33-insights-ai-empty { font: 500 12px/1.55 Poppins, sans-serif; color: #6b6580; padding: 8px 2px; }
.h33-insight-todo-tool.is-app { background: #111827; }

/* Create page — PodOps AI build ideas */
.h33-create-ideas-card { margin-top: 4px; }
.h33-create-ideas-loading { display:flex; align-items:center; gap:10px; padding:16px 2px; color:#4a4560; font:500 13px/1.4 Poppins,sans-serif; }
.h33-create-ideas-empty { margin:8px 0 2px; font:500 13px/1.5 Poppins,sans-serif; color:#6b6580; }
.h33-create-ideas-grid { margin-top:14px; display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; }
.h33-create-idea { display:flex; flex-direction:column; align-items:flex-start; gap:7px; padding:16px; background:#faf9ff; border:1px solid #ece8f7; }
.h33-create-idea h3 { font:700 15px/1.3 Poppins,sans-serif; color:#1a1030; margin:2px 0 0; }
.h33-create-idea p { font:500 13px/1.5 Poppins,sans-serif; color:#4a4560; margin:0; }
.h33-create-idea-why { color:#6f35d8 !important; font-weight:600 !important; font-size:12px !important; display:flex; align-items:flex-start; gap:6px; }
.h33-create-idea-badge { display:inline-flex; align-items:center; gap:6px; font:700 10px/1 Poppins,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#6f35d8; background:#f1ecfd; border-radius:999px; padding:5px 9px; }
.h33-create-idea .h33-button { margin-top:auto; }

/* Collapsed utility rail: no heading text, just the floating buttons */
.h33-right-rail-head--collapsed { justify-content: center; }

/* Phase 2C.4C — Learning Path builder + resource picker */
.h33-lp-section{margin:18px 0;padding-top:14px;border-top:1px solid rgba(15,23,42,.08);}
.h33-lp-section:first-of-type{border-top:0;padding-top:0;}
.h33-lp-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:0 0 10px;}
.h33-lp-step-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.h33-lp-step-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(15,23,42,.1);border-radius:10px;background:#fff;flex-wrap:wrap;}
.h33-lp-step-order{flex:0 0 22px;height:22px;border-radius:50%;background:#eef2ff;color:#4338ca;font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;}
.h33-lp-step-title{flex:1 1 160px;min-width:0;font-weight:600;color:#0f172a;overflow:hidden;text-overflow:ellipsis;}
.h33-lp-step-warn{color:#b45309;font-style:italic;font-weight:500;}
.h33-lp-add-row{display:flex;gap:8px;flex-wrap:wrap;}
.h33-lp-picker-controls{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.h33-lp-picker-controls [data-pk-q]{flex:1 1 200px;}
.h33-button.is-small{padding:6px 10px;font-size:13px;}
@media (max-width:640px){.h33-lp-step-row{gap:6px;}.h33-lp-step-title{flex-basis:100%;order:-1;}}
.h33-cm-status.is-mint{background:#d1fae5;color:#047857;}
/* Phase 4L.2B — unsupported-graph read-only guard notice */
.h33-fb-guard{margin:14px 0;padding:12px 14px;border:1px solid #fcd34d;background:#fffbeb;border-radius:10px;color:#7c2d12;}
.h33-fb-guard strong{display:block;margin-bottom:4px;}
.h33-fb-guard p{margin:0;font-size:13px;color:#92400e;}
/* Phase 4L.2B — branching flow builder (nested Yes/No lanes) */
.h33-fb-seq{display:block;}
.h33-fb-term{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;}
.h33-fb-cond{margin-top:6px;border:1px solid #fcd34d;border-radius:10px;background:#fffdf5;padding:10px;}
.h33-fb-condhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.h33-fb-condhead .h33-field.h33-fb-inline{margin:0;}
.h33-fb-condhead [data-fb-branch-remove]{margin-left:auto;}
.h33-fb-lanes{display:flex;gap:10px;flex-wrap:wrap;}
.h33-fb-lane{flex:1 1 260px;min-width:0;border-left:3px solid #e5e7eb;padding-left:10px;}
.h33-fb-lane.is-yes{border-left-color:#10b981;}
.h33-fb-lane.is-no{border-left-color:#f59e0b;}
.h33-fb-lanehd{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:0 0 6px;}
@media (max-width:640px){.h33-fb-lanes{flex-direction:column;}}
/* Today canvas — priority hierarchy, compressed cards, calmer surfaces (scoped to .h33-hub-today-page) */
.h33-today-section-title{font-size:18px;font-weight:800;letter-spacing:-.01em;color:#0f172a;margin:26px 0 12px;}
.h33-hub-today-page .h33-today-section-title:first-of-type{margin-top:20px;}
.h33-hub-today-page > .h33-hub-ch-dashboard,.h33-hub-today-page > .h33-today-mktg,.h33-hub-today-page > .h33-workspace-grid{margin-bottom:18px;}
/* calmer surfaces — softer outlines, subtle shadow instead of hard borders-on-white */
.h33-hub-today-page .h33-card{border-color:rgba(15,23,42,.06);box-shadow:0 1px 3px rgba(15,23,42,.05);}
/* priority metric strip — number dominant, label secondary, compact */
.h33-hub-today-page .h33-workspace-metric-strip{gap:12px;}
.h33-hub-today-page .h33-workspace-metric{padding:14px 16px;}
.h33-hub-today-page .h33-workspace-metric-head{align-items:center;gap:12px;}
.h33-hub-today-page .h33-workspace-metric-label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.045em;color:#64748b;}
.h33-hub-today-page .h33-workspace-metric-value-row strong{font-size:28px;line-height:1.05;font-weight:800;color:#0f172a;}
.h33-hub-today-page .h33-workspace-metric-meta{font-size:11px;color:#94a3b8;}
.h33-hub-today-page .h33-workspace-metric-link{font-size:11px;opacity:.65;margin-top:6px;}
.h33-hub-today-page .h33-workspace-metric .h33-card-icon{width:32px;height:32px;flex:0 0 32px;}
/* ===== Today hero row — match the sent design (horizontal 3-part blocks) ===== */
/* Resume card: icon (left) | copy (middle) | vertical divider + 2 stacked buttons (right) */
.h33-hub-today-page .h33-focus-card{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:22px;padding:20px 26px;}
.h33-hub-today-page .h33-focus-portrait{align-self:center;}
.h33-hub-today-page .h33-focus-avatar{width:58px;height:58px;font-size:18px;}
.h33-hub-today-page .h33-focus-avatar--icon .h33-icon{width:26px;height:26px;}
.h33-hub-today-page .h33-focus-copy{display:flex;flex-direction:column;gap:7px;}
.h33-hub-today-page .h33-focus-card h2{font-size:19px;margin:0;}
.h33-hub-today-page .h33-focus-copy > p{font-size:13px;margin:0;}
.h33-hub-today-page .h33-focus-copy .h33-tag-row{margin-top:2px;}
.h33-hub-today-page .h33-focus-actions{display:flex;flex-direction:column;gap:12px;justify-content:center;align-self:stretch;padding-left:26px;border-left:1px solid rgba(255,255,255,0.22);min-width:230px;}
.h33-hub-today-page .h33-focus-actions .h33-button{width:100%;justify-content:center;padding:13px 20px;}
/* Follow-up card: head (title | Completed) / body (draft | Use Message) / foot (3 spread actions) */
.h33-hub-today-page .h33-message-card{display:flex;flex-direction:column;gap:14px;padding:20px 24px;}
.h33-hub-today-page .h33-message-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.h33-hub-today-page .h33-message-head h3{margin:3px 0 0;font-size:17px;}
.h33-hub-today-page .h33-message-body{display:flex;justify-content:space-between;align-items:center;gap:20px;}
.h33-hub-today-page .h33-message-body .h33-message-surface{flex:1 1 auto;min-width:0;margin:0;padding:12px 16px;}
.h33-hub-today-page .h33-message-surface p{margin:2px 0;font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.h33-hub-today-page .h33-message-helper{margin-top:4px;}
.h33-hub-today-page .h33-message-body > .h33-button{flex:0 0 auto;padding:12px 22px;}
.h33-hub-today-page .h33-message-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:14px;border-top:1px solid var(--h33-border);}
.h33-hub-today-page .h33-message-foot .h33-button{background:transparent;border-color:transparent;padding:6px 8px;box-shadow:none;}
.h33-hub-today-page .h33-message-foot .h33-button:hover{background:rgba(109,77,242,0.06);}
/* hero row 50/50, equal heights */
.h33-hub-today-page .h33-workspace-grid--today-hero{align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
/* stack the internal blocks on narrow widths */
@media (max-width:940px){
  .h33-hub-today-page .h33-focus-card{grid-template-columns:auto minmax(0,1fr);}
  .h33-hub-today-page .h33-focus-actions{grid-column:1 / -1;flex-direction:row;border-left:none;border-top:1px solid rgba(255,255,255,0.22);padding-left:0;padding-top:14px;min-width:0;}
  .h33-hub-today-page .h33-message-body{flex-direction:column;align-items:stretch;}
  .h33-hub-today-page .h33-message-body > .h33-button{align-self:flex-start;}
}
/* Ask Copilot bar — subtle pulsing outline so it reads as active (hub feedback #20) */
@keyframes h33-ask-pulse{0%,100%{box-shadow:0 0 0 0 rgba(109,77,242,0);}50%{box-shadow:0 0 0 5px rgba(109,77,242,0.16);}}
.h33-hub-today-page .h33-today-search{animation:h33-ask-pulse 2.4s ease-in-out infinite;}
.h33-hub-today-page .h33-today-search:focus-within{animation:none;box-shadow:0 0 0 3px rgba(109,77,242,0.28);}
/* Same "ask" pulse on the Create and Grow prompt boxes as on Today */
.h33-hub-create-page .h33-hub-create-prompt-row,
.h33-ci-page .h33-ci-ai{animation:h33-ask-pulse 2.4s ease-in-out infinite;}
.h33-hub-create-page .h33-hub-create-prompt-row:focus-within,
.h33-ci-page .h33-ci-ai:focus-within{animation:none;box-shadow:0 0 0 3px rgba(109,77,242,0.28);}
@media (prefers-reduced-motion: reduce){.h33-hub-today-page .h33-today-search,.h33-hub-create-page .h33-hub-create-prompt-row,.h33-ci-page .h33-ci-ai{animation:none;}}
/* Customer Health header — title, subtitle, then "View all customers" stacked beneath (hub feedback #21) */
.h33-hub-today-page .h33-ch-intro{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:12px;}
.h33-hub-today-page .h33-ch-intro h1{font-size:20px;margin:0;}
.h33-hub-today-page .h33-ch-intro p{margin:0;}
.h33-hub-today-page .h33-ch-viewall{margin-top:6px;}
/* customer health — mockup 3-column: metrics block | Recent purchases | Needs attention */
.h33-ch-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:4px;}
.h33-ch-cols .h33-ch-subhead{margin-top:0;}
@media (max-width:900px){.h33-ch-cols{grid-template-columns:1fr;}}
.h33-ch-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:20px;align-items:start;margin-top:6px;}
.h33-ch-grid > .h33-ch-metrics-block{order:1;min-width:0;}
.h33-ch-grid > .h33-ch-recent{order:2;min-width:0;}
.h33-ch-grid > .h33-ch-attn{order:3;min-width:0;}
.h33-ch-grid .h33-ch-subhead{margin-top:0;display:flex;justify-content:space-between;align-items:center;}
.h33-ch-metrics-block .h33-ch-metrics{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;}
.h33-ch-metrics-block .h33-ch-intel-strip{margin-top:0;gap:10px;}
.h33-ch-empty{font-size:13px;color:#94a3b8;padding:8px 2px;}
/* compact metric + intel tiles so both rows sit 4-across cleanly (mockup density) */
.h33-hub-today-page .h33-hub-ch-dashboard{padding:18px 20px;}
.h33-hub-today-page .h33-ch-metric{padding:11px 12px;border-radius:12px;gap:9px;box-shadow:none;background:#fff;}
.h33-hub-today-page .h33-ch-metric .h33-card-icon{width:30px;height:30px;flex:0 0 30px;border-radius:9px;}
.h33-hub-today-page .h33-ch-metric-num strong{font-size:18px;}
.h33-hub-today-page .h33-ch-metric-num span{font-size:11px;}
.h33-hub-today-page .h33-ch-intel-stat{padding:10px 12px;border-radius:12px;}
.h33-hub-today-page .h33-ch-intel-stat strong{font-size:17px;}
.h33-hub-today-page .h33-ch-access-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Recent purchases: right-aligned amount, whole row is a subtle link (no button) */
.h33-ch-purchase-row{text-decoration:none;color:inherit;transition:background .12s ease;}
.h33-ch-purchase-row:hover{background:rgba(109,77,242,0.04);}
.h33-ch-amount{flex:0 0 auto;font:800 14px/1 "Plus Jakarta Sans","Inter",sans-serif;color:#0f172a;letter-spacing:-0.01em;white-space:nowrap;}
/* Needs attention: red "N customers" count, no button */
.h33-ch-attn-count{flex:0 0 auto;font:700 12px/1.2 Poppins,sans-serif;color:#be425a;white-space:nowrap;text-align:right;}
@media (max-width:1100px){.h33-ch-grid{grid-template-columns:1fr;}.h33-ch-grid > .h33-ch-metrics-block,.h33-ch-grid > .h33-ch-recent,.h33-ch-grid > .h33-ch-attn{order:0;}}
@media (max-width:560px){.h33-ch-metrics-block .h33-ch-metrics,.h33-ch-metrics-block .h33-ch-intel-strip{grid-template-columns:repeat(2,1fr);}}
/* KPI strip: reflow the 5 cards at medium/small widths (Today only) so none clip */
@media (max-width:1120px){.h33-hub-today-page .h33-workspace-metric-strip.is-five{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:680px){.h33-hub-today-page .h33-workspace-metric-strip.is-five{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:430px){.h33-hub-today-page .h33-workspace-metric-strip.is-five{grid-template-columns:1fr;}}
/* priority actions row (mockup) — the 4 most pressing items */
.h33-today-pa{margin:6px 0 18px;}
.h33-today-pa-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:12px;}
.h33-today-pa-sub{margin:3px 0 0;font-size:13px;color:#64748b;}
.h33-today-pa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.h33-today-pa-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid rgba(15,23,42,.07);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.05);cursor:pointer;text-align:left;text-decoration:none;transition:border-color .15s,box-shadow .15s;width:100%;}
.h33-today-pa-card:hover{border-color:#6d28d9;box-shadow:0 2px 10px rgba(109,40,217,.1);}
.h33-today-pa-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.h33-today-pa-copy strong{font-size:14px;color:#0f172a;}
.h33-today-pa-copy span{font-size:12px;color:#64748b;}
.h33-today-pa-arrow{color:#94a3b8;flex:0 0 auto;display:inline-flex;}
.h33-today-pa-arrow svg{width:16px;height:16px;}
@media (max-width:1100px){.h33-today-pa-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.h33-today-pa-grid{grid-template-columns:1fr;}}
/* opportunity cards — lead with impact */
.h33-hub-today-page .h33-opportunity-impact{display:block;font-size:19px;font-weight:800;color:#0f172a;margin:1px 0 3px;}
/* recent activity — slimmer chronological feed */
.h33-hub-today-page #today-activity .h33-activity-row{padding:8px 0;}
.h33-hub-today-page #today-activity .h33-card-icon{width:28px;height:28px;flex:0 0 28px;}
.h33-hub-today-page #today-activity strong{font-size:13px;}
.h33-hub-today-page #today-activity .h33-activity-main span{font-size:12px;}
/* saved recs footer link */
.h33-today-saved-more{display:inline-block;margin-top:10px;font-size:13px;}
/* Phase 4L.2C — run status chip + start-chooser cards */
.h33-cm-status.is-red{background:#fee2e2;color:#b91c1c;}
.h33-fb-choice{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
.h33-fb-choicecard{flex:1 1 220px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;padding:16px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.h33-fb-choicecard:hover{border-color:#6d28d9;box-shadow:0 2px 10px rgba(109,40,217,.12);}
.h33-fb-choicecard strong{font-size:15px;}
.h33-fb-choiceicon{width:34px;height:34px;border-radius:9px;background:#f3e8ff;color:#6d28d9;display:inline-flex;align-items:center;justify-content:center;}
/* Phase 4L.2A — Automation builder step rows (stacked: header line + inline config) */
.h33-lp-step-row.is-stacked{display:block;}
.h33-lp-step-row-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.h33-lp-step-rowbtns{display:flex;gap:4px;flex:0 0 auto;}
.h33-fb-steprow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.h33-field.h33-fb-inline{flex:0 1 auto;margin:0;}
.h33-field.h33-fb-inline span{margin-right:6px;}
.h33-cm-status.is-blue{background:#dbeafe;color:#1d4ed8;}
.h33-cm-status.is-amber{background:#fef3c7;color:#b45309;}

/* ===== Engage → Contacts (Phase 4B) ===== */
.h33-hub-contacts-page { position: relative; }
.h33-contacts-gate { padding: 40px 24px; text-align: center; color: var(--h33-text-muted); font-size: 14px; background: var(--h33-surface); border: 1px solid var(--h33-border); border-radius: var(--h33-card-radius-sm); }
.h33-contacts-count { font: 600 13px/1 Poppins, sans-serif; color: var(--h33-text-soft); }
.h33-contacts-muted { color: var(--h33-text-soft); }
.h33-contacts-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 16px; border-bottom: 1px solid var(--h33-border); }
.h33-contacts-tab { appearance: none; border: 0; background: transparent; padding: 10px 14px; font: 600 13.5px/1 Poppins, sans-serif; color: var(--h33-text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.h33-contacts-tab:hover { color: var(--h33-text); background: rgba(109,77,242,0.05); }
.h33-contacts-tab.is-active { color: var(--h33-purple-strong); border-bottom-color: var(--h33-purple); }
.h33-contacts-panel { background: var(--h33-surface); border: 1px solid var(--h33-border); border-radius: var(--h33-card-radius-sm); padding: 16px; box-shadow: var(--h33-shadow-soft); }
.h33-contacts-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.h33-contacts-toolbar-sp { flex: 1 1 auto; }
.h33-contacts-search { display: flex; align-items: center; gap: 6px; flex: 1 1 260px; min-width: 200px; background: #fff; border: 1px solid rgba(114,125,177,0.2); border-radius: 11px; padding: 4px 6px 4px 12px; color: var(--h33-text-soft); }
.h33-contacts-search input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--h33-text); padding: 6px 4px; }
.h33-contacts-search svg { flex: 0 0 auto; width: 15px; height: 15px; }
.h33-contacts-select { border: 1px solid rgba(114,125,177,0.2); border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 13.5px; background: #fff; color: var(--h33-text); }
.h33-contacts-notice { margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; background: var(--h33-purple-soft); color: var(--h33-purple-strong); font-size: 13px; font-weight: 600; }
.h33-contacts-tablewrap { overflow-x: auto; border: 1px solid var(--h33-border); border-radius: 14px; }
.h33-contacts-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 720px; }
.h33-contacts-table thead th { text-align: left; padding: 11px 14px; font: 700 11.5px/1 Poppins, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--h33-text-soft); background: rgba(114,125,177,0.05); border-bottom: 1px solid var(--h33-border); }
.h33-contacts-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--h33-border); color: var(--h33-text); vertical-align: middle; }
.h33-contacts-row { cursor: pointer; transition: background 0.12s ease; }
.h33-contacts-row:hover { background: rgba(109,77,242,0.045); }
.h33-contacts-row:last-child td { border-bottom: 0; }
.h33-contacts-name { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.h33-contacts-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 Poppins, sans-serif; color: #fff; background: linear-gradient(135deg, var(--h33-purple), var(--h33-blue)); }
.h33-contacts-avatar.is-lg { width: 44px; height: 44px; font-size: 15px; }
.h33-contacts-chip { display: inline-block; padding: 3px 8px; margin: 1px 3px 1px 0; border-radius: 999px; background: var(--h33-blue-soft); color: #1d4ed8; font: 600 11px/1 Poppins, sans-serif; }
.h33-contacts-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1 Poppins, sans-serif; text-transform: capitalize; background: var(--h33-mint-soft); color: #15803d; }
.h33-contacts-status.is-unsubscribed, .h33-contacts-status.is-bounced { background: rgba(243,104,104,0.14); color: #c0392b; }
.h33-contacts-status.is-pending { background: var(--h33-gold-soft); color: #b45309; }
.h33-contacts-empty { padding: 30px 16px; text-align: center; color: var(--h33-text-soft); font-size: 14px; }
.h33-contacts-emptystate p { margin: 0 0 12px; color: var(--h33-text); }
.h33-contacts-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; }
.h33-contacts-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1px solid var(--h33-border); border-radius: 12px; margin-bottom: 8px; background: #fff; }
.h33-contacts-metacreate { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.h33-contacts-metacreate input { flex: 1 1 220px; border: 1px solid rgba(114,125,177,0.2); border-radius: 11px; padding: 9px 12px; font: inherit; font-size: 14px; }
.h33-contacts-metalist { display: grid; gap: 0; }
.h33-contacts-form { display: grid; gap: 10px; }
.h33-contacts-kv { display: grid; grid-template-columns: 92px 1fr; gap: 6px 12px; margin: 0; font-size: 13.5px; }
.h33-contacts-kv dt { color: var(--h33-text-soft); font-weight: 600; }
.h33-contacts-kv dd { margin: 0; color: var(--h33-text); }
/* Contact 360 / composer / import drawer */
.h33-contacts-overlay { position: fixed; inset: 0; background: var(--h33-drawer-scrim); z-index: 60; }
.h33-contacts-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--h33-surface); box-shadow: var(--h33-drawer-shadow); z-index: 61; display: flex; flex-direction: column; }
.h33-contacts-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--h33-border); }
.h33-contacts-drawer-head h2 { margin: 0; font: 700 17px/1.2 Poppins, sans-serif; color: var(--h33-text); }
.h33-contacts-close { appearance: none; border: 0; background: transparent; font-size: 26px; line-height: 1; color: var(--h33-text-soft); cursor: pointer; padding: 0 4px; }
.h33-contacts-close:hover { color: var(--h33-text); }
.h33-contacts-drawer-body { padding: 18px 20px; overflow-y: auto; }
/* Track A — import your audience wizard */
.h33-import-consent{display:flex;gap:9px;align-items:flex-start;margin:12px 0;padding:11px 13px;border:1px solid rgba(114,125,177,.2);border-radius:12px;background:rgba(109,92,224,.04);font-size:12.5px;line-height:1.45;cursor:pointer;}
.h33-import-consent input{margin-top:2px;}
.h33-import-consent em{color:var(--h33-text-muted,#8a879a);font-style:normal;}
.h33-import-report{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.h33-import-stat{padding:12px;border:1px solid rgba(114,125,177,.16);border-radius:12px;text-align:center;}
.h33-import-stat strong{display:block;font-size:22px;font-weight:800;letter-spacing:-0.02em;}
.h33-import-stat span{font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-import-stat.is-accent{border-color:#6d5ce0;background:rgba(109,92,224,.07);}
.h33-import-stat.is-accent strong{color:#5a48c8;}
.h33-contacts-sec { margin-bottom: 20px; }
.h33-contacts-sec h3 { margin: 0 0 10px; font: 700 12px/1 Poppins, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--h33-text-soft); }
.h33-contacts-drawer-body input[type="file"] { display: block; margin: 8px 0; font-size: 13px; }
@media (max-width: 640px) {
  .h33-contacts-drawer { width: 100vw; }
  .h33-contacts-toolbar-sp { display: none; }
  .h33-contacts-search { flex-basis: 100%; }
}

/* ===== Inbox → channels (Phase 4C: Email + SMS) ===== */
.h33-inbox-channels { display: inline-flex; gap: 4px; margin: 2px 0 16px; padding: 4px; background: rgba(114,125,177,0.07); border-radius: 12px; }
.h33-inbox-chtab { display: inline-flex; align-items: center; gap: 7px; appearance: none; border: 0; background: transparent; padding: 8px 15px; border-radius: 9px; font: 600 13.5px/1 Poppins, sans-serif; color: var(--h33-text-muted); cursor: pointer; }
.h33-inbox-chtab .h33-icon { width: 15px; height: 15px; }
.h33-inbox-chtab:hover { color: var(--h33-text); }
.h33-inbox-chtab.is-active { background: var(--h33-surface); color: var(--h33-purple-strong); box-shadow: var(--h33-shadow-soft); }
.h33-sms-input { width: 100%; border: 1px solid rgba(114,125,177,0.2); border-radius: 12px; padding: 11px 13px; font: inherit; font-size: 14px; line-height: 1.5; background: #fff; color: var(--h33-text); resize: vertical; min-height: 46px; }
.h33-sms-input:focus { outline: none; border-color: var(--h33-accent-selected); }
.h33-sms-count { font: 500 12px/1 var(--mono, ui-monospace), monospace; color: var(--h33-text-soft); align-self: center; margin-right: auto; }
.h33-sms-media { margin-top: 5px; font-size: 12px; opacity: 0.8; display: inline-flex; align-items: center; gap: 5px; }
.h33-sms-media .h33-icon { width: 13px; height: 13px; }

/* ===== Grow → Campaigns (Phase 4D) ===== */
.h33-camp-ch { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.h33-camp-ch .h33-icon { width: 14px; height: 14px; }
.h33-camp-ch.is-sms { background: var(--h33-mint-soft); color: #15803d; }
.h33-camp-ch.is-email { background: var(--h33-blue-soft); color: #1d4ed8; }
.h33-camp-chlabel { font: 600 12.5px/1 Poppins, sans-serif; color: var(--h33-text-muted); }
.h33-camp-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1 Poppins, sans-serif; text-transform: capitalize; background: rgba(114,125,177,0.12); color: var(--h33-text-muted); }
.h33-camp-status.is-sent { background: var(--h33-mint-soft); color: #15803d; }
.h33-camp-status.is-sending { background: var(--h33-blue-soft); color: #1d4ed8; }
.h33-camp-status.is-scheduled { background: var(--h33-gold-soft); color: #b45309; }
.h33-camp-status.is-draft { background: rgba(114,125,177,0.12); color: var(--h33-text-muted); }
.h33-camp-status.is-paused, .h33-camp-status.is-failed, .h33-camp-status.is-cancelled { background: rgba(243,104,104,0.14); color: #c0392b; }
.h33-camp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.h33-camp-metric { background: var(--h33-surface); border: 1px solid var(--h33-border); border-radius: 12px; padding: 12px 13px; }
.h33-camp-metric-n { font: 800 22px/1 Poppins, sans-serif; color: var(--h33-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h33-camp-metric-l { font: 600 11.5px/1.3 Poppins, sans-serif; color: var(--h33-text-soft); margin-top: 5px; }
.h33-camp-metric-l span { color: var(--h33-purple-strong); font-weight: 700; }
.h33-camp-subject { font-weight: 600; color: var(--h33-text); margin: 0 0 8px; }
.h33-camp-preview { font-size: 13.5px; line-height: 1.6; color: var(--h33-text-muted); background: rgba(114,125,177,0.05); border-radius: 10px; padding: 12px 14px; white-space: pre-wrap; max-height: 200px; overflow-y: auto; }

/* ===== Campaign authoring (4L.1B) — Hub-native email + SMS editor, choice, and preview ===== */
.h33-camp-drawer { width: min(560px, 96vw); }
.h33-camp-sender { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.45; }
.h33-camp-sender .h33-icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.h33-camp-sender strong { color: var(--h33-text); font-weight: 700; }
.h33-camp-sender.is-ok { background: var(--h33-mint-soft); color: #15803d; }
.h33-camp-sender.is-warn { background: var(--h33-gold-soft); color: #b45309; }
.h33-camp-sender a.h33-inline-link { color: inherit; text-decoration: underline; font-weight: 600; }
.h33-camp-content { min-height: 180px; max-height: 340px; overflow-y: auto; }
.h33-camp-choice { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, 94vw); background: var(--h33-surface); border-radius: 18px; box-shadow: var(--h33-drawer-shadow); z-index: 62; padding: 4px 4px 18px; }
.h33-camp-choice .h33-contacts-drawer-head { border-bottom: 1px solid var(--h33-border); }
.h33-camp-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 20px 4px; }
@media (max-width: 560px) { .h33-camp-choice-grid { grid-template-columns: 1fr; } }
.h33-camp-choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 18px 16px; border: 1px solid var(--h33-border); border-radius: 14px; background: var(--h33-surface); cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.h33-camp-choice-card:hover { border-color: var(--h33-purple-strong); transform: translateY(-2px); box-shadow: var(--h33-drawer-shadow); }
.h33-camp-choice-card strong { font: 700 15px/1.2 Poppins, sans-serif; color: var(--h33-text); }
.h33-camp-choice-card .h33-camp-ch { width: 34px; height: 34px; }
.h33-camp-choice-card .h33-camp-ch .h33-icon { width: 18px; height: 18px; }
.h33-camp-previewer { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw); max-height: 84vh; display: flex; flex-direction: column; background: var(--h33-surface); border-radius: 18px; box-shadow: var(--h33-drawer-shadow); z-index: 65; }
.h33-camp-preview-body { padding: 18px 22px 22px; overflow-y: auto; }
.h33-camp-preview-subject { font: 700 16px/1.3 Poppins, sans-serif; color: var(--h33-text); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--h33-border); }
.h33-camp-preview-email { font-size: 14px; line-height: 1.65; color: var(--h33-text); }
.h33-camp-preview-email img { max-width: 100%; height: auto; }
.h33-camp-preview-sms { display: inline-block; max-width: 82%; background: var(--h33-mint-soft); color: #14532d; border-radius: 16px 16px 16px 4px; padding: 11px 15px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

/* ===== Library (4G) assets grid ===== */
.h33-lib-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.h33-lib-asset { margin: 0; border: 1px solid var(--h33-border); border-radius: 14px; overflow: hidden; background: var(--h33-surface); }
.h33-lib-asset-thumb { aspect-ratio: 4/3; display: grid; place-items: center; background: rgba(114,125,177,0.06); overflow: hidden; }
.h33-lib-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.h33-lib-asset-thumb .h33-icon { width: 26px; height: 26px; color: var(--h33-text-soft); }
.h33-lib-asset figcaption { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; }
.h33-lib-asset-name { font-size: 12.5px; font-weight: 600; color: var(--h33-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Messaging (4H/4I) sending identity ===== */
.h33-msg-identity { display: flex; align-items: center; gap: 12px; }
.h33-msg-idot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
.h33-msg-idot .h33-icon { width: 17px; height: 17px; }
.h33-msg-idot.is-ok { background: var(--h33-mint-soft); color: #15803d; }
.h33-msg-idot.is-warn { background: var(--h33-gold-soft); color: #b45309; }

/* ===== Messaging sending-identity setup (4L.3C) ===== */
.h33-msg-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--h33-border); }
.h33-msg-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.h33-msg-block-head h4 { margin: 0; font: 700 13.5px/1.2 Poppins, sans-serif; color: var(--h33-text); }
.h33-msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.h33-msg-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--h33-border); border-radius: 12px; background: var(--h33-surface); }
.h33-msg-row > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.h33-msg-row strong { font: 600 13px/1.3 Poppins, sans-serif; color: var(--h33-text); }
.h33-msg-row .h33-contacts-muted { font-size: 12px; }
.h33-msg-pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 700 10.5px/1 Poppins, sans-serif; text-transform: capitalize; white-space: nowrap; }
.h33-msg-pill.is-ok { background: var(--h33-mint-soft); color: #15803d; }
.h33-msg-pill.is-warn { background: var(--h33-gold-soft); color: #b45309; }
.h33-msg-pill.is-bad { background: rgba(243,104,104,0.14); color: #c0392b; }
/* Phase 4L.1G — email recurrence controls in the campaign editor */
.h33-rec-block { margin: 12px 0 2px; padding: 13px 14px; border: 1px solid var(--h33-border); border-radius: 12px; background: rgba(114,125,177,0.04); }
.h33-rec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.h33-rec-head .h33-icon { width: 16px; height: 16px; flex: 0 0 auto; }
.h33-rec-head strong { color: var(--h33-text); font-weight: 700; }
.h33-rec-banner { margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; background: var(--h33-gold-soft); color: #b45309; font-size: 12.5px; line-height: 1.45; }
.h33-rec-banner a { color: inherit; text-decoration: underline; font-weight: 600; }
.h33-rec-form { display: flex; flex-direction: column; gap: 10px; }
.h33-rec-days { display: flex; flex-wrap: wrap; gap: 8px; }
.h33-rec-day { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--h33-border); border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.h33-rec-day input { margin: 0; }
.h33-rec-end { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .h33-rec-end { grid-template-columns: 1fr; } }
/* Phase 4L.1H — rich email block editor */
.h33-eb-palette { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.h33-eb-palette-label { font: 600 11px/1 Poppins, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--h33-text-soft); margin-right: 2px; }
.h33-eb-add { padding: 5px 10px; border: 1px solid var(--h33-border); border-radius: 8px; background: var(--h33-surface, #fff); color: var(--h33-text); font-size: 12.5px; cursor: pointer; }
.h33-eb-add:hover { border-color: var(--h33-primary, #6D1A86); color: var(--h33-primary, #6D1A86); }
.h33-eb-canvas .h33-eb-block { position: relative; border: 1px dashed transparent; border-radius: 6px; padding: 4px; margin: 2px 0; transition: border-color .12s; }
.h33-eb-canvas .h33-eb-block:hover { border-color: var(--h33-border); }
.h33-eb-canvas .h33-eb-block.is-eb-selected { border-color: var(--h33-primary, #6D1A86); box-shadow: 0 0 0 2px rgba(109,26,134,0.12); }
.h33-eb-props { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--h33-border); border-radius: 10px; background: rgba(114,125,177,0.04); }
.h33-eb-props-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.h33-eb-props-actions { display: inline-flex; gap: 4px; }
.h33-eb-props-body { display: flex; flex-direction: column; gap: 8px; }
.h33-eb-mini { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--h33-border); border-radius: 7px; background: var(--h33-surface, #fff); color: var(--h33-text); font-size: 14px; cursor: pointer; }
.h33-eb-mini:hover { border-color: var(--h33-primary, #6D1A86); }
.h33-eb-mini.is-danger:hover { border-color: #c0392b; color: #c0392b; }
.h33-eb-align { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--h33-text-soft); }
.h33-eb-assets { position: fixed; inset: 0; z-index: 90; background: rgba(15,18,32,0.55); display: none; align-items: center; justify-content: center; padding: 20px; }
.h33-eb-assets-inner { width: min(680px, 96vw); max-height: 84vh; overflow: auto; background: var(--h33-surface, #fff); border-radius: 14px; padding: 16px 18px; }
.h33-eb-assets-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.h33-eb-upload { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--h33-border); border-radius: 8px; font-size: 12.5px; cursor: pointer; margin-bottom: 12px; }
.h33-eb-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.h33-eb-asset { padding: 0; border: 1px solid var(--h33-border); border-radius: 8px; overflow: hidden; cursor: pointer; background: #f8fafc; aspect-ratio: 1; }
.h33-eb-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h33-eb-asset:hover { border-color: var(--h33-primary, #6D1A86); }
/* AI panel */
.h33-ai-block { margin: 10px 0 4px; padding: 11px 13px; border: 1px solid var(--h33-border); border-radius: 10px; background: linear-gradient(180deg, rgba(44,197,255,0.06), rgba(109,26,134,0.05)); }
.h33-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13.5px; }
.h33-ai-head strong { color: var(--h33-text); }
.h33-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.h33-ai-chip { padding: 6px 10px; border: 1px solid var(--h33-border); border-radius: 999px; background: var(--h33-surface, #fff); font-size: 12.5px; cursor: pointer; text-align: left; }
.h33-ai-chip:hover { border-color: var(--h33-primary, #6D1A86); color: var(--h33-primary, #6D1A86); }
.h33-ai-draft { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.h33-ai-preview { border: 1px solid var(--h33-border); border-radius: 8px; padding: 10px 12px; background: var(--h33-surface, #fff); max-height: 220px; overflow: auto; font-size: 13px; }
/* SMS links */
.h33-sms-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 0; }
/* Phase 4L.1I — MMS media */
.h33-mms-media { margin: 8px 0 0; padding: 11px 13px; border: 1px solid var(--h33-border); border-radius: 10px; background: rgba(114,125,177,0.04); }
.h33-mms-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13.5px; }
.h33-mms-head strong { color: var(--h33-text); }
.h33-mms-preview img { max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid var(--h33-border); display: block; margin-bottom: 8px; }
.h33-camp-preview-mms-img { max-width: 100%; border-radius: 8px; margin-bottom: 8px; display: block; }
/* Preview viewport */
.h33-camp-preview-devices { display: inline-flex; gap: 4px; margin-left: auto; margin-right: 8px; }
.h33-fmt-btn.is-active { background: var(--h33-primary, #6D1A86); color: #fff; }
.h33-camp-preview-frame { margin: 0 auto; transition: width .15s; }
.h33-camp-preview-frame.is-desktop { width: 100%; max-width: 640px; }
.h33-camp-preview-frame.is-mobile { width: 375px; max-width: 100%; border: 1px solid var(--h33-border); border-radius: 12px; padding: 8px; }
.h33-msg-form { margin-top: 12px; padding: 14px; border: 1px dashed var(--h33-border); border-radius: 12px; background: rgba(114,125,177,0.04); }
.h33-msg-domain { display: block; }
.h33-msg-dns { margin: 6px 0 2px; overflow-x: auto; }
.h33-msg-dns-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.h33-msg-dns-tbl th { text-align: left; font: 600 10.5px/1 Poppins, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--h33-text-soft); padding: 4px 8px; }
.h33-msg-dns-tbl td { padding: 6px 8px; border-top: 1px solid var(--h33-border); vertical-align: top; }
.h33-msg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; word-break: break-all; }
.h33-msg-test { margin-top: 14px; padding: 14px; border: 1px solid var(--h33-border); border-radius: 12px; background: rgba(114,125,177,0.04); }

/* ===== Today marketing-at-a-glance (4J) ===== */
.h33-today-mktg { background: var(--h33-surface); border: 1px solid var(--h33-border); border-radius: var(--h33-card-radius-sm); padding: 16px 18px; box-shadow: var(--h33-shadow-soft); margin-bottom: 4px; }
.h33-today-mktg-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.h33-today-mktg-head h3 { margin: 0; font: 700 14px/1 Poppins, sans-serif; color: var(--h33-text); }
.h33-today-mktg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.h33-today-mktg-stat { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--h33-border); border-radius: 12px; text-decoration: none; transition: background 0.12s ease; }
.h33-today-mktg-stat:hover { background: rgba(109,77,242,0.05); }
.h33-today-mktg-n { font: 800 22px/1 Poppins, sans-serif; color: var(--h33-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.h33-today-mktg-l { font: 600 11.5px/1.2 Poppins, sans-serif; color: var(--h33-text-soft); }
.h33-today-mktg-cta { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1 Poppins, sans-serif; color: var(--h33-purple-strong); align-self: center; height: 100%; }
.h33-today-mktg-cta .h33-icon { width: 14px; height: 14px; }

/* ===== Messaging sparkline (4I) ===== */
.h33-spark-wrap { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--h33-purple); }
.h33-spark { display: block; overflow: visible; }
.h33-spark-wrap span { color: var(--h33-text-soft); }

/* ===== Social (4F) read-only ===== */
.h33-social-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.h33-social-card { border: 1px solid var(--h33-border); border-radius: 14px; background: var(--h33-surface); padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; }
.h33-social-card-top { display: flex; align-items: center; gap: 9px; font: 700 14px/1.2 Poppins, sans-serif; color: var(--h33-text); }
.h33-social-status { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 Poppins, sans-serif; }
.h33-social-status .h33-icon { width: 14px; height: 14px; }
.h33-social-status.is-on { color: #15803d; }
.h33-social-status.is-off { color: var(--h33-text-soft); }

/* ============================================================================
   Contact Intelligence workspace (Grow → Contacts) — Phase 1
   3-column workspace: contact rail | Contact 360 | intelligence rail.
   Honest presentation over existing data; scoped to .h33-ci-page.
   ============================================================================ */
.h33-ci-page .h33-ci-titlerow{display:flex;align-items:baseline;gap:12px;margin:2px 0 12px;}
.h33-ci-page .h33-ci-title{font-size:26px;font-weight:800;letter-spacing:-0.03em;margin:0;}
.h33-ci-page .h33-ci-ai{max-width:none;width:100%;margin-bottom:10px;}
.h33-ci-tryask{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.h33-ci-tryask > span{font-size:12.5px;color:var(--h33-text-muted);}
.h33-ci-smartviews{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.h33-ci-sv{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--h33-border);border-radius:12px;background:#fff;cursor:pointer;text-align:left;transition:border-color .12s ease,box-shadow .12s ease;}
.h33-ci-sv:hover{border-color:var(--h33-border-strong);}
.h33-ci-sv.is-active{border-color:var(--h33-purple-strong);box-shadow:0 0 0 2px rgba(109,77,242,0.12);}
.h33-ci-sv .h33-card-icon{width:34px;height:34px;flex:0 0 34px;border-radius:9px;}
.h33-ci-sv-body{display:flex;flex-direction:column;min-width:0;}
.h33-ci-sv-label{font-size:11.5px;color:var(--h33-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h33-ci-sv-body strong{font-size:19px;font-weight:800;letter-spacing:-0.02em;color:#0f172a;}
.h33-ci-sv .h33-card-icon.is-risk{background:rgba(224,122,63,0.14);color:#b45309;}

.h33-ci-grid{display:grid;grid-template-columns:minmax(0,0.94fr) minmax(0,2.1fr) minmax(0,1.08fr);gap:16px;align-items:start;}
/* Left rail */
.h33-ci-rail{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 220px);}
.h33-ci-rail-controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;min-width:0;}
.h33-ci-rail-controls > *{min-width:0;max-width:100%;}
.h33-ci-rail{min-width:0;}
.h33-ci-rail-controls .h33-contacts-search{width:100%;min-width:0;}
.h33-ci-rail-controls .h33-contacts-search input{min-width:0;}
.h33-ci-rail-controls .h33-contacts-search{flex:1 1 auto;}
.h33-ci-sort{width:100%;max-width:100%;}
.h33-ci-viewbar{font-size:12px;color:var(--h33-text-muted);display:flex;justify-content:space-between;align-items:center;}
.h33-ci-railrows{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;}
.h33-ci-railrow{display:flex;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px;background:transparent;cursor:pointer;text-align:left;transition:background .12s ease,border-color .12s ease;align-items:center;}
.h33-ci-railrow:hover{background:rgba(109,77,242,0.04);}
.h33-ci-railrow.is-active{background:rgba(109,77,242,0.08);border-color:var(--h33-border-strong);}
.h33-ci-railrow .h33-contacts-avatar{width:38px;height:38px;flex:0 0 38px;font-size:13px;}
.h33-ci-railrow-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.h33-ci-railrow-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.h33-ci-railrow-top strong{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h33-ci-railrow-sub{font-size:12px;color:var(--h33-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h33-ci-railrow-meta{font-size:11px;color:var(--h33-text-soft);}
.h33-ci-rail-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--h33-border);}
/* relationship pills */
.h33-ci-rel{font:700 10.5px/1 Poppins,sans-serif;padding:3px 8px;border-radius:999px;white-space:nowrap;}
.h33-ci-rel.is-customer{background:rgba(34,197,94,0.15);color:#15803d;}
.h33-ci-rel.is-lead{background:rgba(44,120,209,0.14);color:#1d4ed8;}
.h33-ci-rel.is-risk{background:rgba(190,66,90,0.16);color:#be425a;}
.h33-ci-rel.is-watch{background:rgba(185,120,42,0.16);color:#b9782a;}
.h33-ci-rel.is-inactive{background:rgba(120,124,140,0.16);color:#55596b;}

/* Center Contact 360 */
.h33-ci-center{display:flex;flex-direction:column;gap:12px;min-width:0;}
.h33-ci-center.is-empty{padding:60px 24px;place-items:center;}
.h33-ci-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;}
.h33-ci-header-id{display:flex;gap:14px;min-width:0;}
.h33-ci-header .h33-contacts-avatar.is-lg{width:56px;height:56px;flex:0 0 56px;font-size:18px;}
.h33-ci-header-idtext{min-width:0;}
.h33-ci-header-nameline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.h33-ci-header-nameline h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.02em;}
.h33-ci-header-contacts{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;font-size:12.5px;color:var(--h33-text-muted);}
.h33-ci-header-contacts span{display:inline-flex;align-items:center;gap:5px;}
.h33-ci-header-contacts .h33-icon{width:14px;height:14px;}
.h33-ci-header-metrics{display:flex;align-items:center;gap:22px;}
.h33-ci-metric{display:flex;flex-direction:column;text-align:right;}
.h33-ci-metric span{font-size:11px;color:var(--h33-text-muted);}
.h33-ci-metric strong{font-size:20px;font-weight:800;letter-spacing:-0.02em;}
.h33-ci-overflow{border:1px solid var(--h33-border);background:#fff;border-radius:9px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--h33-text-muted);}
.h33-ci-actionbar{display:flex;flex-wrap:wrap;gap:8px;}
.h33-ci-tabs{display:flex;gap:4px;border-bottom:1px solid var(--h33-border);overflow-x:auto;}
.h33-ci-tab{border:0;background:transparent;padding:8px 12px;font-size:13px;font-weight:600;color:var(--h33-text-muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.h33-ci-tab.is-active{color:var(--h33-purple-strong);border-bottom-color:var(--h33-purple-strong);}
.h33-ci-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.h33-ci-ov-grid + .h33-ci-ov-grid{margin-top:12px;}
.h33-ci-brief,.h33-ci-nba,.h33-ci-snap,.h33-ci-tabbody{padding:16px 18px;}
.h33-ci-sec-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;}
.h33-ci-sec-head h3{margin:0;font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px;}
.h33-ci-sec-head h3 .h33-icon{width:15px;height:15px;color:var(--h33-purple-strong);}
.h33-ci-brief p{margin:0 0 8px;font-size:13px;line-height:1.55;}
.h33-ci-generated{font-size:11px;color:var(--h33-text-soft);display:inline-flex;align-items:center;gap:5px;}
.h33-ci-generated .h33-icon{width:12px;height:12px;}
.h33-ci-nba-rec{background:rgba(109,77,242,0.08);border:1px solid var(--h33-border-strong);color:var(--h33-purple-strong);font-weight:700;font-size:13px;padding:9px 12px;border-radius:10px;margin-bottom:10px;}
.h33-ci-nba-why span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--h33-text-soft);}
.h33-ci-nba-why ul{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:5px;}
.h33-ci-nba-why li{display:flex;align-items:center;gap:7px;font-size:12.5px;}
.h33-ci-nba-why li .h33-icon{width:14px;height:14px;color:#15803d;flex:0 0 14px;}
.h33-ci-nba-actions{display:flex;gap:8px;}
.h33-ci-snap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.h33-ci-snap-grid span{font-size:11px;color:var(--h33-text-muted);}
.h33-ci-snap-grid strong{font-size:18px;font-weight:800;letter-spacing:-0.02em;display:block;}
.h33-ci-snap-grid strong.is-risk-text{color:#be425a;}
.h33-ci-snap-grid strong.is-watch-text{color:#b9782a;}
.h33-ci-snap-grid .h33-ci-risk-why{display:block;font-size:11px;font-style:normal;color:var(--h33-text-muted);margin-top:3px;line-height:1.35;}

/* Right rail */
.h33-ci-rail-right{display:flex;flex-direction:column;gap:12px;min-width:0;}
.h33-ci-rr{padding:16px 18px;}
.h33-ci-oppo-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--h33-border);}
.h33-ci-oppo-row:first-of-type{border-top:0;}
.h33-ci-oppo-row .h33-card-icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;}
.h33-ci-oppo-copy{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.h33-ci-oppo-copy strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.h33-ci-oppo-copy span{font-size:11.5px;color:var(--h33-text-muted);}
.h33-ci-fit{font:700 11px/1 Poppins,sans-serif;padding:4px 9px;border-radius:999px;white-space:nowrap;}
.h33-ci-fit.is-high{background:rgba(34,197,94,0.15);color:#15803d;}
.h33-ci-fit.is-med{background:rgba(243,160,24,0.16);color:#b45309;}
.h33-ci-note{font-size:11px;color:var(--h33-text-soft);margin:8px 0 0;}
.h33-ci-channels{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.h33-ci-channel{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--h33-border);border-radius:11px;}
.h33-ci-channel .h33-icon{width:16px;height:16px;color:var(--h33-text-muted);}
.h33-ci-channel div{display:flex;flex-direction:column;}
.h33-ci-channel strong{font-size:12.5px;}
.h33-ci-channel span{font-size:10.5px;color:var(--h33-text-muted);}
.h33-ci-channel.is-best{border-color:var(--h33-border-strong);background:rgba(109,77,242,0.06);}
.h33-ci-channel.is-best .h33-icon{color:var(--h33-purple-strong);}
.h33-ci-channel.is-off{opacity:.6;}
.h33-ci-signals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.h33-ci-signals li{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.h33-ci-signals li .h33-icon{width:15px;height:15px;color:var(--h33-purple-strong);flex:0 0 15px;}
.h33-ci-quick{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.h33-ci-quick .h33-button{justify-content:flex-start;}
.h33-ci-footnote{font-size:11.5px;color:var(--h33-text-soft);margin:14px 2px 0;line-height:1.5;}
.h33-ci-managerow{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:12.5px;}

/* responsive */
/* Responsive by the CONTENT area width (container query), not the viewport — the left nav takes ~240px,
   so viewport media queries fired too late and clipped the right rail / overflowed cards. */
.h33-ci-page{container-type:inline-size;}
@container (max-width:1180px){
  .h33-ci-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);}
  .h33-ci-rail-right{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;}
  .h33-ci-rail-right > *{flex:1 1 260px;}
}
@container (max-width:1000px){.h33-ci-smartviews{grid-template-columns:repeat(3,minmax(0,1fr));}}
@container (max-width:820px){
  .h33-ci-grid{grid-template-columns:1fr;}
  .h33-ci-ov-grid{grid-template-columns:1fr;}
  .h33-ci-rail{max-height:none;}
}
@container (max-width:620px){.h33-ci-smartviews{grid-template-columns:repeat(2,minmax(0,1fr));}}
@container (max-width:440px){.h33-ci-smartviews{grid-template-columns:1fr;}.h33-ci-header{flex-direction:column;}.h33-ci-quick,.h33-ci-channels,.h33-ci-snap-grid{grid-template-columns:1fr;}}
/* Phase 2: unified timeline rows */
.h33-ci-timeline{display:flex;flex-direction:column;gap:2px;}
.h33-ci-tl-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--h33-border);}
.h33-ci-tl-row:first-child{border-top:0;}
.h33-ci-tl-row .h33-card-icon{width:28px;height:28px;flex:0 0 28px;border-radius:8px;}
.h33-ci-tl-copy{flex:1 1 auto;min-width:0;}
.h33-ci-tl-copy strong{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.h33-ci-tl-row em{font-size:11px;color:var(--h33-text-soft);font-style:normal;white-space:nowrap;}
.h33-ci-interpreted{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--h33-purple-strong);background:rgba(109,77,242,0.07);border:1px solid var(--h33-border-strong);border-radius:999px;padding:5px 12px;margin:-4px 0 12px;}
.h33-ci-interpreted .h33-icon{width:14px;height:14px;}
.h33-ci-access-list{display:flex;flex-direction:column;gap:8px;}
.h33-ci-access-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--h33-border);}
.h33-ci-access-row:first-child{border-top:0;}
.h33-ci-access-row .h33-card-icon{width:30px;height:30px;flex:0 0 30px;border-radius:8px;}
.h33-ci-access-copy{flex:1 1 auto;min-width:0;}
.h33-ci-access-copy strong{font-size:13px;font-weight:600;display:block;}
.h33-ci-access-copy span{font-size:11.5px;color:var(--h33-text-muted);}

/* Contact 360 — notes composer + list (Phase 1b) */
.h33-ci-note-compose{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.h33-ci-note-input{width:100%;max-width:100%;box-sizing:border-box;resize:vertical;min-height:64px;padding:10px 12px;border:1px solid var(--h33-border,#e3e3ef);border-radius:10px;font:inherit;color:inherit;background:var(--h33-surface,#fff);}
.h33-ci-note-input:focus{outline:none;border-color:var(--h33-accent,#6d1a86);box-shadow:0 0 0 3px rgba(109,26,134,.12);}
.h33-ci-notes-list{display:flex;flex-direction:column;gap:10px;}
.h33-ci-note-item{border:1px solid var(--h33-border,#e9e9f2);border-radius:10px;padding:10px 12px;background:var(--h33-surface-2,#faf9fd);}
.h33-ci-note-item p{margin:0 0 6px;white-space:pre-wrap;word-break:break-word;line-height:1.45;}
.h33-ci-note-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.h33-ci-note-foot em{font-style:normal;font-size:12px;color:var(--h33-muted,#8a879a);}

/* Engage — inline podcast player from [[mypodops-embed]] shortcode */
.h33-embed-player{margin:12px 0;max-width:560px;}
.h33-embed-frame{width:100%;border:0;display:block;border-radius:12px;overflow:hidden;background:transparent;}

/* ============================ ENGAGE / COMMUNITY WORKSPACE ============================ */
.h33-community-ws .h33-community-ask{max-width:none;width:100%;margin:4px 0 14px;}
.h33-community-ask-out{display:flex;gap:10px;align-items:flex-start;background:var(--h33-surface-2,#faf9fd);border:1px solid var(--h33-border,#e9e9f2);border-radius:12px;padding:12px 14px;margin:-6px 0 14px;}
.h33-community-ask-out p{margin:0 0 4px;line-height:1.5;}

/* KPI strip */
.h33-community-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;}
.h33-community-kpis.is-inline{margin:6px 0 16px;}
.h33-community-kpi{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.h33-community-kpi-body{display:flex;flex-direction:column;min-width:0;}
.h33-community-kpi-label{font-size:12px;color:var(--h33-text-muted,#8a879a);font-weight:600;}
.h33-community-kpi-body strong{font-size:24px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;}
.h33-community-kpi-sub{font-size:11px;color:var(--h33-text-muted,#8a879a);}

/* Tab bar */
.h33-community-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--h33-border,#e9e9f2);margin-bottom:16px;}
.h33-community-tab{appearance:none;background:transparent;border:0;border-bottom:2px solid transparent;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--h33-text-muted,#8a879a);cursor:pointer;border-radius:8px 8px 0 0;}
.h33-community-tab:hover{color:var(--h33-accent,#6d1a86);background:var(--h33-surface-2,#faf9fd);}
.h33-community-tab.is-active{color:var(--h33-accent,#6d1a86);border-bottom-color:var(--h33-accent,#6d1a86);}

/* Smart-view rail */
.h33-community-sv{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.h33-community-sv-list{display:flex;flex-direction:column;gap:2px;}
.h33-community-sv-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:transparent;border-radius:8px;font:inherit;font-size:14px;color:var(--h33-text,#2a2740);cursor:pointer;text-align:left;}
.h33-community-sv-row svg{width:16px;height:16px;opacity:.7;flex:0 0 auto;}
.h33-community-sv-row:hover{background:var(--h33-surface-2,#faf9fd);}
.h33-community-sv-row.is-active{background:rgba(109,26,134,.08);color:var(--h33-accent,#6d1a86);font-weight:600;}
.h33-community-sv-row.is-disabled{color:#b9b7c6;cursor:not-allowed;}
.h33-community-sv-row em{margin-left:auto;font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#b9b7c6;}
.h33-community-sv-note{font-size:12px;color:var(--h33-text-muted,#8a879a);margin:2px 0 0;}

/* Home brief + groups mini */
.h33-community-brief{padding:14px 16px;margin-bottom:14px;}
.h33-community-brief p{margin:0;line-height:1.5;}
.h33-community-groups-mini{margin-top:14px;border-top:1px solid var(--h33-border,#e9e9f2);padding-top:12px;}
.h33-community-mini-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--h33-text-muted,#8a879a);margin-bottom:8px;}
.h33-community-mini-row{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font:inherit;}
.h33-community-mini-row:hover{background:var(--h33-surface-2,#faf9fd);}
.h33-community-mini-body{display:flex;flex-direction:column;min-width:0;}
.h33-community-mini-body strong{font-size:13px;}
.h33-community-mini-body span{font-size:11px;color:var(--h33-text-muted,#8a879a);}

/* Home right rail (pulse/needs/quick) */
.h33-community-pulse{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.h33-community-pulse>div{display:flex;flex-direction:column;background:var(--h33-surface-2,#faf9fd);border-radius:10px;padding:8px 10px;}
.h33-community-pulse span{font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-community-pulse strong{font-size:18px;font-weight:800;}
.h33-community-needs{display:flex;flex-direction:column;gap:6px;}
.h33-community-need-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid var(--h33-border,#eee);border-radius:10px;background:#fff;cursor:pointer;text-align:left;font:inherit;}
.h33-community-need-row.is-soft{cursor:default;opacity:.75;}
.h33-community-need-body{display:flex;flex-direction:column;min-width:0;flex:1;}
.h33-community-need-body strong{font-size:13px;}
.h33-community-need-body span{font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-community-need-cta{font-size:12px;font-weight:600;color:var(--h33-accent,#6d1a86);}
.h33-community-need-cta.is-soon{color:#b9b7c6;}
.h33-community-summary-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;}
.h33-community-summary-foot em{font-style:normal;font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-community-creator-actions{display:flex;flex-direction:column;gap:6px;}
.h33-community-creator-actions .h33-button{justify-content:flex-start;}
.h33-community-soon{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#b9b7c6;margin-left:auto;}
/* (is-danger color is defined once above as readable light-red) */

/* Recovery panels (members/groups/missions/events/moderation/analytics) */
.h33-community-panel{display:flex;flex-direction:column;gap:14px;}
.h33-community-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.h33-community-panel-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-0.02em;}
.h33-community-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;background:#fff;border:1px solid var(--h33-border,#e9e9f2);border-radius:14px;}
.h33-community-empty h2{margin:4px 0 0;font-size:20px;}
.h33-community-empty p{max-width:520px;margin:0;}
.h33-card-icon.is-lg{width:44px;height:44px;}
.h33-card-icon.is-lg svg{width:22px;height:22px;}

/* Members */
.h33-community-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.h33-community-member{display:flex;align-items:center;gap:12px;padding:14px;}
.h33-community-member-body{flex:1;min-width:0;}
.h33-community-member-top{display:flex;align-items:center;gap:8px;}
.h33-community-member-top strong{font-size:15px;}
.h33-community-rank{font-size:11px;font-weight:700;color:var(--h33-accent,#6d1a86);background:rgba(109,26,134,.08);border-radius:20px;padding:1px 8px;}
.h33-community-member-meta{font-size:12px;color:var(--h33-text-muted,#8a879a);margin-top:2px;}

/* Groups */
.h33-community-group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;}
.h33-community-group{display:flex;flex-direction:column;gap:10px;padding:14px;}
.h33-community-group-top{display:flex;align-items:center;gap:10px;}
.h33-community-group-top strong{font-size:15px;display:block;}
.h33-community-group-priv{font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-community-group-stats{display:flex;gap:14px;font-size:12px;color:var(--h33-text-muted,#8a879a);}
.h33-community-group .h33-button{align-self:flex-start;}
/* #29 private groups + moderation */
.h33-community-panel-head-right{display:flex;align-items:center;gap:12px;}
.h33-community-group.is-private{border-color:rgba(109,92,224,.28);}
.h33-community-group-priv.is-private{display:inline-flex;align-items:center;gap:4px;color:#6d5ce0;font-weight:700;}
.h33-community-group-priv.is-private .h33-icon svg{width:12px;height:12px;stroke:#6d5ce0;fill:none;stroke-width:2;}
.h33-community-group-desc{margin:0;font-size:12.5px;line-height:1.45;color:var(--h33-text,#33313f);}
.h33-community-group-desc.is-muted{color:var(--h33-text-muted,#8a879a);font-style:italic;}
.h33-community-group-member{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#15803d;align-self:flex-start;}
.h33-community-group-member .h33-icon svg{width:13px;height:13px;stroke:#15803d;fill:none;stroke-width:2.4;}
.h33-community-manage{margin-top:4px;border-top:1px solid rgba(114,125,177,.14);padding-top:10px;display:flex;flex-direction:column;gap:8px;}
.h33-community-manage-head{font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--h33-text-muted,#8a879a);}
.h33-community-req-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.h33-community-req-row strong{display:block;font-size:13px;}
.h33-community-req-row .h33-contacts-muted{font-size:11px;}
.h33-community-req-actions{display:flex;gap:6px;}
.h33-community-create{display:flex;flex-direction:column;gap:10px;padding:14px;margin-bottom:12px;}
.h33-community-create .h33-input{width:100%;}
.h33-community-vis{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.h33-community-vis-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid rgba(114,125,177,.2);border-radius:12px;background:transparent;cursor:pointer;font:700 13px/1.2 Poppins,sans-serif;color:var(--h33-text,#33313f);text-align:left;}
.h33-community-vis-opt span{font-weight:500;font-size:11px;color:var(--h33-text-muted,#8a879a);}
.h33-community-vis-opt.is-on{border-color:#6d5ce0;background:rgba(109,92,224,.08);color:#5a48c8;}
.h33-community-vis-opt.is-locked{opacity:.6;cursor:not-allowed;}
.h33-community-vis-opt .h33-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.h33-community-create-err{margin:0;font-size:12px;color:#c0392b;}
.h33-community-create-actions{display:flex;gap:8px;}

/* Missions & rewards */
.h33-community-mr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.h33-community-mr{padding:14px 16px;}
.h33-community-mr.is-wide{grid-column:1/-1;}
.h33-community-pugma{display:flex;flex-direction:column;align-items:center;padding:10px 0;}
.h33-community-pugma strong{font-size:34px;font-weight:800;letter-spacing:-0.02em;color:var(--h33-accent,#6d1a86);}
.h33-community-pugma span{font-size:12px;color:var(--h33-text-muted,#8a879a);}
.h33-community-thresholds{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--h33-text-muted,#8a879a);}
.h33-community-badges{display:flex;flex-wrap:wrap;gap:6px;}
.h33-community-badge{font-size:11px;padding:4px 10px;border-radius:20px;background:var(--h33-surface-2,#f2f1f7);color:#9a98a8;border:1px solid var(--h33-border,#e9e9f2);}
.h33-community-badge.is-on{background:rgba(109,26,134,.1);color:var(--h33-accent,#6d1a86);border-color:transparent;font-weight:600;}
.h33-community-leaderboard{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.h33-community-leaderboard li{display:flex;align-items:center;gap:10px;}
.h33-community-lb-rank{font-size:12px;font-weight:700;color:var(--h33-text-muted,#8a879a);width:28px;}
.h33-community-lb-pts{margin-left:auto;font-size:12px;font-weight:600;color:var(--h33-accent,#6d1a86);}
.h33-community-list-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.h33-community-list-lines li{font-size:13px;line-height:1.45;}

/* Analytics */
.h33-community-analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;}
.h33-community-analytics-grid .h33-card{padding:14px 16px;}

/* Responsive */
@media (max-width:1080px){.h33-community-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.h33-community-kpis{grid-template-columns:1fr 1fr;}.h33-community-tabs{overflow-x:auto;flex-wrap:nowrap;}.h33-community-pulse{grid-template-columns:1fr 1fr;}}

/* ---- Engage/Community Home & Discussions density fix: pack columns to the top, don't stretch-fill ---- */
.h33-community-ws .h33-hub-community-main,
.h33-community-ws .h33-hub-community-rail,
.h33-community-ws .h33-hub-community-list{align-content:start;align-self:start;}
/* Left discussion list becomes a bounded, internally-scrolling feed instead of stretching the whole row tall */
.h33-community-ws .h33-hub-community-thread-list{max-height:560px;overflow-y:auto;overflow-x:hidden;padding-right:4px;}
.h33-community-ws .h33-hub-community-thread-list::-webkit-scrollbar{width:8px;}
.h33-community-ws .h33-hub-community-thread-list::-webkit-scrollbar-thumb{background:rgba(114,125,177,.3);border-radius:999px;}
/* Right command-center rail stays in view as the center scrolls */
.h33-community-ws .h33-hub-community-rail{position:sticky;top:14px;}
.h33-community-ws .h33-hub-community-rail .h33-ci-rr{padding:14px 16px;}
/* Tighter discussion cards so the feed reads denser */
.h33-community-ws .h33-hub-community-thread-card{padding:12px 14px;}
.h33-community-ws .h33-hub-community-thread-card p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Search field in the community smart-view column must be content-height (it inherits flex:1 from the contacts row) */
.h33-community-sv .h33-contacts-search{flex:0 0 auto;width:100%;min-height:0;}
.h33-community-sv .h33-contacts-search input{width:100%;}
/* Member card detail lines (podcast + join date) */
.h33-community-member{align-items:flex-start;}
.h33-community-member-line{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--h33-text,#2a2740);margin-top:3px;}
.h33-community-member-line.is-muted{color:var(--h33-text-muted,#8a879a);}
.h33-community-member-line svg{width:13px;height:13px;flex:0 0 auto;opacity:.7;}

/* Community share modal (real social intents) */
.h33-community-share-overlay{position:fixed;inset:0;background:rgba(20,18,40,.45);z-index:2000;}
.h33-community-share-modal{position:fixed;z-index:2001;top:50%;left:50%;transform:translate(-50%,-50%);width:min(440px,92vw);background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(35,47,88,.28);padding:18px 20px;}
.h33-community-share-modal .h33-ci-sec-head{align-items:center;}
.h33-community-share-x{margin-left:auto;background:transparent;border:0;font-size:24px;line-height:1;color:var(--h33-text-muted,#8a879a);cursor:pointer;padding:0 4px;}
.h33-community-share-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.h33-community-share-net{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:1px solid var(--h33-border,#e9e9f2);border-radius:12px;text-decoration:none;color:var(--h33-text,#2a2740);font-size:12px;font-weight:600;}
.h33-community-share-net:hover{background:var(--h33-surface-2,#faf9fd);border-color:var(--h33-accent,#6d1a86);}
.h33-community-share-copyrow{display:flex;gap:8px;align-items:center;}
.h33-community-share-copyrow input{flex:1;min-width:0;padding:9px 10px;border:1px solid var(--h33-border,#e9e9f2);border-radius:10px;font:inherit;font-size:12px;color:var(--h33-text-muted,#8a879a);background:var(--h33-surface-2,#faf9fd);}

/* Reddit-style up/down vote box */
.h33-community-votebox{display:inline-flex;flex-direction:column;align-items:center;gap:1px;vertical-align:middle;}
.h33-community-votebox.is-inline{flex-direction:row;gap:3px;}
.h33-community-vote{appearance:none;border:0;background:transparent;cursor:pointer;font-size:13px;line-height:1;color:var(--h33-text-muted,#9a98a8);padding:2px 5px;border-radius:6px;}
.h33-community-vote:hover{background:var(--h33-surface-2,#f2f1f7);}
.h33-community-vote.is-up.is-on{color:#e0603a;}
.h33-community-vote.is-down.is-on{color:#6d7cff;}
.h33-community-vote-score{font-size:13px;font-weight:800;color:var(--h33-text,#2a2740);min-width:18px;text-align:center;}
.h33-community-vote-score.is-up{color:#e0603a;}
.h33-community-vote-score.is-down{color:#6d7cff;}

/* Moderation queue + flag badge */
.h33-community-sv-badge{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:#be425a;}
.h33-community-flag-list{display:flex;flex-direction:column;gap:12px;}
.h33-community-flag{padding:14px 16px;}
.h33-community-flag-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.h33-community-flag-reason{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#be425a;background:rgba(190,66,90,.1);border-radius:20px;padding:2px 10px;}
.h33-community-flag-title{font-weight:700;margin-bottom:4px;}
.h33-community-flag-body{font-size:13px;line-height:1.5;color:var(--h33-text,#2a2740);background:var(--h33-surface-2,#faf9fd);border-radius:10px;padding:10px 12px;margin-bottom:6px;white-space:pre-wrap;}
.h33-community-flag-meta{font-size:12px;color:var(--h33-text-muted,#8a879a);margin-bottom:10px;}

/* Moderation Flagged | Removed sub-tabs */
.h33-community-subtabs{display:flex;gap:6px;margin-bottom:14px;}
.h33-community-subtab{appearance:none;background:var(--h33-surface-2,#f2f1f7);border:1px solid var(--h33-border,#e9e9f2);border-radius:20px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;color:var(--h33-text-muted,#8a879a);cursor:pointer;}
.h33-community-subtab:hover{color:var(--h33-accent,#6d1a86);}
.h33-community-subtab.is-active{background:rgba(109,26,134,.1);color:var(--h33-accent,#6d1a86);border-color:transparent;}
.h33-community-flag.is-removed{opacity:.94;}
.h33-community-flag-reason.is-removed{color:#8a879a;background:var(--h33-surface-2,#f2f1f7);}

/* Creator-action toggles + post status badges + mini embed */
.h33-community-badges-row{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px;}
.h33-community-badge-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;line-height:1.4;}
.h33-community-badge-chip.is-announce{background:#eef0ff;color:#5b4fe0;}
.h33-community-badge-chip.is-pin{background:#fff4e0;color:#b7791f;}
.h33-community-badge-chip.is-feature{background:rgba(109,26,134,.1);color:#6d1a86;}
.h33-community-badge-chip.is-lock{background:#f2f1f7;color:#8a879a;}
.h33-community-creator-actions .h33-button.is-on{background:rgba(109,26,134,.1)!important;color:#6d1a86!important;border-color:transparent!important;}
.h33-embed-player.is-mini{max-width:none;width:100%;}
.h33-embed-player.is-mini .h33-embed-frame{width:100%;border-radius:14px;}

/* Today marketing card — prominent build-email/SMS entry points */
.h33-today-mktg-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.h33-today-mktg-actions .h33-button{text-decoration:none;}

/* Community announcement (Option 1) — creator's note pinned above the post */
.h33-community-announce-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#eef0ff;border:1px solid #d7dcff;}
.h33-community-announce-badge{font-size:11px;font-weight:800;color:#5b4fe0;text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto;}
.h33-community-announce-banner p{margin:0;flex:1 1 240px;min-width:0;color:#2b2b39;font-weight:600;line-height:1.5;white-space:pre-wrap;}
.h33-community-announce-input{width:100%;box-sizing:border-box;margin:10px 0 4px;padding:10px 12px;border:1px solid #d7dcff;border-radius:10px;font:inherit;resize:vertical;}
.h33-community-announce-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;}

/* Library → Assets management (Phase 4L.5) */
.h33-lib-assets-bar{display:flex;align-items:center;gap:12px;margin:0 0 14px;}
.h33-lib-assets-bar .h33-button{cursor:pointer;}
.h33-lib-asset{position:relative;}
.h33-lib-asset-actions{display:flex;gap:12px;justify-content:center;margin-top:6px;opacity:0;transition:opacity .12s ease;}
.h33-lib-asset:hover .h33-lib-asset-actions,.h33-lib-asset:focus-within .h33-lib-asset-actions{opacity:1;}
.h33-lib-asset-del{color:#c0392b;}

/* Library → Forms & Templates editors (Phase 4L.5) */
.h33-form-row-actions{display:flex;gap:12px;white-space:nowrap;}
.h33-form-drawer{max-width:640px;width:92vw;display:flex;flex-direction:column;}
.h33-form-drawer-body{overflow-y:auto;padding:4px 2px;display:flex;flex-direction:column;gap:12px;}
.h33-form-drawer-foot{display:flex;justify-content:flex-end;gap:10px;padding-top:14px;border-top:1px solid var(--h33-border,#e6e6ef);margin-top:8px;}
.h33-form-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.h33-form-section{border:1px solid var(--h33-border,#e6e6ef);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;}
.h33-form-section h3{margin:0 0 2px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#7a7a8c;}
.h33-form-field{border:1px solid var(--h33-border,#e6e6ef);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:#fafafe;}
.h33-form-field-head{display:flex;align-items:center;justify-content:space-between;}
.h33-form-field-move{display:flex;gap:10px;}
.h33-form-check{display:flex;align-items:center;gap:8px;font-size:13px;color:#4a4a58;}
.h33-tpl-content{min-height:220px;max-height:46vh;overflow-y:auto;border:1px solid var(--h33-border,#e6e6ef);border-radius:10px;padding:12px 14px;background:#fff;line-height:1.55;}
.h33-lib-master{margin-top:18px;}
.h33-lib-master h4{margin:0 0 8px;font-size:13px;color:#7a7a8c;}
.h33-lib-master-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.h33-lib-master-card{display:flex;flex-direction:column;gap:2px;text-align:left;padding:12px;border:1px solid var(--h33-border,#e6e6ef);border-radius:10px;background:#fff;cursor:pointer;}
.h33-lib-master-card:hover{border-color:#6d1a86;}

/* Grow → Social connection management (Phase 4L.4) */
.h33-social-meta{font-size:12px;color:#6a6a7c;margin:2px 0 8px;}
.h33-social-actions{margin-top:auto;}
.h33-social-note{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:12px;background:#eef0ff;border:1px solid #d7dcff;color:#3a3a52;line-height:1.5;}
.h33-social-note strong{color:#2b2b39;}

/* Today status pill — real 3-state tone (B/#2). Not infra health. */
.h33-workspace-status-pill[data-tone="ontrack"] .h33-workspace-status-dot{background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.h33-workspace-status-pill[data-tone="attention"] .h33-workspace-status-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.18);}
.h33-workspace-status-pill[data-tone="critical"] .h33-workspace-status-dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2);}
.h33-workspace-status-pill[data-tone="attention"] strong{color:#b7791f;}
.h33-workspace-status-pill[data-tone="critical"] strong{color:#c0392b;}

/* Clickable status pill + attention breakdown popover (#28) */
.h33-workspace-status-wrap{position:relative;}
.h33-workspace-status-pill{font:inherit;text-align:left;cursor:default;}
.h33-workspace-status-pill.is-clickable{cursor:pointer;transition:box-shadow .15s ease,transform .15s ease;}
.h33-workspace-status-pill.is-clickable:hover{box-shadow:var(--h33-shadow-medium,0 6px 18px rgba(30,34,72,.12));}
.h33-workspace-status-pill.is-clickable:focus-visible{outline:2px solid #6d5ce0;outline-offset:2px;}
.h33-status-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.5;margin-left:2px;transition:transform .18s ease;}
.h33-status-caret.is-open{transform:rotate(-135deg);}
.h33-status-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:260px;padding:6px;border-radius:14px;background:var(--h33-surface,#fff);border:1px solid rgba(114,125,177,.16);box-shadow:0 14px 34px rgba(30,34,72,.16);display:flex;flex-direction:column;gap:2px;}
.h33-status-pop-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:transparent;color:var(--h33-text,#1f2340);font:600 13px/1.3 Poppins,sans-serif;text-align:left;cursor:pointer;text-decoration:none;}
.h33-status-pop-row:hover{background:rgba(109,92,224,.08);}
.h33-status-pop-arrow{color:var(--h33-text-muted,#7b7f9a);font-size:16px;line-height:1;}

/* Needs Attention rows — every row carries a next action (E5) */
.h33-ch-attn-row{flex-wrap:wrap;gap:8px 10px;}
.h33-ch-attn-cta{margin-left:auto;white-space:nowrap;text-decoration:none;}