/* Generated conservative public-page bundle from styles.css. */ :root { --bg-page: #0b0c10; --bg-panel: #12141a; --bg-panel-soft: #171923; --border-soft: rgba(35, 38, 52, 0.85); --border-strong: rgba(35, 38, 52, 1); --text-main: #edf0ff; --text-muted: #cfcfe6; --text-dim: #9aa3c0; --text-soft: var(--text-muted); --accent-pink: #ff2d9a; --accent-cyan: #00e5ff; --accent-purple: #7a5cff; --accent-green: #41d69d; --accent-red: #ff4d4d; --accent-yellow: #ffd26b; --accent-orange: #ff9b43; --neon-purple: var(--accent-purple); --neon-pink: var(--accent-pink); --neon-cyan: var(--accent-cyan); --neon-blue: #4f8cff; --neon-orange: var(--accent-orange); --border-glow: var(--border-soft); --shadow-panel: 0 18px 46px rgba(0, 0, 0, 0.42); --blur: blur(10px); --glow-soft: 0 0 12px rgba(122, 92, 255, 0.18); --glow-medium: 0 0 16px rgba(122, 92, 255, 0.24); --glow-strong: 0 0 22px rgba(255, 45, 154, 0.28); --radius-lg: 16px; --radius-md: 16px; --radius-sm: 10px; --ui-radius-card: 16px; --ui-radius-control: 10px; --ui-card-padding: 16px; --ui-card-padding-lg: 18px; --ui-gap: 18px; --ui-gap-tight: 10px; --ui-title-size: clamp(2.2rem, 4vw, 3.75rem); --ui-section-size: 1.02rem; --ui-body-size: 0.88rem; --ui-label-size: 0.72rem; --ui-success: var(--accent-green); --ui-warning: var(--accent-yellow); --ui-error: var(--accent-red); --ui-active: var(--accent-cyan); --space-section: 40px; --space-card: 18px; --space-tight: 10px; --transition-fast: 160ms ease; --transition-med: 240ms ease; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0px; padding: 0px; min-height: 100%; } body { background: radial-gradient(circle at 18% 16%, rgba(122, 92, 255, 0.08), transparent 38%), radial-gradient(circle at 80% 12%, rgba(0, 229, 255, 0.06), transparent 40%), radial-gradient(circle at 50% 92%, rgba(255, 45, 154, 0.04), transparent 44%), linear-gradient(rgb(11, 12, 16) 0%, rgb(7, 8, 14) 70%, rgb(6, 7, 12) 100%); color: var(--text-main); font-family: Inter, "Segoe UI", sans-serif; position: relative; line-height: 1.5; } body::before { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 20%, rgba(102, 84, 180, 0.08), transparent 30%), radial-gradient(circle at 90% 10%, rgba(79, 140, 255, 0.09), transparent 30%), radial-gradient(circle at 50% 90%, rgba(38, 59, 106, 0.05), transparent 40%); } body, p, span, div, label, li, td, th, input, select, textarea, button { color: var(--text-main); } a { color: var(--neon-cyan); text-decoration: none; transition: opacity 0.2s, box-shadow 0.2s; } a:hover { opacity: 0.92; text-decoration: underline; } .dashboard-page { min-height: 100vh; color: var(--text-main); } .dashboard-page[data-product-page="dashboard"] [data-role-section="setup"] { display: none !important; } .dashboard-page[data-product-page="setup"] .action-cards-panel, .dashboard-page[data-product-page="setup"] .ops-toolbar { display: none !important; } .dashboard-page[data-product-page="setup"] .dashboard-grid > section:not([data-role-section="setup"]) { display: none !important; } @keyframes livePulse { 0% { box-shadow: rgba(0, 229, 255, 0) 0px 0px 0px; } 50% { box-shadow: rgba(0, 229, 255, 0.18) 0px 0px 16px; } 100% { box-shadow: rgba(0, 229, 255, 0) 0px 0px 0px; } } .nav-btn.active { background: rgba(122, 92, 255, 0.18); border-color: rgba(122, 92, 255, 0.55); color: rgb(255, 255, 255); box-shadow: rgba(122, 92, 255, 0.22) 0px 0px 14px; } @keyframes heroGlowMove { 0% { transform: translateX(0px); } 100% { transform: translateX(460%); } } @keyframes heroGlowPulse { 0%, 100% { transform: scale(0.98); opacity: 0.78; filter: blur(28px); } 50% { transform: scale(1.04); opacity: 1; filter: blur(34px); } } @keyframes heroShimmerSweep { 0% { transform: translateX(-120%); opacity: 0; } 18% { opacity: 0.9; } 55% { transform: translateX(120%); opacity: 0; } 100% { transform: translateX(120%); opacity: 0; } } @keyframes heroFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } .eyebrow, .panel-kicker { margin: 0px 0px 8px; color: var(--neon-cyan); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 800; } .hero-copy, .hero-links { animation: 760ms ease 0s 1 normal none running heroTextFadeIn; } @keyframes heroTextFadeIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0px); } } .hero-copy, .helper-copy, .muted { color: var(--text-soft); opacity: 0.84; } .hero-link, .btn, .ghost-button, .button-secondary, .button-primary, button { appearance: none; border: 1px solid rgba(35, 38, 52, 0.95); border-radius: 999px; padding: 10px 15px; font-weight: 700; background: rgba(18, 20, 26, 0.72); color: var(--text-main); cursor: pointer; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s; } .button-primary, button.button-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); border-color: transparent; color: rgb(255, 255, 255); box-shadow: rgba(255, 45, 154, 0.28) 0px 0px 12px; } .button-primary::after, button.button-primary::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent); opacity: 0; transition: opacity 0.2s; } .button-primary:hover::after, button.button-primary:hover::after { opacity: 1; } .button-secondary { background: rgba(18, 20, 26, 0.78); border-color: rgba(35, 38, 52, 0.95); color: var(--text-main); box-shadow: rgba(255, 255, 255, 0.02) 0px 0px 0px 1px inset; } .ghost-button:hover, .btn:hover, .hero-link:hover, .button-secondary:hover, .button-primary:hover, button:hover { transform: translateY(-1px); box-shadow: rgba(122, 92, 255, 0.16) 0px 0px 12px; text-decoration: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state] { display: inline-flex; min-height: 28px; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid rgba(148, 163, 184, 0.26); border-radius: 999px; color: rgb(219, 231, 247); background: rgba(6, 12, 26, 0.76); line-height: 1.2; } :is(.status, .badge)[data-status-state="connected"] { border-color: rgba(34, 211, 238, 0.48) !important; color: rgb(174, 246, 255) !important; background: rgba(8, 145, 178, 0.14) !important; } :is(.status, .badge)[data-status-state="ready"] { border-color: rgba(124, 255, 209, 0.44) !important; color: rgb(157, 255, 218) !important; background: rgba(16, 185, 129, 0.12) !important; } :is(.status, .badge)[data-status-state="in-progress"] { border-color: rgba(0, 229, 255, 0.36) !important; color: rgb(174, 246, 255) !important; background: rgba(0, 229, 255, 0.09) !important; } :is(.status, .badge)[data-status-state="needs-attention"] { border-color: rgba(251, 191, 36, 0.5) !important; color: rgb(253, 230, 138) !important; background: rgba(245, 158, 11, 0.12) !important; } :is(.status, .badge)[data-status-state="error"] { border-color: rgba(248, 113, 113, 0.52) !important; color: rgb(254, 202, 202) !important; background: rgba(239, 68, 68, 0.12) !important; } :is(.status, .badge)[data-status-state="disabled"] { border-color: rgba(148, 163, 184, 0.24) !important; color: rgb(174, 185, 209) !important; background: rgba(71, 85, 105, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-group { display: block; border-top: 1px solid rgba(148, 163, 184, 0.12); padding-top: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group > summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-technical-tools > summary { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 7px 9px; border-radius: 7px; color: rgb(174, 185, 209); font-size: 0.78rem; font-weight: 850; cursor: pointer; list-style: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group > summary::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-technical-tools > summary::after { content: "+"; color: rgb(0, 229, 255); font-size: 1rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group[open] > summary::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-technical-tools[open] > summary::after { content: "–"; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group > summary::-webkit-details-marker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-technical-tools > summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group > summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-technical-tools > summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] :is(.platform-diagnostics-collapse, .settings-disclosure, .command-editor-section) > summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-category-accordion > details > summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] [role="tab"]:focus-visible, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] :is([role="tab"], .mod-secondary-nav > summary, .tester-feedback-button):focus-visible, .dashboard-page:is(.account-page, .billing-page) details > summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #clearOwnConnectionInfo:focus-visible { outline: rgb(103, 232, 249) solid 3px !important; outline-offset: 3px !important; box-shadow: rgba(3, 7, 18, 0.92) 0px 0px 0px 2px, rgba(103, 232, 249, 0.3) 0px 0px 0px 5px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .advanced-layer-heading { display: flex; gap: 10px; align-items: center; margin: 14px 0px 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .overlay-links-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .overlay-link-card { display: grid; gap: 10px; min-height: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .obs-link-update-panel:not([hidden]) { grid-column: 1 / -1; border-width: 2px; } .dashboard-page .boss-event-manager[hidden] { display: none !important; } @media (max-width: 980px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .overlay-links-grid, .command-field-grid { grid-template-columns: 1fr; } } .button-primary.is-disabled, .button-secondary.is-disabled, .ghost-button.is-disabled, .button-primary[aria-disabled="true"], .button-secondary[aria-disabled="true"], .ghost-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.58; filter: grayscale(0.18); } .btn.small, button.small, .button-secondary.small, .ghost-button.small { padding: 7px 11px; font-size: 0.78rem; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { display: grid; grid-template-columns: minmax(0px, 1.7fr) minmax(320px, 0.95fr); gap: 18px; align-items: start; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid > .panel, .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid > aside { grid-column: auto; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-sidebar { display: grid; gap: 18px; align-content: start; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream { border-color: rgba(122, 92, 255, 0.22); } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream.panel-scroll { height: min(78vh, 920px); } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-controls { display: flex; gap: 10px; align-items: center; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin-bottom: 12px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-grid { display: grid; grid-template-columns: minmax(0px, 1.2fr) minmax(0px, 0.8fr); gap: 14px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-col { border-radius: 18px; border: 1px solid rgba(35, 38, 52, 0.9); background: rgba(11, 12, 16, 0.42); padding: 12px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-subhead { display: grid; gap: 4px; margin-bottom: 10px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-subhead h3 { margin: 0px; font-size: 1.02rem; } @media (max-width: 1100px){.dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream.panel-scroll { height: auto; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-grid { grid-template-columns: 1fr; } } @keyframes heartbeatPulse { 0%, 100% { box-shadow: rgba(125, 249, 255, 0.12) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 8px 18px; } 50% { box-shadow: rgba(125, 249, 255, 0.22) 0px 0px 0px 1px, rgba(125, 249, 255, 0.16) 0px 0px 16px, rgba(0, 0, 0, 0.24) 0px 8px 18px; } } @keyframes warningGlow { 0%, 100% { box-shadow: rgba(255, 202, 107, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 8px 18px; } 50% { box-shadow: rgba(255, 202, 107, 0.22) 0px 0px 0px 1px, rgba(255, 202, 107, 0.12) 0px 0px 16px, rgba(0, 0, 0, 0.22) 0px 8px 18px; } } @keyframes issueFlicker { 0%, 100% { box-shadow: rgba(255, 143, 157, 0.12) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 8px 18px; } 45% { box-shadow: rgba(255, 143, 157, 0.22) 0px 0px 0px 1px, rgba(255, 79, 120, 0.12) 0px 0px 18px, rgba(0, 0, 0, 0.24) 0px 8px 18px; } 48% { box-shadow: rgba(255, 143, 157, 0.12) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 8px 18px; } 55% { box-shadow: rgba(255, 143, 157, 0.22) 0px 0px 0px 1px, rgba(255, 79, 120, 0.1) 0px 0px 14px, rgba(0, 0, 0, 0.24) 0px 8px 18px; } } input, select, textarea { background: rgba(6, 12, 24, 0.9); color: var(--text-main); border: 1px solid rgba(129, 140, 248, 0.18); border-radius: 12px; padding: 10px 12px; font: inherit; } input::placeholder, textarea::placeholder { color: var(--text-dim); } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(110, 231, 255, 0.45); box-shadow: rgba(110, 231, 255, 0.08) 0px 0px 0px 3px; } textarea { min-height: 110px; resize: vertical; } .dashboard-page[data-dashboard-role="mod"] .dashboard-grid { gap: 20px; } .dashboard-page[data-dashboard-role="mod"] .panel { border-radius: 20px; padding: 14px; background: rgba(18, 20, 26, 0.92); backdrop-filter: none; } .dashboard-page[data-dashboard-role="mod"] .panel-heading { margin-bottom: 12px; padding-bottom: 10px; } .dashboard-page[data-dashboard-role="mod"] .platform-card::before { opacity: 0.22; } .dashboard-page[data-dashboard-role="mod"] .platform-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; } .dashboard-page[data-dashboard-role="mod"] .platform-grid .platform-card { min-height: 152px; padding: 12px; } .dashboard-page[data-dashboard-role="mod"] .platform-card h3 { font-size: 0.96rem; } .dashboard-page[data-dashboard-role="mod"] .platform-meta { margin-top: 8px; font-size: 0.76rem; } .dashboard-page[data-dashboard-role="mod"] .platform-note { margin-top: 8px; font-size: 0.84rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .dashboard-page[data-dashboard-role="mod"] .platform-signal { padding: 4px 7px; font-size: 0.66rem; letter-spacing: 0.07em; } .dashboard-page[data-dashboard-role="mod"] .platform-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .feed-item p, .platform-card p, .owner-card p, .asset-card p, .helper-copy, .ops-link, .origin-chip { color: var(--text-soft); } .overlay-url-field { display: grid; gap: 7px; min-width: 0px; } .overlay-url-field > span { color: var(--text-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .overlay-url-field input, .overlay-url-field select, .overlay-url-field textarea { width: 100%; min-width: 0px; min-height: 42px; border-radius: 10px; border: 1px solid rgba(129, 140, 248, 0.16); background: rgba(4, 8, 18, 0.74); color: var(--text-main); font-size: 0.86rem; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; } .overlay-url-field textarea { resize: vertical; line-height: 1.45; padding: 10px 12px; } .overlay-link-actions .button-secondary, .overlay-link-actions .button-primary { min-height: 38px; padding: 0px 14px; } .engagement-tabs .active, .engagement-setup-card.active { border-color: rgba(0, 229, 255, 0.52); color: var(--text-main); box-shadow: rgba(0, 229, 255, 0.16) 0px 0px 0px 1px; } .boss-event-phase-list span.active { border-color: rgba(34, 211, 238, 0.52); background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(255, 47, 216, 0.12)), rgba(15, 23, 42, 0.72); color: rgb(248, 251, 255); box-shadow: rgba(34, 211, 238, 0.14) 0px 0px 24px; } @keyframes bossLevelShift { 0% { opacity: 0.25; transform: scale(0.965); filter: saturate(1.3) brightness(1.25); } 100% { opacity: 1; transform: scale(1); filter: none; } } .engagement-internal-activity-field, .engagement-prompt-fields[hidden], .engagement-option-fields[hidden], .engagement-settings-grid[hidden], .overlay-url-field[hidden], [data-engagement-meter-field][hidden], [data-engagement-trivia-field][hidden], [data-engagement-timed-field][hidden], [data-engagement-celebration-field][hidden], [data-engagement-raid-clip-field][hidden] { display: none !important; } @keyframes raidWelcomeShake { 0%, 100% { transform: translate3d(0px, 0px, 0px); } 16% { transform: translate3d(-10px, 5px, 0px) rotate(-0.7deg); } 32% { transform: translate3d(9px, -6px, 0px) rotate(0.8deg); } 48% { transform: translate3d(-7px, -3px, 0px) rotate(-0.45deg); } 64% { transform: translate3d(6px, 4px, 0px) rotate(0.35deg); } 80% { transform: translate3d(-3px, 2px, 0px) rotate(-0.15deg); } } @keyframes raidWelcomeEmote { 0% { opacity: 0; transform: translateY(26px) scale(0.7) rotate(-12deg); } 46% { opacity: 1; transform: translateY(-8px) scale(1.08) rotate(4deg); } 100% { opacity: 1; transform: translateY(0px) scale(1) rotate(0deg); } } @keyframes raidWelcomeConfetti { 0% { opacity: 0; transform: translateY(-18px) scale(0.98); } 18% { opacity: 0.9; } 100% { opacity: 0.55; transform: translateY(18px) scale(1.04); } } .dashboard-page[data-dashboard-role="mod"] .platform-health-layout { gap: 14px; } .dashboard-page[data-dashboard-role="mod"] .platform-health-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .dashboard-page[data-dashboard-role="mod"] .platform-health-grid .platform-health-card, .dashboard-page[data-dashboard-role="mod"] .platform-issue-feed .platform-issue-item { padding: 12px; } hr { border-width: 1px 0px 0px; border-style: solid none none; border-color: rgba(122, 149, 224, 0.1) currentcolor currentcolor; border-image: initial; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } .connection-button-row .button-secondary, .connection-button-row .ghost-button, .connection-manager-toolbar .button-secondary, .connection-manager-toolbar .ghost-button { min-height: 42px; border-radius: 999px; padding: 0px 14px; } .connection-button-row .button-secondary { background: rgba(13, 19, 35, 0.84); border-color: rgba(129, 140, 248, 0.16); } @keyframes connectionSpotlight { 0% { box-shadow: rgba(110, 231, 255, 0) 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 12px 30px; } 40% { box-shadow: rgba(110, 231, 255, 0.18) 0px 0px 30px, rgba(168, 85, 247, 0.14) 0px 0px 60px, rgba(0, 0, 0, 0.42) 0px 14px 34px; } 100% { box-shadow: rgba(110, 231, 255, 0) 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 12px 30px; } } .connection-button-row .button-secondary { background: rgba(13, 19, 35, 0.84); border: 1px solid rgba(129, 140, 248, 0.16); } .connection-button-row .button-secondary:hover { background: rgba(17, 24, 42, 0.92); box-shadow: rgba(120, 140, 255, 0.14) 0px 0px 10px; } .dashboard-page .topbar, .dashboard-page .card, .dashboard-page .metric, .dashboard-page .feedItem, .dashboard-page .reviewItem { border-color: var(--border-soft); } .dashboard-page .hero.topbar { padding: 18px; } .dashboard-page .panel > .row:first-child { margin-top: 0px !important; } .dashboard-page .metric, .dashboard-page .live-health-card, .dashboard-page .mod-v2-metric { min-height: 112px; border-radius: 18px; } .dashboard-page .metricLabel, .dashboard-page .mod-v2-metric-label { color: var(--text-soft); letter-spacing: 0.08em; } .dashboard-page .metricValue, .dashboard-page .mod-v2-metric-value { color: var(--text-main); line-height: 1; } .dashboard-page .feedItem, .dashboard-page .reviewItem, .dashboard-page .history-item { border-radius: 16px; background: rgba(255, 255, 255, 0.024); border: 1px solid rgba(129, 140, 248, 0.1); } .dashboard-page .command-item.is-default { border-color: rgba(0, 229, 255, 0.18); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.06), transparent 34%), rgba(255, 255, 255, 0.027); } .dashboard-page .command-item.is-disabled { border-style: dashed; opacity: 0.78; } .dashboard-page .command-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .dashboard-page .command-default-badge { border-color: rgba(0, 229, 255, 0.24); color: var(--accent-cyan); } .dashboard-page .history { display: grid; gap: 10px; } .dashboard-page .history-item { padding: 12px; border-top: 1px solid rgba(129, 140, 248, 0.1); } .dashboard-page table { border-spacing: 0px; } .dashboard-page th { color: var(--text-soft); } .dashboard-page td, .dashboard-page th { border-color: rgba(129, 140, 248, 0.1); } @media (max-width: 900px){.dashboard-page .hero.topbar { display: grid; } .dashboard-page .hero-avatar-wrap { min-width: 0px; flex-basis: auto; justify-content: flex-start; } } .dashboard-page[data-dashboard-role="operator"] { background: radial-gradient(circle at 18% 8%, rgba(0, 229, 255, 0.08), transparent 34%), radial-gradient(circle at 84% 4%, rgba(255, 45, 154, 0.09), transparent 32%), radial-gradient(circle at 50% 98%, rgba(122, 92, 255, 0.06), transparent 44%), linear-gradient(rgb(8, 10, 18) 0%, rgb(7, 8, 17) 54%, rgb(5, 6, 11) 100%); } .dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(1180px, 100% - 48px); max-width: none; padding: 34px 0px 92px; } .dashboard-page[data-dashboard-role="operator"] .shell.wrap > .card { padding: 0px; border: 0px; border-radius: 0px; background: transparent; box-shadow: none; } .dashboard-page[data-dashboard-role="operator"] .hero.top { min-height: auto; margin-bottom: 24px; padding: 22px 24px; align-items: center; border-radius: 18px; background: linear-gradient(135deg, rgba(15, 18, 32, 0.92), rgba(10, 12, 22, 0.82)), radial-gradient(circle at 96% 14%, rgba(255, 45, 154, 0.11), transparent 34%); border: 1px solid rgba(129, 140, 248, 0.18); box-shadow: rgba(0, 0, 0, 0.34) 0px 18px 42px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset; backdrop-filter: blur(14px); } .dashboard-page[data-dashboard-role="operator"] .hero.top::before { background: linear-gradient(90deg, rgba(4, 6, 12, 0.64), rgba(4, 6, 12, 0.22)), url("/hero-5sT3BiRD.png") center center / cover no-repeat; opacity: 0.08; } .dashboard-page[data-dashboard-role="operator"] .hero.top::after { display: none; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-wrap { flex: 0 0 112px; min-width: 112px; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-ring { width: 112px; height: 112px; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-ring::before { filter: blur(16px); opacity: 0.58; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-ring::after { display: none; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar { animation: auto ease 0s 1 normal none running none; filter: drop-shadow(rgba(255, 45, 154, 0.28) 0px 0px 10px) drop-shadow(rgba(0, 229, 255, 0.2) 0px 0px 18px) drop-shadow(rgba(0, 0, 0, 0.28) 0px 12px 18px); } .dashboard-page[data-dashboard-role="operator"] .hero-main { display: grid; gap: 12px; padding-left: 2px; flex: 1 1 auto; } .dashboard-page[data-dashboard-role="operator"] .view-badge-row { margin: 0px; gap: 6px; } .dashboard-page[data-dashboard-role="operator"] .eyebrow { margin-bottom: 7px; color: rgba(126, 231, 255, 0.92); letter-spacing: 0.18em; } .dashboard-page[data-dashboard-role="operator"] .hero h1 { margin-bottom: 7px; font-size: clamp(2.05rem, 4.2vw, 3.55rem); line-height: 1; letter-spacing: -0.02em; background: linear-gradient(90deg, rgb(255, 255, 255), rgb(200, 245, 255) 64%, rgb(255, 214, 239)) text; -webkit-text-fill-color: transparent; text-shadow: rgba(0, 229, 255, 0.14) 0px 0px 24px; } .dashboard-page[data-dashboard-role="operator"] .hero-copy, .dashboard-page[data-dashboard-role="operator"] .helper-copy, .dashboard-page[data-dashboard-role="operator"] .muted { color: rgb(198, 205, 227); opacity: 1; } .dashboard-page[data-dashboard-role="operator"] .hero-copy { max-width: 720px; font-size: 0.9rem; } .dashboard-page[data-dashboard-role="operator"] .hero-switch-row { margin: 0px; gap: 10px; } .dashboard-page[data-dashboard-role="operator"] .live-indicator, .dashboard-page[data-dashboard-role="operator"] .pill, .dashboard-page[data-dashboard-role="operator"] .status-pill, .dashboard-page[data-dashboard-role="operator"] .badge, .dashboard-page[data-dashboard-role="operator"] .runtime-pill { min-height: 26px; padding: 4px 9px; gap: 6px; border-color: rgba(129, 140, 248, 0.14); background: rgba(9, 13, 25, 0.56); color: rgb(215, 222, 245); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.045em; box-shadow: none; } .dashboard-page[data-dashboard-role="operator"] .live-indicator { text-transform: uppercase; animation: auto ease 0s 1 normal none running none; } .dashboard-page[data-dashboard-role="operator"] .dot, .dashboard-page[data-dashboard-role="operator"] .live-dot { width: 7px; height: 7px; } .dashboard-page[data-dashboard-role="operator"] .dot.ok { box-shadow: rgba(34, 197, 94, 0.34) 0px 0px 10px; } .dashboard-page[data-dashboard-role="operator"] .dot.bad { box-shadow: rgba(239, 68, 68, 0.28) 0px 0px 10px; } .dashboard-page[data-dashboard-role="operator"] .nav-btn, .dashboard-page[data-dashboard-role="operator"] .tab, .dashboard-page[data-dashboard-role="operator"] .btn, .dashboard-page[data-dashboard-role="operator"] .button-secondary { border-color: rgba(129, 140, 248, 0.16); background: rgba(15, 20, 36, 0.66); } .dashboard-page[data-dashboard-role="operator"] .nav-btn { padding: 8px 12px; font-size: 0.82rem; } .dashboard-page[data-dashboard-role="operator"] .nav-btn.active, .dashboard-page[data-dashboard-role="operator"] .tab.active { border-color: rgba(0, 229, 255, 0.32); background: rgba(0, 229, 255, 0.11); box-shadow: rgba(0, 229, 255, 0.04) 0px 0px 16px inset; } .dashboard-page[data-dashboard-role="operator"] .summaryGrid { gap: 14px; margin-top: 0px; margin-bottom: 20px; } .dashboard-page[data-dashboard-role="operator"] .grid { gap: 16px; margin-top: 18px; } .dashboard-page[data-dashboard-role="operator"] .section { gap: 16px; } .dashboard-page[data-dashboard-role="operator"] .row2 { gap: 16px; } .dashboard-page[data-dashboard-role="operator"] .tabs { gap: 9px; margin-top: 4px; margin-bottom: 2px; } .dashboard-page[data-dashboard-role="operator"] .card, .dashboard-page[data-dashboard-role="operator"] .summaryCard, .dashboard-page[data-dashboard-role="operator"] .setupPanel { border-color: rgba(129, 140, 248, 0.14); background: linear-gradient(rgba(18, 23, 40, 0.78), rgba(10, 14, 27, 0.72)); box-shadow: rgba(0, 0, 0, 0.24) 0px 12px 28px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="operator"] .summaryCard { padding: 14px; border-radius: 13px; } .dashboard-page[data-dashboard-role="operator"] .summaryLabel, .dashboard-page[data-dashboard-role="operator"] th { color: rgb(184, 193, 220); } .dashboard-page[data-dashboard-role="operator"] .summaryValue { color: rgb(246, 248, 255); } .dashboard-page[data-dashboard-role="operator"] table { color: rgb(212, 219, 241); } .dashboard-page[data-dashboard-role="operator"] pre, .dashboard-page[data-dashboard-role="operator"] input[type="text"], .dashboard-page[data-dashboard-role="operator"] textarea, .dashboard-page[data-dashboard-role="operator"] select { border-color: rgba(129, 140, 248, 0.14); background: rgba(3, 7, 17, 0.58); color: rgb(238, 243, 255); } @media (max-width: 900px){.dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(100% - 28px, 1180px); padding-top: 22px; } .dashboard-page[data-dashboard-role="operator"] .hero.top { display: grid; gap: 14px; padding: 18px; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-wrap { min-width: 0px; justify-content: flex-start; } .dashboard-page[data-dashboard-role="operator"] .hero-avatar-ring { width: 86px; height: 86px; } .dashboard-page[data-dashboard-role="operator"] .hero-links { justify-content: flex-start; margin-right: 0px; } } @media (max-width: 700px){.dashboard-page[data-dashboard-role="operator"] .hero h1 { font-size: clamp(1.85rem, 8vw, 2.35rem); white-space: normal; } .dashboard-page[data-dashboard-role="operator"] .dashboard-subtitle { font-size: 0.94rem; line-height: 1.35; } .dashboard-page[data-dashboard-role="operator"] .hero-copy { font-size: 0.84rem; line-height: 1.45; } } @media (max-width: 560px){.dashboard-page[data-dashboard-role="operator"] { overflow-x: hidden; } .dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(100% - 24px, 1180px); padding-bottom: 78px; } .dashboard-page[data-dashboard-role="operator"] .hero.top { padding: 16px; } .dashboard-page[data-dashboard-role="operator"] .hero-switch-row, .dashboard-page[data-dashboard-role="operator"] .hero-switch-nav, .dashboard-page[data-dashboard-role="operator"] .tabs { max-width: 100%; } .dashboard-page[data-dashboard-role="operator"] .hero-switch-nav, .dashboard-page[data-dashboard-role="operator"] .tabs { gap: 8px; } .dashboard-page[data-dashboard-role="operator"] .nav-btn, .dashboard-page[data-dashboard-role="operator"] .tab { min-width: 0px; padding-inline: 10px; white-space: normal; } } .dashboard-page[data-dashboard-role="mod"] .hero.topbar { gap: 14px; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; } .dashboard-page[data-dashboard-role="mod"] .hero.topbar::before { opacity: 0.09; } .dashboard-page[data-dashboard-role="mod"] .hero-avatar-wrap { flex-basis: 86px; min-width: 86px; } .dashboard-page[data-dashboard-role="mod"] .hero-avatar-ring { width: 104px; height: 104px; } .dashboard-page[data-dashboard-role="mod"] .hero-avatar-ring::before { filter: blur(18px); opacity: 0.58; } .dashboard-page[data-dashboard-role="mod"] .hero h1 { margin-bottom: 6px; font-size: clamp(2rem, 3.6vw, 3.45rem); } .dashboard-page[data-dashboard-role="mod"] .hero-copy { max-width: 620px; margin-top: 4px; } .dashboard-page[data-dashboard-role="mod"] .view-badge-row, .dashboard-page[data-dashboard-role="mod"] .hero-identity-row, .dashboard-page[data-dashboard-role="mod"] .hero-switch-row { margin-block: 6px; } .dashboard-page[data-dashboard-role="mod"] .hero-links { gap: 8px; } .dashboard-page[data-dashboard-role="mod"] .section-command-card { margin-top: 12px; padding: 16px; } .dashboard-page[data-dashboard-role="mod"] .section-command-actions .button-primary { box-shadow: rgba(52, 215, 255, 0.18) 0px 0px 22px; } .dashboard-page[data-dashboard-role="mod"] .section-command-actions .button-secondary { min-height: 36px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: minmax(0px, 1.45fr) minmax(320px, 1fr); margin-top: 14px; } .dashboard-page[data-dashboard-role="mod"] .mod-primary-review { min-height: min(58vh, 680px); border-color: rgba(34, 211, 238, 0.26); box-shadow: rgba(34, 211, 238, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.26) 0px 18px 44px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream.panel-scroll { height: min(58vh, 680px); } .dashboard-page[data-dashboard-role="mod"] .mod-announcements-panel, .dashboard-page[data-dashboard-role="mod"] .mod-identity-settings, .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-dashboard-role="mod"] #automodSettingsPanel { margin-top: 14px; } .dashboard-page[data-dashboard-role="mod"] .mod-announcements-panel { border-color: rgba(129, 140, 248, 0.12); } .dashboard-page[data-dashboard-role="mod"] .mod-identity-settings { background: rgba(255, 255, 255, 0.027); border-color: rgba(255, 255, 255, 0.08); } @media (max-width: 920px){.dashboard-page[data-dashboard-role="mod"] .hero-avatar-wrap { display: none; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="mod"] .mod-primary-review, .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream.panel-scroll { min-height: 0px; height: auto; } } .dashboard-page[data-dashboard-role="streamer"], .dashboard-page[data-dashboard-role="mod"] { background: radial-gradient(circle at 12% -10%, rgba(0, 229, 255, 0.11), transparent 34%), radial-gradient(circle at 88% 2%, rgba(255, 45, 154, 0.1), transparent 30%), linear-gradient(rgb(7, 10, 18) 0%, rgb(9, 13, 24) 52%, rgb(7, 10, 18) 100%); color: var(--text-main); } .dashboard-page[data-dashboard-role="streamer"] .shell.wrap, .dashboard-page[data-dashboard-role="mod"] .shell.wrap { width: min(1280px, 100% - 48px); padding: 28px 0px 86px; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-dashboard-role="mod"] .hero.topbar { position: relative; display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 20px; min-height: 0px; margin-bottom: 16px; padding: 22px 24px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(129, 140, 248, 0.16); background: linear-gradient(135deg, rgba(18, 24, 42, 0.92), rgba(8, 12, 24, 0.88)), rgba(8, 12, 24, 0.9); box-shadow: rgba(0, 0, 0, 0.34) 0px 18px 46px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar::after, .dashboard-page[data-dashboard-role="mod"] .hero.topbar::after { content: ""; position: absolute; right: 22px; bottom: 16px; width: 44px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 45, 154, 0.9), rgba(0, 229, 255, 0.9)); box-shadow: rgba(255, 45, 154, 0.28) 0px 0px 14px, rgba(0, 229, 255, 0.18) 0px 0px 18px; opacity: 0.8; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-wrap, .dashboard-page[data-dashboard-role="mod"] .hero-avatar-wrap { min-width: 0px; flex: 0 0 auto; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-dashboard-role="mod"] .hero-avatar-ring { width: 104px; height: 104px; border-color: rgba(0, 229, 255, 0.24); box-shadow: rgba(255, 45, 154, 0.12) 0px 0px 0px 1px, rgba(0, 229, 255, 0.14) 0px 0px 28px; } .dashboard-page[data-dashboard-role="streamer"] .hero-main, .dashboard-page[data-dashboard-role="mod"] .hero-main { min-width: 0px; display: grid; gap: 10px; } .dashboard-page[data-dashboard-role="streamer"] .view-badge-row, .dashboard-page[data-dashboard-role="mod"] .view-badge-row, .dashboard-page[data-dashboard-role="streamer"] .hero-identity-row, .dashboard-page[data-dashboard-role="mod"] .hero-identity-row { gap: 7px; } .dashboard-page[data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-dashboard-role="mod"] .hero h1 { font-size: clamp(2.15rem, 4vw, 3.65rem); line-height: 1; letter-spacing: 0px; color: rgb(248, 251, 255); } .dashboard-page[data-dashboard-role="streamer"] .hero-copy, .dashboard-page[data-dashboard-role="mod"] .hero-copy, .dashboard-page[data-dashboard-role="streamer"] .subcopy, .dashboard-page[data-dashboard-role="mod"] .subcopy, .dashboard-page[data-dashboard-role="streamer"] .muted, .dashboard-page[data-dashboard-role="mod"] .muted, .dashboard-page[data-dashboard-role="streamer"] .helper-copy, .dashboard-page[data-dashboard-role="mod"] .helper-copy { color: rgb(200, 209, 230); opacity: 1; } .dashboard-page[data-dashboard-role="streamer"] .hero-copy, .dashboard-page[data-dashboard-role="mod"] .hero-copy { max-width: 780px; font-size: 0.92rem; line-height: 1.48; } .dashboard-page[data-dashboard-role="streamer"] .hero-switch-row, .dashboard-page[data-dashboard-role="mod"] .hero-switch-row { gap: 10px; margin-top: 0px; } .dashboard-page[data-dashboard-role="streamer"] .hero-links, .dashboard-page[data-dashboard-role="mod"] .hero-links { position: relative; z-index: 1; justify-content: flex-end; align-self: start; max-width: 330px; } .dashboard-page[data-dashboard-role="streamer"] .status-pill, .dashboard-page[data-dashboard-role="mod"] .status-pill, .dashboard-page[data-dashboard-role="streamer"] .hero-identity-chip, .dashboard-page[data-dashboard-role="mod"] .hero-identity-chip, .dashboard-page[data-dashboard-role="streamer"] .live-indicator, .dashboard-page[data-dashboard-role="mod"] .live-indicator, .dashboard-page[data-dashboard-role="streamer"] .status, .dashboard-page[data-dashboard-role="mod"] .status, .dashboard-page[data-dashboard-role="streamer"] .origin-chip, .dashboard-page[data-dashboard-role="mod"] .origin-chip { min-height: 26px; padding: 4px 9px; gap: 6px; border-radius: 999px; border-color: rgba(129, 140, 248, 0.16); background: rgba(8, 13, 28, 0.72); color: rgb(217, 225, 247); font-size: 0.7rem; font-weight: 760; letter-spacing: 0.045em; box-shadow: none; } .dashboard-page[data-dashboard-role="streamer"] .live-indicator, .dashboard-page[data-dashboard-role="mod"] .live-indicator { text-transform: uppercase; animation: auto ease 0s 1 normal none running none; } .dashboard-page[data-dashboard-role="streamer"] .dot, .dashboard-page[data-dashboard-role="mod"] .dot, .dashboard-page[data-dashboard-role="streamer"] .live-dot, .dashboard-page[data-dashboard-role="mod"] .live-dot { width: 7px; height: 7px; } .dashboard-page[data-dashboard-role="streamer"] .dot.ok, .dashboard-page[data-dashboard-role="mod"] .dot.ok { box-shadow: rgba(34, 197, 94, 0.32) 0px 0px 10px; } .dashboard-page[data-dashboard-role="streamer"] .dot.bad, .dashboard-page[data-dashboard-role="mod"] .dot.bad { box-shadow: rgba(239, 68, 68, 0.28) 0px 0px 10px; } .dashboard-page[data-dashboard-role="streamer"] .nav-btn, .dashboard-page[data-dashboard-role="mod"] .nav-btn, .dashboard-page[data-dashboard-role="streamer"] .btn, .dashboard-page[data-dashboard-role="mod"] .btn, .dashboard-page[data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-dashboard-role="mod"] .button-primary { min-height: 36px; border-radius: 10px; border-color: rgba(129, 140, 248, 0.18); font-size: 0.82rem; font-weight: 780; } .dashboard-page[data-dashboard-role="streamer"] .nav-btn.active, .dashboard-page[data-dashboard-role="mod"] .nav-btn.active { border-color: rgba(0, 229, 255, 0.36); background: rgba(0, 229, 255, 0.12); color: rgb(247, 251, 255); box-shadow: rgba(0, 229, 255, 0.05) 0px 0px 16px inset; } .dashboard-page[data-dashboard-role="streamer"] .ops-toolbar, .dashboard-page[data-dashboard-role="mod"] .ops-toolbar { margin: 16px 0px; padding: 12px; border-radius: 16px; border: 1px solid rgba(129, 140, 248, 0.14); background: rgba(9, 14, 28, 0.72); box-shadow: rgba(255, 255, 255, 0.03) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="streamer"] .metrics, .dashboard-page[data-dashboard-role="mod"] .metrics, .dashboard-page[data-dashboard-role="streamer"] .live-health-grid, .dashboard-page[data-dashboard-role="mod"] .live-health-grid { gap: 14px; margin-top: 16px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: repeat(4, minmax(0px, 1fr)); } .dashboard-page[data-dashboard-role="streamer"] .metric, .dashboard-page[data-dashboard-role="mod"] .metric, .dashboard-page[data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-dashboard-role="mod"] .mod-v2-metric { min-height: 106px; padding: 15px; border-radius: 16px; border-color: rgba(129, 140, 248, 0.14); background: linear-gradient(rgba(18, 24, 42, 0.76), rgba(9, 14, 28, 0.72)); box-shadow: rgba(0, 0, 0, 0.24) 0px 12px 28px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="streamer"] .metricLabel, .dashboard-page[data-dashboard-role="mod"] .metricLabel { color: rgb(185, 196, 221); font-size: 0.72rem; letter-spacing: 0.07em; } .dashboard-page[data-dashboard-role="streamer"] .metricValue, .dashboard-page[data-dashboard-role="mod"] .metricValue { color: rgb(248, 251, 255); font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.05; } .dashboard-page[data-dashboard-role="streamer"] .metricDetail, .dashboard-page[data-dashboard-role="mod"] .metricDetail { color: rgb(200, 209, 230); } .dashboard-page[data-dashboard-role="streamer"] .dashboard-grid, .dashboard-page[data-dashboard-role="mod"] .dashboard-grid, .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { gap: 18px; margin-top: 18px; } .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="mod"] .panel { border-radius: 18px; border-color: rgba(129, 140, 248, 0.14); background: linear-gradient(rgba(18, 24, 42, 0.78), rgba(9, 14, 28, 0.73)); box-shadow: rgba(0, 0, 0, 0.3) 0px 16px 34px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="streamer"] .panel:hover, .dashboard-page[data-dashboard-role="mod"] .panel:hover { border-color: rgba(0, 229, 255, 0.24); box-shadow: rgba(0, 0, 0, 0.3) 0px 16px 34px, rgba(0, 229, 255, 0.08) 0px 0px 18px; transform: none; } .dashboard-page[data-dashboard-role="streamer"] .panel-heading, .dashboard-page[data-dashboard-role="mod"] .panel-heading { gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom-color: rgba(129, 140, 248, 0.12); } .dashboard-page[data-dashboard-role="streamer"] .panel-heading h2, .dashboard-page[data-dashboard-role="mod"] .panel-heading h2 { color: rgb(248, 251, 255); font-size: 1.04rem; } .dashboard-page[data-dashboard-role="streamer"] .eyebrow, .dashboard-page[data-dashboard-role="mod"] .eyebrow, .dashboard-page[data-dashboard-role="streamer"] .panel-kicker, .dashboard-page[data-dashboard-role="mod"] .panel-kicker, .dashboard-page[data-dashboard-role="streamer"] .card-label, .dashboard-page[data-dashboard-role="mod"] .card-label, .dashboard-page[data-dashboard-role="streamer"] th, .dashboard-page[data-dashboard-role="mod"] th, .dashboard-page[data-dashboard-role="streamer"] .overlay-url-field > span, .dashboard-page[data-dashboard-role="mod"] .overlay-url-field > span, .dashboard-page[data-dashboard-role="streamer"] .field-group > span, .dashboard-page[data-dashboard-role="mod"] .field-group > span { color: rgb(188, 200, 228); } .dashboard-page[data-dashboard-role="streamer"] .feedItem, .dashboard-page[data-dashboard-role="mod"] .feedItem, .dashboard-page[data-dashboard-role="streamer"] .reviewItem, .dashboard-page[data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-dashboard-role="streamer"] .overlay-link-card, .dashboard-page[data-dashboard-role="mod"] .overlay-link-card, .dashboard-page[data-dashboard-role="streamer"] .discord-card, .dashboard-page[data-dashboard-role="mod"] .discord-card, .dashboard-page[data-dashboard-role="streamer"] .alert-asset-upload, .dashboard-page[data-dashboard-role="mod"] .alert-asset-upload, .dashboard-page[data-dashboard-role="streamer"] .alert-slider-control, .dashboard-page[data-dashboard-role="mod"] .alert-slider-control, .dashboard-page[data-dashboard-role="mod"] .mod-v2-stream-col, .dashboard-page[data-dashboard-role="mod"] .mod-v2-aux-card { border-radius: 14px; border-color: rgba(129, 140, 248, 0.13); background: radial-gradient(circle at right top, rgba(0, 229, 255, 0.04), transparent 44%), rgba(5, 9, 20, 0.58); box-shadow: none; } .dashboard-page[data-dashboard-role="streamer"] .messageText, .dashboard-page[data-dashboard-role="mod"] .messageText, .dashboard-page[data-dashboard-role="streamer"] table, .dashboard-page[data-dashboard-role="mod"] table { color: rgb(237, 243, 255); } .dashboard-page[data-dashboard-role="streamer"] td, .dashboard-page[data-dashboard-role="mod"] td, .dashboard-page[data-dashboard-role="streamer"] th, .dashboard-page[data-dashboard-role="mod"] th { border-bottom-color: rgba(129, 140, 248, 0.11); } .dashboard-page[data-dashboard-role="streamer"] input, .dashboard-page[data-dashboard-role="mod"] input, .dashboard-page[data-dashboard-role="streamer"] select, .dashboard-page[data-dashboard-role="mod"] select, .dashboard-page[data-dashboard-role="streamer"] textarea, .dashboard-page[data-dashboard-role="mod"] textarea { border-color: rgba(129, 140, 248, 0.17); background: rgba(3, 7, 17, 0.72); color: rgb(238, 243, 255); } .dashboard-page[data-dashboard-role="streamer"] .alert-slider-grid, .dashboard-page[data-dashboard-role="mod"] .alert-slider-grid { gap: 10px; } .dashboard-page[data-dashboard-role="streamer"] .alert-slider-control input[type="range"], .dashboard-page[data-dashboard-role="mod"] .alert-slider-control input[type="range"] { height: 8px; box-shadow: rgba(255, 255, 255, 0.04) 0px 0px 0px 1px inset; } .dashboard-page[data-dashboard-role="streamer"] .alert-slider-control input[type="range"]::-webkit-slider-thumb, .dashboard-page[data-dashboard-role="mod"] .alert-slider-control input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; } @media (max-width: 980px){.dashboard-page[data-dashboard-role="streamer"] .shell.wrap, .dashboard-page[data-dashboard-role="mod"] .shell.wrap { width: min(1280px, 100% - 32px); padding-top: 22px; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-dashboard-role="mod"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr); padding: 18px; } .dashboard-page[data-dashboard-role="streamer"] .hero-links, .dashboard-page[data-dashboard-role="mod"] .hero-links { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } .dashboard-page[data-dashboard-role="streamer"] .metrics, .dashboard-page[data-dashboard-role="mod"] .metrics, .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .dashboard-page[data-dashboard-role="streamer"] .dashboard-grid, .dashboard-page[data-dashboard-role="mod"] .dashboard-grid, .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="mod"] .panel, .dashboard-page[data-dashboard-role="streamer"] .panel-full, .dashboard-page[data-dashboard-role="mod"] .panel-full { grid-column: auto; } } @media (max-width: 640px){.dashboard-page[data-dashboard-role="streamer"] .shell.wrap, .dashboard-page[data-dashboard-role="mod"] .shell.wrap { width: min(1280px, 100% - 24px); padding-bottom: 78px; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-dashboard-role="mod"] .hero.topbar { grid-template-columns: 1fr; gap: 14px; padding: 16px; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-dashboard-role="mod"] .hero-avatar-ring { width: 76px; height: 76px; } .dashboard-page[data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-dashboard-role="mod"] .hero h1 { font-size: clamp(1.9rem, 9vw, 2.45rem); } .dashboard-page[data-dashboard-role="streamer"] .hero-switch-row, .dashboard-page[data-dashboard-role="mod"] .hero-switch-row, .dashboard-page[data-dashboard-role="streamer"] .hero-switch-nav, .dashboard-page[data-dashboard-role="mod"] .hero-switch-nav, .dashboard-page[data-dashboard-role="streamer"] .hero-links, .dashboard-page[data-dashboard-role="mod"] .hero-links, .dashboard-page[data-dashboard-role="streamer"] .ops-toolbar-main, .dashboard-page[data-dashboard-role="mod"] .ops-toolbar-main, .dashboard-page[data-dashboard-role="streamer"] .ops-toolbar-stats, .dashboard-page[data-dashboard-role="mod"] .ops-toolbar-stats { width: 100%; } .dashboard-page[data-dashboard-role="streamer"] .hero-switch-row, .dashboard-page[data-dashboard-role="mod"] .hero-switch-row { align-items: stretch; flex-direction: column; } .dashboard-page[data-dashboard-role="streamer"] .hero-switch-nav, .dashboard-page[data-dashboard-role="mod"] .hero-switch-nav, .dashboard-page[data-dashboard-role="streamer"] .hero-links, .dashboard-page[data-dashboard-role="mod"] .hero-links, .dashboard-page[data-dashboard-role="streamer"] .ops-toolbar-main, .dashboard-page[data-dashboard-role="mod"] .ops-toolbar-main { display: grid; grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="streamer"] .nav-btn, .dashboard-page[data-dashboard-role="mod"] .nav-btn, .dashboard-page[data-dashboard-role="streamer"] .btn, .dashboard-page[data-dashboard-role="mod"] .btn, .dashboard-page[data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-dashboard-role="mod"] .button-primary { min-width: 0px; white-space: normal; } .dashboard-page[data-dashboard-role="streamer"] .metrics, .dashboard-page[data-dashboard-role="mod"] .metrics, .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics, .dashboard-page[data-dashboard-role="streamer"] .alert-asset-grid, .dashboard-page[data-dashboard-role="streamer"] .alert-slider-grid, .dashboard-page[data-dashboard-role="streamer"] .overlay-links-grid, .dashboard-page[data-dashboard-role="mod"] .mod-discord-grid, .dashboard-page[data-dashboard-role="mod"] .discord-form-grid { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="streamer"] .field-group, .dashboard-page[data-dashboard-role="mod"] .field-group, .dashboard-page[data-dashboard-role="streamer"] .field-group-wide, .dashboard-page[data-dashboard-role="mod"] .field-group-wide { grid-column: auto; } .dashboard-page[data-dashboard-role="streamer"] .panel-heading, .dashboard-page[data-dashboard-role="mod"] .panel-heading, .dashboard-page[data-dashboard-role="streamer"] .overlay-link-card-head, .dashboard-page[data-dashboard-role="mod"] .overlay-link-card-head { display: grid; } } .dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(1280px, 100% - 48px); padding-bottom: 88px; } .dashboard-page[data-dashboard-role="operator"] .shell.wrap > .card { background: transparent; } .dashboard-page[data-dashboard-role="operator"] .hero.top { margin-bottom: 22px; padding: 26px 28px; border-radius: 20px; border-color: rgba(129, 140, 248, 0.18); box-shadow: rgba(0, 0, 0, 0.34) 0px 18px 46px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="operator"] .hero.top::after { content: ""; position: absolute; right: 30px; bottom: 24px; display: block; width: 44px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 45, 154, 0.9), rgba(0, 229, 255, 0.9)); box-shadow: rgba(255, 45, 154, 0.28) 0px 0px 14px, rgba(0, 229, 255, 0.18) 0px 0px 18px; opacity: 0.82; } .dashboard-page[data-dashboard-role="operator"] .hero h1 { color: rgb(248, 251, 255); font-size: clamp(2.2rem, 4vw, 3.75rem); } .dashboard-page[data-dashboard-role="operator"] .dashboard-subtitle { color: rgb(240, 245, 255); } .dashboard-page[data-dashboard-role="operator"] .hero-copy { color: rgb(200, 209, 230); } .dashboard-page[data-dashboard-role="operator"] .summaryGrid { gap: 16px; margin-bottom: 18px; } .dashboard-page[data-dashboard-role="operator"] .tabs { gap: 10px; margin: 4px 0px 18px; } .dashboard-page[data-dashboard-role="operator"] .grid, .dashboard-page[data-dashboard-role="operator"] .row2, .dashboard-page[data-dashboard-role="operator"] .section { gap: 18px; } .dashboard-page[data-dashboard-role="operator"] .card, .dashboard-page[data-dashboard-role="operator"] .summaryCard, .dashboard-page[data-dashboard-role="operator"] .setupPanel { min-width: 0px; border-radius: 18px; border-color: rgba(129, 140, 248, 0.16); background: linear-gradient(rgba(18, 24, 42, 0.78), rgba(9, 14, 28, 0.73)); box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 34px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="operator"] .summaryCard { min-height: 106px; padding: 15px; } .dashboard-page[data-dashboard-role="operator"] .summaryLabel, .dashboard-page[data-dashboard-role="operator"] th, .dashboard-page[data-dashboard-role="operator"] label > .muted { color: rgb(188, 200, 228); } .dashboard-page[data-dashboard-role="operator"] .summaryValue, .dashboard-page[data-dashboard-role="operator"] h2, .dashboard-page[data-dashboard-role="operator"] h3, .dashboard-page[data-dashboard-role="operator"] table { color: rgb(243, 247, 255); } .dashboard-page[data-dashboard-role="operator"] .pill, .dashboard-page[data-dashboard-role="operator"] .status-pill, .dashboard-page[data-dashboard-role="operator"] .badge, .dashboard-page[data-dashboard-role="operator"] .runtime-pill { background: rgba(8, 13, 28, 0.72); color: rgb(217, 225, 247); box-shadow: none; } .dashboard-page[data-dashboard-role="operator"] .tab, .dashboard-page[data-dashboard-role="operator"] .nav-btn, .dashboard-page[data-dashboard-role="operator"] .btn, .dashboard-page[data-dashboard-role="operator"] .button-secondary, .dashboard-page[data-dashboard-role="operator"] .button-primary { min-height: 36px; border-radius: 10px; border-color: rgba(129, 140, 248, 0.18); } .dashboard-page[data-dashboard-role="operator"] .tab.active, .dashboard-page[data-dashboard-role="operator"] .nav-btn.active { border-color: rgba(0, 229, 255, 0.36); background: rgba(0, 229, 255, 0.12); color: rgb(247, 251, 255); } .dashboard-page[data-dashboard-role="operator"] .alert-slider-control { border-radius: 14px; border-color: rgba(129, 140, 248, 0.13); background: radial-gradient(circle at right top, rgba(0, 229, 255, 0.04), transparent 44%), rgba(5, 9, 20, 0.58); } @media (max-width: 900px){.dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(1280px, 100% - 32px); } } @media (max-width: 560px){.dashboard-page[data-dashboard-role="operator"] .shell.wrap { width: min(1280px, 100% - 24px); } .dashboard-page[data-dashboard-role="operator"] .hero.top { padding: 16px; } .dashboard-page[data-dashboard-role="operator"] .hero.top::after { right: 18px; bottom: 16px; } .dashboard-page[data-dashboard-role="operator"] .card { overflow: auto; } .dashboard-page[data-dashboard-role="operator"] .card > .row { display: grid; grid-template-columns: 1fr; justify-items: start; } .dashboard-page[data-dashboard-role="operator"] table { min-width: 560px; } } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-card { display: grid; gap: 12px; } .dashboard-page[data-dashboard-role="operator"] .moderation-live-row { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-head h3 { margin: 2px 0px 0px; font-size: 1.02rem; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-copy { margin-top: 6px; font-size: 0.78rem; line-height: 1.45; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-secret-row, .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-send-row { display: grid; gap: 10px; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-send-row { grid-template-columns: minmax(0px, 1fr) 168px; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-secret-row input, .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-send-row input { width: 100%; min-width: 0px; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-history-label { margin-top: 2px; } .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-history { min-height: 48px; max-height: 150px; margin: 0px; overflow: auto; } .dashboard-page[data-dashboard-role="operator"] .diagnostic-collapse, .dashboard-page[data-dashboard-role="operator"] .diagnostic-only { display: none !important; } @media (max-width: 640px){.dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-head, .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-send-row { display: grid; grid-template-columns: 1fr; } } .dashboard-page[data-dashboard-role="operator"], .dashboard-page[data-dashboard-role="streamer"], .dashboard-page[data-dashboard-role="mod"] { font-size: var(--ui-body-size); } .dashboard-page[data-dashboard-role="operator"] .shell.wrap, .dashboard-page[data-dashboard-role="streamer"] .app-shell, .dashboard-page[data-dashboard-role="mod"] .app-shell { padding-bottom: 46px; } .dashboard-page[data-dashboard-role="operator"] .hero.top, .dashboard-page[data-dashboard-role="streamer"] .hero, .dashboard-page[data-dashboard-role="streamer"] .topbar, .dashboard-page[data-dashboard-role="mod"] .hero, .dashboard-page[data-dashboard-role="mod"] .topbar { border-radius: var(--ui-radius-card) !important; } .dashboard-page[data-dashboard-role="operator"] .hero.top::after, .dashboard-page[data-dashboard-role="streamer"] .hero::after, .dashboard-page[data-dashboard-role="mod"] .hero::after { border-radius: var(--ui-radius-control) !important; } .dashboard-page[data-dashboard-role="operator"] .hero h1, .dashboard-page[data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-dashboard-role="mod"] .hero h1 { font-size: var(--ui-title-size); letter-spacing: 0px; } .dashboard-page[data-dashboard-role="operator"] h2, .dashboard-page[data-dashboard-role="operator"] h3, .dashboard-page[data-dashboard-role="streamer"] h2, .dashboard-page[data-dashboard-role="streamer"] h3, .dashboard-page[data-dashboard-role="mod"] h2, .dashboard-page[data-dashboard-role="mod"] h3, .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-head h3 { font-size: var(--ui-section-size); line-height: 1.25; letter-spacing: 0px; } .dashboard-page[data-dashboard-role="operator"] p, .dashboard-page[data-dashboard-role="operator"] td, .dashboard-page[data-dashboard-role="operator"] input, .dashboard-page[data-dashboard-role="operator"] select, .dashboard-page[data-dashboard-role="operator"] textarea, .dashboard-page[data-dashboard-role="streamer"] p, .dashboard-page[data-dashboard-role="streamer"] td, .dashboard-page[data-dashboard-role="streamer"] input, .dashboard-page[data-dashboard-role="streamer"] select, .dashboard-page[data-dashboard-role="streamer"] textarea, .dashboard-page[data-dashboard-role="mod"] p, .dashboard-page[data-dashboard-role="mod"] td, .dashboard-page[data-dashboard-role="mod"] input, .dashboard-page[data-dashboard-role="mod"] select, .dashboard-page[data-dashboard-role="mod"] textarea { font-size: var(--ui-body-size); } .dashboard-page[data-dashboard-role="operator"] .muted, .dashboard-page[data-dashboard-role="operator"] .summaryLabel, .dashboard-page[data-dashboard-role="operator"] .metricLabel, .dashboard-page[data-dashboard-role="operator"] .card-label, .dashboard-page[data-dashboard-role="operator"] th, .dashboard-page[data-dashboard-role="streamer"] .muted, .dashboard-page[data-dashboard-role="streamer"] .metricLabel, .dashboard-page[data-dashboard-role="streamer"] .panel-kicker, .dashboard-page[data-dashboard-role="streamer"] .field-group > span, .dashboard-page[data-dashboard-role="streamer"] th, .dashboard-page[data-dashboard-role="mod"] .muted, .dashboard-page[data-dashboard-role="mod"] .metricLabel, .dashboard-page[data-dashboard-role="mod"] .panel-kicker, .dashboard-page[data-dashboard-role="mod"] .field-group > span, .dashboard-page[data-dashboard-role="mod"] th { color: rgb(196, 205, 227); font-size: var(--ui-label-size); letter-spacing: 0.02em; } .dashboard-page[data-dashboard-role="operator"] .dashboard-subtitle, .dashboard-page[data-dashboard-role="operator"] .hero-copy, .dashboard-page[data-dashboard-role="streamer"] .hero-copy, .dashboard-page[data-dashboard-role="mod"] .hero-copy { color: rgb(212, 220, 240); } .dashboard-page[data-dashboard-role="operator"] .grid, .dashboard-page[data-dashboard-role="operator"] .row2, .dashboard-page[data-dashboard-role="operator"] .section, .dashboard-page[data-dashboard-role="operator"] .summaryGrid, .dashboard-page[data-dashboard-role="streamer"] .grid, .dashboard-page[data-dashboard-role="streamer"] .row2, .dashboard-page[data-dashboard-role="streamer"] .section, .dashboard-page[data-dashboard-role="streamer"] .metrics-grid, .dashboard-page[data-dashboard-role="mod"] .grid, .dashboard-page[data-dashboard-role="mod"] .row2, .dashboard-page[data-dashboard-role="mod"] .section, .dashboard-page[data-dashboard-role="mod"] .metrics-grid { gap: var(--ui-gap) !important; } .dashboard-page[data-dashboard-role="operator"] .tabs, .dashboard-page[data-dashboard-role="streamer"] .tabs, .dashboard-page[data-dashboard-role="mod"] .tabs, .dashboard-page[data-dashboard-role="operator"] .discord-actions, .dashboard-page[data-dashboard-role="streamer"] .discord-actions, .dashboard-page[data-dashboard-role="mod"] .discord-actions, .dashboard-page[data-dashboard-role="operator"] .connection-button-row, .dashboard-page[data-dashboard-role="streamer"] .connection-button-row, .dashboard-page[data-dashboard-role="mod"] .connection-button-row { gap: var(--ui-gap-tight) !important; } .dashboard-page[data-dashboard-role="operator"] .card, .dashboard-page[data-dashboard-role="operator"] .summaryCard, .dashboard-page[data-dashboard-role="operator"] .setupPanel, .dashboard-page[data-dashboard-role="operator"] .reviewItem, .dashboard-page[data-dashboard-role="operator"] .feedItem, .dashboard-page[data-dashboard-role="operator"] .overlay-link-card, .dashboard-page[data-dashboard-role="operator"] .dashboard-discord-announce-card, .dashboard-page[data-dashboard-role="operator"] .alert-slider-control, .dashboard-page[data-dashboard-role="operator"] .alert-asset-upload, .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="streamer"] .metric, .dashboard-page[data-dashboard-role="streamer"] .reviewItem, .dashboard-page[data-dashboard-role="streamer"] .feedItem, .dashboard-page[data-dashboard-role="streamer"] .overlay-link-card, .dashboard-page[data-dashboard-role="streamer"] .discord-card, .dashboard-page[data-dashboard-role="streamer"] .alert-slider-control, .dashboard-page[data-dashboard-role="streamer"] .alert-asset-upload, .dashboard-page[data-dashboard-role="streamer"] .setupPanel, .dashboard-page[data-dashboard-role="mod"] .panel, .dashboard-page[data-dashboard-role="mod"] .metric, .dashboard-page[data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-dashboard-role="mod"] .feedItem, .dashboard-page[data-dashboard-role="mod"] .overlay-link-card, .dashboard-page[data-dashboard-role="mod"] .discord-card, .dashboard-page[data-dashboard-role="mod"] .alert-slider-control, .dashboard-page[data-dashboard-role="mod"] .setupPanel { border-color: rgba(129, 140, 248, 0.16); border-radius: var(--ui-radius-card) !important; padding: var(--ui-card-padding) !important; } .dashboard-page[data-dashboard-role="operator"] .card, .dashboard-page[data-dashboard-role="operator"] .setupPanel, .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="mod"] .panel { padding: var(--ui-card-padding-lg) !important; } .dashboard-page[data-dashboard-role="operator"] button, .dashboard-page[data-dashboard-role="operator"] .btn, .dashboard-page[data-dashboard-role="operator"] .button-primary, .dashboard-page[data-dashboard-role="operator"] .button-secondary, .dashboard-page[data-dashboard-role="operator"] .ghost-button, .dashboard-page[data-dashboard-role="operator"] .tab, .dashboard-page[data-dashboard-role="operator"] .nav-btn, .dashboard-page[data-dashboard-role="streamer"] button, .dashboard-page[data-dashboard-role="streamer"] .btn, .dashboard-page[data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-dashboard-role="streamer"] .tab, .dashboard-page[data-dashboard-role="streamer"] .nav-btn, .dashboard-page[data-dashboard-role="mod"] button, .dashboard-page[data-dashboard-role="mod"] .btn, .dashboard-page[data-dashboard-role="mod"] .button-primary, .dashboard-page[data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-dashboard-role="mod"] .tab, .dashboard-page[data-dashboard-role="mod"] .nav-btn { min-height: 36px; font-weight: 800; letter-spacing: 0px; border-radius: var(--ui-radius-control) !important; padding: 9px 13px !important; font-size: 0.82rem !important; } .dashboard-page[data-dashboard-role="operator"] .button-primary, .dashboard-page[data-dashboard-role="operator"] button.button-primary, .dashboard-page[data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-dashboard-role="streamer"] button.button-primary, .dashboard-page[data-dashboard-role="mod"] .button-primary, .dashboard-page[data-dashboard-role="mod"] button.button-primary { border-color: rgba(255, 45, 154, 0.42); background: linear-gradient(135deg, rgba(255, 45, 154, 0.9), rgba(0, 229, 255, 0.72)); color: rgb(7, 16, 29); box-shadow: rgba(255, 45, 154, 0.16) 0px 0px 16px; } .dashboard-page[data-dashboard-role="operator"] .btn, .dashboard-page[data-dashboard-role="operator"] .button-secondary, .dashboard-page[data-dashboard-role="operator"] .tab, .dashboard-page[data-dashboard-role="operator"] .nav-btn, .dashboard-page[data-dashboard-role="streamer"] .btn, .dashboard-page[data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-dashboard-role="streamer"] .tab, .dashboard-page[data-dashboard-role="streamer"] .nav-btn, .dashboard-page[data-dashboard-role="mod"] .btn, .dashboard-page[data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-dashboard-role="mod"] .tab, .dashboard-page[data-dashboard-role="mod"] .nav-btn { border-color: rgba(129, 140, 248, 0.22); background: rgba(9, 14, 28, 0.72); color: rgb(237, 243, 255); box-shadow: none; } .dashboard-page[data-dashboard-role="operator"] .ghost-button, .dashboard-page[data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-dashboard-role="mod"] .ghost-button { border-color: rgba(129, 140, 248, 0.18); background: transparent; color: rgb(216, 226, 248); box-shadow: none; } .dashboard-page[data-dashboard-role="operator"] .tab.active, .dashboard-page[data-dashboard-role="operator"] .nav-btn.active, .dashboard-page[data-dashboard-role="streamer"] .tab.active, .dashboard-page[data-dashboard-role="streamer"] .nav-btn.active, .dashboard-page[data-dashboard-role="mod"] .tab.active, .dashboard-page[data-dashboard-role="mod"] .nav-btn.active { border-color: rgba(0, 229, 255, 0.42); background: rgba(0, 229, 255, 0.13); color: rgb(248, 251, 255); } .dashboard-page[data-dashboard-role="operator"] input, .dashboard-page[data-dashboard-role="operator"] select, .dashboard-page[data-dashboard-role="operator"] textarea, .dashboard-page[data-dashboard-role="streamer"] input, .dashboard-page[data-dashboard-role="streamer"] select, .dashboard-page[data-dashboard-role="streamer"] textarea, .dashboard-page[data-dashboard-role="mod"] input, .dashboard-page[data-dashboard-role="mod"] select, .dashboard-page[data-dashboard-role="mod"] textarea { border-color: rgba(129, 140, 248, 0.18); border-radius: var(--ui-radius-control) !important; } .dashboard-page[data-dashboard-role="operator"] .pill, .dashboard-page[data-dashboard-role="operator"] .status-pill, .dashboard-page[data-dashboard-role="operator"] .badge, .dashboard-page[data-dashboard-role="operator"] .runtime-pill, .dashboard-page[data-dashboard-role="operator"] .hero-identity-chip, .dashboard-page[data-dashboard-role="operator"] .origin-chip, .dashboard-page[data-dashboard-role="operator"] .platform-live-chip, .dashboard-page[data-dashboard-role="streamer"] .pill, .dashboard-page[data-dashboard-role="streamer"] .status-pill, .dashboard-page[data-dashboard-role="streamer"] .badge, .dashboard-page[data-dashboard-role="streamer"] .runtime-pill, .dashboard-page[data-dashboard-role="streamer"] .hero-identity-chip, .dashboard-page[data-dashboard-role="streamer"] .origin-chip, .dashboard-page[data-dashboard-role="streamer"] .platform-live-chip, .dashboard-page[data-dashboard-role="mod"] .pill, .dashboard-page[data-dashboard-role="mod"] .status-pill, .dashboard-page[data-dashboard-role="mod"] .badge, .dashboard-page[data-dashboard-role="mod"] .runtime-pill, .dashboard-page[data-dashboard-role="mod"] .hero-identity-chip, .dashboard-page[data-dashboard-role="mod"] .origin-chip, .dashboard-page[data-dashboard-role="mod"] .platform-live-chip { min-height: 24px; line-height: 1.2; font-weight: 800; box-shadow: none; border-radius: var(--ui-radius-control) !important; padding: 4px 9px !important; font-size: var(--ui-label-size) !important; } .dashboard-page[data-dashboard-role="operator"] .badge.good, .dashboard-page[data-dashboard-role="operator"] .status.good, .dashboard-page[data-dashboard-role="operator"] .badge-green, .dashboard-page[data-dashboard-role="operator"] .dot.ok, .dashboard-page[data-dashboard-role="operator"] .status-live, .dashboard-page[data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-dashboard-role="streamer"] .status.good, .dashboard-page[data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-dashboard-role="streamer"] .dot.ok, .dashboard-page[data-dashboard-role="streamer"] .status-live, .dashboard-page[data-dashboard-role="mod"] .badge.good, .dashboard-page[data-dashboard-role="mod"] .status.good, .dashboard-page[data-dashboard-role="mod"] .badge-green, .dashboard-page[data-dashboard-role="mod"] .dot.ok, .dashboard-page[data-dashboard-role="mod"] .status-live { border-color: rgba(65, 214, 157, 0.32) !important; background: rgba(65, 214, 157, 0.1) !important; color: var(--ui-success) !important; } .dashboard-page[data-dashboard-role="operator"] .badge.warn, .dashboard-page[data-dashboard-role="operator"] .status.warn, .dashboard-page[data-dashboard-role="operator"] .platform-live-chip-warning, .dashboard-page[data-dashboard-role="streamer"] .badge.warn, .dashboard-page[data-dashboard-role="streamer"] .status.warn, .dashboard-page[data-dashboard-role="streamer"] .platform-live-chip-warning, .dashboard-page[data-dashboard-role="mod"] .badge.warn, .dashboard-page[data-dashboard-role="mod"] .status.warn, .dashboard-page[data-dashboard-role="mod"] .platform-live-chip-warning { border-color: rgba(255, 210, 107, 0.34) !important; background: rgba(255, 210, 107, 0.1) !important; color: var(--ui-warning) !important; } .dashboard-page[data-dashboard-role="operator"] .badge.bad, .dashboard-page[data-dashboard-role="operator"] .status.bad, .dashboard-page[data-dashboard-role="operator"] .dot.bad, .dashboard-page[data-dashboard-role="operator"] .status-offline, .dashboard-page[data-dashboard-role="streamer"] .badge.bad, .dashboard-page[data-dashboard-role="streamer"] .status.bad, .dashboard-page[data-dashboard-role="streamer"] .dot.bad, .dashboard-page[data-dashboard-role="streamer"] .status-offline, .dashboard-page[data-dashboard-role="mod"] .badge.bad, .dashboard-page[data-dashboard-role="mod"] .status.bad, .dashboard-page[data-dashboard-role="mod"] .dot.bad, .dashboard-page[data-dashboard-role="mod"] .status-offline { border-color: rgba(255, 77, 77, 0.34) !important; background: rgba(255, 77, 77, 0.1) !important; color: var(--ui-error) !important; } .dashboard-page[data-dashboard-role="operator"] .badge.active, .dashboard-page[data-dashboard-role="operator"] .status.active, .dashboard-page[data-dashboard-role="operator"] .live-indicator, .dashboard-page[data-dashboard-role="operator"] .origin-source, .dashboard-page[data-dashboard-role="operator"] .platform-live-chip-ready, .dashboard-page[data-dashboard-role="streamer"] .badge.active, .dashboard-page[data-dashboard-role="streamer"] .status.active, .dashboard-page[data-dashboard-role="streamer"] .live-indicator, .dashboard-page[data-dashboard-role="streamer"] .origin-source, .dashboard-page[data-dashboard-role="streamer"] .platform-live-chip-ready, .dashboard-page[data-dashboard-role="mod"] .badge.active, .dashboard-page[data-dashboard-role="mod"] .status.active, .dashboard-page[data-dashboard-role="mod"] .live-indicator, .dashboard-page[data-dashboard-role="mod"] .origin-source, .dashboard-page[data-dashboard-role="mod"] .platform-live-chip-ready { border-color: rgba(0, 229, 255, 0.34) !important; background: rgba(0, 229, 255, 0.1) !important; color: var(--ui-active) !important; } @media (max-width: 760px){.dashboard-page[data-dashboard-role="operator"] .card, .dashboard-page[data-dashboard-role="operator"] .setupPanel, .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="mod"] .panel { padding: var(--ui-card-padding) !important; } } .dashboard-page[data-dashboard-role="operator"] .hero.top, .dashboard-page[data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-dashboard-role="mod"] .hero.topbar { backdrop-filter: blur(18px); box-shadow: rgba(0, 0, 0, 0.42) 0px 24px 60px, rgba(0, 229, 255, 0.08) 0px 0px 0px 1px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="operator"] .hero.top::before, .dashboard-page[data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-dashboard-role="mod"] .hero.topbar::before { filter: saturate(1.06) contrast(1.05); } .dashboard-page[data-dashboard-role="operator"] .hero h1, .dashboard-page[data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-dashboard-role="mod"] .hero h1 { text-shadow: rgba(0, 229, 255, 0.16) 0px 0px 28px; } .streamer-action-feedback { grid-column: 1 / -1; min-height: 22px; color: rgb(203, 214, 239); font-size: var(--ui-label-size); font-weight: 800; } .streamer-action-feedback.good { color: var(--ui-success); } .streamer-action-feedback.bad { color: var(--ui-error); } .dashboard-embedded-workspace:not([open]) .muted, .dashboard-embedded-workspace .panel-collapse:not([open]) .muted { max-width: 680px; } .dashboard-page .alert-slider-control { transition: border-color 160ms, background 160ms, transform 160ms; } .dashboard-page .alert-slider-control:focus-within, .dashboard-page .alert-slider-control:hover { transform: translateY(-1px); border-color: rgba(0, 229, 255, 0.28) !important; } .dashboard-page .alert-slider-control output { min-width: 52px; padding: 3px 8px; border-radius: var(--ui-radius-control); background: rgba(0, 229, 255, 0.1); color: rgb(248, 251, 255); text-align: center; box-shadow: rgba(0, 229, 255, 0.18) 0px 0px 0px 1px inset; } .dashboard-page input[type="range"]:active::-webkit-slider-thumb { box-shadow: rgba(0, 229, 255, 0.14) 0px 0px 0px 5px, rgba(255, 45, 154, 0.4) 0px 0px 16px; } .dashboard-page button, .dashboard-page .btn, .dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .nav-btn, .dashboard-page .tab { transition: transform 140ms, border-color 140ms, box-shadow 140ms, background 140ms, opacity 140ms; } .dashboard-page button:hover, .dashboard-page .btn:hover, .dashboard-page .button-primary:hover, .dashboard-page .button-secondary:hover, .dashboard-page .ghost-button:hover, .dashboard-page .nav-btn:hover, .dashboard-page .tab:hover { transform: translateY(-1px); box-shadow: rgba(0, 229, 255, 0.12) 0px 0px 18px; } .dashboard-page button:active, .dashboard-page .btn:active, .dashboard-page .button-primary:active, .dashboard-page .button-secondary:active, .dashboard-page .ghost-button:active, .dashboard-page .nav-btn:active, .dashboard-page .tab:active { transform: translateY(0px) scale(0.985); } .dashboard-page button:disabled, .dashboard-page .btn:disabled, .dashboard-page .button-primary:disabled, .dashboard-page .button-secondary:disabled, .dashboard-page .ghost-button:disabled { cursor: not-allowed; opacity: 0.48; transform: none; box-shadow: none !important; } .dashboard-page .panel:hover, .dashboard-page .card:hover, .dashboard-page .summaryCard:hover, .dashboard-page .metric:hover { border-color: rgba(0, 229, 255, 0.22); box-shadow: rgba(0, 0, 0, 0.32) 0px 18px 42px, rgba(0, 229, 255, 0.06) 0px 0px 18px; } .dashboard-page[data-dashboard-role="streamer"] #platformHealthPanel, .dashboard-page[data-dashboard-role="streamer"] #chatPanel, .dashboard-page[data-dashboard-role="streamer"] #alertsPanel, .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel, .dashboard-page[data-dashboard-role="operator"] .stream-command-panel, .dashboard-page[data-dashboard-role="operator"] [data-section="stream"] .moderation-live-row .card, .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard { border-color: rgba(0, 229, 255, 0.22) !important; } .dashboard-page[data-dashboard-role="streamer"] #actionPanel, .dashboard-page[data-dashboard-role="streamer"] #jobsPanel, .dashboard-page[data-dashboard-role="operator"] [data-section="overview"] .card, .dashboard-page[data-dashboard-role="operator"] [data-section="actions"] .card { opacity: 0.9; } .dashboard-page[data-dashboard-role="mod"] #reviewPanel, .dashboard-page[data-dashboard-role="mod"] #reviewQueuePanel, .dashboard-page[data-dashboard-role="mod"] [id*="review" i], .dashboard-page[data-dashboard-role="mod"] [id*="queue" i] { box-shadow: rgba(0, 0, 0, 0.32) 0px 18px 42px, rgba(255, 210, 107, 0.07) 0px 0px 18px; border-color: rgba(255, 210, 107, 0.26) !important; } .dashboard-page .diagnostic-collapse, .dashboard-page .diagnostic-only, .dashboard-page details pre { opacity: 0.74; } @keyframes dashboardGlowSweep { 0% { opacity: 0; transform: translateX(-120%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } } @media (prefers-reduced-motion: reduce){.dashboard-page button, .dashboard-page .btn, .dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .panel, .dashboard-page .card, .dashboard-page .summaryCard, .dashboard-page .metric { transition: none; } } .dashboard-page[data-dashboard-role="operator"] [data-section="overview"] .card:not(.diagnostic-only), .dashboard-page[data-dashboard-role="operator"] [data-section="platforms"] #platformQuickStart, .dashboard-page[data-dashboard-role="operator"] [data-section="platforms"] .card:nth-of-type(3), .dashboard-page[data-dashboard-role="operator"] [data-section="actions"] .card, .dashboard-page[data-dashboard-role="operator"] [data-section="moderation"] .card { border-color: rgba(0, 229, 255, 0.18) !important; } .dashboard-page[data-dashboard-role="operator"] [data-section="events"] .card, .dashboard-page[data-dashboard-role="operator"] [data-section="overview"] .diagnostic-only, .dashboard-page[data-dashboard-role="operator"] [data-section="alerts"] details, .dashboard-page[data-dashboard-role="operator"] [data-section="platforms"] details, .dashboard-page[data-dashboard-role="operator"] [data-section="actions"] table { opacity: 0.76; } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card, .dashboard-page[data-dashboard-role="mod"] #modPanel { border-color: rgba(255, 210, 107, 0.32) !important; } .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-dashboard-role="mod"] #policyPanel { opacity: 0.88; } .account-chip .status { white-space: nowrap; } .dashboard-page { --surface-hero: rgba(10, 15, 31, 0.82); --surface-card: rgba(12, 18, 36, 0.76); --surface-card-strong: rgba(15, 22, 44, 0.9); --surface-border-soft: rgba(148, 163, 184, 0.13); --surface-border-live: rgba(0, 229, 255, 0.24); --surface-shadow: 0 18px 46px rgba(0, 0, 0, 0.32); --surface-shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.24); } .dashboard-page .hero.top, .dashboard-page .hero.topbar { position: relative; isolation: isolate; overflow: hidden; border-color: rgba(148, 163, 184, 0.16); background: radial-gradient(circle at 11% 34%, rgba(255, 45, 154, 0.12), transparent 24%), radial-gradient(circle at 78% 10%, rgba(0, 229, 255, 0.1), transparent 30%), linear-gradient(135deg, rgba(12, 18, 36, 0.92), rgba(9, 12, 24, 0.82)); box-shadow: rgba(0, 0, 0, 0.36) 0px 24px 70px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; backdrop-filter: blur(18px); } .dashboard-page .hero.topbar:has(.hero-utility-menu[open]) { overflow: visible; z-index: 30; } .dashboard-page .hero.top::after, .dashboard-page .hero.topbar::after { content: ""; position: absolute; inset: -42% -12% auto 4%; height: 170px; z-index: -1; pointer-events: none; opacity: 0.48; background: radial-gradient(circle at 18% 52%, rgba(255, 45, 154, 0.34), transparent 28%), radial-gradient(circle at 48% 44%, rgba(0, 229, 255, 0.24), transparent 32%), linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); filter: blur(18px); animation: 8s ease-in-out 0s infinite alternate none running premiumHeroAura; } .dashboard-page .hero.top::before, .dashboard-page .hero.topbar::before { opacity: 0.56; } .dashboard-page .hero-avatar-ring { box-shadow: rgba(255, 45, 154, 0.18) 0px 0px 28px, rgba(0, 229, 255, 0.1) 0px 0px 42px; } .dashboard-page .live-indicator, .dashboard-page .status-pill, .dashboard-page .status, .dashboard-page .hero-identity-chip { min-height: 26px; border-color: rgba(148, 163, 184, 0.18); background: rgba(8, 13, 28, 0.68); box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset; } .dashboard-page .live-indicator { gap: 7px; color: rgb(223, 251, 255); } .dashboard-page .live-dot.ok, .dashboard-page .dot.ok { box-shadow: rgba(34, 197, 94, 0.12) 0px 0px 0px 4px, rgba(34, 197, 94, 0.38) 0px 0px 16px; } .dashboard-page .live-indicator:has(.ok) { border-color: rgba(0, 229, 255, 0.28); color: rgb(232, 251, 255); } .dashboard-page .live-indicator:has(.ok)::after { content: "LIVE"; display: inline-flex; align-items: center; min-height: 18px; padding: 0px 7px; border-radius: 999px; background: linear-gradient(90deg, rgba(0, 229, 255, 0.18), rgba(255, 45, 154, 0.16)); color: rgb(234, 255, 255); font-size: 0.66rem; font-weight: 900; letter-spacing: 0px; } .dashboard-page .card, .dashboard-page .panel, .dashboard-page .summaryCard, .dashboard-page .metric, .dashboard-page .setupPanel, .dashboard-page .reviewItem, .dashboard-page .feedItem, .dashboard-page .overlay-link-card, .dashboard-page .dashboard-discord-announce-card, .dashboard-page .discord-card, .dashboard-page .section-command-card, .dashboard-page .streamer-action-card { border-color: var(--surface-border-soft); background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.055), transparent 34%), linear-gradient(rgba(16, 23, 44, 0.82), rgba(8, 12, 26, 0.76)); box-shadow: var(--surface-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.045); } .dashboard-page .panel:hover, .dashboard-page .card:hover, .dashboard-page .summaryCard:hover, .dashboard-page .metric:hover, .dashboard-page .setupPanel:hover, .dashboard-page .reviewItem:hover, .dashboard-page .feedItem:hover { border-color: rgba(0, 229, 255, 0.2); box-shadow: var(--surface-shadow), 0 0 22px rgba(0, 229, 255, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.055); } .dashboard-page .streamer-action-card { border-color: rgba(0, 229, 255, 0.24); background: radial-gradient(circle at 11% 2%, rgba(255, 45, 154, 0.12), transparent 32%), radial-gradient(circle at 92% 12%, rgba(0, 229, 255, 0.11), transparent 30%), linear-gradient(rgba(18, 26, 50, 0.92), rgba(8, 12, 26, 0.84)); } .dashboard-page .streamer-action-card.ready-wake, .dashboard-page.dashboard-wake .streamer-action-card { animation: 1.45s ease-out 0s 1 normal none running readyWakePulse; } .dashboard-page .streamer-action-feedback { border-color: rgba(148, 163, 184, 0.16); background: rgba(3, 7, 18, 0.42); color: rgb(207, 232, 240); } .dashboard-page .streamer-action-feedback.good { border-color: rgba(34, 197, 94, 0.3); color: rgb(215, 255, 230); box-shadow: rgba(34, 197, 94, 0.08) 0px 0px 18px; } .tester-feedback-status.warn { color: rgb(253, 230, 138); } .dashboard-page .streamer-primary-action, .dashboard-page #dashboardPrimaryTestAlert, .dashboard-page #streamerPrimaryTestAlert, .dashboard-page #dashboardStudioTestSettings, .dashboard-page #streamerStudioTestSettings { position: relative; overflow: hidden; border-color: rgba(255, 255, 255, 0.18); background: linear-gradient(100deg, rgb(255, 45, 154) 0%, rgb(180, 92, 255) 48%, rgb(0, 229, 255) 100%); color: rgb(255, 255, 255); box-shadow: rgba(255, 45, 154, 0.2) 0px 14px 30px, rgba(0, 229, 255, 0.1) 0px 0px 22px; } .dashboard-page .streamer-primary-action::after, .dashboard-page #dashboardPrimaryTestAlert::after, .dashboard-page #streamerPrimaryTestAlert::after, .dashboard-page #dashboardStudioTestSettings::after, .dashboard-page #streamerStudioTestSettings::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.28) 44%, transparent 68%); opacity: 0; transform: translateX(-120%); } .dashboard-page .streamer-primary-action:hover::after, .dashboard-page #dashboardPrimaryTestAlert:hover::after, .dashboard-page #streamerPrimaryTestAlert:hover::after, .dashboard-page #dashboardStudioTestSettings:hover::after, .dashboard-page #streamerStudioTestSettings:hover::after { animation: 720ms ease 0s 1 normal none running dashboardGlowSweep; } .dashboard-page .alert-studio-premium, .dashboard-page #dashboardAlertStudioCard { position: relative; background: radial-gradient(circle at 12% 0%, rgba(255, 45, 154, 0.13), transparent 34%), radial-gradient(circle at 88% 16%, rgba(0, 229, 255, 0.1), transparent 32%), linear-gradient(rgba(18, 25, 48, 0.94), rgba(8, 12, 26, 0.86)); box-shadow: rgba(0, 0, 0, 0.34) 0px 20px 54px, rgba(255, 45, 154, 0.055) 0px 0px 26px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset; border-color: rgba(255, 45, 154, 0.22) !important; } .dashboard-page .alert-studio-premium::before, .dashboard-page #dashboardAlertStudioCard::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 45, 154, 0.84), rgba(0, 229, 255, 0.72), transparent); opacity: 0.72; } .dashboard-page input[type="range"] { accent-color: rgb(0, 229, 255); cursor: pointer; } .dashboard-page input[type="range"]:hover, .dashboard-page input[type="range"]:focus-visible, .dashboard-page input[type="range"]:active { filter: drop-shadow(rgba(0, 229, 255, 0.22) 0px 0px 9px); } .dashboard-page .hype-value, .dashboard-page .slider-value, .dashboard-page output { color: rgb(232, 251, 255); font-weight: 800; } .dashboard-page[data-dashboard-role="mod"] #modPanel, .dashboard-page[data-dashboard-role="mod"] #reviewQueuePanel, .dashboard-page[data-dashboard-role="mod"] [id*="review" i], .dashboard-page[data-dashboard-role="mod"] [id*="queue" i] { position: relative; background: radial-gradient(circle at 12% 0%, rgba(255, 210, 107, 0.11), transparent 34%), radial-gradient(circle at 88% 18%, rgba(0, 229, 255, 0.08), transparent 30%), linear-gradient(rgba(18, 25, 45, 0.92), rgba(8, 12, 26, 0.82)); border-color: rgba(255, 210, 107, 0.32) !important; } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card::before, .dashboard-page[data-dashboard-role="mod"] #modPanel::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 210, 107, 0.78), rgba(0, 229, 255, 0.58), transparent); opacity: 0.7; } .dashboard-page .muted, .dashboard-page .metricDetail, .dashboard-page .summaryLabel, .dashboard-page .summaryCard .muted, .dashboard-page .card-label, .dashboard-page .eyebrow { color: rgba(218, 232, 241, 0.78); } @keyframes premiumHeroAura { 0% { transform: translate3d(-1.5%, 0px, 0px) scale(1); } 100% { transform: translate3d(1.5%, 4%, 0px) scale(1.03); } } @keyframes readyWakePulse { 0% { box-shadow: rgba(0, 0, 0, 0.3) 0px 18px 42px, rgba(0, 229, 255, 0) 0px 0px 0px; } 38% { box-shadow: rgba(0, 0, 0, 0.36) 0px 22px 58px, rgba(0, 229, 255, 0.18) 0px 0px 34px, rgba(255, 45, 154, 0.12) 0px 0px 42px; } 100% { box-shadow: rgba(0, 0, 0, 0.3) 0px 18px 42px, rgba(0, 229, 255, 0) 0px 0px 0px; } } @media (prefers-reduced-motion: reduce){.dashboard-page .hero.top::after, .dashboard-page .hero.topbar::after, .dashboard-page .streamer-action-card.ready-wake, .dashboard-page.dashboard-wake .streamer-action-card, .dashboard-page .streamer-primary-action:hover::after, .dashboard-page #dashboardPrimaryTestAlert:hover::after, .dashboard-page #streamerPrimaryTestAlert:hover::after, .dashboard-page #dashboardStudioTestSettings:hover::after, .dashboard-page #streamerStudioTestSettings:hover::after { animation: auto ease 0s 1 normal none running none; } } .dashboard-page .platform-indicator { min-width: 34px; justify-content: center; padding-inline: 8px; letter-spacing: 0px; white-space: nowrap; } .dashboard-page .platform-indicator.twitch { border-color: rgba(145, 70, 255, 0.3); background: rgba(145, 70, 255, 0.24); color: rgb(244, 232, 255); } .dashboard-page .platform-indicator.youtube { border-color: rgba(255, 0, 0, 0.32); background: rgba(255, 0, 0, 0.22); color: rgb(255, 228, 230); } .dashboard-page .platform-indicator.kick { border-color: rgba(34, 197, 94, 0.28); background: rgba(34, 197, 94, 0.2); color: rgb(220, 252, 231); } .dashboard-page .platform-indicator.discord { border-color: rgba(88, 101, 242, 0.3); background: rgba(88, 101, 242, 0.24); color: rgb(224, 231, 255); } .dashboard-page .platform-indicator.facebook { border-color: rgba(59, 130, 246, 0.32); background: rgba(59, 130, 246, 0.22); color: rgb(219, 234, 254); } .dashboard-page .platform-indicator.rumble { border-color: rgba(20, 184, 166, 0.3); background: rgba(20, 184, 166, 0.18); color: rgb(204, 251, 241); } .dashboard-page .platform-indicator.blaze, .dashboard-page .platform-indicator.custom { border-color: rgba(234, 88, 12, 0.34); background: rgba(234, 88, 12, 0.22); color: rgb(254, 215, 170); } .dashboard-page .chat-platform-key { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0px 12px; } .dashboard-page .chat-platform-key .platform-key-item { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 4px 9px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(7, 10, 18, 0.42); color: rgba(237, 240, 255, 0.86); font-size: 0.76rem; font-weight: 750; } .dashboard-page .platform-key-swatch { width: 10px; height: 10px; border-radius: 999px; background: var(--platform-color, #94a3b8); box-shadow: 0 0 12px color-mix(in srgb, var(--platform-color, #94a3b8) 52%, transparent); } .dashboard-page .chat-platform-row { position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--platform-color, #94a3b8) 13%, transparent), transparent 44%), rgba(255, 255, 255, 0.045); border-left: 4px solid var(--platform-color, rgba(148, 163, 184, 0.55)) !important; } .dashboard-page .chat-platform-row::after { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--platform-color, #94a3b8) 16%, transparent); } .dashboard-page .platform-color-twitch { --platform-color: #9146ff; } .dashboard-page .platform-color-youtube { --platform-color: #ff0000; } .dashboard-page .platform-color-kick { --platform-color: #22c55e; } .dashboard-page .platform-color-discord { --platform-color: #5865f2; } .dashboard-page .platform-color-facebook { --platform-color: #1877f2; } .dashboard-page .platform-color-rumble { --platform-color: #14b8a6; } .dashboard-page .platform-color-blaze, .dashboard-page .platform-color-custom { --platform-color: #ea580c; } .dashboard-page[data-dashboard-role="streamer"] .connection-status-panel { border-color: rgba(34, 197, 94, 0.22); } .connection-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .connection-summary-card { display: grid; gap: 10px; min-height: 130px; padding: 14px; border: 1px solid rgba(148, 163, 184, 0.13); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.06), transparent 34%), linear-gradient(rgba(13, 20, 40, 0.84), rgba(8, 12, 26, 0.76)); } .connection-summary-card.good { border-color: rgba(34, 197, 94, 0.22); } .connection-summary-card.warn { border-color: rgba(255, 210, 107, 0.24); } .connection-summary-card.bad { border-color: rgba(248, 113, 113, 0.22); } .dashboard-page[data-dashboard-role="mod"] main.shell { display: flex; flex-direction: column; } .dashboard-page[data-dashboard-role="mod"] .hero.topbar { order: 1; } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card { order: 2; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics { order: 3; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { order: 4; } .dashboard-page[data-dashboard-role="mod"] #discordComposerPanel { order: 5; } .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel { order: 6; } .dashboard-page[data-dashboard-role="mod"] #modPlatformStatusPanel { order: 7; } .dashboard-page[data-dashboard-role="mod"] .ops-toolbar { order: 8; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel { order: 9; } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card { padding: 20px; border-color: rgba(255, 210, 107, 0.34); background: radial-gradient(circle at 12% 0%, rgba(255, 210, 107, 0.13), transparent 34%), radial-gradient(circle at 86% 10%, rgba(0, 229, 255, 0.11), transparent 30%), linear-gradient(rgba(18, 26, 48, 0.94), rgba(8, 12, 26, 0.86)); box-shadow: rgba(0, 0, 0, 0.36) 0px 22px 58px, rgba(255, 210, 107, 0.08) 0px 0px 26px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="mod"] #modPrimaryRefreshQueue { background: linear-gradient(100deg, rgb(255, 210, 107) 0%, rgb(0, 229, 255) 100%); color: rgb(6, 17, 27); box-shadow: rgba(255, 210, 107, 0.18) 0px 14px 30px, rgba(0, 229, 255, 0.1) 0px 0px 22px; } .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { align-items: stretch; gap: 18px; } .dashboard-page[data-dashboard-role="mod"] #modPanel { order: 1; } .dashboard-page[data-dashboard-role="mod"] #chatPanel { order: 2; } .dashboard-page[data-dashboard-role="mod"] #actionPanel { order: 3; } .dashboard-page[data-dashboard-role="mod"] #policyPanel { order: 4; } .dashboard-page[data-dashboard-role="mod"] #modPanel { box-shadow: rgba(0, 0, 0, 0.34) 0px 22px 54px, rgba(255, 210, 107, 0.09) 0px 0px 28px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset; border-color: rgba(255, 210, 107, 0.38) !important; } .dashboard-page[data-dashboard-role="mod"] #chatPanel { border-color: rgba(0, 229, 255, 0.24); } .dashboard-page[data-dashboard-role="mod"] #actionPanel { border-color: rgba(129, 140, 248, 0.22); } .dashboard-page[data-dashboard-role="mod"] #policyPanel { opacity: 0.9; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel { opacity: 0.78; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel[open] { opacity: 1; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel > summary { cursor: pointer; list-style: none; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel > summary::-webkit-details-marker { display: none; } .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel .row { margin-top: 14px; } .dashboard-page[data-dashboard-role="mod"] .mod-announcements-panel, .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-dashboard-role="mod"] #modPlatformStatusPanel { border-color: rgba(0, 229, 255, 0.18); } .dashboard-page[data-dashboard-role="mod"] .reviewItem { transition: border-color 160ms, transform 160ms, box-shadow 160ms; } .dashboard-page[data-dashboard-role="mod"] .reviewItem:hover { transform: translateY(-1px); border-color: rgba(255, 210, 107, 0.24); } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar { min-height: 0px !important; padding: clamp(16px, 1.6vw, 22px) !important; gap: 16px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-wrap { width: clamp(76px, 8vw, 112px) !important; min-width: clamp(76px, 8vw, 112px) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-ring { width: clamp(58px, 6.4vw, 82px) !important; height: clamp(58px, 6.4vw, 82px) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero h1 { font-size: clamp(2.1rem, 4.5vw, 4rem) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-copy { max-width: 620px !important; margin-top: 6px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-identity-row { margin-top: 10px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-links { align-content: flex-start; max-width: 260px; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar { min-height: 0px !important; padding: clamp(18px, 2.1vw, 28px) clamp(20px, 3vw, 36px) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-main { gap: 10px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-main h1 { line-height: 0.98; font-size: clamp(2.2rem, 5vw, 4.3rem) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-copy { max-width: 680px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav { display: none; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-wrap { opacity: 0.86; } .workspace-nav .ghost-button.active, .studio-section-nav .ghost-button.active { box-shadow: rgba(0, 229, 255, 0.1) 0px 0px 18px; border-color: rgba(0, 229, 255, 0.38) !important; background: rgba(0, 229, 255, 0.12) !important; color: rgb(248, 251, 255) !important; } .dashboard-page[data-dashboard-role="streamer"] .workspace-home-heading { display: none; } .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge { margin: 0px 0px 14px; padding: 14px 16px; min-height: 0px; } .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge h2 { margin: 2px 0px; font-size: 1rem; } .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge .muted { margin: 0px; } .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge-actions { gap: 8px; } .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge-actions .button-primary, .dashboard-page[data-dashboard-role="streamer"] .quick-start-nudge-actions .button-secondary { min-height: 36px; padding: 8px 12px; } .dashboard-page[data-dashboard-role="streamer"] .metrics.live-health-grid { margin-top: 0px; margin-bottom: 16px; } .dashboard-page[data-dashboard-role="streamer"] .dashboard-grid-streamer { grid-template-columns: minmax(0px, 1.1fr) minmax(320px, 0.9fr); align-items: start; } .dashboard-page[data-dashboard-role="streamer"] .workspace-home-panel { order: 10; } .dashboard-page[data-dashboard-role="streamer"] #chatPanel { order: 11; } .dashboard-page[data-dashboard-role="streamer"] #alertsPanel { order: 12; } .dashboard-page[data-dashboard-role="streamer"] #activityFeedPanel { order: 13; } .dashboard-page[data-dashboard-role="streamer"] #bossPanel { order: 14; } .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel { order: 20; grid-column: 1 / -1; margin-top: 20px; } .dashboard-page[data-dashboard-role="streamer"] #discordComposerPanel { order: 30; } .dashboard-page[data-dashboard-role="streamer"] #discordHistoryPanel { order: 31; } .dashboard-page[data-dashboard-role="streamer"] #overlaySetupPanel { order: 40; } .dashboard-page[data-dashboard-role="streamer"] #actionPanel { order: 50; } .dashboard-page[data-dashboard-role="streamer"] #advancedSetupPanel { order: 60; } .dashboard-page[data-dashboard-role="streamer"] #jobsPanel { order: 61; } .dashboard-page[data-dashboard-role="streamer"] #eventPanel { order: 62; } .dashboard-page[data-dashboard-role="streamer"] #actionPanel, .dashboard-page[data-dashboard-role="streamer"] #advancedSetupPanel, .dashboard-page[data-dashboard-role="streamer"] #jobsPanel, .dashboard-page[data-dashboard-role="streamer"] #eventPanel { border-style: dashed !important; } .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel > .panelHead { align-items: center; } .dashboard-page[data-dashboard-role="streamer"] #overlayPreviewPanel { grid-column: span 2; } .dashboard-page[data-dashboard-role="streamer"] #overlayPreviewPanel .live-overlay-preview { min-height: clamp(260px, 32vw, 420px); } .dashboard-page[data-dashboard-role="streamer"] .alert-studio-foundation-grid { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel > .overlay-links-grid { grid-template-columns: minmax(360px, 1.35fr) minmax(260px, 0.9fr) minmax(300px, 1fr); } .dashboard-page[data-dashboard-role="streamer"] #alertStudioAdvancedSection, .dashboard-page[data-dashboard-role="streamer"] #eventPanel, .dashboard-page[data-dashboard-role="streamer"] #jobsPanel { opacity: 0.72; } .dashboard-page[data-dashboard-role="streamer"] #alertStudioAdvancedSection[open], .dashboard-page[data-dashboard-role="streamer"] #eventPanel[open], .dashboard-page[data-dashboard-role="streamer"] #jobsPanel[open] { opacity: 1; } .dashboard-page[data-dashboard-role="streamer"] #platformRows td { padding-block: 8px; } @media (max-width: 980px){.dashboard-page[data-dashboard-role="streamer"] .dashboard-grid-streamer, .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel > .overlay-links-grid, .dashboard-page[data-dashboard-role="streamer"] .alert-studio-foundation-grid { grid-template-columns: 1fr; } .dashboard-page[data-dashboard-role="streamer"] #overlayPreviewPanel { grid-column: auto; } } .dashboard-page[data-dashboard-role="streamer"] .shell, .dashboard-page[data-dashboard-role="mod"] .shell { width: min(1360px, 100% - 44px); padding-bottom: 96px; } .dashboard-page[data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-dashboard-role="mod"] .hero h1, .dashboard-page[data-dashboard-role="operator"] .login-hero h1 { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.96; } .dashboard-page[data-dashboard-role="streamer"] .ops-toolbar, .dashboard-page[data-dashboard-role="mod"] .ops-toolbar { border-color: rgba(0, 229, 255, 0.1); background: rgba(9, 12, 24, 0.5); box-shadow: none; } .dashboard-page[data-dashboard-role="streamer"] .panel, .dashboard-page[data-dashboard-role="mod"] .panel, .discord-card, .overlay-link-card, .connection-summary-card { box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 42px, rgba(255, 255, 255, 0.043) 0px 1px 0px inset; border-color: rgba(133, 151, 200, 0.13) !important; background: linear-gradient(rgba(17, 22, 42, 0.82), rgba(8, 11, 22, 0.72)) !important; } .dashboard-page[data-dashboard-role="streamer"] .panel:hover, .dashboard-page[data-dashboard-role="mod"] .panel:hover, .discord-card:hover, .overlay-link-card:hover, .connection-summary-card:hover { box-shadow: rgba(0, 0, 0, 0.28) 0px 22px 48px, rgba(0, 229, 255, 0.055) 0px 0px 22px; border-color: rgba(0, 229, 255, 0.2) !important; } .dashboard-page[data-dashboard-role="streamer"] .dashboard-grid, .dashboard-page[data-dashboard-role="mod"] .mod-v2-grid { gap: 24px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-secondary-collapse, .dashboard-page[data-dashboard-role="streamer"] .secondary-utility-panel, .dashboard-page[data-dashboard-role="streamer"] #eventPanel, .dashboard-page[data-dashboard-role="mod"] #policyPanel, .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel { opacity: 0.82; } .dashboard-page[data-dashboard-role="streamer"] .streamer-secondary-collapse:not([open]) { min-height: auto; } .dashboard-page[data-dashboard-role="streamer"] .alert-studio-premium { grid-column: 1 / -1; padding: clamp(18px, 2vw, 26px) !important; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top { margin: var(--space-3, 24px) 0; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .panel-heading { align-items: center; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-studio-actions { align-items: center; justify-content: flex-start; margin: 12px 0px 18px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-studio-foundation-grid { grid-template-columns: minmax(170px, 0.95fr) minmax(250px, 1.25fr) minmax(160px, 0.8fr) minmax(260px, 1.35fr) minmax(150px, 0.8fr) minmax(170px, 0.9fr) minmax(190px, 1fr); overflow-x: auto; padding-bottom: 4px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-studio-type-card { min-width: 0px; min-height: 118px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .overlay-links-grid { grid-template-columns: minmax(360px, 1.25fr) minmax(260px, 0.85fr) minmax(360px, 1.15fr) minmax(320px, 1fr) minmax(260px, 0.85fr); align-items: stretch; overflow-x: auto; padding-bottom: 4px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .overlay-link-card { min-width: 0px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .live-overlay-preview-card { grid-column: auto; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .live-overlay-preview { min-height: 220px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-asset-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); max-height: 360px; overflow: auto; padding-right: 4px; } .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-slider-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top { margin: 18px 0px 24px; padding: clamp(18px, 2vw, 26px) !important; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top > .row:first-child { align-items: center !important; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .alert-studio-actions { justify-content: flex-start; margin: 12px 0px 18px; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .statGrid { grid-template-columns: repeat(4, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 4px; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .dashboard-alert-slider-grid { grid-template-columns: repeat(4, minmax(170px, 1fr)); } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .dashboard-alert-media-row { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(230px, 1.2fr) minmax(130px, auto); align-items: end; gap: 12px; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .diagnostic-collapse { margin-top: 12px; } .platform-connect-card .button-primary, .platform-connect-card .button-secondary { width: 100%; justify-content: center; min-height: 42px; } .alert-layout-preview-choice.active, .alert-layout-preview-choice:hover { border-color: color-mix(in srgb, var(--preview-secondary, #22d3ee) 54%, transparent); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--preview-primary, #ff2fd8) 20%, transparent), transparent 62%), rgba(9, 14, 30, 0.82); color: rgb(248, 250, 252); box-shadow: 0 0 22px color-mix(in srgb, var(--preview-secondary, #22d3ee) 12%, transparent); } @keyframes previewCinematicFlash { 0%, 100% { opacity: 0; transform: translateX(-8%) skewX(-4deg); } 8%, 18%, 38% { opacity: 0.62; } 12%, 28%, 44% { opacity: 0.18; } 62% { opacity: 0.4; transform: translateX(8%) skewX(3deg); } } @keyframes previewCinematicDrift { 0% { opacity: 0; transform: translate3d(-3%, 5%, 0px) scale(1); } 18% { opacity: 0.55; } 72% { opacity: 0.42; transform: translate3d(4%, -4%, 0px) scale(1.04); } 100% { opacity: 0; transform: translate3d(8%, -8%, 0px) scale(1.06); } } @keyframes previewCinematicSweep { 0% { opacity: 0; transform: translateX(-42%) skewX(-8deg); } 24% { opacity: 0.62; } 78% { opacity: 0.38; } 100% { opacity: 0; transform: translateX(42%) skewX(-8deg); } } @keyframes previewCinematicPulse { 0%, 100% { opacity: 0; transform: scale(0.88); } 12% { opacity: 0.64; transform: scale(1.02); } 22% { opacity: 0.22; transform: scale(0.96); } 38% { opacity: 0.48; transform: scale(1.08); } 72% { opacity: 0.2; transform: scale(1.14); } } @keyframes previewCinematicMelt { 0% { opacity: 0; transform: translateY(-8%) scaleY(0.96); } 18% { opacity: 0.58; } 46% { opacity: 0.42; transform: translateY(4%) scaleY(1.08) skewX(-2deg); } 100% { opacity: 0; transform: translateY(12%) scaleY(1.12) skewX(2deg); } } @keyframes previewCinematicEmbers { 0% { opacity: 0; transform: translateY(10%) scale(0.96); } 20% { opacity: 0.6; } 76% { opacity: 0.38; transform: translateY(-10%) scale(1.04); } 100% { opacity: 0; transform: translateY(-18%) scale(1.08); } } @keyframes previewCinematicFreeze { 0% { opacity: 0; clip-path: circle(8% at 50% 50%); transform: scale(0.98); } 24% { opacity: 0.62; } 74% { opacity: 0.36; clip-path: circle(78% at 50% 50%); } 100% { opacity: 0; clip-path: circle(94% at 50% 50%); transform: scale(1.02); } } @keyframes previewCinematicWave { 0% { opacity: 0; transform: scale(0.68); } 20% { opacity: 0.52; } 70% { opacity: 0.36; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.42); } } @keyframes previewCinematicRetro { 0% { opacity: 0; transform: rotate(-8deg) scale(0.94); } 22% { opacity: 0.6; } 80% { opacity: 0.42; transform: rotate(18deg) scale(1.08); } 100% { opacity: 0; transform: rotate(26deg) scale(1.12); } } .theme-preset-select, .dashboard-page select.theme-preset-select { min-height: 42px; border-radius: var(--ui-radius-control); border: 1px solid rgba(148, 163, 184, 0.16); background: rgba(3, 7, 18, 0.52); color: var(--text-main); padding: 0px 12px; } .dashboard-page .empty-state-card, .dashboard-page .feedItem:only-child, .dashboard-page .reviewItem:only-child { border-style: solid; border-color: rgba(0, 229, 255, 0.12); } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card, .dashboard-page[data-dashboard-role="mod"] #discordComposerPanel { border-color: rgba(0, 229, 255, 0.24) !important; background: radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.1), transparent 34%), linear-gradient(rgba(14, 24, 44, 0.88), rgba(8, 11, 24, 0.78)) !important; } .login-card .button-primary, #submitAccount { min-height: 46px; font-size: 0.98rem; } @keyframes previewOrbit { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.04); } } @keyframes previewPop { 0% { transform: scale(0.96); box-shadow: rgba(0, 229, 255, 0) 0px 0px 0px; } 48% { transform: scale(1.025); box-shadow: rgba(255, 45, 154, 0.24) 0px 0px 42px; } 100% { transform: scale(1); box-shadow: rgba(0, 0, 0, 0.42) 0px 22px 60px, rgba(0, 229, 255, 0.12) 0px 0px 28px; } } @keyframes previewShake { 0%, 100% { translate: 0px; } 20% { translate: calc(var(--preview-shake, 0px) * -1) calc(var(--preview-shake, 0px) * 0.55); } 40% { translate: var(--preview-shake, 0px) calc(var(--preview-shake, 0px) * -0.55); } 60% { translate: calc(var(--preview-shake, 0px) * -0.5) calc(var(--preview-shake, 0px) * -0.42); } 80% { translate: calc(var(--preview-shake, 0px) * 0.5) calc(var(--preview-shake, 0px) * 0.42); } } @keyframes previewParticleBurst { 0% { opacity: 0; transform: translate3d(0px, 20px, 0px) scale(0.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate3d(calc((var(--i) - 7) * 8px), calc(-72px - (var(--i) * 3px)), 0) scale(1); } } @keyframes loginGlowDrift { 0% { transform: translate3d(0px, 0px, 0px) scale(0.94); opacity: 0.52; } 100% { transform: translate3d(-38px, 34px, 0px) scale(1.08); opacity: 0.82; } } .dashboard-page { --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --card-pad: clamp(18px, 1.7vw, 24px); --card-pad-hero: clamp(22px, 2.2vw, 32px); } .dashboard-page .shell, .dashboard-page .app-shell { padding-top: var(--space-3); } .dashboard-page .hero.top, .dashboard-page .hero.topbar { min-height: unset; margin-bottom: var(--space-4); padding: var(--card-pad-hero) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar { border-color: rgba(0, 229, 255, 0.22); background: radial-gradient(circle at 10% 44%, rgba(255, 45, 154, 0.16), transparent 26%), radial-gradient(circle at 80% 8%, rgba(0, 229, 255, 0.14), transparent 34%), linear-gradient(135deg, rgba(14, 22, 44, 0.96), rgba(7, 10, 22, 0.86)); box-shadow: rgba(0, 0, 0, 0.4) 0px 28px 76px, rgba(0, 229, 255, 0.07) 0px 0px 34px, rgba(255, 255, 255, 0.07) 0px 1px 0px inset; } .dashboard-page .hero-copy, .dashboard-page .subcopy, .dashboard-page .muted, .dashboard-page .helper-copy, .dashboard-page .metricDetail, .dashboard-page .summaryLabel, .dashboard-page .summaryCard .muted { color: rgba(218, 232, 241, 0.82) !important; } .dashboard-page .helper-copy, .dashboard-page .metricDetail, .dashboard-page .summaryCard .muted, .dashboard-page .feedItem p, .dashboard-page .reviewItem p { font-size: clamp(0.88rem, 0.85vw, 0.96rem); line-height: 1.55; } .dashboard-page .card-label, .dashboard-page .eyebrow, .dashboard-page label span, .dashboard-page th { font-size: clamp(0.76rem, 0.75vw, 0.84rem); letter-spacing: 0.055em; color: rgba(224, 236, 248, 0.8) !important; } .dashboard-page .panel, .dashboard-page .card, .dashboard-page .summaryCard, .dashboard-page .metric, .dashboard-page .overlay-link-card, .dashboard-page .connection-summary-card, .dashboard-page .discord-card { padding: var(--card-pad); } .dashboard-page .dashboard-grid, .dashboard-page .grid, .dashboard-page .metrics, .dashboard-page .mod-v2-grid, .dashboard-page .connection-summary-grid, .dashboard-page .platform-connect-grid { gap: var(--space-3); } .dashboard-page .panelHead, .dashboard-page .panel-heading, .dashboard-page .overlay-link-card-head, .dashboard-page .metricRow { gap: var(--space-2); margin-bottom: var(--space-2); } .dashboard-page .streamer-action-card, .dashboard-page .section-command-card, .dashboard-page .connection-status-panel, .dashboard-page .live-overlay-preview-card, .dashboard-page .alert-studio-premium, .dashboard-page #dashboardAlertStudioCard, .dashboard-page[data-dashboard-role="mod"] .moderation-command-card, .dashboard-page[data-dashboard-role="mod"] #modPanel { padding: var(--card-pad-hero) !important; } .dashboard-page .streamer-action-card, .dashboard-page .section-command-card { margin-block: var(--space-3); } .dashboard-page[data-dashboard-role="streamer"] .connection-status-panel, .dashboard-page[data-dashboard-role="streamer"] .streamer-action-card, .dashboard-page[data-dashboard-role="streamer"] #overlayPreviewPanel, .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel, .dashboard-page[data-dashboard-role="operator"] .stream-command-panel, .dashboard-page[data-dashboard-role="operator"] .dashboard-alert-preview-card, .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard, .dashboard-page[data-dashboard-role="mod"] #modPanel, .dashboard-page[data-dashboard-role="mod"] #discordComposerPanel { box-shadow: rgba(0, 0, 0, 0.34) 0px 24px 62px, rgba(0, 229, 255, 0.07) 0px 0px 22px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset; border-color: rgba(0, 229, 255, 0.24) !important; } .dashboard-page[data-dashboard-role="streamer"] .streamer-secondary-collapse, .dashboard-page[data-dashboard-role="streamer"] .secondary-utility-panel, .dashboard-page[data-dashboard-role="streamer"] #eventPanel, .dashboard-page[data-dashboard-role="streamer"] #jobsPanel, .dashboard-page[data-dashboard-role="operator"] .diagnostic-only, .dashboard-page[data-dashboard-role="operator"] [data-section="events"], .dashboard-page[data-dashboard-role="operator"] details.platform-advanced-shell, .dashboard-page[data-dashboard-role="mod"] #policyPanel, .dashboard-page[data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-dashboard-role="mod"] #modPlatformStatusPanel, .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel { opacity: 0.74; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 30px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } .dashboard-page[data-dashboard-role="streamer"] .streamer-secondary-collapse[open], .dashboard-page[data-dashboard-role="operator"] details.platform-advanced-shell[open], .dashboard-page[data-dashboard-role="mod"] .mod-secret-panel[open] { opacity: 1; } .dashboard-page .button-primary, .dashboard-page .streamer-primary-action, .dashboard-page #dashboardPrimaryTestAlert, .dashboard-page #streamerPrimaryTestAlert { min-height: 44px; padding-inline: 18px; box-shadow: rgba(255, 45, 154, 0.22) 0px 14px 34px, rgba(0, 229, 255, 0.12) 0px 0px 26px; } .dashboard-page .button-secondary, .dashboard-page .btn, .dashboard-page .ghost-button, .dashboard-page .nav-btn { min-height: 40px; } .dashboard-page .button-primary:hover, .dashboard-page .streamer-primary-action:hover, .dashboard-page #dashboardPrimaryTestAlert:hover, .dashboard-page #streamerPrimaryTestAlert:hover { transform: translateY(-2px); box-shadow: rgba(255, 45, 154, 0.26) 0px 18px 40px, rgba(0, 229, 255, 0.16) 0px 0px 30px; } .dashboard-page .button-secondary:hover, .dashboard-page .btn:hover, .dashboard-page .ghost-button:hover, .dashboard-page .nav-btn:hover, .dashboard-page .tab:hover { background: rgba(18, 28, 48, 0.9); border-color: rgba(0, 229, 255, 0.28); } .dashboard-page [aria-busy="true"], .dashboard-page .is-loading { cursor: progress; opacity: 0.72; position: relative; } .dashboard-page [aria-busy="true"]::before, .dashboard-page .is-loading::before { content: ""; width: 8px; height: 8px; margin-right: 8px; display: inline-block; border-radius: 999px; background: var(--accent-cyan); box-shadow: rgba(0, 229, 255, 0.42) 0px 0px 12px; animation: 1.2s ease-in-out 0s infinite normal none running livePulse; } .dashboard-page .live-overlay-preview-card, .dashboard-page #overlayPreviewPanel { min-height: clamp(380px, 42vw, 520px); } .dashboard-page .live-overlay-preview { min-height: clamp(285px, 34vw, 390px); border-color: rgba(255, 45, 154, 0.18); box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset, rgba(255, 45, 154, 0.06) 0px 0px 34px; } .dashboard-page .live-overlay-preview::before { content: ""; position: absolute; inset: -30%; pointer-events: none; opacity: 0.26; background: conic-gradient(from 120deg, transparent, rgba(0, 229, 255, 0.18), transparent, rgba(255, 45, 154, 0.16), transparent); animation: 16s linear 0s infinite normal none running previewAmbientDrift; } .dashboard-page .preview-alert-frame { width: min(620px, 100% - 36px); padding: clamp(18px, 2vw, 24px); } .dashboard-page .live-overlay-preview[data-alert-layout="standard"] .preview-alert-frame { width: min(560px, 100% - 36px); min-height: 0px; flex-direction: column; justify-content: center; text-align: center; } .dashboard-page .live-overlay-preview[data-alert-layout="compact"] .preview-alert-frame { width: min(460px, 100% - 34px); min-height: 0px; padding: 14px 16px; flex-direction: row; justify-content: flex-start; text-align: left; } .dashboard-page .live-overlay-preview[data-alert-layout="wide"] .preview-alert-frame { width: min(720px, 100% - 26px); min-height: 0px; flex-direction: row; justify-content: flex-start; text-align: left; } .dashboard-page .live-overlay-preview[data-alert-layout="tall"] .preview-alert-frame { width: min(430px, 100% - 34px); min-height: min(310px, 100% - 30px); flex-direction: column; justify-content: center; text-align: center; } .dashboard-page .live-overlay-preview[data-alert-layout="fullscreen"] .preview-alert-frame { width: calc(100% - 24px); min-height: calc(100% - 24px); flex-direction: column; justify-content: center; text-align: center; } .dashboard-page .preview-alert-frame strong { font-size: clamp(1.28rem, 2.2vw, 1.9rem); } .dashboard-page .preview-alert-frame span { font-size: clamp(0.94rem, 1vw, 1.05rem); } .dashboard-page .live-indicator:has(.ok), .dashboard-page .status.good, .dashboard-page .status.active, .dashboard-page .status-pill.status-live { animation: 2.8s ease-in-out 0s infinite normal none running statusBreath; } .dashboard-page .activity-feed-item:first-child, .dashboard-page .feedItem:first-child, .dashboard-page .reviewItem:first-child { animation: 260ms ease-out 0s 1 normal none running softItemArrive; } .dashboard-page .reviewItem:has(p), .dashboard-page .feedItem:has(p), .dashboard-page .empty-state, .dashboard-page .empty-state-card { border-color: rgba(0, 229, 255, 0.14); background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.06), transparent 34%), linear-gradient(rgba(13, 19, 35, 0.72), rgba(7, 10, 22, 0.68)); } .dashboard-page[data-dashboard-role="streamer"] .live-health-grid .metric:first-child, .dashboard-page[data-dashboard-role="streamer"] .connection-status-panel, .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics .metric:first-child, .dashboard-page[data-dashboard-role="mod"] #modPanel { position: relative; } .dashboard-page[data-dashboard-role="streamer"] .live-health-grid .metric:first-child::before, .dashboard-page[data-dashboard-role="streamer"] .connection-status-panel::before, .dashboard-page[data-dashboard-role="mod"] .mod-v2-metrics .metric:first-child::before, .dashboard-page[data-dashboard-role="mod"] #modPanel::before { content: ""; position: absolute; inset: 0px auto 0px 0px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--accent-cyan), var(--accent-pink)); opacity: 0.86; box-shadow: rgba(0, 229, 255, 0.18) 0px 0px 18px; } .dashboard-page[data-dashboard-role="mod"] .moderation-command-card .button-primary, .dashboard-page[data-dashboard-role="mod"] #discordComposerPanel .button-primary { background: linear-gradient(100deg, rgb(255, 210, 107) 0%, rgb(0, 229, 255) 100%); color: rgb(6, 17, 27); box-shadow: rgba(255, 210, 107, 0.18) 0px 14px 30px, rgba(0, 229, 255, 0.1) 0px 0px 22px; } .dashboard-page[data-dashboard-role="mod"] .reviewItem[data-suggestion-id] { border-left: 3px solid rgba(255, 210, 107, 0.42); } .dashboard-page [aria-busy="true"].status { color: rgb(234, 255, 255) !important; border-color: rgba(0, 229, 255, 0.28) !important; } .dashboard-page button[aria-busy="true"] { background: rgba(18, 28, 48, 0.9); } @keyframes previewAmbientDrift { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(360deg) scale(1.04); } } @keyframes statusBreath { 0%, 100% { box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 229, 255, 0) 0px 0px 0px; } 50% { box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 229, 255, 0.11) 0px 0px 16px; } } @keyframes softItemArrive { 0% { opacity: 0.72; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0px); } } @media (max-width: 900px){.dashboard-page .shell, .dashboard-page .app-shell { width: min(100% - 24px, 1360px); } .dashboard-page .hero.top, .dashboard-page .hero.topbar, .dashboard-page .streamer-action-card, .dashboard-page .section-command-card { padding: 18px !important; } .dashboard-page .live-overlay-preview-card, .dashboard-page #overlayPreviewPanel { min-height: auto; } } @media (prefers-reduced-motion: reduce){.dashboard-page .live-overlay-preview::before, .dashboard-page .preview-cinematic-layer, .dashboard-page .preview-cinematic-layer::before, .dashboard-page .preview-cinematic-layer::after, .dashboard-page .live-indicator:has(.ok), .dashboard-page .status.good, .dashboard-page .status.active, .dashboard-page .status-pill.status-live, .dashboard-page .activity-feed-item:first-child, .dashboard-page .feedItem:first-child, .dashboard-page .reviewItem:first-child, .dashboard-page [aria-busy="true"]::before, .dashboard-page .is-loading::before { animation: auto ease 0s 1 normal none running none !important; } } .obs-helper-steps { display: grid; gap: 6px; margin: 0px; padding-left: 18px; color: rgba(231, 241, 248, 0.86); font-size: 0.86rem; font-weight: 760; line-height: 1.35; } .obs-helper-steps li::marker { color: var(--tink-cyan); font-weight: 900; } .quick-start-page { min-height: 100vh; padding: clamp(18px, 3vw, 36px); } .quick-start-shell { width: min(1080px, 100%); margin: 0px auto; } .quick-start-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3, 24px); margin: 0 0 var(--space-3, 24px); padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--ui-radius-panel); background: radial-gradient(circle at 16% 0%, rgba(255, 47, 216, 0.18), transparent 36%), radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.14), transparent 34%), linear-gradient(135deg, rgba(10, 16, 33, 0.9), rgba(7, 10, 22, 0.78)); box-shadow: var(--ui-shadow-card); } .quick-start-hero h1 { max-width: 780px; } .quick-start-card { position: relative; overflow: hidden; min-height: 520px; padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--ui-radius-panel); background: radial-gradient(circle at 14% 0%, rgba(34, 211, 238, 0.1), transparent 34%), linear-gradient(rgba(13, 19, 39, 0.86), rgba(5, 8, 18, 0.78)); box-shadow: var(--ui-shadow-card); } .quick-start-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: var(--space-3, 24px); } .quick-start-progress span { height: 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.18); box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset; } .quick-start-progress span.active, .quick-start-progress span.done { background: linear-gradient(90deg, var(--tink-pink), var(--tink-cyan)); box-shadow: rgba(34, 211, 238, 0.16) 0px 0px 18px; } .quick-step { display: none; min-height: 330px; } .quick-step.active { display: grid; align-content: center; gap: 16px; animation: 180ms ease-out 0s 1 normal none running quickStepIn; } .quick-step.is-done { border-color: rgba(124, 255, 209, 0.28); } .quick-start-next-links { margin: 0px; color: var(--text-muted); font-size: 0.95rem; } .quick-start-next-links a { color: var(--tink-cyan); font-weight: 700; text-decoration: none; } .quick-start-next-links a:hover { text-decoration: underline; } .quick-step h2 { margin: 0px; color: rgb(244, 251, 255); font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: 0px; } .quick-step > .muted, .quick-step > .helper-copy { max-width: 58ch; font-size: 1rem; } .quick-start-actions, .quick-style-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .quick-style-grid .overlay-url-field { flex: 1 1 220px; max-width: 360px; } .quick-alert-preview { position: relative; display: grid; place-items: center; min-height: 240px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: var(--ui-radius-panel); background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--quick-primary, #ff2d9a) 18%, transparent), transparent 38%), linear-gradient(135deg, rgba(7, 10, 18, 0.86), rgba(15, 23, 42, 0.72)); overflow: hidden; } .quick-alert-orbit { position: absolute; width: 220px; aspect-ratio: 1 / 1; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--quick-secondary, #00e5ff) 24%, transparent); box-shadow: 0 0 calc(38px * var(--quick-glow, 0.8)) color-mix(in srgb, var(--quick-primary, #ff2d9a) 22%, transparent); opacity: 0.78; } .quick-alert-card { position: relative; display: grid; gap: 8px; width: min(520px, 100% - 32px); padding: 24px; border: 1px solid color-mix(in srgb, var(--quick-secondary, #00e5ff) 24%, rgba(255, 255, 255, 0.08)); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--quick-primary, #ff2d9a) 28%, transparent), transparent 38%), rgba(7, 10, 18, 0.78); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38), 0 0 calc(42px * var(--quick-glow, 0.8)) color-mix(in srgb, var(--quick-primary, #ff2d9a) 16%, transparent); text-align: center; } .quick-alert-card span { color: color-mix(in srgb, var(--quick-secondary, #00e5ff) 48%, #e5f7ff); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .quick-alert-card strong { color: rgb(255, 255, 255); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1; } .quick-alert-card p { margin: 0px; color: rgba(224, 236, 248, 0.78); font-weight: 750; } .quick-alert-preview.quick-fired .quick-alert-card { animation: 760ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s 1 normal none running quickAlertPop; } .quick-start-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: var(--space-3, 24px); padding-top: var(--space-2, 16px); border-top: 1px solid rgba(148, 163, 184, 0.12); } .quick-start-nudge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 16px); margin: 0 0 var(--space-3, 24px); padding: 18px; border: 1px solid rgba(34, 211, 238, 0.2); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 10% 0%, rgba(255, 47, 216, 0.12), transparent 34%), linear-gradient(135deg, rgba(12, 18, 36, 0.84), rgba(6, 10, 22, 0.76)); box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 48px, rgba(34, 211, 238, 0.06) 0px 0px 24px; } .quick-start-nudge[hidden] { display: none; } .quick-start-nudge h2 { margin: 0px; color: rgb(244, 251, 255); font-size: 1.25rem; letter-spacing: 0px; } .quick-start-nudge p { margin: 0px; } .quick-start-nudge-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .quick-start-check-item { display: grid; grid-template-columns: 1fr; align-content: space-between; gap: 10px; min-height: 150px; padding: 12px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 10% 0%, rgba(0, 229, 255, 0.05), transparent 34%), linear-gradient(rgba(17, 22, 42, 0.82), rgba(8, 11, 22, 0.72)); } .quick-start-check-item.good { border-color: rgba(34, 197, 94, 0.24); } .quick-start-check-item.warn { border-color: rgba(255, 210, 107, 0.26); } .quick-start-check-item strong { color: rgb(244, 251, 255); font-size: 0.98rem; } .quick-start-check-item .muted { margin: 5px 0px 0px; line-height: 1.4; } .quick-start-check-item .button-secondary { justify-self: start; } .quick-start-page a:focus-visible, .quick-start-page button:focus-visible, .quick-start-page select:focus-visible, .quick-start-nudge a:focus-visible, .quick-start-nudge button:focus-visible, .dashboard-quick-start-panel a:focus-visible { outline: rgba(34, 211, 238, 0.82) solid 2px; outline-offset: 3px; } @keyframes quickStepIn { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0px); } } @keyframes quickAlertPop { 0% { transform: scale(0.94); opacity: 0.7; } 48% { transform: scale(1.035); opacity: 1; } 100% { transform: scale(1); } } @media (max-width: 760px){.quick-start-hero, .quick-start-footer, .quick-start-nudge { align-items: stretch; flex-direction: column; } .quick-start-footer .streamer-action-feedback { order: -1; } } .segmented-control .ghost-button.active { border-color: rgba(0, 229, 255, 0.34); background: rgba(0, 229, 255, 0.12); color: rgb(245, 254, 255); box-shadow: rgba(0, 229, 255, 0.1) 0px 0px 18px; } .alert-studio-obs-card .button-secondary:disabled { cursor: not-allowed; opacity: 0.62; } @media (max-width: 980px){.dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-studio-foundation-grid, .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .overlay-links-grid, .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-asset-grid, .dashboard-page[data-dashboard-role="streamer"] .streamer-alert-studio-top .alert-slider-grid { grid-template-columns: 1fr; overflow: visible; max-height: none; } .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .statGrid, .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .dashboard-alert-slider-grid, .dashboard-page[data-dashboard-role="operator"] #dashboardAlertStudioCard.dashboard-alert-studio-top .dashboard-alert-media-row { grid-template-columns: 1fr; overflow: visible; } } .setup-check.warn { border-color: rgba(245, 158, 11, 0.32); color: rgb(253, 230, 138); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .moderation-setup-summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-moderation-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; margin-top: 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-moderation-toggle-grid { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-moderation-threshold-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin-top: 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamModerationSetupPanel textarea { min-height: 140px; resize: vertical; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-workspace-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); align-items: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModOverviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #actionPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #streamModerationSetupPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #jobsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .panel-full { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-mod-quick-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-card-actions { display: flex; flex-wrap: wrap; gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #actionPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #chatPanel { min-height: 420px; } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .moderation-setup-summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-moderation-settings-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-moderation-threshold-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-workspace-grid { grid-template-columns: 1fr; } } .dashboard-page[data-dashboard-role="streamer"] .hero.topbar { min-height: 0px !important; gap: clamp(10px, 1.2vw, 16px) !important; margin-bottom: clamp(12px, 1.4vw, 18px) !important; padding: clamp(10px, 1.1vw, 15px) !important; background: radial-gradient(circle at 10% 44%, rgba(255, 45, 154, 0.1), transparent 24%), radial-gradient(circle at 80% 8%, rgba(0, 229, 255, 0.1), transparent 30%), linear-gradient(135deg, rgba(14, 22, 44, 0.92), rgba(7, 10, 22, 0.84)) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero h1 { margin-bottom: 4px !important; font-size: clamp(1.85rem, 3.4vw, 3.15rem) !important; line-height: 1 !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-copy { font-size: clamp(0.9rem, 1vw, 1rem) !important; line-height: 1.35 !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-wrap { width: clamp(58px, 5.6vw, 84px) !important; min-width: clamp(58px, 5.6vw, 84px) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-avatar-ring { width: clamp(48px, 4.8vw, 66px) !important; height: clamp(48px, 4.8vw, 66px) !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-links > button, .dashboard-page[data-dashboard-role="streamer"] .hero-links > a { min-height: 32px; padding: 6px 9px; } .dashboard-page[data-dashboard-role="streamer"] .hero .eyebrow { margin-bottom: 5px !important; } .dashboard-page[data-dashboard-role="streamer"] .hero-links { gap: 6px !important; margin-top: 8px !important; } .dashboard-page[data-dashboard-role="streamer"] #alertControlsPanel { scroll-margin-top: 96px; } .dashboard-page[data-dashboard-role="streamer"] .alert-studio-boss-toggle { margin-top: 12px; width: fit-content; } .dashboard-page[data-dashboard-role="streamer"] .alert-studio-obs-card { align-content: start; } .dashboard-page[data-dashboard-role="streamer"] .alert-studio-obs-card .button-secondary { width: fit-content; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) auto !important; gap: 14px !important; margin-bottom: 10px !important; padding: 16px 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .view-badge-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-identity-row { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { width: 64px !important; min-width: 64px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring { width: 56px !important; height: 56px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main { gap: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero h1 { margin-bottom: 6px !important; font-size: clamp(2rem, 3.8vw, 3.25rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-copy { max-width: 640px !important; margin: 0px !important; font-size: 0.92rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row { margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links { display: flex !important; flex-direction: row !important; max-width: none !important; align-self: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links .ghost-button[href="/quick-start.html"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links .ghost-button[href="/"] { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .workspace-nav { margin-top: 8px !important; margin-bottom: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .quick-start-nudge { display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; background: radial-gradient(circle at 0% 0%, rgba(255, 45, 154, 0.1), transparent 30%), linear-gradient(rgba(11, 16, 31, 0.8), rgba(7, 10, 20, 0.7)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .quick-start-nudge .card-label { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-home-grid { gap: 14px; margin-bottom: 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-home-card { min-height: 0px; padding: 16px; gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-home-card h2 { margin: 2px 0px 4px; font-size: 1.04rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-card-facts span, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .plan-chip { min-height: 22px; padding: 3px 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-card-actions { gap: 7px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-card-actions .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-card-actions .button-secondary { min-height: 34px; padding: 7px 10px; font-size: 0.78rem; white-space: normal; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-start-card { margin-top: 0px; } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .quick-start-nudge { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { padding: 12px 16px !important; min-height: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { width: 54px !important; min-width: 54px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring { width: 48px !important; height: 48px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero h1 { font-size: clamp(1.7rem, 3vw, 2.65rem) !important; margin-bottom: 4px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-copy { font-size: 0.86rem !important; line-height: 1.45 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row .ghost-button { min-height: 30px !important; padding: 6px 10px !important; } .alert-studio-tabs .ghost-button.active { border-color: rgba(0, 229, 255, 0.42); background: radial-gradient(circle at 20% 0%, rgba(255, 45, 154, 0.14), transparent 40%), rgba(0, 229, 255, 0.1); color: rgb(247, 251, 255); box-shadow: rgba(0, 229, 255, 0.12) 0px 0px 18px; } .alert-studio-primary-actions .button-primary { min-width: 150px; } .alert-pack-card.active { border-color: rgba(34, 211, 238, 0.62); box-shadow: rgba(255, 47, 216, 0.16) 0px 0px 0px 1px, rgba(34, 211, 238, 0.16) 0px 0px 26px, rgba(0, 0, 0, 0.24) 0px 16px 36px; transform: translateY(-1px); } .alert-studio-tab-panel .alert-studio-actions:not(.alert-studio-primary-actions) .button-secondary, .alert-studio-tab-panel .alert-studio-actions:not(.alert-studio-primary-actions) .button-primary { min-height: 34px; padding: 7px 10px; } .alert-studio-primary-actions .button-primary { min-width: 172px; min-height: 44px; font-size: 0.98rem; box-shadow: rgba(255, 47, 216, 0.22) 0px 0px 28px, rgba(34, 211, 238, 0.16) 0px 0px 26px; } .alert-pack-recommendation:hover, .alert-pack-recommendation.active { border-color: rgba(34, 211, 238, 0.42); background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(255, 47, 216, 0.08)), rgba(3, 7, 18, 0.56); color: rgb(248, 251, 255); } .dashboard-page[data-product-page="dashboard"] .connection-summary-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; } .dashboard-page[data-product-page="dashboard"] .connection-summary-card { min-height: 0px; gap: 8px; padding: 12px; border-color: rgba(133, 151, 200, 0.12); box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 28px; overflow: hidden; } .dashboard-page[data-product-page="dashboard"] .connection-summary-card[data-status-state="ready"] { border-color: rgba(74, 222, 128, 0.2); } .dashboard-page[data-product-page="dashboard"] .connection-summary-card[data-status-state="action"], .dashboard-page[data-product-page="dashboard"] .connection-summary-card[data-status-state="warning"] { border-color: rgba(250, 204, 21, 0.24); } .dashboard-page[data-product-page="dashboard"] .connection-summary-card[data-status-state="waiting"], .dashboard-page[data-product-page="dashboard"] .connection-summary-card[data-status-state="unknown"] { border-color: rgba(133, 151, 200, 0.14); } .dashboard-page[data-product-page="dashboard"] .connection-summary-top { align-items: flex-start; flex-wrap: wrap; } .dashboard-page[data-product-page="dashboard"] .connection-summary-top strong { min-width: 0px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.25; } .dashboard-page[data-product-page="dashboard"] .connection-summary-top .status { flex: 0 0 auto; max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; } .dashboard-page[data-product-page="dashboard"] .connection-summary-card p { display: -webkit-box; margin: 0px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .dashboard-page[data-product-page="dashboard"] .connection-summary-actions { margin-top: 2px; gap: 6px; } .dashboard-page[data-product-page="dashboard"] .connection-summary-actions .button-primary, .dashboard-page[data-product-page="dashboard"] .connection-summary-actions .button-secondary { min-height: 32px; padding: 7px 10px; } .dashboard-page[data-product-page="dashboard"] .connection-summary-more { border-style: dashed; background: radial-gradient(circle at 0% 0%, rgba(255, 210, 107, 0.08), transparent 32%), rgba(5, 8, 18, 0.5); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { display: grid; grid-template-columns: 214px minmax(0px, 1fr); gap: 18px; align-items: start; margin-top: 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav { position: sticky; top: 12px; z-index: 8; display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(133, 151, 200, 0.14); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 20% 0%, rgba(0, 229, 255, 0.11), transparent 34%), linear-gradient(rgba(12, 18, 34, 0.9), rgba(5, 8, 18, 0.84)); box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 42px; backdrop-filter: blur(16px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand { display: grid; grid-template-columns: 34px minmax(0px, 1fr); gap: 10px; align-items: center; padding: 4px 4px 10px; border-bottom: 1px solid rgba(133, 151, 200, 0.12); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(0, 229, 255, 0.34); border-radius: 12px; color: rgb(247, 251, 255); font-size: 0.78rem; font-weight: 950; background: radial-gradient(circle at 30% 15%, rgba(255, 47, 216, 0.45), transparent 46%), rgba(0, 229, 255, 0.1); box-shadow: rgba(0, 229, 255, 0.16) 0px 0px 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand strong { display: block; color: rgb(247, 251, 255); font-size: 0.9rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { display: flex; align-items: center; min-height: 38px; padding: 9px 10px; border: 1px solid rgba(133, 151, 200, 0.12); border-radius: var(--ui-radius-control); color: var(--text-soft); font-size: 0.82rem; font-weight: 900; text-decoration: none; background: rgba(5, 8, 18, 0.38); transition: transform 140ms, border-color 140ms, background 140ms, box-shadow 140ms, color 140ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover { border-color: rgba(0, 229, 255, 0.28); color: rgb(247, 251, 255); transform: translateY(-1px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active { border-color: rgba(0, 229, 255, 0.42); color: rgb(247, 251, 255); background: linear-gradient(135deg, rgba(0, 229, 255, 0.13), rgba(255, 47, 216, 0.09)), rgba(9, 14, 28, 0.76); box-shadow: rgba(0, 229, 255, 0.13) 0px 0px 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content { display: grid; gap: 18px; min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { scroll-margin-top: 18px; padding: 16px; border: 1px solid rgba(133, 151, 200, 0.1); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.035), transparent 30%), rgba(6, 10, 22, 0.36); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace[hidden] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2 { margin: 2px 0px 3px; color: rgb(247, 251, 255); font-size: clamp(1.18rem, 1.7vw, 1.55rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading .muted { max-width: 720px; margin: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 14px; min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > * { grid-column: 1 / -1; min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card { border-color: rgba(0, 229, 255, 0.2); box-shadow: rgba(0, 229, 255, 0.08) 0px 18px 44px, rgba(0, 0, 0, 0.24) 0px 16px 42px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: span 7; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { grid-column: span 5; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel { grid-column: span 7; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #bossPanel { grid-column: span 5; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertControlsPanel { border-color: rgba(255, 47, 216, 0.2); box-shadow: rgba(255, 47, 216, 0.08) 0px 20px 54px, rgba(0, 0, 0, 0.28) 0px 16px 44px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-stage-card { min-height: 340px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .panel { border-color: rgba(133, 151, 200, 0.1); background: rgba(5, 8, 18, 0.46); box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 28px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ops-toolbar { margin: 0px; border-color: rgba(0, 229, 255, 0.16); background: radial-gradient(circle at 0% 0%, rgba(255, 47, 216, 0.08), transparent 28%), rgba(5, 8, 18, 0.48); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ops-toolbar .workspace-nav { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-settings-card { min-height: 0px; } @keyframes studioPanelIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0px); } } @media (max-width: 1080px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav { top: 0px; grid-template-columns: repeat(7, minmax(max-content, 1fr)); overflow-x: auto; padding: 10px; border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { justify-content: center; white-space: nowrap; } } @media (max-width: 860px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { padding: 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #bossPanel { grid-column: 1 / -1; } } .platform-setup-adapter-card.warn { border-color: rgba(255, 210, 107, 0.24); } .platform-setup-choice small.warn { color: rgb(253, 230, 138); } .platform-setup-card.warn { border-color: rgba(255, 210, 107, 0.24); } .platform-setup-card-head .helper-copy { margin: 4px 0px 0px; } .platform-setup-actions .button-primary, .platform-setup-actions .button-secondary { min-height: 36px; padding: 8px 12px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .wrap { max-width: none; padding-top: 16px; padding-bottom: 28px; width: calc(-32px + 100vw) !important; margin: 0px 16px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] main.shell { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { grid-row: 1; align-items: center; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 14px; margin: 0px; min-height: 0px; width: 100%; border-color: rgba(0, 229, 255, 0.22); box-shadow: rgba(0, 0, 0, 0.4) 0px 28px 76px, rgba(0, 229, 255, 0.07) 0px 0px 34px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; order: -10 !important; padding: 12px 16px !important; background: radial-gradient(circle at 10% 44%, rgba(255, 45, 154, 0.1), transparent 24%), radial-gradient(circle at 80% 8%, rgba(0, 229, 255, 0.1), transparent 30%), linear-gradient(135deg, rgba(14, 22, 44, 0.92), rgba(7, 10, 22, 0.84)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar::after { content: ""; position: absolute; inset: -42% -12% auto 4%; display: block; height: 170px; z-index: -1; pointer-events: none; opacity: 0.48; background: linear-gradient(90deg, transparent, rgba(255, 45, 154, 0.16), rgba(0, 229, 255, 0.16), transparent); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar::before { display: block; opacity: 0.34; filter: saturate(1.06) contrast(1.05); background: linear-gradient(90deg, rgba(8, 12, 26, 0.82), rgba(17, 8, 32, 0.66)), url("/hero-5sT3BiRD.png") center center / cover no-repeat; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-wrap { width: 54px; min-width: 54px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-ring { width: 48px; height: 48px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .view-badge-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-identity-row { display: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-main { gap: 8px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero h1 { margin-bottom: 4px; font-size: clamp(1.45rem, 2.3vw, 2.15rem); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-copy { max-width: 610px; margin: 0px; font-size: 0.86rem; line-height: 1.45; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-switch-row { margin: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links { gap: 6px; align-self: center; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links .button-secondary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links .ghost-button { min-height: 30px; padding: 6px 10px; font-size: 0.76rem; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { gap: 12px; margin: 12px 0px 14px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metric { min-height: 96px; padding: 15px; border-color: rgba(133, 151, 200, 0.13); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.055), transparent 34%), rgba(6, 10, 22, 0.56); box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 34px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metric:first-child { border-color: rgba(0, 229, 255, 0.28); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.14), transparent 38%), linear-gradient(rgba(10, 18, 34, 0.82), rgba(6, 10, 22, 0.68)); box-shadow: rgba(0, 229, 255, 0.09) 0px 18px 42px, rgba(0, 0, 0, 0.22) 0px 16px 38px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metricLabel { color: rgb(185, 197, 220); font-size: 0.76rem; text-transform: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metricValue { color: rgb(248, 251, 255); font-size: clamp(1.75rem, 3vw, 2.35rem); line-height: 1; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-card { margin-top: 12px; padding: 14px 16px; border-color: rgba(0, 229, 255, 0.14); background: radial-gradient(circle at 0% 0%, rgba(255, 47, 216, 0.075), transparent 30%), rgba(5, 8, 18, 0.52); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-card h2 { font-size: 1.12rem; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-actions { gap: 7px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-actions .button-primary { min-height: 38px; border-color: rgba(0, 229, 255, 0.46); box-shadow: rgba(0, 229, 255, 0.14) 0px 0px 24px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modPrimaryRefreshQueue, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #refreshAll { border-color: rgba(133, 151, 200, 0.16); background: rgba(5, 8, 18, 0.48); color: var(--text-soft); box-shadow: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ops-toolbar { margin-top: 10px; padding: 10px; border-color: rgba(133, 151, 200, 0.1); background: rgba(5, 8, 18, 0.34); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ops-toolbar .ghost-button, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ops-toolbar .status { min-height: 28px; padding: 5px 9px; font-size: 0.74rem; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: minmax(0px, 1.35fr) minmax(320px, 0.85fr); gap: 14px; align-items: start; margin-top: 14px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review { grid-row: span 2; min-height: 520px; border-color: rgba(0, 229, 255, 0.3); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.12), transparent 34%), linear-gradient(rgba(10, 18, 34, 0.82), rgba(6, 10, 22, 0.68)); box-shadow: rgba(0, 229, 255, 0.1) 0px 22px 54px, rgba(0, 0, 0, 0.26) 0px 18px 44px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review .panelHead h2 { font-size: clamp(1.28rem, 1.8vw, 1.65rem); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #chatPanel { min-height: 360px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #actionPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #policyPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #discordComposerPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modIdentityPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #automodSettingsPanel { border-color: rgba(133, 151, 200, 0.11); background: rgba(5, 8, 18, 0.48); box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 32px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #discordComposerPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #discordHistoryPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modIdentityPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #automodSettingsPanel { margin-top: 14px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #discordComposerPanel summary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #automodSettingsPanel summary { cursor: pointer; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modIdentityPanel { padding: 14px 16px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem { transition: transform 140ms, border-color 140ms, background 140ms, box-shadow 140ms; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem:hover { border-color: rgba(0, 229, 255, 0.2); background: rgba(0, 229, 255, 0.043); transform: translateY(-1px); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .live-dot.ok, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .dot.ok { animation: 1.8s ease-in-out 0s infinite normal none running modLivePulse; } @keyframes modLivePulse { 0%, 100% { box-shadow: rgba(34, 197, 94, 0.12) 0px 0px 0px 3px, rgba(34, 197, 94, 0.18) 0px 0px 14px; } 50% { box-shadow: rgba(34, 197, 94, 0.04) 0px 0px 0px 6px, rgba(34, 197, 94, 0.24) 0px 0px 22px; } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .live-dot.ok, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .dot.ok { animation: auto ease 0s 1 normal none running none; transition: none; } } @media (max-width: 980px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-grid { grid-template-columns: 1fr; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review { grid-row: auto; min-height: 420px; } } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-row: 2; display: grid; grid-template-columns: 230px minmax(0px, 1fr); gap: 20px; align-items: start; margin-top: 0px; width: 100%; order: 0 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { position: sticky; top: 16px; z-index: 8; display: grid; gap: 8px; min-height: 0px; padding: 12px; border: 1px solid rgba(133, 151, 200, 0.14); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 20% 0%, rgba(0, 229, 255, 0.11), transparent 34%), linear-gradient(rgba(12, 18, 34, 0.9), rgba(5, 8, 18, 0.84)); box-shadow: rgba(0, 0, 0, 0.28) 0px 18px 42px; backdrop-filter: blur(16px); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { display: grid; grid-template-columns: 34px minmax(0px, 1fr); gap: 10px; align-items: center; padding: 4px 4px 10px; border-bottom: 1px solid rgba(133, 151, 200, 0.12); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-dashboard-links { display: grid; gap: 8px; padding: 0px 0px 10px; border-bottom: 1px solid rgba(133, 151, 200, 0.12); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(0, 229, 255, 0.34); border-radius: 12px; color: rgb(247, 251, 255); font-size: 0.78rem; font-weight: 950; background: radial-gradient(circle at 30% 15%, rgba(255, 47, 216, 0.35), transparent 46%), rgba(0, 229, 255, 0.1); box-shadow: rgba(0, 229, 255, 0.16) 0px 0px 22px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand strong { display: block; color: rgb(247, 251, 255); font-size: 0.9rem; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { display: flex; align-items: center; min-height: 38px; padding: 9px 10px; border: 1px solid rgba(133, 151, 200, 0.12); border-radius: var(--ui-radius-control); color: var(--text-soft); font-size: 0.82rem; font-weight: 900; text-decoration: none; background: rgba(5, 8, 18, 0.38); transition: transform 140ms, border-color 140ms, background 140ms, box-shadow 140ms, color 140ms; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link:hover { border-color: rgba(0, 229, 255, 0.28); color: rgb(247, 251, 255); transform: translateY(-1px); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active { border-color: rgba(0, 229, 255, 0.42); color: rgb(247, 251, 255); background: linear-gradient(135deg, rgba(0, 229, 255, 0.13), rgba(255, 47, 216, 0.09)), rgba(9, 14, 28, 0.76); box-shadow: rgba(0, 229, 255, 0.13) 0px 0px 22px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-dashboard-link { min-height: 36px; background: rgba(255, 255, 255, 0.035); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-dashboard-link.active { border-color: rgba(0, 229, 255, 0.38); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-switch-row { margin-top: 8px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-main { gap: 10px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-content { display: grid; gap: 18px; min-width: 0px; width: 100%; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { scroll-margin-top: 18px; padding: 18px; border: 1px solid rgba(133, 151, 200, 0.1); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.035), transparent 30%), rgba(6, 10, 22, 0.36); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews { padding: 18px; border-color: rgba(0, 229, 255, 0.14); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2 { margin: 2px 0px 3px; color: rgb(247, 251, 255); font-size: clamp(1.18rem, 1.7vw, 1.55rem); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading .muted { max-width: 720px; margin: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { display: grid; grid-template-columns: repeat(12, minmax(0px, 1fr)); gap: 14px; min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > * { grid-column: 1 / -1; min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-v2-metrics { margin: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-review-command-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools #modCommandPanel { border-color: rgba(0, 229, 255, 0.18); box-shadow: rgba(0, 229, 255, 0.07) 0px 16px 42px, rgba(0, 0, 0, 0.2) 0px 14px 34px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools #modCommandPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools #modCommandPanel .section-command-actions > * { flex: 1 1 170px; min-width: min(100%, 160px); white-space: normal; word-break: normal; overflow-wrap: normal; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-review-command-card .button-primary { min-width: 150px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #modPanel { min-height: 600px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(360px, 0.92fr) minmax(0px, 1.08fr); gap: 14px; align-items: start; min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-chat-column, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-action-column { display: grid; gap: 14px; min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #chatPanel { height: min(720px, -250px + 100vh); min-height: 540px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #modPanel { height: min(720px, -250px + 100vh); min-height: 540px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceChat #chatPanel { min-height: min(680px, -220px + 100vh); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #actionPanel { min-height: 260px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAnnouncements .mod-discord-grid { grid-template-columns: minmax(0px, 1.1fr) minmax(280px, 0.9fr); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .ops-toolbar { margin: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .hero-links { flex-wrap: wrap; justify-content: flex-start; gap: 8px; max-width: none; margin: 0px; padding: 12px; border: 1px solid rgba(133, 151, 200, 0.1); border-radius: var(--ui-radius-card); background: rgba(5, 8, 18, 0.42); display: flex !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .hero-links::before { content: "Overlay and refresh tools"; flex: 1 0 100%; color: var(--text-soft); font-size: 0.78rem; font-weight: 900; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools #actionPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAdvanced #policyPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceSettings #modIdentityPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceSettings #automodSettingsPanel { border-color: rgba(133, 151, 200, 0.1); background: rgba(5, 8, 18, 0.46); } @media (max-width: 1080px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .wrap { padding-top: 14px; width: min(100% - 24px, 1360px) !important; margin: 0px 12px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: 1fr; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { top: 0px; grid-template-columns: repeat(6, minmax(max-content, 1fr)); min-height: 0px; overflow-x: auto; padding: 10px; border-radius: 0 0 var(--ui-radius-card) var(--ui-radius-card); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { display: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-dashboard-links { display: contents; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { justify-content: center; white-space: nowrap; } } @media (max-width: 860px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { padding: 12px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAnnouncements .mod-discord-grid { grid-template-columns: 1fr; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceChat #chatPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #chatPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #modPanel { height: auto; min-height: 420px; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] { background: linear-gradient(90deg, rgba(4, 9, 18, 0.98) 0px, rgba(4, 9, 18, 0.98) 252px, rgba(8, 11, 22, 0.96) 252px, rgba(7, 10, 18, 0.98) 100%), radial-gradient(circle at 88% 4%, rgba(255, 47, 216, 0.09), transparent 28%), radial-gradient(circle at 4% 18%, rgba(0, 229, 255, 0.1), transparent 30%), rgb(7, 10, 18); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .wrap { width: calc(-32px + 100vw) !important; max-width: none !important; margin: 0px 16px !important; padding-top: 16px !important; padding-bottom: 34px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { margin: 0px !important; padding: 11px 16px !important; min-height: 0px !important; border-color: rgba(0, 229, 255, 0.18) !important; background: linear-gradient(90deg, rgba(7, 12, 26, 0.88), rgba(21, 12, 36, 0.68)), radial-gradient(circle at 8% 44%, rgba(255, 47, 216, 0.11), transparent 24%), radial-gradient(circle at 82% 12%, rgba(0, 229, 255, 0.1), transparent 30%) !important; box-shadow: rgba(0, 0, 0, 0.32) 0px 18px 52px, rgba(0, 229, 255, 0.055) 0px 0px 24px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar::before { opacity: 0.24 !important; filter: saturate(0.95) contrast(0.92) brightness(0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::after, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar::after { opacity: 0.28 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-wrap { width: 48px !important; min-width: 48px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-ring { width: 42px !important; height: 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero h1 { margin-bottom: 3px !important; font-size: clamp(1.45rem, 2.35vw, 2.05rem) !important; line-height: 1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-copy, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-copy { max-width: 760px !important; font-size: 0.82rem !important; line-height: 1.35 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: 236px minmax(0px, 1fr) !important; gap: 20px !important; margin-top: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { align-self: start; top: 16px !important; border-color: rgba(133, 151, 200, 0.13) !important; background: linear-gradient(rgba(11, 17, 32, 0.96), rgba(4, 8, 17, 0.94)), radial-gradient(circle at 16% 0%, rgba(0, 229, 255, 0.08), transparent 36%) !important; box-shadow: rgba(0, 229, 255, 0.08) 1px 0px 0px, rgba(0, 0, 0, 0.22) 18px 0px 54px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { min-height: 40px; border-color: rgba(133, 151, 200, 0.1); background: rgba(2, 6, 16, 0.42); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active { border-color: rgba(0, 229, 255, 0.4); background: linear-gradient(90deg, rgba(0, 229, 255, 0.16), rgba(255, 47, 216, 0.08)), rgba(6, 13, 26, 0.86); box-shadow: rgba(0, 229, 255, 0.88) 3px 0px 0px inset, rgba(0, 229, 255, 0.09) 0px 0px 18px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset; padding: 16px !important; border-color: rgba(133, 151, 200, 0.094) !important; background: linear-gradient(rgba(9, 14, 28, 0.58), rgba(5, 8, 18, 0.5)), radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.027), transparent 34%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-content { gap: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { gap: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { margin-bottom: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2 { font-size: clamp(1.12rem, 1.55vw, 1.38rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome { border-color: rgba(0, 229, 255, 0.14) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px !important; margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card { min-height: 112px; padding: 16px !important; border-color: rgba(133, 151, 200, 0.12) !important; background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.06), transparent 35%), linear-gradient(rgba(13, 19, 35, 0.82), rgba(6, 10, 22, 0.72)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card:first-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card { border-color: rgba(0, 229, 255, 0.28) !important; box-shadow: rgba(0, 229, 255, 0.08) 0px 18px 48px, rgba(0, 0, 0, 0.24) 0px 16px 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .metricValue { font-size: clamp(1.7rem, 2.7vw, 2.25rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 14px; margin: 0px !important; padding: 18px 20px !important; background: linear-gradient(110deg, rgba(255, 47, 216, 0.16), rgba(0, 229, 255, 0.12)), linear-gradient(rgba(15, 22, 42, 0.84), rgba(6, 10, 22, 0.78)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .dashboard-quick-start-panel { grid-column: 1 / -1; gap: 12px; margin: 0px !important; padding: 18px 20px !important; border-color: rgba(133, 151, 200, 0.16) !important; background: radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.055), transparent 28%), linear-gradient(rgba(13, 19, 35, 0.84), rgba(6, 10, 22, 0.74)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .dashboard-quick-start-list { grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 10px; display: grid !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .quick-start-check-item { grid-template-rows: auto minmax(0px, 1fr) auto; min-height: 138px; align-content: stretch; gap: 8px; display: grid !important; padding: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .quick-start-check-item .button-secondary { min-height: 34px; padding: 7px 10px; justify-self: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .quick-start-check-item .status { justify-self: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .quick-start-check-item strong, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .quick-start-check-item .muted { overflow-wrap: anywhere; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-buttons, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-actions { gap: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: span 8; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { grid-column: span 4; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] button.button-primary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .button-primary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] button.button-primary { min-height: 40px; padding: 9px 15px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .btn, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .btn { min-height: 34px; padding: 7px 11px; box-shadow: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .btn.ghost-button, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .btn.ghost-button { border-color: rgba(133, 151, 200, 0.12); background: rgba(3, 8, 18, 0.34); color: rgba(218, 232, 241, 0.78); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-primary-action, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #quickStartPromptStart, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .button-primary { min-height: 44px; box-shadow: rgba(255, 47, 216, 0.18) 0px 16px 34px, rgba(0, 229, 255, 0.12) 0px 0px 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metric, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .discord-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem { transition: transform 150ms, border-color 150ms, background 150ms, box-shadow 150ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metric:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .discord-card:hover { transform: translateY(-1px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-overlay-preview-card { border-color: rgba(0, 229, 255, 0.3) !important; box-shadow: rgba(0, 229, 255, 0.1) 0px 24px 64px, rgba(0, 0, 0, 0.32) 0px 18px 54px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-overlay-preview { min-height: clamp(330px, 32vw, 430px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-studio-style-grid { grid-template-columns: minmax(420px, 1.25fr) minmax(300px, 0.75fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .card-label, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .eyebrow, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel-kicker, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .card-label, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .eyebrow, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel-kicker, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metricLabel { letter-spacing: 0.025em !important; text-transform: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-indicator:has(.ok), .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .live-indicator:has(.ok), .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.active { animation: 2.6s ease-in-out 0s infinite normal none running premiumStatusPulse; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .activity-feed-item:first-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .feedItem:first-child, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem:first-child, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem:first-child { animation: 220ms ease-out 0s 1 normal none running premiumItemArrive; } @keyframes premiumStatusPulse { 0%, 100% { box-shadow: rgba(0, 229, 255, 0) 0px 0px 0px; } 50% { box-shadow: rgba(0, 229, 255, 0.12) 0px 0px 18px; } } @keyframes premiumItemArrive { 0% { opacity: 0.72; transform: translateY(3px); } 100% { opacity: 1; transform: translateY(0px); } } @media (max-width: 1080px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .wrap { width: min(100% - 24px, 1360px) !important; margin: 0px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { top: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .dashboard-quick-start-list, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-studio-style-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-indicator:has(.ok), .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .live-indicator:has(.ok), .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .activity-feed-item:first-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .feedItem:first-child, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem:first-child, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem:first-child { animation: auto ease 0s 1 normal none running none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metric, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .discord-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem { transition: none !important; } } .alert-pack-showcase-copy p:not(.landing-kicker):not(.card-label) { margin: 0px; color: rgba(220, 235, 248, 0.84); font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.55; } .alert-pack-type-selector button:hover, .alert-pack-type-selector button.active, .alert-pack-type-selector button[aria-selected="true"] { border-color: color-mix(in srgb, var(--pack-secondary) 62%, rgba(255, 255, 255, 0.22)); color: rgb(255, 255, 255); background: linear-gradient(135deg, color-mix(in srgb, var(--pack-primary) 20%, transparent), color-mix(in srgb, var(--pack-secondary) 18%, transparent)), rgba(8, 13, 28, 0.86); } .alert-pack-tags button.active, .alert-pack-tags button[aria-selected="true"] { border-color: rgba(34, 211, 238, 0.62); color: rgb(255, 255, 255); background: linear-gradient(135deg, rgba(255, 47, 216, 0.28), rgba(34, 211, 238, 0.24)), rgba(8, 13, 28, 0.92); box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px, rgba(34, 211, 238, 0.2) 0px 0px 26px, rgba(255, 255, 255, 0.12) 0px 1px 0px inset; } @supports not (color: color-mix(in srgb, #fff 50%, #000)){.alert-pack-live-card, .alert-pack-selector-wrap, .alert-pack-type-selector button:hover, .alert-pack-type-selector button.active, .alert-pack-type-selector button[aria-selected="true"] { border-color: rgba(34, 211, 238, 0.34); background: linear-gradient(135deg, rgba(255, 47, 216, 0.14), rgba(34, 211, 238, 0.12)), rgba(4, 8, 18, 0.82); } } @keyframes landingGlowDrift { 0%, 100% { transform: translate3d(0px, 0px, 0px) rotate(0deg); } 50% { transform: translate3d(-34px, 28px, 0px) rotate(18deg); } } @keyframes landingWindowFloat { 0%, 100% { transform: rotateY(-7deg) rotateX(4deg) translateY(0px); } 50% { transform: rotateY(-5deg) rotateX(3deg) translateY(-12px); } } @keyframes landingOverlayHover { 0%, 100% { transform: translateY(0px) rotate(2deg); } 50% { transform: translateY(-14px) rotate(-1deg); } } @keyframes landingBars { 0%, 100% { transform: scaleY(0.78); opacity: 0.78; } 50% { transform: scaleY(1); opacity: 1; } } @keyframes landingAlertPulse { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-6px) scale(1.02); } } @keyframes landingAssetFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes alertPackParticleFloat { 0%, 100% { transform: translate3d(0px, 0px, 0px) scale(1); opacity: 0.5; } 50% { transform: translate3d(10px, -18px, 0px) scale(1.35); opacity: 0.92; } } @keyframes alertPackCardSweep { 0% { opacity: 0; transform: translateX(-28%); } 22% { opacity: 0.86; } 100% { opacity: 0; transform: translateX(32%); } } .pricing-page .pricing-shell, .pricing-page .alert-pack-showcase-panel, .pricing-page .pricing-plan-grid, .pricing-page .quick-start-card { max-width: 100%; overflow-x: clip; } .presentation-mode .tester-feedback-button, .presentation-mode .quick-start-nudge, .presentation-mode .frontend-monitor-notice, .clean-capture-mode .demo-controls { display: none !important; } @keyframes presentationPulse { 0%, 100% { opacity: 0.24; transform: scaleX(0.72); } 50% { opacity: 1; transform: scaleX(1); } } .quick-start-presentation-mode .quick-start-shell { max-width: 1180px; padding-top: 34px; } .quick-start-presentation-mode .quick-start-card { display: grid; grid-template-columns: minmax(280px, 0.82fr) minmax(420px, 1.18fr); gap: 16px; border-color: rgba(0, 229, 255, 0.28); box-shadow: rgba(0, 0, 0, 0.42) 0px 28px 80px, rgba(0, 229, 255, 0.1) 0px 0px 70px; } .quick-start-presentation-mode .quick-start-progress, .quick-start-presentation-mode .quick-start-footer { grid-column: 1 / -1; } .quick-start-presentation-mode .quick-step { display: block; opacity: 1; transform: none; min-height: 170px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 18px; background: rgba(255, 255, 255, 0.04); } .quick-start-presentation-mode .quick-step[data-quick-step="4"] { border-color: rgba(0, 229, 255, 0.36); background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 45, 154, 0.08)); } .quick-start-presentation-mode .quick-step[data-quick-step="3"], .quick-start-presentation-mode .quick-step[data-quick-step="4"] { grid-column: 2; } .quick-start-presentation-mode .quick-step[data-quick-step="0"], .quick-start-presentation-mode .quick-step[data-quick-step="1"], .quick-start-presentation-mode .quick-step[data-quick-step="2"], .quick-start-presentation-mode .quick-step[data-quick-step="5"] { grid-column: 1; } .quick-start-presentation-mode .quick-alert-preview { min-height: 230px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap { width: 92px !important; min-width: 92px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring { overflow: hidden; border: 1px solid rgba(255, 45, 154, 0.36); border-radius: 21px; background: radial-gradient(circle at 50% 48%, rgba(255, 45, 154, 0.2), transparent 58%), rgba(4, 8, 20, 0.66); width: 78px !important; height: 78px !important; box-shadow: rgba(255, 45, 154, 0.16) 0px 0px 28px, rgba(0, 229, 255, 0.09) 0px 0px 18px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring::before { inset: 0px; border-radius: 21px; opacity: 0.34; filter: blur(14px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring::after, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring::after { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar { object-fit: contain; transform: scale(2.18) translateY(5%); transform-origin: center 66%; filter: drop-shadow(rgba(255, 45, 154, 0.48) 0px 0px 13px); width: 78px !important; height: 78px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { padding-top: 14px !important; padding-bottom: 14px !important; } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap { width: 76px !important; min-width: 76px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar { width: 66px !important; height: 66px !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel { display: grid; gap: 12px; width: calc(100% - 32px); max-width: 1360px; margin: 14px auto 18px; padding: clamp(16px, 1.8vw, 22px); border: 1px solid rgba(0, 229, 255, 0.24); border-radius: var(--ui-radius-card); background: radial-gradient(circle at 0% 0%, rgba(255, 47, 216, 0.15), transparent 32%), radial-gradient(circle at 92% 8%, rgba(0, 229, 255, 0.13), transparent 34%), linear-gradient(135deg, rgba(15, 18, 38, 0.96), rgba(5, 10, 22, 0.92)); box-shadow: rgba(0, 0, 0, 0.32) 0px 20px 58px, rgba(0, 229, 255, 0.06) 0px 0px 34px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] .hero.topbar { min-height: 0px; background-size: cover; background-blend-mode: multiply; filter: saturate(0.92); padding-top: 10px !important; padding-bottom: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] .hero.topbar .hero-title { font-size: clamp(1.75rem, 3vw, 2.7rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] .hero.topbar .hero-subtitle { max-width: 760px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-top { display: flex; gap: 16px; align-items: start; justify-content: space-between; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-top h2 { margin: 2px 0px 4px; font-size: clamp(1.7rem, 2.6vw, 2.4rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .experience-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: min(100%, 280px); padding: 5px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 14px; background: rgba(2, 6, 16, 0.54); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid article { display: flex; gap: 10px; align-items: center; min-height: auto; padding: 10px 12px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 999px; background: rgba(5, 10, 23, 0.52); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid strong { color: rgb(246, 248, 255); font-size: 0.9rem; white-space: nowrap; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid p { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-actions .button-primary { min-width: 170px; box-shadow: rgba(255, 47, 216, 0.18) 0px 0px 26px, rgba(0, 229, 255, 0.1) 0px 0px 24px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-focus { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid rgba(0, 229, 255, 0.28); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 47, 216, 0.16), rgba(0, 229, 255, 0.08)), rgba(4, 8, 20, 0.82); box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 46px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-focus[hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid[hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-alert-confirmation[hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action button[hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-result[hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-validation [hidden] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel.is-stream-ready .simple-setup-focus { border-color: rgba(124, 255, 209, 0.42); background: linear-gradient(135deg, rgba(16, 185, 129, 0.17), rgba(0, 229, 255, 0.08)), rgba(4, 8, 20, 0.82); animation: 1.2s ease-out 0s 1 normal none running tinkSimpleReadyPulse; position: relative; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel.is-stream-ready .simple-setup-focus::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(100deg, transparent 20%, rgba(124, 255, 209, 0.18), transparent 58%); transform: translateX(-120%); animation: 1.35s ease-out 0s 1 normal none running tinkReadySweep; pointer-events: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .workspace-back-simple { justify-self: end; white-space: nowrap; opacity: 0.82; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .workspace-back-simple:hover { opacity: 1; } @keyframes tinkSimpleReadyPulse { 0% { box-shadow: rgba(124, 255, 209, 0) 0px 0px 0px; } 45% { box-shadow: rgba(124, 255, 209, 0.2) 0px 0px 28px; } 100% { box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 46px; } } @keyframes tinkReadySweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel.is-stream-ready .simple-setup-focus, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel.is-stream-ready .simple-setup-focus::after { animation: auto ease 0s 1 normal none running none; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-copy { display: grid; gap: 7px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-copy h3 { margin: 0px; color: rgb(248, 251, 255); font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-primary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-primary .button-primary { min-width: 168px; min-height: 46px; font-size: 1rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-platform-chooser { display: grid; gap: 10px; padding: 14px; border: 1px dashed rgba(0, 229, 255, 0.28); border-radius: 16px; background: rgba(2, 6, 16, 0.54); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-platform-chooser[hidden] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-platform-chooser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-platform-choice { display: grid; gap: 10px; align-content: space-between; padding: 13px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 14px; background: rgba(6, 12, 28, 0.78); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-platform-choice > div { display: flex; gap: 8px; align-items: center; justify-content: space-between; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-preview { display: grid; grid-template-columns: minmax(260px, 0.58fr) minmax(320px, 0.9fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 16px; background: rgba(4, 8, 20, 0.54); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-preview h3 { margin: 0px 0px 5px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-stage { display: grid; place-items: center; min-height: 104px; border: 1px solid rgba(255, 47, 216, 0.22); border-radius: 14px; background: radial-gradient(circle, rgba(255, 47, 216, 0.24), transparent 34%), linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 47, 216, 0.1)), rgba(2, 6, 16, 0.72); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-alert { display: flex; gap: 10px; align-items: center; min-width: min(100%, 290px); padding: 12px 15px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; background: rgba(5, 10, 23, 0.9); box-shadow: rgba(255, 47, 216, 0.16) 0px 0px 28px, rgba(0, 229, 255, 0.12) 0px 0px 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-spark { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(135deg, rgb(255, 47, 216), rgb(0, 229, 255)); box-shadow: rgba(255, 47, 216, 0.22) 0px 0px 20px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-alert div { display: grid; gap: 2px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-alert span:last-child { color: rgb(174, 185, 209); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-plan { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; position: relative; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-plan::before { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step { display: grid; grid-template-columns: auto minmax(0px, 1fr); grid-template-rows: auto 1fr auto; gap: 10px 12px; align-items: start; min-height: 156px; padding: 14px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 16px; background: rgba(5, 10, 23, 0.58); position: relative; transition: transform 160ms, border-color 160ms, box-shadow 160ms, background 160ms; z-index: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step:hover { transform: translateY(-2px); border-color: rgba(0, 229, 255, 0.28); box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 34px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-active { border-color: rgba(0, 229, 255, 0.44); background: rgba(6, 15, 34, 0.72); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-done { border-color: rgba(124, 255, 209, 0.28); background: linear-gradient(135deg, rgba(16, 185, 129, 0.11), transparent 68%), rgba(5, 14, 23, 0.58); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step > div:not(.simple-card-action) { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step h3 { margin: 0px 0px 5px; color: rgb(248, 251, 255); font-size: 1rem; line-height: 1.18; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step p { margin: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: space-between; align-self: end; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-text-action { padding: 7px 4px; border: 0px; color: rgb(174, 185, 209); background: transparent; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; text-decoration: underline rgba(174, 185, 209, 0.4); text-underline-offset: 3px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-text-action:hover { color: rgb(248, 251, 255); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-text-action:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-help-details summary:focus-visible, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel summary:focus-visible { outline: rgb(0, 229, 255) solid 2px; outline-offset: 3px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .obs-helper-steps { display: grid; gap: 5px; margin: 12px 0px 0px; padding-left: 22px; color: rgb(219, 231, 247); line-height: 1.45; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-help-details { margin-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.12); padding-top: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-help-details summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel summary { color: rgb(174, 246, 255); font-weight: 800; cursor: pointer; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-help-details > div { display: grid; gap: 6px; margin-top: 9px; padding: 10px 12px; border-radius: 10px; color: rgb(174, 185, 209); background: rgba(2, 6, 16, 0.5); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-alert-confirmation { display: grid; gap: 10px; margin-top: 14px; padding: 12px; border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 12px; background: rgba(0, 229, 255, 0.07); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-alert-confirmation > div { display: flex; flex-wrap: wrap; gap: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-alert-confirmation:focus { outline: rgba(0, 229, 255, 0.8) solid 2px; outline-offset: 3px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-done .simple-card-action .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-done .simple-card-action .button-secondary { border-color: rgba(124, 255, 209, 0.2); background: rgba(5, 10, 23, 0.52); color: rgb(223, 249, 255); box-shadow: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-done .simple-card-action .button-primary { border-color: rgba(0, 229, 255, 0.34); background: linear-gradient(135deg, rgba(255, 47, 216, 0.16), rgba(0, 229, 255, 0.14)), rgba(5, 10, 23, 0.64); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-number { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(0, 229, 255, 0.32); border-radius: 999px; color: rgb(248, 251, 255); background: rgba(0, 229, 255, 0.12); box-shadow: rgba(0, 229, 255, 0.1) 0px 0px 20px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-visual { justify-self: end; color: rgb(0, 229, 255); opacity: 0.72; text-shadow: rgba(0, 229, 255, 0.24) 0px 0px 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-done .simple-setup-number { border-color: rgba(124, 255, 209, 0.5); color: rgb(6, 17, 29); background: linear-gradient(135deg, rgb(124, 255, 209), rgb(0, 229, 255)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step.is-active .simple-step-visual { animation: 1.8s ease-in-out 0s infinite normal none running tinkTinyPulse; } @keyframes tinkTinyPulse { 0%, 100% { opacity: 0.58; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-extra-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel { display: block; padding: 12px 14px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 16px; background: rgba(5, 10, 23, 0.46); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel > summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; list-style: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel > summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel > summary > span:first-child { display: grid; gap: 2px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel > summary > span:last-child { color: rgb(0, 229, 255); font-size: 1.3rem; transition: transform 160ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel[open] > summary > span:last-child { transform: rotate(45deg); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel .simple-setup-extra-actions { justify-content: flex-start; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.12); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel h3 { margin: 0px 0px 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-primary .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-extra-actions .ghost-button { transition: transform 160ms, box-shadow 160ms, border-color 160ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-primary .button-primary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action .button-primary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-card-action .button-secondary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-extra-actions .ghost-button:hover { transform: translateY(-1px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-result { display: inline-flex; align-items: center; justify-content: center; min-width: 74px; padding: 7px 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; color: rgb(174, 185, 209); background: rgba(2, 6, 16, 0.5); font-size: 0.8rem; font-weight: 800; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-result.active { color: rgb(6, 17, 29); border-color: rgba(0, 229, 255, 0.7); background: linear-gradient(135deg, rgb(255, 47, 216), rgb(0, 229, 255)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-result.good { color: rgb(124, 255, 209); border-color: rgba(124, 255, 209, 0.42); background: rgba(16, 185, 129, 0.1); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-note { margin: 0px; color: rgb(174, 185, 209); font-size: 0.9rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] #creatorWorkspaceShell { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-panel { margin-bottom: 14px; padding: 16px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-status-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); } @media (max-width: 980px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-plan { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-mini-preview { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-step { min-height: 166px; } } @media (max-width: 680px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-top, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-focus { flex-direction: column; align-items: stretch; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-focus { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-plan, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-helpers-panel { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-plan::before { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-setup-primary { justify-content: stretch; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-status-grid { grid-template-columns: 1fr; } } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap { width: 112px !important; min-width: 112px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { border-radius: 26px; border-color: rgba(255, 45, 154, 0.42); background: radial-gradient(circle at 50% 48%, rgba(255, 45, 154, 0.24), transparent 58%), rgba(4, 8, 20, 0.7); width: 94px !important; height: 94px !important; box-shadow: rgba(255, 45, 154, 0.22) 0px 0px 36px, rgba(0, 229, 255, 0.11) 0px 0px 24px, rgba(255, 255, 255, 0.09) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring::before { border-radius: 26px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar { transform: scale(2.12) translateY(5%); transform-origin: center 66%; width: 94px !important; height: 94px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { padding-top: 16px !important; padding-bottom: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { min-width: 0px; align-content: flex-start; overflow: visible; max-width: min(42vw, 560px) !important; justify-content: flex-end !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > a { flex: 0 1 auto; white-space: nowrap; min-height: 30px !important; padding: 6px 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .tester-feedback-button { max-width: 178px; } @media (max-width: 1320px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 1 / -1; max-width: none !important; justify-content: flex-start !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 2 / -1; width: 100%; align-items: center; max-width: none !important; margin-top: -4px !important; justify-content: flex-start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .account-chip { flex: 1 1 260px; min-width: 0px; margin-left: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .account-chip .status { max-width: 170px; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .account-chip { margin-left: 0px; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-strip { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-panel { width: 100%; max-width: none; margin: 12px 0px 14px; padding: 12px; border-color: rgba(0, 229, 255, 0.16); background: linear-gradient(135deg, rgba(9, 14, 28, 0.78), rgba(5, 8, 18, 0.66)), rgba(2, 6, 16, 0.72); box-shadow: rgba(0, 0, 0, 0.24) 0px 16px 42px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-top { justify-content: flex-end; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-top > div:first-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-setup-focus, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-platform-chooser, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-mini-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-setup-plan, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-helpers-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-status-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-note { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .full-control-setup-strip { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, auto) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid rgba(133, 151, 200, 0.12); border-radius: 16px; background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.08), transparent 32%), rgba(5, 10, 23, 0.58); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-strip h2 { margin: 0px 0px 3px; color: rgb(247, 251, 255); font-size: clamp(1.1rem, 1.6vw, 1.38rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-status, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-actions { justify-content: flex-end; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-actions .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-actions .button-secondary { min-height: 34px; padding: 7px 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #creatorWorkspaceShell { margin-top: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .dashboard-quick-start-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #quickStartNudge { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms #advancedSetupPanel { border-style: solid !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-diagnostics-collapse, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .danger-zone-panel { margin-top: 14px; border-top: 1px solid rgba(133, 151, 200, 0.12); padding-top: 14px; } @media (max-width: 980px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .full-control-setup-strip { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-actions { justify-content: flex-start; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace { min-height: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-grid { align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #bossPanel { align-self: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card { min-height: 96px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel { max-height: min(66vh, 720px); overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel .panel-scroll-body, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel .panel-scroll-body { max-height: min(54vh, 600px); overflow: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .creator-workspace-grid { grid-template-columns: minmax(0px, 1480px); justify-content: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .creator-workspace-grid { grid-template-columns: minmax(0px, 1480px); justify-content: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio #alertControlsPanel { width: 100%; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement #engagementStudioPanel { width: 100%; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-foundation-grid { grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(220px, 1fr); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .live-overlay-preview { min-height: clamp(280px, 26vw, 380px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms #platformSetupCards { max-width: 1120px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-picker { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-card[data-platform-card] { min-height: 112px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-card-body, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-inline-advanced, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .danger-zone-panel { max-width: 980px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-fields { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #bossPanel { max-width: 760px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceSettings .streamer-action-buttons { justify-content: flex-start; } @media (max-width: 1100px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #bossPanel { grid-column: 1 / -1; max-width: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-foundation-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-layout { grid-template-columns: 1fr; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action { display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 18px; background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.11), transparent 30%), linear-gradient(120deg, rgba(255, 47, 216, 0.1), rgba(0, 229, 255, 0.08)), rgba(4, 9, 20, 0.78); box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 42px; position: relative; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-success-icon { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; color: rgb(6, 17, 29); background: rgb(124, 255, 209); box-shadow: rgba(124, 255, 209, 0.28) 0px 0px 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-success-icon[hidden] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action.is-ready > div:first-child { padding-right: 34px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action.is-ready .dashboard-next-action-buttons { padding-right: 42px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action h3 { margin: 2px 0px 4px; color: rgb(248, 251, 255); font-size: clamp(1.05rem, 1.45vw, 1.35rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action .muted { margin: 0px; max-width: 820px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action.is-ready { border-color: rgba(124, 255, 209, 0.36); background: radial-gradient(circle at 0% 0%, rgba(124, 255, 209, 0.15), transparent 30%), linear-gradient(120deg, rgba(16, 185, 129, 0.14), rgba(0, 229, 255, 0.08)), rgba(4, 12, 19, 0.82); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-next-action { grid-template-columns: minmax(0px, 1fr) auto; padding: 10px 12px; border-color: rgba(133, 151, 200, 0.11); background: radial-gradient(circle at 0% 0%, rgba(0, 229, 255, 0.055), transparent 28%), rgba(5, 10, 23, 0.54); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-next-action h3 { font-size: 1.02rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #creatorWorkspaceShell { width: min(1680px, 100% - 28px); margin-inline: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace { overflow: hidden; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-next-action { grid-template-columns: 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-next-action-buttons { justify-content: flex-start; } } @keyframes giveawayExplosionCore { 0% { opacity: 0; transform: scale(0.08) rotate(-14deg); } 18% { opacity: 1; transform: scale(0.88) rotate(6deg); } 42% { opacity: 0.92; transform: scale(1.24) rotate(16deg); } 100% { opacity: 0.2; transform: scale(1.9) rotate(28deg); } } @keyframes giveawayExplosionSparks { 0% { opacity: 0; transform: scale(0.2) rotate(-10deg); } 20% { opacity: 1; transform: scale(1.05) rotate(7deg); } 100% { opacity: 0.44; transform: scale(1.62) rotate(22deg); } } @keyframes giveawayShockwave { 0% { opacity: 0; transform: scale(0.24); filter: blur(0px); } 22% { opacity: 0.95; } 100% { opacity: 0; transform: scale(2.1); filter: blur(2px); } } @keyframes giveawayComets { 0% { opacity: 0.15; transform: translate3d(-4%, 4%, 0px) scale(0.96); } 28% { opacity: 0.92; } 100% { opacity: 0.48; transform: translate3d(3%, -3%, 0px) scale(1.04); } } @keyframes giveawayWinnerPop { 0% { opacity: 0; transform: translateY(14px) scale(0.86); } 55% { opacity: 1; transform: translateY(-4px) scale(1.04); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .wrap { width: min(1680px, -32px + 100vw) !important; max-width: none !important; margin-inline: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { display: grid !important; grid-template-columns: auto minmax(0px, 1fr) minmax(220px, max-content) !important; align-items: center !important; gap: 14px !important; padding: 12px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-main { padding-left: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero h1 { max-width: 100%; overflow-wrap: anywhere; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions { min-width: 0px; display: flex !important; justify-content: flex-end !important; align-items: center !important; align-self: center !important; gap: 8px !important; max-width: min(440px, 36vw) !important; margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions > * { flex: 0 1 auto; max-width: 100%; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .btn, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .button-primary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .button-secondary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .ghost-button, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .btn { line-height: 1.15; text-align: center; overflow-wrap: anywhere; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-v2-metrics { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metric { min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metric .muted { font-size: 0.78rem; line-height: 1.35; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { grid-template-columns: minmax(0px, 0.95fr) minmax(0px, 1.05fr) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #chatPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #modPanel { min-height: 500px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panelHead, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel-heading, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panelHead, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel-heading { min-width: 0px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panelHeadActions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel-heading-meta { flex: 0 1 auto; min-width: 0px; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions { grid-column: 1 / -1; justify-content: flex-start !important; max-width: none !important; } } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .wrap { width: min(100% - 20px, 1360px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { grid-template-columns: 1fr !important; align-items: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-wrap { display: none !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-v2-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } } @media (max-width: 580px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-v2-metrics { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-buttons { align-items: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .section-command-actions > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-buttons > * { flex: 1 1 100%; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .global-attention-banner { width: min(1680px, -32px + 100vw); margin: 10px auto 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .global-attention-banner[data-notice-kind="connection"] { border-color: rgba(255, 77, 77, 0.34); background: radial-gradient(circle at 0% 0%, rgba(255, 77, 77, 0.13), transparent 30%), linear-gradient(rgba(28, 10, 18, 0.9), rgba(7, 10, 20, 0.86)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .simple-experience-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-quick-start-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #quickStartNudge { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] .full-control-setup-strip { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .full-control-setup-strip { grid-column: 1 / -1; grid-template-columns: minmax(0px, 1fr) auto auto; align-items: center; gap: 12px; margin: 0px; display: grid !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .streamer-action-card { grid-column: span 5; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel { grid-column: span 7; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #bossPanel { grid-column: span 5; max-width: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { grid-column: span 7; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid { grid-template-columns: minmax(0px, 1fr); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #setupDoctorPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #goLiveChecklistPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #eventReplayPanel { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .ops-toolbar { grid-column: 1 / -1; margin: 0px; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .full-control-setup-strip, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { grid-column: 1 / -1; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .full-control-setup-strip { grid-template-columns: 1fr; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] { background: radial-gradient(circle at 16% 4%, rgba(0, 229, 255, 0.12), transparent 30%), radial-gradient(circle at 92% 16%, rgba(255, 47, 216, 0.08), transparent 28%), radial-gradient(circle at 48% 100%, rgba(34, 197, 94, 0.055), transparent 34%), linear-gradient(rgb(5, 8, 18) 0%, rgb(8, 11, 20) 46%, rgb(5, 7, 13) 100%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"]::before { content: ""; position: fixed; inset: 0px; z-index: 0; pointer-events: none; background: radial-gradient(transparent 42%, rgba(0, 0, 0, 0.34) 100%) 0% 0% / auto, linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0% 0% / 74px 74px, linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px) 0% 0% / 74px 74px; opacity: 0.62; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .wrap, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .hero, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-shell { position: relative; z-index: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace { border-color: rgba(128, 146, 183, 0.14) !important; background: linear-gradient(rgba(10, 15, 27, 0.74), rgba(5, 8, 17, 0.62)), radial-gradient(circle at 8% 0%, rgba(0, 229, 255, 0.024), transparent 36%) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 24px 70px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-heading { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.075); align-items: end !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-heading h2 { font-size: clamp(1.22rem, 1.7vw, 1.55rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-grid { align-items: start; grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; gap: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .platform-setup-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .reviewItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .feedItem { border-radius: 8px !important; border-color: rgba(128, 146, 183, 0.12) !important; background: linear-gradient(rgba(13, 19, 34, 0.74), rgba(7, 10, 21, 0.68)), rgba(255, 255, 255, 0.02) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 38px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel-full, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel-wide { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio #alertControlsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement #engagementStudioPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceOverlays #overlaySetupPanel { border-color: rgba(0, 229, 255, 0.26) !important; background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.12), transparent 34%), radial-gradient(circle at 100% 20%, rgba(255, 47, 216, 0.07), transparent 28%), linear-gradient(rgba(15, 22, 40, 0.88), rgba(6, 10, 22, 0.78)) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 28px 78px, rgba(0, 229, 255, 0.075) 0px 0px 46px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] details.panel { background: rgba(8, 12, 23, 0.58) !important; box-shadow: rgba(255, 255, 255, 0.03) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panelHead, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .overlay-link-card-head { gap: 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.067); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 999px; background: currentcolor; opacity: 0.72; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.status-good { border-color: rgba(34, 197, 94, 0.42) !important; background: rgba(34, 197, 94, 0.12) !important; color: rgb(187, 247, 208) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.status-warn { border-color: rgba(245, 158, 11, 0.44) !important; background: rgba(245, 158, 11, 0.12) !important; color: rgb(253, 230, 138) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.bad, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.status-bad { border-color: rgba(248, 113, 113, 0.42) !important; background: rgba(248, 113, 113, 0.106) !important; color: rgb(254, 202, 202) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-primary { border-color: rgba(0, 229, 255, 0.52) !important; background: linear-gradient(135deg, rgba(0, 229, 255, 0.24), rgba(34, 197, 94, 0.18)), rgba(8, 18, 30, 0.94) !important; box-shadow: rgba(0, 229, 255, 0.12) 0px 14px 32px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-secondary { border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(255, 255, 255, 0.043) !important; color: rgba(226, 232, 240, 0.9) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .btn { border-color: rgba(148, 163, 184, 0.12) !important; background: rgba(4, 8, 18, 0.34) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome { border-color: rgba(0, 229, 255, 0.18) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid { grid-column: 1 / -1; grid-template-columns: repeat(8, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card { display: grid; min-height: 108px; grid-column: span 2; align-content: space-between; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card:first-child { grid-column: span 3; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .streamer-action-card { min-height: 190px; align-content: center; grid-column: span 5 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel { grid-column: span 7 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #bossPanel { grid-column: span 5 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { grid-column: span 7 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .connection-summary-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio { border-color: rgba(255, 47, 216, 0.16) !important; background: linear-gradient(rgba(12, 10, 24, 0.68), rgba(5, 8, 17, 0.6)), radial-gradient(circle at 12% 0%, rgba(255, 47, 216, 0.055), transparent 34%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-primary-actions { justify-content: flex-start; margin: 4px 0px 16px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-style-grid { align-items: start; grid-template-columns: minmax(560px, 1.45fr) minmax(280px, 0.55fr) !important; gap: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .live-overlay-preview-card { padding: 18px !important; border-color: rgba(0, 229, 255, 0.34) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .live-overlay-preview { min-height: clamp(390px, 39vw, 540px) !important; border-radius: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-foundation-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-control-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement { border-color: rgba(34, 197, 94, 0.16) !important; background: linear-gradient(rgba(8, 19, 24, 0.7), rgba(5, 8, 17, 0.62)), radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.075), transparent 36%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement #engagementStudioPanel { display: grid; grid-template-columns: 1fr; grid-template-areas: "header" "selector" "editor"; gap: 16px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement #engagementStudioPanel > .panelHead { grid-area: header; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-tabs { grid-area: selector; gap: 12px; padding: 0px; border: 0px; background: transparent; display: grid !important; grid-template-columns: repeat(4, minmax(150px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-setup-card.active { border-color: rgba(34, 211, 238, 0.52) !important; background: linear-gradient(145deg, rgba(34, 211, 238, 0.16), rgba(255, 47, 216, 0.08)), rgba(4, 8, 18, 0.66) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-layout { grid-area: editor; grid-template-columns: minmax(300px, 0.86fr) minmax(360px, 1.14fr); grid-template-areas: "summary settings" "preview settings"; align-items: start; display: grid !important; gap: 10px 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-copy-card { grid-area: summary; min-height: 156px; border-color: rgba(34, 197, 94, 0.2) !important; background: linear-gradient(rgba(11, 26, 28, 0.78), rgba(6, 13, 19, 0.68)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-settings-card { grid-area: settings; display: grid; gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-settings-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-preview-card { grid-area: preview; border-color: rgba(0, 229, 255, 0.22) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-preview { min-height: 230px; justify-content: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-meter { height: 18px !important; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-tabs { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-layout { grid-template-areas: "summary" "settings" "preview"; grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms { border-color: rgba(125, 211, 252, 0.14) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms #advancedSetupPanel { display: grid; gap: 14px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-picker { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-adapter-card { align-content: space-between; min-height: 118px !important; background: linear-gradient(rgba(8, 16, 28, 0.82), rgba(5, 9, 17, 0.72)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-adapter-card-top { align-items: flex-start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-flow { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-card[data-platform-card] { border-color: rgba(125, 211, 252, 0.22) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .creator-workspace-grid { grid-template-columns: minmax(0px, 1fr) minmax(320px, 0.72fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel { grid-column: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel { grid-column: 2; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .feedItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .activity-feed-item { padding: 9px 10px !important; gap: 5px !important; background: rgba(3, 7, 16, 0.5) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .activity-feed-item > span, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dot.ok { box-shadow: rgba(0, 229, 255, 0.08) 0px 0px 0px 5px, rgba(0, 229, 255, 0.18) 0px 0px 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceSettings .creator-workspace-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced #eventPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced #jobsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced #actionPanel { grid-column: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced pre, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting pre { background: rgba(0, 0, 0, 0.22) !important; border-color: rgba(148, 163, 184, 0.1) !important; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement #engagementStudioPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceEngagement .engagement-layout, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceSettings .creator-workspace-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card:first-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-style-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-studio-foundation-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAlertStudio .alert-control-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspacePlatforms .platform-setup-flow { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-bar { display: grid; grid-template-columns: repeat(6, minmax(0px, 1fr)); gap: 8px; margin: 0px 0px 14px; padding: 8px; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 8px; background: linear-gradient(rgba(6, 12, 22, 0.92), rgba(5, 9, 17, 0.78)), rgba(3, 7, 14, 0.72); box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 42px; backdrop-filter: blur(14px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 7px; background: rgba(255, 255, 255, 0.035); color: rgba(226, 232, 240, 0.84); font-size: 0.78rem; font-weight: 800; line-height: 1.1; letter-spacing: 0px; text-align: center; white-space: nowrap; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.75); box-shadow: rgba(148, 163, 184, 0.08) 0px 0px 0px 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-good { border-color: rgba(34, 197, 94, 0.24); background: rgba(34, 197, 94, 0.08); color: rgb(220, 252, 231); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-good::before { background: rgb(34, 197, 94); box-shadow: rgba(34, 197, 94, 0.1) 0px 0px 0px 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-warn { border-color: rgba(245, 158, 11, 0.24); background: rgba(245, 158, 11, 0.08); color: rgb(253, 230, 138); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-warn::before { background: rgb(245, 158, 11); box-shadow: rgba(245, 158, 11, 0.1) 0px 0px 0px 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-bad { border-color: rgba(248, 113, 113, 0.28); background: rgba(248, 113, 113, 0.08); color: rgb(254, 202, 202); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-bad::before { background: rgb(248, 113, 113); box-shadow: rgba(248, 113, 113, 0.1) 0px 0px 0px 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill:first-child { justify-content: flex-start; padding-left: 12px; color: rgb(224, 242, 254); text-transform: uppercase; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .readiness-strip + .live-ops-bar { margin-top: -4px; } .giveaway-prize-card .card-label { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 12px; border: 1px solid rgba(250, 204, 21, 0.28); border-radius: 999px; background: rgba(250, 204, 21, 0.12); color: rgb(254, 249, 195); letter-spacing: 0.14em; } .giveaway-explosion-preview p:not(.card-label) { max-width: 620px; color: rgba(254, 243, 199, 0.9); font-size: clamp(0.95rem, 1.5vw, 1.14rem); font-weight: 800; line-height: 1.45; } .giveaway-entry-row .overlay-url-field { flex: 1 1 220px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] [data-owner-dev-only][hidden], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-owner-dev-tools="hidden"] [data-owner-dev-only] { display: none !important; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-bar { grid-template-columns: repeat(3, minmax(0px, 1fr)); } } @media (max-width: 720px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-bar { grid-template-columns: 1fr 1fr; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill { justify-content: flex-start; white-space: normal; } } .launch-status-message.warn { border-color: rgba(255, 184, 77, 0.34); background: rgba(255, 184, 77, 0.08); } .trust-page .quick-start-card { position: relative; z-index: 1; gap: 18px; } .trust-page .quick-start-shell, .trust-page .quick-start-hero { position: relative; z-index: 1; } .beta-page .quick-start-shell { width: min(960px, 100% - 32px); display: grid; gap: 22px; padding-bottom: 72px; } .beta-page .quick-start-hero { align-items: center; margin-bottom: 0px; padding: clamp(18px, 3vw, 26px); border: 1px solid rgba(34, 211, 238, 0.18); border-radius: var(--tink-radius-lg, 18px); background: radial-gradient(circle at 12% 0%, rgba(255, 47, 216, 0.12), transparent 34%), linear-gradient(135deg, rgba(13, 20, 38, 0.86), rgba(5, 11, 24, 0.74)); box-shadow: rgba(0, 0, 0, 0.26) 0px 24px 70px; } .beta-page .quick-start-hero h1 { max-width: 680px; } .beta-page .quick-start-hero .hero-copy { max-width: 620px; } .beta-request-card.quick-start-card { min-height: auto; padding: clamp(22px, 3.5vw, 34px); border-color: rgba(34, 211, 238, 0.26); background: radial-gradient(circle at 80% 8%, rgba(34, 211, 238, 0.12), transparent 34%), radial-gradient(circle at 0% 0%, rgba(255, 47, 216, 0.1), transparent 32%), linear-gradient(rgba(12, 18, 36, 0.92), rgba(5, 9, 20, 0.9)); box-shadow: rgba(0, 0, 0, 0.34) 0px 30px 90px, rgba(34, 211, 238, 0.08) 0px 0px 60px; } .beta-steps-row .connection-summary-card { min-height: 126px; background: linear-gradient(rgba(13, 19, 34, 0.7), rgba(5, 9, 20, 0.7)); } @media (max-width: 760px){.beta-page .quick-start-shell { width: min(100% - 24px, 960px); } } .quick-start-secondary { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; padding: 10px 12px; } .quick-start-secondary summary { cursor: pointer; color: var(--text-muted); font-weight: 700; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .go-live-panel { position: relative; overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .go-live-panel::after { content: ""; position: absolute; inset: -35% auto auto 8%; width: 48%; height: 180%; pointer-events: none; border-radius: 999px; background: radial-gradient(circle, rgba(0, 229, 255, 0.16), transparent 64%); filter: blur(18px); opacity: 0.55; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .go-live-panel > * { position: relative; z-index: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .go-live-panel .streamer-primary-action { min-width: 148px; min-height: 44px; border-color: rgba(255, 47, 216, 0.48) !important; background: linear-gradient(135deg, var(--tink-pink, #ff2fd8), var(--tink-cyan, #22d3ee)) !important; color: rgb(6, 8, 22) !important; box-shadow: rgba(255, 47, 216, 0.22) 0px 18px 42px, rgba(34, 211, 238, 0.16) 0px 0px 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .go-live-panel .streamer-action-feedback { border-radius: 8px; background: rgba(0, 229, 255, 0.055); color: rgba(226, 252, 255, 0.9); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel { display: grid; grid-template-columns: minmax(260px, 1fr) auto; align-items: center; gap: 18px; grid-column: 1 / -1 !important; min-height: 164px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel .streamer-action-feedback { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid { grid-column: 1 / -1 !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card:first-child { min-height: 96px; grid-column: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel { opacity: 0.88; grid-column: span 8 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { opacity: 0.9; grid-column: span 4 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card { min-height: 88px; padding: 11px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card .muted { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-actions .button-secondary { min-height: 30px; padding: 6px 9px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #bossPanel { max-width: none; opacity: 0.82; grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting .panel { opacity: 0.78; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { grid-column: 1 / -1 !important; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] { --full-soft-surface: rgba(12, 18, 34, 0.82); --full-soft-surface-strong: rgba(16, 24, 44, 0.9); --full-soft-border: rgba(148, 163, 184, 0.15); --full-soft-border-bright: rgba(34, 211, 238, 0.24); --full-soft-cyan: rgba(34, 211, 238, 0.15); --full-soft-pink: rgba(255, 47, 216, 0.12); --full-soft-shadow: 0 20px 70px rgba(0, 0, 0, 0.24); background: radial-gradient(circle at 16% 4%, rgba(255, 47, 216, 0.09), transparent 30%), radial-gradient(circle at 88% 12%, rgba(34, 211, 238, 0.09), transparent 34%), linear-gradient(rgb(8, 17, 31) 0%, rgb(7, 11, 22) 56%, rgb(7, 10, 19) 100%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-hero { border-color: rgba(34, 211, 238, 0.18) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 0, 0, 0.22) 0px 18px 60px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .dashboard-hero::before { opacity: 0.62 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .full-control-setup-strip { border-color: rgba(34, 211, 238, 0.18) !important; border-radius: 18px !important; background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(255, 47, 216, 0.055)), rgba(9, 16, 30, 0.82) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-card { border-color: var(--full-soft-border) !important; border-radius: 18px !important; background: linear-gradient(rgba(18, 27, 48, 0.88), rgba(7, 11, 22, 0.9)), rgba(8, 13, 24, 0.86) !important; box-shadow: rgba(0, 0, 0, 0.2) 14px 0px 60px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-link { transition: border-color 160ms, background 160ms, color 160ms, transform 160ms; border-color: rgba(148, 163, 184, 0.14) !important; border-radius: 11px !important; background: rgba(7, 12, 24, 0.54) !important; color: rgba(233, 242, 255, 0.84) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-link:hover { transform: translateX(2px); border-color: rgba(34, 211, 238, 0.32) !important; background: rgba(34, 211, 238, 0.08) !important; color: rgba(248, 252, 255, 0.96) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-link[aria-current="true"] { border-color: rgba(34, 211, 238, 0.48) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.12), rgba(34, 211, 238, 0.1)), rgba(15, 23, 42, 0.78) !important; box-shadow: rgba(34, 211, 238, 0.85) 3px 0px 0px inset, rgba(34, 211, 238, 0.08) 0px 0px 26px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace { border-color: var(--full-soft-border) !important; border-radius: 20px !important; background: linear-gradient(rgba(16, 24, 44, 0.68), rgba(7, 11, 22, 0.82)), rgba(8, 13, 24, 0.78) !important; box-shadow: var(--full-soft-shadow) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-heading h2 { color: rgba(244, 248, 255, 0.94) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-workspace-heading .muted, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .muted { color: rgba(203, 213, 225, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .platform-setup-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .alert-studio-section, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .alert-control-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .activity-feed-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .feedItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .reviewItem { border-color: var(--full-soft-border) !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(20, 29, 52, 0.66), rgba(8, 12, 24, 0.76)), var(--full-soft-surface) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset, rgba(0, 0, 0, 0.14) 0px 12px 34px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .connection-summary-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .platform-setup-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .overlay-link-card:hover { border-color: rgba(34, 211, 238, 0.28) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px 16px 42px, rgba(34, 211, 238, 0.055) 0px 0px 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel { isolation: isolate; border-color: rgba(34, 211, 238, 0.28) !important; border-radius: 24px !important; background: radial-gradient(circle at 16% 20%, rgba(255, 47, 216, 0.15), transparent 32%), radial-gradient(circle at 82% 42%, rgba(34, 211, 238, 0.14), transparent 34%), linear-gradient(135deg, rgba(47, 26, 76, 0.62), rgba(10, 38, 56, 0.66)), rgba(11, 17, 31, 0.88) !important; box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset, rgba(34, 211, 238, 0.06) 0px -1px 0px inset, rgba(0, 0, 0, 0.24) 0px 24px 70px, rgba(34, 211, 238, 0.11) 0px 0px 58px, rgba(255, 47, 216, 0.055) 0px 0px 86px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel::before { content: ""; position: absolute; z-index: 0; inset: -24px -18px; pointer-events: none; border-radius: 32px; background: radial-gradient(at 30% 28%, rgba(255, 47, 216, 0.15), transparent 58%), radial-gradient(at 72% 50%, rgba(34, 211, 238, 0.13), transparent 60%); filter: blur(22px); opacity: 0.58; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .go-live-panel::after { inset: -45% auto auto 3%; width: 62%; height: 210%; background: radial-gradient(circle, rgba(34, 211, 238, 0.16), transparent 64%), radial-gradient(circle at 72% 42%, rgba(255, 47, 216, 0.12), transparent 58%); opacity: 0.32; filter: blur(30px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .go-live-panel .streamer-primary-action, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-primary { border-color: rgba(255, 91, 221, 0.46) !important; border-radius: 11px !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.94), rgba(34, 211, 238, 0.9)) !important; box-shadow: rgba(255, 47, 216, 0.18) 0px 14px 34px, rgba(34, 211, 238, 0.11) 0px 0px 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-ghost { border-color: rgba(148, 163, 184, 0.2) !important; border-radius: 11px !important; background: rgba(14, 20, 37, 0.72) !important; color: rgba(239, 246, 255, 0.9) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-secondary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-ghost:hover { border-color: rgba(34, 211, 238, 0.32) !important; background: rgba(34, 211, 238, 0.075) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status-pill, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .badge, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill { border-radius: 999px !important; border-color: rgba(148, 163, 184, 0.18) !important; background: rgba(15, 23, 42, 0.72) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status-pill.ok, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .badge.ok, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-good { border-color: rgba(52, 211, 153, 0.28) !important; background: rgba(16, 185, 129, 0.1) !important; color: rgba(209, 250, 229, 0.94) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status-pill.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .badge.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .live-ops-pill.is-warn { border-color: rgba(251, 191, 36, 0.28) !important; background: rgba(251, 191, 36, 0.094) !important; color: rgba(254, 243, 199, 0.94) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] input, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] select, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] textarea { border-color: rgba(148, 163, 184, 0.18) !important; border-radius: 10px !important; background: rgba(5, 10, 21, 0.72) !important; box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] input:focus, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] select:focus, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] textarea:focus { border-color: rgba(34, 211, 238, 0.46) !important; box-shadow: rgba(34, 211, 238, 0.1) 0px 0px 0px 3px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceTesting .panel { opacity: 0.86; border-style: solid !important; background: rgba(10, 15, 28, 0.62) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel + .live-health-grid { margin-top: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card { opacity: 0.84; border-color: rgba(148, 163, 184, 0.12) !important; background: linear-gradient(rgba(14, 22, 39, 0.54), rgba(7, 11, 22, 0.68)), rgba(8, 13, 24, 0.62) !important; box-shadow: rgba(255, 255, 255, 0.027) 0px 1px 0px inset, rgba(0, 0, 0, 0.11) 0px 10px 28px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { opacity: 0.82; margin-top: 8px; } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .creator-sidebar-link, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-ghost { transition: none !important; transform: none !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { align-items: center; grid-template-columns: repeat(3, minmax(120px, max-content)) minmax(160px, 1fr) !important; gap: 10px !important; padding: 10px 12px !important; border-color: rgba(148, 163, 184, 0.13) !important; border-radius: 16px !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.06), rgba(255, 47, 216, 0.035)), rgba(8, 13, 24, 0.72) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status { position: relative; justify-self: end; min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status summary { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 10px; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 999px; background: rgba(15, 23, 42, 0.58); color: rgba(203, 213, 225, 0.82); font-size: 0.74rem; font-weight: 850; cursor: pointer; list-style: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status summary:hover { border-color: rgba(34, 211, 238, 0.28); color: rgba(239, 246, 255, 0.92); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-list { position: absolute; right: 0px; z-index: 20; display: grid; gap: 8px; min-width: 240px; margin-top: 8px; padding: 10px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 14px; background: linear-gradient(rgba(17, 24, 39, 0.96), rgba(8, 12, 24, 0.96)), rgb(9, 14, 27); box-shadow: rgba(0, 0, 0, 0.34) 0px 18px 50px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-list .live-ops-pill { width: 100%; justify-content: flex-start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label { display: block; margin: 10px 8px 2px; color: rgba(148, 163, 184, 0.54); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.11em; line-height: 1; text-transform: uppercase; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand + .creator-sidebar-group-label { margin-top: 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label + .creator-sidebar-link, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label + .button-secondary { margin-top: 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel { margin: 6px 0px 14px !important; padding: clamp(18px, 2.1vw, 28px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel .panelHead, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel .streamer-action-copy { max-width: 760px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel .button-secondary { background: rgba(9, 15, 28, 0.62) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-grid { align-items: stretch; grid-template-columns: minmax(230px, 1.25fr) repeat(auto-fit, minmax(150px, 0.8fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card.primary-connection { opacity: 0.98; border-color: rgba(52, 211, 153, 0.28) !important; background: radial-gradient(circle at 12% 18%, rgba(52, 211, 153, 0.13), transparent 42%), linear-gradient(rgba(17, 31, 48, 0.72), rgba(8, 13, 24, 0.78)) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(0, 0, 0, 0.16) 0px 16px 40px, rgba(52, 211, 153, 0.055) 0px 0px 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card.secondary-connection { opacity: 0.7; min-height: 78px; padding: 10px; border-color: rgba(148, 163, 184, 0.1) !important; background: rgba(8, 13, 24, 0.5) !important; box-shadow: rgba(255, 255, 255, 0.02) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card.secondary-connection:hover { opacity: 0.92; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel .connection-summary-card.secondary-connection p { -webkit-line-clamp: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good { animation: 4.8s ease-in-out 0s infinite normal none running tinkStatusBreath; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel::before { animation: 8s ease-in-out 0s infinite normal none running tinkGoLiveAmbient; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .go-live-panel .streamer-primary-action:active { transform: translateY(1px) scale(0.99); box-shadow: rgba(255, 47, 216, 0.2) 0px 8px 24px, rgba(34, 211, 238, 0.18) 0px 0px 30px !important; } @keyframes tinkStatusBreath { 0%, 100% { box-shadow: rgba(52, 211, 153, 0) 0px 0px 0px; } 50% { box-shadow: rgba(52, 211, 153, 0.12) 0px 0px 18px; } } @keyframes tinkGoLiveAmbient { 0%, 100% { opacity: 0.48; transform: scale(0.985); } 50% { opacity: 0.68; transform: scale(1.015); } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel::before { animation: auto ease 0s 1 normal none running none !important; } } @media (max-width: 1080px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status { grid-column: 1 / -1; justify-self: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label { display: none; } } @media (max-width: 720px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-list { position: static; min-width: 0px; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 72px minmax(280px, 1fr) minmax(360px, auto) !important; gap: 14px !important; min-height: 0px !important; padding: 16px 18px !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { width: 60px !important; height: 60px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring { width: 58px !important; height: 58px !important; border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar { width: 42px !important; height: 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main { gap: 5px !important; min-height: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main .view-badge-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main .hero-identity-row { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main .eyebrow { margin: 0px 0px 2px !important; font-size: 0.72rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main h1 { font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important; line-height: 1.02 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main .hero-copy { max-width: 760px !important; margin-top: 5px !important; font-size: 0.84rem !important; line-height: 1.35 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row { margin-top: 7px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 3 !important; max-width: 480px !important; margin-top: 0px !important; gap: 6px !important; justify-content: flex-end !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions > a { min-height: 28px !important; padding: 5px 9px !important; border-radius: 9px !important; font-size: 0.73rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .ghost-button[href="/terms.html"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .ghost-button[href="/privacy.html"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .ghost-button[href="/chat-overlay.html"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .ghost-button[href="/alert-overlay.html"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .ghost-button[href="/"] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .account-chip { flex: 0 1 auto !important; min-height: 34px !important; margin-left: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions .account-chip [data-tink-logout] { font-weight: 800; min-height: 34px !important; padding: 7px 13px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip { min-height: 0px !important; margin: 12px 0px 8px !important; padding: 9px 12px !important; border-radius: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-copy { gap: 2px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-copy p { margin-top: 2px !important; line-height: 1.25 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-actions .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-actions .button-secondary { min-height: 30px !important; padding: 6px 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { margin: 0px 0px 10px !important; padding: 8px 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="simple"] #launchStatusCards { display: none !important; } @media (max-width: 1320px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 64px minmax(0px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; max-width: none !important; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { display: none !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel { position: relative; overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel::before { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; background: radial-gradient(circle at 12% 8%, rgba(255, 47, 216, 0.08), transparent 32%), radial-gradient(circle at 88% 18%, rgba(34, 211, 238, 0.07), transparent 36%), linear-gradient(rgba(255, 255, 255, 0.02), transparent 44%); opacity: 0.82; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-experience-panel > * { position: relative; z-index: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid { row-gap: clamp(16px, 2vw, 24px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .feedItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .reviewItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-control-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-card { border-color: rgba(148, 163, 184, 0.114) !important; border-radius: 18px !important; background: linear-gradient(rgba(18, 27, 48, 0.54), rgba(8, 13, 24, 0.62)), rgba(9, 14, 26, 0.56) !important; box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset, rgba(0, 0, 0, 0.12) 0px 12px 34px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card:hover { border-color: rgba(34, 211, 238, 0.22) !important; background: linear-gradient(rgba(19, 31, 55, 0.62), rgba(8, 14, 26, 0.7)), rgba(9, 14, 26, 0.64) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset, rgba(0, 0, 0, 0.15) 0px 16px 42px, rgba(34, 211, 238, 0.043) 0px 0px 26px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid { position: relative; padding: 4px 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .creator-workspace-grid::before { content: ""; position: absolute; inset: -16px -10px; z-index: 0; pointer-events: none; border-radius: 28px; background: radial-gradient(at 22% 20%, rgba(34, 211, 238, 0.06), transparent 62%), radial-gradient(at 76% 62%, rgba(255, 47, 216, 0.05), transparent 62%); filter: blur(12px); opacity: 0.78; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity .creator-workspace-grid > * { position: relative; z-index: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel { position: relative; border-color: rgba(34, 211, 238, 0.16) !important; background: linear-gradient(rgba(13, 23, 43, 0.58), rgba(7, 11, 22, 0.64)), rgba(8, 13, 24, 0.56) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #chatPanel::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceActivity #activityFeedPanel::after { content: ""; position: absolute; inset: 0px; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(34, 211, 238, 0.043), transparent 28%, transparent 72%, rgba(255, 47, 216, 0.035)), linear-gradient(rgba(255, 255, 255, 0.02), transparent 40%); opacity: 0.86; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel { margin-bottom: clamp(18px, 2.4vw, 30px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .go-live-panel + .live-health-grid { margin-top: 4px !important; margin-bottom: clamp(10px, 1.8vw, 20px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card { opacity: 0.8; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome .live-health-card:first-child { opacity: 0.94; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceHome #alertsPanel { margin-top: clamp(8px, 1.4vw, 16px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panelHead, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel-heading { border-bottom-color: rgba(148, 163, 184, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] { --tink-surface-soft: rgba(10, 17, 31, 0.58); --tink-surface-glass: rgba(14, 23, 42, 0.48); --tink-border-soft: rgba(148, 163, 184, 0.105); --tink-border-live: rgba(34, 211, 238, 0.2); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset, rgba(0, 0, 0, 0.22) 0px 20px 70px, rgba(34, 211, 238, 0.043) 0px 0px 70px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { position: relative; align-items: flex-start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu { position: relative; margin-left: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 13px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 999px; color: rgba(226, 232, 240, 0.86); background: rgba(7, 11, 22, 0.58); box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset; cursor: pointer; user-select: none; transition: border-color 160ms, box-shadow 160ms, transform 160ms, background 160ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu summary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu[open] summary { border-color: rgba(34, 211, 238, 0.34); background: rgba(10, 18, 32, 0.82); box-shadow: rgba(34, 211, 238, 0.09) 0px 0px 18px; transform: translateY(-1px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel { position: absolute; top: calc(100% + 10px); right: 0px; z-index: 50; display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 8px; width: min(380px, -28px + 100vw); padding: 12px; border: 1px solid rgba(34, 211, 238, 0.2); border-radius: 18px; background: radial-gradient(circle at 20% 0%, rgba(255, 47, 216, 0.11), transparent 42%), radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.1), transparent 44%), rgba(7, 11, 22, 0.94); box-shadow: rgba(0, 0, 0, 0.4) 0px 26px 70px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; backdrop-filter: blur(18px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel .ghost-button { width: 100%; justify-content: center; display: inline-flex !important; min-height: 34px !important; padding: 7px 10px !important; border-color: rgba(148, 163, 184, 0.14) !important; background: rgba(11, 18, 32, 0.76) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel .button-secondary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel .ghost-button:hover { border-color: rgba(34, 211, 238, 0.32) !important; background: rgba(13, 25, 43, 0.94) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar { border-color: rgba(34, 211, 238, 0.12) !important; background: linear-gradient(rgba(12, 19, 34, 0.66), rgba(5, 9, 18, 0.8)), rgba(7, 11, 22, 0.72) !important; box-shadow: rgba(34, 211, 238, 0.06) -1px 0px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label { letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.6) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { min-height: 35px !important; border-color: rgba(148, 163, 184, 0.094) !important; background: rgba(9, 14, 26, 0.4) !important; color: rgba(226, 232, 240, 0.74) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover { border-color: rgba(34, 211, 238, 0.22) !important; color: rgba(248, 250, 252, 0.94) !important; background: rgba(12, 22, 38, 0.66) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active { border-color: rgba(34, 211, 238, 0.46) !important; color: rgb(248, 250, 252) !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(255, 47, 216, 0.12)), rgba(12, 20, 38, 0.78) !important; box-shadow: rgba(34, 211, 238, 0.9) 3px 0px 0px inset, rgba(34, 211, 238, 0.06) 0px 0px 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.bad { border-color: rgba(251, 191, 36, 0.22) !important; background: radial-gradient(circle at 12% 50%, rgba(251, 191, 36, 0.11), transparent 36%), linear-gradient(90deg, rgba(251, 191, 36, 0.08), rgba(34, 211, 238, 0.043)), rgba(12, 17, 28, 0.74) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.warn .status, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.bad .status { color: rgb(253, 230, 138) !important; border-color: rgba(251, 191, 36, 0.36) !important; background: rgba(251, 191, 36, 0.09) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel { border-color: rgba(34, 211, 238, 0.26) !important; background: radial-gradient(at 18% 18%, rgba(255, 47, 216, 0.16), transparent 52%), radial-gradient(at 92% 42%, rgba(34, 211, 238, 0.14), transparent 58%), linear-gradient(115deg, rgba(42, 19, 61, 0.68), rgba(9, 19, 35, 0.82)), rgba(9, 14, 26, 0.72) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 26px 86px, rgba(34, 211, 238, 0.07) 0px 0px 56px, rgba(255, 255, 255, 0.043) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel::before { opacity: 0.72 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card { border-color: rgba(148, 163, 184, 0.09) !important; background: linear-gradient(180deg, rgba(16, 25, 45, 0.46), rgba(8, 13, 24, 0.56)), var(--tink-surface-soft) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card .metricLabel { color: rgba(125, 211, 252, 0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card .metricValue { letter-spacing: 0px; text-shadow: rgba(34, 211, 238, 0.055) 0px 0px 18px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card .metricDetail { color: rgba(203, 213, 225, 0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card:nth-child(3) { border-color: rgba(34, 211, 238, 0.18) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar .status.good::before { box-shadow: rgba(52, 211, 153, 0.45) 0px 0px 12px; } @media (prefers-reduced-motion: no-preference){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel { animation: 8s ease-in-out 0s infinite normal none running tinkGoLiveBreath; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar .status.good::before { animation: 2.8s ease-in-out 0s infinite normal none running tinkStatusPulse; } } @keyframes tinkGoLiveBreath { 0%, 100% { box-shadow: rgba(0, 0, 0, 0.22) 0px 26px 86px, rgba(34, 211, 238, 0.055) 0px 0px 48px, rgba(255, 255, 255, 0.043) 0px 1px 0px inset; } 50% { box-shadow: rgba(0, 0, 0, 0.24) 0px 28px 90px, rgba(255, 47, 216, 0.075) 0px 0px 68px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset; } } @keyframes tinkStatusPulse { 0%, 100% { transform: scale(1); opacity: 0.86; } 50% { transform: scale(1.25); opacity: 1; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu { width: 100%; margin-left: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu summary { width: 100%; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu-panel { left: 0px; right: auto; grid-template-columns: 1fr; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-editor { gap: 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hero-grid { display: grid !important; grid-template-columns: minmax(520px, 1.35fr) minmax(300px, 0.65fr) !important; gap: 20px !important; align-items: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-preview-hero { padding: clamp(18px, 2.4vw, 26px) !important; border-color: rgba(34, 211, 238, 0.36) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-preview-hero .live-overlay-preview { min-height: clamp(430px, 44vw, 640px) !important; border-radius: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-advanced-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-control-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-slider-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-studio-foundation-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hero-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-control-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-slider-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion .alert-studio-foundation-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-hero { grid-template-columns: 1fr; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-preview-hero .live-overlay-preview { min-height: 360px !important; } .alert-studio-primary-actions .button-primary, .alert-studio-primary-actions .button-secondary, .alert-studio-primary-actions .ghost-button { width: 100%; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] { --creator-polish-gap: clamp(18px, 2vw, 28px); --creator-polish-soft-border: rgba(148, 163, 184, 0.105); --creator-polish-focus-border: rgba(34, 211, 238, 0.26); --creator-polish-radius: 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { gap: clamp(18px, 2.2vw, 30px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content { gap: var(--creator-polish-gap) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { padding: clamp(18px, 2.2vw, 30px) !important; border-color: rgba(34, 211, 238, 0.13) !important; border-radius: var(--creator-polish-radius) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 47, 216, 0.055), transparent 34%), radial-gradient(circle at 100% 18%, rgba(34, 211, 238, 0.05), transparent 38%), linear-gradient(rgba(13, 22, 38, 0.8), rgba(6, 10, 20, 0.92)) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 28px 90px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading { margin-bottom: clamp(16px, 1.8vw, 24px) !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(148, 163, 184, 0.09) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2 { letter-spacing: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid { gap: clamp(16px, 1.9vw, 24px) !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .section-command-card { border-color: var(--creator-polish-soft-border) !important; border-radius: 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel { grid-column: 1 / -1 !important; margin: 4px 0px clamp(18px, 2.4vw, 32px) !important; padding: clamp(20px, 2.5vw, 34px) !important; border-color: rgba(34, 211, 238, 0.32) !important; border-radius: 26px !important; background: radial-gradient(at 18% 16%, rgba(255, 47, 216, 0.18), transparent 48%), radial-gradient(at 88% 54%, rgba(34, 211, 238, 0.18), transparent 56%), linear-gradient(120deg, rgba(48, 22, 70, 0.72), rgba(8, 22, 39, 0.88)) !important; box-shadow: rgba(0, 0, 0, 0.26) 0px 36px 100px, rgba(34, 211, 238, 0.08) 0px 0px 80px, rgba(255, 47, 216, 0.06) 0px 0px 64px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel .card-label { color: rgba(125, 211, 252, 0.92) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel .streamer-action-feedback { border-color: rgba(34, 211, 238, 0.14) !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.075), rgba(255, 47, 216, 0.04)), rgba(5, 10, 18, 0.38) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #streamHealthPanel { grid-column: 1 / -1 !important; border-color: rgba(52, 211, 153, 0.22) !important; border-radius: 22px !important; background: radial-gradient(circle at 12% 0%, rgba(52, 211, 153, 0.11), transparent 34%), linear-gradient(rgba(12, 25, 31, 0.68), rgba(7, 12, 22, 0.78)) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 22px 70px, rgba(255, 255, 255, 0.03) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthPanel .panelHead { gap: 14px !important; margin-bottom: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthCards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthPanel .connection-summary-card { min-height: 0px !important; padding: 14px !important; border-color: rgba(148, 163, 184, 0.1) !important; background: linear-gradient(rgba(13, 22, 38, 0.56), rgba(7, 12, 22, 0.68)), rgba(8, 13, 24, 0.58) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthLog { max-height: 220px; overflow: auto; opacity: 0.94; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { gap: clamp(14px, 1.6vw, 20px) !important; margin-bottom: clamp(12px, 1.8vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .connection-platform-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel .feedItem { border-color: rgba(148, 163, 184, 0.09) !important; background: linear-gradient(rgba(14, 23, 41, 0.48), rgba(7, 12, 22, 0.62)), rgba(8, 13, 24, 0.58) !important; box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { opacity: 0.94; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel:hover { opacity: 1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { border-radius: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-primary-action { min-height: 40px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button { min-height: 36px; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { padding: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading { align-items: flex-start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel { grid-template-columns: 1fr !important; padding: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthCards { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-platform-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-control-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-pack-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button, .pricing-plan-card { transition: transform 180ms, border-color 180ms, background-color 180ms, box-shadow 220ms, opacity 180ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .panel:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .streamer-action-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-platform-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-control-card:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-pack-card:hover, .pricing-plan-card:hover { transform: translateY(-2px); border-color: rgba(34, 211, 238, 0.24) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 22px 70px, rgba(34, 211, 238, 0.06) 0px 0px 34px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-primary-action:hover { transform: translateY(-1px); box-shadow: rgba(255, 47, 216, 0.2) 0px 14px 34px, rgba(34, 211, 238, 0.13) 0px 0px 28px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover { transform: translateX(2px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel::after { animation: 9s ease-in-out 0s infinite alternate none running creatorAmbientDrift; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card-status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .billing-status-card .status.good { animation: 4.4s ease-in-out 0s infinite normal none running creatorStatusPulse; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .tink-success-pulse { animation: 780ms ease-out 0s 1 normal none running creatorSuccessPulse; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-feedback.good.tink-success-pulse, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #alertSettingsStatus.good { border-color: rgba(52, 211, 153, 0.34) !important; box-shadow: rgba(52, 211, 153, 0.08) 0px 0px 0px 1px, rgba(52, 211, 153, 0.12) 0px 0px 28px !important; } @keyframes creatorAmbientDrift { 0% { opacity: 0.28; transform: translate3d(-1%, 0px, 0px) scale(1); } 100% { opacity: 0.46; transform: translate3d(1.4%, -1%, 0px) scale(1.03); } } @keyframes creatorStatusPulse { 0%, 100% { box-shadow: rgba(52, 211, 153, 0) 0px 0px 0px, rgba(255, 255, 255, 0.02) 0px 1px 0px inset; } 50% { box-shadow: rgba(52, 211, 153, 0.12) 0px 0px 18px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset; } } @keyframes creatorPremiumShimmer { 0%, 64%, 100% { opacity: 0; transform: translateX(-20%) rotate(10deg); } 74% { opacity: 0.78; } 88% { opacity: 0; transform: translateX(360%) rotate(10deg); } } @keyframes creatorSuccessPulse { 0% { transform: translateY(0px) scale(1); box-shadow: rgba(52, 211, 153, 0) 0px 0px 0px; } 38% { transform: translateY(-1px) scale(1.015); box-shadow: rgba(52, 211, 153, 0.12) 0px 0px 0px 1px, rgba(52, 211, 153, 0.22) 0px 0px 26px; } 100% { transform: translateY(0px) scale(1); box-shadow: rgba(52, 211, 153, 0) 0px 0px 0px; } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-platform-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-control-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-pack-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button, .pricing-plan-card { transition-duration: 0.01ms !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card-status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .billing-status-card .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .tink-success-pulse, .plan-premium-badge::after, .pricing-popular-badge::after, .pricing-plan-premium::after, .pricing-plan-ultimate::after, .pricing-plan-featured::after, .plan-locked::after, .alert-studio-premium::after, .enhanced-effects-panel::after, .alert-pack-card.is-locked::after, .alert-pack-card[data-premium="true"]::after { animation: auto ease 0s 1 normal none running none !important; transform: none !important; } } .dashboard-page, .trust-page { --tink-radius-sm: 10px; --tink-radius-md: 14px; --tink-radius-lg: 18px; --tink-border-idle: rgba(148, 163, 184, 0.12); --tink-border-active: rgba(34, 211, 238, 0.3); --tink-surface-idle: rgba(9, 14, 28, 0.7); --tink-surface-raised: rgba(13, 20, 38, 0.84); --tink-copy-muted: rgba(203, 213, 225, 0.76); --tink-copy-soft: rgba(226, 232, 240, 0.9); --tink-glow-active: 0 0 24px rgba(34, 211, 238, 0.12); --tink-glow-premium: 0 0 34px rgba(255, 47, 216, 0.12), 0 0 28px rgba(34, 211, 238, 0.08); --tink-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.24); } .dashboard-page h1, .dashboard-page h2, .dashboard-page h3, .trust-page h1, .trust-page h2, .trust-page h3 { letter-spacing: 0px; } .dashboard-page h1, .trust-page h1 { line-height: 1.04; } .dashboard-page h2, .trust-page h2 { line-height: 1.12; } .dashboard-page p, .trust-page p, .dashboard-page .muted, .trust-page .muted, .dashboard-page small, .trust-page small { color: var(--tink-copy-muted); line-height: 1.48; } .dashboard-page .card-label, .dashboard-page .eyebrow, .dashboard-page .panel-kicker, .trust-page .card-label, .trust-page .eyebrow, .trust-page .panel-kicker { color: rgba(186, 230, 253, 0.78); font-size: 0.75rem; font-weight: 850; letter-spacing: 0px; text-transform: none; } .dashboard-page .panel, .dashboard-page .quick-start-card, .dashboard-page .connection-summary-card, .dashboard-page .live-health-card, .dashboard-page .alert-control-card, .dashboard-page .alert-pack-card, .dashboard-page .metric, .dashboard-page .section-command-card, .trust-page .quick-start-card, .trust-page .connection-summary-card, .pricing-plan-card, .plan-upgrade-dialog { border-color: var(--tink-border-idle); border-radius: var(--tink-radius-lg); background-color: var(--tink-surface-idle); box-shadow: var(--tink-shadow-soft); } .dashboard-page .panelHead, .dashboard-page .panel-heading, .trust-page .panelHead, .trust-page .panel-heading { gap: 14px; border-bottom-color: rgba(148, 163, 184, 0.1); } .dashboard-page .creator-workspace, .dashboard-page .creator-workspace-grid, .dashboard-page .dashboard-grid-streamer, .trust-page .quick-start-shell { gap: clamp(16px, 1.7vw, 26px); } .dashboard-page .button-primary, .dashboard-page button.button-primary, .trust-page .button-primary, .trust-page button.button-primary { min-height: 40px; border-color: rgba(34, 211, 238, 0.36); box-shadow: rgba(255, 47, 216, 0.18) 0px 14px 34px, rgba(34, 211, 238, 0.11) 0px 0px 24px; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .trust-page .button-secondary, .trust-page .ghost-button { min-height: 38px; border-color: rgba(148, 163, 184, 0.14); background: linear-gradient(rgba(15, 23, 42, 0.78), rgba(8, 13, 28, 0.72)); box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset; } .dashboard-page .button-secondary:hover, .dashboard-page .ghost-button:hover, .trust-page .button-secondary:hover, .trust-page .ghost-button:hover { border-color: rgba(34, 211, 238, 0.26); background: linear-gradient(rgba(20, 31, 54, 0.88), rgba(10, 17, 34, 0.82)); } .dashboard-page .status, .dashboard-page .status-pill, .dashboard-page .badge, .trust-page .status, .trust-page .status-pill, .trust-page .badge, .pricing-popular-badge, .plan-premium-badge { min-height: 26px; border-radius: 999px; font-size: 0.73rem; font-weight: 850; letter-spacing: 0px; } .dashboard-page .status.good, .dashboard-page .status.active, .dashboard-page .status-live, .trust-page .status.good, .trust-page .status.active, .pricing-popular-badge { border-color: rgba(52, 211, 153, 0.34); box-shadow: rgba(52, 211, 153, 0.1) 0px 0px 18px; } .dashboard-page .status.warn, .dashboard-page .status.bad, .trust-page .status.warn, .trust-page .status.bad { box-shadow: rgba(251, 191, 36, 0.08) 0px 0px 18px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .creator-sidebar { border-color: rgba(34, 211, 238, 0.12); background: radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.06), transparent 34%), linear-gradient(rgba(9, 14, 29, 0.9), rgba(5, 8, 18, 0.96)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .creator-sidebar-group-label { margin: 14px 0px 7px; color: rgba(148, 163, 184, 0.58); font-size: 0.68rem; letter-spacing: 0.08em; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .creator-sidebar-link { min-height: 36px; border-color: rgba(148, 163, 184, 0.09); border-radius: var(--tink-radius-sm); background: rgba(8, 13, 26, 0.52); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .creator-sidebar-link.active { border-color: var(--tink-border-active); background: linear-gradient(135deg, rgba(255, 47, 216, 0.13), rgba(34, 211, 238, 0.12)), rgba(10, 18, 36, 0.92); box-shadow: var(--tink-glow-active); } .dashboard-page input, .dashboard-page select, .dashboard-page textarea, .trust-page input, .trust-page select, .trust-page textarea { border-color: rgba(148, 163, 184, 0.14); border-radius: var(--tink-radius-sm); background-color: rgba(3, 7, 18, 0.74); } .dashboard-page input:focus, .dashboard-page select:focus, .dashboard-page textarea:focus, .trust-page input:focus, .trust-page select:focus, .trust-page textarea:focus, .dashboard-page button:focus-visible, .dashboard-page a:focus-visible, .trust-page button:focus-visible, .trust-page a:focus-visible { outline: rgba(34, 211, 238, 0.5) solid 2px; outline-offset: 2px; } @media (max-width: 760px){.dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .trust-page .button-primary, .trust-page .button-secondary, .trust-page .ghost-button { min-height: 42px; } .dashboard-page .panel, .dashboard-page .quick-start-card, .trust-page .quick-start-card, .pricing-plan-card { border-radius: var(--tink-radius-md); } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] { --brand-pink: #FF2FD8; --brand-cyan: #22D3EE; --brand-purple: #8B5CF6; --base-navy: #050814; --surface-level-1: rgba(5, 9, 20, 0.78); --surface-level-2: rgba(10, 16, 31, 0.72); --surface-level-3: rgba(13, 21, 39, 0.84); --elevation-level-1: 0 12px 34px rgba(0, 0, 0, 0.18); --elevation-level-2: 0 18px 48px rgba(0, 0, 0, 0.24); --elevation-level-3: 0 24px 70px rgba(0, 0, 0, 0.28), 0 0 22px rgba(34, 211, 238, 0.08); --elevation-level-4: 0 16px 42px rgba(255, 47, 216, 0.2), 0 0 28px rgba(34, 211, 238, 0.13); --elevation-level-5: 0 28px 92px rgba(255, 47, 216, 0.18), 0 0 62px rgba(34, 211, 238, 0.16); --status-ok: #55bfa7; --status-ok-soft: rgba(85, 191, 167, 0.13); --status-ok-border: rgba(85, 191, 167, 0.32); --status-warn: #d9a441; --status-warn-soft: rgba(217, 164, 65, 0.13); --status-warn-border: rgba(217, 164, 65, 0.34); --status-bad: #e0717b; --status-bad-soft: rgba(224, 113, 123, 0.12); --status-bad-border: rgba(224, 113, 123, 0.32); --status-info: #6bb7e8; --status-info-soft: rgba(107, 183, 232, 0.11); --status-info-border: rgba(107, 183, 232, 0.28); background: radial-gradient(circle at 28% 0%, rgba(34, 211, 238, 0.06), transparent 32%), radial-gradient(circle at 78% 4%, rgba(255, 47, 216, 0.043), transparent 30%), linear-gradient(rgba(5, 8, 20, 0.98), rgb(3, 6, 14)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.top { background: linear-gradient(90deg, rgba(3, 6, 16, 0.9), rgba(7, 13, 26, 0.78)), rgba(4, 8, 18, 0.9) !important; box-shadow: var(--elevation-level-2), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.top::before { opacity: 0.32 !important; filter: saturate(0.66) contrast(0.82) brightness(0.72) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::after, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.top::after { opacity: 0.28 !important; background: radial-gradient(circle at 14% 18%, rgba(255, 47, 216, 0.13), transparent 32%), radial-gradient(circle at 72% 15%, rgba(34, 211, 238, 0.08), transparent 34%), linear-gradient(rgba(3, 6, 14, 0.18), rgba(3, 6, 14, 0.66)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .metric, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-platform-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .section-command-card { border-color: rgba(148, 163, 184, 0.106) !important; background: linear-gradient(180deg, var(--surface-level-2), rgba(5, 9, 20, 0.74)) !important; box-shadow: var(--elevation-level-1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { background: radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.04), transparent 34%), linear-gradient(rgba(8, 14, 27, 0.72), rgba(3, 6, 14, 0.9)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome { --workspace-accent: var(--brand-cyan); --workspace-accent-soft: rgba(34, 211, 238, 0.12); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio { --workspace-accent: var(--brand-pink); --workspace-accent-soft: rgba(255, 47, 216, 0.13); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement { --workspace-accent: var(--brand-purple); --workspace-accent-soft: rgba(139, 92, 246, 0.13); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms { --workspace-accent: var(--brand-cyan); --workspace-accent-soft: rgba(85, 191, 167, 0.11); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity { --workspace-accent: var(--status-info); --workspace-accent-soft: rgba(107, 183, 232, 0.11); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced { --workspace-accent: #8794ad; --workspace-accent-soft: rgba(135, 148, 173, 0.1); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings { --workspace-accent: var(--brand-purple); --workspace-accent-soft: rgba(139, 92, 246, 0.1); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { border-top-color: rgba(148, 163, 184, 0.09) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome.creator-workspace { border-top-color: rgba(34, 211, 238, 0.24) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio.creator-workspace { border-top-color: rgba(255, 47, 216, 0.24) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement.creator-workspace { border-top-color: rgba(139, 92, 246, 0.24) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms.creator-workspace { border-top-color: rgba(85, 191, 167, 0.22) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity.creator-workspace { border-top-color: rgba(107, 183, 232, 0.22) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced.creator-workspace { border-top-color: rgba(135, 148, 173, 0.18) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings.creator-workspace { border-top-color: rgba(139, 92, 246, 0.18) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] button.button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-primary-action { border-color: rgba(34, 211, 238, 0.42) !important; color: rgb(6, 17, 30) !important; background: linear-gradient(135deg, var(--brand-pink), var(--brand-cyan)) !important; box-shadow: var(--elevation-level-4) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button { color: rgba(241, 245, 249, 0.9) !important; border-color: rgba(148, 163, 184, 0.15) !important; background: linear-gradient(rgba(12, 18, 34, 0.84), rgba(6, 10, 22, 0.78)) !important; box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-secondary:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .ghost-button:hover { border-color: rgba(34, 211, 238, 0.26) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .danger-zone .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] [data-danger-action], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .button-danger { border-color: var(--status-bad-border) !important; color: rgb(255, 217, 222) !important; background: linear-gradient(rgba(74, 18, 30, 0.48), rgba(22, 8, 15, 0.68)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card-status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .billing-status-card .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready { color: rgb(200, 245, 233) !important; border-color: var(--status-ok-border) !important; background: linear-gradient(180deg, var(--status-ok-soft), rgba(4, 13, 18, 0.66)) !important; box-shadow: rgba(85, 191, 167, 0.08) 0px 0px 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green::before { background: var(--status-ok) !important; box-shadow: rgba(85, 191, 167, 0.28) 0px 0px 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-live-chip-warning { color: rgb(246, 221, 177) !important; border-color: var(--status-warn-border) !important; background: linear-gradient(180deg, var(--status-warn-soft), rgba(20, 14, 4, 0.56)) !important; box-shadow: rgba(217, 164, 65, 0.08) 0px 0px 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.bad, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.bad, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status-offline { color: rgb(255, 214, 219) !important; border-color: var(--status-bad-border) !important; background: linear-gradient(180deg, var(--status-bad-soft), rgba(22, 8, 14, 0.62)) !important; box-shadow: rgba(224, 113, 123, 0.08) 0px 0px 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status-live, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-live { color: rgb(216, 242, 255) !important; border-color: var(--status-info-border) !important; background: linear-gradient(180deg, var(--status-info-soft), rgba(5, 13, 24, 0.68)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #launchStatusCards .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthCards .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .billing-status-card { border-top: 1px solid rgba(148, 163, 184, 0.11) !important; background: linear-gradient(rgba(10, 16, 31, 0.7), rgba(5, 9, 20, 0.7)) !important; box-shadow: var(--elevation-level-1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #launchStatusCards .connection-summary-card[data-status-state="ready"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthCards .connection-summary-card[data-status-state="ready"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card[data-status-state="ready"] { border-top-color: var(--status-ok-border) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .stream-ready-banner { border-color: rgba(34, 211, 238, 0.2) !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.09), transparent 34%), linear-gradient(rgba(8, 18, 30, 0.72), rgba(5, 10, 20, 0.78)) !important; box-shadow: var(--elevation-level-2) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.warn { border-color: var(--status-warn-border) !important; background: linear-gradient(rgba(217, 164, 65, 0.09), rgba(7, 12, 22, 0.78)) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel { border-color: rgba(34, 211, 238, 0.24) !important; background: radial-gradient(circle at 18% 0%, rgba(255, 47, 216, 0.13), transparent 38%), radial-gradient(circle at 85% 10%, rgba(34, 211, 238, 0.12), transparent 34%), linear-gradient(rgba(12, 20, 39, 0.9), rgba(5, 9, 20, 0.84)) !important; box-shadow: var(--elevation-level-3) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-stage, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-studio-preview-hero { border-color: rgba(255, 47, 216, 0.32) !important; box-shadow: var(--elevation-level-5) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .go-live-panel .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview { background: radial-gradient(circle at 50% 35%, rgba(255, 47, 216, 0.22), transparent 38%), radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.16), transparent 36%), rgba(4, 7, 18, 0.9) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-control-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-card { box-shadow: var(--elevation-level-1) !important; } @media (prefers-reduced-motion: no-preference){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready { animation: 6.2s ease-in-out 0s infinite normal none running creatorMutedStatusPulse !important; } } @keyframes creatorMutedStatusPulse { 0%, 100% { box-shadow: rgba(85, 191, 167, 0.05) 0px 0px 8px; } 50% { box-shadow: rgba(85, 191, 167, 0.12) 0px 0px 14px; } } @media (prefers-reduced-motion: reduce){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready { animation: auto ease 0s 1 normal none running none !important; } } @media (min-width: 1081px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { max-height: calc(-32px + 100vh); overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav::-webkit-scrollbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav::-webkit-scrollbar { width: 8px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav::-webkit-scrollbar-track, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav::-webkit-scrollbar-track { background: rgba(4, 8, 17, 0.24); border-radius: 999px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav::-webkit-scrollbar-thumb, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav::-webkit-scrollbar-thumb { background: linear-gradient(rgba(34, 211, 238, 0.3), rgba(255, 47, 216, 0.22)); border-radius: 999px; } } @media (max-width: 1080px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { max-height: none; overflow: auto hidden; overscroll-behavior: auto; scrollbar-gutter: auto; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { padding: 12px 16px !important; border-color: rgba(34, 211, 238, 0.16) !important; background: linear-gradient(90deg, rgba(10, 15, 30, 0.88), rgba(15, 23, 42, 0.76)), rgba(5, 9, 18, 0.9) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 10px 30px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::after { opacity: 0.34 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { width: 52px !important; height: 52px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring { width: 50px !important; height: 50px !important; border-radius: 16px !important; box-shadow: rgba(255, 47, 216, 0.18) 0px 0px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar { width: 37px !important; height: 37px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main h1 { font-size: clamp(1.35rem, 2vw, 1.82rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main .hero-copy { max-width: 680px !important; font-size: 0.8rem !important; line-height: 1.3 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.global-attention-banner, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip[data-notice-kind="connection"] { display: grid !important; margin: 8px 0px !important; padding: 8px 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { margin: 8px 0px 10px !important; padding: 7px 9px !important; border-color: rgba(148, 163, 184, 0.1) !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.043), rgba(255, 47, 216, 0.027)), rgba(7, 11, 21, 0.72) !important; box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin: 0px 0px 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details { border: 1px solid rgba(148, 163, 184, 0.1); border-radius: 14px; background: rgba(7, 11, 21, 0.46); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 8px 12px; color: rgba(226, 232, 240, 0.82); cursor: pointer; list-style: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary span { font-size: 0.78rem; font-weight: 850; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary small { color: rgba(148, 163, 184, 0.72); font-size: 0.72rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details[open] { background: rgba(9, 14, 27, 0.72); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-grid { padding: 0px 12px 12px !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-grid .connection-summary-card { min-height: 0px; padding: 10px 11px !important; border-color: rgba(148, 163, 184, 0.1) !important; background: rgba(8, 12, 24, 0.62) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-message { grid-column: 1 / -1; padding: 10px 12px !important; border-color: rgba(148, 163, 184, 0.12) !important; background: rgba(8, 12, 24, 0.66) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav { border-color: rgba(148, 163, 184, 0.11) !important; background: linear-gradient(rgba(11, 18, 32, 0.72), rgba(5, 9, 18, 0.82)), rgba(5, 9, 18, 0.82) !important; box-shadow: rgba(34, 211, 238, 0.035) 1px 0px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand { border-bottom-color: rgba(148, 163, 184, 0.1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { border-color: rgba(148, 163, 184, 0.1) !important; background: rgba(7, 11, 21, 0.5) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover { border-color: rgba(34, 211, 238, 0.2) !important; background: rgba(13, 20, 37, 0.76) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link[aria-current="page"] { border-color: rgba(34, 211, 238, 0.38) !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(255, 47, 216, 0.08)) !important; box-shadow: rgba(34, 211, 238, 0.8) 3px 0px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure { margin-top: 12px; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 14px; background: rgba(7, 11, 21, 0.52); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 10px 12px; cursor: pointer; list-style: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure summary span { color: rgb(238, 243, 255); font-weight: 900; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure summary small { color: rgba(148, 163, 184, 0.78); font-size: 0.76rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure .helper-copy, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure .discord-form-grid { margin: 0px 12px 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure-compact { margin-top: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure-compact summary { min-height: 36px; padding-block: 8px; } @media (max-width: 1320px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 56px minmax(0px, 1fr) !important; } } @media (max-width: 720px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .settings-disclosure summary { align-items: flex-start; flex-direction: column; } } :root { --tink-bg-deep: #050912; --tink-bg-page: #070b16; --tink-bg-vignette: rgba(3, 6, 13, 0.82); --tink-surface: rgba(11, 18, 34, 0.82); --tink-surface-soft: rgba(14, 23, 42, 0.62); --tink-surface-elevated: rgba(16, 26, 48, 0.9); --tink-surface-focus: rgba(13, 31, 53, 0.88); --tink-border-quiet: rgba(148, 163, 184, 0.12); --tink-border-focus: rgba(34, 211, 238, 0.28); --tink-text-strong: #f4f7ff; --tink-text-body: #dbe4f4; --tink-text-muted: #9aa8bd; --tink-brand-pink: #ff2fd8; --tink-brand-cyan: #22d3ee; --tink-brand-purple: #8b5cf6; --tink-status-green: #55bfa7; --tink-status-green-bg: rgba(85, 191, 167, 0.13); --tink-status-amber: #d9a441; --tink-status-amber-bg: rgba(217, 164, 65, 0.13); --tink-status-red: #e0717b; --tink-status-red-bg: rgba(224, 113, 123, 0.13); --tink-status-blue: #60a5fa; --tink-status-blue-bg: rgba(96, 165, 250, 0.12); --tink-shadow-level-1: 0 12px 36px rgba(0, 0, 0, 0.24); --tink-shadow-level-2: 0 20px 54px rgba(0, 0, 0, 0.34); --tink-shadow-focus: 0 24px 80px rgba(34, 211, 238, 0.12), 0 12px 44px rgba(255, 47, 216, 0.08); --tink-glow-brand-soft: 0 0 28px rgba(255, 47, 216, 0.16), 0 0 38px rgba(34, 211, 238, 0.1); --tink-glow-status-soft: 0 0 18px rgba(85, 191, 167, 0.14); --tink-radius-shell: 22px; --tink-radius-card: 18px; --tink-radius-control: 12px; } body.dashboard-page, body.trust-page, body.quick-start-page, body.landing-page { color: var(--tink-text-body); background: radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.1), transparent 32%), radial-gradient(circle at 88% 6%, rgba(255, 47, 216, 0.1), transparent 34%), linear-gradient(145deg, rgb(5, 9, 18) 0%, rgb(7, 16, 29) 44%, rgb(5, 9, 18) 100%) !important; } body.dashboard-page::before, body.trust-page::before, body.landing-page::before { opacity: 0.42 !important; filter: saturate(0.72) brightness(0.58) !important; } .dashboard-page .hero.topbar, .trust-page .quick-start-hero, .landing-page .hero-card, .pricing-hero { border: 1px solid rgba(34, 211, 238, 0.14) !important; border-radius: var(--tink-radius-shell) !important; background: linear-gradient(90deg, rgba(8, 13, 27, 0.92), rgba(11, 24, 42, 0.78)), rgba(6, 10, 20, 0.9) !important; box-shadow: var(--tink-shadow-level-2) !important; } .dashboard-page .hero.topbar { min-height: 0px !important; padding: clamp(12px, 1.3vw, 18px) clamp(14px, 1.8vw, 22px) !important; } .dashboard-page .hero.topbar::before, .dashboard-page .hero.topbar::after, .trust-page .quick-start-hero::before, .landing-page .hero-card::before { opacity: 0.24 !important; } .dashboard-page .hero-main h1, .trust-page h1, .landing-page h1 { color: var(--tink-text-strong); letter-spacing: 0px !important; } .dashboard-page .hero-copy, .trust-page .hero-copy, .landing-page .hero-copy, .dashboard-page .muted, .trust-page .muted { color: var(--tink-text-muted) !important; } .dashboard-page .panel, .dashboard-page .setupPanel, .dashboard-page .connection-summary-card, .dashboard-page .discord-card, .dashboard-page .tool-panel, .dashboard-page .streamer-action-card, .trust-page .quick-start-card, .trust-page .connection-summary-card, .trust-page .pricing-plan-card, .trust-page .pricing-audience-card, .trust-page .pricing-compare-card, .trust-page .billing-card, .trust-page .support-card, .landing-page .feature-card { border: 1px solid var(--tink-border-quiet) !important; border-radius: var(--tink-radius-card) !important; background: linear-gradient(145deg, rgba(17, 25, 45, 0.82), rgba(7, 12, 24, 0.78)), var(--tink-surface) !important; box-shadow: var(--tink-shadow-level-1) !important; } .dashboard-page .panel:hover, .dashboard-page .connection-summary-card:hover, .dashboard-page .discord-card:hover, .dashboard-page .tool-panel:hover, .trust-page .quick-start-card:hover, .trust-page .pricing-plan-card:hover, .landing-page .feature-card:hover { border-color: rgba(34, 211, 238, 0.22) !important; box-shadow: var(--tink-shadow-level-2) !important; } .dashboard-page .panel-heading, .dashboard-page .panelHead, .trust-page .panel-heading, .trust-page .panelHead { border-bottom-color: rgba(148, 163, 184, 0.1) !important; } .dashboard-page .card-label, .dashboard-page .panel-kicker, .trust-page .card-label, .trust-page .panel-kicker { color: rgba(203, 213, 225, 0.78) !important; letter-spacing: 0.02em !important; } .dashboard-page .button-primary, .dashboard-page button.button-primary, .trust-page .button-primary, .trust-page button.button-primary, .landing-page .button-primary { border-color: rgba(255, 255, 255, 0.1) !important; background: linear-gradient(135deg, var(--tink-brand-pink), var(--tink-brand-cyan)) !important; color: rgb(6, 16, 29) !important; box-shadow: rgba(255, 47, 216, 0.18) 0px 14px 34px, rgba(34, 211, 238, 0.14) 0px 10px 28px !important; } .dashboard-page .button-primary:hover, .dashboard-page button.button-primary:hover, .trust-page .button-primary:hover, .trust-page button.button-primary:hover, .landing-page .button-primary:hover { transform: translateY(-1px); box-shadow: rgba(255, 47, 216, 0.24) 0px 18px 42px, rgba(34, 211, 238, 0.18) 0px 12px 32px !important; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .btn, .trust-page .button-secondary, .trust-page .ghost-button, .trust-page .btn, .landing-page .button-secondary, .landing-page .ghost-button { border-color: rgba(148, 163, 184, 0.16) !important; background: rgba(9, 14, 27, 0.74) !important; color: var(--tink-text-body) !important; box-shadow: none !important; } .dashboard-page .button-secondary:hover, .dashboard-page .ghost-button:hover, .dashboard-page .btn:hover, .trust-page .button-secondary:hover, .trust-page .ghost-button:hover, .trust-page .btn:hover, .landing-page .button-secondary:hover, .landing-page .ghost-button:hover { border-color: rgba(34, 211, 238, 0.28) !important; background: rgba(15, 24, 43, 0.86) !important; } .dashboard-page .status, .dashboard-page .status-pill, .dashboard-page .hero-identity-chip, .dashboard-page .live-ops-pill, .trust-page .status, .trust-page .status-pill { border-color: rgba(148, 163, 184, 0.15) !important; background: rgba(9, 14, 27, 0.72) !important; color: var(--tink-text-body) !important; box-shadow: none !important; } .dashboard-page .status.good, .dashboard-page .status.active, .dashboard-page .live-ops-pill.is-good, .dashboard-page .live-ops-pill.is-ready, .dashboard-page .live-ops-pill.is-live, .trust-page .status.good, .trust-page .status.active { border-color: rgba(85, 191, 167, 0.38) !important; background: var(--tink-status-green-bg) !important; color: rgb(186, 247, 230) !important; box-shadow: var(--tink-glow-status-soft) !important; } .dashboard-page .status.warn, .dashboard-page .live-ops-pill.is-warn, .trust-page .status.warn { border-color: rgba(217, 164, 65, 0.42) !important; background: var(--tink-status-amber-bg) !important; color: rgb(255, 228, 163) !important; } .dashboard-page .status.bad, .trust-page .status.bad { border-color: rgba(224, 113, 123, 0.4) !important; background: var(--tink-status-red-bg) !important; color: rgb(255, 196, 202) !important; } .dashboard-page .hero-utility-menu-panel { border-color: rgba(148, 163, 184, 0.12) !important; background: rgba(7, 11, 21, 0.62) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip.global-attention-banner, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip[data-notice-kind="connection"] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { border: 1px solid rgba(34, 211, 238, 0.14) !important; border-radius: 18px !important; background: linear-gradient(90deg, rgba(34, 211, 238, 0.067), rgba(139, 92, 246, 0.035), rgba(255, 47, 216, 0.035)), rgba(7, 12, 24, 0.72) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin-bottom: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details { border-color: rgba(148, 163, 184, 0.12) !important; background: rgba(7, 11, 21, 0.58) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { gap: clamp(16px, 1.8vw, 24px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { border-color: rgba(148, 163, 184, 0.11) !important; background: linear-gradient(rgba(10, 16, 30, 0.9), rgba(5, 8, 17, 0.94)), rgba(5, 8, 17, 0.9) !important; box-shadow: rgba(34, 211, 238, 0.024) 1px 0px 0px inset, rgba(0, 0, 0, 0.22) 0px 18px 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label { color: rgba(148, 163, 184, 0.62) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { border-color: rgba(148, 163, 184, 0.11) !important; background: rgba(7, 11, 21, 0.46) !important; color: rgba(226, 232, 240, 0.88) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link[aria-current="page"], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link[aria-current="page"] { border-color: rgba(255, 47, 216, 0.34) !important; background: linear-gradient(90deg, rgba(255, 47, 216, 0.15), rgba(34, 211, 238, 0.08)) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 47, 216, 0.78) 3px 0px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { border-color: rgba(148, 163, 184, 0.1) !important; border-radius: var(--tink-radius-shell) !important; background: radial-gradient(circle at 22% 0%, rgba(34, 211, 238, 0.08), transparent 34%), linear-gradient(155deg, rgba(12, 19, 36, 0.82), rgba(6, 10, 20, 0.78)) !important; box-shadow: var(--tink-shadow-level-1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-home .go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-card.go-live-panel { position: relative; overflow: hidden; border-color: rgba(255, 47, 216, 0.28) !important; background: radial-gradient(circle at 20% 10%, rgba(255, 47, 216, 0.2), transparent 32%), radial-gradient(circle at 82% 42%, rgba(34, 211, 238, 0.18), transparent 34%), linear-gradient(135deg, rgba(19, 23, 48, 0.95), rgba(7, 21, 36, 0.92)) !important; box-shadow: var(--tink-shadow-focus) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-action-card.go-live-panel::before { content: ""; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(circle, rgba(255, 47, 216, 0.16), transparent 48%); opacity: 0.65; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-setup-strip { border-color: rgba(34, 211, 238, 0.16) !important; background: rgba(7, 14, 27, 0.72) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .quick-actions-grid { gap: clamp(12px, 1.2vw, 18px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-grid .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #launchStatusCards .connection-summary-card { background: linear-gradient(150deg, rgba(12, 19, 35, 0.74), rgba(7, 11, 21, 0.7)), rgba(7, 11, 21, 0.74) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio.creator-workspace, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement.creator-workspace { background: radial-gradient(circle at 48% 8%, rgba(255, 47, 216, 0.11), transparent 30%), radial-gradient(circle at 80% 18%, rgba(139, 92, 246, 0.09), transparent 34%), linear-gradient(155deg, rgba(12, 17, 34, 0.88), rgba(6, 10, 20, 0.82)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms.creator-workspace, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays.creator-workspace { background: radial-gradient(circle at 34% 0%, rgba(34, 211, 238, 0.1), transparent 32%), linear-gradient(155deg, rgba(9, 18, 34, 0.88), rgba(6, 10, 20, 0.82)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-studio-preview-stage, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .engagement-preview-card { border-color: rgba(255, 47, 216, 0.28) !important; box-shadow: rgba(255, 47, 216, 0.12) 0px 18px 60px, rgba(34, 211, 238, 0.08) 0px 12px 44px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-picker .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-adapter-card { border-color: rgba(34, 211, 238, 0.14) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .danger-zone-panel { border-color: rgba(224, 113, 123, 0.22) !important; background: linear-gradient(145deg, rgba(58, 16, 28, 0.36), rgba(9, 12, 24, 0.8)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #chatPanel { border-color: rgba(34, 211, 238, 0.22) !important; background: radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.08), transparent 34%), linear-gradient(145deg, rgba(13, 22, 40, 0.86), rgba(7, 11, 21, 0.82)) !important; } .pricing-page .pricing-popular-badge, .pricing-page .status.active, .trust-page .beta-reminder strong { background: linear-gradient(135deg, rgba(255, 47, 216, 0.2), rgba(34, 211, 238, 0.14)) !important; border-color: rgba(255, 47, 216, 0.3) !important; } .trust-page input, .trust-page select, .trust-page textarea, .dashboard-page input, .dashboard-page select, .dashboard-page textarea { border-color: rgba(148, 163, 184, 0.16) !important; background: rgba(4, 8, 18, 0.78) !important; color: var(--tink-text-strong) !important; } .trust-page input:focus, .trust-page select:focus, .trust-page textarea:focus, .dashboard-page input:focus, .dashboard-page select:focus, .dashboard-page textarea:focus { border-color: rgba(34, 211, 238, 0.42) !important; box-shadow: rgba(34, 211, 238, 0.12) 0px 0px 0px 3px !important; } .dashboard-page [data-tink-logout] { border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(226, 232, 240, 0.1) !important; color: rgb(248, 251, 255) !important; font-weight: 900 !important; } .dashboard-page [data-tink-logout]:hover, .dashboard-page [data-tink-logout]:focus-visible { border-color: rgba(255, 47, 216, 0.34) !important; background: rgba(255, 47, 216, 0.12) !important; } @media (max-width: 1080px){.dashboard-page .hero.topbar, .trust-page .quick-start-hero { border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { gap: 14px !important; } } @media (prefers-reduced-motion: reduce){.dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .panel, .dashboard-page .connection-summary-card, .trust-page .quick-start-card, .trust-page .pricing-plan-card { transition: none !important; animation: auto ease 0s 1 normal none running none !important; } } :root { --tink-command-max: 1840px; --tink-command-gutter: clamp(18px, 2.6vw, 42px); --tink-command-sidebar: clamp(214px, 13vw, 250px); --tink-focus-surface: rgba(18, 32, 56, 0.9); --tink-support-surface: rgba(10, 17, 32, 0.7); } .dashboard-page .shell, .dashboard-page .app-shell { width: min(var(--tink-command-max), calc(100% - var(--tink-command-gutter))) !important; padding-top: 14px !important; } .trust-page .quick-start-shell, .pricing-shell, .landing-page .landing-shell { width: min(1440px, calc(100% - var(--tink-command-gutter))) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { width: 100% !important; margin-inline: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { flex-wrap: wrap; align-items: center; display: flex !important; gap: 10px !important; padding: 10px 12px !important; margin: 10px 0px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status { margin-left: auto; opacity: 0.82; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status summary { min-height: 28px; padding: 5px 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin: 0px 0px 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details:not([open]) { opacity: 0.72; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { align-items: start; width: 100%; display: grid !important; grid-template-columns: var(--tink-command-sidebar) minmax(0, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-content { min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { padding: clamp(18px, 1.5vw, 26px) !important; border-color: rgba(34, 211, 238, 0.13) !important; background: radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.11), transparent 28%), radial-gradient(circle at 82% 2%, rgba(255, 47, 216, 0.08), transparent 30%), linear-gradient(150deg, rgba(12, 21, 39, 0.88), rgba(6, 11, 22, 0.84)) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 68px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { margin-bottom: clamp(16px, 1.5vw, 24px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2 { font-size: clamp(1.55rem, 2.25vw, 2.15rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { gap: clamp(14px, 1.25vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { grid-auto-flow: dense; align-items: stretch; grid-template-columns: minmax(360px, 1.25fr) minmax(340px, 0.95fr) minmax(280px, 0.72fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { order: 1; min-height: 300px; align-content: center; grid-column: 1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { order: 2; min-height: 300px; grid-column: 2 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard { order: 3; min-height: 300px; grid-column: 3 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { order: 4; grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { order: 5; grid-column: span 5 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { order: 6; grid-column: span 7 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-overlay-preview-card { display: grid; grid-template-rows: auto minmax(0px, 1fr); gap: 16px; overflow: hidden; border-color: rgba(255, 47, 216, 0.24) !important; background: radial-gradient(circle at 50% 20%, rgba(255, 47, 216, 0.18), transparent 36%), radial-gradient(circle at 20% 80%, rgba(34, 211, 238, 0.15), transparent 38%), linear-gradient(145deg, rgba(13, 21, 42, 0.94), rgba(9, 11, 29, 0.88)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy { display: grid; gap: 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy h3 { margin: 0px; color: var(--tink-text-strong); font-size: clamp(1.15rem, 1.5vw, 1.45rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage { position: relative; display: grid; place-items: center; min-height: 190px; border: 1px solid rgba(255, 47, 216, 0.22); border-radius: 18px; background: radial-gradient(circle at 50% 45%, rgba(255, 47, 216, 0.2), transparent 36%), radial-gradient(circle at 16% 70%, rgba(34, 211, 238, 0.16), transparent 34%), linear-gradient(135deg, rgba(6, 14, 29, 0.92), rgba(27, 9, 39, 0.8)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage::before { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(34, 211, 238, 0.16); border-radius: 999px; opacity: 0.42; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; width: min(310px, 88%); padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(5, 7, 18, 0.88); box-shadow: rgba(0, 0, 0, 0.38) 0px 18px 48px, rgba(255, 47, 216, 0.18) 0px 0px 34px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-orb { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 11px; background: linear-gradient(135deg, var(--tink-brand-pink), var(--tink-brand-cyan)); box-shadow: rgba(255, 47, 216, 0.28) 0px 0px 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert strong, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert small { display: block; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert small { color: var(--tink-text-muted); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-actions-card { display: grid; align-content: start; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-grid { display: grid; gap: 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-grid > * { justify-content: flex-start; min-height: 46px; padding-inline: 16px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertControlsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement #engagementStudioPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays #overlaySetupPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms #advancedSetupPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands #chatCommandsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #goLiveChecklistPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #streamHealthPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .discord-community-settings-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review { position: relative; border-color: rgba(34, 211, 238, 0.22) !important; background: radial-gradient(circle at 24% 0%, rgba(34, 211, 238, 0.09), transparent 32%), linear-gradient(145deg, var(--tink-focus-surface), rgba(7, 12, 24, 0.86)) !important; box-shadow: var(--tink-shadow-focus) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .overlay-link-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feed-item, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewList > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feed > * { background: var(--tink-support-surface) !important; border-color: rgba(148, 163, 184, 0.11) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { min-height: 42px; border-radius: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link[aria-current="page"], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link[aria-current="page"] { box-shadow: inset 4px 0 0 var(--tink-brand-pink), 0 0 28px rgba(255, 47, 216, 0.12) !important; } .trust-page .quick-start-card, .trust-page .pricing-plan-card, .trust-page .billing-card, .trust-page .support-card { padding: clamp(18px, 2vw, 28px) !important; } @media (max-width: 1440px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: span 1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-column: 1 / -1 !important; } } @media (max-width: 1080px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { grid-template-columns: 1fr !important; } } :root { --tink-command-max: 1960px; --tink-command-gutter: clamp(12px, 1.45vw, 28px); --tink-command-sidebar: clamp(224px, 12vw, 252px); --tink-home-panel: rgba(16, 27, 46, 0.9); --tink-home-panel-bright: rgba(22, 39, 64, 0.94); --tink-home-border: rgba(148, 163, 184, 0.18); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] { background: radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.12), transparent 30%), radial-gradient(circle at 88% 12%, rgba(255, 47, 216, 0.09), transparent 32%), linear-gradient(rgb(17, 24, 39) 0%, rgb(11, 17, 32) 52%, rgb(9, 13, 24) 100%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { min-height: auto !important; padding: 14px 18px !important; border-radius: 20px !important; background: rgba(15, 23, 42, 0.78) !important; border-color: rgba(148, 163, 184, 0.16) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 18px 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { grid-template-columns: repeat(5, minmax(0px, 1fr)); display: grid !important; gap: 8px !important; padding: 10px !important; border-radius: 18px !important; background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 16px 38px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill { justify-content: center; min-height: 34px; font-size: 0.78rem; letter-spacing: 0.04em; border-radius: 12px !important; background: rgba(30, 41, 59, 0.72) !important; border-color: rgba(148, 163, 184, 0.16) !important; color: rgb(248, 251, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-live, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.good { background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(34, 211, 238, 0.14)) !important; border-color: rgba(45, 212, 191, 0.3) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-system-status { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin: 0px 0px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details { border-radius: 16px !important; background: rgba(15, 23, 42, 0.48) !important; border-color: rgba(148, 163, 184, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details summary { padding: 10px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { gap: clamp(14px, 1.2vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav { position: sticky; top: 14px; border-radius: 22px !important; padding: 12px !important; background: linear-gradient(rgba(18, 27, 45, 0.88), rgba(9, 14, 25, 0.82)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 52px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand { margin-bottom: 10px; padding: 8px 8px 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.12); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { min-height: 38px !important; padding: 8px 10px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; color: rgba(226, 232, 240, 0.74) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:focus-visible { color: rgb(248, 251, 255) !important; background: rgba(30, 41, 59, 0.58) !important; border-color: rgba(148, 163, 184, 0.14) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link[aria-current="page"] { color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.2), rgba(34, 211, 238, 0.12)) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: inset 3px 0 0 var(--tink-brand-cyan), 0 14px 30px rgba(34, 211, 238, 0.08) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label { margin: 14px 8px 5px !important; color: rgba(148, 163, 184, 0.76) !important; letter-spacing: 0.14em !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { padding: clamp(16px, 1.25vw, 24px) !important; border-radius: 24px !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.1), transparent 26%), linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(11, 18, 32, 0.84)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading { margin-bottom: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { align-items: stretch; grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; gap: clamp(14px, 1vw, 18px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card { border-radius: 18px !important; border-color: var(--tink-home-border) !important; background: linear-gradient(145deg, var(--tink-home-panel-bright), var(--tink-home-panel)) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 18px 44px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { order: 1; min-height: 330px; align-content: center; grid-column: span 4 !important; padding: clamp(22px, 2vw, 32px) !important; background: radial-gradient(circle at 18% 8%, rgba(34, 211, 238, 0.18), transparent 34%), linear-gradient(145deg, rgba(23, 45, 72, 0.96), rgba(13, 24, 43, 0.92)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2 { font-size: clamp(1.75rem, 2.25vw, 2.6rem); line-height: 1.02; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { order: 2; min-height: 330px; grid-column: span 5 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard { order: 3; min-height: 330px; grid-column: span 3 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel { order: 4; min-height: 330px; grid-column: span 4 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel { order: 5; min-height: 330px; grid-column: span 4 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { order: 6; min-height: 330px; grid-column: span 4 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { order: 7; grid-column: span 12 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-overlay-preview-card { background: radial-gradient(circle at 55% 26%, rgba(255, 47, 216, 0.18), transparent 36%), radial-gradient(circle at 18% 82%, rgba(34, 211, 238, 0.14), transparent 34%), linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(21, 28, 52, 0.9)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage { min-height: 220px; align-content: center; overflow: hidden; border-radius: 18px; background: linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px) 0% 0% / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px) 0% 0% / 28px 28px, radial-gradient(circle at 50% 42%, rgba(255, 47, 216, 0.18), transparent 38%) 0% 0% / auto, linear-gradient(135deg, rgba(10, 22, 40, 0.96), rgba(27, 16, 45, 0.86)) 0% 0% / auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-frame-top { position: absolute; top: 12px; left: 14px; display: flex; gap: 5px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-frame-top span { width: 8px; height: 8px; border-radius: 999px; background: rgba(226, 232, 240, 0.34); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert { width: min(380px, 90%); padding: 16px 18px; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(12px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-grid { gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-frame { gap: clamp(18px, 2vw, 26px) !important; width: min(720px, 100% - 34px) !important; padding: clamp(20px, 2vw, 28px) !important; border-radius: 24px !important; border-color: color-mix(in srgb, var(--preview-secondary) 30%, rgba(255, 255, 255, 0.16)) !important; background: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--preview-primary) 18%, transparent), transparent 36%), linear-gradient(135deg, rgba(8, 10, 20, 0.9), rgba(13, 18, 34, 0.82)) !important; box-shadow: 0 28px 78px rgba(0, 0, 0, 0.48), 0 0 44px color-mix(in srgb, var(--preview-primary) 20%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: clamp(150px, 17vw, 230px); min-height: clamp(128px, 14vw, 190px); border-radius: 22px; border: 1px solid color-mix(in srgb, var(--preview-secondary) 26%, rgba(255, 255, 255, 0.12)); background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--preview-primary) 18%, transparent), transparent 58%), rgba(3, 7, 18, 0.52); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34), 0 0 32px color-mix(in srgb, var(--preview-secondary) 14%, transparent); overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-pack-art { display: block; width: 100%; max-height: 210px; padding: 10px; object-fit: contain; object-position: center center; filter: drop-shadow(rgba(0, 0, 0, 0.42) 0px 16px 26px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack .preview-asset { position: absolute; right: 12px; bottom: 12px; width: 54px; height: 54px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.16); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-copy { display: grid; gap: 6px; min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-kicker { margin: 0px; letter-spacing: 0.09em; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-frame strong { line-height: 1.04; font-size: clamp(1.35rem, 2.25vw, 2.4rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-frame span { max-width: 42ch; line-height: 1.45; color: rgba(226, 232, 240, 0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="standard"] .preview-alert-frame, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="tall"] .preview-alert-frame, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="fullscreen"] .preview-alert-frame { flex-direction: column !important; text-align: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="wide"] .preview-alert-frame { flex-direction: row !important; text-align: left !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="compact"] .preview-visual-stack { width: 108px; min-height: 86px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="compact"] .preview-pack-art { max-height: 96px; padding: 6px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-alert-layout="compact"] .preview-visual-stack .preview-asset { width: 34px; height: 34px; right: 7px; bottom: 7px; border-radius: 11px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #selectedAlertPackCard { border-color: rgba(255, 47, 216, 0.26) !important; box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 0px inset, rgba(34, 211, 238, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.22) 0px 22px 48px, rgba(255, 47, 216, 0.08) 0px 0px 34px !important; } .selected-preset-preview img, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-selected-pack-preview { width: 100%; max-height: 520px; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; border-radius: 18px !important; background: radial-gradient(circle, rgba(255, 47, 216, 0.12), transparent 56%), rgba(3, 7, 18, 0.58) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .selected-preset-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-hero { height: auto !important; min-height: 320px !important; max-height: none !important; overflow: visible !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .selected-preset-preview > img, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackPreview { display: block !important; width: 100% !important; height: auto !important; max-height: 520px !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-pack-thumb { max-height: 150px; padding: 8px; aspect-ratio: 4 / 3 !important; object-fit: contain !important; object-position: center center !important; border-radius: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .alert-pack-recommendation img { padding: 5px; object-fit: contain !important; object-position: center top !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action { grid-template-columns: 38px minmax(0px, 1fr); align-items: center; gap: 10px; text-align: left; white-space: normal; display: grid !important; min-height: 58px !important; padding: 10px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.05em; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action strong { min-width: 0px; overflow-wrap: anywhere; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { display: none !important; } @media (max-width: 1500px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard { grid-column: span 4 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: span 6 !important; } } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: 1 / -1 !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] main.shell { width: min(100%, 1920px) !important; max-width: none !important; padding: clamp(10px, 1vw, 18px) clamp(12px, 1.2vw, 22px) 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { display: grid !important; grid-template-columns: minmax(0px, 1fr) auto !important; align-items: center !important; gap: 14px !important; min-height: 96px !important; margin-bottom: 10px !important; padding: 12px 14px !important; border-radius: 18px !important; background: linear-gradient(90deg, rgba(8, 13, 28, 0.9), rgba(13, 23, 41, 0.72)), rgba(8, 13, 28, 0.86) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-main, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-copy, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .heroIdentity { min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1 { font-size: clamp(1.55rem, 2vw, 2.25rem) !important; line-height: 1.02 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar p { max-width: 72ch; margin-top: 4px !important; font-size: 0.84rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .heroLogo, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-logo, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .brand-mark { width: 58px !important; height: 58px !important; border-radius: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .heroActions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-actions { max-width: 540px; justify-content: flex-end !important; gap: 7px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .ghost-button { min-height: 34px !important; padding: 7px 11px !important; border-radius: 11px !important; font-size: 0.78rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { margin: 0px 0px 12px !important; padding: 8px !important; gap: 8px !important; border-radius: 16px !important; background: linear-gradient(90deg, rgba(7, 17, 32, 0.9), rgba(11, 23, 43, 0.82)), rgba(8, 13, 28, 0.86) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill { position: relative; justify-content: flex-start !important; min-height: 44px !important; padding: 8px 12px 8px 40px !important; border-radius: 14px !important; text-transform: none !important; letter-spacing: 0px !important; font-size: 0.86rem !important; background: rgba(15, 23, 42, 0.72) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill::before { content: ""; position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; border-radius: 999px; transform: translateY(-50%); background: radial-gradient(circle, rgba(255, 255, 255, 0.88) 0px, rgba(255, 255, 255, 0.88) 2px, transparent 3px), linear-gradient(135deg, rgba(45, 212, 191, 0.95), rgba(34, 197, 94, 0.76)); box-shadow: rgba(45, 212, 191, 0.24) 0px 0px 18px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: clamp(210px, 12vw, 238px) minmax(0px, 1fr) !important; gap: 14px !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav { scrollbar-width: thin; max-height: calc(-28px + 100vh) !important; overflow-y: auto !important; border-radius: 18px !important; padding: 10px !important; background: linear-gradient(rgba(7, 13, 27, 0.94), rgba(5, 9, 18, 0.9)) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link { min-height: 36px !important; padding: 7px 10px !important; border-radius: 11px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content { min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { padding: clamp(14px, 1.05vw, 20px) !important; border-radius: 22px !important; background: radial-gradient(circle at 16% 0%, rgba(139, 92, 246, 0.1), transparent 28%), linear-gradient(145deg, rgba(10, 17, 31, 0.92), rgba(8, 13, 25, 0.86)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading { margin-bottom: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-heading { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; gap: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { grid-column: span 4 !important; min-height: 286px !important; padding: 22px !important; border-radius: 22px !important; background: radial-gradient(circle at 88% 20%, rgba(255, 47, 216, 0.18), transparent 34%), radial-gradient(circle at 16% 14%, rgba(34, 211, 238, 0.18), transparent 34%), linear-gradient(145deg, rgba(16, 37, 63, 0.94), rgba(10, 18, 34, 0.92)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2 { max-width: 11ch; font-size: clamp(2rem, 3vw, 3.4rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2::after { content: "."; color: var(--tink-brand-pink); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy .muted { max-width: 44ch; font-size: 0.98rem; line-height: 1.55; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons { margin-top: 22px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { grid-column: span 5 !important; min-height: 286px !important; padding: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard { grid-column: span 3 !important; min-height: 286px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-overlay-preview-card { display: grid; grid-template-rows: auto minmax(0px, 1fr); gap: 10px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy h3 { margin: 0px; font-size: 1rem; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy .muted { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage { border: 1px solid rgba(255, 47, 216, 0.24); box-shadow: rgba(139, 92, 246, 0.12) 0px 0px 60px inset, rgba(0, 0, 0, 0.2) 0px 20px 50px; min-height: 218px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert { width: min(460px, 82%); min-height: 92px; justify-content: center; box-shadow: rgba(255, 47, 216, 0.22) 0px 0px 46px, rgba(0, 0, 0, 0.42) 0px 22px 54px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert strong { font-size: clamp(1.2rem, 1.7vw, 1.9rem); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: span 4 !important; min-height: 292px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .panel-scroll-body { max-height: 220px; overflow: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .connection-summary-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .connection-summary-card { min-height: 136px !important; } @media (max-width: 1500px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { grid-column: span 6 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: span 4 !important; } } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: 1 / -1 !important; } } :root { --tink-global-shell-max: 1920px; --tink-global-gutter: clamp(12px, 1.4vw, 24px); --tink-global-panel: rgba(10, 18, 34, 0.82); --tink-global-panel-soft: rgba(12, 23, 42, 0.72); --tink-global-panel-bright: rgba(17, 34, 60, 0.76); --tink-global-border: rgba(129, 168, 255, 0.14); --tink-global-border-active: rgba(34, 211, 238, 0.34); --tink-global-shadow: 0 22px 60px rgba(0, 0, 0, 0.26); --tink-global-focus-glow: 0 24px 70px rgba(139, 92, 246, 0.18), 0 0 48px rgba(34, 211, 238, 0.08); } body.dashboard-page, body.trust-page, body.landing-page { background: radial-gradient(circle at 10% 8%, rgba(34, 211, 238, 0.11), transparent 28%), radial-gradient(circle at 88% 0%, rgba(255, 47, 216, 0.11), transparent 30%), linear-gradient(135deg, rgb(5, 9, 22) 0%, rgb(7, 17, 31) 44%, rgb(6, 8, 22) 100%) !important; } .dashboard-page main.shell, .dashboard-page .shell.wrap, .trust-page .quick-start-shell, .pricing-page .pricing-shell, .landing-shell { width: min(100%, var(--tink-global-shell-max)) !important; max-width: none !important; } .dashboard-page main.shell, .dashboard-page .shell.wrap { padding-inline: var(--tink-global-gutter) !important; } .trust-page .quick-start-shell, .pricing-page .pricing-shell { padding-inline: var(--tink-global-gutter) !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .trust-page .quick-start-hero, .pricing-page .quick-start-hero, .landing-hero { border-color: var(--tink-global-border) !important; background: linear-gradient(90deg, rgba(7, 12, 26, 0.9), rgba(11, 25, 45, 0.72)), rgba(8, 13, 28, 0.82) !important; box-shadow: var(--tink-global-shadow) !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: 88px !important; padding: clamp(10px, 1vw, 16px) clamp(12px, 1.2vw, 20px) !important; border-radius: 20px !important; } .trust-page .quick-start-hero, .pricing-page .quick-start-hero { min-height: auto !important; padding: clamp(28px, 3vw, 46px) !important; border-radius: 24px !important; } .dashboard-page .panel, .dashboard-page .card, .dashboard-page .metric, .dashboard-page .summaryCard, .dashboard-page .setupPanel, .dashboard-page .section-command-card, .dashboard-page .connection-summary-card, .dashboard-page .streamer-action-card, .dashboard-page .overlay-link-card, .dashboard-page .platform-card, .dashboard-page .command-center-card, .trust-page .quick-start-card, .trust-page .connection-summary-card, .pricing-page .pricing-plan-card, .pricing-page .alert-pack-showcase-panel, .pricing-page .pricing-audience-card, .pricing-page .pricing-compare-card, .landing-workspace-card, .landing-purpose-card, .landing-alert-card, .landing-dashboard-preview, .alert-pack-showcase-panel { border-color: var(--tink-global-border) !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.055), transparent 34%), linear-gradient(145deg, var(--tink-global-panel-soft), rgba(7, 12, 26, 0.78)) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 44px !important; } .dashboard-page .panel:hover, .dashboard-page .connection-summary-card:hover, .dashboard-page .streamer-action-card:hover, .dashboard-page .overlay-link-card:hover, .trust-page .connection-summary-card:hover, .pricing-page .pricing-plan-card:hover, .landing-workspace-card:hover { border-color: rgba(34, 211, 238, 0.24) !important; box-shadow: rgba(0, 0, 0, 0.25) 0px 22px 58px, rgba(34, 211, 238, 0.055) 0px 0px 26px !important; } .dashboard-page .button-primary, .dashboard-page .primary-action, .trust-page .button-primary, .pricing-page .button-primary, .landing-page .button-primary { box-shadow: rgba(255, 47, 216, 0.2) 0px 14px 34px, rgba(34, 211, 238, 0.1) 0px 0px 24px !important; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .trust-page .button-secondary, .trust-page .ghost-button, .pricing-page .button-secondary, .pricing-page .ghost-button, .landing-page .button-secondary, .landing-page .ghost-button { border-color: rgba(129, 168, 255, 0.18) !important; background: rgba(8, 13, 28, 0.72) !important; box-shadow: none !important; } .dashboard-page .status-pill, .dashboard-page .pill, .dashboard-page .badge, .dashboard-page .live-indicator, .trust-page .status-pill, .pricing-page .pricing-popular-badge { border-color: rgba(129, 168, 255, 0.18) !important; box-shadow: none !important; } .dashboard-page .status-pill.ok, .dashboard-page .badge.connected, .dashboard-page .pill.connected, .dashboard-page .live-ops-pill, .dashboard-page .live-indicator { border-color: rgba(85, 191, 167, 0.34) !important; color: rgb(201, 255, 242) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { gap: clamp(14px, 1.2vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { border-color: rgba(129, 168, 255, 0.12) !important; background: linear-gradient(rgba(6, 12, 25, 0.94), rgba(4, 8, 17, 0.92)) !important; box-shadow: rgba(0, 0, 0, 0.18) 18px 0px 48px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { border-color: transparent !important; background: transparent !important; color: rgba(238, 246, 255, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link:hover { border-color: rgba(129, 168, 255, 0.16) !important; background: rgba(129, 168, 255, 0.06) !important; color: rgb(247, 251, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active { border-color: rgba(255, 47, 216, 0.36) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.18), rgba(34, 211, 238, 0.1)) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 47, 216, 0.78) 3px 0px 0px inset, rgba(255, 47, 216, 0.1) 0px 10px 24px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-group-label, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-group-label { color: rgba(184, 197, 220, 0.58) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid { display: grid !important; grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; gap: clamp(14px, 1.1vw, 20px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .section-command-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .overlay-link-card { grid-column: span 6; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid > * { grid-column: 1 / -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .creator-workspace-grid > * { min-height: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .selected-platform-panel { max-width: min(100%, 980px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { padding-bottom: 10px !important; border-bottom: 1px solid rgba(129, 168, 255, 0.1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement #engagementStudioPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays #overlaySetupPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands #chatCommandsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings #streamInfoPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #setupDoctorPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .diagnostic-only { border-color: rgba(34, 211, 238, 0.22) !important; background: radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.075), transparent 28%), linear-gradient(145deg, rgba(13, 25, 45, 0.88), rgba(8, 13, 26, 0.82)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .shell.wrap { width: min(100%, var(--tink-global-shell-max)) !important; padding: var(--tink-global-gutter) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: clamp(210px, 12vw, 238px) minmax(0px, 1fr) !important; width: 100% !important; max-width: none !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { display: grid !important; grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; gap: 10px !important; margin-block: 10px 14px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .moderation-command-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review { border-color: rgba(34, 211, 238, 0.26) !important; box-shadow: var(--tink-global-focus-glow) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { gap: clamp(14px, 1.15vw, 20px) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { border-radius: 22px !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.08), transparent 28%), linear-gradient(145deg, rgba(9, 16, 31, 0.9), rgba(6, 10, 21, 0.86)) !important; } body.dashboard-page:not([data-product-page]) main.shell { min-height: 100vh; display: grid; place-items: center; } body.dashboard-page:not([data-product-page]) main.shell > .panel { width: min(860px, -32px + 100vw) !important; max-width: 860px !important; margin: 0px !important; padding: clamp(26px, 4vw, 54px) !important; border-radius: 26px !important; box-shadow: var(--tink-global-focus-glow) !important; } .trust-page .quick-start-card, .pricing-page .pricing-plan-grid, .pricing-page .pricing-audience-card, .pricing-page .pricing-compare-card, .beta-page .beta-request-card, .support-page .quick-start-card, .landing-section, .alert-pack-showcase { margin-top: clamp(18px, 2vw, 30px) !important; } .trust-page .connection-summary-grid, .beta-page .beta-steps-row, .pricing-page .pricing-next-grid, .pricing-page .pricing-highlight-grid, .pricing-page .pricing-explain-grid, .landing-workspace-grid { gap: clamp(14px, 1.2vw, 20px) !important; } .beta-page .beta-request-card, .support-page .quick-start-card, .billing-page .quick-start-card, .account-page .quick-start-card { border-color: rgba(34, 211, 238, 0.18) !important; } @media (max-width: 1320px){.pricing-page .pricing-plan-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .section-command-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace:not(#workspaceHome) .creator-workspace-grid > .overlay-link-card { grid-column: 1 / -1; } } @media (max-width: 860px){.dashboard-page main.shell, .dashboard-page .shell.wrap, .trust-page .quick-start-shell, .pricing-page .pricing-shell, .landing-shell { padding-inline: 12px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: 1fr !important; } .pricing-page .pricing-plan-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: 1fr !important; } } :root { --tink-workspace-sidebar: clamp(218px, 12vw, 252px); --tink-workspace-gap: clamp(16px, 1.35vw, 26px); --tink-workspace-pad: clamp(18px, 1.45vw, 30px); --tink-workspace-min: calc(100vh - 190px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] { min-height: 100vh; overflow-x: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] main.shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .shell.wrap { min-height: 100vh; flex-direction: column; display: flex !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-strip, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { flex: 0 0 auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { flex: 1 1 auto; min-height: 0px; display: grid !important; grid-template-columns: var(--tink-workspace-sidebar) minmax(0, 1fr) !important; gap: var(--tink-workspace-gap) !important; align-items: stretch !important; width: 100% !important; max-width: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-content, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-content { min-width: 0px; min-height: var(--tink-workspace-min); display: grid; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace[hidden], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace[hidden] { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace.active { display: grid !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { align-content: start; width: 100% !important; min-height: var(--tink-workspace-min) !important; padding: var(--tink-workspace-pad) !important; overflow: visible !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { align-self: start; scrollbar-width: thin; position: sticky !important; top: 12px !important; max-height: calc(-24px + 100vh) !important; overflow-y: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { display: flex !important; align-items: end !important; justify-content: space-between !important; gap: 16px !important; margin-bottom: clamp(16px, 1.35vw, 24px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-heading { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; clip-path: none !important; padding-bottom: 0px !important; border-bottom: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2 { font-size: clamp(1.45rem, 1.75vw, 2.05rem) !important; line-height: 1.05 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { grid-auto-flow: dense; width: 100% !important; max-width: none !important; display: grid !important; grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; align-items: start !important; justify-content: stretch !important; gap: var(--tink-workspace-gap) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > * { min-width: 0px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .section-command-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .streamer-action-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .overlay-link-card { grid-column: span 6; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .creator-workspace-grid { grid-template-columns: minmax(0px, 1.45fr) minmax(360px, 0.72fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .creator-workspace-grid > * { grid-column: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-preview-hero, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel { min-height: clamp(360px, 46vh, 620px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview { overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement .creator-workspace-grid { grid-template-columns: minmax(0px, 1.25fr) minmax(340px, 0.75fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement #engagementStudioPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .creator-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceOverlays .overlay-link-card { min-height: 168px; grid-column: span 6 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker { grid-column: span 5 !important; max-width: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .selected-platform-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-detail-panel { grid-column: span 7 !important; max-width: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .danger-zone, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .diagnostic-only, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms details { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .creator-workspace-grid { grid-template-columns: minmax(0px, 1.25fr) minmax(360px, 0.75fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel { grid-column: 1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #bossPanel { grid-column: 2 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid > * { grid-column: span 6 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings #streamInfoPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands #chatCommandsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting #setupDoctorPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .diagnostic-only:first-child { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > .panel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > .section-command-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > .mod-v2-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > .mod-v2-metrics { grid-column: 1 / -1; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-workspace-grid { grid-template-columns: minmax(0px, 1.2fr) minmax(340px, 0.8fr) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-review-command-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-v2-metrics { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(0px, 1.2fr) minmax(360px, 0.8fr) !important; gap: var(--tink-workspace-gap) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceChat .mod-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAnnouncements .mod-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .mod-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceSettings .mod-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAdvanced .mod-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceChat .mod-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAnnouncements .mod-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .mod-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceSettings .mod-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAdvanced .mod-workspace-grid > * { grid-column: span 6 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceChat #chatPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAnnouncements #discordComposerPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceSettings #automodSettingsPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel-scroll-body, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel-scroll-body { max-height: clamp(260px, 48vh, 620px); } body.dashboard-page:not([data-product-page]) main.shell { width: min(100%, var(--tink-global-shell-max)) !important; padding: var(--tink-workspace-pad) !important; } body.dashboard-page:not([data-product-page]) main.shell > .panel { display: grid; gap: 14px; min-height: min(520px, -72px + 100vh); align-content: center; } @media (max-width: 1280px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .selected-platform-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-detail-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #bossPanel { grid-column: 1 / -1 !important; } } @media (max-width: 900px){:root { --tink-workspace-min: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { position: relative !important; top: auto !important; max-height: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > *, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceCommands .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid > * { grid-column: 1 / -1 !important; } } :root { --tink-cyber-bg: #050914; --tink-cyber-bg-2: #081224; --tink-cyber-surface: rgba(8, 18, 35, 0.78); --tink-cyber-surface-2: rgba(11, 24, 46, 0.72); --tink-cyber-surface-3: rgba(15, 31, 58, 0.62); --tink-cyber-line: rgba(121, 154, 255, 0.16); --tink-cyber-line-strong: rgba(34, 211, 238, 0.36); --tink-cyber-pink: #ff2fd8; --tink-cyber-cyan: #22d3ee; --tink-cyber-purple: #8b5cf6; --tink-cyber-green: #37d99b; --tink-cyber-amber: #e0b857; --tink-cyber-red: #ef6f8a; --tink-cyber-text: #f6f8ff; --tink-cyber-muted: #9fb1ce; --tink-cyber-radius: 18px; --tink-cyber-radius-lg: 24px; --tink-cyber-shadow: 0 24px 70px rgba(0, 0, 0, 0.38); --tink-cyber-glow: 0 0 34px rgba(255, 47, 216, 0.14), 0 0 42px rgba(34, 211, 238, 0.08); } body.dashboard-page, body.trust-page, body.landing-page { color: var(--tink-cyber-text) !important; background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.18), transparent 30%), radial-gradient(circle at 84% 10%, rgba(34, 211, 238, 0.12), transparent 26%), linear-gradient(135deg, var(--tink-cyber-bg) 0%, #07101f 48%, #050712 100%) !important; } body.dashboard-page::before, body.trust-page::before, body.landing-page::before { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0% 0% / 46px 46px, linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px); mask-image: linear-gradient(rgba(0, 0, 0, 0.7), transparent 72%); } .dashboard-page main.shell, .dashboard-page .shell.wrap, .trust-page .quick-start-shell, .pricing-page .pricing-shell, .landing-shell { width: min(100%, 1920px) !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .trust-page .quick-start-hero, .pricing-page .quick-start-hero, .landing-nav, .landing-hero { backdrop-filter: blur(18px) saturate(135%); border: 1px solid rgba(34, 211, 238, 0.18) !important; background: linear-gradient(90deg, rgba(10, 16, 34, 0.92), rgba(16, 31, 57, 0.74)), rgba(8, 18, 35, 0.76) !important; box-shadow: var(--tink-cyber-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: 78px !important; padding: 12px 16px !important; border-radius: var(--tink-cyber-radius-lg) !important; } .dashboard-page .hero.topbar h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar h1, .trust-page .quick-start-hero h1, .pricing-page .quick-start-hero h1, .landing-hero h1 { text-shadow: rgba(34, 211, 238, 0.08) 0px 0px 24px; color: var(--tink-cyber-text) !important; } .dashboard-page .hero-copy, .dashboard-page .muted, .trust-page .hero-copy, .trust-page .muted, .pricing-page .hero-copy, .pricing-page .muted, .landing-page .muted { color: var(--tink-cyber-muted) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-strip, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { backdrop-filter: blur(14px); border: 1px solid rgba(34, 211, 238, 0.14) !important; background: linear-gradient(90deg, rgba(9, 23, 45, 0.84), rgba(12, 20, 42, 0.74)) !important; box-shadow: rgba(255, 255, 255, 0.043) 0px 1px 0px inset, rgba(0, 0, 0, 0.22) 0px 16px 38px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill, .dashboard-page .status.good, .dashboard-page .status.active, .dashboard-page .status.status-good, .dashboard-page .badge.connected, .dashboard-page .pill.connected { border-color: rgba(55, 217, 155, 0.38) !important; color: rgb(214, 255, 240) !important; background: rgba(55, 217, 155, 0.1) !important; box-shadow: rgba(55, 217, 155, 0.08) 0px 0px 18px !important; } .dashboard-page .status.warn, .dashboard-page .pill.warn, .dashboard-page .badge.warn { border-color: rgba(224, 184, 87, 0.42) !important; color: rgb(255, 237, 189) !important; background: rgba(224, 184, 87, 0.1) !important; box-shadow: none !important; } .dashboard-page .status.bad, .dashboard-page .pill.bad, .dashboard-page .badge.bad { border-color: rgba(239, 111, 138, 0.42) !important; color: rgb(255, 214, 223) !important; background: rgba(239, 111, 138, 0.1) !important; box-shadow: none !important; } .dashboard-page .panel, .dashboard-page .card, .dashboard-page .metric, .dashboard-page .summaryCard, .dashboard-page .setupPanel, .dashboard-page .section-command-card, .dashboard-page .streamer-action-card, .dashboard-page .connection-summary-card, .dashboard-page .overlay-link-card, .dashboard-page .platform-card, .trust-page .quick-start-card, .trust-page .connection-summary-card, .pricing-page .pricing-plan-card, .pricing-page .alert-pack-showcase-panel, .landing-workspace-card, .landing-purpose-card, .landing-alert-card, .landing-dashboard-preview, .alert-pack-showcase-panel { backdrop-filter: blur(12px); border-color: var(--tink-cyber-line) !important; border-radius: var(--tink-cyber-radius) !important; background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.08), transparent 34%), linear-gradient(145deg, var(--tink-cyber-surface), rgba(6, 13, 27, 0.74)) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 48px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page .panel:hover, .dashboard-page .section-command-card:hover, .dashboard-page .streamer-action-card:hover, .dashboard-page .connection-summary-card:hover, .dashboard-page .overlay-link-card:hover, .pricing-page .pricing-plan-card:hover, .landing-workspace-card:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.28) !important; box-shadow: rgba(0, 0, 0, 0.32) 0px 24px 64px, rgba(34, 211, 238, 0.06) 0px 0px 34px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { backdrop-filter: blur(18px) saturate(140%); border-color: rgba(139, 92, 246, 0.18) !important; background: linear-gradient(rgba(8, 15, 30, 0.96), rgba(4, 8, 18, 0.94)) !important; box-shadow: rgba(0, 0, 0, 0.28) 20px 0px 58px, rgba(34, 211, 238, 0.08) -1px 0px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { transition: transform 160ms, border-color 160ms, background 160ms, color 160ms; min-height: 40px !important; border-radius: 13px !important; color: rgba(234, 241, 255, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link:hover { transform: translateX(2px); color: rgb(255, 255, 255) !important; background: rgba(139, 92, 246, 0.11) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link[aria-current="page"], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link[aria-current="page"] { border-color: rgba(255, 47, 216, 0.54) !important; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.28), rgba(139, 92, 246, 0.2) 52%, rgba(34, 211, 238, 0.12)) !important; box-shadow: inset 4px 0 0 var(--tink-cyber-pink), 0 0 34px rgba(255, 47, 216, 0.16) !important; } .dashboard-page .button-primary, .dashboard-page .primary-action, .trust-page .button-primary, .pricing-page .button-primary, .landing-page .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .streamer-primary-action { border-color: rgba(255, 47, 216, 0.5) !important; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, var(--tink-cyber-pink), var(--tink-cyber-purple) 52%, var(--tink-cyber-cyan)) !important; box-shadow: rgba(255, 47, 216, 0.22) 0px 18px 42px, rgba(34, 211, 238, 0.12) 0px 0px 34px !important; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .btn, .trust-page .button-secondary, .trust-page .ghost-button, .pricing-page .button-secondary, .pricing-page .ghost-button, .landing-page .button-secondary, .landing-page .ghost-button { border-color: rgba(129, 168, 255, 0.2) !important; color: rgba(244, 248, 255, 0.9) !important; background: rgba(7, 13, 28, 0.72) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page .button-secondary:hover, .dashboard-page .ghost-button:hover, .dashboard-page .btn:hover, .trust-page .button-secondary:hover, .trust-page .ghost-button:hover, .pricing-page .button-secondary:hover, .pricing-page .ghost-button:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.34) !important; background: rgba(17, 34, 60, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { border-color: rgba(34, 211, 238, 0.14) !important; border-radius: 26px !important; background: radial-gradient(circle at 16% 0%, rgba(255, 47, 216, 0.08), transparent 30%), radial-gradient(circle at 82% 4%, rgba(34, 211, 238, 0.08), transparent 28%), linear-gradient(145deg, rgba(8, 17, 34, 0.88), rgba(5, 10, 22, 0.9)) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 26px 80px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceEngagement #engagementStudioPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-primary-review { border-color: rgba(255, 47, 216, 0.28) !important; background: radial-gradient(circle at 48% 8%, rgba(255, 47, 216, 0.18), transparent 30%), radial-gradient(circle at 20% 100%, rgba(34, 211, 238, 0.14), transparent 34%), linear-gradient(145deg, rgba(16, 27, 54, 0.9), rgba(8, 13, 29, 0.86)) !important; box-shadow: 0 28px 86px rgba(0, 0, 0, 0.36), var(--tink-cyber-glow) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2, .landing-hero h1 strong, .pricing-page .pricing-plan-premium h2, .pricing-page .pricing-plan-ultimate h2 { color: rgb(255, 255, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2::after { text-shadow: rgba(255, 47, 216, 0.5) 0px 0px 24px; color: var(--tink-cyber-pink) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .preview-alert-frame, .landing-dashboard-preview { border-color: rgba(255, 47, 216, 0.24) !important; background: radial-gradient(circle at 50% 35%, rgba(255, 47, 216, 0.24), transparent 32%), radial-gradient(circle at 22% 72%, rgba(34, 211, 238, 0.15), transparent 30%), linear-gradient(135deg, rgba(14, 24, 54, 0.9), rgba(8, 10, 24, 0.92)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .preview-alert-frame { box-shadow: rgba(255, 47, 216, 0.2) 0px 0px 58px, rgba(0, 0, 0, 0.42) 0px 22px 60px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-card-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-grid, .pricing-page .pricing-plan-grid, .trust-page .connection-summary-grid, .landing-workspace-grid { gap: clamp(14px, 1.25vw, 22px) !important; } .pricing-page .pricing-popular-badge, .pricing-page .pricing-check.strong, .landing-page .landing-pill, .dashboard-page .card-label, .dashboard-page .eyebrow { color: rgb(223, 250, 255) !important; } .dashboard-page input, .dashboard-page select, .dashboard-page textarea, .trust-page input, .trust-page select, .trust-page textarea { border-color: rgba(129, 168, 255, 0.22) !important; color: var(--tink-cyber-text) !important; background: rgba(4, 9, 20, 0.78) !important; } .dashboard-page input:focus, .dashboard-page select:focus, .dashboard-page textarea:focus, .trust-page input:focus, .trust-page select:focus, .trust-page textarea:focus { border-color: rgba(34, 211, 238, 0.52) !important; box-shadow: rgba(34, 211, 238, 0.12) 0px 0px 0px 3px, rgba(34, 211, 238, 0.08) 0px 0px 22px !important; } @media (prefers-reduced-motion: no-preference){.dashboard-page .panel, .dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link, .pricing-page .pricing-plan-card, .landing-workspace-card { transition: transform 160ms, border-color 160ms, box-shadow 160ms, background 160ms; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-live, .dashboard-page .status.good, .dashboard-page .status.active { animation: 3.2s ease-in-out 0s infinite normal none running cyberStatusPulse; } } @keyframes cyberStatusPulse { 0%, 100% { box-shadow: rgba(55, 217, 155, 0.05) 0px 0px 14px; } 50% { box-shadow: rgba(55, 217, 155, 0.16) 0px 0px 24px; } } @media (max-width: 1100px){.dashboard-page .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: auto !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { filter: saturate(1.32) contrast(1.12) brightness(1.08); min-height: clamp(170px, 17vw, 270px) !important; align-items: end !important; padding: clamp(20px, 2.2vw, 34px) clamp(20px, 2.6vw, 42px) !important; background: linear-gradient(90deg, rgba(6, 9, 20, 0.58), rgba(8, 10, 24, 0.16) 45%, rgba(8, 10, 24, 0.44)), linear-gradient(rgba(255, 47, 216, 0.08), rgba(6, 9, 20, 0.3)), url("/assets/cityline.png") center 52% / cover no-repeat !important; border-color: rgba(255, 47, 216, 0.48) !important; box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 0px inset, rgba(34, 211, 238, 0.22) 0px -1px 0px inset, rgba(255, 47, 216, 0.18) 0px 24px 70px, rgba(0, 0, 0, 0.34) 0px 18px 54px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before { opacity: 0.12 !important; } body.dashboard-page { font-size: 15px; line-height: 1.48; text-rendering: optimizelegibility; } .dashboard-page .shell.wrap, .dashboard-page main.shell { gap: 14px !important; padding-top: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: clamp(104px, 9vw, 148px) !important; align-items: center !important; padding: clamp(12px, 1.45vw, 22px) clamp(14px, 2vw, 28px) !important; filter: saturate(1.05) contrast(1.04) brightness(0.94) !important; background: linear-gradient(90deg, rgba(4, 8, 19, 0.78), rgba(7, 14, 30, 0.52) 48%, rgba(4, 8, 18, 0.76)), linear-gradient(rgba(255, 47, 216, 0.043), rgba(6, 9, 20, 0.52)), url("/assets/cityline.png") center 50% / cover no-repeat !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar h1 { max-width: 860px; font-size: clamp(1.55rem, 2.25vw, 2.45rem) !important; line-height: 1.02 !important; margin: 0px !important; } .dashboard-page .hero-copy, .dashboard-page .subcopy, .dashboard-page .creator-workspace-heading p, .dashboard-page .mod-workspace-heading p, .dashboard-page .panel p, .dashboard-page .card p, .dashboard-page .streamer-action-card p, .dashboard-page .connection-summary-card p, .dashboard-page .overlay-link-card p { color: rgb(198, 211, 234) !important; line-height: 1.48 !important; } .dashboard-page .eyebrow, .dashboard-page .card-label, .dashboard-page .creator-sidebar-group-label { color: rgb(169, 184, 209) !important; letter-spacing: 0.02em !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-avatar-ring { width: clamp(58px, 5.2vw, 82px) !important; height: clamp(58px, 5.2vw, 82px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .view-badge-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-identity-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav { display: none !important; } .dashboard-page .hero-links.actions { min-width: max-content; align-self: center !important; justify-content: flex-end !important; } .dashboard-page .hero-utility-menu > summary, .dashboard-page .hero-session-pill, .dashboard-page .logout-button, .dashboard-page .live-indicator, .dashboard-page .live-ops-pill, .dashboard-page .status, .dashboard-page .pill, .dashboard-page .badge { min-height: 28px !important; padding: 6px 11px !important; font-size: 0.82rem !important; line-height: 1.1 !important; } .dashboard-page .logout-button { border-color: rgba(255, 255, 255, 0.22) !important; color: rgb(255, 255, 255) !important; background: rgba(18, 27, 48, 0.86) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-strip, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .full-control-strip { padding: 10px 14px !important; gap: 10px !important; border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-copy p { margin: 2px 0px 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin-top: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { gap: clamp(14px, 1.3vw, 22px) !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { scrollbar-width: thin; top: 12px !important; max-height: calc(-24px + 100vh) !important; padding: 14px !important; overflow-y: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { min-height: 36px !important; padding: 8px 10px !important; font-size: 0.9rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { padding: clamp(16px, 1.6vw, 26px) !important; border-radius: 22px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading { margin-bottom: 14px !important; align-items: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-heading h2, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2 { font-size: clamp(1.35rem, 1.7vw, 2rem) !important; line-height: 1.08 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { gap: clamp(14px, 1.25vw, 22px) !important; align-items: start !important; } .dashboard-page .panel, .dashboard-page .card, .dashboard-page .metric, .dashboard-page .summaryCard, .dashboard-page .setupPanel, .dashboard-page .section-command-card, .dashboard-page .streamer-action-card, .dashboard-page .connection-summary-card, .dashboard-page .overlay-link-card, .dashboard-page .platform-card { padding: clamp(14px, 1.2vw, 20px) !important; } .dashboard-page h3, .dashboard-page h4, .dashboard-page strong { color: rgb(247, 249, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { min-height: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .preview-alert-frame { min-height: clamp(210px, 20vw, 340px) !important; } .dashboard-page input, .dashboard-page select, .dashboard-page textarea { min-height: 42px !important; font-size: 0.94rem !important; color: rgb(246, 248, 255) !important; } .dashboard-page textarea { line-height: 1.45 !important; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: auto !important; grid-template-columns: auto 1fr !important; } .dashboard-page .hero-links.actions { grid-column: 1 / -1; justify-content: flex-start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .readiness-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-bar { flex-wrap: wrap !important; } } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] main.shell.wrap { width: min(100%, 1920px) !important; padding: 12px clamp(12px, 1.4vw, 24px) 32px !important; gap: 14px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { min-height: clamp(96px, 8vw, 132px) !important; display: grid !important; grid-template-columns: auto minmax(0px, 1fr) auto !important; gap: 16px !important; align-items: center !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-main { display: grid; gap: 5px; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .view-badge-row { display: none !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-switch-row { gap: 8px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { grid-template-columns: clamp(214px, 13vw, 250px) minmax(0px, 1fr) !important; gap: clamp(14px, 1.35vw, 24px) !important; align-items: start !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { border-radius: 22px !important; gap: 6px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { padding-bottom: 12px !important; margin-bottom: 8px !important; border-bottom: 1px solid rgba(121, 154, 255, 0.14) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { justify-content: flex-start !important; border-color: transparent !important; background: transparent !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link[aria-current="page"] { border-color: rgba(255, 47, 216, 0.42) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.22), rgba(34, 211, 238, 0.08)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: repeat(4, minmax(150px, 1fr)) !important; gap: 10px !important; padding: 10px !important; border-radius: 20px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metric { min-height: 76px !important; padding: 12px !important; background: rgba(8, 18, 35, 0.58) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metricLabel { color: rgb(169, 184, 209) !important; font-size: 0.72rem !important; letter-spacing: 0.02em !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .metricValue { color: rgb(247, 249, 255) !important; font-size: clamp(1.35rem, 2vw, 2rem) !important; line-height: 1.05 !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { min-height: calc(-190px + 100vh) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-workspace-grid { gap: clamp(14px, 1.25vw, 22px) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-live-review-layout { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.2fr) !important; gap: clamp(14px, 1.25vw, 22px) !important; align-items: start !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panelHead, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel-heading { gap: 12px !important; align-items: center !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .panel-scroll-body { max-height: min(58vh, 680px); overflow: auto; scrollbar-width: thin; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .feedItem, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem { border-color: rgba(121, 154, 255, 0.14) !important; border-radius: 16px !important; background: rgba(7, 14, 29, 0.72) !important; color: rgb(238, 244, 255) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .messageText { color: rgb(247, 249, 255) !important; font-size: 0.96rem !important; line-height: 1.46 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #chatPanel .chat-platform-row .messageText, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #chatPanel .chat-platform-row .messageText { font-size: 1.04rem !important; line-height: 1.52 !important; } body.dashboard-page:not([data-product-page]) main.shell { width: min(100%, 1180px) !important; padding: clamp(24px, 8vh, 72px) 16px !important; } body.dashboard-page:not([data-product-page]) main.shell > .panel { max-width: 720px !important; margin: 0px auto !important; border-radius: 24px !important; border-color: rgba(34, 211, 238, 0.2) !important; background: radial-gradient(circle at 16% 0%, rgba(255, 47, 216, 0.12), transparent 32%), linear-gradient(145deg, rgba(9, 20, 39, 0.9), rgba(5, 10, 22, 0.88)) !important; box-shadow: rgba(0, 0, 0, 0.36) 0px 28px 80px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } @media (max-width: 1000px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-live-review-layout { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { position: relative !important; top: auto !important; max-height: none !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } } @media (max-width: 620px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-v2-metrics { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-links.actions { position: relative; align-items: flex-start !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu { position: relative; margin-left: auto; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu summary { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 7px 13px; border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 999px; color: rgba(226, 232, 240, 0.86); background: rgba(7, 11, 22, 0.58); box-shadow: rgba(255, 255, 255, 0.024) 0px 1px 0px inset; cursor: pointer; user-select: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu summary:hover, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu[open] summary { border-color: rgba(34, 211, 238, 0.34); background: rgba(10, 18, 32, 0.82); box-shadow: rgba(34, 211, 238, 0.09) 0px 0px 18px; transform: translateY(-1px); } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu-panel { position: absolute; top: calc(100% + 10px); right: 0px; z-index: 50; display: grid; grid-template-columns: repeat(2, minmax(128px, 1fr)); gap: 8px; width: min(380px, -28px + 100vw); padding: 12px; border: 1px solid rgba(34, 211, 238, 0.2); border-radius: 18px; backdrop-filter: blur(18px); background: radial-gradient(circle at 20% 0%, rgba(255, 47, 216, 0.11), transparent 42%), radial-gradient(circle at 100% 20%, rgba(34, 211, 238, 0.1), transparent 44%), rgba(7, 11, 22, 0.94) !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 26px 70px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu-panel .button-secondary, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero-utility-menu-panel .ghost-button { width: 100%; justify-content: center; display: inline-flex !important; min-height: 34px !important; padding: 7px 10px !important; border-color: rgba(148, 163, 184, 0.14) !important; background: rgba(11, 18, 32, 0.76) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: repeat(4, minmax(130px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card { min-height: 82px !important; padding: 12px !important; background: rgba(7, 16, 30, 0.68) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card .metricLabel { letter-spacing: 0.03em !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card .metricValue { font-size: clamp(1.35rem, 2vw, 2rem) !important; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { min-height: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } } @media (max-width: 560px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-template-columns: 1fr !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { display: grid !important; grid-template-columns: auto minmax(0px, 1fr) auto !important; gap: 16px 20px !important; align-items: center !important; min-height: clamp(132px, 12vw, 196px) !important; margin-bottom: 0px !important; padding: clamp(16px, 1.6vw, 26px) !important; border-color: rgba(34, 211, 238, 0.2) !important; border-radius: 24px !important; background: linear-gradient(90deg, rgba(4, 8, 19, 0.78), rgba(7, 14, 30, 0.48) 48%, rgba(4, 8, 18, 0.76)), linear-gradient(rgba(255, 47, 216, 0.055), rgba(6, 9, 20, 0.5)), url("/assets/cityline.png") center 50% / cover no-repeat !important; filter: saturate(1.08) contrast(1.05) brightness(0.96) !important; box-shadow: rgba(0, 0, 0, 0.34) 0px 26px 78px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar::before { background: none !important; opacity: 0 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap { display: flex !important; flex: 0 0 auto !important; min-width: clamp(220px, 18vw, 300px) !important; align-items: center !important; justify-content: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring { width: clamp(260px, 24vw, 380px) !important; height: clamp(260px, 24vw, 380px) !important; overflow: hidden !important; border-radius: 999px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-main, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-main { display: grid !important; gap: 0px !important; min-width: 0px !important; padding-left: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .view-badge-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .view-badge-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-identity-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-identity-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-switch-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-switch-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0px 0px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-identity-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-identity-row { margin: 12px 0px 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-switch-row, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-switch-row { margin: 12px 0px 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar h1 { margin: 0px 0px 12px !important; max-width: none !important; font-size: clamp(3rem, 4.8vw, 5rem) !important; line-height: 0.98 !important; color: rgb(247, 251, 255) !important; background: none !important; -webkit-text-fill-color: rgb(247, 251, 255) !important; opacity: 1 !important; mix-blend-mode: normal !important; text-shadow: rgba(110, 231, 255, 0.25) 0px 0px 20px, rgba(168, 85, 247, 0.18) 0px 0px 40px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; opacity: 1 !important; filter: drop-shadow(rgba(255, 79, 216, 0.7) 0px 0px 12px) drop-shadow(rgba(52, 215, 255, 0.5) 0px 0px 24px) drop-shadow(rgba(0, 0, 0, 0.28) 0px 18px 28px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-copy, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-copy { max-width: 720px !important; margin: 0px !important; color: rgba(184, 199, 223, 0.96) !important; opacity: 1 !important; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap { display: none !important; } } .dashboard-page .hero.topbar { display: grid !important; grid-template-columns: auto minmax(0px, 1fr) auto !important; align-items: center !important; gap: clamp(14px, 1.5vw, 24px) !important; min-height: clamp(150px, 13vw, 210px) !important; padding: clamp(14px, 1.4vw, 22px) !important; } .dashboard-page .hero.topbar .hero-avatar-wrap, .dashboard-page .hero.topbar > .hero-avatar-wrap { display: flex !important; flex: 0 0 clamp(150px, 13vw, 180px) !important; width: clamp(150px, 13vw, 180px) !important; height: clamp(150px, 13vw, 180px) !important; min-width: clamp(150px, 13vw, 180px) !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin: 0px !important; } .dashboard-page .hero.topbar .hero-avatar-ring, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { display: grid !important; place-items: center !important; width: clamp(150px, 13vw, 180px) !important; height: clamp(150px, 13vw, 180px) !important; overflow: visible !important; border-radius: 999px !important; border-color: rgba(255, 47, 216, 0.34) !important; background: radial-gradient(circle at 50% 46%, rgba(255, 47, 216, 0.2), transparent 58%), radial-gradient(circle at 56% 58%, rgba(34, 211, 238, 0.16), transparent 62%), rgba(4, 8, 20, 0.68) !important; box-shadow: rgba(255, 47, 216, 0.22) 0px 0px 40px, rgba(34, 211, 238, 0.14) 0px 0px 28px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset !important; } .dashboard-page .hero.topbar .hero-avatar-ring::before, .dashboard-page .hero.topbar .hero-avatar-ring::after, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar-ring::before, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar-ring::after { border-radius: 999px !important; } .dashboard-page .hero.topbar .hero-avatar, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar { display: block !important; width: clamp(110px, 10vw, 140px) !important; height: clamp(110px, 10vw, 140px) !important; max-width: clamp(110px, 10vw, 140px) !important; max-height: clamp(110px, 10vw, 140px) !important; object-fit: contain !important; transform: none !important; transform-origin: center center !important; } .dashboard-page .hero.topbar .hero-main { align-self: center !important; min-width: 0px !important; } .dashboard-page .hero.topbar h1 { margin-bottom: 8px !important; font-size: clamp(2.35rem, 3.6vw, 4.1rem) !important; line-height: 1 !important; } .dashboard-page .hero.topbar .eyebrow { margin-bottom: 5px !important; } .dashboard-page .hero.topbar .hero-copy { max-width: 680px !important; font-size: 0.96rem !important; line-height: 1.4 !important; } .dashboard-page .hero.topbar .view-badge-row, .dashboard-page .hero.topbar .hero-identity-row, .dashboard-page .hero.topbar .hero-switch-row { gap: 8px !important; margin-bottom: 8px !important; } .dashboard-page .hero.topbar .hero-identity-row, .dashboard-page .hero.topbar .hero-switch-row { margin-top: 8px !important; } @media (max-width: 900px){.dashboard-page .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) !important; min-height: auto !important; } .dashboard-page .hero.topbar .hero-links.actions { grid-column: 1 / -1 !important; } .dashboard-page .hero.topbar .hero-avatar-wrap, .dashboard-page .hero.topbar > .hero-avatar-wrap { flex-basis: clamp(88px, 18vw, 120px) !important; width: clamp(88px, 18vw, 120px) !important; height: clamp(88px, 18vw, 120px) !important; min-width: clamp(88px, 18vw, 120px) !important; } .dashboard-page .hero.topbar .hero-avatar-ring, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { width: clamp(88px, 18vw, 120px) !important; height: clamp(88px, 18vw, 120px) !important; } .dashboard-page .hero.topbar .hero-avatar, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar { width: clamp(72px, 14vw, 96px) !important; height: clamp(72px, 14vw, 96px) !important; max-width: clamp(72px, 14vw, 96px) !important; max-height: clamp(72px, 14vw, 96px) !important; } } @media (max-width: 620px){.dashboard-page .hero.topbar { grid-template-columns: 1fr !important; } .dashboard-page .hero.topbar .hero-avatar-wrap, .dashboard-page .hero.topbar > .hero-avatar-wrap { justify-self: start !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar-wrap, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap { display: flex !important; flex: 0 0 clamp(150px, 13vw, 180px) !important; width: clamp(150px, 13vw, 180px) !important; min-width: clamp(150px, 13vw, 180px) !important; align-items: center !important; justify-content: center !important; align-self: center !important; margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar-ring, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { display: grid !important; place-items: center !important; width: clamp(150px, 13vw, 180px) !important; height: clamp(150px, 13vw, 180px) !important; overflow: visible !important; border-radius: 999px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap .hero-avatar { width: clamp(110px, 10vw, 140px) !important; height: clamp(110px, 10vw, 140px) !important; max-width: clamp(110px, 10vw, 140px) !important; max-height: clamp(110px, 10vw, 140px) !important; object-fit: contain !important; transform: none !important; transform-origin: center center !important; } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-wrap, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar-wrap, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap { display: flex !important; flex-basis: clamp(88px, 18vw, 120px) !important; width: clamp(88px, 18vw, 120px) !important; min-width: clamp(88px, 18vw, 120px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar-ring, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar-ring, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar-ring, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { width: clamp(88px, 18vw, 120px) !important; height: clamp(88px, 18vw, 120px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar .hero-avatar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar > .hero-avatar-wrap .hero-avatar, .dashboard-page:not([data-product-page]) .hero.topbar .hero-avatar, .dashboard-page:not([data-product-page]) .hero.topbar > .hero-avatar-wrap .hero-avatar { width: clamp(72px, 14vw, 96px) !important; height: clamp(72px, 14vw, 96px) !important; max-width: clamp(72px, 14vw, 96px) !important; max-height: clamp(72px, 14vw, 96px) !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid { grid-template-columns: minmax(0px, 1fr) !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] #workspaceAdvanced .creator-workspace-grid > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #streamHealthPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #jobsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #eventPanel { grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; min-width: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #jobsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #eventPanel { overflow: visible !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced #jobsFeed, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .connection-summary-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced pre { width: 100% !important; max-width: 100% !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace { gap: clamp(16px, 1.35vw, 24px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace > .section-command-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace > .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace > details.panel { min-width: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .panel-full, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-grid > .panel-wide { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceTesting .creator-workspace-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .creator-workspace-grid { gap: clamp(14px, 1.25vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .section-command-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .overlay-link-card { box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 34px, rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #activityFeedPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity #bossPanel { align-self: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .panel-scroll-body { display: grid; gap: 10px; padding-right: 4px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-status-card { min-height: 0px; border-color: rgba(107, 183, 232, 0.24) !important; background: linear-gradient(rgba(15, 28, 49, 0.82), rgba(8, 16, 30, 0.78)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-feed-card { min-width: 0px; align-self: stretch; overflow: hidden; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-feed { max-height: min(52vh, 520px); min-height: 132px; overflow-y: auto; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-item, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-state { width: 100%; min-width: 0px; padding: 12px 14px; border: 1px solid rgba(148, 163, 184, 0.13); border-radius: 8px; background: rgba(7, 16, 30, 0.62); line-height: 1.45; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-item p { margin-block: 3px; overflow-wrap: anywhere; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-state { display: grid; place-items: center; min-height: 104px; color: rgba(205, 218, 238, 0.86); text-align: center; border-style: dashed; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-state[data-community-feed-state="error"] { border-color: rgba(248, 113, 113, 0.32); color: rgb(255, 208, 208); } @media (max-width: 900px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .community-activity-feed-card { grid-column: 1 / -1 !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feedItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .reviewItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .reviewItem, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthLog .feedItem { width: 100%; min-width: 0px; line-height: 1.45; padding: 12px 14px !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 8px !important; background: rgba(7, 16, 30, 0.62) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feedItem p, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .reviewItem p, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .reviewItem p { margin-block: 3px; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feedItem strong, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .reviewItem strong, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item strong { color: rgb(247, 251, 255); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item { grid-template-columns: 10px minmax(0px, 1fr) auto !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item time, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feedItem time, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced time { color: rgba(184, 199, 223, 0.86); font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .feedItem:only-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .reviewItem:only-child, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .reviewItem:only-child { border-style: dashed !important; border-color: rgba(34, 211, 238, 0.22) !important; background: rgba(8, 18, 35, 0.44) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-live-chip, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-live-chip-warning { min-height: 26px; align-items: center; font-variant-numeric: tabular-nums; border-radius: 999px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.active, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] [data-status-state="ready"] .status { border-color: rgba(55, 217, 155, 0.42) !important; color: rgb(214, 255, 240) !important; background: rgba(55, 217, 155, 0.1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.warn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-live-chip-warning { border-color: rgba(224, 184, 87, 0.44) !important; color: rgb(255, 237, 189) !important; background: rgba(224, 184, 87, 0.1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-health-row { gap: 10px; line-height: 1.35; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .connection-summary-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAdvanced .connection-summary-grid { gap: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-setup-picker, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .selected-platform-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms .platform-detail-panel { min-width: 0px !important; } @media (max-width: 1280px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item { grid-template-columns: 10px minmax(0px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .activity-feed-item time { grid-column: 2; } } .tink-mascot-slot { --mascot-card-bg: rgba(8, 13, 28, 0.72); --mascot-card-border: rgba(255, 47, 216, 0.2); --mascot-card-glow: rgba(255, 47, 216, 0.14); display: block; } .tink-mascot-card-inner { display: flex; align-items: center; gap: 12px; min-width: 0px; padding: 12px; border: 1px solid var(--mascot-card-border); border-radius: 16px; background: radial-gradient(circle at 18% 16%, rgba(255, 47, 216, 0.14), transparent 34%), linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(255, 47, 216, 0.07)), var(--mascot-card-bg); box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24), 0 0 24px var(--mascot-card-glow); } .tink-mascot { display: block; flex: 0 0 auto; width: clamp(58px, 8vw, 92px); height: clamp(58px, 8vw, 92px); object-fit: contain; filter: drop-shadow(rgba(255, 47, 216, 0.28) 0px 0px 16px); } .tink-mascot-text { display: grid; gap: 3px; min-width: 0px; } .tink-mascot-title { color: rgb(248, 251, 255); font-size: 0.94rem; line-height: 1.2; } .tink-mascot-copy { margin: 0px; color: rgba(220, 235, 248, 0.78); font-size: 0.82rem; line-height: 1.35; } .quick-start-hero .quick-start-mascot { justify-self: end; max-width: 300px; } .quick-start-hero .quick-start-mascot .tink-mascot-card-inner { padding: 10px 12px; } .quick-start-hero .quick-start-mascot .tink-mascot-logo { width: clamp(48px, 6vw, 68px); height: clamp(48px, 6vw, 68px); max-width: clamp(48px, 6vw, 68px); max-height: clamp(48px, 6vw, 68px); object-fit: contain; } .quick-start-hero .quick-start-mascot .tink-mascot-login { width: clamp(58px, 7vw, 78px); height: clamp(66px, 8vw, 88px); max-width: clamp(58px, 7vw, 78px); max-height: clamp(66px, 8vw, 88px); object-fit: contain; } .tink-mascot-inline { margin-top: 12px; } .tink-mascot-inline .tink-mascot-card-inner { gap: 10px; padding: 9px 10px; border-radius: 14px; box-shadow: none; } .tink-mascot-inline .tink-mascot { width: 52px; height: 52px; } .tink-mascot-helper-card { margin: 12px 0px; } .alert-studio-mascot .tink-mascot-card-inner, .creator-mod-mascot .tink-mascot-card-inner, .mod-console-mascot .tink-mascot-card-inner { border-color: rgba(34, 211, 238, 0.22); background: radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.12), transparent 34%), linear-gradient(135deg, rgba(255, 47, 216, 0.09), rgba(34, 211, 238, 0.08)), rgba(8, 13, 28, 0.76); } .creator-mod-mascot .tink-mascot[data-tink-mascot-image="mod"], .mod-console-mascot .tink-mascot[data-tink-mascot-image="mod"] { width: clamp(72px, 8vw, 96px); height: clamp(88px, 10vw, 118px); max-width: clamp(72px, 8vw, 96px); max-height: clamp(88px, 10vw, 118px); object-fit: contain; } @media (max-width: 760px){.quick-start-hero .quick-start-mascot { justify-self: stretch; max-width: none; } .tink-mascot-card-inner { align-items: center; } .tink-mascot { width: 64px; height: 64px; } } :root { --tink-compact-radius: 10px; --tink-compact-card-padding: clamp(12px, 1.15vw, 18px); --tink-compact-gap: clamp(10px, 1vw, 16px); --tink-quiet-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); } .dashboard-page .shell { padding-top: clamp(12px, 1.4vw, 22px) !important; padding-bottom: clamp(22px, 2.8vw, 42px) !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .dashboard-page[data-product-page="dev"][data-dashboard-role="dev"] .hero.topbar { min-height: 0px !important; gap: 12px 16px !important; padding: clamp(12px, 1.2vw, 18px) !important; border-radius: var(--tink-compact-radius) !important; box-shadow: var(--tink-quiet-shadow) !important; } .dashboard-page .hero.topbar::before, .dashboard-page .hero.topbar::after, .dashboard-page .hero-avatar-ring::before, .dashboard-page .hero-avatar-ring::after { opacity: 0.2 !important; } .dashboard-page .hero.topbar h1, .quick-start-hero h1 { font-size: clamp(1.8rem, 3.2vw, 3rem) !important; line-height: 1.02 !important; } .dashboard-page .hero-copy, .dashboard-page .hero.topbar .hero-copy { max-width: 760px !important; margin-top: 4px !important; line-height: 1.45 !important; } .dashboard-page .hero-avatar-wrap, .dashboard-page .hero.topbar .hero-avatar-wrap, .dashboard-page .hero.topbar > .hero-avatar-wrap { width: clamp(92px, 10vw, 132px) !important; min-width: clamp(92px, 10vw, 132px) !important; height: clamp(92px, 10vw, 132px) !important; min-height: clamp(92px, 10vw, 132px) !important; } .dashboard-page .hero-avatar-ring, .dashboard-page .hero.topbar .hero-avatar-ring, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar-ring { width: clamp(86px, 9.2vw, 120px) !important; height: clamp(86px, 9.2vw, 120px) !important; box-shadow: rgba(255, 47, 216, 0.16) 0px 0px 24px !important; } .dashboard-page .hero-avatar, .dashboard-page .hero.topbar .hero-avatar, .dashboard-page .hero.topbar > .hero-avatar-wrap .hero-avatar { width: clamp(70px, 7.6vw, 100px) !important; height: clamp(70px, 7.6vw, 100px) !important; max-height: 100px !important; } .dashboard-page .view-badge-row, .dashboard-page .hero-identity-row, .dashboard-page .hero-switch-row, .dashboard-page .hero-links.actions { gap: 6px !important; } .dashboard-page .hero-identity-chip, .dashboard-page .view-badge, .dashboard-page .hero-session-pill, .dashboard-page .status, .dashboard-page .badge, .dashboard-page .dev-chip { min-height: 24px !important; padding: 4px 8px !important; font-size: 0.76rem !important; box-shadow: none !important; } .dashboard-page .hero-identity-chip:nth-child(n+3), .dashboard-page[data-product-page="dashboard"] .view-badge-row .view-badge:nth-child(n+3) { display: none !important; } .dashboard-page .creator-workspace-shell, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: minmax(176px, 200px) minmax(0px, 1fr) !important; gap: clamp(10px, 1vw, 16px) !important; } .dashboard-page .creator-sidebar-nav, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { padding: 10px !important; gap: 5px !important; border-radius: var(--tink-compact-radius) !important; box-shadow: var(--tink-quiet-shadow) !important; } .dashboard-page .creator-sidebar-brand, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-brand, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { padding: 8px !important; margin-bottom: 4px !important; } .dashboard-page .creator-sidebar-link, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { min-height: 30px !important; padding: 6px 8px !important; border-radius: 8px !important; font-size: 0.82rem !important; } .dashboard-page .creator-sidebar-group-label { margin-top: 10px !important; margin-bottom: 3px !important; font-size: 0.68rem !important; } .dashboard-page .creator-workspace, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { gap: var(--tink-compact-gap) !important; } .dashboard-page .creator-workspace-grid, .dashboard-page .connection-summary-grid, .dashboard-page .live-health-grid, .dashboard-page .mod-workspace-grid, .dashboard-page .grid, .dashboard-page .dev-panel-grid, .dashboard-page .dev-summary-grid, .dashboard-page .dev-status-bar { gap: var(--tink-compact-gap) !important; } .dashboard-page .panel, .dashboard-page details.panel, .dashboard-page .metric, .dashboard-page .connection-summary-card, .dashboard-page .section-command-card, .dashboard-page .overlay-link-card, .dashboard-page .streamer-action-card, .dashboard-page .quick-start-card, .dashboard-page .dev-workspace, .dashboard-page .dev-status-card, .dashboard-page .dev-support-card { padding: var(--tink-compact-card-padding) !important; border-radius: var(--tink-compact-radius) !important; box-shadow: var(--tink-quiet-shadow) !important; } .dashboard-page .panelHead, .dashboard-page .panel-heading, .dashboard-page .dev-workspace-head { gap: 10px !important; margin-bottom: 8px !important; } .dashboard-page .panel h2, .dashboard-page .section-command-card h2, .dashboard-page .quick-start-card h2, .dashboard-page .metricValue, .dashboard-page .dev-workspace h2 { font-size: clamp(1.1rem, 1.5vw, 1.55rem) !important; line-height: 1.12 !important; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .btn, .dashboard-page .nav-btn { min-height: 32px !important; padding: 6px 10px !important; border-radius: 8px !important; box-shadow: none !important; } .dashboard-page .button-primary, .dashboard-page button.button-primary { min-height: 36px !important; padding: 7px 12px !important; } .dashboard-page .tink-mascot-card-inner { box-shadow: none !important; } .quick-start-shell { padding-top: clamp(12px, 1.5vw, 22px) !important; gap: var(--tink-compact-gap) !important; } .quick-start-hero { padding: clamp(14px, 1.5vw, 22px) !important; border-radius: var(--tink-compact-radius) !important; } .quick-step { padding-block: 4px !important; } .quick-start-progress, .quick-style-grid, .quick-start-actions { gap: 8px !important; } @media (max-width: 900px){.dashboard-page .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar, .dashboard-page[data-product-page="dev"][data-dashboard-role="dev"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) !important; } .dashboard-page .hero-avatar-wrap, .dashboard-page .hero.topbar .hero-avatar-wrap { width: 76px !important; min-width: 76px !important; height: 76px !important; min-height: 76px !important; } .dashboard-page .hero-avatar-ring, .dashboard-page .hero.topbar .hero-avatar-ring { width: 70px !important; height: 70px !important; } .dashboard-page .hero-avatar, .dashboard-page .hero.topbar .hero-avatar { width: 58px !important; height: 58px !important; } .dashboard-page .creator-workspace-shell, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .creator-workspace-shell { grid-template-columns: 1fr !important; } .dashboard-page .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { position: relative !important; top: auto !important; } } @media (max-width: 720px){.landing-hero, .landing-section, .quick-start-shell, .dashboard-page .shell { padding-inline: 12px !important; } .dashboard-page .hero.topbar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero.topbar { grid-template-columns: 1fr !important; } .dashboard-page .hero-avatar-wrap, .dashboard-page .hero.topbar .hero-avatar-wrap { display: none !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-support-details { padding: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-support-details > summary { cursor: pointer; list-style: none; padding: 14px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-support-details > summary::-webkit-details-marker { display: none; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-support-details:not([open]) { background: rgba(6, 10, 22, 0.48) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .dashboard-support-details-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0px 16px 16px; border-top: 1px solid rgba(133, 151, 200, 0.12); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-overview-card { order: -2; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid { order: -1; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-tools-card, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-advanced-card { background: rgba(5, 8, 18, 0.42) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings .ops-toolbar { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings #streamModerationSetupPanel { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceSettings #streamModerationSetupPanel:not([open]) { background: rgba(5, 8, 18, 0.46) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceActivity .creator-workspace-grid { align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome.creator-workspace { padding-bottom: clamp(18px, 2vw, 32px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .creator-workspace-grid { align-items: stretch !important; grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; grid-auto-rows: minmax(0px, auto) !important; gap: clamp(12px, 1.1vw, 18px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { grid-column: span 3 !important; min-height: clamp(300px, 24vw, 380px) !important; display: grid !important; align-content: center !important; gap: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { grid-column: span 6 !important; min-height: clamp(300px, 24vw, 380px) !important; padding: clamp(14px, 1.3vw, 20px) !important; border-color: rgba(255, 47, 216, 0.28) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 20px 52px, rgba(255, 47, 216, 0.1) 0px 0px 42px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard { grid-column: span 3 !important; min-height: clamp(300px, 24vw, 380px) !important; display: grid !important; align-content: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-overlay-preview-card { grid-template-rows: auto minmax(230px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy { align-items: end !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-copy h3 { font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage { min-height: clamp(248px, 20vw, 326px) !important; border-radius: 20px !important; overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage::after { content: ""; position: absolute; inset: 12%; pointer-events: none; border-radius: 999px; background: radial-gradient(circle, rgba(255, 47, 216, 0.14), transparent 62%); filter: blur(18px); } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert { width: min(520px, 86%) !important; min-height: clamp(106px, 9vw, 136px) !important; padding: clamp(16px, 1.5vw, 24px) !important; border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-orb { width: clamp(42px, 4vw, 58px) !important; height: clamp(42px, 4vw, 58px) !important; border-radius: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-alert small { font-size: clamp(0.9rem, 1vw, 1.05rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 4px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-primary-action { min-height: 48px !important; font-size: 1rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons .button-secondary { justify-content: center !important; min-height: 36px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-actions-card .panelHead { margin-bottom: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-grid { align-content: stretch !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action { display: grid !important; grid-template-columns: 44px minmax(0px, 1fr) !important; align-items: center !important; justify-content: stretch !important; gap: 12px !important; min-height: 58px !important; padding: 10px 12px !important; text-align: left !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action span { width: 44px !important; height: 38px !important; display: grid !important; place-items: center !important; border-radius: 12px !important; border: 1px solid rgba(34, 211, 238, 0.24) !important; background: rgba(34, 211, 238, 0.08) !important; color: var(--tink-brand-cyan) !important; font-size: 0.74rem !important; letter-spacing: 0.08em !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action strong { min-width: 0px !important; overflow-wrap: anywhere !important; font-size: 0.94rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-quick-action-featured { border-color: rgba(34, 211, 238, 0.32) !important; background: radial-gradient(circle at 12% 50%, rgba(34, 211, 238, 0.14), transparent 36%), rgba(7, 13, 28, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { grid-template-columns: minmax(0px, 1fr) !important; grid-template-rows: auto auto auto !important; align-content: start !important; justify-items: stretch !important; overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-feedback { grid-column: 1 / -1 !important; min-width: 0px !important; max-width: 100% !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-copy h2 { max-width: 10ch !important; font-size: clamp(2rem, 2.75vw, 3rem) !important; overflow-wrap: normal !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons { width: 100% !important; margin-top: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-buttons > * { width: 100% !important; min-width: 0px !important; white-space: normal !important; text-align: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-feedback { overflow-wrap: anywhere !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-grid { grid-column: 1 / -1 !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .live-health-card { min-height: 118px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: span 4 !important; min-height: 250px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #connectionStatusPanel { grid-column: 1 / -1 !important; min-height: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .panel-scroll-body { max-height: 178px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .connection-summary-card { min-height: 116px !important; } @media (max-width: 1500px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel { grid-column: span 5 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard { grid-column: span 7 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: span 4 !important; } } @media (max-width: 1180px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome .streamer-action-card.go-live-panel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeOverlayPreviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeQuickActionsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #alertsPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #bossPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceHome #activityFeedPanel { grid-column: 1 / -1 !important; min-height: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-preview-stage { min-height: clamp(240px, 36vw, 330px) !important; } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .creator-workspace-grid { align-items: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertControlsPanel { padding: clamp(14px, 1.25vw, 20px) !important; overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertControlsPanel > .panelHead { margin-bottom: 12px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(129, 168, 255, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-editor { gap: clamp(14px, 1.3vw, 22px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hero-grid { display: grid !important; grid-template-columns: minmax(420px, 1.45fr) minmax(300px, 0.78fr) !important; grid-template-areas: "preview preset" "preview controls" !important; align-items: stretch !important; gap: clamp(12px, 1.25vw, 18px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel { grid-area: preview !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard { grid-area: preset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-quick-panel { grid-area: controls !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hidden-preview { display: grid !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel { min-height: clamp(560px, 50vw, 760px) !important; padding: clamp(16px, 1.4vw, 22px) !important; border-radius: 22px !important; border-color: rgba(34, 211, 238, 0.38) !important; background: radial-gradient(circle at 48% 20%, rgba(255, 47, 216, 0.17), transparent 34%), radial-gradient(circle at 16% 72%, rgba(34, 211, 238, 0.15), transparent 32%), linear-gradient(145deg, rgba(12, 23, 43, 0.95), rgba(6, 10, 22, 0.9)) !important; box-shadow: rgba(0, 0, 0, 0.34) 0px 24px 66px, rgba(34, 211, 238, 0.12) 0px 0px 48px, rgba(255, 255, 255, 0.055) 0px 1px 0px inset !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel .overlay-link-card-head { align-items: center !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(129, 168, 255, 0.1) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel .live-overlay-preview { min-height: clamp(460px, 42vw, 640px) !important; border-radius: 22px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel .helper-copy { margin: 0px !important; color: rgba(226, 232, 240, 0.72) !important; text-align: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-alert-frame { width: min(780px, 100% - 28px) !important; min-height: clamp(300px, 28vw, 430px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard { grid-template-columns: minmax(96px, 0.36fr) minmax(0px, 0.64fr) !important; align-items: center !important; gap: 12px !important; min-height: 0px !important; padding: clamp(14px, 1.2vw, 18px) !important; border-radius: 18px !important; border-color: rgba(255, 47, 216, 0.38) !important; background: radial-gradient(circle at 12% 0%, rgba(255, 47, 216, 0.17), transparent 34%), linear-gradient(145deg, rgba(13, 20, 38, 0.88), rgba(7, 12, 26, 0.78)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard::before { content: "Selected"; position: absolute; top: 12px; right: 12px; z-index: 1; padding: 5px 9px; border: 1px solid rgba(34, 211, 238, 0.28); border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: rgba(223, 252, 255, 0.95); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspacePlatforms #platformSetupCards > :is(.platform-setup-picker, .platform-setup-active-label, .platform-setup-card[data-platform-card]) { width: 100%; max-width: none; grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard > .field-label, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard > .alert-pack-variation-field, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard > .alert-studio-primary-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard > .recommended-alert-packs, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard > .alert-pack-browse-button { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackPreview { max-height: 190px !important; padding: 6px !important; border-radius: 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-copy { gap: 7px !important; padding-right: 58px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-copy strong { font-size: clamp(1.25rem, 1.6vw, 1.6rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-description { font-size: 0.9rem !important; line-height: 1.42 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-variation-field { margin-top: 2px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .recommended-alert-packs { display: grid !important; grid-template-columns: repeat(5, minmax(0px, 1fr)) !important; gap: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation { min-height: 58px !important; padding: 6px !important; border-radius: 14px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation img { max-height: 42px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation span { font-size: 0.68rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation.active { border-color: rgba(255, 47, 216, 0.62) !important; box-shadow: rgba(34, 211, 238, 0.22) 0px 0px 0px 1px, rgba(255, 47, 216, 0.18) 0px 0px 26px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-primary-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-primary-actions .button-primary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-primary-actions .button-secondary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-primary-actions .ghost-button { width: 100% !important; min-width: 0px !important; min-height: 42px !important; justify-content: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #streamerStudioSaveSettings { border-color: rgba(34, 211, 238, 0.34) !important; background: radial-gradient(circle at 12% 50%, rgba(34, 211, 238, 0.13), transparent 36%), rgba(7, 13, 28, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertStudioResetDefault { opacity: 0.78; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-quick-panel { align-content: start !important; gap: 12px !important; min-height: 0px !important; padding: clamp(14px, 1.2vw, 18px) !important; border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-mascot { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid > .overlay-url-field, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid > .toggle-chip, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid > .alert-slider-control { min-width: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid > .overlay-url-field:has(#streamerAlertPerformanceMode), .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-hype-control { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-layout-preview-strip { display: grid !important; grid-template-columns: repeat(5, minmax(0px, 1fr)) !important; gap: 8px !important; margin: 0px !important; padding: 10px !important; border: 1px solid rgba(129, 168, 255, 0.12) !important; border-radius: 16px !important; background: rgba(4, 8, 18, 0.36) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-layout-preview-choice { min-height: 70px !important; padding: 8px !important; border-radius: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordions { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertStudioTabMedia, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertStudioTabObs, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #alertStudioTabAdvanced { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion { border-radius: 16px !important; background: rgba(5, 10, 22, 0.55) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordion:not([open]) { opacity: 0.88; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack { width: min(460px, 82%) !important; min-height: 0px !important; aspect-ratio: 16 / 9 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-pack-art { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard { align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackPreview { width: min(172px, 100%) !important; height: 74px !important; max-height: 74px !important; aspect-ratio: 16 / 9 !important; justify-self: start !important; object-fit: contain !important; object-position: center center !important; padding: 5px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .recommended-alert-packs { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation { display: grid !important; grid-template-columns: 54px minmax(0px, 1fr) !important; grid-template-rows: auto auto !important; align-items: center !important; min-height: 84px !important; padding: 9px !important; column-gap: 10px !important; overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation img { grid-row: 1 / span 2 !important; width: 54px !important; height: 54px !important; max-height: 54px !important; padding: 4px !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation strong, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation span { min-width: 0px !important; overflow-wrap: anywhere !important; line-height: 1.18 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation strong { font-size: 0.86rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation span { font-size: 0.72rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-alert-frame { width: min(900px, 100% - 48px) !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack { width: min(900px, 94%) !important; min-height: 0px !important; aspect-ratio: auto !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-pack-art { width: 100% !important; height: auto !important; max-height: min(70vh, 360px) !important; padding: 0px !important; object-fit: contain !important; object-position: center center !important; filter: drop-shadow(rgba(0, 0, 0, 0.48) 0px 24px 54px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-pack-art.is-preview-hidden { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack[data-preview-asset-state="missing"]::after { content: attr(data-preview-placeholder); display: grid; place-items: center; width: min(520px, 100%); min-height: 148px; padding: 18px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 18px; background: radial-gradient(circle at 50% 10%, rgba(34, 211, 238, 0.12), transparent 42%), rgba(5, 10, 22, 0.74); color: rgba(226, 232, 240, 0.78); font-weight: 800; text-align: center; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-alert-copy, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack:not(.has-custom-visual) .preview-asset { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack.has-custom-visual .preview-pack-art { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack.has-custom-visual .preview-asset { position: static !important; width: min(900px, 100%) !important; height: auto !important; min-height: 0px !important; border: 0px !important; border-radius: 0px !important; background: transparent !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack.has-custom-visual .preview-asset img, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack.has-custom-visual .preview-asset video { display: block !important; width: 100% !important; height: auto !important; max-height: min(70vh, 360px) !important; object-fit: contain !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal { width: min(1040px, -32px + 100vw) !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important; align-items: stretch !important; gap: 12px !important; padding: 2px 6px 8px 0px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card { grid-template-rows: auto auto minmax(54px, auto) auto auto !important; align-content: start !important; min-height: 0px !important; padding: 12px !important; gap: 9px !important; overflow: hidden !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-thumb { width: 100% !important; height: 132px !important; min-height: 124px !important; max-height: 146px !important; aspect-ratio: 16 / 9 !important; object-fit: contain !important; object-position: center center !important; padding: 8px !important; border-radius: 12px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card p { min-height: 42px !important; font-size: 0.88rem !important; line-height: 1.38 !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card .overlay-link-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card .button-primary, .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card .button-secondary { min-width: 0px !important; width: 100% !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack:not(.has-custom-visual) { width: min(720px, 94%) !important; min-height: clamp(92px, 9vw, 138px) !important; aspect-ratio: 5.4 / 1 !important; border-radius: 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .preview-visual-stack:not(.has-custom-visual) .preview-pack-art { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; padding: clamp(8px, 1vw, 14px) !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack:not(.has-custom-visual) { width: min(980px, 96%) !important; min-height: 0px !important; aspect-ratio: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack:not(.has-custom-visual) .preview-pack-art { height: auto !important; max-height: min(70vh, 360px) !important; padding: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio img[data-alert-pack="cyber-pulse"][data-alert-type="subscription"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio img[data-alert-pack="cyber-pulse"][data-alert-type="raid"] { transform: translateY(7%) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackPreview { width: min(260px, 100%) !important; height: clamp(48px, 4.2vw, 68px) !important; max-height: 72px !important; aspect-ratio: 5.4 / 1 !important; padding: 4px !important; border-radius: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .recommended-alert-packs { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation { grid-template-columns: minmax(0px, 1fr) !important; grid-template-rows: auto auto auto !important; align-content: start !important; min-height: 112px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation img { grid-row: auto !important; width: 100% !important; height: 34px !important; max-height: 34px !important; padding: 3px !important; border-radius: 9px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation strong { margin-top: 2px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card { grid-template-rows: auto auto minmax(50px, auto) auto auto !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-thumb { height: clamp(50px, 5vw, 70px) !important; min-height: 50px !important; max-height: 74px !important; aspect-ratio: 5.4 / 1 !important; padding: 5px !important; background: radial-gradient(circle, rgba(34, 211, 238, 0.1), transparent 62%), rgba(3, 7, 18, 0.62) !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal { width: min(1080px, -44px + 100vw) !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 12px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card { grid-template-rows: auto auto minmax(40px, auto) auto auto !important; padding: 12px !important; cursor: pointer !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-card:focus-visible { outline: rgba(34, 211, 238, 0.78) solid 2px !important; outline-offset: 3px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-thumb { height: clamp(88px, 7.5vw, 120px) !important; min-height: 88px !important; max-height: 120px !important; aspect-ratio: 4 / 1 !important; padding: 6px !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackPreview { width: min(340px, 100%) !important; height: clamp(88px, 7vw, 118px) !important; max-height: 120px !important; aspect-ratio: 5.4 / 1 !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation img { height: clamp(82px, 6.5vw, 108px) !important; max-height: 110px !important; object-fit: contain !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-preview-image { width: min(90%, 900px) !important; height: auto !important; max-height: 320px !important; object-fit: contain !important; display: block !important; margin: 0px auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .live-overlay-preview[data-visual-mode="asset"] .preview-visual-stack:not(.has-custom-visual) .alert-preview-image { width: min(90%, 900px) !important; height: auto !important; max-height: 320px !important; object-fit: contain !important; object-position: center center !important; display: block !important; margin: 0px auto !important; padding: 0px !important; } .dashboard-page[data-product-page="dashboard"] .alert-pack-modal .alert-pack-thumb { height: clamp(90px, 7.5vw, 120px) !important; min-height: 90px !important; max-height: 120px !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-recommendation img { min-height: 70px !important; object-fit: contain !important; object-position: center center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hero-grid { grid-template-columns: minmax(520px, 1.35fr) minmax(340px, 0.9fr) !important; grid-template-areas: "preset controls" !important; align-items: start !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard { grid-area: preset !important; min-height: clamp(520px, 48vw, 720px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-quick-panel { grid-area: controls !important; min-height: clamp(520px, 48vw, 720px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .recommended-alert-packs { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-pack-browse-button { align-self: end !important; } @media (max-width: 1320px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-hero-grid { grid-template-columns: 1fr !important; grid-template-areas: "preset" "controls" !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-quick-panel { min-height: auto !important; } } @media (max-width: 760px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-primary-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-quick-control-grid, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-layout-preview-strip, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-studio-accordions { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #selectedAlertPackCard { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio .alert-selected-pack-copy { padding-right: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceAlertStudio #overlayPreviewPanel .live-overlay-preview { min-height: 360px !important; } } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-workspace-heading { margin-bottom: 10px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-review-command-card { padding: 14px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { grid-template-columns: minmax(420px, 1.25fr) minmax(340px, 0.95fr) minmax(300px, 0.78fr) !important; align-items: stretch !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-review-queue-column, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-chat-column, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-action-column { display: grid !important; gap: 12px !important; min-width: 0px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #modPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #chatPanel, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #actionPanel { height: min(680px, -230px + 100vh) !important; min-height: 500px !important; align-self: stretch !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #actionPanel { min-height: 500px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #policyPanel { display: none !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceAdvanced #policyPanel { display: grid !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewActionBlock { margin-top: 10px !important; padding: 12px !important; border: 1px solid rgba(34, 211, 238, 0.18) !important; border-radius: 14px !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.1), transparent 34%), rgba(3, 7, 18, 0.42) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewActionBlock h3 { margin: 0px 0px 4px !important; font-size: 0.95rem !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewActionBlock .smallActions, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem > .smallActions { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewActionBlock .btn, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewItem > .smallActions .btn { min-height: 36px !important; justify-content: center !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #jobsFeed .reviewItem { border-left: 4px solid rgba(34, 211, 238, 0.32) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #jobsFeed .status.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #jobsFeed .status.completed, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #jobsFeed .status.current { border-color: rgba(52, 211, 153, 0.36) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceTools .mod-v2-metrics { margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-workspace-grid { grid-template-columns: repeat(12, minmax(0px, 1fr)) !important; gap: clamp(12px, 1.1vw, 18px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid { grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: minmax(420px, 1.2fr) minmax(340px, 0.95fr) minmax(300px, 0.78fr) !important; gap: clamp(12px, 1.1vw, 18px) !important; align-items: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid > * { min-width: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid #actionPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid #chatPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid #jobsPanel { grid-column: auto !important; height: min(640px, -250px + 100vh) !important; min-height: 440px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid #jobsPanel { min-height: 440px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModOverviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModAnnouncementsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #streamModerationSetupPanel, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModModerationPolicyCard { grid-column: 1 / -1 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModToolsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModAdvancedCard { grid-column: span 6 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModOverviewCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModAnnouncementsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModToolsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModAdvancedCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModModerationPolicyCard { min-height: auto !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #moderationReview .dashboard-review-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #moderationReview .smallActions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #jobsFeed .reviewItem { border-left: 4px solid rgba(34, 211, 238, 0.28) !important; } @media (max-width: 1320px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod .creator-mod-focus-grid { grid-template-columns: 1fr !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModToolsCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #workspaceMod #creatorModAdvancedCard { grid-column: 1 / -1 !important; } } .dashboard-page[data-product-page="dev"][data-dashboard-role="dev"] .dev-hero .hero-avatar-wrap { display: flex !important; flex: 0 0 clamp(150px, 13vw, 180px) !important; width: clamp(150px, 13vw, 180px) !important; min-width: clamp(150px, 13vw, 180px) !important; align-items: center !important; justify-content: center !important; } .dashboard-page[data-product-page="dev"][data-dashboard-role="dev"] .dev-hero .hero-avatar-ring { display: grid !important; place-items: center !important; width: clamp(150px, 13vw, 180px) !important; height: clamp(150px, 13vw, 180px) !important; overflow: visible !important; border-radius: 999px !important; } .dashboard-page[data-product-page="dev"][data-dashboard-role="dev"] .dev-hero .hero-avatar { width: clamp(110px, 10vw, 140px) !important; height: clamp(110px, 10vw, 140px) !important; max-width: clamp(110px, 10vw, 140px) !important; max-height: clamp(110px, 10vw, 140px) !important; object-fit: contain !important; transform: none !important; } .hero h1, .login-hero h1, .quick-start-hero h1, .landing-hero h1, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero h1, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .hero h1 { line-height: 1.08 !important; letter-spacing: 0px !important; padding-bottom: 0.08em !important; } .dashboard-page .button-primary, .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .btn, .dashboard-page .nav-btn, .dashboard-page .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere !important; } @media (max-width: 700px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; width: 100% !important; max-width: 100% !important; min-width: 0px !important; gap: 6px !important; overflow: visible !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0px !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav .tester-feedback-button { width: 100% !important; min-width: 0px !important; justify-content: center !important; text-align: center !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace { min-height: auto !important; } } @media (max-width: 420px){.dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { grid-template-columns: 1fr !important; } } .quick-start-page .quick-start-card { min-height: clamp(400px, 48vh, 500px) !important; padding: clamp(18px, 2.5vw, 30px) !important; } .quick-start-page .quick-step { min-height: clamp(210px, 26vh, 300px) !important; } .quick-start-page .quick-step.active { align-content: start !important; gap: 12px !important; } .quick-start-page .quick-step h2 { font-size: clamp(1.45rem, 2.25vw, 2.4rem) !important; line-height: 1.12 !important; } .quick-start-page .quick-start-footer { margin-top: clamp(18px, 2.2vw, 26px) !important; } @media (max-width: 720px){.quick-start-page .quick-start-card { min-height: auto !important; } .quick-start-page .quick-step { min-height: auto !important; } } @media print{.pricing-page .pricing-shell, .pricing-page .quick-start-shell { display: block !important; width: 100% !important; max-width: none !important; padding: 0px !important; margin: 0px !important; } .pricing-page .quick-start-hero, .pricing-page .pricing-plan-card, .pricing-page .quick-start-card, .pricing-page .connection-summary-card, .pricing-page .pricing-table-wrap { break-inside: avoid !important; border: 1px solid rgb(203, 213, 225) !important; color: rgb(17, 24, 39) !important; background: rgb(255, 255, 255) !important; } .pricing-page .quick-start-hero { display: block !important; padding: 18pt !important; margin: 0px 0px 14pt !important; } .pricing-page .quick-start-actions, .pricing-page .pricing-atmosphere-preview, .pricing-page .streamer-action-feedback { display: none !important; } .pricing-page h1, .pricing-page h2, .pricing-page h3, .pricing-page strong, .pricing-page .pricing-price, .pricing-page .pricing-check, .pricing-page .pricing-check.strong, .pricing-page .pricing-muted, .pricing-page .muted, .pricing-page .hero-copy { color: rgb(17, 24, 39) !important; } .pricing-page .eyebrow, .pricing-page .card-label, .pricing-page .pricing-tier-kicker, .pricing-page .status { color: rgb(15, 118, 110) !important; } .pricing-page .pricing-plan-card > a, .pricing-page .button-primary, .pricing-page .button-secondary { border: 1px solid rgb(148, 163, 184) !important; color: rgb(17, 24, 39) !important; background: rgb(255, 255, 255) !important; padding: 7pt 9pt !important; } .pricing-page .pricing-audience-cards article, .pricing-page .pricing-highlight-grid article, .pricing-page .connection-summary-card { padding: 9pt !important; border: 1px solid rgb(203, 213, 225) !important; background: rgb(255, 255, 255) !important; } } @media print{body.dashboard-page.trust-page.pricing-page .quick-start-hero, body.dashboard-page.trust-page.pricing-page .pricing-plan-card, body.dashboard-page.trust-page.pricing-page .quick-start-card, body.dashboard-page.trust-page.pricing-page .connection-summary-card, body.dashboard-page.trust-page.pricing-page .pricing-table-wrap { box-shadow: none !important; background: rgb(255, 255, 255) !important; } body.dashboard-page.trust-page.pricing-page .quick-start-hero h1, body.dashboard-page.trust-page.pricing-page .quick-start-hero p, body.dashboard-page.trust-page.pricing-page .pricing-plan-card h2, body.dashboard-page.trust-page.pricing-page .pricing-plan-card p, body.dashboard-page.trust-page.pricing-page .pricing-feature-list, body.dashboard-page.trust-page.pricing-page .pricing-feature-list li, body.dashboard-page.trust-page.pricing-page .pricing-audience-card p, body.dashboard-page.trust-page.pricing-page .pricing-compare-card p, body.dashboard-page.trust-page.pricing-page .connection-summary-card p, body.dashboard-page.trust-page.pricing-page .pricing-table th, body.dashboard-page.trust-page.pricing-page .pricing-table td { color: rgb(17, 24, 39) !important; } body.dashboard-page.trust-page.pricing-page .pricing-feature-list li::before { background: rgb(15, 118, 110) !important; box-shadow: none !important; } } @media screen{.dashboard-page, .trust-page, .pricing-page { --tink-app-radius: 18px; --tink-app-radius-sm: 12px; --tink-app-gap: clamp(12px, 1.25vw, 20px); --tink-app-panel-pad: clamp(14px, 1.4vw, 22px); --tink-app-line: rgba(129, 168, 255, 0.18); --tink-app-line-strong: rgba(34, 211, 238, 0.28); --tink-app-surface: rgba(9, 18, 36, 0.82); --tink-app-surface-soft: rgba(7, 13, 28, 0.72); --tink-app-muted: #c7d3e8; --tink-app-shadow: 0 18px 46px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .dashboard-page .creator-workspace-shell, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-shell { gap: var(--tink-app-gap) !important; } .dashboard-page .creator-sidebar-nav, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-nav { gap: 6px !important; border-color: var(--tink-app-line) !important; border-radius: 22px !important; background: radial-gradient(circle at 18% 0%, rgba(255, 47, 216, 0.08), transparent 30%), linear-gradient(rgba(7, 13, 28, 0.96), rgba(4, 8, 18, 0.94)) !important; } .dashboard-page .creator-sidebar-brand, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-brand { margin-bottom: 8px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(129, 168, 255, 0.13) !important; } .dashboard-page .creator-sidebar-group-label, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-group-label { margin: 12px 6px 4px !important; color: rgba(199, 211, 232, 0.72) !important; font-size: 0.68rem !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .dashboard-page .creator-sidebar-link, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link { min-height: 38px !important; border-radius: var(--tink-app-radius-sm) !important; padding: 9px 10px !important; } .dashboard-page .creator-sidebar-link.active, .dashboard-page .creator-sidebar-link[aria-current="page"], .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-link[aria-current="page"] { border-color: rgba(255, 47, 216, 0.42) !important; background: linear-gradient(135deg, rgba(255, 47, 216, 0.22), rgba(34, 211, 238, 0.12)), rgba(10, 20, 42, 0.78) !important; } .dashboard-page .creator-workspace, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace, .trust-page .quick-start-card, .trust-page .connection-summary-card, .pricing-page .pricing-plan-card, .pricing-page .pricing-audience-card, .pricing-page .pricing-compare-card, .billing-page .quick-start-card, .account-page .quick-start-card, .support-page .quick-start-card { border-color: var(--tink-app-line) !important; border-radius: var(--tink-app-radius) !important; background: radial-gradient(circle at 16% 0%, rgba(34, 211, 238, 0.06), transparent 34%), linear-gradient(145deg, var(--tink-app-surface), rgba(6, 12, 26, 0.78)) !important; box-shadow: var(--tink-app-shadow) !important; } .dashboard-page .panel, .dashboard-page .card, .dashboard-page .metric, .dashboard-page .feedItem, .dashboard-page .reviewItem, .dashboard-page .section-command-card, .dashboard-page .streamer-action-card, .dashboard-page .connection-summary-card, .dashboard-page .overlay-link-card, .dashboard-page .platform-card, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .reviewActionBlock { border-color: var(--tink-app-line) !important; border-radius: var(--tink-app-radius-sm) !important; background: radial-gradient(circle at 14% 0%, rgba(139, 92, 246, 0.055), transparent 32%), linear-gradient(145deg, var(--tink-app-surface-soft), rgba(5, 10, 22, 0.76)) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 34px !important; } .dashboard-page .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading, .dashboard-page .panelHead, .dashboard-page .panel-heading, .trust-page .panelHead, .trust-page .panel-heading { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(129, 168, 255, 0.12) !important; } .dashboard-page .creator-workspace-heading h2, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading h2, .dashboard-page .panelHead h2, .trust-page .panelHead h2 { font-size: clamp(1.2rem, 1.55vw, 1.7rem) !important; line-height: 1.12 !important; } .dashboard-page .muted, .dashboard-page .subcopy, .dashboard-page .helper-copy, .trust-page .muted, .pricing-page .muted { color: var(--tink-app-muted) !important; } .dashboard-page .button-primary, .dashboard-page .primary-action, .trust-page .button-primary, .pricing-page .button-primary { min-height: 40px !important; border-radius: 12px !important; font-weight: 900 !important; } .dashboard-page .button-secondary, .dashboard-page .ghost-button, .dashboard-page .btn, .dashboard-page .nav-btn, .trust-page .button-secondary, .trust-page .ghost-button, .pricing-page .button-secondary { min-height: 38px !important; border-radius: 12px !important; border-color: rgba(129, 168, 255, 0.2) !important; background: rgba(7, 13, 28, 0.72) !important; font-weight: 850 !important; } .dashboard-page .ops-toolbar, .dashboard-page .hero-utility-menu-panel, .dashboard-page .full-control-setup-strip, .dashboard-page .live-ops-bar { border-color: var(--tink-app-line) !important; border-radius: var(--tink-app-radius) !important; background: linear-gradient(90deg, rgba(9, 23, 45, 0.82), rgba(10, 18, 38, 0.72)) !important; } .dashboard-page details.platform-inline-advanced, .dashboard-page details.alert-studio-accordion, .dashboard-page details.diagnostic-collapse, .dashboard-page .diagnostic-only, .dashboard-page pre { border-color: rgba(129, 168, 255, 0.13) !important; background: rgba(3, 8, 18, 0.54) !important; } .dashboard-page details.platform-inline-advanced > summary, .dashboard-page details.alert-studio-accordion > summary, .dashboard-page details.diagnostic-collapse > summary { color: rgba(224, 238, 255, 0.9) !important; font-weight: 900 !important; } .dashboard-page .danger-zone-panel, .dashboard-page [data-owner-dev-only][hidden] { display: none !important; } @media (max-width: 780px){.dashboard-page .creator-workspace-heading, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .mod-workspace-heading, .dashboard-page .panelHead, .dashboard-page .panel-heading { display: grid !important; } .dashboard-page .ops-toolbar-main, .dashboard-page .hero-switch-nav { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; } .dashboard-page .ops-toolbar-main > *, .dashboard-page .hero-switch-nav > * { width: 100% !important; justify-content: center !important; text-align: center !important; } } .dashboard-page .quick-start-shell, .dashboard-page .how-to-shell { width: min(1180px, -28px + 100vw) !important; padding-top: clamp(18px, 3vw, 34px) !important; padding-bottom: clamp(28px, 4vw, 56px) !important; } .dashboard-page .quick-start-hero, .dashboard-page .how-to-hero { border-color: var(--tink-app-line-strong) !important; border-radius: 22px !important; background: radial-gradient(circle at 14% 0%, rgba(255, 47, 216, 0.14), transparent 32%), radial-gradient(circle at 88% 6%, rgba(34, 211, 238, 0.12), transparent 34%), linear-gradient(135deg, rgba(13, 24, 48, 0.92), rgba(7, 13, 28, 0.86)) !important; box-shadow: rgba(0, 0, 0, 0.24) 0px 18px 48px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; } .dashboard-page .quick-start-hero h1, .dashboard-page .how-to-hero h1 { max-width: 860px !important; font-size: clamp(2rem, 4.4vw, 4rem) !important; line-height: 1.02 !important; letter-spacing: 0px !important; } .dashboard-page .quick-start-actions, .dashboard-page .how-to-actions, .dashboard-page .how-to-nav { gap: 8px !important; } .dashboard-page .connection-summary-grid, .dashboard-page .pricing-highlight-grid, .dashboard-page .how-to-grid { gap: var(--tink-app-gap) !important; } .dashboard-page .quick-start-card, .dashboard-page .connection-summary-card, .dashboard-page .how-to-card, .dashboard-page .how-to-panel, .dashboard-page .how-to-note, .dashboard-page .video-stage { border-color: var(--tink-app-line) !important; border-radius: var(--tink-app-radius) !important; background: radial-gradient(circle at 12% 0%, rgba(34, 211, 238, 0.055), transparent 34%), linear-gradient(145deg, var(--tink-app-surface), rgba(6, 12, 26, 0.78)) !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 38px !important; } .dashboard-page .connection-summary-card, .dashboard-page .how-to-card { padding: var(--tink-app-panel-pad) !important; } .dashboard-page .how-to-card { min-height: 0px !important; align-content: start !important; } .dashboard-page .how-to-card h2, .dashboard-page .connection-summary-card strong, .dashboard-page .quick-start-card h2 { line-height: 1.16 !important; overflow-wrap: anywhere !important; } .dashboard-page .video-stage { min-height: clamp(260px, 32vw, 360px) !important; } .dashboard-page .video-alert-art { object-fit: contain !important; background: rgba(4, 8, 20, 0.68) !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-review-layout { max-width: 100% !important; grid-template-columns: minmax(0px, 1.18fr) minmax(0px, 1fr) minmax(260px, 0.72fr) !important; overflow-x: hidden !important; } .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews .mod-live-action-column, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] #modWorkspaceReviews #actionPanel { max-width: 100% !important; } .dashboard-page .status-pill:not(.status-live):not(.status-offline), .dashboard-page .badge:not(.good):not(.warn):not(.bad):not(.active), .dashboard-page .pill, .dashboard-page .runtime-pill, .dashboard-page .hero-identity-chip, .dashboard-page .origin-chip, .landing-status-pills b, .alert-pack-feature-row span, .alert-pack-tags span, .trust-page .connection-summary-card > .status.good:not([id]), .pricing-page .pricing-plan-card > .status.good, .pricing-page .pricing-highlight-grid .status.good, .pricing-page .pricing-action-card .status.good { border-color: rgba(0, 229, 255, 0.28) !important; background: rgba(0, 229, 255, 0.09) !important; color: rgb(141, 239, 255) !important; box-shadow: none !important; } .dashboard-page .status.active, .dashboard-page .badge.active, .dashboard-page .tab.active, .dashboard-page .nav-btn.active, .dashboard-page .ghost-button.active, .dashboard-page .workspace-nav .ghost-button.active, .dashboard-page .studio-section-nav .ghost-button.active, .dashboard-page .segmented-control .ghost-button.active, .dashboard-page .alert-studio-tabs .ghost-button.active, .dashboard-page .alert-pack-card.active, .dashboard-page .alert-pack-recommendation.active, .dashboard-page .alert-layout-preview-choice.active, .dashboard-page .platform-setup-adapter-card.is-active, .dashboard-page .platform-setup-choice.is-active, .dashboard-page .platform-setup-choice-new.is-active, .dashboard-page .simple-setup-step.is-active, .dashboard-page .simple-step-result.active, .dashboard-page .platform-setup-flow-step.is-active { border-color: rgba(0, 229, 255, 0.42) !important; background: linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(255, 47, 216, 0.08)), rgba(6, 14, 28, 0.78) !important; color: rgb(174, 246, 255) !important; box-shadow: rgba(0, 229, 255, 0.1) 0px 0px 22px !important; } .dashboard-page .button-primary { background: linear-gradient(135deg, rgba(0, 229, 255, 0.26), rgba(255, 47, 216, 0.2)), rgba(8, 18, 30, 0.94) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .status.active, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.active { border-color: rgba(0, 229, 255, 0.42) !important; background: rgba(0, 229, 255, 0.12) !important; color: rgb(174, 246, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"][data-experience-mode="full"] .button-primary { background: linear-gradient(135deg, rgba(0, 229, 255, 0.24), rgba(255, 47, 216, 0.18)), rgba(8, 18, 30, 0.94) !important; } .dashboard-page[data-dashboard-role="streamer"] #actionPanel, .dashboard-page[data-dashboard-role="mod"] #actionPanel { border-top-color: rgba(0, 229, 255, 0.36) !important; } .dashboard-page .action-card.is-active { border-color: rgba(0, 229, 255, 0.36) !important; background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(255, 47, 216, 0.08)), rgba(6, 14, 28, 0.72) !important; } .dashboard-page .action-card.is-active .action-card-dot { background: rgba(0, 229, 255, 0.9) !important; box-shadow: rgba(0, 229, 255, 0.12) 0px 0px 0px 4px, rgba(0, 229, 255, 0.28) 0px 0px 18px !important; } .dashboard-page .status.good, .dashboard-page .status.status-good, .dashboard-page .status-live, .dashboard-page .badge.good, .dashboard-page .badge-green, .dashboard-page .live-ops-pill.is-good, .dashboard-page .live-ops-pill.is-ready, .dashboard-page .live-ops-pill.is-live, .dashboard-page .platform-setup-card-status.status-good, .dashboard-page .billing-status-card .status.good, .trust-page .status.good, .trust-page .status.active, .pricing-page .status.good { border-color: rgba(0, 229, 255, 0.3) !important; background: linear-gradient(rgba(0, 229, 255, 0.106), rgba(6, 13, 28, 0.72)), rgba(7, 13, 28, 0.72) !important; color: rgb(217, 251, 255) !important; box-shadow: rgba(0, 229, 255, 0.08) 0px 0px 16px !important; } .dashboard-page .status.good:not(:has(.dot))::before, .dashboard-page .status.status-good:not(:has(.dot))::before, .dashboard-page .status-live:not(:has(.dot))::before, .dashboard-page .badge.good:not(:has(.dot))::before, .dashboard-page .badge-green:not(:has(.dot))::before, .dashboard-page .live-ops-pill.is-good:not(:has(.dot))::before, .dashboard-page .live-ops-pill.is-ready:not(:has(.dot))::before, .dashboard-page .live-ops-pill.is-live:not(:has(.dot))::before, .dashboard-page .platform-setup-card-status.status-good:not(:has(.dot))::before, .trust-page .status.good:not(:has(.dot))::before { content: ""; display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; margin-right: 7px; border-radius: 999px; background: var(--ui-success, #41d69d) !important; box-shadow: rgba(65, 214, 157, 0.12) 0px 0px 0px 3px, rgba(65, 214, 157, 0.26) 0px 0px 10px !important; opacity: 1 !important; } .dashboard-page .status.good .dot, .dashboard-page .status.status-good .dot, .dashboard-page .status-live .dot, .dashboard-page .live-ops-pill.is-good .dot, .dashboard-page .live-ops-pill.is-ready .dot, .dashboard-page .live-ops-pill.is-live .dot, .trust-page .status.good .dot { background: var(--ui-success, #41d69d) !important; box-shadow: rgba(65, 214, 157, 0.12) 0px 0px 0px 3px, rgba(65, 214, 157, 0.26) 0px 0px 10px !important; } .dashboard-page .connection-summary-card.good, .dashboard-page .quick-start-check-item.good, .dashboard-page .setup-check.good, .dashboard-page .simple-step-result.good, .dashboard-page .platform-setup-adapter-card.good, .dashboard-page .platform-setup-card.good, .dashboard-page [data-status-state="ready"], .dashboard-page .live-health-card[data-status-state="ready"], .dashboard-page .connection-summary-card[data-status-state="ready"] { border-color: rgba(0, 229, 255, 0.22) !important; background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.067), transparent 34%), linear-gradient(145deg, rgba(9, 18, 36, 0.82), rgba(6, 12, 26, 0.76)) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 34px, rgba(0, 229, 255, 0.043) 0px 0px 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #launchStatusCards .connection-summary-card[data-status-state="ready"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #streamHealthCards .connection-summary-card[data-status-state="ready"], .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-health-card[data-status-state="ready"] { border-top-color: rgba(0, 229, 255, 0.26) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status-live, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-live, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card-status.status-good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .billing-status-card .status.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.status-good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status-live, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .badge.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .badge-green, .dashboard-page.trust-page .status.good, .dashboard-page.trust-page .badge.good, .dashboard-page.trust-page .badge-green { border-color: rgba(0, 229, 255, 0.34) !important; background: linear-gradient(rgba(0, 229, 255, 0.11), rgba(6, 13, 28, 0.76)), rgba(7, 13, 28, 0.76) !important; color: rgb(217, 251, 255) !important; box-shadow: rgba(0, 229, 255, 0.08) 0px 0px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.good:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status.status-good:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .status-live:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge.good:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .badge-green:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-good:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-ready:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-ops-pill.is-live:not(:has(.dot))::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card-status.status-good:not(:has(.dot))::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.good:not(:has(.dot))::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status.status-good:not(:has(.dot))::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .status-live:not(:has(.dot))::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .badge.good:not(:has(.dot))::before, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .badge-green:not(:has(.dot))::before, .dashboard-page.trust-page .status.good:not(:has(.dot))::before, .dashboard-page.trust-page .badge.good:not(:has(.dot))::before, .dashboard-page.trust-page .badge-green:not(:has(.dot))::before { background: var(--ui-success, #41d69d) !important; box-shadow: rgba(65, 214, 157, 0.12) 0px 0px 0px 3px, rgba(65, 214, 157, 0.26) 0px 0px 10px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .connection-summary-card.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .quick-start-check-item.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .setup-check.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .simple-step-result.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-adapter-card.good, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .platform-setup-card.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .connection-summary-card.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .quick-start-check-item.good, .dashboard-page[data-product-page="moderation"][data-dashboard-role="mod"] .setup-check.good { border-color: rgba(0, 229, 255, 0.22) !important; background: radial-gradient(circle at 12% 0%, rgba(0, 229, 255, 0.067), transparent 34%), linear-gradient(145deg, rgba(9, 18, 36, 0.82), rgba(6, 12, 26, 0.76)) !important; box-shadow: rgba(0, 0, 0, 0.18) 0px 14px 34px, rgba(0, 229, 255, 0.043) 0px 0px 20px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .shell.wrap { padding-top: clamp(10px, 1vw, 16px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) auto !important; align-items: center !important; gap: clamp(12px, 1.4vw, 20px) !important; padding: clamp(12px, 1.25vw, 18px) clamp(14px, 1.8vw, 24px) !important; border-color: rgba(0, 229, 255, 0.18) !important; background: radial-gradient(circle at 8% 28%, rgba(255, 47, 216, 0.1), transparent 30%), radial-gradient(circle at 82% 18%, rgba(0, 229, 255, 0.08), transparent 34%), linear-gradient(145deg, rgba(10, 17, 34, 0.9), rgba(5, 10, 22, 0.82)) !important; box-shadow: rgba(0, 0, 0, 0.22) 0px 14px 36px, rgba(0, 229, 255, 0.055) 0px 0px 22px !important; overflow: visible !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::before, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar::after { opacity: 0.11 !important; filter: blur(2px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap { width: clamp(74px, 6.8vw, 98px) !important; min-width: clamp(74px, 6.8vw, 98px) !important; height: clamp(74px, 6.8vw, 98px) !important; min-height: clamp(74px, 6.8vw, 98px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring { width: clamp(70px, 6.2vw, 90px) !important; height: clamp(70px, 6.2vw, 90px) !important; border-color: rgba(0, 229, 255, 0.28) !important; background: radial-gradient(circle at 50% 42%, rgba(255, 47, 216, 0.18), rgba(4, 9, 20, 0.74) 58%), rgba(5, 11, 24, 0.86) !important; box-shadow: rgba(255, 47, 216, 0.12) 0px 0px 18px, rgba(0, 229, 255, 0.08) 0px 0px 16px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar { width: clamp(58px, 5.2vw, 76px) !important; height: clamp(58px, 5.2vw, 76px) !important; max-height: 76px !important; filter: drop-shadow(rgba(255, 47, 216, 0.22) 0px 0px 8px) !important; animation: auto ease 0s 1 normal none running none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-main { gap: 8px !important; min-width: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .view-badge-row { gap: 6px !important; margin-bottom: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .status-pill { min-height: 24px !important; padding: 4px 9px !important; border-color: rgba(0, 229, 255, 0.22) !important; background: rgba(0, 229, 255, 0.075) !important; color: rgb(217, 251, 255) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .eyebrow { margin-bottom: 2px !important; color: rgba(217, 251, 255, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1 { font-size: clamp(2rem, 3.2vw, 3.35rem) !important; line-height: 0.98 !important; letter-spacing: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-copy { max-width: 680px !important; margin-top: 6px !important; font-size: clamp(0.92rem, 1vw, 1rem) !important; line-height: 1.42 !important; color: rgba(222, 232, 246, 0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-identity-row { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row { align-items: center !important; gap: 8px !important; margin-top: 2px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav { gap: 6px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav .nav-btn { min-height: 30px !important; padding: 6px 10px !important; border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(7, 13, 28, 0.58) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav .nav-btn.active { border-color: rgba(0, 229, 255, 0.38) !important; background: rgba(0, 229, 255, 0.1) !important; color: rgb(230, 253, 255) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .live-indicator { min-height: 28px !important; padding: 5px 9px !important; border-color: rgba(0, 229, 255, 0.2) !important; background: rgba(6, 13, 28, 0.66) !important; color: rgba(232, 240, 255, 0.86) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { align-self: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu > summary { min-height: 34px !important; padding: 7px 11px !important; border-color: rgba(0, 229, 255, 0.2) !important; background: rgba(7, 13, 28, 0.62) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip.readiness-strip { position: static !important; grid-template-columns: auto minmax(0px, 1fr) auto !important; gap: 10px !important; margin: 10px 0px 8px !important; padding: 10px 12px !important; border-color: rgba(0, 229, 255, 0.22) !important; background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(255, 47, 216, 0.055)), rgba(6, 12, 26, 0.78) !important; box-shadow: rgba(0, 0, 0, 0.16) 0px 12px 30px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip.readiness-strip.warn { border-color: rgba(245, 158, 11, 0.36) !important; background: linear-gradient(90deg, rgba(245, 158, 11, 0.1), rgba(6, 12, 26, 0.78)), rgba(6, 12, 26, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip.readiness-strip.bad { border-color: rgba(239, 68, 68, 0.4) !important; background: linear-gradient(90deg, rgba(239, 68, 68, 0.11), rgba(6, 12, 26, 0.78)), rgba(6, 12, 26, 0.78) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-copy strong { font-size: 0.94rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-copy p { font-size: 0.82rem !important; color: rgba(205, 216, 232, 0.76) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-actions { gap: 6px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-actions > * { min-height: 32px !important; padding: 7px 10px !important; white-space: nowrap !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar.live-ops-bar { justify-content: flex-start !important; gap: 6px !important; margin: 0px 0px 10px !important; padding: 0px !important; border: 0px !important; background: transparent !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar .live-ops-pill { min-height: 28px !important; padding: 5px 9px !important; border-color: rgba(0, 229, 255, 0.2) !important; background: rgba(7, 13, 28, 0.58) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar .live-ops-system-status > summary { min-height: 28px !important; padding: 5px 9px !important; border-radius: 999px !important; border: 1px solid rgba(0, 229, 255, 0.2) !important; background: rgba(7, 13, 28, 0.58) !important; color: rgba(217, 251, 255, 0.82) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-shell { margin-top: 4px !important; margin-bottom: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details > summary { padding: 10px 12px !important; border-color: rgba(255, 255, 255, 0.09) !important; background: rgba(7, 13, 28, 0.45) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details > summary span { font-size: 0.92rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .launch-status-details > summary small { font-size: 0.78rem !important; color: rgba(205, 216, 232, 0.68) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin-top: 2px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions > * { width: auto !important; min-height: 32px !important; padding: 7px 11px !important; border-radius: 10px !important; white-space: nowrap !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions .button-primary { box-shadow: rgba(255, 47, 216, 0.18) 0px 0px 18px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { min-height: 0px !important; padding-block: clamp(10px, 1vw, 14px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1 { font-size: clamp(1.75rem, 2.65vw, 2.65rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-copy { max-width: 58rem !important; margin-top: 4px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar > .hero-avatar-wrap { width: clamp(62px, 5.6vw, 82px) !important; min-width: clamp(62px, 5.6vw, 82px) !important; height: clamp(62px, 5.6vw, 82px) !important; min-height: clamp(62px, 5.6vw, 82px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-ring, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar-ring { width: clamp(60px, 5vw, 76px) !important; height: clamp(60px, 5vw, 76px) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-avatar { width: clamp(48px, 4.2vw, 62px) !important; height: clamp(48px, 4.2vw, 62px) !important; max-height: 62px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip.readiness-strip { display: grid !important; width: fit-content !important; max-width: min(100%, 980px) !important; grid-template-columns: auto minmax(220px, 1fr) auto !important; margin: 8px 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar.live-ops-bar { width: fit-content !important; max-width: 100% !important; flex-wrap: wrap !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar .live-ops-pill { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] main.shell > #liveOpsBar.live-ops-bar, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] main.shell > #setupValidationChecklistCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] main.shell > #readyToStreamValidationCard { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard { grid-column: 1 / -1 !important; min-height: 0px !important; padding: 0px !important; border-color: rgba(0, 229, 255, 0.14) !important; background: rgba(7, 13, 28, 0.52) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-details { display: block !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-details > summary { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 14px !important; cursor: pointer !important; list-style: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-details > summary::-webkit-details-marker { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-details > summary strong { display: block !important; font-size: 0.98rem !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-details > summary small { display: block !important; margin-top: 2px !important; color: rgba(203, 213, 225, 0.72) !important; font-size: 0.78rem !important; line-height: 1.35 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .home-stream-checks-body { display: grid !important; gap: 12px !important; padding: 0px 12px 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard .launch-status-shell { display: block !important; margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard #liveOpsBar.live-ops-bar { display: flex !important; width: auto !important; max-width: 100% !important; margin: 0px !important; padding: 8px !important; border: 1px solid rgba(0, 229, 255, 0.12) !important; border-radius: 12px !important; background: rgba(5, 10, 22, 0.46) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard .launch-status-details > summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard #setupValidationChecklistCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard #readyToStreamValidationCard { border-color: rgba(255, 255, 255, 0.08) !important; background: rgba(5, 10, 22, 0.52) !important; box-shadow: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard #setupValidationChecklistCard, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard #readyToStreamValidationCard { padding: 12px !important; margin: 0px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard .connection-summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 8px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #homeStreamChecksCard .connection-summary-card { min-height: 88px !important; padding: 10px !important; } @media (max-width: 920px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: auto minmax(0px, 1fr) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-links.actions { grid-column: 1 / -1 !important; justify-self: stretch !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-utility-menu > summary { width: 100% !important; justify-content: center !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip.readiness-strip { grid-template-columns: 1fr !important; align-items: start !important; width: 100% !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-actions { justify-content: flex-start !important; } } @media (max-width: 640px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { grid-template-columns: 1fr !important; text-align: left !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-avatar-wrap { width: 72px !important; min-width: 72px !important; height: 72px !important; min-height: 72px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-row, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar.live-ops-bar { align-items: stretch !important; flex-direction: column !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions > *, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-switch-nav.dashboard-look-nav .nav-btn, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar .live-ops-pill, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #liveOpsBar .live-ops-system-status > summary, .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #readinessStrip .readiness-actions > * { width: 100% !important; justify-content: center !important; text-align: center !important; } } @media (max-width: 640px){.dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar { gap: 8px !important; padding: 12px !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .view-badge-row { display: none !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar h1 { font-size: clamp(1.7rem, 9vw, 2.25rem) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-copy { font-size: 0.86rem !important; line-height: 1.35 !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 7px !important; width: 100% !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero-primary-actions > * { width: 100% !important; min-height: 34px !important; padding: 7px 8px !important; white-space: normal !important; } } @media (max-width: 780px){.dashboard-page .quick-start-shell, .dashboard-page .how-to-shell { width: min(100% - 20px, 1180px) !important; padding-top: 12px !important; } .dashboard-page .quick-start-hero, .dashboard-page .how-to-hero { grid-template-columns: 1fr !important; padding: 18px !important; } .dashboard-page .quick-start-actions, .dashboard-page .how-to-actions, .dashboard-page .how-to-nav { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; } .dashboard-page .quick-start-actions > *, .dashboard-page .how-to-actions > *, .dashboard-page .how-to-nav > * { width: 100% !important; justify-content: center !important; text-align: center !important; } } } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] .hero.topbar .hero-switch-row { display: none !important; visibility: hidden !important; width: 0px !important; height: 0px !important; min-height: 0px !important; overflow: hidden !important; } .obs-link-update-panel .helper-copy, .obs-link-update-panel small { color: rgba(254, 243, 199, 0.9); } .obs-link-update-panel .obs-helper-steps { margin: 8px 0px 10px; padding-left: 20px; } .obs-link-update-panel .obs-helper-steps li { margin: 4px 0px; color: rgba(255, 251, 235, 0.92); line-height: 1.45; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="connected"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="connected"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="connected"] { border-color: rgba(34, 211, 238, 0.48) !important; color: rgb(174, 246, 255) !important; background: rgba(8, 145, 178, 0.14) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="ready"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="ready"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="ready"] { border-color: rgba(124, 255, 209, 0.44) !important; color: rgb(157, 255, 218) !important; background: rgba(16, 185, 129, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="in-progress"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="in-progress"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="in-progress"] { border-color: rgba(0, 229, 255, 0.36) !important; color: rgb(174, 246, 255) !important; background: rgba(0, 229, 255, 0.09) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="needs-attention"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="needs-attention"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="needs-attention"] { border-color: rgba(251, 191, 36, 0.5) !important; color: rgb(253, 230, 138) !important; background: rgba(245, 158, 11, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="error"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="error"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="error"] { border-color: rgba(248, 113, 113, 0.52) !important; color: rgb(254, 202, 202) !important; background: rgba(239, 68, 68, 0.12) !important; } .dashboard-page[data-product-page="dashboard"][data-dashboard-role="streamer"] #creatorWorkspaceShell :is(.status, .badge)[data-status-state="disabled"], .dashboard-page[data-dashboard-role="mod"] :is(.status, .badge)[data-status-state="disabled"], .dashboard-page:is(.account-page, .billing-page) :is(.status, .badge)[data-status-state="disabled"] { border-color: rgba(148, 163, 184, 0.24) !important; color: rgb(174, 185, 209) !important; background: rgba(71, 85, 105, 0.12) !important; }