:root {
    --cea-primary: #153b50;
    --cea-accent: #f59e0b;
    --cea-success: #1f8a70;
    --cea-soft: #eef4f7;
    --cea-text: #1d2939;
    --mesh-bg: #07111f;
    --mesh-panel: #0f1d33;
    --mesh-panel-soft: rgba(15, 29, 51, 0.72);
    --mesh-cyan: #39d0ff;
    --mesh-blue: #4f7cff;
    --mesh-magenta: #ff4fd8;
    --mesh-lime: #8ef7a8;
    --mesh-amber: #ffba42;
}

body {
    background: linear-gradient(180deg, #f7fafc 0%, #edf3f8 100%);
    color: var(--cea-text);
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.admin-body {
    background:
        radial-gradient(circle at 12% 0%, rgba(57, 208, 255, 0.2), transparent 28%),
        radial-gradient(circle at 88% 0%, rgba(255, 79, 216, 0.18), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(255, 186, 66, 0.12), transparent 26%),
        linear-gradient(180deg, #07111f 0%, #0b1730 44%, #0f2140 100%);
    color: #d7e4f2;
}

.admin-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 88%);
    opacity: 0.4;
}

.admin-shell-wrap {
    position: relative;
    z-index: 1;
}

main > .container {
    max-width: 1220px;
}

.navbar-brand,
.sidebar-brand {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.meshmind-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.meshmind-logo-mark {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    flex: 0 0 2.75rem;
}

.meshmind-logo-mark svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(57, 208, 255, 0.22));
}

.meshmind-logo-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(57, 208, 255, 0.18));
}

.meshmind-logo-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.meshmind-logo-title {
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.meshmind-logo-tag {
    margin-top: 0.2rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.meshmind-logo.is-light .meshmind-logo-title {
    color: #08111d;
}

.meshmind-logo.is-light .meshmind-logo-tag {
    color: #56687e;
}

.meshmind-logo.is-dark .meshmind-logo-title {
    color: #ffffff;
}

.meshmind-logo.is-dark .meshmind-logo-tag {
    color: rgba(255, 255, 255, 0.68);
}

.meshmind-navbar-logo .meshmind-logo-mark {
    width: 2.5rem;
    height: 2.5rem;
    flex-basis: 2.5rem;
}

.meshmind-sidebar-logo .meshmind-logo-title {
    font-size: 1rem;
}

.meshmind-sidebar-logo .meshmind-logo-tag {
    font-size: 0.62rem;
}

.hero-panel,
.app-card,
.workspace-shell,
.admin-shell,
.metric-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(21, 59, 80, 0.08);
}

.metric-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.metric-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    font-size: 1rem;
}

.hero-panel {
    background: linear-gradient(135deg, rgba(21, 59, 80, 0.95), rgba(31, 138, 112, 0.85));
    color: #fff;
}

.sidebar {
    min-height: 100vh;
    background: linear-gradient(180deg, #163346 0%, #112735 100%);
}

.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    border-radius: 12px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.admin-shell-grid {
    min-height: 100vh;
}

.admin-sidebar {
    position: relative;
    background:
        radial-gradient(circle at top left, rgba(57, 208, 255, 0.24), transparent 30%),
        radial-gradient(circle at 80% 12%, rgba(255, 79, 216, 0.18), transparent 24%),
        linear-gradient(180deg, rgba(5, 15, 28, 0.98) 0%, rgba(10, 24, 46, 0.98) 42%, rgba(13, 30, 57, 0.98) 100%);
    border-right: 1px solid rgba(104, 169, 255, 0.18);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.admin-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.02));
}

.admin-sidebar-user {
    position: relative;
    z-index: 1;
    padding: 1rem;
    border: 1px solid rgba(115, 190, 255, 0.22);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(255, 79, 216, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(19, 39, 70, 0.94), rgba(11, 24, 46, 0.92));
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22);
}

.admin-sidebar-user-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #7fe8ff;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.admin-sidebar-user-name {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.02rem;
}

.admin-sidebar-user-role {
    margin-top: 0.3rem;
    color: rgba(215, 228, 242, 0.72);
    font-size: 0.84rem;
}

.admin-nav {
    position: relative;
    z-index: 1;
}

.admin-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    font-weight: 700;
    color: rgba(228, 239, 250, 0.88);
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.18s ease;
}

.admin-nav .nav-link i {
    width: 1.2rem;
    text-align: center;
    color: #7fe8ff;
}

.admin-nav .nav-link.active,
.admin-nav .nav-link:hover {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(79, 124, 255, 0.28), rgba(57, 208, 255, 0.18) 58%, rgba(255, 79, 216, 0.14));
    border-color: rgba(130, 195, 255, 0.28);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 16px 28px rgba(7, 18, 36, 0.3);
}

.admin-main {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(57, 208, 255, 0.12), transparent 22%),
        radial-gradient(circle at 18% 0%, rgba(255, 79, 216, 0.08), transparent 20%),
        linear-gradient(180deg, rgba(8, 16, 28, 0.96), rgba(10, 21, 39, 0.96));
}

.admin-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(122, 191, 255, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(57, 208, 255, 0.12), transparent 24%),
        linear-gradient(180deg, rgba(16, 31, 54, 0.9), rgba(10, 22, 40, 0.92));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
}

.admin-topbar-kicker {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #7fe8ff;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.admin-topbar-title {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.1rem);
    font-weight: 800;
    color: #f8fbff;
}

.admin-topbar-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 186, 66, 0.24);
    background: linear-gradient(90deg, rgba(36, 24, 6, 0.82), rgba(56, 34, 6, 0.7));
    color: #ffe6ad;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.admin-status-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #ffba42;
    box-shadow: 0 0 0 6px rgba(255, 186, 66, 0.16);
}

.admin-content {
    color: #d7e4f2;
}

.admin-content .text-muted,
.admin-content .small.text-muted {
    color: #8ea3bc !important;
}

.admin-content .app-card,
.admin-content .metric-card,
.admin-content .member-tile {
    border: 1px solid rgba(120, 191, 255, 0.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at top right, rgba(57, 208, 255, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(19, 36, 62, 0.97), rgba(12, 26, 46, 0.97));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    color: #d7e4f2;
}

.admin-content .app-card h1,
.admin-content .app-card h2,
.admin-content .app-card h3,
.admin-content .metric-card,
.admin-content .display-6,
.admin-content .member-tile h2 {
    color: #f8fbff;
}

.admin-content .form-control,
.admin-content .form-select,
.admin-content textarea {
    background: rgba(7, 15, 28, 0.88);
    border-color: rgba(120, 191, 255, 0.22);
    color: #f8fbff;
}

.admin-content .form-control:focus,
.admin-content .form-select:focus,
.admin-content textarea:focus {
    background: rgba(8, 16, 28, 0.94);
    color: #ffffff;
    border-color: rgba(57, 208, 255, 0.72);
    box-shadow: 0 0 0 0.25rem rgba(57, 208, 255, 0.16);
}

.admin-content .table {
    color: #d7e4f2;
}

.admin-content .table > :not(caption) > * > * {
    background: transparent;
    border-color: rgba(140, 186, 255, 0.08);
}

.admin-content .btn-primary {
    background: linear-gradient(135deg, #4f7cff 0%, #39d0ff 55%, #ff4fd8 100%);
    border-color: transparent;
    box-shadow: 0 18px 32px rgba(57, 208, 255, 0.22);
}

.admin-content .btn-outline-primary,
.admin-content .btn-outline-secondary,
.admin-content .btn-outline-danger,
.admin-content .btn-outline-dark {
    border-color: rgba(120, 191, 255, 0.24);
    color: #e6f0fb;
}

.admin-content .btn-outline-primary:hover,
.admin-content .btn-outline-secondary:hover,
.admin-content .btn-outline-danger:hover,
.admin-content .btn-outline-dark:hover {
    background: linear-gradient(90deg, rgba(79, 124, 255, 0.16), rgba(57, 208, 255, 0.12));
    color: #ffffff;
}

.workspace-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

.workspace-redesign {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.98));
}

.workspace-header {
    display: flex;
    justify-content: space-between;
    gap: 1.25rem;
    align-items: flex-start;
}

.workspace-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.workspace-inline-form {
    margin: 0;
}

.workspace-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4f7cff;
    margin-bottom: 0.35rem;
}

.workspace-statusbar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.workspace-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: #f8fbff;
    border: 1px solid #dbe7f4;
    color: #153b50;
    font-size: 0.92rem;
    font-weight: 700;
}

.workspace-status-pill i {
    color: #4f7cff;
}

.workspace-status-pill.workspace-status-wide {
    font-weight: 600;
}

.workspace-status-pill.is-offline {
    background: #fff5f5;
    border-color: #f0c8c8;
    color: #9b2c2c;
}

.workspace-status-pill.is-offline i {
    color: #dc2626;
}

.workspace-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    gap: 1.25rem;
    align-items: start;
}

.workspace-main-grid.workspace-grid-stack {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-main-grid.workspace-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-main-grid.workspace-grid-dual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-main-grid.workspace-grid-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-panel {
    border: 1px solid #dde7ef;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
    padding: 1.25rem;
}

.workspace-panel.workspace-panel-full {
    grid-column: 1 / -1;
}

.workspace-panel-header {
    margin-bottom: 1rem;
}

.workspace-panel-header-stack {
    display: grid;
    gap: 1rem;
}

.workspace-panel-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.workspace-panel-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.workspace-panel-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.workspace-panel-note {
    color: #667085;
    font-size: 0.92rem;
    margin-top: 0.2rem;
}

.workspace-editor-shell {
    border: 1px solid #dbe7f4;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.workspace-editor-toolbar {
    border-bottom: 1px solid #dbe7f4;
    background: linear-gradient(180deg, #f9fbff 0%, #eef4fb 100%);
}

.workspace-editor-shell .ql-toolbar.ql-snow {
    border: 0;
    padding: 0.8rem 0.85rem;
    font-family: inherit;
}

.workspace-editor {
    min-height: 420px;
}

.workspace-editor-shell .ql-container.ql-snow {
    border: 0;
    font-family: inherit;
}

.workspace-editor-shell .ql-editor {
    min-height: 420px;
    padding: 1rem 1.1rem;
    line-height: 1.7;
    color: #0f172a;
    font-size: 1rem;
}

.workspace-editor-shell .ql-editor.ql-blank::before {
    color: #94a3b8;
    font-style: normal;
    left: 1.1rem;
}

.workspace-editor-shell .ql-editor p,
.workspace-editor-shell .ql-editor div,
.workspace-editor-shell .ql-editor ul,
.workspace-editor-shell .ql-editor ol,
.workspace-editor-shell .ql-editor blockquote {
    margin-bottom: 0.9rem;
}

.workspace-editor-shell .ql-editor ul,
.workspace-editor-shell .ql-editor ol {
    padding-left: 1.3rem;
}

.workspace-editor-shell .ql-editor blockquote {
    padding-left: 1rem;
    border-left: 3px solid #93c5fd;
    color: #334155;
}

.workspace-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.workspace-sticky-section {
    width: 100%;
}

.workspace-screen-panel .admin-drawing-preview {
    min-height: 100%;
}

.workspace-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.workspace-screen-alert {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid #f0d59f;
    background: linear-gradient(180deg, #fff8e8 0%, #fff2cc 100%);
    color: #7a4a11;
    font-size: 0.93rem;
    font-weight: 600;
}

.workspace-screen-fallback {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.workspace-screen-guide,
.workspace-screen-preview-card {
    border: 1px solid #dbe7f4;
    border-radius: 18px;
    background: linear-gradient(180deg, #f9fbff 0%, #f4f8fd 100%);
    padding: 1rem;
}

.workspace-screen-guide-title,
.workspace-screen-preview-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.workspace-screen-guide-copy {
    color: #667085;
    margin-top: 0.35rem;
    margin-bottom: 0.9rem;
}

.workspace-screen-steps {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.workspace-screen-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #334155;
    font-weight: 600;
}

.workspace-screen-step-no {
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #0ea5e9;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 1.6rem;
}

.workspace-screen-device-note {
    margin-bottom: 1rem;
}

.workspace-screen-tools {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.workspace-screen-preview-card {
    display: flex;
    flex-direction: column;
}

.workspace-screen-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 210px;
    margin-top: 0.9rem;
    border-radius: 14px;
    border: 1px dashed #bfd2e8;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    color: #667085;
    text-align: center;
    padding: 1rem;
}

.workspace-screen-preview-image {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 14px;
    margin-top: 0.9rem;
    background: #0f172a;
    border: 1px solid #d7e1ec;
}

.workspace-empty-state {
    text-align: center;
    padding: 2.25rem 1.5rem;
    background:
        radial-gradient(circle at top, rgba(79, 124, 255, 0.08), transparent 42%),
        #ffffff;
}

.workspace-sticky-board {
    position: relative;
    min-height: 360px;
    padding: 1.1rem;
    border-radius: 22px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.96) 0, rgba(255, 255, 255, 0.72) 18%, transparent 42%),
        linear-gradient(135deg, rgba(191, 219, 254, 0.18) 0%, transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 48%, #eef4fb 100%);
    border: 1px solid #d7e3ef;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(203, 213, 225, 0.38),
        0 20px 40px rgba(15, 23, 42, 0.08);
}

.workspace-panel:fullscreen,
.workspace-panel.is-fullscreen-fallback {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1.5rem;
    border-radius: 0;
    overflow: auto;
    background: #ffffff;
}

.workspace-panel:fullscreen::backdrop {
    background: rgba(15, 23, 42, 0.78);
}

.workspace-writing-panel:fullscreen .workspace-editor,
.workspace-writing-panel.is-fullscreen-fallback .workspace-editor {
    min-height: calc(100vh - 210px);
}

.workspace-canvas-panel:fullscreen .canvas-stage-wrap,
.workspace-canvas-panel.is-fullscreen-fallback .canvas-stage-wrap {
    min-height: calc(100vh - 280px);
}

.workspace-canvas-panel:fullscreen #workspaceCanvas,
.workspace-canvas-panel.is-fullscreen-fallback #workspaceCanvas {
    height: calc(100vh - 280px) !important;
}

.workspace-screen-panel:fullscreen .admin-drawing-preview,
.workspace-screen-panel.is-fullscreen-fallback .admin-drawing-preview {
    min-height: calc(100vh - 280px);
}

.workspace-screen-panel:fullscreen #screenShareVideo,
.workspace-screen-panel.is-fullscreen-fallback #screenShareVideo {
    max-height: calc(100vh - 320px) !important;
}

.workspace-sticky-section:fullscreen .workspace-sticky-board,
.workspace-sticky-section.is-fullscreen-fallback .workspace-sticky-board {
    min-height: calc(100vh - 240px);
}

.workspace-sticky-empty {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(255, 247, 230, 0.92);
    padding: 1.5rem;
}

.workspace-sticky-empty-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.workspace-sticky-empty-copy {
    max-width: 28rem;
    line-height: 1.6;
}

.workspace-sticky-card {
    position: absolute;
    width: 210px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    padding: 0.9rem;
    border-radius: 8px 8px 14px 10px;
    background: linear-gradient(180deg, #fff5b7 0%, #ffe68b 100%);
    border: 1px solid rgba(180, 137, 42, 0.2);
    box-shadow:
        0 14px 18px rgba(152, 120, 36, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: rotate(-1.2deg);
    cursor: grab;
    user-select: none;
    touch-action: none;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.workspace-sticky-card:nth-child(2n) {
    transform: rotate(1deg);
    background: linear-gradient(180deg, #d9ffd0 0%, #baf2b1 100%);
}

.workspace-sticky-card:nth-child(3n) {
    transform: rotate(-0.4deg);
    background: linear-gradient(180deg, #ffd9f1 0%, #ffc1e6 100%);
}

.workspace-sticky-card:nth-child(4n) {
    transform: rotate(1.4deg);
    background: linear-gradient(180deg, #d8f4ff 0%, #bfe7ff 100%);
}

.workspace-sticky-card::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.workspace-sticky-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workspace-sticky-card-title {
    margin-top: 0.45rem;
    margin-bottom: 0.7rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(58, 43, 18, 0.76);
}

.workspace-sticky-delete {
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: rgba(109, 40, 40, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.9rem;
    transition: background 0.18s ease, transform 0.18s ease;
}

.workspace-sticky-delete:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

.workspace-sticky-input {
    flex: 1;
    resize: none;
    border: 0;
    background: transparent;
    box-shadow: none !important;
    padding: 0;
    font-weight: 600;
    line-height: 1.55;
    color: #3d2f16;
    user-select: text;
}

.workspace-sticky-input:focus {
    background: transparent;
}

.workspace-sticky-card.is-dragging {
    cursor: grabbing;
    z-index: 5;
    transform: rotate(0deg) scale(1.02);
    box-shadow:
        0 22px 28px rgba(152, 120, 36, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.workspace-canvas-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) 140px 96px 160px auto;
    gap: 0.85rem;
    align-items: end;
}

.workspace-field-small {
    min-width: 0;
}

.workspace-field-medium {
    min-width: 0;
}

.workspace-field-actions {
    display: flex;
    gap: 0.6rem;
    align-items: end;
}

.workspace-tool-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.workspace-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #d8e3eb;
    color: #475467;
    font-size: 0.9rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.workspace-tool-btn i {
    font-size: 1rem;
}

.workspace-tool-btn.is-active {
    background: linear-gradient(135deg, rgba(57, 208, 255, 0.14), rgba(79, 124, 255, 0.12));
    border-color: rgba(79, 124, 255, 0.32);
    color: #153b50;
    box-shadow: 0 10px 22px rgba(79, 124, 255, 0.12);
}

.canvas-stage-wrap {
    height: 420px;
    background: #fff;
    border: 1px solid #d7e2ea;
    border-radius: 16px;
    overflow: hidden;
}

#workspaceCanvas.canvas-mode-pen {
    cursor: crosshair;
}

#workspaceCanvas.canvas-mode-eraser {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg transform='rotate(-22 14 14)'%3E%3Crect x='6' y='8' width='13' height='10' rx='2.2' fill='%23f8fafc' stroke='%23153b50' stroke-width='1.4'/%3E%3Crect x='17.5' y='8.8' width='4.5' height='8.4' rx='1.2' fill='%23ff6b6b' stroke='%23153b50' stroke-width='1.1'/%3E%3Cpath d='M6 18h16' stroke='%23153b50' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") 6 20, cell;
}

.member-tile {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #dfe7ee;
    padding: 0.85rem;
    height: 100%;
}

.member-canvas-preview {
    background: repeating-linear-gradient(
        45deg,
        #f8fafc,
        #f8fafc 10px,
        #f1f5f9 10px,
        #f1f5f9 20px
    );
    min-height: 110px;
    border-radius: 12px;
    border: 1px solid #d7e2ea;
    overflow: auto;
}

.member-text-preview {
    min-height: 110px;
    max-height: 110px;
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.45;
}

.member-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #667085;
    margin-bottom: 0.5rem;
}

.member-card-compact .member-tile {
    padding: 0.7rem;
}

.member-card-compact .member-tile h2 {
    font-size: 1rem;
}

.member-card-compact .small.text-muted {
    font-size: 0.76rem;
}

.member-card-compact .member-presence-badge {
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
}

.member-presence-badge-compact {
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
}

.admin-openai-theme .admin-content .badge.text-bg-light.event-status-draft {
    color: #d97706 !important;
}

.admin-openai-theme .admin-content .badge.text-bg-light.event-status-active {
    color: #16a34a !important;
}

.admin-openai-theme .admin-content .badge.text-bg-light.event-status-closed {
    color: #64748b !important;
}

.admin-openai-theme .admin-content .badge.text-bg-light.event-status-finalized {
    color: #2563eb !important;
}

.member-card-compact .member-canvas-preview {
    min-height: 72px;
}

.member-card-compact .member-text-preview {
    min-height: 72px;
    max-height: 72px;
    font-size: 0.8rem;
    line-height: 1.35;
}

.member-card-compact .admin-drawing-canvas {
    height: 128px;
}

.member-card-compact .admin-drawing-preview {
    padding: 0.35rem;
}

.member-card-compact .member-section-label {
    font-size: 0.68rem;
    margin-bottom: 0.35rem;
}

.member-card-compact .member-module-header {
    gap: 0.5rem;
}

.member-card-compact .admin-module-expand-btn {
    padding: 0.18rem 0.45rem;
    font-size: 0.72rem;
}

.member-card-compact .sticky-note {
    padding: 0.55rem 0.65rem;
    font-size: 0.8rem;
}

.member-card-compact .admin-sticky-notes {
    gap: 0.35rem;
}

.monitor-member-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.15rem 0 0.2rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.member-module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-drawing-preview {
    background: #fff;
    border: 1px solid #d7e2ea;
    border-radius: 12px;
    padding: 0.5rem;
}

.admin-drawing-canvas {
    width: 100%;
    height: 220px;
    display: block;
    background: #fff;
    border-radius: 8px;
}

.admin-sticky-notes {
    display: grid;
    gap: 0.5rem;
}

.admin-screen-frame {
    width: 100%;
    display: block;
    border-radius: 8px;
    background: #ffffff;
    max-height: 280px;
    object-fit: contain;
}

.admin-screen-frame-wrap {
    position: relative;
}

.admin-screen-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: rgba(255, 186, 66, 0.14);
    border: 1px solid rgba(255, 186, 66, 0.3);
    color: #f2c66f;
    font-size: 0.92rem;
    line-height: 1.35;
}

.admin-screen-warning i {
    font-size: 1rem;
    color: #ffba42;
}


.help-request-list {
    display: grid;
    gap: 0.85rem;
}

.help-request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    background: rgba(255, 251, 235, 0.75);
}

.help-request-name {
    font-weight: 700;
    color: #111827;
}

.help-request-meta {
    font-size: 0.88rem;
    color: #6b7280;
}

.member-tile.is-help-highlighted {
    outline: 3px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12), 0 18px 40px rgba(15, 23, 42, 0.12);
    transition: outline-color 0.2s ease, box-shadow 0.2s ease;
}

.screen-share-summary-card {
    border: 1px solid rgba(21, 59, 80, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(245, 249, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
    padding: 0.85rem 0.95rem;
}

.screen-share-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.screen-share-summary-meta {
    color: #6c7b88;
    font-size: 0.78rem;
}

.screen-share-summary-body {
    color: #153b50;
    font-size: 0.9rem;
    line-height: 1.55;
}

.admin-session-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 767px) {
    .screen-share-summary-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

.admin-screen-expand-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    opacity: 0.95;
}

.admin-screen-frame-modal {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    transform-origin: top left;
    transition: transform 0.16s ease;
    display: block;
    object-fit: contain;
    image-rendering: auto;
}

.admin-screen-modal-tools {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
}

.admin-screen-modal-stage {
    overflow: auto;
    height: calc(100vh - 120px);
    max-height: none;
    border-radius: 16px;
    background: #ffffff;
    padding: 0;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.admin-screen-modal-stage.is-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-screen-modal-stage.is-centered .admin-screen-frame-modal {
    transform-origin: center center;
}

.admin-screen-modal-stage.is-dragging {
    cursor: grabbing;
}

.admin-module-modal-body {
    padding: 0.5rem;
}

.admin-module-modal-body .member-canvas-preview,
.admin-module-modal-body .admin-drawing-preview {
    min-height: calc(100vh - 180px);
    max-height: none;
}

.admin-module-modal-body .admin-drawing-canvas {
    height: calc(100vh - 220px);
}

.admin-module-modal-body .admin-sticky-notes {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.admin-module-modal-body .sticky-note {
    min-height: 140px;
}

.monitor-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.monitor-status-filter {
    min-width: 5.8rem;
    min-height: 5rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 14px;
    border: 1px solid rgba(104, 169, 255, 0.24);
    background: rgba(12, 26, 49, 0.9);
    color: rgba(215, 228, 242, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    padding: 0.75rem 0.7rem;
}

.monitor-status-filter:hover {
    transform: translateY(-1px);
    border-color: rgba(57, 208, 255, 0.45);
    color: #ffffff;
}

.monitor-status-filter.is-active {
    color: #ffffff;
    border-color: rgba(111, 204, 255, 0.32);
    background:
        radial-gradient(circle at top right, rgba(57, 208, 255, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(15, 39, 71, 0.98), rgba(9, 24, 45, 0.98));
    box-shadow: 0 14px 26px rgba(4, 13, 24, 0.34);
}

.monitor-status-filter i {
    font-size: 1.05rem;
}

.monitor-status-filter span {
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
}

.admin-screen-modal-stage::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.modal,
#screenShareModal,
#moduleExpandModal {
    z-index: 2000;
}

body > .modal-backdrop.show {
    z-index: 1990;
}

.event-wizard-shell {
    display: grid;
    gap: 1.5rem;
}

.event-wizard-stage {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.event-wizard-sidebar,
.event-wizard-card {
    border: 1px solid rgba(215, 226, 234, 0.92);
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,252,0.98));
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.08);
}

.event-wizard-sidebar {
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.event-wizard-kicker,
.event-wizard-panel-kicker,
.event-wizard-sidebar-label,
.event-wizard-review-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f8d73;
}

.event-wizard-title {
    margin: 0.8rem 0 0.65rem;
    font-size: 2rem;
    line-height: 1.04;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.event-wizard-copy {
    margin: 0;
    color: #526072;
    line-height: 1.6;
}

.event-wizard-progress {
    display: grid;
    gap: 0.85rem;
    margin: 1.5rem 0;
}

.event-wizard-step {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    width: 100%;
    border: 1px solid #d7e2ea;
    border-radius: 18px;
    background: #fff;
    color: #0f172a;
    padding: 0.85rem 0.95rem;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.event-wizard-step:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.event-wizard-step.is-active {
    border-color: rgba(16, 163, 127, 0.32);
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.14), transparent 45%),
        linear-gradient(180deg, #ffffff, #f4fbf8);
    box-shadow: 0 18px 34px rgba(16, 163, 127, 0.12);
}

.event-wizard-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: #e9f3f7;
    font-weight: 800;
    color: #153b50;
}

.event-wizard-step.is-active .event-wizard-step-index {
    background: #0f8d73;
    color: #fff;
}

.event-wizard-step-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-wizard-step-copy strong {
    font-size: 0.98rem;
}

.event-wizard-step-copy span {
    font-size: 0.82rem;
    color: #617184;
}

.event-wizard-sidebar-card,
.event-wizard-review-card,
.event-wizard-toggle-card,
.event-wizard-group-card {
    border: 1px solid #d7e2ea;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    padding: 1rem 1.1rem;
}

.event-wizard-sidebar-name,
.event-wizard-review-title {
    margin-top: 0.45rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}

.event-wizard-sidebar-meta,
.event-wizard-sidebar-list {
    margin-top: 0.35rem;
    color: #617184;
}

.event-wizard-card {
    padding: 1.5rem;
}

.event-wizard-form {
    display: grid;
    gap: 1.35rem;
}

.event-wizard-panel {
    display: none;
    gap: 1rem;
}

.event-wizard-panel.is-active {
    display: grid;
}

.event-wizard-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1rem;
    align-items: end;
}

.event-wizard-panel-title {
    margin: 0.35rem 0 0;
    font-size: 1.65rem;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: #0f172a;
}

.event-wizard-panel-copy {
    color: #5a687a;
    line-height: 1.6;
}

.event-type-tab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.event-type-tab-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    min-height: 132px;
    padding: 1rem 1.05rem;
    border: 1px solid #d7e2ea;
    border-radius: 20px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 252, 0.98));
    color: #0f172a;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.event-type-tab-card:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 163, 127, 0.28);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.event-type-tab-card.is-active {
    border-color: rgba(16, 163, 127, 0.38);
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.15), transparent 46%),
        linear-gradient(180deg, #ffffff, #f2fbf7);
    box-shadow: 0 20px 36px rgba(16, 163, 127, 0.14);
}

.event-type-tab-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.event-type-tab-copy {
    color: #5f7082;
    font-size: 0.92rem;
    line-height: 1.5;
}

.quick-poll-kicker {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0f8d73;
}

.quick-poll-hero,
.quick-poll-player-shell {
    display: grid;
    gap: 1rem;
}

.quick-poll-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.quick-poll-hero-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.quick-poll-stat-card,
.quick-poll-player-card,
.quick-poll-player-panel,
.quick-poll-option-input-card {
    border: 1px solid #d7e2ea;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
}

.quick-poll-stat-card {
    min-width: 120px;
    padding: 0.9rem 1rem;
    display: grid;
    gap: 0.2rem;
}

.quick-poll-stat-card span {
    color: #64748b;
    font-size: 0.82rem;
}

.quick-poll-stat-card strong {
    color: #0f172a;
    font-size: 1.1rem;
}

.quick-poll-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.quick-poll-option-input-card {
    padding: 1rem;
}

.quick-poll-results-list,
.quick-poll-player-results {
    display: grid;
    gap: 0.9rem;
}

.quick-poll-result-row,
.quick-poll-player-result {
    display: grid;
    gap: 0.2rem;
}

.quick-poll-player-topbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.quick-poll-player-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.quick-poll-player-card,
.quick-poll-player-panel {
    padding: 1.25rem;
}

.quick-poll-player-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    background: rgba(15, 141, 115, 0.12);
    color: #0f8d73;
    font-weight: 700;
    margin-bottom: 0.85rem;
}

.quick-poll-player-copy {
    color: #5f7082;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.quick-poll-player-options {
    display: grid;
    gap: 0.85rem;
}

.quick-poll-player-option {
    width: 100%;
    border: 1px solid #d7e2ea;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f5faf8);
    color: #0f172a;
    font-weight: 700;
    text-align: left;
    padding: 1rem 1.1rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quick-poll-player-option:hover {
    transform: translateY(-1px);
    border-color: rgba(16, 163, 127, 0.34);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.quick-poll-player-metric {
    margin-top: 0.55rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}

.event-wizard-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.event-wizard-module-card {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    border: 1px solid #d7e2ea;
    border-radius: 20px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.96);
}

.event-wizard-module-copy {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.event-wizard-module-copy strong {
    color: #0f172a;
}

.event-wizard-module-copy span {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.5;
}

.event-wizard-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.event-wizard-review-list {
    margin: 0.75rem 0 0;
    padding-left: 1rem;
    color: #526072;
}

.event-wizard-review-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.event-wizard-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.38rem 0.72rem;
    background: rgba(21, 59, 80, 0.08);
    color: #153b50;
    font-size: 0.86rem;
    font-weight: 700;
}

.event-wizard-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5edf2;
}

.event-wizard-group-pill {
    border: 1px solid #d7e2ea;
    border-radius: 18px;
    background: #fff;
    padding: 0.9rem 1rem;
    height: 100%;
}

.event-wizard-group-switch {
    width: 3.2rem;
    height: 1.8rem;
}

@media (max-width: 1199px) {
    .event-wizard-stage {
        grid-template-columns: 1fr;
    }

    .event-wizard-sidebar {
        position: static;
    }
}

@media (max-width: 991px) {
    .event-wizard-panel-head,
    .event-wizard-review-grid,
    .event-wizard-module-grid {
        grid-template-columns: 1fr;
    }

    .quick-poll-player-stage,
    .quick-poll-options-grid,
    .quick-poll-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .event-wizard-card,
    .event-wizard-sidebar {
        padding: 1rem;
        border-radius: 22px;
    }

    .event-wizard-title {
        font-size: 1.55rem;
    }

    .event-wizard-footer {
        flex-wrap: wrap;
    }
}

.sticky-note {
    background: #fff7c2;
    border-left: 4px solid var(--cea-accent);
    padding: 0.75rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    color: #111827;
}

.affinity-stat-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
}

.affinity-stat-card {
    border: 1px solid #d7e2ea;
    border-radius: 16px;
    padding: 0.9rem 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    min-width: 0;
}

.affinity-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
}

.affinity-stat-label {
    font-size: 0.76rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.affinity-main {
    display: grid;
    gap: 1rem;
}

.affinity-controls-bar {
    width: 100%;
}

.affinity-share-card {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #d7e2ea;
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.affinity-share-kicker {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0f766e;
    margin-bottom: 0.35rem;
}

.affinity-share-link-wrap {
    padding: 0.75rem 0.85rem;
    border: 1px solid #d7e2ea;
    border-radius: 16px;
    background: #ffffff;
}

.affinity-share-link {
    color: #0f172a;
    word-break: break-all;
    text-decoration: none;
}

.affinity-share-qr {
    text-align: center;
}

.affinity-share-qr-image {
    width: 100%;
    max-width: 160px;
    border: 1px solid #d7e2ea;
    border-radius: 18px;
    padding: 0.45rem;
    background: #ffffff;
}

.affinity-controls-header {
    display: flex;
    flex-direction: column;
}

.affinity-controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.affinity-controls-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.affinity-board-card {
    min-height: 520px;
}

.affinity-board {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.affinity-cluster-grid {
    display: flex;
    gap: 1rem;
    min-height: 440px;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    align-items: stretch;
}

.affinity-column {
    border: 1px solid #d7e2ea;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.affinity-intake-column {
    min-width: 0;
}

.affinity-cluster-column {
    width: 320px;
    flex: 0 0 320px;
}

.affinity-column-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    cursor: move;
}

.affinity-column-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.affinity-cluster-head-main {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
}

.affinity-cluster-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.affinity-cluster-title-input {
    border: 0;
    box-shadow: none !important;
    padding-left: 0;
    font-weight: 700;
    background: transparent;
}

.affinity-cluster-title-input:focus {
    background: transparent;
}

.affinity-note-list {
    min-height: 320px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.affinity-note-card,
.affinity-note-placeholder {
    border-radius: 16px;
    padding: 0.9rem 0.95rem;
}

.affinity-note-card {
    background: #fff7c2;
    border-left: 5px solid #f59e0b;
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.14);
    cursor: grab;
}

.affinity-note-card:active {
    cursor: grabbing;
}

.affinity-note-text {
    color: #111827;
    font-weight: 700;
    line-height: 1.4;
    white-space: pre-wrap;
}

.affinity-note-meta {
    margin-top: 0.55rem;
    font-size: 0.8rem;
    color: #475569;
}

.affinity-vote-row {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.affinity-vote-pill,
.affinity-cluster-votes {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    color: #991b1b;
    font-size: 0.78rem;
    font-weight: 800;
}

.affinity-cluster-votes {
    background: rgba(14, 165, 233, 0.12);
    color: #0f172a;
}

.affinity-vote-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #ef4444;
    display: inline-block;
}

.affinity-vote-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.affinity-vote-btn {
    min-width: 32px;
    padding: 0.2rem 0.45rem;
    line-height: 1.1;
}

.affinity-note-placeholder {
    border: 2px dashed #94a3b8;
    background: rgba(148, 163, 184, 0.12);
    min-height: 72px;
}

.affinity-column-placeholder {
    width: 320px;
    flex: 0 0 320px;
    border: 2px dashed #94a3b8;
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.12);
}

.affinity-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.affinity-analysis-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.affinity-analysis-panel {
    height: 100%;
}

.affinity-analysis-panel-wide {
    grid-column: 1 / -1;
}

.affinity-analysis-card,
.affinity-cooccurrence-card {
    border: 1px solid #d7e2ea;
    border-radius: 18px;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.affinity-analysis-card-featured {
    grid-column: 1 / -1;
    border-color: rgba(15, 118, 110, 0.22);
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.1), transparent 28%),
        linear-gradient(135deg, #f8fffd 0%, #eefaf7 100%);
    box-shadow: 0 18px 44px rgba(15, 118, 110, 0.08);
}

.affinity-analysis-card-featured .affinity-analysis-title {
    color: #0f766e;
}

.affinity-analysis-card-featured .affinity-analysis-text {
    font-size: 1.02rem;
    color: #134e4a;
}

#affinityDecisionSignals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.affinity-analysis-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    color: #0f172a;
}

.affinity-analysis-meta {
    font-size: 0.82rem;
    color: #64748b;
}

.affinity-analysis-label {
    margin-top: 0.85rem;
    margin-bottom: 0.35rem;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.affinity-analysis-text,
.affinity-analysis-sample {
    color: #334155;
    line-height: 1.5;
}

.affinity-analysis-sample {
    margin-top: 0.45rem;
    padding: 0.65rem 0.75rem;
    border-radius: 14px;
    background: rgba(255, 247, 194, 0.55);
}

.affinity-keyword-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.affinity-keyword-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0f172a;
    font-size: 0.8rem;
}

.affinity-frequency-list,
.affinity-cooccurrence-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.affinity-frequency-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}

.affinity-frequency-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.affinity-decision-note + .affinity-decision-note {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e2e8f0;
}

.affinity-decision-note-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

@media (max-width: 991px) {
    .affinity-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .affinity-board {
        grid-template-columns: 1fr;
    }

    .affinity-cluster-column,
    .affinity-column-placeholder {
        width: 280px;
        flex-basis: 280px;
    }

    .affinity-analysis-layout {
        grid-template-columns: 1fr;
    }

    .affinity-analysis-panel-wide {
        grid-column: auto;
    }

    .affinity-controls-row,
    .affinity-controls-actions {
        align-items: stretch;
    }

    .affinity-share-card {
        grid-template-columns: 1fr;
    }
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.member-presence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    margin-top: 0.2rem;
}

.member-presence-badge.status-online,
.member-presence-badge.status-active {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.member-presence-badge.status-idle {
    background: rgba(245, 158, 11, 0.16);
    color: #fbbf24;
}

.member-presence-badge.status-offline {
    background: rgba(239, 68, 68, 0.14);
    color: #f87171;
}

.member-presence-badge.status-submitted {
    background: rgba(59, 130, 246, 0.14);
    color: #60a5fa;
}

.status-online,
.status-active {
    background: #22c55e;
}


.status-idle {
    background: #f59e0b;
}

.status-offline {
    background: #ef4444;
}

.status-submitted {
    background: #2563eb;
}

.monitor-activity-graph {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.monitor-activity-card {
    border: 1px solid #d7e2ea;
    border-radius: 14px;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.monitor-activity-name {
    color: #101828;
    font-size: 0.95rem;
    font-weight: 700;
}

.monitor-activity-card-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
}

.monitor-activity-meta {
    color: #667085;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    min-height: 2.1rem;
}

.monitor-activity-bar-track {
    margin-top: 0.65rem;
    height: 10px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.monitor-activity-bar {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.monitor-activity-bar.status-online,
.monitor-activity-bar.status-active {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.monitor-activity-bar.status-idle {
    background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%);
}

.monitor-activity-bar.status-offline {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
}

.monitor-activity-value {
    color: #344054;
    font-size: 0.84rem;
    font-weight: 700;
    white-space: nowrap;
}

.live-monitor-action-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.live-monitor-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
    filter: saturate(1.04);
}

.live-monitor-action-finalize {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 52%, #60a5fa 100%);
    color: #ffffff;
}

.live-monitor-action-finalize:hover,
.live-monitor-action-finalize:focus {
    color: #ffffff;
}

.live-monitor-action-graph {
    background: linear-gradient(135deg, #7c3aed 0%, #9333ea 50%, #c084fc 100%);
    color: #ffffff;
}

.live-monitor-action-graph:hover,
.live-monitor-action-graph:focus {
    color: #ffffff;
}

.live-monitor-action-change {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #9a3412;
    box-shadow: 0 14px 28px rgba(234, 88, 12, 0.12);
}

.live-monitor-action-change:hover,
.live-monitor-action-change:focus {
    color: #7c2d12;
}

.live-monitor-events-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .live-monitor-events-head {
        align-items: stretch !important;
        flex-direction: column;
        gap: 0.9rem;
    }

    .live-monitor-events-actions {
        width: 100%;
        justify-content: stretch;
        gap: 0.65rem !important;
    }

    .live-monitor-events-actions .live-monitor-action-btn {
        flex: 1 1 calc(50% - 0.65rem);
        min-width: 0;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
        padding: 0.7rem 0.85rem;
    }
}

.marketing-hero {
    position: relative;
    padding: 2.5rem 0 1rem;
}

.marketing-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    align-items: center;
}

.marketing-copy {
    padding-right: 1rem;
}

.marketing-brand-lockup {
    margin-bottom: 1.1rem;
}

.meshmind-hero-logo .meshmind-logo-mark {
    width: 3rem;
    height: 3rem;
    flex-basis: 3rem;
}

.meshmind-hero-logo .meshmind-logo-title {
    font-size: 1.2rem;
}

.meshmind-hero-logo .meshmind-logo-tag {
    color: #1c8eb5;
    opacity: 1;
}

.marketing-kicker,
.marketing-section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--mesh-cyan);
    margin-bottom: 1rem;
}

.marketing-title {
    font-size: clamp(2rem, 4.1vw, 3.6rem);
    line-height: 0.93;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #08111d;
    letter-spacing: -0.04em;
}

.marketing-subtitle {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #344054;
    max-width: 58ch;
    margin-bottom: 1.5rem;
}

.marketing-actions {
    display: flex;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.marketing-hero .btn-dark {
    background: linear-gradient(135deg, #0d1d31 0%, #17375b 100%);
    border: 0;
    box-shadow: 0 16px 32px rgba(23, 55, 91, 0.25);
}

.marketing-hero .btn-outline-dark {
    border-color: #203553;
    color: #10243b;
}

.marketing-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1.75rem;
    align-items: stretch;
}

.marketing-proof-item {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.96));
    border: 1px solid #d7e5f1;
    border-radius: 18px;
    padding: 1rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 34px rgba(17, 24, 39, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.marketing-icon-wrap,
.marketing-strip-icon,
.marketing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-icon-wrap {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 14px;
    margin-bottom: 0.85rem;
    background: linear-gradient(135deg, rgba(57, 208, 255, 0.16), rgba(255, 79, 216, 0.12));
    color: #11436b;
    font-size: 1.2rem;
}

.marketing-proof-item::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--mesh-cyan), var(--mesh-blue), var(--mesh-magenta));
}

.marketing-proof-item strong,
.marketing-step strong {
    display: block;
    margin-bottom: 0.35rem;
}

.marketing-proof-item span,
.marketing-step span {
    color: #667085;
    font-size: 0.94rem;
    line-height: 1.5;
}

.marketing-stage {
    position: relative;
}

.marketing-stage-shell {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    padding: 1.5rem;
    min-height: 520px;
    background:
        radial-gradient(circle at 12% 18%, rgba(57, 208, 255, 0.26), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(255, 79, 216, 0.24), transparent 24%),
        radial-gradient(circle at 68% 82%, rgba(255, 186, 66, 0.22), transparent 26%),
        linear-gradient(145deg, #08111f 0%, #0d1730 46%, #0c1f40 100%);
    color: #fff;
    border: 1px solid rgba(113, 169, 255, 0.18);
    box-shadow: 0 28px 80px rgba(7, 17, 31, 0.32);
}

.marketing-stage-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 167, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 167, 255, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 100%);
    pointer-events: none;
}

.marketing-stage-top,
.marketing-stage-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.marketing-badge,
.marketing-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-badge {
    background: rgba(57, 208, 255, 0.12);
    color: #c9f7ff;
    border: 1px solid rgba(57, 208, 255, 0.24);
}

.marketing-stage-status {
    color: rgba(224, 239, 255, 0.78);
    font-size: 0.95rem;
}

.marketing-stage-panels {
    display: grid;
    gap: 1rem;
    margin: 1.4rem 0;
}

.marketing-mini-card {
    border-radius: 22px;
    padding: 1.25rem;
    min-height: 126px;
    border: 1px solid rgba(132, 173, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
}

.marketing-mini-card.tone-blue {
    background: linear-gradient(135deg, rgba(18, 49, 87, 0.82), rgba(33, 107, 255, 0.22));
}

.marketing-mini-card.tone-amber {
    background: linear-gradient(135deg, rgba(94, 58, 6, 0.78), rgba(255, 186, 66, 0.18));
}

.marketing-mini-card.tone-green {
    background: linear-gradient(135deg, rgba(5, 72, 64, 0.82), rgba(57, 208, 255, 0.16));
}

.marketing-mini-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(214, 231, 255, 0.74);
    margin-bottom: 0.9rem;
}

.marketing-mini-lines {
    display: grid;
    gap: 0.5rem;
}

.marketing-mini-lines span {
    display: block;
    height: 10px;
    background: linear-gradient(90deg, rgba(57, 208, 255, 0.95), rgba(129, 168, 255, 0.9));
    border-radius: 999px;
}

.marketing-mini-lines span.short {
    width: 62%;
}

.marketing-mini-canvas {
    display: flex;
    gap: 0.55rem;
    margin-top: 1rem;
}

.marketing-mini-canvas i {
    display: block;
    width: 30%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 79, 216, 0.92), rgba(57, 208, 255, 0.88));
    transform: rotate(-12deg);
}

.marketing-mini-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.marketing-mini-notes span {
    background: rgba(255, 214, 138, 0.95);
    color: #412d12;
    border-radius: 12px;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.marketing-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.marketing-mini-grid span {
    display: block;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(57, 208, 255, 0.22), rgba(79, 124, 255, 0.18));
    border: 1px solid rgba(123, 169, 255, 0.18);
}

.marketing-pill {
    background: rgba(255, 79, 216, 0.14);
    color: #ffb4ee;
    border: 1px solid rgba(255, 79, 216, 0.26);
}

.marketing-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.marketing-strip-item,
.marketing-feature-card,
.marketing-story-panel,
.marketing-event-card,
.marketing-quote-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.94));
    border: 1px solid #dbe7f4;
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.07);
    height: 100%;
}

.marketing-strip-number {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--mesh-blue);
    margin-bottom: 0.75rem;
}

.marketing-strip-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(79, 124, 255, 0.14), rgba(57, 208, 255, 0.18));
    color: #18426c;
    font-size: 1.3rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.marketing-strip-item h2,
.marketing-section-title,
.marketing-feature-card h3,
.marketing-cta-title {
    font-weight: 800;
}

.marketing-strip-item h2 {
    font-size: 1.15rem;
}

.marketing-strip-item p,
.marketing-feature-card p,
.marketing-event-card p {
    color: #667085;
    line-height: 1.65;
    margin-bottom: 0;
}

.marketing-feature-tag {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(57, 208, 255, 0.16), rgba(79, 124, 255, 0.14));
    color: #18426c;
    font-size: 0.8rem;
    font-weight: 700;
}

.marketing-feature-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 18px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #0f1d33 0%, #17406d 100%);
    color: #9ae8ff;
    font-size: 1.35rem;
    box-shadow: 0 16px 28px rgba(15, 29, 51, 0.16);
}

.marketing-feature-card,
.marketing-event-card,
.marketing-strip-item {
    display: flex;
    flex-direction: column;
}

.marketing-feature-card p,
.marketing-strip-item p {
    flex-grow: 1;
}

.marketing-event-card .text-center {
    margin-top: auto !important;
}

.marketing-section-title {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin-bottom: 1.1rem;
}

.marketing-steps {
    display: grid;
    gap: 1rem;
}

.marketing-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e8eef3;
}

.marketing-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.marketing-step-icon {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(57, 208, 255, 0.16), rgba(79, 124, 255, 0.16));
    color: #18426c;
    font-size: 1.15rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.marketing-step-copy {
    flex: 1;
}

.marketing-quote-panel {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at top right, rgba(255, 79, 216, 0.22), transparent 28%),
        radial-gradient(circle at bottom left, rgba(57, 208, 255, 0.2), transparent 30%),
        linear-gradient(135deg, #0b172c 0%, #11233f 52%, #17375b 100%);
    color: #fff;
    border-color: rgba(113, 169, 255, 0.16);
}

.marketing-quote {
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 600;
    margin-bottom: 1rem;
}

.marketing-quote-meta {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
}

.marketing-event-card img {
    max-height: 220px;
}

.marketing-event-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: #153b50;
    font-size: 0.9rem;
    font-weight: 700;
}

.marketing-cta-shell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    border-radius: 30px;
    padding: 2.2rem;
    background:
        radial-gradient(circle at 15% 10%, rgba(57, 208, 255, 0.24), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(255, 79, 216, 0.22), transparent 24%),
        linear-gradient(135deg, #08111f 0%, #0f1d33 48%, #16365e 100%);
    border: 1px solid rgba(113, 169, 255, 0.18);
    box-shadow: 0 28px 72px rgba(8, 17, 31, 0.26);
}

.marketing-cta-title {
    color: #fff;
    max-width: 18ch;
    margin: 0;
}

.marketing-cta .btn-light {
    color: #0e2034;
    font-weight: 700;
}

.marketing-cta .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.34);
}

.marketing-footer {
    padding: 1rem 0 0.5rem;
}

.marketing-footer-shell {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.4rem 1.6rem;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.marketing-footer-brand {
    font-size: 1.05rem;
    font-weight: 800;
    color: #08111d;
    letter-spacing: -0.02em;
    margin-bottom: 0.45rem;
}

.marketing-footer-copy {
    color: #667085;
    max-width: 42ch;
    margin: 0;
}

.marketing-footer-links,
.marketing-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
}

.marketing-footer-links a {
    color: #17375b;
    font-weight: 700;
    text-decoration: none;
}

.marketing-footer-links a:hover {
    color: #0e2034;
}

.marketing-footer-meta {
    color: #667085;
    font-size: 0.92rem;
    justify-content: flex-end;
}

.clean-join-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 3rem 0 1.5rem;
}

.clean-join-hero {
    max-width: 700px;
    margin: 0 auto 2rem;
    text-align: center;
}

.clean-join-kicker {
    display: inline-block;
    margin-bottom: 0.9rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(12, 18, 28, 0.06);
    color: #3f4754;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.clean-join-title {
    margin: 0 0 0.85rem;
    color: #101828;
    font-size: clamp(2.4rem, 4.8vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 600;
}

.clean-join-subtitle {
    margin: 0 auto;
    max-width: 44rem;
    color: #667085;
    font-size: 1.05rem;
    line-height: 1.7;
}

.clean-join-alert {
    max-width: 720px;
    margin: 0 auto 1.4rem;
    border-radius: 18px;
}

.clean-join-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.clean-join-card {
    padding: 1.5rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 252, 0.98) 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.clean-join-card-muted {
    background:
        linear-gradient(180deg, rgba(250, 251, 253, 0.98) 0%, rgba(244, 247, 250, 0.98) 100%);
}

.clean-join-card-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.3rem;
}

.clean-join-card-head h2 {
    margin: 0 0 0.35rem;
    color: #101828;
    font-size: 1.25rem;
    font-weight: 600;
}

.clean-join-card-head p {
    margin: 0;
    color: #667085;
    line-height: 1.65;
}

.clean-join-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex: 0 0 auto;
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
}

.clean-join-icon-soft {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #344054;
    box-shadow: none;
}

.clean-join-form,
.clean-rejoin-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.clean-join-label {
    display: block;
    margin-bottom: 0.5rem;
    color: #344054;
    font-size: 0.92rem;
    font-weight: 600;
}

.clean-join-field {
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.clean-join-field:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.clean-join-field i {
    color: #667085;
    font-size: 1rem;
}

.clean-join-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #101828;
    font-size: 1rem;
}

.clean-join-submit {
    min-height: 3.35rem;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb 0%, #155eef 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 14px 26px rgba(37, 99, 235, 0.18);
}

.clean-join-submit:hover {
    color: #fff;
    background: linear-gradient(135deg, #1d4ed8 0%, #155eef 100%);
}

.clean-rejoin-submit {
    min-height: 3.2rem;
    border-radius: 16px;
}

.clean-rejoin-form .form-control {
    min-height: 3.2rem;
    border-radius: 14px;
    border-color: #d0d5dd;
    box-shadow: none;
}

.clean-rejoin-form .form-control:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.clean-join-footer {
    display: flex;
    justify-content: center;
    margin-top: 1.4rem;
}

.clean-join-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #475467;
    font-weight: 600;
    text-decoration: none;
}

.clean-join-admin-link:hover {
    color: #111827;
}

.monitor-group-card {
    display: block;
    height: 100%;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.monitor-group-grid {
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}

.monitor-group-compact-col {
    width: 100%;
}

.monitor-group-card:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.09);
    border-color: rgba(37, 99, 235, 0.22);
}

.monitor-group-card.is-active {
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 22px 44px rgba(37, 99, 235, 0.12);
}

.monitor-group-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.monitor-group-card-title {
    color: #101828;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.monitor-group-card-meta {
    color: #667085;
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.monitor-group-card-copy-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

.monitor-copy-btn {
    flex: 0 0 auto;
    min-width: 2rem;
    padding: 0.2rem 0.45rem;
    border-radius: 10px;
    line-height: 1;
}

.monitor-group-card-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.monitor-group-card-stat-value {
    display: block;
    color: #111827;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.18rem;
}

.monitor-group-card-stat-label {
    display: block;
    color: #667085;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (min-width: 1200px) {
    .monitor-group-compact-col {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .monitor-group-card {
        padding: 0.8rem 0.9rem;
    }
}

.idea-network-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    background: rgba(8, 145, 178, 0.08);
    color: #0f172a;
    font-size: 0.85rem;
    font-weight: 600;
}

.idea-network-status-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: #0ea5e9;
    box-shadow: 0 0 0 0.3rem rgba(14, 165, 233, 0.16);
}

.idea-network-canvas {
    position: relative;
    width: 100%;
    height: min(72vh, 760px);
    min-height: 620px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.08), transparent 30%),
        radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.idea-network-canvas > div,
.idea-network-canvas canvas {
    border-radius: 24px;
}

.idea-network-empty {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
    font-size: 0.95rem;
}

.idea-network-legend {
    display: grid;
    gap: 0.9rem;
}

.idea-network-legend-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #475467;
    font-size: 0.95rem;
}

.idea-network-legend-chip {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    border-radius: 999px;
}

.idea-network-legend-chip.keyword {
    background: #7dd3fc;
    border: 2px solid #0284c7;
}

.idea-network-legend-line {
    width: 2.25rem;
    height: 0.18rem;
    flex: 0 0 2.25rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.22);
}

.idea-network-analysis-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #475467;
    font-size: 0.95rem;
}

.idea-network-analysis-card {
    display: grid;
    gap: 0.85rem;
}

.idea-network-analysis-label {
    color: #667085;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.idea-network-analysis-keyword {
    color: #101828;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.idea-network-analysis-text {
    color: #334155;
    font-size: 0.96rem;
    line-height: 1.65;
    white-space: pre-line;
}

.idea-network-analysis-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.idea-network-analysis-link-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 600;
}

.idea-network-analysis-evidence {
    display: grid;
    gap: 0.7rem;
}

.idea-network-analysis-evidence-item {
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #475467;
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 991px) {
    .idea-network-canvas {
        height: 62vh;
        min-height: 500px;
    }
}

@media (max-width: 991px) {
    .admin-sidebar {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(137, 181, 255, 0.12);
    }

    .admin-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-topbar-status {
        white-space: normal;
    }

    .admin-nav .nav-link {
        padding: 0.8rem 0.9rem;
    }

    .workspace-header,
    .workspace-panel-title-row,
    .workspace-subsection-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .workspace-statusbar,
    .workspace-main-grid {
        grid-template-columns: 1fr;
    }

    .workspace-canvas-controls {
        grid-template-columns: 1fr;
    }

    .workspace-screen-fallback {
        grid-template-columns: 1fr;
    }

    .workspace-field-actions {
        width: 100%;
    }

    .marketing-grid,
    .marketing-strip,
    .marketing-proof {
        grid-template-columns: 1fr;
    }

    .marketing-copy {
        padding-right: 0;
    }

    .marketing-stage-shell {
        min-height: auto;
    }

    .marketing-cta-shell {
        flex-direction: column;
        align-items: flex-start;
    }

    .marketing-footer-shell {
        grid-template-columns: 1fr;
    }

    .marketing-footer-meta {
        justify-content: flex-start;
    }

    .clean-join-grid {
        grid-template-columns: 1fr;
    }

    .clean-join-shell {
        padding-top: 2.25rem;
    }

    .clean-join-card {
        padding: 1.25rem;
    }
}

/* OpenAI-inspired admin theme override */
.admin-openai-theme.admin-body {
    background:
        radial-gradient(circle at top left, rgba(16, 163, 127, 0.08), transparent 24%),
        radial-gradient(circle at top right, rgba(15, 23, 42, 0.04), transparent 20%),
        linear-gradient(180deg, #f7f8f4 0%, #f2f4ef 52%, #eef1ea 100%);
    color: #0f172a;
}

.admin-openai-theme .admin-backdrop {
    background:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 92%);
    opacity: 0.22;
}

.admin-openai-theme .admin-sidebar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 246, 0.96)),
        linear-gradient(180deg, #ffffff, #f7f8f4);
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.68);
}

.admin-openai-theme .admin-sidebar::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 24%, transparent 76%, rgba(15, 23, 42, 0.03));
}

.admin-openai-theme .meshmind-logo.is-dark .meshmind-logo-title {
    color: #101828;
}

.admin-openai-theme .meshmind-logo.is-dark .meshmind-logo-tag {
    color: #667085;
}

.admin-openai-theme .meshmind-logo-mark svg {
    filter: drop-shadow(0 10px 18px rgba(16, 163, 127, 0.16));
}

.admin-openai-theme .admin-sidebar-user {
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.08), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7f8f4 100%);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.admin-openai-theme .admin-sidebar-user-label {
    color: #0f766e;
}

.admin-openai-theme .admin-sidebar-user-name {
    color: #101828;
}

.admin-openai-theme .admin-sidebar-user-role {
    color: #667085;
}

.admin-openai-theme .admin-nav .nav-link {
    color: #344054;
    border-color: transparent;
    font-weight: 600;
}

.admin-openai-theme .admin-nav .nav-link i {
    color: #475467;
}

.admin-openai-theme .admin-nav .nav-link.active,
.admin-openai-theme .admin-nav .nav-link:hover {
    color: #101828;
    background: linear-gradient(180deg, #ffffff 0%, #f3f6f1 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.admin-openai-theme .admin-nav .nav-link.active i,
.admin-openai-theme .admin-nav .nav-link:hover i {
    color: #0f766e;
}

.admin-openai-theme .admin-main {
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.06), transparent 20%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08));
}

.admin-openai-theme .admin-topbar {
    align-items: center;
    padding: 1.2rem 1.35rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 246, 0.94));
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.admin-openai-theme .admin-topbar-kicker {
    color: #0f766e;
    letter-spacing: 0.14em;
}

.admin-openai-theme .admin-topbar-title {
    color: #101828;
    letter-spacing: -0.04em;
}

.admin-openai-theme .admin-topbar-status {
    border: 1px solid rgba(16, 163, 127, 0.16);
    background: rgba(236, 253, 245, 0.92);
    color: #065f46;
    box-shadow: none;
}

.admin-openai-theme .admin-status-dot {
    background: #10a37f;
    box-shadow: 0 0 0 6px rgba(16, 163, 127, 0.12);
}

.admin-openai-theme .admin-content {
    color: #0f172a;
}

.admin-openai-theme .admin-content .text-muted,
.admin-openai-theme .admin-content .small.text-muted {
    color: #667085 !important;
}

.admin-openai-theme .admin-content .app-card,
.admin-openai-theme .admin-content .metric-card,
.admin-openai-theme .admin-content .member-tile {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.05), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 247, 0.96));
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
    color: #101828;
}

.admin-openai-theme .admin-content .app-card h1,
.admin-openai-theme .admin-content .app-card h2,
.admin-openai-theme .admin-content .app-card h3,
.admin-openai-theme .admin-content .metric-card,
.admin-openai-theme .admin-content .display-6,
.admin-openai-theme .admin-content .member-tile h2 {
    color: #101828;
}

.admin-openai-theme .admin-content .form-control,
.admin-openai-theme .admin-content .form-select,
.admin-openai-theme .admin-content textarea {
    background: #ffffff;
    border-color: #d0d5dd;
    color: #101828;
}

.admin-openai-theme .admin-content .form-control:focus,
.admin-openai-theme .admin-content .form-select:focus,
.admin-openai-theme .admin-content textarea:focus {
    background: #ffffff;
    color: #101828;
    border-color: rgba(16, 163, 127, 0.6);
    box-shadow: 0 0 0 0.25rem rgba(16, 163, 127, 0.12);
}

.admin-openai-theme .admin-content .table {
    color: #344054;
}

.admin-openai-theme .admin-content .table > :not(caption) > * > * {
    border-color: rgba(15, 23, 42, 0.06);
}

.admin-openai-theme .admin-content .btn-primary {
    background: linear-gradient(135deg, #10a37f 0%, #0f8f71 100%);
    border-color: #0f8f71;
    box-shadow: 0 10px 24px rgba(16, 163, 127, 0.18);
}

.admin-openai-theme .admin-content .btn-primary:hover,
.admin-openai-theme .admin-content .btn-primary:focus {
    background: linear-gradient(135deg, #0f8f71 0%, #0b7a60 100%);
    border-color: #0b7a60;
}

.admin-openai-theme .admin-content .btn-outline-primary,
.admin-openai-theme .admin-content .btn-outline-secondary,
.admin-openai-theme .admin-content .btn-outline-danger,
.admin-openai-theme .admin-content .btn-outline-dark {
    border-color: #d0d5dd;
    color: #344054;
    background: rgba(255, 255, 255, 0.76);
}

.admin-openai-theme .admin-content .btn-outline-primary:hover,
.admin-openai-theme .admin-content .btn-outline-secondary:hover,
.admin-openai-theme .admin-content .btn-outline-danger:hover,
.admin-openai-theme .admin-content .btn-outline-dark:hover {
    background: #f5f7f3;
    color: #101828;
}

.admin-openai-theme .admin-content .badge.bg-success,
.admin-openai-theme .admin-content .badge.text-bg-success {
    background-color: #dcfae6 !important;
    color: #065f46 !important;
}

.admin-openai-theme .admin-content .badge.bg-danger,
.admin-openai-theme .admin-content .badge.text-bg-danger {
    background-color: #fee4e2 !important;
    color: #b42318 !important;
}

.admin-openai-theme .admin-content .badge.bg-primary,
.admin-openai-theme .admin-content .badge.text-bg-primary {
    background-color: #ecfdf3 !important;
    color: #027a48 !important;
}

.public-site {
    background:
        radial-gradient(circle at top, rgba(16, 163, 127, 0.06), transparent 20%),
        linear-gradient(180deg, #fcfdfc 0%, #f5f7f8 100%);
}

.public-navbar {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.public-navbar-shell {
    min-height: 76px;
}

.public-navbar .navbar-brand {
    margin-right: 1.5rem;
}

.public-navbar-toggler {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    padding: 0.55rem 0.7rem;
}

.public-navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem rgba(16, 163, 127, 0.12);
}

.public-nav-links {
    gap: 0.5rem;
}

.public-nav-links .nav-link {
    color: #475467;
    font-weight: 600;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link:focus {
    color: #101828;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.public-nav-actions {
    min-width: 244px;
}

.public-nav-actions .btn {
    border-radius: 999px;
    padding-inline: 1.15rem;
}

.site-footer {
    padding: 1rem 0 2rem;
}

.site-footer-note {
    text-align: center;
    color: #667085;
    font-size: 0.95rem;
}

.site-footer-seal {
    margin-top: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-footer-seal a,
.site-footer-seal img {
    display: inline-block;
}

.pricing-hero,
.pricing-comparison,
.signup-shell {
    margin-bottom: 3rem;
}

.pricing-hero-shell,
.pricing-comparison-shell,
.signup-panel {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 32px;
    background:
        radial-gradient(circle at top right, rgba(16, 163, 127, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.pricing-hero-shell {
    padding: 3.5rem 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(57, 208, 255, 0.18), transparent 24%),
        radial-gradient(circle at 85% 18%, rgba(255, 79, 216, 0.14), transparent 24%),
        radial-gradient(circle at 68% 82%, rgba(255, 186, 66, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98));
}

.pricing-kicker,
.pricing-section-kicker,
.signup-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 800;
    color: #0f766e;
    margin-bottom: 1rem;
}

.pricing-title,
.signup-title {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
    color: #101828;
    margin-bottom: 1rem;
}

.pricing-subtitle,
.signup-subtitle {
    max-width: 760px;
    margin: 0 auto;
    color: #667085;
    font-size: 1.08rem;
}

.pricing-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

.pricing-hero .btn-dark {
    background: linear-gradient(135deg, #0d1d31 0%, #17375b 100%);
    border: 0;
    box-shadow: 0 16px 32px rgba(23, 55, 91, 0.25);
}

.pricing-hero .btn-outline-dark {
    border-color: #203553;
    color: #10243b;
}

.pricing-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(246, 250, 255, 0.94));
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.07);
}

.pricing-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--mesh-cyan), var(--mesh-blue), var(--mesh-magenta));
    border-radius: 28px 28px 0 0;
}

.pricing-card-starter {
    border-color: #d7e5f1;
}

.pricing-card-enterprise {
    border-color: #d7e5f1;
}

.pricing-card-featured {
    background:
        radial-gradient(circle at 10% 12%, rgba(57, 208, 255, 0.16), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(255, 79, 216, 0.12), transparent 26%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(244, 249, 255, 0.98) 100%);
    border-color: rgba(79, 124, 255, 0.2);
    box-shadow: 0 28px 60px rgba(23, 55, 91, 0.12);
}

.pricing-ribbon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d1d31 0%, #17375b 100%);
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
}

.pricing-card-top {
    margin-bottom: 1.5rem;
}

.pricing-plan {
    display: inline-block;
    margin-bottom: 0.85rem;
    color: #18426c;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.pricing-card-top h2 {
    margin-bottom: 0.75rem;
    font-size: 3rem;
    line-height: 0.95;
    letter-spacing: -0.05em;
    color: #101828;
}

.pricing-card-top h2 span {
    font-size: 1rem;
    color: #667085;
    font-weight: 600;
}

.pricing-card-top p {
    color: #667085;
    margin-bottom: 0;
}

.pricing-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
    display: grid;
    gap: 0.85rem;
    flex: 1 1 auto;
}

.pricing-feature-list li {
    position: relative;
    padding-left: 1.7rem;
    color: #344054;
    font-weight: 500;
}

.pricing-feature-list li::before {
    content: "\F26E";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0.02rem;
    color: #2563eb;
}

.pricing-comparison-shell {
    padding: 2.4rem;
    background:
        radial-gradient(circle at top right, rgba(57, 208, 255, 0.12), transparent 22%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 249, 255, 0.98));
}

.pricing-section-title {
    margin-bottom: 2rem;
    color: #101828;
    letter-spacing: -0.04em;
}

.pricing-mini-feature {
    height: 100%;
    padding: 1.4rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.94));
    border: 1px solid #dbe7f4;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.07);
    display: grid;
    gap: 0.7rem;
}

.pricing-mini-feature i {
    font-size: 1.4rem;
    color: #18426c;
}

.pricing-mini-feature strong {
    color: #101828;
}

.pricing-mini-feature span {
    color: #667085;
}

.signup-panel {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    padding: 2.25rem;
}

.signup-copy {
    padding: 1.5rem;
}

.signup-benefits {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

.signup-benefit {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(15, 23, 42, 0.07);
}

.signup-benefit i {
    color: #0f766e;
    font-size: 1.15rem;
}

.signup-benefit span {
    color: #344054;
    font-weight: 600;
}

.signup-card {
    padding: 2rem;
    border-radius: 28px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
}

.signup-card h2 {
    color: #101828;
    margin-bottom: 0.5rem;
}

.signup-card-footer {
    margin-top: 1.1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    color: #667085;
    font-size: 0.95rem;
}

.signup-card-footer a {
    color: #0f766e;
    font-weight: 700;
    text-decoration: none;
}

.pricing-bottom-cta {
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .public-navbar {
        padding: 0.8rem 0;
    }

    .public-navbar .navbar-collapse {
        margin-top: 1rem;
        padding: 1rem;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    }

    .public-nav-links {
        margin-bottom: 1rem;
    }

    .public-nav-links .nav-link {
        padding-inline: 0.25rem;
        border-radius: 12px;
    }

    .signup-panel {
        grid-template-columns: 1fr;
    }

    .pricing-hero-shell,
    .pricing-comparison-shell,
    .signup-panel {
        padding: 1.5rem;
    }

    .pricing-card {
        padding: 1.5rem;
    }
}

.quiz-builder-page {
    --quiz-red: #f43f5e;
    --quiz-blue: #2563eb;
    --quiz-amber: #f59e0b;
    --quiz-green: #10b981;
}

.quiz-builder-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
    gap: 1.5rem;
    padding: 1.75rem;
    border-radius: 28px;
    background:
        radial-gradient(circle at top left, rgba(244, 63, 94, 0.16), transparent 34%),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 32%),
        linear-gradient(135deg, #081225 0%, #102a43 55%, #0f766e 100%);
    color: #f8fafc;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
}

.quiz-builder-kicker,
.quiz-player-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}

.quiz-builder-hero h2,
.quiz-player-topbar h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    margin: 0.9rem 0 0.75rem;
}

.quiz-builder-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.quiz-builder-badges span,
.quiz-player-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.95rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-weight: 600;
}

.quiz-builder-hero-stage {
    display: grid;
    align-items: center;
}

.quiz-builder-stage-card {
    border-radius: 26px;
    padding: 1.35rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px);
}

.quiz-builder-stage-top,
.quiz-builder-toolbar,
.quiz-builder-option-head,
.quiz-player-topbar,
.quiz-player-status-row,
.quiz-player-leaderboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.quiz-builder-stage-pill,
.quiz-builder-stage-status,
.quiz-player-status-pill {
    border-radius: 999px;
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.quiz-builder-stage-pill {
    background: rgba(255, 255, 255, 0.12);
}

.quiz-builder-stage-status {
    background: rgba(255, 255, 255, 0.14);
}

.quiz-builder-stage-status.is-live {
    background: rgba(16, 185, 129, 0.2);
}

.quiz-builder-stage-status.is-closed {
    background: rgba(244, 63, 94, 0.22);
}

.quiz-builder-stage-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 1.1rem;
}

.quiz-builder-stage-copy,
.quiz-builder-board-head p {
    color: rgba(248, 250, 252, 0.8);
}

.quiz-builder-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 1.2rem 0;
}

.quiz-builder-stage-grid span {
    display: block;
    min-height: 70px;
    border-radius: 22px;
}

.tone-red {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 100%);
}

.tone-blue {
    background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
}

.tone-amber {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
}

.tone-green {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}

.quiz-builder-stage-footer {
    color: rgba(248, 250, 252, 0.72);
    font-size: 0.92rem;
}

.quiz-builder-toolbar {
    flex-wrap: wrap;
}

.quiz-builder-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.quiz-builder-sidebar,
.quiz-builder-board {
    border-radius: 28px;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.08);
}

.quiz-builder-sidebar-section + .quiz-builder-sidebar-section {
    margin-top: 1rem;
}

.quiz-builder-side-metric {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: #334155;
}

.quiz-builder-side-metric + .quiz-builder-side-metric {
    margin-top: 0.55rem;
}

.quiz-builder-board-head {
    margin-bottom: 1.1rem;
}

.quiz-builder-board-head h3 {
    margin-bottom: 0.35rem;
}

.quiz-builder-questions {
    display: grid;
    gap: 1rem;
}

.quiz-builder-empty {
    padding: 2rem;
    border-radius: 24px;
    border: 1px dashed rgba(100, 116, 139, 0.4);
    text-align: center;
    color: #64748b;
}

.quiz-builder-question-card {
    border-radius: 26px;
    padding: 1.2rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.quiz-builder-question-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quiz-builder-question-badge {
    display: inline-flex;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.quiz-builder-question-head h4 {
    margin: 0.55rem 0 0;
}

.quiz-builder-question-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 160px;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quiz-builder-timer-box {
    padding: 1rem;
    border-radius: 22px;
    background: #eff6ff;
}

.quiz-builder-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.quiz-builder-option-card {
    display: block;
    border-radius: 24px;
    padding: 1rem;
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.quiz-builder-option-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
}

.quiz-builder-option-label {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(15, 23, 42, 0.78);
}

.quiz-builder-option-input {
    margin-top: 0.85rem;
    border: none;
    background: rgba(255, 255, 255, 0.8);
}

.quiz-player-page {
    min-height: calc(100vh - 80px);
    padding: 2rem 0;
    background:
        radial-gradient(circle at top left, rgba(244, 63, 94, 0.18), transparent 22%),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.16), transparent 24%),
        linear-gradient(160deg, #0b1120 0%, #0f172a 32%, #102a43 100%);
}

.quiz-player-shell {
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
    color: #f8fafc;
}

.quiz-player-topbar {
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.quiz-player-topbar p {
    color: rgba(248, 250, 252, 0.75);
    max-width: 720px;
}

.quiz-player-topbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.quiz-player-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
    gap: 1.25rem;
}

.quiz-player-main,
.quiz-player-panel {
    border-radius: 30px;
    padding: 1.4rem;
    background: rgba(15, 23, 42, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.28);
}

.quiz-player-panel + .quiz-player-panel {
    margin-top: 1rem;
}

.quiz-player-status-pill {
    background: rgba(255, 255, 255, 0.1);
}

.quiz-player-status-pill.is-live {
    background: rgba(16, 185, 129, 0.2);
}

.quiz-player-status-pill.is-dark {
    background: rgba(15, 23, 42, 0.44);
}

.quiz-player-status-pill.is-score {
    background: rgba(245, 158, 11, 0.18);
}

.quiz-player-status-pill.is-closed {
    background: rgba(244, 63, 94, 0.22);
}

.quiz-player-timer-track {
    position: relative;
    height: 12px;
    margin: 1rem 0 1.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.quiz-player-timer-track span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981 0%, #22c55e 35%, #f59e0b 72%, #f43f5e 100%);
    transition: width 120ms linear;
}

.quiz-player-question-card {
    padding: 1.6rem;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.06);
}

.quiz-player-question-index,
.quiz-player-panel-kicker {
    color: rgba(248, 250, 252, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    font-weight: 700;
}

.quiz-player-question-card h2 {
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    margin: 0.55rem 0 0.7rem;
}

.quiz-player-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
}

.quiz-player-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 132px;
    padding: 1.15rem;
    border: none;
    border-radius: 28px;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: left;
    box-shadow: 0 20px 32px rgba(2, 6, 23, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.quiz-player-option:hover,
.quiz-player-option:focus-visible {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 26px 38px rgba(2, 6, 23, 0.28);
    filter: saturate(1.08);
}

.quiz-player-option:disabled {
    cursor: wait;
    opacity: 0.82;
}

.quiz-player-option-shape {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.24);
}

.quiz-player-option.tone-red .quiz-player-option-shape {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.quiz-player-option.tone-blue .quiz-player-option-shape {
    border-radius: 50%;
}

.quiz-player-option.tone-amber .quiz-player-option-shape {
    transform: rotate(45deg);
}

.quiz-player-option.tone-green .quiz-player-option-shape {
    border-radius: 6px;
}

.quiz-player-option-text {
    line-height: 1.25;
}

.quiz-player-leaderboard-empty {
    color: rgba(248, 250, 252, 0.68);
}

.quiz-player-leaderboard-row + .quiz-player-leaderboard-row {
    margin-top: 0.8rem;
}

.quiz-player-rank {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    font-weight: 800;
}

.quiz-player-rank-meta {
    flex: 1;
    display: grid;
    gap: 0.2rem;
}

.quiz-player-rank-meta span,
.quiz-player-steps {
    color: rgba(248, 250, 252, 0.76);
}

.quiz-player-steps {
    margin: 0.8rem 0 0;
    padding-left: 1.15rem;
}

.quiz-player-steps li + li {
    margin-top: 0.6rem;
}

.quiz-join-page {
    min-height: calc(100vh - 120px);
    display: grid;
    place-items: center;
    padding: 2rem 0;
}

.quiz-join-shell {
    width: min(560px, calc(100% - 2rem));
}

.quiz-join-card {
    border-radius: 32px;
    padding: 2rem;
    background:
        radial-gradient(circle at top left, rgba(244, 63, 94, 0.16), transparent 32%),
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,247,251,0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 28px 48px rgba(15, 23, 42, 0.1);
}

.quiz-join-copy {
    color: #526072;
    margin-bottom: 1.25rem;
}

.quiz-join-label {
    font-weight: 700;
}

.quiz-join-input {
    min-height: 56px;
}

.quiz-live-monitor-card,
.quiz-live-monitor-share {
    height: 100%;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,247,251,0.98) 100%);
    padding: 1.1rem 1.2rem;
}

.quiz-live-monitor-share {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quiz-live-monitor-qr {
    max-width: 160px;
    width: 100%;
}

.quiz-live-monitor-share-muted {
    background: linear-gradient(180deg, rgba(248,250,252,0.96) 0%, rgba(241,245,249,0.96) 100%);
}

.quiz-live-monitor-stat-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.quiz-live-monitor-label {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.quiz-live-monitor-value {
    margin-top: 0.35rem;
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
}

@media (max-width: 991.98px) {
    .quiz-builder-hero,
    .quiz-player-stage {
        grid-template-columns: 1fr;
    }

    .quiz-builder-question-grid,
    .quiz-builder-options-grid,
    .quiz-player-options {
        grid-template-columns: 1fr;
    }

    .quiz-live-monitor-stat-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.event-designer-page {
    display: grid;
    gap: 1.5rem;
}

.event-designer-header-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.18), transparent 32%),
        linear-gradient(135deg, #fbfdff 0%, #eef6ff 100%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.08);
}

.event-designer-kicker {
    font-size: 0.73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #0f766e;
    margin-bottom: 0.45rem;
}

.event-designer-header-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.event-designer-layout {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.event-designer-sidebar {
    display: grid;
    gap: 1rem;
}

.event-designer-panel,
.event-designer-canvas-wrap {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}

.event-designer-panel {
    padding: 1.1rem;
}

.event-designer-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.event-designer-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.event-designer-panel-note {
    font-size: 0.88rem;
    color: #64748b;
}

.event-designer-palette {
    display: grid;
    gap: 0.8rem;
    max-height: 420px;
    overflow: auto;
    padding-right: 0.2rem;
}

.event-designer-palette-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    padding: 0.9rem;
    text-align: left;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.event-designer-palette-card:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.event-designer-palette-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--designer-accent) 18%, white);
    color: var(--designer-accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.event-designer-palette-copy {
    display: grid;
    gap: 0.3rem;
}

.event-designer-palette-copy strong {
    color: #0f172a;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.event-designer-palette-copy span {
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.45;
}

.event-designer-palette-state {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #92400e;
    background: #fef3c7;
}

.event-designer-palette-state.is-enabled {
    color: #065f46;
    background: #d1fae5;
}

.event-designer-empty-inspector {
    min-height: 120px;
    border-radius: 18px;
    border: 1px dashed rgba(148, 163, 184, 0.38);
    background: #f8fbff;
    padding: 1rem;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
}

.event-designer-inspector-meta {
    display: grid;
    gap: 0.8rem;
}

.event-designer-inspector-meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
}

.event-designer-inspector-meta span {
    color: #64748b;
}

.event-designer-inspector-meta strong {
    color: #0f172a;
    text-transform: capitalize;
}

.event-designer-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.event-designer-summary-grid div {
    border-radius: 18px;
    padding: 0.9rem;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.event-designer-summary-grid span {
    display: block;
    color: #64748b;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
}

.event-designer-summary-grid strong {
    font-size: 1.6rem;
    color: #0f172a;
}

.event-designer-hint-list {
    display: grid;
    gap: 0.75rem;
}

.event-designer-hint-list div {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    color: #475569;
    font-size: 0.88rem;
}

.event-designer-hint-list i {
    color: #0f766e;
    margin-top: 0.12rem;
}

.event-designer-canvas-wrap {
    padding: 1rem;
}

.event-designer-canvas-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.event-designer-canvas-status-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.event-designer-canvas-status {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #475569;
    font-size: 0.9rem;
}

.event-designer-zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.45rem;
    border-radius: 999px;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.event-designer-zoom-value {
    min-width: 56px;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
}

.event-designer-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
}

.event-designer-board-shell {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #f4f9ff;
}

.event-designer-fullscreen-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 30;
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(10px);
}

.event-designer-board-shell:fullscreen,
.event-designer-board-shell.is-fullscreen-fallback {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1rem;
    border-radius: 0;
    overflow: auto;
    background: #f4f9ff;
}

.event-designer-board-shell:fullscreen::backdrop {
    background: rgba(15, 23, 42, 0.78);
}

.event-designer-board-shell:fullscreen .event-designer-fullscreen-controls,
.event-designer-board-shell.is-fullscreen-fallback .event-designer-fullscreen-controls {
    display: inline-flex;
}

.event-designer-board-shell:fullscreen .event-designer-board,
.event-designer-board-shell.is-fullscreen-fallback .event-designer-board {
    min-height: calc(100vh - 2rem);
    height: calc(100vh - 2rem);
}

.event-designer-board {
    position: relative;
    min-height: 720px;
    height: 720px;
    overflow: auto;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.16) 1px, transparent 1px);
    background-size: 34px 34px;
    background-color: #f4f9ff;
}

.event-designer-board .drawflow {
    min-height: 720px;
    min-width: 100%;
    background: transparent;
}

.event-designer-board .drawflow .parent-drawflow {
    min-width: 100%;
    min-height: 720px;
}

.event-designer-board .drawflow .drawflow-node {
    width: 220px;
    border: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;
}

.event-designer-board .drawflow .drawflow-node.selected {
    background: transparent;
}

.event-designer-board .drawflow .drawflow-node .drawflow_content_node {
    padding: 0;
    background: transparent;
}

.event-designer-df-node {
    position: relative;
    min-height: 118px;
    padding: 0.95rem 1rem 1rem;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(246,250,255,0.98) 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.event-designer-board .drawflow .drawflow-node.selected .event-designer-df-node {
    border-color: color-mix(in srgb, var(--designer-node-accent) 55%, white);
    box-shadow: 0 24px 48px color-mix(in srgb, var(--designer-node-accent) 18%, rgba(15, 23, 42, 0.18));
}

.event-designer-df-node::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    border-radius: 22px 0 0 22px;
    background: var(--designer-node-accent);
}

.event-designer-node-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #475569;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.event-designer-node-remove:hover {
    color: #0f766e;
}

.event-designer-node-title {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    padding-right: 1.6rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: #0f172a;
}

.event-designer-node-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--designer-node-accent) 16%, white);
    color: var(--designer-node-accent);
}

.event-designer-node-label {
    display: block;
    line-height: 1.25;
}

.event-designer-node-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-designer-node-content-preview {
    width: 100%;
    margin-top: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
    background: #f8fbff;
    color: #0f172a;
    font-size: 0.88rem;
    line-height: 1.45;
    max-height: 92px;
    overflow: hidden;
    white-space: pre-wrap;
}

.event-designer-node-resource-summary {
    display: inline-flex;
    align-items: center;
    margin-top: 0.7rem;
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    background: #e0f2fe;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 700;
}

.event-designer-node-actions {
    margin-top: 0.75rem;
}

.event-designer-node-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.event-designer-node-link:hover {
    border-color: rgba(15, 118, 110, 0.28);
    color: #0f766e;
}

.event-designer-board .drawflow .drawflow-node .input,
.event-designer-board .drawflow .drawflow-node .output {
    width: 18px;
    height: 18px;
    border-width: 2px;
    border-color: #ffffff;
    background: var(--designer-node-accent);
    top: calc(50% - 9px);
}

.event-designer-board .drawflow .drawflow-node .input:hover,
.event-designer-board .drawflow .drawflow-node .output:hover {
    transform: scale(1.08);
}

.event-designer-board .drawflow .drawflow-node .input {
    left: -9px;
}

.event-designer-board .drawflow .drawflow-node .output {
    right: -9px;
}

.event-designer-board .drawflow svg .main-path {
    stroke: rgba(15, 23, 42, 0.34);
    stroke-width: 3px;
}

.event-designer-board .drawflow .connection.selected .main-path,
.event-designer-board .drawflow svg .connection .main-path:hover {
    stroke: #0f766e;
}

.event-designer-resource-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.event-designer-resources-list {
    display: grid;
    gap: 0.7rem;
}

.event-designer-resource-item {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #f8fbff;
    padding: 0.8rem;
}

.event-designer-resource-meta {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
}

.event-designer-resource-meta strong {
    color: #0f172a;
    font-size: 0.92rem;
}

.event-designer-resource-meta span {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-designer-resource-meta a {
    color: #0f766e;
    font-size: 0.82rem;
    word-break: break-word;
}

.event-designer-resource-actions-inline {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

@media (max-width: 1199px) {
    .event-designer-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .event-designer-header-card,
    .event-designer-canvas-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .event-designer-header-actions {
        justify-content: stretch;
    }

    .event-designer-header-actions .btn,
    .event-designer-canvas-toolbar .btn {
        width: 100%;
    }

    .event-designer-zoom-controls {
        justify-content: center;
    }
}

.event-flow-preview-shell {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
    padding: 1rem;
}

.event-flow-preview-board {
    position: relative;
    min-height: 1100px;
    min-width: 1800px;
    overflow: auto;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 24%),
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(239, 246, 255, 0.98) 100%);
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.14) 1px, transparent 1px);
    background-size: 34px 34px;
}

.event-flow-preview-connections {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.event-flow-preview-path {
    fill: none;
    stroke: rgba(71, 85, 105, 0.42);
    stroke-width: 4;
    stroke-linecap: round;
}

.event-flow-preview-card {
    position: absolute;
    z-index: 2;
    width: 270px;
    min-height: 150px;
    padding: 1rem 1rem 0.95rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
}

.event-flow-preview-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    border-radius: 24px 0 0 24px;
    background: var(--flow-accent);
}

.event-flow-preview-type {
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.event-flow-preview-title-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 0.65rem;
}

.event-flow-preview-title {
    font-size: 1.08rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.35;
}

.event-flow-preview-status {
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-flow-preview-copy {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}

.event-flow-preview-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
}

.event-flow-preview-metrics span {
    border-radius: 999px;
    padding: 0.26rem 0.62rem;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
}

.event-flow-preview-metrics strong {
    color: #0f172a;
}

.event-flow-preview-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.workflow-monitor-sequence {
    display: grid;
    gap: 1rem;
}

.workflow-monitor-stage {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 24px;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(244,247,251,0.98) 100%);
    transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease, padding 0.24s ease;
}

.workflow-monitor-stage-passive {
    background: linear-gradient(180deg, rgba(248,250,252,0.98) 0%, rgba(241,245,249,0.98) 100%);
}

.workflow-monitor-stage.is-running {
    border-color: rgba(34, 197, 94, 0.34);
    box-shadow: 0 18px 42px rgba(34, 197, 94, 0.12);
}

.workflow-monitor-stage.is-completed {
    border-color: rgba(59, 130, 246, 0.28);
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.1);
}

.workflow-monitor-stage.is-skipped {
    border-color: rgba(239, 68, 68, 0.3);
    box-shadow: 0 16px 36px rgba(239, 68, 68, 0.1);
}

.workflow-monitor-stage.is-focused {
    border-color: rgba(15, 118, 110, 0.38);
    box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.16), 0 18px 42px rgba(15, 118, 110, 0.14);
    transform: translateY(-2px);
}

.workflow-monitor-stage-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    cursor: pointer;
}

.workflow-monitor-stage-kicker {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.35rem;
}

.workflow-monitor-stage-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.workflow-monitor-stage-toggle:hover {
    background: #f8fafc;
    border-color: rgba(59, 130, 246, 0.24);
}

.workflow-monitor-stage-toggle-icon {
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -0.2rem;
    transition: transform 0.2s ease, margin-top 0.2s ease;
}

.workflow-monitor-stage.is-expanded .workflow-monitor-stage-toggle-icon {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}

.workflow-monitor-timer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.workflow-monitor-timer-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.workflow-monitor-timer-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: #e2e8f0;
    color: #334155;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workflow-monitor-timer-pill.is-running {
    background: #dcfce7;
    color: #166534;
}

.workflow-monitor-timer-pill.is-completed {
    background: #dbeafe;
    color: #1d4ed8;
}

.workflow-monitor-timer-pill.is-skipped {
    background: #fee2e2;
    color: #b91c1c;
}

.workflow-monitor-timer-elapsed {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.workflow-monitor-stage-body {
    display: grid;
    gap: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: -0.35rem;
    pointer-events: none;
    transition: max-height 0.32s ease, opacity 0.2s ease, margin-top 0.24s ease;
}

.workflow-monitor-stage.is-expanded .workflow-monitor-stage-body {
    max-height: 2000px;
    opacity: 1;
    margin-top: 0;
    pointer-events: auto;
}

.workflow-monitor-stage.is-minimized .workflow-monitor-stage-head {
    margin-bottom: 0.8rem;
}

.workflow-monitor-stage.is-minimized .workflow-monitor-timer-row {
    margin-bottom: 0;
}

.workflow-monitor-stage.is-minimized .workflow-monitor-stage-body {
    max-height: 0;
}

.workflow-monitor-resource-list {
    display: grid;
    gap: 0.7rem;
}

.workflow-monitor-resource-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(148, 163, 184, 0.16);
    transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.workflow-monitor-resource-item.is-completed {
    background: #effaf4;
    border-color: rgba(34, 197, 94, 0.22);
}

.workflow-monitor-resource-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    min-width: 0;
    flex: 1 1 auto;
    color: #0f172a;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
}

.workflow-monitor-resource-label {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #0f172a;
}

.workflow-monitor-resource-link strong {
    flex-shrink: 0;
    color: #1d4ed8;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.workflow-monitor-resource-link:hover {
    background: #dbeafe;
}

.workflow-monitor-resource-item.is-completed .workflow-monitor-resource-label {
    color: #166534;
    text-decoration: line-through;
}

.workflow-resource-modal-body {
    padding: 0.75rem;
}

.workflow-resource-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.workflow-resource-modal-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

#resourcePreviewModal.is-resource-fullscreen .workflow-resource-modal-body {
    padding: 0;
}

.workflow-resource-preview-empty {
    padding: 2rem;
    border-radius: 24px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
    font-weight: 600;
}

.workflow-resource-preview-stage {
    min-height: calc(100vh - 230px);
    border-radius: 22px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.workflow-resource-preview-stage.is-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
}

.workflow-resource-preview-frame,
.workflow-resource-preview-video {
    width: 100%;
    min-height: calc(100vh - 230px);
    border: 0;
    background: #ffffff;
}

.workflow-resource-preview-image {
    max-width: 100%;
    max-height: calc(100vh - 240px);
    object-fit: contain;
}

.workflow-resource-preview-note {
    margin-top: 0.85rem;
    font-size: 0.84rem;
    color: #64748b;
}

.workflow-resource-preview-note a {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

#resourcePreviewModal.is-resource-fullscreen .workflow-resource-preview-stage {
    min-height: calc(100vh - 66px);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

#resourcePreviewModal.is-resource-fullscreen .workflow-resource-preview-frame,
#resourcePreviewModal.is-resource-fullscreen .workflow-resource-preview-video {
    min-height: calc(100vh - 66px);
}

#resourcePreviewModal.is-resource-fullscreen .workflow-resource-preview-image {
    max-height: calc(100vh - 78px);
}

#resourcePreviewModal.is-resource-fullscreen .workflow-resource-preview-note {
    margin: 0;
    padding: 0.75rem 1rem 1rem;
    background: #ffffff;
}