:root{--bg:#0b1020;--bg-elev:#11182b;--bg-elev-2:#182235;--line:#23304a;--line-soft:#1a2438;--text:#eef3ff;--muted:#9eb0d1;--primary:#4f7cff;--primary-2:#6d93ff;--success:#1f9d6a;--danger:#d94a5c;--warning:#d2a53b;--sidebar-w:248px;--radius:16px;--radius-sm:12px;--shadow:0 12px 40px #0000003d}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);background:linear-gradient(#0a1020 0%,#0d1426 100%);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{appearance:none}.app-shell{grid-template-columns:var(--sidebar-w) 1fr;background:radial-gradient(circle at 100% 0,#4f7cff1f,#0000 28%),linear-gradient(#0a1020 0%,#0d1426 100%);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--line-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#030814d9;padding:24px 18px}.sidebar-logo{align-items:center;gap:12px;margin-bottom:28px;display:flex}.sidebar-logo-mark,.brand-mark{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff;width:36px;height:36px;box-shadow:var(--shadow);border-radius:12px;place-items:center;font-weight:700;display:grid}.brand-mark.lg{border-radius:18px;width:56px;height:56px;font-size:20px}.sidebar-logo-title,.brand-title{letter-spacing:.01em;font-weight:700}.sidebar-logo-subtitle,.brand-subtitle{color:var(--muted);font-size:12px}.sidebar-nav{flex-direction:column;gap:6px;display:flex}.sidebar-link{color:var(--muted);border-radius:12px;padding:11px 13px;transition:all .16s}.sidebar-link:hover{color:var(--text);background:#ffffff0a}.sidebar-link.active{color:#fff;background:linear-gradient(#4f7cff33,#4f7cff1f);border:1px solid #4f7cff47}.app-main{flex-direction:column;min-width:0;display:flex}.topbar{border-bottom:1px solid var(--line-soft);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:10;background:#080c18b8;justify-content:space-between;align-items:center;height:74px;padding:0 26px;display:flex;position:sticky;top:0}.topbar-brand,.topbar-right{align-items:center;gap:12px;display:flex}.viewer-chip{border:1px solid var(--line);background:#ffffff08;border-radius:999px;align-items:center;gap:10px;padding:8px 12px;display:flex}.viewer-name{font-weight:600}.viewer-role{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}.page-wrap{padding:28px}.page-stack{flex-direction:column;gap:22px;display:flex}.page-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.page-header h1{margin:0 0 6px;font-size:34px;line-height:1.05}.page-header p{color:var(--muted);margin:0}.stats-grid,.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.stat-card,.panel,.table-card,.pricing-card,.flow-step-card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:linear-gradient(#182235e6,#0f1726e6)}.stat-card{flex-direction:column;justify-content:space-between;min-height:130px;padding:18px;display:flex}.stat-label{color:var(--muted);font-size:14px}.stat-value{font-size:32px;font-weight:700}.panel,.table-card,.pricing-card{padding:18px}.panel-lg{min-width:0}.panel-title,.subheading{margin-bottom:14px;font-weight:700}.two-col-layout{grid-template-columns:320px 1fr;gap:18px;display:grid}.list-stack,.template-stack,.flow-step-stack,.detail-stack,.usage-stack,.status-grid{flex-direction:column;gap:10px;display:flex}.list-card{text-align:left;border:1px solid var(--line);width:100%;color:var(--text);cursor:pointer;background:#ffffff05;border-radius:14px;padding:14px}.list-card.active,.list-card:hover{background:#4f7cff14;border-color:#4f7cff73}.list-card-title{font-weight:600}.list-card-subtitle{color:var(--muted);margin-top:4px;font-size:13px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.field{flex-direction:column;gap:8px;display:flex}.field span{color:var(--muted);font-size:13px}.field input,.field select,.field textarea,.table-search{border:1px solid var(--line);color:#fff;background:#0e1526;border-radius:12px;outline:none;width:100%;padding:12px 13px}.field textarea{resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.table-search:focus{border-color:#4f7cffb3;box-shadow:0 0 0 3px #4f7cff26}.field-full{grid-column:1/-1}.meta-bar,.action-row,.pricing-top,.usage-row,.flow-step-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.action-row{flex-wrap:wrap}.btn{cursor:pointer;border:1px solid #0000;border-radius:12px;padding:11px 14px;transition:all .16s}.btn:disabled{opacity:.65;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-2));color:#fff}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-secondary{color:#fff;border-color:var(--line);background:#111827}.btn-secondary:hover:not(:disabled){background:#162033}.btn-danger{color:#ff9baa;background:#d94a5c21;border-color:#d94a5c38}.btn-block{width:100%}.btn-xs{border-radius:10px;padding:8px 10px;font-size:13px}.pill{text-transform:capitalize;border-radius:999px;padding:7px 10px;font-size:12px}.pill-basic{color:#f3c96a;background:#d2a53b24}.pill-pro{color:#9ab4ff;background:#4f7cff29}.pill-enterprise{color:#7fe1b2;background:#1f9d6a24}.pricing-name{font-size:18px;font-weight:700}.pricing-plan{color:var(--muted);text-transform:capitalize;font-size:13px}.pricing-card-active{border:1px solid #6366f199;box-shadow:0 0 0 1px #6366f133}.table-card{overflow:hidden}.table-wrap{overflow:auto}.data-table{border-collapse:collapse;width:100%;min-width:760px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;padding:14px 12px}.data-table th{color:var(--muted);font-size:13px;font-weight:600}.detail-item{color:#dce6ff;font-size:14px}.empty-box,.error-box{border:1px dashed var(--line);color:var(--muted);background:#ffffff05;border-radius:14px;padding:16px}.error-box{color:#ffafbb;background:#d94a5c14;border-style:solid;border-color:#d94a5c3d}.flow-step-index{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.login-shell{background:radial-gradient(circle at 0 0,#4f7cff2e,#0000 30%),linear-gradient(#09101f 0%,#0c1324 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{border:1px solid var(--line);width:100%;max-width:440px;box-shadow:var(--shadow);background:linear-gradient(#141e30f5,#0c121ef5);border-radius:24px;padding:28px}.login-header{text-align:center;justify-items:center;gap:10px;margin-bottom:24px;display:grid}.login-header h1,.login-header p{margin:0}.login-header p{color:var(--muted)}.login-toggle{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;display:grid}.toggle-btn{border:1px solid var(--line);color:var(--muted);cursor:pointer;background:#111827;border-radius:12px;padding:11px 14px}.toggle-btn.active{color:#fff;background:#4f7cff1a;border-color:#4f7cff73}.login-form{flex-direction:column;gap:14px;display:flex}.screen-center{color:#fff;place-items:center;min-height:100vh;display:grid}.onboarding-shell{background:radial-gradient(circle at 100% 0,#4f7cff26,#0000 30%),linear-gradient(#0a1020 0%,#0d1426 100%);place-items:center;min-height:100vh;padding:28px;display:grid}.onboarding-card{border:1px solid var(--line);width:100%;max-width:480px;box-shadow:var(--shadow);background:linear-gradient(#141e30f5,#0c121ef5);border-radius:24px;flex-direction:column;gap:18px;padding:28px;display:flex}.onboarding-header{text-align:center;justify-items:center;gap:10px;margin-bottom:10px;display:grid}.onboarding-header h1{margin:0;font-size:26px}.onboarding-header p{color:var(--muted);margin:0;font-size:14px}.onboarding-bullets{color:var(--muted);opacity:.95;gap:10px;margin:10px 0 14px;font-size:14px;display:grid}.onboarding-bullets div{align-items:center;gap:10px;display:flex}.billing-banner{background:#ffffff0a;border:1px solid #ffffff14;border-radius:16px;flex-wrap:wrap;gap:16px;padding:14px 16px;display:flex}.dashboard-usage{background:#ffffff0d;border-radius:12px;margin-bottom:20px;padding:16px}.upgrade-banner{background:#ffa50026;border-radius:8px;margin-top:10px;padding:10px}.plan-warning{color:orange;font-size:14px}.plan-highlight{color:#6366f1;font-weight:700}@media (width<=980px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.page-wrap{padding:18px}.two-col-layout,.form-grid{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:stretch}.topbar{flex-direction:column;align-items:stretch;gap:12px;height:auto;padding:16px 18px}.topbar-right{justify-content:space-between}.onboarding-card{width:100%;max-width:460px}}.menu-btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:12px;padding:10px 12px;display:none}.check-row{color:var(--text);align-items:center;gap:10px;display:flex}.check-row input{width:auto}.success-box{color:#baf1d8;background:#1f9d6a1f;border:1px solid #1f9d6a42;border-radius:14px;padding:16px}.rule-card{border:1px solid var(--line);background:#ffffff08;border-radius:14px;padding:14px}@media (width<=980px){.menu-btn{justify-content:center;align-items:center;display:inline-flex}.sidebar{z-index:30;width:280px;min-height:100vh;display:none;position:fixed;inset:0 auto 0 0}.sidebar.mobile-open{display:block}.topbar{flex-direction:row;justify-content:space-between;align-items:center}.topbar-right{margin-left:auto}}.sidebar-backdrop{display:none}.sidebar-top-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px;display:flex}.sidebar-close-btn{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:12px;padding:8px 10px;display:none}.topbar-right{margin-left:auto}.viewer-name-right{text-align:right}.mode-selector{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px;display:grid}.mode-card{text-align:left;border:1px solid var(--line);color:var(--text);cursor:pointer;background:#ffffff08;border-radius:16px;padding:16px;transition:all .16s}.mode-card:hover{background:#4f7cff14;border-color:#4f7cff73}.mode-card.active{background:linear-gradient(#4f7cff2e,#4f7cff14);border-color:#4f7cff73}.mode-card-title{margin-bottom:6px;font-weight:700}.mode-card-copy{color:var(--muted);font-size:14px;line-height:1.4}.plan-admin-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}@media (width<=980px){.sidebar-backdrop.visible{z-index:24;background:#00000073;display:block;position:fixed;inset:0}.sidebar{z-index:30;width:min(320px,100vw - 32px);box-shadow:0 20px 60px #0006}.sidebar-close-btn{justify-content:center;align-items:center;display:inline-flex}.topbar{flex-direction:row;justify-content:space-between;align-items:center;position:sticky;top:0}.topbar-right{justify-content:flex-end;min-width:0;margin-left:auto}.viewer-chip{min-width:0}.viewer-name{text-overflow:ellipsis;white-space:nowrap;max-width:150px;overflow:hidden}.mode-selector,.plan-admin-grid{grid-template-columns:1fr}}.topbar-spacer{flex:auto}.topbar-right-fixed{justify-content:flex-end;min-width:0;margin-left:auto}.viewer-chip-right{text-align:right;align-items:flex-end}.info-strip{color:#dce6ff;background:#4f7cff14;border:1px solid #4f7cff33;border-radius:14px;padding:14px 16px}.screening-card{border:1px solid var(--line);background:#ffffff08;border-radius:16px;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;display:flex}.screening-card-title{margin-bottom:4px;font-weight:700}.screening-card-copy{color:var(--muted);font-size:14px;line-height:1.45}.switch-btn{border:1px solid var(--line);color:#fff;cursor:pointer;background:#111827;border-radius:999px;align-items:center;gap:10px;padding:8px 12px;display:inline-flex}.switch-btn.active{background:#4f7cff24;border-color:#4f7cff8c}.switch-btn:disabled{opacity:.6;cursor:not-allowed}.switch-track{background:#ffffff24;border-radius:999px;align-items:center;width:42px;height:24px;padding:2px;display:inline-flex;position:relative}.switch-thumb{background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .16s;transform:translate(0)}.switch-btn.active .switch-thumb{transform:translate(18px)}.three-col-layout{grid-template-columns:320px minmax(0,1fr) minmax(0,1.2fr);gap:20px;display:grid}@media (width<=1280px){.three-col-layout{grid-template-columns:1fr}}@media (width<=980px){.screening-card{flex-direction:column;align-items:stretch}}