#streamforge-app,
#streamforge-app::before,
#streamforge-app::after,
#streamforge-app *,
#streamforge-app *::before,
#streamforge-app *::after {
box-sizing: border-box;
}
#streamforge-app { --sf-portal-bg: #0b0c0e;
--sf-portal-surface: #111214;
--sf-portal-surface-2: #191b1f;
--sf-portal-surface-3: #22252a; --sf-portal-text: #ffffff;
--sf-portal-text-muted: #9ca0a8;
--sf-portal-text-dim: #6e737c; --sf-portal-border: rgba(255, 255, 255, 0.10);
--sf-portal-border-strong: rgba(255, 255, 255, 0.16);
--sf-portal-accent: #d71920;
--sf-portal-accent-hover: #b0131b;
--sf-portal-success: #2fbf71;
--sf-portal-warning: #e5a323;
--sf-portal-danger: #d71920; --sf-portal-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--sf-portal-radius: 12px;
--sf-portal-radius-sm: 8px;
--sf-portal-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
--sf-portal-focus: 0 0 0 2px rgba(215, 25, 32, 0.45); background: var(--sf-portal-bg);
color: var(--sf-portal-text);
font-family: var(--sf-portal-font);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} #streamforge-app,
#streamforge-app .sf-public-wrap,
#streamforge-app .sf-guest-shell,
#streamforge-app .sf-viewer-shell,
#streamforge-app .sf-app-shell,
#streamforge-app .sf-main,
#streamforge-app .sf-page {
background: var(--sf-portal-bg);
color: var(--sf-portal-text);
}
#streamforge-app .sf-public-wrap,
#streamforge-app .sf-guest-shell,
#streamforge-app .sf-viewer-shell,
#streamforge-app .sf-app-shell {
min-height: 100vh;
} #streamforge-app h1,
#streamforge-app h2,
#streamforge-app h3,
#streamforge-app h4,
#streamforge-app h5,
#streamforge-app h6,
#streamforge-app p,
#streamforge-app li,
#streamforge-app dt,
#streamforge-app dd,
#streamforge-app label,
#streamforge-app legend,
#streamforge-app figcaption {
color: var(--sf-portal-text);
}
#streamforge-app h1,
#streamforge-app h2,
#streamforge-app h3,
#streamforge-app h4,
#streamforge-app h5,
#streamforge-app h6 {
font-weight: 600;
line-height: 1.2;
margin: 0 0 0.6em;
}
#streamforge-app p,
#streamforge-app ul,
#streamforge-app ol,
#streamforge-app dl {
margin: 0 0 1em;
}
#streamforge-app .sf-text-muted,
#streamforge-app .sf-muted,
#streamforge-app .sf-dim {
color: var(--sf-portal-text-muted);
} #streamforge-app a,
#streamforge-app a:link,
#streamforge-app a:visited {
color: var(--sf-portal-text);
text-decoration: underline;
text-underline-offset: 2px;
}
#streamforge-app a:hover,
#streamforge-app a:focus {
color: var(--sf-portal-accent);
}
#streamforge-app a.sf-button,
#streamforge-app a.sf-button:hover,
#streamforge-app a.sf-button:focus {
text-decoration: none;
} #streamforge-app .sf-button,
#streamforge-app a.sf-button,
#streamforge-app button.sf-button,
#streamforge-app input[type="submit"].sf-button,
#streamforge-app input[type="button"].sf-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 16px;
border: 0;
border-radius: var(--sf-portal-radius-sm);
font-family: var(--sf-portal-font);
font-weight: 500;
font-size: 14px;
line-height: 1.2;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
background: var(--sf-portal-surface-2);
color: var(--sf-portal-text);
}
#streamforge-app .sf-button:hover,
#streamforge-app .sf-button:focus {
background: var(--sf-portal-surface-3);
color: var(--sf-portal-text);
}
#streamforge-app .sf-button--primary,
#streamforge-app .sf-button-primary {
background: var(--sf-portal-accent);
color: #ffffff;
}
#streamforge-app .sf-button--primary:hover,
#streamforge-app .sf-button--primary:focus,
#streamforge-app .sf-button-primary:hover,
#streamforge-app .sf-button-primary:focus {
background: var(--sf-portal-accent-hover);
color: #ffffff;
}
#streamforge-app .sf-button--secondary,
#streamforge-app .sf-button-secondary {
background: var(--sf-portal-surface-2);
color: var(--sf-portal-text);
}
#streamforge-app .sf-button--tertiary,
#streamforge-app .sf-button-tertiary {
background: transparent;
color: var(--sf-portal-text);
}
#streamforge-app .sf-button--tertiary:hover,
#streamforge-app .sf-button--tertiary:focus {
background: rgba(255, 255, 255, 0.06);
}
#streamforge-app .sf-button--small,
#streamforge-app .sf-button-small {
padding: 6px 12px;
font-size: 13px;
}
#streamforge-app .sf-button:disabled,
#streamforge-app .sf-button--disabled,
#streamforge-app .sf-button[disabled] {
opacity: 0.5;
cursor: not-allowed;
} #streamforge-app input,
#streamforge-app select,
#streamforge-app textarea,
#streamforge-app .sf-input,
#streamforge-app .sf-select,
#streamforge-app .sf-textarea {
width: 100%;
max-width: 100%;
padding: 10px 14px;
border: 1px solid var(--sf-portal-border-strong);
border-radius: var(--sf-portal-radius-sm);
background: var(--sf-portal-surface);
color: var(--sf-portal-text);
font-family: var(--sf-portal-font);
font-size: 14px;
line-height: 1.4;
transition: border-color 0.15s, box-shadow 0.15s;
}
#streamforge-app input::placeholder,
#streamforge-app textarea::placeholder {
color: var(--sf-portal-text-dim);
opacity: 1;
}
#streamforge-app input:focus,
#streamforge-app select:focus,
#streamforge-app textarea:focus,
#streamforge-app .sf-input:focus,
#streamforge-app .sf-select:focus,
#streamforge-app .sf-textarea:focus {
outline: none;
border-color: var(--sf-portal-accent);
box-shadow: var(--sf-portal-focus);
}
#streamforge-app input[type="checkbox"],
#streamforge-app input[type="radio"] {
width: auto;
min-width: 18px;
min-height: 18px;
accent-color: var(--sf-portal-accent);
}
#streamforge-app label,
#streamforge-app .sf-label {
display: inline-block;
margin-bottom: 6px;
font-weight: 500;
color: var(--sf-portal-text);
}
#streamforge-app fieldset,
#streamforge-app .sf-fieldset {
border: 1px solid var(--sf-portal-border);
border-radius: var(--sf-portal-radius);
padding: 16px;
margin: 0 0 1em;
} #streamforge-app .sf-card,
#streamforge-app .sf-panel,
#streamforge-app .sf-surface,
#streamforge-app .sf-empty,
#streamforge-app .sf-stat,
#streamforge-app .sf-public-empty,
#streamforge-app .sf-event-card,
#streamforge-app .sf-broadcast-card {
background: var(--sf-portal-surface);
border: 1px solid var(--sf-portal-border);
border-radius: var(--sf-portal-radius);
color: var(--sf-portal-text);
box-shadow: var(--sf-portal-shadow);
}
#streamforge-app .sf-card {
padding: 24px;
}
#streamforge-app .sf-card h1,
#streamforge-app .sf-card h2,
#streamforge-app .sf-card h3,
#streamforge-app .sf-card h4,
#streamforge-app .sf-card h5,
#streamforge-app .sf-card h6,
#streamforge-app .sf-card p,
#streamforge-app .sf-card li {
color: var(--sf-portal-text);
}
#streamforge-app .sf-card a,
#streamforge-app .sf-card a:link,
#streamforge-app .sf-card a:visited {
color: var(--sf-portal-text);
}
#streamforge-app .sf-card a:hover,
#streamforge-app .sf-card a:focus {
color: var(--sf-portal-accent);
} #streamforge-app table,
#streamforge-app .sf-table {
width: 100%;
border-collapse: collapse;
background: transparent;
color: var(--sf-portal-text);
}
#streamforge-app th,
#streamforge-app td,
#streamforge-app .sf-table th,
#streamforge-app .sf-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--sf-portal-border);
text-align: left;
vertical-align: top;
color: var(--sf-portal-text);
}
#streamforge-app thead th,
#streamforge-app .sf-table thead th {
background: var(--sf-portal-surface-2);
font-weight: 600;
border-bottom: 1px solid var(--sf-portal-border-strong);
}
#streamforge-app tbody tr:hover,
#streamforge-app .sf-table tbody tr:hover {
background: rgba(255, 255, 255, 0.03);
} #streamforge-app .sf-admin-subnav,
#streamforge-app .sf-topbar,
#streamforge-app .sf-guest-topbar,
#streamforge-app .sf-viewer-topbar,
#streamforge-app .sf-sidebar,
#streamforge-app .sf-mobile-nav,
#streamforge-app .sf-nav-section,
#streamforge-app .sf-nav-section__label {
background: transparent;
color: var(--sf-portal-text);
}
#streamforge-app .sf-admin-subnav {
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid var(--sf-portal-border);
}
#streamforge-app .sf-sidebar {
background: var(--sf-portal-surface);
border-right: 1px solid var(--sf-portal-border);
}
#streamforge-app .sf-nav-section__label,
#streamforge-app .sf-nav a,
#streamforge-app .sf-mobile-nav a {
color: var(--sf-portal-text-muted);
}
#streamforge-app .sf-nav a:hover,
#streamforge-app .sf-nav a:focus,
#streamforge-app .sf-mobile-nav a:hover,
#streamforge-app .sf-mobile-nav a:focus,
#streamforge-app .sf-nav a.is-active {
color: var(--sf-portal-text);
background: rgba(255, 255, 255, 0.05);
} #streamforge-app .sf-badge,
#streamforge-app .sf-status,
#streamforge-app .sf-alert {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 500;
background: var(--sf-portal-surface-2);
color: var(--sf-portal-text);
}
#streamforge-app .sf-badge--success,
#streamforge-app .sf-status--success {
background: rgba(47, 191, 113, 0.15);
color: var(--sf-portal-success);
}
#streamforge-app .sf-badge--warning,
#streamforge-app .sf-status--warning {
background: rgba(229, 163, 35, 0.15);
color: var(--sf-portal-warning);
}
#streamforge-app .sf-badge--danger,
#streamforge-app .sf-status--danger,
#streamforge-app .sf-alert--danger {
background: rgba(215, 25, 32, 0.15);
color: var(--sf-portal-danger);
} #streamforge-app .sf-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} #streamforge-app img,
#streamforge-app video,
#streamforge-app svg {
max-width: 100%;
height: auto;
}
#streamforge-app pre,
#streamforge-app code {
font-family: Menlo, Consolas, monospace;
background: var(--sf-portal-surface-2);
color: var(--sf-portal-text);
} body.sf-portal-page {
background: var(--sf-portal-bg, #0b0c0e) !important;
}
body.sf-portal-page #page,
body.sf-portal-page .site,
body.sf-portal-page #content,
body.sf-portal-page .site-content,
body.sf-portal-page .content-area,
body.sf-portal-page .site-main,
body.sf-portal-page .entry,
body.sf-portal-page .entry-content,
body.sf-portal-page article,
body.sf-portal-page .post,
body.sf-portal-page .page {
background: transparent !important;
}
#streamforge-app {
width: 80%;
max-width: none;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 1200px) {
#streamforge-app {
width: 90%;
}
}
@media (max-width: 768px) {
#streamforge-app {
width: 100%;
padding-left: 16px;
padding-right: 16px;
}
} .sf-powered-by {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding: 28px 16px 22px;
color: var(--sf-portal-text-muted);
opacity: 0.8;
}
.sf-powered-by__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.sf-powered-by__logo {
display: block;
max-height: 28px;
width: auto;
max-width: 100%;
}
.sf-powered-by__fallback {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sf-portal-text);
}