:root { color-scheme: dark; --bg: #05060d; --panel: rgba(13, 16, 28, .78); --text: #f8fbff; --muted: #9aa6bd; --line: rgba(255,255,255,.12); --cyan: #00e5ff; --violet: #a855f7; --amber: #ffb020; --green: #34d399; --shadow: 0 24px 90px rgba(0,0,0,.45); }
* { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 10%, rgba(0,229,255,.22), transparent 26rem), radial-gradient(circle at 85% 8%, rgba(168,85,247,.24), transparent 28rem), radial-gradient(circle at 72% 80%, rgba(255,176,32,.12), transparent 26rem), linear-gradient(180deg,#080a13,#04050a 55%,#070814); } a { color: inherit; text-decoration: none; }
.app-shell { position: relative; z-index: 1; min-height: 100vh; } .surface-frame { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; padding: 110px 0 64px; } .site-footer { position: relative; z-index: 1; width: min(1180px, calc(100vw - 32px)); margin: -32px auto 34px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; color: var(--muted); font-size: .9rem; } .site-footer a { color: var(--text); font-weight: 800; } .site-footer a:hover { color: var(--cyan); } .glass-nav { position: fixed; z-index: 20; top: 16px; left: 50%; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: rgba(8,10,18,.72); backdrop-filter: blur(22px); box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 210px; } .brand-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: linear-gradient(135deg,var(--cyan),var(--violet)); color: #03050a; font-weight: 900; letter-spacing: -1px; } .brand strong, .brand small { display: block; } .brand small { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .nav-links a { color: var(--muted); padding: 10px 12px; border-radius: 999px; font-size: .92rem; transition: .2s ease; } .nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.1); } .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line); font-weight: 800; } .nav-cta { padding: 11px 16px; background: var(--text); color: #05060d; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); gap: 28px; align-items: center; min-height: 680px; } .eyebrow { color: var(--cyan); text-transform: uppercase; letter-spacing: .18em; font-weight: 900; font-size: .78rem; margin: 0 0 14px; } h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); line-height: .9; letter-spacing: -.07em; margin-bottom: 22px; } h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.02; letter-spacing: -.05em; } .hero-subtitle, .page-hero p, .section-heading p, .surface-band p { color: var(--muted); font-size: 1.12rem; line-height: 1.75; max-width: 760px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; } .button { min-height: 48px; padding: 0 20px; } .button.small { min-height: 36px; padding: 0 12px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--text); cursor: pointer; } .button.small:disabled { opacity: .55; cursor: wait; } .button.primary, .button.full { border: 0; background: linear-gradient(135deg,var(--cyan),var(--violet)); color: #02040a; box-shadow: 0 16px 50px rgba(0,229,255,.16); } .button.ghost { background: rgba(255,255,255,.06); color: var(--text); } .button.full { width: 100%; margin-top: 18px; }
.trust-strip { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); } .trust-strip span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.04); }
.cinema-card, .plan-card, .metric-card, .surface-band, .loading-card { border: 1px solid var(--line); border-radius: 32px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); } .cinema-card { padding: 24px; } .hero-player { min-height: 560px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); } .player-topline { display: flex; align-items: center; gap: 10px; color: var(--muted); margin-bottom: 18px; } .live-dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; box-shadow: 0 0 24px var(--green); }
.poster-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .poster { min-height: 220px; border-radius: 26px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: white; position: relative; overflow: hidden; } .poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.64)); } .poster > * { position: relative; } .poster span, .poster small { color: rgba(255,255,255,.78); } .poster strong { font-size: 1.4rem; margin: 8px 0; }
.section-heading, .page-hero { margin: 54px 0 22px; } .page-hero.compact { max-width: 920px; margin-top: 16px; } .page-hero h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); } .pricing-grid, .metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .plan-card { padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); } .plan-card h3 { font-size: 2.4rem; letter-spacing: -.05em; margin-bottom: 6px; } .plan-card h3 span { font-size: 1rem; color: var(--muted); letter-spacing: 0; } .plan-card p, .plan-card li { color: var(--muted); } .plan-name { color: var(--text)!important; font-weight: 900; } .plan-card ul { padding-left: 20px; min-height: 132px; } .accent-cyan { border-color: rgba(0,229,255,.38); } .accent-violet { border-color: rgba(168,85,247,.42); } .accent-amber { border-color: rgba(255,176,32,.42); }
.surface-band { margin-top: 28px; padding: 26px; display: flex; gap: 24px; align-items: center; justify-content: space-between; } .surface-links { display: grid; gap: 10px; min-width: 260px; } .surface-links a { padding: 14px 16px; background: rgba(255,255,255,.08); border-radius: 16px; color: var(--text); } .legal-document { max-width: 920px; margin: 0 auto 28px; border-radius: 8px; } .legal-document p { color: var(--muted); line-height: 1.75; } .legal-document h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: 0; } .legal-document h3 { margin: 28px 0 8px; font-size: 1.05rem; letter-spacing: 0; } .legal-document .section-title-row { align-items: start; }
.split-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .split-grid.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); } .stack-list { display: grid; gap: 12px; } .row-card, .line-card { display: flex; justify-content: space-between; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.045); } .row-card div, .line-card div { display: grid; gap: 6px; } .row-card span, .line-card span, .line-card small, .provider-grid small, .resource-grid small { color: var(--muted); } code { color: var(--cyan); background: rgba(0,229,255,.08); border: 1px solid rgba(0,229,255,.18); padding: 3px 8px; border-radius: 8px; }
.checkout-panel { margin-top: 18px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: center; } .provider-grid, .resource-grid { display: grid; gap: 12px; } .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .provider-grid article, .resource-grid article { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.045); }
.metric-card { padding: 20px; } .metric-card span, .metric-card small { display: block; color: var(--muted); } .metric-card strong { display: block; font-size: 2rem; letter-spacing: -.05em; margin: 10px 0; } .tone-good { border-color: rgba(52,211,153,.36); } .tone-warn { border-color: rgba(255,176,32,.44); }
.table-like { display: grid; gap: 8px; } .table-like > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); color: var(--muted); } .table-like strong, .table-like span:first-child { color: var(--text); } .timeline { display: grid; gap: 12px; } .timeline article { display: grid; gap: 6px; padding-left: 14px; border-left: 3px solid var(--cyan); } .timeline time, .timeline span { color: var(--muted); }
.loading-card { padding: 28px; color: var(--muted); } #blazor-error-ui { display: none; }
.admin-portal-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.admin-sidebar { position: sticky; top: 104px; display: grid; gap: 22px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: rgba(8,10,18,.84); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.admin-sidebar h1 { font-size: 1.7rem; line-height: 1.05; letter-spacing: 0; margin-bottom: 12px; }
.admin-sidebar p { color: var(--muted); line-height: 1.55; }
.admin-nav { display: grid; gap: 6px; }
.admin-nav a { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 6px; color: var(--muted); border: 1px solid transparent; background: rgba(255,255,255,.025); }
.admin-nav a:hover, .admin-nav a.active { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.08); }
.admin-sidebar-footer { display: grid; gap: 8px; color: var(--muted); font-size: .85rem; }
.admin-sidebar-footer button { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); font-weight: 800; cursor: pointer; }
.admin-workspace { min-width: 0; display: grid; gap: 18px; }
.admin-page-header { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: rgba(13,16,28,.7); }
.admin-page-header h2 { max-width: 840px; margin-bottom: 12px; }
.admin-page-header p:last-child { color: var(--muted); max-width: 820px; line-height: 1.6; margin-bottom: 0; }
.admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: 18px; }
.admin-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.analytics-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-title-row h3, .cinema-card h3 { margin-bottom: 0; font-size: 1.15rem; letter-spacing: 0; }
.section-title-row a, .status-pill { color: var(--text); font-weight: 800; font-size: .85rem; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.06); }
.admin-table > div { grid-template-columns: 1fr 1.4fr .9fr .9fr .9fr; }
.plan-catalog-table > div { grid-template-columns: .8fr 1.05fr .75fr .55fr .75fr minmax(150px, 1fr) .8fr minmax(220px, 1.4fr) minmax(170px, 1fr) .6fr; }
.subscription-table > div { grid-template-columns: 1fr 1.25fr .7fr .7fr .85fr minmax(360px, auto); }
.customer-account-table > div { grid-template-columns: 1.15fr .9fr .55fr .55fr .7fr .45fr .55fr .55fr minmax(180px, 1fr) .7fr .75fr minmax(300px, auto); }
.customer-detail-subscription-table > div,
.customer-detail-line-table > div,
.customer-detail-billing-table > div { grid-template-columns: 1.1fr .7fr .75fr .8fr minmax(180px, 1fr); }
.payout-table > div { grid-template-columns: 1fr .8fr .85fr .75fr minmax(180px, 1.1fr) minmax(260px, auto); }
.payout-review-table > div { grid-template-columns: .9fr .75fr .75fr .6fr .65fr minmax(220px, 1.2fr) .85fr .85fr .75fr minmax(150px, .8fr) minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(260px, auto); }
.affiliate-account-table > div { grid-template-columns: .8fr 1.15fr .95fr .7fr .65fr .6fr minmax(300px, auto) minmax(280px, auto); }
.playlist-table > div { grid-template-columns: 1.1fr .65fr minmax(280px, 2fr) .75fr .7fr; }
.content-source-table > div { grid-template-columns: 1fr .85fr .7fr minmax(230px, 1.3fr) minmax(260px, 1.4fr); }
.billing-invoice-table > div { grid-template-columns: 1.25fr .65fr .7fr .7fr .8fr .85fr minmax(130px, auto); }
.billing-payment-table > div { grid-template-columns: 1fr 1.1fr .65fr .7fr .7fr minmax(200px, 1fr) minmax(390px, auto); }
.payment-test-table > div { grid-template-columns: .65fr 1fr .75fr minmax(220px, 1.2fr) minmax(260px, 1.3fr); }
.customer-billing-table > div { grid-template-columns: .9fr .7fr .7fr .8fr .85fr .85fr minmax(130px, auto); }
.customer-payment-table > div { grid-template-columns: 1fr .55fr .65fr .75fr minmax(190px, 1fr) minmax(360px, auto); }
.customer-payment-table input { min-height: 36px; min-width: min(280px, 36vw); border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); padding: 0 10px; font: inherit; }
.line-operations-table > div { grid-template-columns: 1fr 1fr .85fr .75fr .85fr .85fr .8fr .75fr .55fr .75fr .8fr minmax(220px, 1.1fr) minmax(190px, 1fr) minmax(160px, auto); }
.admin-line-control-table > div { grid-template-columns: minmax(180px, .9fr) minmax(190px, .95fr) minmax(190px, .95fr) minmax(190px, .95fr) minmax(210px, auto); }
.playlist-source-table > div { grid-template-columns: minmax(180px, 1fr) minmax(120px, .55fr) minmax(140px, .7fr) minmax(90px, .35fr) minmax(130px, .55fr) minmax(170px, .75fr) repeat(2, minmax(82px, auto)); }
.playlist-source-form-grid { grid-template-columns: minmax(180px, .85fr) minmax(260px, 1.25fr) repeat(2, minmax(170px, .75fr)); margin: 18px 0 0; }
.admin-line-control-table small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.playlist-source-table small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.source-data-grid { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(5,7,14,.36); }
.source-data-grid-header,
.source-data-grid-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(92px, .5fr) minmax(130px, .65fr) minmax(80px, .35fr) minmax(180px, .95fr) minmax(170px, auto); gap: 12px; align-items: center; padding: 12px 14px; }
.source-data-grid-header { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.045); }
.source-data-grid-row { color: var(--muted); border-bottom: 1px solid var(--line); }
.source-data-grid-row:last-child { border-bottom: 0; }
.source-data-grid-row.selected { background: rgba(0,229,255,.07); box-shadow: inset 3px 0 0 var(--cyan); }
.source-data-grid-row strong,
.source-data-grid-row small { display: block; }
.source-data-grid-row strong { color: var(--text); }
.source-data-grid-row small { margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.source-row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.source-editor-shell { margin-top: 18px; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.source-type-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: rgba(3,5,10,.5); }
.source-type-tabs button { min-height: 68px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.source-type-tabs button:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.source-type-tabs button strong,
.source-type-tabs button span { display: block; }
.source-type-tabs button strong { color: var(--text); font-size: .95rem; }
.source-type-tabs button span { margin-top: 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.source-type-tabs button.active { border-color: rgba(236,72,153,.68); background: rgba(168,85,247,.24); color: var(--text); box-shadow: inset 0 0 0 1px rgba(236,72,153,.26), 0 12px 26px rgba(168,85,247,.12); transform: translateY(-1px); }
.source-mode-summary { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.045); }
.source-mode-summary span { color: var(--muted); line-height: 1.5; }
.xtream-credentials-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(236,72,153,.35); border-radius: 6px; background: rgba(168,85,247,.08); }
.xtream-credentials-panel > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.xtream-credentials-panel strong { color: var(--text); }
.source-test-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid var(--line); }
.source-test-result { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.045); }
.source-test-result strong { text-transform: capitalize; }
.source-test-result span,
.source-test-result small { color: var(--muted); }
.source-test-result.passed { border-color: rgba(52,211,153,.38); background: rgba(52,211,153,.08); }
.source-test-result.failed { border-color: rgba(255,107,107,.42); background: rgba(255,107,107,.08); }
.admin-line-filter-grid { grid-template-columns: minmax(220px, 1fr) minmax(150px, .45fr) minmax(150px, .45fr) auto; }
.line-operations-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.line-attention-row { border-color: rgba(255,176,32,.42)!important; background: rgba(255,176,32,.08)!important; }
.admin-line-policy-card span, .admin-line-policy-card small { overflow-wrap: anywhere; }
.worker-lease-table > div { grid-template-columns: minmax(140px, 1fr) minmax(150px, 1fr) .65fr .85fr .7fr .85fr .85fr minmax(240px, 1.3fr); }
.edge-route-table > div { grid-template-columns: .55fr minmax(170px, 1fr) minmax(210px, 1.15fr) minmax(240px, 1.25fr) .75fr minmax(240px, 1.25fr); }
.security-control-table > div { grid-template-columns: minmax(160px, 1fr) .55fr .65fr minmax(240px, 1.25fr) minmax(260px, 1.35fr) minmax(240px, 1.2fr); }
.policy-document-table { margin-bottom: 16px; }
.policy-document-table > div { grid-template-columns: 1fr .75fr .8fr minmax(150px, .9fr) minmax(260px, 1.4fr); }
.customer-line-status-table > div { grid-template-columns: 1fr .7fr .8fr .6fr .8fr minmax(210px, 1fr) minmax(190px, .9fr) minmax(230px, 1fr) minmax(145px, auto); }
.customer-consent-table > div { grid-template-columns: 1.1fr .8fr .75fr .95fr; }
.support-ticket-table > div { grid-template-columns: 1.15fr 1.2fr .7fr .65fr .7fr .75fr .8fr .9fr .9fr minmax(210px, 1fr) .95fr minmax(310px, auto); }
.customer-support-table > div { grid-template-columns: 1.2fr .7fr .65fr .7fr .85fr .9fr .85fr auto; }
.analytics-series-table > div,
.analytics-segment-table > div { grid-template-columns: 1fr .7fr .7fr; }
.analytics-action-table > div { grid-template-columns: .8fr .55fr minmax(240px, 1.2fr) minmax(260px, 1.3fr); }
.tuliprox-readiness-table > div { grid-template-columns: .85fr 1fr .55fr minmax(260px, 1.4fr) minmax(240px, 1.2fr); }
.audit-log-table > div { grid-template-columns: .8fr .95fr 1fr .7fr 1fr .6fr minmax(360px, 1.8fr); }
.announcement-table > div { grid-template-columns: minmax(180px, 1fr) .55fr .55fr .55fr .85fr .85fr minmax(260px, 1.5fr); }
.announcement-card b { text-transform: capitalize; }
.playlist-table code { overflow-wrap: anywhere; }
.tuliprox-readiness-table code, .tuliprox-readiness-table span, .audit-log-table code { overflow-wrap: anywhere; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.connection-session-list { margin-top: 14px; }
.connection-session-list span { overflow-wrap: anywhere; }
.device-setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.device-setup-card { display: grid; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); }
.device-setup-card p, .device-setup-card span { color: var(--muted); }
.device-credential-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.device-credential-grid label { display: grid; gap: 8px; min-width: 0; }
.device-credential-grid code { overflow-wrap: anywhere; }
.setup-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.setup-columns > div { display: grid; gap: 8px; min-width: 0; }
.compact-table > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.webhook-event-table > div { grid-template-columns: .65fr 1.1fr .65fr 1fr .9fr .65fr minmax(140px, auto); }
.resource-grid.tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notice-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: center; }
.notice-card span { color: var(--muted); }
.schema-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.schema-columns > div { display: grid; gap: 12px; min-width: 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.045); font-size: .86rem; }
.tone-text-good { color: var(--green)!important; }
.tone-text-warn { color: var(--amber)!important; }
.tone-text-danger { color: #ff6b6b!important; }
.tone-text-neutral { color: var(--muted)!important; }
.section-note, .muted-copy { color: var(--muted); line-height: 1.6; margin: -6px 0 16px; }
.admin-feedback { color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 12px; margin: 14px 0 0; background: rgba(255,255,255,.055); }
.admin-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.admin-form-grid.subscription-form-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) auto; }
.admin-form-grid.affiliate-application-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
.admin-form-grid.affiliate-payout-profile-grid { grid-template-columns: minmax(140px, .45fr) minmax(220px, 1fr) auto; margin: 0 0 18px; }
.admin-form-grid.payout-request-grid { grid-template-columns: minmax(120px, .5fr) minmax(100px, .35fr) minmax(180px, 1fr) auto; margin: 0 0 14px; }
.admin-form-grid.payment-provider-form-grid { grid-template-columns: minmax(110px, .55fr) minmax(100px, .45fr) minmax(100px, .45fr) minmax(220px, 1.1fr) minmax(160px, .8fr) auto; margin: 0 0 16px; }
.admin-form-grid.customer-support-form-grid { grid-template-columns: minmax(180px, .8fr) minmax(110px, .45fr) minmax(100px, .35fr) minmax(220px, 1fr) auto; margin: 0 0 14px; }
.admin-form-grid.support-reply-grid { grid-template-columns: minmax(260px, 1fr) auto; margin: 14px 0 0; }
.admin-form-grid.customer-checkout-form-grid { grid-template-columns: minmax(120px, .6fr) minmax(110px, .5fr) auto; margin: 0 0 14px; }
.admin-form-grid.customer-mfa-form-grid, .admin-form-grid.affiliate-mfa-form-grid { grid-template-columns: minmax(160px, 1fr) repeat(3, auto); margin: 0 0 14px; }
.admin-form-grid.customer-profile-form-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)) auto; margin: 0 0 14px; }
.admin-form-grid.admin-operator-form-grid { grid-template-columns: minmax(180px, .8fr) minmax(150px, .65fr) minmax(100px, .35fr) minmax(200px, .75fr) minmax(110px, auto) minmax(100px, auto) auto; margin: 0 0 14px; }
.admin-form-grid.audit-filter-grid { grid-template-columns: repeat(3, minmax(160px, 1fr)) auto; margin: 0 0 14px; }
.admin-form-grid.announcement-form-grid { grid-template-columns: minmax(220px, 1fr) minmax(130px, .45fr) minmax(130px, .45fr) minmax(130px, .45fr) auto; margin: 0 0 14px; }
.admin-form-grid .wide-field { grid-column: span 2; }
.admin-form-grid label { display: grid; gap: 7px; color: var(--muted); font-size: .88rem; font-weight: 800; min-width: 0; }
.admin-form-grid input, .admin-form-grid textarea, .admin-form-grid select { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); padding: 0 11px; font: inherit; }
.admin-form-grid textarea { min-height: 86px; resize: vertical; padding-top: 10px; }
.admin-form-grid .toggle-row { min-height: 44px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 0 11px; background: rgba(255,255,255,.04); }
.admin-form-grid .toggle-row input { width: 18px; min-height: 18px; }
.admin-form-grid button { min-height: 44px; border-radius: 6px; cursor: pointer; }
.admin-form-grid button:disabled { opacity: .55; cursor: wait; }
.inline-setting-editor { display: grid; gap: 6px; min-width: min(380px, 42vw); color: var(--muted); font-size: .84rem; font-weight: 800; }
.inline-setting-editor input, .inline-setting-editor select { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); padding: 0 10px; font: inherit; }
.support-thread-panel { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.security-posture-grid { margin-bottom: 14px; }
.security-recommendation-list { margin: 12px 0 16px; }
.security-event-list { margin-top: 16px; }
.form-error { color: #fecaca; border: 1px solid rgba(248,113,113,.36); background: rgba(127,29,29,.32); border-radius: 6px; padding: 12px; margin: 14px 0 0; }
.compact-provider-grid { margin-top: 14px; }
.auth-panel { max-width: 620px; margin: 10vh auto 0; padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.auth-panel h1 { font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0; line-height: 1; }
.auth-panel p { color: var(--muted); line-height: 1.65; }
.auth-form { display: grid; gap: 14px; margin-top: 22px; }
.auth-form label { display: grid; gap: 8px; color: var(--muted); font-weight: 800; }
.auth-form input, .auth-form select { min-height: 46px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.06); color: var(--text); padding: 0 12px; font: inherit; }
.auth-form button { min-height: 46px; border-radius: 6px; cursor: pointer; }
.auth-form.is-submitting input, .auth-form.is-submitting select { opacity: .72; pointer-events: none; }
.signup-submit { position: relative; gap: 10px; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease; }
.signup-submit:disabled { cursor: wait; opacity: .95; }
.signup-submit .button-spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(2,4,10,.28); border-top-color: #02040a; border-radius: 999px; animation: signup-spin .75s linear infinite; }
.signup-submit .submit-working-label { display: none; }
.auth-form.is-submitting .signup-submit { transform: translateY(-1px); box-shadow: 0 18px 60px rgba(0,229,255,.22); }
.auth-form.is-submitting .signup-submit .button-spinner, .auth-form.is-submitting .signup-submit .submit-working-label { display: inline-flex; }
.auth-form.is-submitting .signup-submit .submit-label { display: none; }
.auth-form .check-row { grid-template-columns: 18px 1fr; align-items: center; gap: 10px; color: var(--text); } .auth-form .check-row a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.auth-form .check-row input { min-height: 18px; width: 18px; padding: 0; }
.auth-switch { margin-top: 16px; }
.auth-switch a { color: var(--accent); font-weight: 800; }
.signup-result { display: grid; gap: 8px; }
.signup-result .button { justify-self: start; margin-top: 4px; }
.customer-welcome-banner { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; margin: -6px 0 18px; padding: 16px; border: 1px solid rgba(52,211,153,.38); border-radius: 8px; background: rgba(52,211,153,.09); box-shadow: 0 18px 52px rgba(52,211,153,.08); animation: welcome-rise .34s ease-out both; }
.customer-welcome-banner strong, .customer-welcome-banner span { display: block; }
.customer-welcome-banner span { color: var(--muted); margin-top: 4px; line-height: 1.5; }
.welcome-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--green); color: #03110b; font-weight: 900; box-shadow: 0 0 0 8px rgba(52,211,153,.12); }
@keyframes signup-spin { to { transform: rotate(360deg); } }
@keyframes welcome-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .glass-nav { position: sticky; transform: none; left: auto; top: 0; width: 100%; border-radius: 0; flex-wrap: wrap; } .surface-frame { padding-top: 32px; } .hero-grid, .split-grid, .split-grid.wide-left, .checkout-panel { grid-template-columns: 1fr; } .pricing-grid, .metric-grid, .provider-grid { grid-template-columns: 1fr; } .poster-stack { grid-template-columns: 1fr; } .surface-band { flex-direction: column; align-items: stretch; } .table-like > div { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .admin-portal-shell, .admin-dashboard-grid, .notice-card, .schema-columns, .device-setup-grid, .device-credential-grid, .setup-columns, .admin-form-grid, .admin-form-grid.subscription-form-grid, .admin-form-grid.affiliate-application-grid, .admin-form-grid.affiliate-payout-profile-grid, .admin-form-grid.payout-request-grid, .admin-form-grid.payment-provider-form-grid, .admin-form-grid.customer-support-form-grid, .admin-form-grid.customer-checkout-form-grid, .admin-form-grid.customer-mfa-form-grid, .admin-form-grid.affiliate-mfa-form-grid, .admin-form-grid.customer-profile-form-grid, .admin-form-grid.admin-operator-form-grid, .admin-form-grid.announcement-form-grid, .admin-form-grid.admin-line-filter-grid, .line-operations-summary { grid-template-columns: 1fr; } .admin-form-grid .wide-field { grid-column: auto; } .admin-sidebar { position: relative; top: auto; } .admin-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .resource-grid.tight { grid-template-columns: 1fr; } .row-card:has(.inline-setting-editor) { display: grid; } .inline-setting-editor { min-width: 0; } }