/* RTSP Cloud Platform 2.0.19: neutral surfaces and deliberate color accents. */
:root{
  --bg:#eceef1;--panel:#fafafb;--panel2:#f3f4f6;--surface-2:#fff;
  --line:#d3d7de;--text:#26313d;--muted:#596575;
  --accent:#21776c;--accent2:#0067b8;--danger:#b63d50;--warning:#895515;
  --shadow:0 4px 18px rgba(29,44,66,.055);
  font-family:"Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color-scheme:light
}
html,body{background:var(--bg);color:var(--text)}
::selection{background:#b9d3ea;color:#193650}
:focus-visible{outline:3px solid #0067b8;outline-offset:3px}
input,select,textarea{accent-color:var(--accent2)}
.ui-icon{display:inline-block;width:22px;height:22px;vertical-align:-.22em;flex:0 0 auto}
.tone-blue{--icon-color:#246aa7;--icon-bg:#d9e5f0}
.tone-teal{--icon-color:#20766c;--icon-bg:#d4e5df}
.tone-purple{--icon-color:#7053a2;--icon-bg:#e4dded}
.tone-orange{--icon-color:#a45b23;--icon-bg:#eedfcf}
.tone-slate{--icon-color:#586577;--icon-bg:#e0e4e9}

/* Navigation */
.app-shell{background:#eceef1}
.sidebar{background:#f4f5f7;border-right-color:#d5dae1;box-shadow:none}
.brand-mark{background:linear-gradient(145deg,#2469a7,#245577);color:#fff;box-shadow:0 5px 12px rgba(25,70,105,.16);border-radius:10px}
.brand-mark .ui-icon{width:25px;height:25px}.brand-mark.large .ui-icon{width:34px;height:34px}
.brand small,.landing-brand small{color:#647080}
.menu{gap:4px}.menu a{color:#485664;gap:10px;padding:9px 10px;transition:background .16s ease,color .16s ease}
.menu a:hover{background:#e5eaf0;color:#223b53}
.menu a.active{background:#dce7f1;color:#164f80;box-shadow:inset 3px 0 #0067b8}
.menu .nav-icon{width:33px;height:33px;flex:0 0 33px;display:grid;place-items:center;border-radius:9px;background:var(--icon-bg,#e0e4e9);color:var(--icon-color,#586577)}
.menu .nav-icon .ui-icon{width:21px;height:21px}
.sidebar-foot{background:#e9ecf0;border:1px solid #dce0e6;border-radius:10px;padding:14px;margin-top:18px}
.link-button{color:#9f3349;font-weight:650;display:inline-flex;align-items:center;gap:7px}
.link-button .ui-icon{width:18px;height:18px}
.topbar{background:rgba(247,248,249,.96);border-bottom-color:#d5dae1;backdrop-filter:blur(8px)}
.icon-button{background:#e7edf3;border-color:#c8d3df;color:#285779;min-width:42px;min-height:42px}
.button{background:#e8edf2;border-color:#cbd5df;color:#2d4f6c;border-radius:7px;gap:8px;transition:background .16s ease,box-shadow .16s ease}
.button:hover:not([disabled]){filter:brightness(.96);box-shadow:0 3px 10px rgba(24,59,88,.1)}
.button .ui-icon{width:18px;height:18px}
.button.primary{background:#0067b8;border-color:#0067b8;color:#fff;box-shadow:none}
.button.subtle{background:#e2ebf3;border-color:#bdcfdf;color:#225a8b}
.button.ghost{background:transparent;border-color:#b9c7d4;color:#2a5376}
.button.warning{background:#f0e5d4;border-color:#d9c5a4;color:#805214}
.button.danger{background:#f2dfe4;border-color:#dcb5c0;color:#9c2d48}
.button[disabled]{box-shadow:none}

/* Working surfaces and summaries */
.metric,.card,.plan-card{background:#fafafb;border-color:#d6dbe2;box-shadow:var(--shadow);border-radius:12px}
.metric{position:relative;background:#f7f8fa;border-top:3px solid #3477ae}
.metric:nth-child(4n+2){border-top-color:#318377}.metric:nth-child(4n+3){border-top-color:#8263ad}.metric:nth-child(4n+4){border-top-color:#b87b43}
.metric.accent{background:#f0f4f3;border-color:#c7d8d3;border-top-color:#318377}
.metric>span,.metric>strong{padding-right:45px}
.metric strong{color:#283e54}.metric.accent strong{color:#27695d}
.metric-icon{position:absolute;right:18px;top:18px;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--icon-bg);color:var(--icon-color)}
.metric-icon .ui-icon{width:24px;height:24px}
.card-head{border-bottom-color:#dce1e7}
.card-head>a,.table-action,.legal-card a,.seo-guide-card a,.seo-breadcrumb a,.legal-back,.legal-consent a,.requirements-strip a{color:#155e98}
.table-action{display:inline-flex;align-items:center;gap:5px}.table-action .ui-icon{width:16px;height:16px}
.card-head form input,.search-form input,.field input,.field select,.field textarea,.copy-field input,.copy-field textarea,.rtsp-check-input input{background:#fff;border-color:#becad6;color:#26313d}
.search-form input::placeholder,.field input::placeholder,.field textarea::placeholder,.rtsp-check-input input::placeholder{color:#69798a;opacity:1}
.search-form input:focus,.field input:focus,.field select:focus,.field textarea:focus,.rtsp-check-input input:focus,.card-head form input:focus{border-color:#317caf;box-shadow:0 0 0 3px rgba(0,103,184,.13);outline:0}
.field>span,.copy-field>span{color:#34495f}.field small,.section-title small{color:#596b7d}
.input-secret button,.input-suffix em{background:#e8edf2;color:#405a70}
.toggle,.check-item,.access-check{background:#eef1f4;border-color:#d0d9e1}
.toggle>span{background:#abbac9}.toggle>span:after{background:#fff}
.toggle input:checked+span{background:#287c70}.toggle input:checked+span:after{background:#fff}
.section-title>span,.activity-list>div>span{background:var(--icon-bg,#dce7f1);color:var(--icon-color,#266298)}
.section-title>span{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
.section-title .ui-icon{width:21px;height:21px}
.activity-list>div:nth-child(3n+2)>span{background:#d9e7df;color:#246d53}
.activity-list>div:nth-child(3n+3)>span{background:#eadfce;color:#925c28}
th,td{border-bottom-color:#dde3e9}th{background:#e9edf1;color:#4d6176}tbody tr:hover{background:#eff3f6}
td small,.mono,code{color:#53687b}
.alert.success,.form-feedback.success{background:#e0eee5;border-color:#a5cbb5;color:#256646}
.alert.danger,.form-feedback.danger{background:#f3e1e5;border-color:#dcb2bd;color:#a03149}
.form-feedback{background:#eaf0f5;color:#36536c}
.good-text,.node-state.good{color:#25704f}.node-state.bad{color:#b63d50}.warn-text{color:#895515}
.badge{background:#e2e9f0;color:#4d667a}.badge.online{background:#dcebe1;color:#246d4a}
.badge.offline,.badge.error{background:#f0dce2;color:#a4314c}
.badge.disabled{background:#e4e7eb;color:#586575}.badge.unknown{background:#eee4d0;color:#815517}
.role-chip{background:#dceae4;border-color:#b8d2c6;color:#26674f}
.action-chip{background:#dfe9f2;border-color:#c0d4e3;color:#235f8e}
.pagination li.active a{background:#0067b8;border-color:#0067b8;color:#fff}
.stream-card{background:#fafafb;border-color:#d1dae3;box-shadow:0 5px 16px rgba(29,50,72,.06)}
.stream-preview{background:linear-gradient(135deg,#adc3d4,#dae1e6)}
.stream-card:nth-child(3n+2) .stream-preview{background:linear-gradient(135deg,#adc9c2,#dce5e1)}
.stream-card:nth-child(3n+3) .stream-preview{background:linear-gradient(135deg,#c0b4ce,#e0dce7)}
.camera-icon{color:#376382;background:rgba(249,251,253,.45);width:76px;height:76px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.5);border-radius:18px}
.camera-icon .ui-icon{width:43px;height:43px}
.live-chip{display:inline-flex;align-items:center;gap:5px;background:#dcece3;color:#22664a}.live-chip .ui-icon{width:14px;height:14px}
.live-chip.disabled{background:#eadce1;color:#9c334b}
.copy-field div button{background:#dfeaf2;color:#235e8c;border-color:#c4d4e0}
.payment-readiness>div,.payment-test-box,.branding-upload-card{background:#eef1f4;border-color:#d5dde5}
.payment-test-box>span{color:#344f65}.branding-preview{background:#fafafa;border-color:#adbfce}
.branding-upload-card input[type=file]{background:#fff}
.plan-card-head p,.plan-card li,.plan-price small{color:#536779}.plan-card li:before{color:#297a5b}

/* Login and video pages */
.guest-body{background:linear-gradient(125deg,#d5dde6,#bacdd9 55%,#d1dcd6)}
.login-card,.setup-card{background:#f8f9fa;border-color:#c6d3de;box-shadow:0 20px 60px rgba(39,64,89,.14)}
.login-card{border-top:4px solid #276a9b}.setup-card{border-top:4px solid #367f75}
.login-card .tiny-note a{display:inline-flex;align-items:center;gap:6px}.tiny-note .ui-icon{width:16px;height:16px}
.watch-body{background:#e6e9ed;color:var(--text)}
.watch-shell header{padding:16px 2px}.watch-shell footer{color:#566b7d}
.live-label{color:#286f53}.watch-player{background:#000;border-color:#b3c3d0;box-shadow:0 12px 35px rgba(28,54,78,.14)}
.error-page>strong{color:#4d7191}

/* Public page: a medium blue hero, neutral content, colored illustrations. */
.landing-body{background:#f4f4f5;color:var(--text)}
.landing-header{background:rgba(249,249,250,.97);border-bottom-color:#d6dce2;box-shadow:none}
.landing-links a{color:#4f5d6c}.landing-links a:hover{color:#0067b8}
.landing-hero{background:linear-gradient(112deg,#405f82,#4d6f8c 65%,#4c737a);padding:72px 0 52px}
.landing-hero:before{display:none}
.eyebrow,.section-kicker,.rtsp-check-kicker{color:#236799;letter-spacing:.12em}
.eyebrow{background:#e1e9f0;border-color:#bacdda}.eyebrow i{background:#397b8c;box-shadow:none}
.hero-copy .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);color:#f8fafc}
.hero-copy .eyebrow i{background:#b4d8ca}
.hero-copy h1{color:#fff;font-size:clamp(38px,4.5vw,59px);line-height:1.08;font-weight:650;letter-spacing:-.035em}
.hero-copy h1 span{background:none;color:#fff}
.hero-lead,.hero-points{color:#f0f4f8}
.hero-points span{display:flex;align-items:center;gap:7px}.hero-points .ui-icon{width:16px;height:16px;color:#c0e0d1}
.hero-actions .button.primary{background:#f5f7f9;border-color:#f5f7f9;color:#1c4a6d}
.hero-actions .button.ghost{background:transparent;border-color:#c0d1df;color:#fff}
.demo-window{background:#e9eef3;border-color:#b1c3d1;border-radius:13px;box-shadow:0 24px 55px rgba(16,39,62,.25)}
.demo-topbar{background:#e9edf2;border-bottom-color:#cbd6e0}.demo-topbar>span{background:#a9bcca}
.demo-topbar code{color:#526a7d}
.demo-video{background:linear-gradient(125deg,#355878,#447a89);isolation:isolate}
.demo-video:before,.demo-video:after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:-1}
.demo-video:before{width:220px;height:220px;right:-55px;top:-90px;background:#b58473;opacity:.75}
.demo-video:after{width:260px;height:260px;left:-95px;bottom:-160px;background:#729a80;opacity:.85}
.demo-video-grid{background-image:linear-gradient(rgba(224,238,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(224,238,246,.05) 1px,transparent 1px)}
.demo-camera-icon{color:#eef5fa;font-size:initial}
.demo-camera-icon .ui-icon{width:78px;height:78px;box-sizing:content-box;padding:21px;border-radius:26px;background:rgba(216,235,248,.13);border:1px solid rgba(236,247,255,.35);box-shadow:0 12px 32px rgba(24,43,61,.25);transform:rotate(-7deg)}
.demo-code{background:#e8edf2}.demo-code span{color:#4c6075}
.demo-code code{background:#f5f7f9;border-color:#cbd8e2;color:#295d87}.demo-code b{color:#2e725c}
.demo-live{background:rgba(28,49,69,.82);color:#f8fafb;letter-spacing:.03em}.demo-live i{background:#d88b78}
.demo-player-bar .ui-icon{width:16px;height:16px}
.hero-float{background:#eef1f4;border-color:#c7d4df;box-shadow:0 12px 28px rgba(25,44,65,.18)}
.hero-float>span{background:#d6e7df;color:#2b785b}.hero-float-b>span{background:#d4e3f0;color:#2f6393}
.hero-float small{color:#5a6d7e}.hero-float-a>span{color:#2b785b}
.landing-proof{background:#e7ebef;border-color:#d2dbe2}.proof-grid>div{border-color:#d1dbe3}
.proof-grid>div:nth-child(4n+1) strong{color:#275f91}.proof-grid>div:nth-child(4n+2) strong{color:#296e60}
.proof-grid>div:nth-child(4n+3) strong{color:#93602d}.proof-grid>div:nth-child(4n+4) strong{color:#71568f}
.proof-grid span,.section-heading p,.step-card p,.feature-card p,.architecture-copy p,.architecture-copy li,.landing-plan>p,.landing-plan li,.pricing-note,.no-record-card p,.muted-copy,.faq-list p{color:#526779}
.section-heading h2,.architecture-copy h2,.faq-layout h2,.cta-card h2{font-weight:650;letter-spacing:-.03em;line-height:1.14}

/* Colored icons provide landmarks throughout the page. */
.step-card,.feature-card,.landing-plan{background:#fafafb;border-color:#d4dce3;box-shadow:0 4px 16px rgba(35,55,75,.04);border-radius:11px}
.step-card{border-top:3px solid #3778aa;min-height:225px}.step-card:nth-child(3n+2){border-top-color:#368275}.step-card:nth-child(3n+3){border-top-color:#7e62a4}
.step-card:before{display:none}.step-no{color:#6a7b8c}
.step-icon,.feature-icon{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;background:var(--icon-bg,#d9e5f0);color:var(--icon-color,#246aa7)}
.step-icon .ui-icon,.feature-icon .ui-icon{width:27px;height:27px}
.step-card h3,.feature-card h3{font-size:18px;font-weight:650}
.step-card code{color:#2b628c;border-top-color:#d3dfe8}
.feature-section{background:#e7ebf0}
.feature-card.feature-wide{background:#2e5e82;border-color:#2e5e82;color:#fff}
.feature-card.feature-wide p{color:#edf3f8}
.feature-wide .feature-icon{background:#d6e4ee;color:#285f89}
.mini-flow span,.seo-flow span{background:#e5edf3;border-color:#c2d2df;color:#345d7e}
.mini-flow b,.seo-flow b{color:#558cad}.mini-flow .ui-icon{width:16px;height:16px}
.feature-wide .mini-flow b{color:#bfd8e7}
.architecture-card{background:#f8f9fa;border-color:#d0dce5;box-shadow:none}
.architecture-copy li:before{color:#2d7b60}.architecture-flow>i{color:#537fa2}
.arch-node{background:#e7edf2;border-color:#c4d4e0}.arch-node.highlight{background:#d6e5df;border-color:#aac9bc}
.arch-node span{color:#35668a}.arch-node.highlight span{color:#2e725a}.arch-node small{color:#566c7e}
.pricing-section{background:#e6e9ee}
.landing-plan.recommended{background:#f5f8fa;border-color:#9fb8cd;box-shadow:0 7px 22px rgba(31,74,109,.08);border-top:4px solid #276b9e}
.plan-ribbon{background:#d8e7f2;color:#245e8b}.landing-plan-price{border-color:#d1dfe8}
.landing-plan-price small{color:#596e80}.landing-plan li:before{color:#2c795d}
.no-record-card{background:#eef1f4;border-color:#d1dce5}.no-record-icon{background:#d7e5ef;color:#346f99}
.faq-list,.faq-list details{border-color:#cfdbe4}.faq-list summary:after{color:#2c729f}
.cta-card{background:linear-gradient(115deg,#365f72,#3d6f65);border-color:#446f78;color:#fff}
.cta-card p{color:#edf3f4}.cta-card .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}.cta-card .eyebrow i{background:#b5d9c7}
.cta-card .button.primary{background:#f3f6f8;border-color:#f3f6f8;color:#24536b}.cta-card .button.ghost{color:#fff;border-color:#b7cfce}
.landing-footer{background:#dadee4;border-color:#cbd2da}
.footer-grid p,.footer-links a,.footer-actions a,.footer-bottom{color:#4b6174}
.footer-links a:hover,.footer-actions a:hover{color:#155e98}
.footer-actions a:last-child{color:#2b7057}.footer-bottom{border-color:#c2cfda}

/* Checker, legal pages and reference guides */
.rtsp-check-card{background:#eef1f4;border-color:#b9cad6;box-shadow:0 12px 30px rgba(25,45,66,.13)}
.rtsp-check-copy p,.rtsp-result-copy p,.rtsp-check-note,.requirements-strip span{color:#566d7f}
.rtsp-check-input>span{color:#395f7c}.rtsp-check-input input{border-color:#b7ccdb;box-shadow:none}
.rtsp-check-result{background:#f5f7f9;border-color:#c6d7e3}
.rtsp-check-result.success{background:#dfede5;border-color:#a2cab4}.rtsp-check-result.error{background:#f0dfe4;border-color:#d5afbb}
.rtsp-result-icon{background:#dde7ef;color:#456781}
.rtsp-check-result.success .rtsp-result-icon{background:#c4dfd0;color:#2c6f51}.rtsp-check-result.error .rtsp-result-icon{background:#e7cbd4;color:#9d344e}
.rtsp-result-icon .ui-icon{width:20px;height:20px}.rtsp-result-icon .result-error{display:none}
.rtsp-check-result.error .result-ok{display:none}.rtsp-check-result.error .result-error{display:inline-block}
.rtsp-result-meta span{background:#e0ece6;border-color:#b9d4c6;color:#2e6c51}
.requirements-strip,.legal-summary{background:#e1eae4;border-color:#b6cec0;color:#3c6554}
.requirements-strip strong,.legal-summary strong{color:#2c644a}
.legal-card,.seo-guide-card{background:#f9f9fa;border-color:#d0dce5;box-shadow:var(--shadow)}
.legal-card p,.legal-card li,.seo-guide-header>p,.seo-guide-card section>p,.seo-guide-card li{color:#4f677a}
.legal-contact a,.legal-contact span{background:#dfeaf2;border-color:#bfd4e2;color:#2a648f}
.legal-updated{color:#63798b!important}.seo-breadcrumb{color:#60788b}
.seo-guide-header{border-color:#cddde7}.seo-guide-cta{background:#e1ebe9;border-color:#b4cec8}.seo-guide-cta span{color:#566e80}

/* Readability and responsive navigation */
.alert,.badge,.role-chip,.action-chip,.pagination a,.pagination li.active a,th,td small,.mono,code,.copy-field input,.copy-field textarea,
.metric span,.metric small,.activity-list small,.stream-meta,.access-check small,.live-facts span,
.demo-code span,.demo-code code,.hero-float small,.step-no,.plan-ribbon,.rtsp-result-meta span{font-size:14px}
.stream-card h3{font-size:16px}
.landing-body p,.landing-body li,.legal-card p,.legal-card li,.seo-guide-card p,.seo-guide-card li{font-size:15px;line-height:1.65}
.landing-body .hero-lead{font-size:17px;line-height:1.65}.landing-body .rtsp-check-copy p{font-size:15px}
@media(max-width:920px){
  .icon-button{display:inline-grid;place-items:center}
  .sidebar{width:min(300px,85vw);height:100dvh;inset:0 auto auto 0;z-index:55}
  .sidebar-backdrop.open{display:block;position:fixed;inset:0;border:0;background:rgba(29,48,68,.4);z-index:50}
}
@media(max-width:640px){
  .landing-hero{padding:45px 0 38px}.hero-copy h1{font-size:clamp(35px,10vw,42px)}
  .hero-points{grid-template-columns:1fr 1fr;gap:10px;text-align:left}.hero-points span{white-space:normal;align-items:flex-start}
  .hero-points .ui-icon{margin-top:3px}.metric strong{font-size:25px}
  .topbar{background:#f5f6f8}.watch-shell header{padding:14px}
  .step-card{min-height:0}.demo-camera-icon .ui-icon{width:58px;height:58px;padding:17px}
}
@media(prefers-reduced-motion:reduce){.button,.menu a{transition:none}}

/* v2.1.8 analytics and customer stream surfaces */
.analytics-filters{background:#f5f7f9}.filter-field>span{color:#4b6073}.filter-field input,.filter-field select{background:#fff;border-color:#bdcbd7;color:#26313d}.filter-field input:focus,.filter-field select:focus{border-color:#317caf;box-shadow:0 0 0 3px rgba(0,103,184,.13)}.customer-stream-filters{border-bottom-color:#dce3e9}.analytics-bar-track,.hour-chart b,.ranking-main>b{background:#e5ebf0}.analytics-bar-track i,.ranking-main>b i{background:linear-gradient(180deg,#2d78ae,#378476)}.hour-chart b i{background:#3479ad}.ranking-row{border-bottom-color:#dfe5ea}.ranking-no{background:#e7edf2;color:#536b7e}.analytics-empty{color:#617587}.retention-form{background:#f7f8fa}.analytics-metrics .metric a{color:#225f91}

/* v2.1.9 streaming server workflow */
.node-explainer-icon,.stream-server-icon{background:#dce9f3;color:#286b9d}.node-flow>span,.stream-server-note,.platform-link-card{background:#f3f6f8;border-color:#d3dde5}.node-capacity{background:#e3e9ee}.node-capacity i{background:linear-gradient(90deg,#3479ad,#378476)}