@import url('theme.css');
:root{--navy:#071522;--navy2:#10243a;--card:#11243a;--card2:#152d45;--teal:#22d5bb;--blue:#6ba7ff;--amber:#ffba65;--violet:#af95ff;--rose:#ff778d;--green:#a7eeae;--muted:#93aabf;--ink:#15273b;--light-bg:#f4f7fb;--light-card:#fff;--stroke:rgba(172,203,230,.14);--shadow:0 22px 60px rgba(13,36,60,.10);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-size:15px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{text-decoration:none;color:inherit}.hide{display:none!important}.muted{color:var(--muted)}.eyebrow{letter-spacing:.16em;text-transform:uppercase;font-weight:800;font-size:10px}.mark{display:inline-grid;place-items:center;background:var(--teal);color:var(--navy);font-weight:950;font-size:19px;letter-spacing:-.08em;width:40px;height:40px;border-radius:12px}.mark.ops{background:var(--blue)}.brand-title{font-size:18px;font-weight:850;letter-spacing:-.05em}.brand-sub{font-size:10px;letter-spacing:.17em;font-weight:800;text-transform:uppercase}.inline-flex{display:flex;align-items:center;gap:12px}.pill{font-weight:750;font-size:11px;padding:7px 11px;border-radius:999px;white-space:nowrap}.pill.good{background:rgba(34,213,187,.13);color:#25d4b8}.pill.warn{background:rgba(255,187,101,.13);color:#c77a16}.pill.example{background:rgba(175,149,255,.15);color:#8661d0}.pill.dim{background:#eaf0f5;color:#62798c}.button{border:0;padding:11px 17px;border-radius:11px;font-weight:750;background:var(--teal);color:#062029;display:inline-flex;align-items:center;gap:8px;justify-content:center;transition:filter .15s}.button:hover{filter:brightness(.94)}.button.secondary{background:#eaf0f5;color:#264257}.button.dark{background:#142b40;color:#e5f4ff}.button.small{padding:8px 12px;font-size:12px}.button.outline{background:transparent;color:inherit;border:1px solid currentColor}.button.ghost{background:transparent;color:inherit;padding:8px}.toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}.toggle input{accent-color:var(--teal)}select,input,textarea{outline:none}select:focus,input:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(34,213,187,.35);outline-offset:2px}.spinner{height:20px;width:20px;border-radius:50%;border:3px solid #e6f0f4;border-top-color:var(--teal);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* TV control room */
.tv-page{background:radial-gradient(circle at 77% -30%,#1c3754 0%,transparent 39%),#061321;color:#eaf5ff;overflow-x:hidden}.tv-shell{width:100%;max-width:2600px;margin:auto;padding:30px clamp(16px,2.1vw,46px) 50px}.tv-top{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:24px}.tv-top-left{display:flex;align-items:center;gap:21px}.tv-brand{display:flex;align-items:center;gap:12px}.tv-brand-text .brand-title{font-size:24px}.tv-brand-text .brand-sub{color:#8da9be}.tv-divider{width:1px;height:43px;background:var(--stroke)}.tv-overline{color:var(--teal);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.2em;margin:0 0 6px}.tv-heading{margin:0;font-size:clamp(24px,2.4vw,40px);font-weight:810;letter-spacing:-.045em;line-height:1.04}.tv-top-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;justify-content:flex-end}.company-switch{display:inline-flex;background:#102338;padding:5px;border:1px solid #1f3a54;border-radius:13px;gap:4px}.company-switch button{background:transparent;border:0;border-radius:9px;padding:10px 14px;color:#8299af;font-size:12px;font-weight:800}.company-switch button.active{background:#23425b;color:#f1ffff;box-shadow:0 2px 8px #05131c}.tv-select{background:#102338;border:1px solid #2d4660;border-radius:10px;color:#d7ebfa;padding:9px 12px;font-size:12px}.tv-period{display:flex;gap:7px}.tv-clock{min-width:85px;text-align:right;font-size:22px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.live-dot{display:inline-block;width:8px;height:8px;border-radius:100%;background:#29e2ad;box-shadow:0 0 0 6px rgba(34,213,187,.10);margin-right:7px}.tv-meta-row{display:flex;justify-content:space-between;align-items:center;margin:14px 0 22px;color:#a6bbcf;font-size:12px;gap:12px;flex-wrap:wrap}.demo-strip{border:1px solid rgba(255,184,101,.35);color:#ffcd87;background:rgba(255,172,76,.075);border-radius:13px;padding:12px 16px;font-size:12px;font-weight:750;display:flex;gap:12px;align-items:center;margin-bottom:19px;letter-spacing:.01em}.demo-strip strong{background:#d88c30;color:#121923;padding:5px 9px;border-radius:6px;font-size:10px;letter-spacing:.07em}.tv-kpis{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:14px;margin-bottom:17px}.tv-kpi{padding:21px 24px 19px;border:1px solid rgba(130,168,197,.16);border-radius:17px;background:linear-gradient(145deg,rgba(29,57,80,.85),rgba(14,33,52,.95));position:relative;overflow:hidden;min-height:152px}.tv-kpi:before{content:"";width:98px;height:98px;border:1px solid rgba(255,255,255,.055);border-radius:40px;position:absolute;right:-30px;top:-43px;transform:rotate(29deg)}.tv-kpi.primary{background:linear-gradient(125deg,#106c72,#0b4555 70%,#173353);border-color:rgba(48,224,199,.42)}.tv-kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.11em;font-weight:800;color:#afc6d7}.tv-kpi.primary .tv-kpi-label{color:#c4fff2}.tv-kpi-num{font-size:clamp(37px,3.6vw,64px);font-weight:850;line-height:1.04;letter-spacing:-.07em;margin:15px 0 5px;font-variant-numeric:tabular-nums}.tv-kpi.primary .tv-kpi-num{color:#bcfff2}.tv-kpi-hint{font-size:11px;color:#8ea9bd}.tv-kpi.primary .tv-kpi-hint{color:#c2efea}.tv-widget-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:stretch}.widget{grid-column:span var(--span,4);min-width:0;min-height:var(--widget-height,300px);border:1px solid rgba(143,181,209,.16);border-radius:17px;background:linear-gradient(160deg,rgba(19,42,65,.99),rgba(13,31,49,.98));padding:20px 24px 21px;display:flex;flex-direction:column;box-shadow:0 10px 25px rgba(0,0,0,.10)}.widget.dragging{opacity:.45}.widget.drop-target{outline:2px dashed var(--teal);outline-offset:4px}.widget-head{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:14px}.widget-title{font-size:17px;font-weight:800;letter-spacing:-.035em}.widget-sub{font-size:11px;color:#839eb4;margin-top:5px}.widget-controls{display:flex;align-items:center;gap:4px;opacity:.65}.widget:hover .widget-controls{opacity:1}.widget-controls button{background:#1e3850;border:1px solid #2b4b63;color:#c6d8e4;border-radius:7px;padding:2px 7px;font-size:14px;height:25px;line-height:1;min-width:24px}.drag-handle{cursor:grab!important}.chart-box{flex:1;display:flex;align-items:center;justify-content:center;min-height:150px}.split-chart{display:flex;align-items:center;justify-content:center;gap:20px;width:100%}.ring-svg{width:min(100%,215px);max-height:220px;overflow:visible;flex-shrink:1}.legend-list{display:flex;flex-direction:column;gap:11px;flex:1}.legend-item{display:flex;gap:9px;align-items:center;justify-content:space-between;font-size:12px;color:#bdcfdf}.legend-left{display:flex;align-items:center;gap:9px;min-width:0}.legend-label{max-width:155px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-mark{width:9px;height:9px;flex-shrink:0;border-radius:3px}.legend-count{font-weight:800;color:#f3fbff;font-variant-numeric:tabular-nums}.bar-chart{width:100%;display:flex;flex-direction:column;gap:18px;padding:8px 0 10px}.bar-row{display:grid;grid-template-columns:minmax(115px,32%) 1fr 28px;align-items:center;gap:12px;font-size:12px}.bar-name{color:#b2c7d8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:10px;border-radius:20px;background:#243b53;overflow:hidden}.bar-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--teal),#70e7da)}.bar-row:nth-child(even) .bar-fill{background:linear-gradient(90deg,var(--blue),#91b9ff)}.bar-value{font-weight:800;text-align:right}.funnel{display:flex;flex-direction:column;justify-content:center;gap:12px;width:100%;padding:0 8px}.funnel-row{display:grid;grid-template-columns:98px 1fr 36px;align-items:center;gap:13px;font-size:12px}.funnel-label{color:#b0c6d5}.funnel-track{height:23px;background:#22364a;border-radius:6px;overflow:hidden}.funnel-fill{height:100%;min-width:0;border-radius:6px;background:var(--teal)}.funnel-row:nth-child(2) .funnel-fill{background:var(--blue)}.funnel-row:nth-child(3) .funnel-fill{background:var(--violet)}.funnel-row:nth-child(4) .funnel-fill{background:var(--amber)}.funnel-num{text-align:right;font-size:14px;font-weight:800}.trend-svg{width:100%;height:245px;overflow:visible}.empty-chart{font-size:13px;color:#849fb4;text-align:center;line-height:1.65}.missing-list{width:100%;align-self:stretch}.missing-row{padding:10px 0;border-bottom:1px solid rgba(173,206,230,.09);display:flex;justify-content:space-between;gap:15px;align-items:center}.missing-row:last-child{border:0}.missing-title{font-size:12px;font-weight:750;color:#dbeaf5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:300px}.missing-by{font-size:11px;color:#8ca7b9;margin-top:3px}.missing-tags{font-size:11px;color:#ffc586;white-space:nowrap}.tv-foot{display:flex;justify-content:space-between;margin-top:26px;font-size:11px;color:#65879e;gap:12px}.pair-screen{min-height:96vh;display:grid;place-items:center;padding:20px}.pair-card{background:#102439;border:1px solid #2d4960;border-radius:24px;padding:42px;max-width:470px;width:100%;box-shadow:0 30px 100px rgba(0,0,0,.30)}.pair-card h1{letter-spacing:-.04em;margin:20px 0 4px}.pair-card input{width:100%;margin:20px 0 10px;letter-spacing:.2em;text-align:center;text-transform:uppercase;font-weight:850;font-size:23px;padding:13px;color:#fff;background:#08182a;border:1px solid #446078;border-radius:12px}.pair-card .button{width:100%}
/* Recruiter workspace */
.recruiter-page{background:#f3f6fa;color:var(--ink)}.workspace{display:flex;min-height:100vh}.side{width:242px;flex:0 0 242px;background:#0b1d2e;color:#e4f5ff;min-height:100vh;padding:26px 17px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.side-brand{display:flex;gap:12px;align-items:center;padding:0 9px 25px;border-bottom:1px solid #223747}.side-brand .brand-title{font-size:20px}.side-brand .brand-sub{color:#97adbe}.side-section{padding:26px 11px 12px;font-size:10px;font-weight:800;color:#68859b;letter-spacing:.18em;text-transform:uppercase}.nav-item{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#94adc1;padding:13px 14px;width:100%;text-align:left;border-radius:11px;margin-bottom:5px;font-weight:700;font-size:13px}.nav-item.active{background:#174451;color:#b5fff1}.nav-item:hover{background:#153047;color:white}.nav-ico{font-size:18px;width:20px;text-align:center}/* Menu scrolls when the window is low; the footer is its own block below it, so nothing overlaps. */.side-nav{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#223747 transparent}.side-foot{flex:0 0 auto;margin:20px 5px 0;padding-top:16px;border-top:1px solid #223747}.side-foot .tiny{font-size:10px;letter-spacing:.08em}.workspace-main{min-width:0;flex:1;padding:29px clamp(20px,2.6vw,48px) 65px;max-width:1900px;margin:0 auto}.workspace-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.page-title{font-size:30px;margin:5px 0 5px;letter-spacing:-.055em}.page-sub{color:#7b8d9b;font-size:13px}.workspace-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.workspace-right select,.filters input,.form-grid input,.form-grid select,.form-grid textarea{border:1px solid #d8e4ee;border-radius:10px;padding:11px 12px;color:#1b3244;background:white;min-width:0}.workspace-right select{font-weight:800}.avatar{background:#dce8ed;color:#3b6474;width:41px;height:41px;border-radius:50%;display:grid;place-items:center;font-weight:850}.light-banner{background:#fff8e9;border:1px solid #f4dfb2;padding:13px 17px;border-radius:12px;margin:24px 0 22px;font-size:12px;color:#966823;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:10px}.mini-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:26px}.mini-kpi{padding:21px 20px;background:white;border-radius:14px;border:1px solid #e3ecf3;box-shadow:0 7px 21px rgba(14,49,73,.03)}.mini-label{font-size:11px;text-transform:uppercase;letter-spacing:.10em;color:#8497a5;font-weight:850}.mini-val{font-size:38px;letter-spacing:-.07em;font-weight:850;margin:12px 0 4px}.mini-tip{font-size:11px;color:#89a0af}.mini-kpi.highlight{background:#114e58;border-color:#114e58;color:white}.mini-kpi.highlight .mini-label,.mini-kpi.highlight .mini-tip{color:#9fe5de}.filters{display:flex;gap:12px;align-items:center;margin:24px 0 17px;flex-wrap:wrap}.filters input,.filters select{border:1px solid #e0e8ee;background:white;border-radius:10px;padding:9px 10px;color:#425a6c;font-size:12px}.content-card{background:white;border:1px solid #e2eaf0;box-shadow:0 10px 30px rgba(11,44,68,.03);border-radius:15px;padding:23px;margin-top:17px;overflow:hidden}.content-card h2{font-size:17px;letter-spacing:-.035em;margin:0 0 5px}.content-card p{font-size:12px;color:#8ca0ad;margin:0 0 18px}.light-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:17px}.light-grid .content-card{margin:0}.light-grid .bar-chart .bar-track{background:#edf2f6}.light-grid .bar-name,.light-grid .legend-item,.light-grid .funnel-label{color:#678092}.light-grid .legend-count{color:#183449}.light-grid .funnel-track{background:#edf2f6}.light-grid .funnel-num{color:#27465b}.content-card .chart-box{min-height:235px}.table-wrap{width:100%;overflow:auto}.data-table{width:100%;border-collapse:collapse;text-align:left;min-width:750px}.data-table th{background:#f4f7fa;padding:13px 12px;color:#738899;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.data-table td{padding:14px 12px;border-bottom:1px solid #edf2f6;color:#385066;font-size:12px;vertical-align:middle}.data-table td strong{color:#213a4b}.data-table tr:last-child td{border:0}.data-table tr:hover td{background:#fbfdff}.table-btn{padding:7px 10px;border:1px solid #dce8ec;background:#f4f8fb;color:#346478;border-radius:8px;font-size:11px;font-weight:750}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#728a99;font-weight:800}.form-grid input,.form-grid select,.form-grid textarea{text-transform:none;letter-spacing:normal;font-size:14px;font-weight:500;min-height:42px}.form-grid label.full{grid-column:1/-1}.form-grid textarea{resize:vertical;min-height:75px}.form-footer{grid-column:1/-1;display:flex;align-items:center;gap:14px;justify-content:flex-start;padding-top:9px}.hint{font-size:12px;color:#889ba8;line-height:1.6}.notice{padding:14px 17px;background:#e9f8f5;border:1px solid #bceadf;color:#236a5b;font-size:12px;border-radius:12px}.notice.error{background:#fff0f0;border-color:#f6cbcf;color:#ad3d50}.missing-card{display:grid;grid-template-columns:1fr auto;gap:9px;padding:16px;border:1px solid #e6edf3;border-radius:12px;margin:10px 0;align-items:center}.missing-card strong{display:block;font-size:13px}.missing-card span{font-size:11px;color:#8a9cab}.missing-chips{display:flex;gap:6px;flex-wrap:wrap}.missing-chips span{background:#fef1df;color:#986b27;font-size:10px;padding:6px 9px;border-radius:8px;font-weight:750}.mock-login{min-height:100vh;display:grid;place-items:center;padding:24px}.mock-card{width:min(470px,100%);padding:40px;border-radius:24px;background:white;box-shadow:var(--shadow)}.mock-card h1{letter-spacing:-.05em}.mock-card p{color:#688095;line-height:1.65;font-size:14px}.mock-card .button{margin-top:15px}.error-msg{color:#b84456;margin-top:14px;font-size:12px}.top-pad{margin-top:24px}.segment{display:inline-flex;padding:4px;background:#eaf0f5;border-radius:10px}.segment button{border:0;background:transparent;padding:9px 13px;color:#6b8494;font-size:12px;border-radius:8px;font-weight:800}.segment button.active{background:white;color:#0f5b63;box-shadow:0 2px 8px rgba(0,0,0,.05)}
@media(max-width:1350px){.tv-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.tv-kpi.primary{grid-column:span 2}.widget{grid-column:span min(var(--span,4),6)}.side{width:210px;flex-basis:210px}.tv-top{align-items:flex-start;flex-direction:column}.tv-top-actions{justify-content:flex-start}}
@media(max-width:850px){.tv-shell{padding:19px 14px}.tv-kpis{grid-template-columns:repeat(2,1fr)}.tv-kpi.primary{grid-column:span 2}.widget{grid-column:span 12!important}.tv-top-left{gap:12px}.tv-divider{display:none}.tv-heading{font-size:22px}.tv-kpi{min-height:120px;padding:16px}.tv-kpi-num{font-size:43px}.side{width:66px;flex-basis:66px;padding:18px 7px}.side-brand{padding:0 6px 18px}.side-brand .brand-title,.side-brand .brand-sub,.side-section,.nav-item span:last-child,.side-foot{display:none}.nav-item{justify-content:center;padding:13px 4px}.workspace-main{padding:20px 15px 50px}.page-title{font-size:24px}.mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.light-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.workspace-top{align-items:flex-start;flex-direction:column}}
@media(min-width:1900px){.tv-shell{padding-top:42px}.widget{min-height:var(--widget-height,355px)}.widget-title{font-size:20px}.widget-sub{font-size:13px}.bar-row,.funnel-row,.missing-title{font-size:14px}.tv-kpi{min-height:180px}.tv-kpi-label{font-size:13px}.tv-kpi-hint{font-size:13px}.tv-kpi-num{font-size:65px}.legend-item{font-size:14px}.chart-box{min-height:220px}}

.recruiter-page .ring-svg text:first-of-type{fill:#17374a}.recruiter-page .ring-svg text:nth-of-type(2){fill:#7890a0}
/* True single-screen control-room mode for 1920×1080 office televisions. */
@media (min-width:1600px) and (max-height:1150px){
 .tv-shell{padding-top:15px;padding-bottom:12px}
 .tv-top{margin-bottom:9px}
 .tv-heading{font-size:29px}
 .tv-brand-text .brand-title{font-size:21px}
 .tv-meta-row{margin:6px 0 10px;font-size:10px}
 .demo-strip{margin-bottom:8px;padding:8px 12px;font-size:10px}
 .tv-kpis{margin-bottom:10px;gap:10px}
 .tv-kpi{min-height:112px;padding:13px 19px}
 .tv-kpi-label{font-size:10px}
 .tv-kpi-num{font-size:45px;margin:5px 0 1px}
 .tv-kpi-hint{font-size:10px}
 .tv-widget-grid{gap:10px}
 .widget{min-height:calc(var(--widget-height,300px) * .715);padding:12px 16px}
 .widget-title{font-size:15px}
 .widget-sub{font-size:10px;margin-top:3px}
 .widget-head{margin-bottom:6px}
 .chart-box{min-height:120px}
 .ring-svg{width:min(100%,155px);max-height:158px}
 .legend-list{gap:7px}
 .legend-item{font-size:11px}
 .bar-chart{gap:11px;padding:2px 0}
 .bar-row{font-size:11px}
 .funnel{gap:7px}
 .funnel-row{font-size:11px}
 .funnel-track{height:18px}
 .trend-svg{height:160px}
 .missing-row{padding:6px 0}
 .missing-title{font-size:11px}
 .missing-by{font-size:10px}
 .missing-tags{font-size:10px}
 .tv-foot{margin-top:12px}
}
@media (min-width:1600px) and (max-height:1150px){.widget{min-height:calc(var(--widget-height,300px) * .65)}.tv-shell{padding-top:10px}.tv-kpis{margin-bottom:7px}.tv-foot{margin-top:7px}}
/* Manager views */
.pill.bad{background:#fde4e7;color:#b3263a}
.target-cell{display:flex;flex-direction:column;gap:5px;min-width:130px}
.target-cell input{width:80px;padding:5px 7px;font-size:12px}
.data-table tr.team-row td{background:#f1f7f6;font-weight:700}
.segment-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.chart-stack{display:block;width:100%}
.chart-stack .legend-item{color:#4d6577;font-size:12px}
.trend-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:12px;color:#4d6577}
.trend-legend span{display:inline-flex;align-items:center;gap:6px}
.landing-eyebrow{color:#238f82;margin-top:23px}
.landing-note{font-size:11px;margin-top:26px}
/* Company logo: on a light plate so it stays readable on the dark sidebar and TV. Fixed max height, width scales. */
.logo-plate{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:12px;padding:8px 12px;max-width:100%}
.logo-plate img{display:block;height:auto;width:auto;max-width:100%}
.brand-logo img{max-height:64px}
.side-brand .brand-logo{width:100%}
.tv-logo{padding:8px 14px}
.tv-logo img{max-height:56px;max-width:300px}
.pair-logo{margin-bottom:6px}
.pair-logo img{max-height:72px}
@media(max-width:850px){.side-brand .brand-logo{padding:4px;border-radius:8px}.brand-logo img{max-height:40px}.tv-logo img{max-height:40px;max-width:200px}}
@media(min-width:1900px){.tv-logo img{max-height:72px;max-width:380px}}
/* TV display: one fixed screen that never scrolls. Sizes follow the screen height (vh), so 1366×768 up to 3840×2160 keep the 1920×1080 layout. */
body.tv-live{height:100vh;overflow:hidden}
.tvx-shell{width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;gap:1.8vh;padding:2vh 2vw}
.tvx-head{flex:none;height:8vh;display:flex;align-items:center;justify-content:space-between;gap:2vw;min-width:0}
.tvx-brand{flex:1 1 auto;display:flex;align-items:center;gap:1.2vw;min-width:0}
.tvx-brand .tv-logo,.tvx-meta,.tvx-demo{flex:none}
.tvx-brand .tv-logo{padding:.6vh .8vw}
.tvx-brand .tv-logo img{max-height:4.6vh;max-width:16vw}
.tvx-title{min-width:0;font-size:clamp(18px,2.8vh,68px);font-weight:810;letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-demo{color:#ffcd87;border:1px solid rgba(255,184,101,.35);border-radius:.8vh;padding:.4vh .7vw;font-size:clamp(11px,1.5vh,34px);font-weight:750;white-space:nowrap}
.tvx-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.2vh;color:#a6bbcf;font-size:clamp(12px,1.7vh,40px);white-space:nowrap}
.tvx-meta strong{color:#eaf5ff}
.tvx-meta .live-dot{width:1vh;height:1vh;min-width:8px;min-height:8px}
.tvx-time{line-height:1;font-size:clamp(24px,3.8vh,90px);font-weight:750;color:#eaf5ff;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tvx-teams{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4vw}
.tvx-teams.single{grid-template-columns:minmax(0,1fr)}
.tvx-team{border:1px solid rgba(130,168,197,.16);border-radius:clamp(12px,1.6vh,36px);background:linear-gradient(145deg,rgba(29,57,80,.85),rgba(14,33,52,.95));padding:1.6vh 1.2vw;min-width:0}
.tvx-team h2{margin:0 0 1.2vh;font-size:clamp(18px,2.8vh,66px);font-weight:810;letter-spacing:-.03em;color:var(--teal)}
.tvx-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7vw}
.tvx-kpi{border:1px solid rgba(130,168,197,.12);border-radius:clamp(10px,1.3vh,30px);background:rgba(6,19,33,.35);padding:1.4vh .6vw;min-width:0}
.tvx-kpi.primary{background:linear-gradient(125deg,#106c72,#0b4555 70%,#173353);border-color:rgba(48,224,199,.42)}
.tvx-kpi-num{font-size:clamp(40px,6.6vh,170px);font-weight:850;line-height:1;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.tvx-kpi.primary .tvx-kpi-num{color:#bcfff2}
.tvx-kpi-label{margin-top:.9vh;font-size:clamp(10px,1.35vh,34px);line-height:1.15;height:2.3em;overflow:hidden;text-transform:uppercase;letter-spacing:0;font-weight:800;color:#afc6d7}
.tvx-deadlines{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid rgba(130,168,197,.16);border-radius:clamp(12px,1.6vh,36px);background:linear-gradient(145deg,rgba(29,57,80,.85),rgba(14,33,52,.95));padding:1.4vh 1.4vw}
.tvx-dl-head{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:2vw;margin-bottom:.6vh}
.tvx-dl-head h2{margin:0;font-size:clamp(18px,2.8vh,66px);font-weight:810;letter-spacing:-.03em}
.tvx-dl-head>span{font-size:clamp(14px,2.1vh,50px);color:#a6bbcf;white-space:nowrap;font-variant-numeric:tabular-nums}
.tvx-dl-body{flex:1;min-height:0;overflow:hidden;transition:opacity .4s ease}
.tvx-dl-body.fade{opacity:0}
.tvx-row{height:var(--row,64px);display:grid;grid-template-columns:minmax(0,1fr) 8em 8.5em 12.5em;align-items:center;gap:1.4vw;font-size:clamp(17px,2.4vh,58px);border-bottom:1px solid rgba(173,206,230,.09)}
.tvx-row:last-child{border:0}
.tvx-v{font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-t,.tvx-f{color:#c3d6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-f,.tvx-d{font-variant-numeric:tabular-nums;text-align:right}
.tvx-d{white-space:nowrap}
.tvx-soon{color:var(--rose);font-weight:800}
.tvx-empty{display:grid;place-items:center;height:100%;color:#a6bbcf;font-size:clamp(17px,2.6vh,60px)}
/* TV views: selector in the header, Statistieken, Grafieken and Vacatures per vestiging (same fixed-screen rules). */
.tvx-picker{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.5vh}
.tvx-select{font:inherit;font-size:clamp(15px,2.2vh,52px);font-weight:750;color:#eaf5ff;background:#102338;border:2px solid #2d4660;border-radius:1vh;padding:.5vh 1vw;min-width:14vw;cursor:pointer}
.tvx-select:focus-visible{outline:.45vh solid var(--teal);outline-offset:.3vh;border-color:var(--teal)}
.tvx-mode{display:flex;gap:.8vw;align-items:center;font-size:clamp(11px,1.4vh,32px);color:#a6bbcf;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.tvx-dots{display:flex;gap:.4vw}
.tvx-dots i{width:1vh;height:1vh;min-width:7px;min-height:7px;border-radius:50%;background:#2d4660}
.tvx-dots i.on{background:var(--teal)}
.tvx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tvx-view{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.8vh}
.tvx-inner{flex:1;min-height:0;display:flex;flex-direction:column}
.tvx-row.v5{grid-template-columns:minmax(0,1fr) 8em 7.5em 8em 12.5em}
.tvx-short{color:var(--rose);font-weight:800}
.tvx-stats{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4vw}
.tvx-stats.single{grid-template-columns:minmax(0,1fr)}
.tvx-stat-team{display:flex;flex-direction:column;min-height:0}
.tvx-tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.7vw}
.tvx-tile{border:1px solid rgba(130,168,197,.12);border-radius:clamp(10px,1.3vh,30px);background:rgba(6,19,33,.35);padding:1.2vh .8vw;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tvx-tile.primary{background:linear-gradient(125deg,#106c72,#0b4555 70%,#173353);border-color:rgba(48,224,199,.42)}
.tvx-tile.primary .tvx-kpi-num{color:#bcfff2}
.tvx-tile.warn .tvx-kpi-num{color:var(--rose)}
.tvx-tile.wide{grid-column:span 2}
.tvx-tile.full{grid-column:span 4}
.tvx-of{font-size:.55em;color:#a6bbcf}
.tvx-meter{height:1.2vh;min-height:6px;background:#22364a;border-radius:1vh;margin-top:.8vh;overflow:hidden}
.tvx-meter div{height:100%;background:var(--teal);border-radius:1vh}
.tvx-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8vw;margin-top:.8vh}
.tvx-stages b{display:block;font-size:clamp(28px,4.8vh,115px);font-weight:850;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tvx-stages span{display:block;font-size:clamp(13px,1.8vh,42px);color:#c3d6e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-charts{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:1.6vh 1.4vw}
.tvx-panel{border:1px solid rgba(130,168,197,.16);border-radius:clamp(12px,1.6vh,36px);background:linear-gradient(145deg,rgba(29,57,80,.85),rgba(14,33,52,.95));padding:1.4vh 1.2vw;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.tvx-panel.span2{grid-column:span 2}
.tvx-panel-head{flex:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.4vw;margin-bottom:.6vh;min-width:0}
.tvx-panel-head h2{margin:0;font-size:clamp(16px,2.5vh,60px);font-weight:810;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-legend{display:flex;gap:1.4vw;font-size:clamp(12px,1.9vh,44px);color:#c3d6e6;white-space:nowrap}
.tvx-legend b{color:#eaf5ff}
.tvx-legend i{display:inline-block;width:1.4vh;height:1.4vh;min-width:9px;min-height:9px;border-radius:.3vh;margin-right:.5vw}
.tvx-legend i.staffing,.tvx-bar.staffing{background:var(--teal)}
.tvx-legend i.operators,.tvx-bar.operators{background:var(--blue)}
.tvx-cols{flex:1;min-height:0;display:flex;gap:.6vw}
.tvx-col{flex:1;min-width:0;display:flex;flex-direction:column}
.tvx-col-bars{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;gap:.25vw;padding-top:3vh;border-bottom:1px solid #2d4660}
.tvx-bar{flex:1;max-width:3vw;position:relative;border-radius:.5vh .5vh 0 0}
.tvx-bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:clamp(12px,1.8vh,42px);font-weight:800;padding-bottom:.3vh;white-space:nowrap}
.tvx-col-label{text-align:center;font-size:clamp(11px,1.8vh,42px);color:#a6bbcf;margin-top:.6vh;white-space:nowrap;overflow:hidden}
.tvx-funnels{flex:1;min-height:0;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:1.6vw;align-items:center}
.tvx-funnels h3{margin:0 0 1.2vh;font-size:clamp(14px,2.2vh,52px);color:var(--teal)}
.tvx-shell .funnel{gap:1.4vh;padding:0}
.tvx-shell .funnel-row{grid-template-columns:7.5em minmax(0,1fr) 3em;font-size:clamp(12px,2vh,46px);gap:.8vw}
.tvx-shell .funnel-label{color:#c3d6e6}
.tvx-shell .funnel-track{height:3vh;border-radius:.6vh}
.tvx-shell .funnel-num{font-size:clamp(14px,2.6vh,60px)}
.tvx-shell .empty-chart{font-size:clamp(13px,2vh,46px)}
.tvx-note{flex:none;margin-top:.8vh;font-size:clamp(12px,1.9vh,44px);color:#a6bbcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tvx-note b{color:#eaf5ff}
.tvx-tile .tvx-kpi-label{font-size:clamp(12px,2vh,48px)}
.tvx-tile .tvx-kpi-num{font-size:clamp(44px,7.4vh,180px)}
/* ===== F1 live-timing TV (one fixed screen, sizes in vh so 1366×768 … 3840×2160 keep the 1920×1080 layout) ===== */
body.f1-body{background:var(--bg);font-family:var(--font-text);overflow:hidden}
.t-staffing{--team:var(--team-staffing);--team-dim:var(--team-staffing-dim);--team-glow:var(--glow)}
.t-operators{--team:var(--team-operators);--team-dim:var(--team-operators-dim);--team-glow:var(--glow-ops)}
.f1{position:relative;width:100vw;height:100vh;overflow:hidden;display:grid;grid-template-rows:6vh 27vh 24vh minmax(0,1fr);gap:1.3vh;padding:1.3vh 1.5vw 1.5vh;color:var(--text);background:radial-gradient(ellipse at 15% -10%,rgba(46,230,166,.13),transparent 45%),radial-gradient(ellipse at 90% -10%,rgba(237,213,43,.10),transparent 45%),linear-gradient(180deg,var(--bg-2),var(--bg) 60%)}
.f1>*{position:relative;z-index:1;min-width:0;min-height:0}
.f1-bg{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;background:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 4vw),repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 4vw),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 6px)}
.f1-bg i{position:absolute;left:0;width:45vw;height:2px;background:linear-gradient(90deg,transparent,rgba(46,230,166,.55),transparent);transform:translateX(-60vw);animation:f1-streak 11s linear infinite;will-change:transform}
.f1-bg i:nth-child(1){top:31%}
.f1-bg i:nth-child(2){top:58%;animation-delay:-4s;animation-duration:14s;background:linear-gradient(90deg,transparent,rgba(237,213,43,.45),transparent)}
.f1-bg i:nth-child(3){top:86%;animation-delay:-8s;animation-duration:9s}
@keyframes f1-streak{to{transform:translateX(160vw)}}
/* top bar */
.f1-top{display:flex;align-items:center;justify-content:space-between;gap:2vw;border-bottom:1px solid var(--line)}
.f1-brand{display:flex;align-items:center;gap:1vw;min-width:0}
.f1-brand .tv-logo{flex:none;padding:.5vh .7vw;border-radius:var(--r-sm);clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 1vh) 100%,0 100%)}
.f1-brand .tv-logo img{max-height:3.8vh;max-width:13vw}
.f1-title{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,3.8vh,92px);text-transform:uppercase;letter-spacing:.02em;line-height:1;white-space:nowrap}
.f1-title em{font-style:normal;color:var(--team-staffing);text-shadow:var(--glow)}
.f1-live{flex:none;display:inline-flex;align-items:center;gap:.5vw;font-family:var(--font-display);font-weight:800;font-size:clamp(13px,2.1vh,50px);letter-spacing:.12em;color:#fff;background:var(--sig-bad);padding:.25vh .9vw;transform:skewX(var(--skew));box-shadow:0 0 2vh rgba(255,51,85,.45)}
.f1-live i{width:1vh;height:1vh;min-width:7px;min-height:7px;border-radius:50%;background:#fff;animation:f1-blink 1.2s ease-in-out infinite}
@keyframes f1-blink{50%{opacity:.15}}
.f1-demo{flex:none;font-family:var(--font-display);font-weight:700;font-size:clamp(11px,1.6vh,38px);color:var(--sig-warn);border:1px solid var(--sig-warn);padding:.2vh .6vw;letter-spacing:.06em;text-transform:uppercase}
.f1-clock{flex:none;display:flex;align-items:baseline;gap:1.2vw;white-space:nowrap}
.f1-clock #tvx-date{font-family:var(--font-display);font-weight:600;font-size:clamp(13px,2.1vh,50px);color:var(--text-2);text-transform:uppercase;letter-spacing:.06em}
.f1-clock #clock{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,4.4vh,104px);font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1}
.f1-upd{font-size:clamp(11px,1.7vh,40px);color:var(--text-3)}
.f1-upd b{color:var(--text);font-variant-numeric:tabular-nums}
/* team battle */
.f1-battle{display:grid;grid-template-columns:minmax(0,1fr) 6vw minmax(0,1fr)}
.f1-battle.single{grid-template-columns:minmax(0,1fr)}
.f1-team{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:1.2vh 1.5vw 1.4vh;border-left:.7vh solid var(--team);clip-path:polygon(0 0,calc(100% - 2.6vh) 0,100% 2.6vh,100% 100%,0 100%);
 background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%) 220% 0/250% 100% no-repeat,repeating-linear-gradient(-60deg,var(--team-dim) 0 1px,transparent 1px 1.6vh) right/38% 100% no-repeat,linear-gradient(135deg,var(--panel-2),var(--panel) 65%)}
.f1-team:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--team),transparent 80%);box-shadow:var(--team-glow)}
.f1-team.fx-sweep{animation:f1-sweep 1.2s ease-out}
@keyframes f1-sweep{from{background-position:220% 0,right,0 0}to{background-position:-120% 0,right,0 0}}
.f1-team-head{display:flex;align-items:center;justify-content:space-between;gap:1vw}
.f1-tag{font-family:var(--font-display);font-weight:800;font-size:clamp(18px,3.3vh,80px);text-transform:uppercase;letter-spacing:.05em;color:var(--team);line-height:1}
.f1-lead{font-family:var(--font-display);font-weight:800;font-size:clamp(12px,2vh,48px);text-transform:uppercase;letter-spacing:.1em;color:#041510;background:var(--team);padding:.3vh 1vw;transform:skewX(var(--skew));opacity:0;transition:opacity .4s}
.f1-lead.on{opacity:1;animation:f1-pulse 2.4s ease-in-out infinite}
@keyframes f1-pulse{50%{box-shadow:0 0 2.4vh var(--team)}}
.f1-nums{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8vw}
.f1-num{min-width:0}
.f1-num b{display:block;font-family:var(--font-display);font-weight:800;font-size:clamp(52px,10.2vh,240px);line-height:.88;font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--text)}
.f1-num:first-child b{color:var(--team);text-shadow:var(--team-glow)}
.f1-num span{display:block;margin-top:.5vh;font-family:var(--font-display);font-weight:700;font-size:clamp(12px,2vh,48px);text-transform:uppercase;letter-spacing:.08em;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f1-progress{display:flex;flex-direction:column;gap:.5vh}
.f1-bar{position:relative;height:2.3vh;min-height:10px;background:rgba(255,255,255,.07);transform:skewX(var(--skew));overflow:hidden}
.f1-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--team-dim),var(--team));box-shadow:var(--team-glow);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.f1-bar:after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%);animation:f1-shine 3.2s ease-in-out infinite}
@keyframes f1-shine{60%,100%{transform:translateX(420%)}}
.f1-progress-txt{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-display);font-weight:600;font-size:clamp(13px,2.2vh,52px);color:var(--text-2);text-transform:uppercase;letter-spacing:.04em}
.f1-progress-txt b{color:var(--text);font-variant-numeric:tabular-nums}
.f1-progress-txt .f1-pct{font-weight:800;font-size:clamp(20px,3.6vh,86px);color:var(--team);line-height:1}
.f1-team.done .f1-progress-txt .f1-pct{color:var(--sig-good)}
.f1-vs{display:grid;place-items:center;position:relative}
.f1-vs:before{content:"";position:absolute;top:8%;bottom:8%;width:2px;background:linear-gradient(180deg,var(--team-staffing),transparent 45%,transparent 55%,var(--team-operators));transform:skewX(var(--skew))}
.f1-vs span{position:relative;font-family:var(--font-display);font-weight:800;font-style:italic;font-size:clamp(28px,6vh,140px);color:#fff;background:var(--bg);padding:.5vh .4vw;letter-spacing:.02em;text-shadow:-.3vh 0 var(--team-staffing),.3vh 0 var(--team-operators)}
/* panels */
.f1-mid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1vw}
.f1-bottom{display:grid;grid-template-columns:1.12fr 1fr;gap:1vw}
.f1-panel{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:1vh 1vw 1.1vh;background:linear-gradient(160deg,var(--panel-2),var(--panel) 55%);clip-path:polygon(0 0,calc(100% - 2vh) 0,100% 2vh,100% 100%,0 100%)}
.f1-panel:before{content:"";position:absolute;left:0;top:0;right:0;height:1px;background:linear-gradient(90deg,var(--panel-edge),transparent)}
.f1-panel-head{flex:none;display:flex;align-items:center;gap:1vw;margin-bottom:.8vh;min-width:0}
.f1-panel-head h2{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,2.5vh,60px);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;display:flex;align-items:center;gap:.6vw}
.f1-panel-head h2:before{content:"";width:.6vh;min-width:4px;height:2.2vh;background:var(--team-staffing);transform:skewX(var(--skew));box-shadow:var(--glow)}
.f1-sub{font-size:clamp(11px,1.7vh,40px);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.f1 .bad{font-style:normal;color:var(--sig-bad);font-weight:800}
.f1-page{margin-left:auto;flex:none;font-family:var(--font-display);font-weight:800;font-size:clamp(15px,2.5vh,60px);font-variant-numeric:tabular-nums;color:#041510;background:var(--text);padding:0 .8vw;transform:skewX(var(--skew))}
.f1-page:empty{display:none}
.f1-legend{margin-left:auto;display:flex;gap:.9vw;font-family:var(--font-display);font-weight:700;font-size:clamp(12px,2vh,48px);color:var(--text-2);white-space:nowrap}
.f1-legend b{color:var(--text)}
.f1-legend i{display:inline-block;width:1.6vh;height:.6vh;min-width:10px;min-height:3px;margin-right:.4vw;vertical-align:middle;transform:skewX(var(--skew))}
.sw-staffing{background:var(--team-staffing);box-shadow:var(--glow)}
.sw-operators{background:var(--team-operators);box-shadow:var(--glow-ops)}
.f1-chart{flex:1;min-height:0;position:relative}
.f1-empty{display:grid;place-items:center;height:100%;color:var(--text-3);font-size:clamp(14px,2.2vh,52px)}
.f1-svg{display:block;font-family:var(--font-display);overflow:visible}
.f1-svg text{fill:var(--text-3);font-weight:600}
.f1-svg .g{stroke:var(--line);stroke-dasharray:2 6}
.f1-svg .line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:f1-draw 1.8s cubic-bezier(.4,0,.2,1) forwards}
.f1-svg .glow{fill:none;stroke-width:11;stroke-linejoin:round;opacity:0;animation:f1-glow 1.2s .9s forwards}
.f1-svg .area{opacity:0;animation:f1-fade 1.2s .7s forwards}
.f1-svg .dot{opacity:0;animation:f1-fade .6s 1.5s forwards;stroke:var(--bg);stroke-width:2}
.f1-svg .l-staffing{stroke:var(--team-staffing)}
.f1-svg .l-operators{stroke:var(--team-operators)}
.f1-svg .dot.l-staffing{fill:var(--team-staffing)}
.f1-svg .dot.l-operators{fill:var(--team-operators)}
.f1-svg .a-staffing{fill:url(#fade-staffing)}
.f1-svg .a-operators{fill:url(#fade-operators)}
.s0-staffing{stop-color:#2ee6a6;stop-opacity:.32}
.s1-staffing{stop-color:#2ee6a6;stop-opacity:0}
.s0-operators{stop-color:#edd52b;stop-opacity:.24}
.s1-operators{stop-color:#edd52b;stop-opacity:0}
@keyframes f1-draw{to{stroke-dashoffset:0}}
@keyframes f1-fade{to{opacity:1}}
@keyframes f1-glow{to{opacity:.2}}
.f1-stages{height:100%;display:flex;flex-direction:column;justify-content:space-around}
.f1-stage{display:grid;grid-template-columns:6.4em minmax(0,1fr);align-items:center;gap:.6vw;font-size:clamp(11px,1.75vh,44px);line-height:1.05}
.f1-stage-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f1-stage-bars{display:flex;flex-direction:column;gap:.15vh}
.f1-hbar{display:grid;grid-template-columns:minmax(0,1fr) 2.6em;align-items:center;gap:.5vw}
.f1-hbar i{display:block;height:1vh;min-height:5px;transform-origin:left;transform:scaleX(var(--w,0));animation:f1-growx 1s cubic-bezier(.2,.8,.2,1) backwards}
.f1-hbar b{font-family:var(--font-display);font-weight:800;font-size:1.05em;text-align:right;font-variant-numeric:tabular-nums}
.f1-hbar .b-staffing{background:linear-gradient(90deg,rgba(46,230,166,.35),var(--team-staffing));box-shadow:var(--glow)}
.f1-hbar .b-operators{background:linear-gradient(90deg,rgba(237,213,43,.3),var(--team-operators));box-shadow:var(--glow-ops)}
@keyframes f1-growx{from{transform:scaleX(0)}}
.f1-cols{height:100%;display:flex;gap:.6vw}
.f1-col{flex:1;min-width:0;display:flex;flex-direction:column}
.f1-col-bars{flex:1;min-height:0;display:flex;align-items:flex-end;justify-content:center;gap:.25vw;padding-top:2.8vh;border-bottom:1px solid var(--line)}
.f1-vbar{flex:1;max-width:2.4vw;position:relative;transform-origin:bottom;animation:f1-growy .9s cubic-bezier(.2,.8,.2,1) backwards}
.f1-vbar.b-staffing{background:linear-gradient(0deg,rgba(46,230,166,.25),var(--team-staffing));box-shadow:var(--glow)}
.f1-vbar.b-operators{background:linear-gradient(0deg,rgba(237,213,43,.2),var(--team-operators));box-shadow:var(--glow-ops)}
.f1-vbar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:.3vh;font-family:var(--font-display);font-weight:800;font-size:clamp(12px,2vh,48px);white-space:nowrap}
@keyframes f1-growy{from{transform:scaleY(0)}}
.f1-col-label{text-align:center;margin-top:.5vh;font-family:var(--font-display);font-weight:600;font-size:clamp(11px,1.8vh,44px);color:var(--text-3);white-space:nowrap}
/* timing tower */
.f1-rows{flex:1;min-height:0;overflow:hidden;transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .38s}
.f1-rows.out{transform:translateX(-5%);opacity:0}
.f1-rows.in{transform:translateX(5%);opacity:0;transition:none}
.f1-row{height:var(--row,50px);display:grid;grid-template-columns:1.6em minmax(0,1fr) 2.4em 3.2em 7.8em;align-items:center;gap:.8vw;padding:0 .7vw 0 .5vw;font-size:clamp(16px,2.4vh,56px);border-left:.55vh solid var(--team);border-bottom:1px solid var(--line);background:linear-gradient(90deg,var(--team-dim),transparent 35%)}
.f1-row.v-pl{grid-template-columns:1.6em minmax(0,1fr) 3.6em 4.6em 7.8em}
.f1-pos{font-family:var(--font-display);font-weight:800;color:var(--team);text-align:center;font-variant-numeric:tabular-nums}
.f1-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f1-team-s{font-family:var(--font-display);font-weight:700;color:var(--team);white-space:nowrap}
.f1-fill,.f1-date{font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.f1-row.full .f1-fill{color:var(--sig-good)}
.f1-date.bad{text-shadow:0 0 1.4vh rgba(255,51,85,.55)}
.f1-row.flag{animation:f1-flag 3s steps(1) 1}
@keyframes f1-flag{0%,20%,40%,60%,80%{background:repeating-conic-gradient(#fff 0 25%,#111 0 50%) 0 0/2vh 2vh;color:#111}10%,30%,50%,70%,90%,100%{background:linear-gradient(90deg,var(--team-dim),transparent 35%)}}
/* motion helpers (fx.js), shared with the dashboard */
.fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}
.fx-tick{animation:fx-tick .35s ease-out}
@keyframes fx-tick{from{opacity:.55;transform:translateY(-.08em)}}
.fx-pop{position:absolute;left:0;top:-1vh;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,6vh,140px);color:var(--team,var(--team-staffing));text-shadow:var(--team-glow,var(--glow));pointer-events:none;animation:fx-pop 1.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fx-pop{0%{opacity:0;transform:translateY(2vh) scale(.6)}20%{opacity:1;transform:translateY(0) scale(1.15)}100%{opacity:0;transform:translateY(-5vh) scale(1)}}
/* ===== F1 dashboard theme (same tokens as the TV; restyle only, layout and sizes unchanged) ===== */
.recruiter-page{--teal:var(--team-staffing);--ink:var(--text);background:var(--bg);color:var(--text);font-family:var(--font-text);
 background-image:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,var(--grid) 0 1px,transparent 1px 64px),radial-gradient(ellipse at 70% -20%,rgba(46,230,166,.10),transparent 50%);background-attachment:fixed}
.recruiter-page .mock-login{background:transparent}
.recruiter-page .mock-card{background:linear-gradient(160deg,var(--panel-2),var(--panel));color:var(--text);border-radius:0;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);border-top:2px solid var(--team-staffing);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.recruiter-page .mock-card h1,.recruiter-page .page-title{font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.recruiter-page .mock-card p,.recruiter-page .page-sub,.recruiter-page .hint,.recruiter-page .muted,.recruiter-page .content-card p,.recruiter-page .landing-note{color:var(--text-2)}
.recruiter-page .eyebrow,.recruiter-page .landing-eyebrow{color:var(--team-staffing)}
.recruiter-page .error-msg{color:#ff8296}
/* sidebar */
.recruiter-page .side{background:linear-gradient(180deg,#07100e,#040807);border-right:1px solid var(--line);color:var(--text)}
.recruiter-page .side-brand,.recruiter-page .side-foot{border-color:var(--line)}
.recruiter-page .side-brand .brand-sub,.recruiter-page .side-foot{color:var(--text-3)}
.recruiter-page .side-section{color:var(--text-3);font-family:var(--font-display);font-size:12px;letter-spacing:.2em}
.recruiter-page .nav-item{color:var(--text-2);border-radius:0;position:relative;font-weight:600;font-size:14px;transition:background .15s,color .15s}
.recruiter-page .nav-item:hover{background:rgba(46,230,166,.07);color:var(--text)}
.recruiter-page .nav-item.active{background:linear-gradient(90deg,var(--team-staffing-dim),transparent);color:var(--text)}
.recruiter-page .nav-item.active:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;background:var(--team-staffing);box-shadow:var(--glow);transform:skewX(var(--skew))}
.recruiter-page .side-nav{scrollbar-color:var(--panel-2) transparent}
/* header */
.recruiter-page .page-title{font-size:38px;line-height:1;display:flex;align-items:center;gap:12px}
.recruiter-page .page-title:before{content:"";width:6px;height:.8em;background:var(--team-staffing);box-shadow:var(--glow);transform:skewX(var(--skew));flex:none}
.recruiter-page .avatar{background:var(--panel-2);color:var(--team-staffing);border:1px solid var(--panel-edge);font-family:var(--font-display)}
/* inputs (calm: dark field, clear border, visible focus) */
.recruiter-page .workspace-right select,.recruiter-page .filters input,.recruiter-page .filters select,.recruiter-page .form-grid input,.recruiter-page .form-grid select,.recruiter-page .form-grid textarea,.recruiter-page .target-cell input,.recruiter-page .data-table select,.recruiter-page .mock-card input,.recruiter-page .mock-card select{background:#08110f;color:var(--text);border:1px solid rgba(190,255,230,.22);border-radius:var(--r-sm)}
.recruiter-page input::placeholder,.recruiter-page textarea::placeholder{color:var(--text-3)}
.recruiter-page select option{background:var(--panel);color:var(--text)}
.recruiter-page input[type=date]{color-scheme:dark}
.recruiter-page :is(select,input,textarea):focus{outline:none;border-color:var(--team-staffing);box-shadow:0 0 0 3px rgba(46,230,166,.28)}
.recruiter-page :is(button,a,.nav-item):focus-visible{outline:none;box-shadow:var(--focus)}
.recruiter-page .form-grid label{color:var(--text-2);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.08em}
.recruiter-page .toggle{color:var(--text-2)}
/* buttons */
.recruiter-page .button{background:var(--team-staffing);color:#03160f;border-radius:0;font-family:var(--font-display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.06em;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);padding-left:22px;padding-right:22px;transition:filter .15s,transform .15s}
.recruiter-page .button:hover{filter:brightness(1.12)}
.recruiter-page .button:active{transform:translateY(1px)}
.recruiter-page .button:focus-visible{clip-path:none;box-shadow:var(--focus)}
.recruiter-page .button.secondary{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1px rgba(190,255,230,.22)}
.recruiter-page .button.dark{background:#020504;color:var(--team-staffing)}
.recruiter-page .button.outline,.recruiter-page .button.ghost{background:transparent;color:var(--text)}
.recruiter-page .button.small{font-size:13px;padding:8px 16px}
.recruiter-page .table-btn{background:transparent;color:var(--team-staffing);border:1px solid var(--panel-edge);border-radius:0;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;transform:skewX(var(--skew))}
.recruiter-page .table-btn:hover{background:var(--team-staffing-dim)}
.recruiter-page .segment{background:#08110f;border:1px solid var(--line);border-radius:0}
.recruiter-page .segment button{color:var(--text-2);border-radius:0;font-family:var(--font-display);font-size:14px;letter-spacing:.05em;text-transform:uppercase}
.recruiter-page .segment button.active{background:var(--team-staffing);color:#03160f;box-shadow:none}
/* pills + banners */
.recruiter-page .pill{border-radius:0;font-family:var(--font-display);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.recruiter-page .pill.good{background:rgba(92,255,122,.12);color:var(--sig-good)}
.recruiter-page .pill.warn{background:rgba(255,154,31,.14);color:#ffb35c}
.recruiter-page .pill.bad{background:rgba(255,51,85,.15);color:#ff8296}
.recruiter-page .pill.dim{background:rgba(255,255,255,.07);color:var(--text-2)}
.recruiter-page .pill.example{background:rgba(175,149,255,.15);color:#c7b6ff}
.recruiter-page .light-banner{background:repeating-linear-gradient(-45deg,rgba(255,154,31,.08) 0 10px,transparent 10px 20px),#140f05;border:1px solid rgba(255,154,31,.35);border-radius:0;color:#ffc27a}
.recruiter-page .notice{background:rgba(46,230,166,.08);border:1px solid var(--panel-edge);border-left:4px solid var(--team-staffing);border-radius:0;color:var(--text)}
.recruiter-page .notice.error{background:rgba(255,51,85,.08);border-color:rgba(255,51,85,.4);border-left-color:var(--sig-bad);color:#ffc2cc}
/* KPI tiles: condensed numbers, angled corner */
.recruiter-page .mini-kpi{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--panel-2),var(--panel) 70%);border:0;border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);border-top:2px solid rgba(190,255,230,.14)}
.recruiter-page .mini-label{color:var(--text-2);font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.1em}
.recruiter-page .mini-val{font-family:var(--font-display);font-weight:800;font-size:56px;line-height:.95;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--text)}
.recruiter-page .mini-tip{color:var(--text-3)}
.recruiter-page .mini-kpi.highlight{background:repeating-linear-gradient(-60deg,rgba(46,230,166,.10) 0 1px,transparent 1px 12px) right/45% 100% no-repeat,linear-gradient(150deg,#0f2a22,#0a1a15 70%);border-top-color:var(--team-staffing)}
.recruiter-page .mini-kpi.highlight .mini-val{color:var(--team-staffing);text-shadow:var(--glow)}
.recruiter-page .mini-kpi.highlight .mini-label,.recruiter-page .mini-kpi.highlight .mini-tip{color:var(--text-2)}
/* cards */
.recruiter-page .content-card{background:linear-gradient(165deg,var(--panel-2),var(--panel) 50%);border:0;border-radius:0;box-shadow:none;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.recruiter-page .content-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,var(--panel-edge),transparent 70%)}
.recruiter-page .content-card h2{font-family:var(--font-display);font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.04em}
.recruiter-page .light-grid .bar-chart .bar-track,.recruiter-page .light-grid .funnel-track{background:rgba(255,255,255,.07)}
.recruiter-page .light-grid .bar-name,.recruiter-page .light-grid .legend-item,.recruiter-page .light-grid .funnel-label,.recruiter-page .chart-stack .legend-item,.recruiter-page .trend-legend{color:var(--text-2)}
.recruiter-page .light-grid .legend-count,.recruiter-page .light-grid .funnel-num{color:var(--text);font-family:var(--font-display);font-size:16px}
.recruiter-page .ring-svg text:first-of-type{fill:var(--text)}
.recruiter-page .ring-svg text:nth-of-type(2){fill:var(--text-3)}
.recruiter-page .bar-track,.recruiter-page .funnel-track{border-radius:0;transform:skewX(var(--skew))}
.recruiter-page .bar-fill{border-radius:0;box-shadow:0 0 12px rgba(46,230,166,.3)}
.recruiter-page .funnel-fill{border-radius:0}
.recruiter-page .empty-chart{color:var(--text-3)}
/* tables: timing-tower rows */
.recruiter-page .data-table th{background:#08110f;color:var(--text-2);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.1em;border-bottom:1px solid var(--panel-edge)}
.recruiter-page .data-table td{color:var(--text-2);border-bottom:1px solid var(--line)}
.recruiter-page .data-table td strong{color:var(--text)}
.recruiter-page .data-table tbody tr{transition:background .15s}
.recruiter-page .data-table tr:hover td{background:rgba(46,230,166,.05)}
.recruiter-page .data-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--team-staffing)}
.recruiter-page .data-table tr.team-row td{background:rgba(46,230,166,.08);color:var(--text)}
/* missing data */
.recruiter-page .missing-card{border:1px solid var(--line);border-left:3px solid var(--sig-warn);border-radius:0;background:rgba(255,255,255,.02)}
.recruiter-page .missing-card span{color:var(--text-3)}
.recruiter-page .missing-chips span{background:rgba(255,154,31,.14);color:#ffc27a;border-radius:0}
.recruiter-page .logo-plate{border-radius:var(--r-sm)}
/* motion: entrance for cards and tiles, staggered; off with reduced motion */
@media (prefers-reduced-motion:no-preference){
 .recruiter-page .mini-kpi,.recruiter-page .content-card{animation:f1-in .45s cubic-bezier(.2,.8,.2,1) backwards}
 .recruiter-page .mini-kpi:nth-child(2){animation-delay:.05s}
 .recruiter-page .mini-kpi:nth-child(3){animation-delay:.1s}
 .recruiter-page .mini-kpi:nth-child(4){animation-delay:.15s}
 .recruiter-page .light-grid .content-card:nth-child(2){animation-delay:.08s}
 .recruiter-page .light-grid .content-card:nth-child(3){animation-delay:.14s}
 .recruiter-page .light-grid .content-card:nth-child(4){animation-delay:.2s}
 .recruiter-page .bar-fill,.recruiter-page .funnel-fill{transform-origin:left;animation:f1-growx .9s cubic-bezier(.2,.8,.2,1) backwards}
 .recruiter-page .bar-row:nth-child(2) .bar-fill,.recruiter-page .funnel-row:nth-child(2) .funnel-fill{animation-delay:.06s}
 .recruiter-page .bar-row:nth-child(3) .bar-fill,.recruiter-page .funnel-row:nth-child(3) .funnel-fill{animation-delay:.12s}
 .recruiter-page .bar-row:nth-child(n+4) .bar-fill,.recruiter-page .funnel-row:nth-child(4) .funnel-fill{animation-delay:.18s}
}
@media (prefers-reduced-motion:reduce){.recruiter-page *{animation:none!important;transition:none!important}}
@keyframes f1-in{from{opacity:0;transform:translateY(10px)}}
@media (max-width:720px){.recruiter-page .page-title{font-size:28px}.recruiter-page .mini-val{font-size:44px}}
/* Mail naar collega's: visible validation text and a short toast */
.recruiter-page .hint.mail-error{color:#ff8296;font-weight:700}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:70;background:var(--panel-2);color:var(--text);border:1px solid var(--panel-edge);border-left:4px solid var(--team-staffing);padding:12px 18px;font-weight:600;box-shadow:0 12px 40px rgba(0,0,0,.5);animation:f1-in .25s ease-out}
/* Plaatsingen per week: own vs team bars */
.recruiter-page .wk-col{width:34%}
.recruiter-page .wk-bars{display:grid;gap:3px}
.recruiter-page .wk-bars i{display:block;height:7px;transform-origin:left;transform:scaleX(var(--w,0))}
.recruiter-page .wk-own{background:var(--team-staffing);box-shadow:var(--glow)}
.recruiter-page .wk-team{background:rgba(190,255,230,.28)}
.recruiter-page .segment-row select{background:#08110f;color:var(--text);border:1px solid rgba(190,255,230,.22);padding:9px 10px}
/* TV: placements this week per team (team level, no names) */
.f1-wk{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:clamp(12px,2vh,48px);text-transform:uppercase;letter-spacing:.06em;color:var(--text-2);white-space:nowrap}
.f1-wk b{font-size:1.5em;color:var(--team);font-variant-numeric:tabular-nums;margin-right:.3vw}