:root{--bg:#f5f6f8;--surface:#fff;--surface-2:#f0f2f5;--surface-3:#e6e9ee;--text:#17191d;--muted:#676d78;--faint:#9298a3;--line:rgba(20,24,32,.12);--line-strong:rgba(20,24,32,.19);--blue:#397fcf;--blue-strong:#246bbd;--blue-soft:rgba(57,127,207,.11);--green:#3d9363;--green-soft:rgba(61,147,99,.12);--orange:#bd743f;--orange-soft:rgba(189,116,63,.13);--red:#cc5a50;--red-soft:rgba(204,90,80,.12);--shadow:0 1px 2px rgba(0,0,0,.04),0 12px 34px rgba(25,32,45,.05);--radius:16px}
.dark{--bg:#191919;--surface:#202020;--surface-2:#282828;--surface-3:#323232;--text:#fff;--muted:rgba(255,255,255,.65);--faint:rgba(255,255,255,.4);--line:rgba(255,255,255,.11);--line-strong:rgba(255,255,255,.18);--blue:#5e9fe8;--blue-strong:#76b3f8;--blue-soft:rgba(94,159,232,.13);--green:#72bc8f;--green-soft:rgba(114,188,143,.12);--orange:#de9255;--orange-soft:rgba(222,146,85,.13);--red:#e97366;--red-soft:rgba(233,115,102,.13);--shadow:0 1px 0 rgba(255,255,255,.03),0 16px 48px rgba(0,0,0,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"DM Sans",Arial,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer}svg{width:18px;height:18px;stroke-width:1.8}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mono-note,.count-badge,.app-meta,.meter-label b,.scanner-status,.code-panel{font-family:"JetBrains Mono",monospace}
.app-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px)}.header-inner{width:min(1380px,100%);height:70px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none;min-width:190px}.brand>span:last-child{display:flex;flex-direction:column;line-height:1.15}.brand b{font-size:16px;letter-spacing:-.02em}.brand small{color:var(--green);font-size:11px;margin-top:4px}.brand-mark{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#6eacf2,#3479c8);box-shadow:inset 0 1px rgba(255,255,255,.25)}.brand-mark svg{width:20px;height:20px}.main-nav{display:flex;align-items:center;gap:3px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.tab-btn{height:34px;padding:0 13px;border:0;border-radius:8px;color:var(--muted);background:transparent;display:flex;align-items:center;gap:7px;font-weight:600;font-size:13px;transition:.16s}.tab-btn svg{width:15px}.tab-btn:hover{color:var(--text);background:var(--surface-2)}.tab-btn.active,.tab-btn.bg-white,.dark .tab-btn.dark\:bg-slate-800{color:var(--text);background:var(--surface-3);box-shadow:none}.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:190px}.presence-pill{display:flex;align-items:center;gap:7px;color:var(--green);border:1px solid var(--line);background:var(--surface);border-radius:9px;height:34px;padding:0 11px;font-size:12px;font-weight:600}.status-dot,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}.status-dot.muted{background:var(--faint);box-shadow:none}
.shell{width:min(1240px,100%);margin:0 auto;padding:42px 28px 72px}.page-stack{display:flex;flex-direction:column;gap:20px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:4px}.page-heading h1{font-size:28px;line-height:1.15;letter-spacing:-.04em;margin:4px 0 7px}.page-heading p:not(.eyebrow){color:var(--muted);margin:0}.eyebrow,.label{font-size:11px;line-height:1.2;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--faint);margin:0}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.compact-card{padding:19px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.card-heading h2{font-size:26px;letter-spacing:-.04em;margin:7px 0 0}.card-heading h3{font-size:16px;line-height:1.35;letter-spacing:-.02em;margin:6px 0 0}.card-heading>small{color:var(--faint)}
.button,.icon-button,.text-button{border:0;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:650}.button{min-height:38px;padding:8px 14px;border-radius:9px;white-space:nowrap}.button svg{width:16px;height:16px}.button-small{min-height:34px;padding:6px 11px;font-size:12px}.button-primary{background:var(--blue);color:#fff}.button-primary:hover{background:var(--blue-strong);transform:translateY(-1px)}.button-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.button-secondary:hover,.button-quiet:hover{background:var(--surface-3)}.button-quiet{background:transparent;color:var(--muted);border:1px solid transparent}.button-danger{background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 26%,transparent)}.button-danger:hover{background:color-mix(in srgb,var(--red) 19%,transparent)}.icon-button{width:34px;height:34px;border-radius:9px;background:var(--surface);color:var(--muted);border:1px solid var(--line)}.icon-button:hover{color:var(--text);background:var(--surface-2)}.text-button{background:transparent;color:var(--muted);margin:auto;padding:5px}.text-button:hover{color:var(--text)}.full{width:100%}.button-group,.action-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.monitor-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,0.95fr);gap:20px;align-items:start}.hero-card{padding:28px;background:radial-gradient(circle at 90% 10%,var(--blue-soft),transparent 34%),var(--surface)}.app-meta{display:grid;gap:0;margin:24px 0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--surface-2)}.app-meta>div{display:grid;grid-template-columns:82px minmax(0,1fr);gap:16px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12px}.app-meta>div:last-child{border:0}.app-meta span{color:var(--faint)}.app-meta strong{font-weight:500;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meter-block{padding-top:2px}.meter-label{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin-bottom:9px}.meter-label b{font-size:11px;color:var(--text)}.progress-track{height:7px;background:var(--surface-3);border-radius:20px;overflow:hidden}.progress-track>div{height:100%;border-radius:20px;background:var(--blue);transition:width .3s}.progress-track.slim{height:5px}.thresholds{display:flex;justify-content:space-between;color:var(--faint);font-size:10px;margin-top:8px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat-card{min-width:0;display:flex;align-items:center;gap:14px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:14px}.stat-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--blue);background:var(--blue-soft);flex:0 0 auto}.stat-card>div:last-child{min-width:0;display:flex;flex-direction:column}.stat-card span{font-size:11px;color:var(--faint)}.stat-card b{font-size:21px;line-height:1.25;letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-card b span{font-size:12px;margin-left:2px}.stat-card small{color:var(--muted);font-size:11px}.sim-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.sim-grid-2col{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:14px}.sim-btn{display:flex;align-items:center;gap:11px;text-align:left;color:var(--text);background:var(--surface-2);border:1px solid transparent;border-radius:10px;padding:12px;transition:.15s}.sim-btn:hover{border-color:var(--line-strong);background:var(--surface-3)}.sim-btn>svg{color:var(--blue);width:17px}.sim-btn span{display:flex;flex-direction:column;min-width:0}.sim-btn b{font-size:12px}.sim-btn small{font-size:10px;color:var(--faint)}
.presence-state{display:flex;justify-content:space-between;gap:12px;margin:22px 0 10px}.presence-state b{font-size:12px;color:var(--green)}.presence-state span{font-size:10px;color:var(--faint)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 0;margin:4px 0}.toggle-row>span{display:flex;flex-direction:column}.toggle-row b{font-size:12px}.toggle-row small{color:var(--faint);font-size:10px}.toggle-row input{position:absolute;opacity:0}.toggle-row i{position:relative;width:34px;height:20px;border-radius:20px;background:var(--surface-3);border:1px solid var(--line);transition:.2s}.toggle-row i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;left:2px;top:2px;background:var(--muted);transition:.2s}.toggle-row input:checked+i{background:var(--blue)}.toggle-row input:checked+i:after{left:16px;background:#fff}.count-badge,.model-chip{display:inline-flex;align-items:center;gap:7px;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:10px}.cooldown-list{min-height:100px;margin-top:14px}.empty-state{height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:var(--faint);font-size:11px}.empty-state svg{width:24px}.clean-list{list-style:none;padding:6px 0;margin:12px 0}.clean-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}.clean-list span{color:var(--muted)}.clean-list b{color:var(--green);font-weight:600}.security-summary .card-heading>svg{color:var(--blue)}
.alert-banner{padding:13px 15px;border-radius:11px;border:1px solid color-mix(in srgb,var(--orange) 32%,transparent);background:var(--orange-soft);color:var(--orange)}.hud{position:fixed!important;z-index:80!important;top:18px!important;left:50%!important;transform:translateX(-50%)!important;width:min(650px,calc(100% - 28px))!important;display:flex!important;align-items:center!important;gap:12px!important;padding:12px!important;border-radius:13px!important;background:rgba(24,24,24,.94)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;box-shadow:0 20px 60px rgba(0,0,0,.32)!important;backdrop-filter:blur(18px)!important}.hud-icon{width:36px;height:36px;border-radius:9px;background:rgba(94,159,232,.15);color:#76b3f8;display:grid;place-items:center;flex:none}.hud-copy{display:flex;flex-direction:column;min-width:0;flex:1}.hud-copy strong{font-size:12px}.hud-copy span{font-size:11px;color:rgba(255,255,255,.63);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hud .icon-button{background:transparent;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.7)}
.hud.hidden{display:none!important}
.toolbar-card{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}.toolbar-card>div:first-child{display:flex;flex-direction:column}.toolbar-card span,.danger-card span{font-size:11px;color:var(--muted)}.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.policy-grid .glass-panel{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important;padding:19px!important}.policy-grid .glass-panel:hover{border-color:var(--line-strong)!important;transform:translateY(-1px)}.principle-card{display:flex;align-items:flex-start;gap:13px;background:var(--blue-soft);box-shadow:none}.principle-card>svg{color:var(--blue);flex:none}.principle-card b{font-size:13px}.principle-card p{color:var(--muted);margin:3px 0 0;font-size:12px}
.two-column{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);gap:20px}.camera-stage{position:relative;height:410px;margin:20px 0;background:#111;border:1px solid var(--line);border-radius:13px;overflow:hidden}.camera-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,255,255,.46)}.camera-placeholder svg{width:46px;height:46px;margin-bottom:14px}.camera-placeholder b{color:rgba(255,255,255,.76)}.camera-placeholder span{font-size:11px;margin-top:5px}.face-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:240px;border:1px solid rgba(94,159,232,.45);border-radius:46%}.face-frame i{position:absolute;width:23px;height:23px}.face-frame i:nth-child(1){left:-2px;top:-2px;border-left:3px solid var(--blue);border-top:3px solid var(--blue);border-radius:8px 0 0}.face-frame i:nth-child(2){right:-2px;top:-2px;border-right:3px solid var(--blue);border-top:3px solid var(--blue);border-radius:0 8px 0 0}.face-frame i:nth-child(3){left:-2px;bottom:-2px;border-left:3px solid var(--blue);border-bottom:3px solid var(--blue);border-radius:0 0 0 8px}.face-frame i:nth-child(4){right:-2px;bottom:-2px;border-right:3px solid var(--blue);border-bottom:3px solid var(--blue);border-radius:0 0 8px}.scan-line{position:absolute;left:18%;right:18%;height:1px;top:22%;background:var(--blue);box-shadow:0 0 12px var(--blue);animation:scan 2.2s ease-in-out infinite}.scanner-status{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--faint)}.enroll-progress{margin-bottom:17px}.enroll-progress>div:first-child{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-bottom:7px}.pipeline{display:flex;flex-direction:column;gap:6px;margin-top:18px}.pipeline>div{display:flex;align-items:center;gap:11px;padding:11px;background:var(--surface-2);border-radius:9px}.pipeline>div>svg{color:var(--blue)}.pipeline>div>span{display:flex;flex-direction:column}.pipeline b{font-size:12px}.pipeline small{font-size:10px;color:var(--faint)}.pipeline>svg{width:14px;margin:auto;color:var(--faint)}.danger-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.danger-card>div{display:flex;flex-direction:column}
.vision-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}.screen-preview{height:330px;margin-top:18px;border-radius:12px;border:1px solid var(--line);background:#151515;display:grid;place-items:center;overflow:hidden}.preview-app,#screenPreviewInner>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:rgba(255,255,255,.8);padding:28px}.preview-app svg,#screenPreviewInner svg{width:42px;height:42px;color:var(--blue)}.preview-app span,#screenPreviewInner span{font-size:11px;color:rgba(255,255,255,.45);max-width:340px}.analysis-card{display:flex;flex-direction:column;gap:24px}.reason-box{padding:16px;background:var(--surface-2);border-radius:11px;border-left:2px solid var(--blue)}.reason-box span{font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;font-weight:700}.reason-box p{font-size:13px;color:var(--muted);margin:6px 0 0}.token-cloud{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}.token-cloud span{border-radius:999px!important;padding:4px 8px!important;font-family:"JetBrains Mono",monospace;font-size:10px!important}.code-panel{margin:16px 0 0;padding:18px;min-height:160px;max-height:280px;overflow:auto;border-radius:11px;background:#151515;color:#a8ccef;border:1px solid var(--line);font-size:11px;line-height:1.7;white-space:pre-wrap}.model-chip{font-size:11px;padding:6px 10px}.chart-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px}.chart-card{min-height:370px}.chart-wrap{height:285px;margin-top:10px;position:relative}.analytics-stats{grid-template-columns:repeat(4,1fr)}.insight-card{display:flex;align-items:flex-start;gap:17px;padding:24px}.insight-icon{width:40px;height:40px;border-radius:10px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;flex:none}.insight-card h3{font-size:17px;margin:6px 0}.insight-card p{color:var(--muted);margin:0}
.modal-overlay{position:fixed;z-index:70;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:20px}.modal-overlay.flex{display:flex}.modal-card,.lock-card{width:min(470px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.38)}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.modal-heading h2{display:flex;align-items:center;gap:9px;font-size:19px;margin:0}.stack-form{display:flex;flex-direction:column;gap:14px}.stack-form label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;font-weight:600}.stack-form input,.stack-form select,.pin-row input{width:100%;height:40px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 11px;outline:none}.stack-form input:focus,.stack-form select:focus,.pin-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.lock-card{text-align:center;width:min(420px,100%)}.lock-brand{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:22px}.lock-camera{position:relative;width:170px;height:170px;border-radius:50%;margin:0 auto 20px;background:#121212;overflow:hidden;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}.lock-camera video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.lock-camera #lockStaticIcon svg{width:52px;height:52px;color:var(--blue)}.lock-card h2{font-size:23px;margin:0}.lock-card>p{color:var(--muted);font-size:12px;margin:8px 0 20px}.lock-card>.button{margin-top:8px}.pin-row{display:flex;gap:8px;margin-top:11px}.form-error{display:block;color:var(--red);font-size:11px;margin-top:7px}.intervention-card{text-align:center}.intervention-icon{width:54px;height:54px;margin:0 auto 15px;border-radius:15px;display:grid;place-items:center;color:var(--orange);background:var(--orange-soft)}.intervention-icon svg{width:26px;height:26px}.intervention-card h2{font-size:23px;margin:7px 0}.intervention-card>p{color:var(--muted)}.intervention-detail{display:flex;justify-content:space-between;text-align:left;background:var(--surface-2);border-radius:9px;padding:12px;margin:18px 0;color:var(--muted);font-size:11px}.intervention-detail b{color:var(--text);font-weight:600}
@keyframes scan{0%,100%{top:22%;opacity:.55}50%{top:76%;opacity:1}}@media(max-width:768px){.main-nav{position:fixed;left:20px;right:20px;bottom:16px;z-index:50;justify-content:space-around;box-shadow:0 14px 46px rgba(0,0,0,.3)}.tab-btn{flex:1;justify-content:center}.shell{padding-bottom:110px}.monitor-layout,.two-column{grid-template-columns:1fr}.header-inner{height:64px}.brand,.header-actions{min-width:auto}}
@media(max-width:760px){.header-inner{padding:0 16px}.presence-pill{display:none}.shell{padding:28px 16px 100px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .button{width:100%}.page-heading h1{font-size:25px}.monitor-layout{gap:14px}.card,.hero-card{padding:18px}.stats-grid,.analytics-stats,.policy-grid,.vision-layout,.chart-grid,.side-column{grid-template-columns:1fr}.sim-grid{grid-template-columns:1fr 1fr}.thresholds span:nth-child(2),.thresholds span:nth-child(3){display:none}.camera-stage{height:330px}.toolbar-card,.danger-card{align-items:flex-start;flex-direction:column}.toolbar-card .button-group,.danger-card .button{width:100%}.action-row .button{flex:1}.main-nav{left:8px;right:8px;bottom:8px;padding:3px}.tab-btn{padding:0 7px;gap:4px;flex-direction:column;height:48px;font-size:9px}.tab-btn svg{width:16px}.hud-copy span{display:none}.hud .button{display:none}.app-meta>div{grid-template-columns:64px 1fr}.form-grid{grid-template-columns:1fr}.chart-card{min-height:340px}}
@media(max-width:760px){.header-inner{padding:0 16px}.presence-pill{display:none}.shell{padding:28px 16px 100px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .button{width:100%}.page-heading h1{font-size:25px}.monitor-layout{gap:14px}.card,.hero-card{padding:18px}.stats-grid,.analytics-stats,.policy-grid,.vision-layout,.chart-grid,.side-column{grid-template-columns:1fr}.sim-grid{grid-template-columns:1fr 1fr}.thresholds span:nth-child(2),.thresholds span:nth-child(3){display:none}.camera-stage{height:330px}.toolbar-card,.danger-card{align-items:flex-start;flex-direction:column}.toolbar-card .button-group,.danger-card .button{width:100%}.action-row .button{flex:1}.main-nav{left:8px;right:8px;bottom:8px;padding:3px}.tab-btn{padding:0 7px;gap:4px;flex-direction:column;height:48px;font-size:9px}.tab-btn svg{width:16px}.hud-copy span{display:none}.hud .button{display:none}.app-meta>div{grid-template-columns:64px 1fr}.form-grid{grid-template-columns:1fr}.chart-card{min-height:340px}}
@media(max-width:430px){.header-actions .button span{display:none}.brand small{display:none}.sim-grid{grid-template-columns:1fr}.stat-card{padding:15px}.modal-overlay{padding:10px}.modal-card,.lock-card{padding:19px}}

.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid transparent}
.status-badge svg{width:14px;height:14px}
.status-good{color:var(--green);background:var(--green-soft);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.status-warn{color:var(--orange);background:var(--orange-soft);border-color:color-mix(in srgb,var(--orange) 30%,transparent)}
.status-bad{color:var(--red);background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.status-neutral{color:var(--blue);background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.glow-cyan{box-shadow:0 0 10px rgba(6,182,212,.4)}
.glow-amber{box-shadow:0 0 10px rgba(245,158,11,.5)}
.glow-rose{box-shadow:0 0 10px rgba(244,63,94,.6)}
.demo-indicator{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600;background:var(--orange-soft);color:var(--orange);border:1px solid var(--orange)}

/* ============================================================
   AI GOAL PLANNER COMPONENT STYLES
   ============================================================ */
.goal-composer-card{background:linear-gradient(135deg,rgba(57,127,207,.08),transparent 60%),var(--surface);border:1px solid color-mix(in srgb,var(--blue) 28%,transparent);position:relative;overflow:hidden}
.goal-input-container{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.goal-input-area{width:100%;min-height:56px;padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);font-size:14px;resize:vertical;outline:none;transition:.2s}
.goal-input-area:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.prompt-chips{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px}
.prompt-chip{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:11px;transition:.15s;display:inline-flex;align-items:center;gap:5px}
.prompt-chip:hover{background:var(--surface-3);color:var(--text);border-color:var(--line-strong)}
.clarification-box{background:var(--orange-soft);border:1px solid color-mix(in srgb,var(--orange) 35%,transparent);border-radius:10px;padding:12px 14px;margin-top:10px;display:flex;flex-direction:column;gap:8px}
.clarification-options{display:flex;gap:8px;flex-wrap:wrap}
.clarification-btn{background:var(--surface);border:1px solid color-mix(in srgb,var(--orange) 40%,transparent);color:var(--orange);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600}
.clarification-btn:hover{background:color-mix(in srgb,var(--orange) 15%,transparent)}

/* Plan Preview Modal & Panels */
.plan-preview-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.interval-timeline{display:flex;gap:4px;width:100%;height:10px;border-radius:8px;overflow:hidden;background:var(--surface-3);margin:14px 0}
.interval-segment{height:100%;transition:opacity .2s;border-radius:2px}
.interval-segment.focus{background:var(--blue)}
.interval-segment.short_break{background:var(--green)}
.interval-segment.long_break{background:var(--orange)}
.interval-segment.review{background:#9333ea}
.interval-list{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;padding-right:4px}
.interval-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--surface-2);border-radius:8px;border:1px solid var(--line);font-size:12px}
.tag-container{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag-pill{display:inline-flex;align-items:center;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:11px;color:var(--text)}
.tag-pill.blocked{border-color:color-mix(in srgb,var(--red) 30%,transparent);color:var(--red);background:var(--red-soft)}
.tag-pill.allowed{border-color:color-mix(in srgb,var(--blue) 30%,transparent);color:var(--blue);background:var(--blue-soft)}

/* Active Goal Session Card */
.active-goal-card{background:radial-gradient(circle at 95% 5%,rgba(57,127,207,.14),transparent 40%),var(--surface);border:1px solid var(--blue);box-shadow:0 0 20px rgba(57,127,207,.12)}
.active-timer-huge{font-family:"JetBrains Mono",monospace;font-size:32px;font-weight:700;line-height:1.1;color:var(--text)}
.interval-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.interval-pill.focus{background:var(--blue-soft);color:var(--blue);border:1px solid var(--blue)}
.interval-pill.break{background:var(--green-soft);color:var(--green);border:1px solid var(--green)}
.interval-pill.review{background:rgba(147,51,234,.12);color:#c084fc;border:1px solid #9333ea}

/* ============================================================
   SIMPLIFIED FOCUS UI COMPONENTS
   ============================================================ */

/* What you're doing now card */
.activity-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;transition:border-color .2s}
.activity-card.is-aligned{border-color:color-mix(in srgb,var(--green) 38%,transparent);background:radial-gradient(ellipse at 95% 5%,var(--green-soft),transparent 50%),var(--surface)}
.activity-card.is-distracted{border-color:color-mix(in srgb,var(--red) 38%,transparent);background:radial-gradient(ellipse at 95% 5%,var(--red-soft),transparent 50%),var(--surface)}
.activity-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.activity-app-title{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--text);margin:4px 0 2px}
.activity-app-sub{font-size:13px;color:var(--muted);line-height:1.4}
.activity-alignment-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.activity-alignment-pill.aligned{background:var(--green-soft);color:var(--green);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.activity-alignment-pill.distracted{background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,transparent);animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}
.activity-consequence-box{margin-top:16px;padding:12px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12px}
.activity-consequence-box strong{color:var(--text);font-weight:600}
.activity-consequence-box span{color:var(--muted)}

/* Focus Protection & Policy Settings (Collapsible) */
.protection-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .2s ease}
.protection-summary-header{padding:18px 22px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;user-select:none;transition:background .15s}
.protection-summary-header:hover{background:var(--surface-2)}
.protection-summary-left{display:flex;align-items:center;gap:12px}
.protection-icon-badge{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);flex-shrink:0}
.protection-meta-title{font-size:15px;font-weight:700;color:var(--text);margin:0}
.protection-meta-subtitle{font-size:12px;color:var(--muted);margin-top:2px}
.protection-summary-right{display:flex;align-items:center;gap:12px}
.chevron-rotate{transition:transform .2s ease}
.chevron-rotate.expanded{transform:rotate(180deg)}
.protection-body{padding:0 22px 22px;border-top:1px solid var(--line);display:none}
.protection-body.expanded{display:block;animation:fadeIn .2s ease}

/* Chips & Tags Editor */
.chips-container{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:36px;margin:8px 0}
.chip-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:12px;font-weight:600;transition:.15s}
.chip-item.allowed{background:var(--blue-soft);color:var(--blue);border:1px solid color-mix(in srgb,var(--blue) 25%,transparent)}
.chip-item.blocked{background:var(--red-soft);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 25%,transparent)}
.chip-delete-btn{background:transparent;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.65;transition:opacity .15s}
.chip-delete-btn:hover{opacity:1}
.chip-delete-btn svg{width:13px;height:13px}
.chip-add-input{display:flex;align-items:center;gap:6px;margin-top:6px}
.chip-add-input input{flex:1;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;font-size:12px;color:var(--text);outline:none}
.chip-add-input input:focus{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-soft)}

/* Developer Diagnostics Drawer */
.developer-badge-banner{background:color-mix(in srgb,var(--orange) 15%,transparent);border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);color:var(--orange);border-radius:10px;padding:9px 14px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.developer-drawer{border-top:2px dashed color-mix(in srgb,var(--orange) 40%,transparent);padding-top:24px;margin-top:24px}

@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:760px){
  .activity-header{flex-direction:column;align-items:flex-start}
  .protection-summary-header{padding:14px 16px}
  .protection-body{padding:0 16px 16px}
  .activity-consequence-box{flex-direction:column;align-items:flex-start}
}

/* Simulator Target Buttons */
.sim-target-btn {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: left;
  transition: all 0.16s ease;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  width: 100%;
}
.sim-target-btn:hover {
  background: var(--surface-3);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.sim-target-btn.is-active {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2px var(--blue-soft), 0 4px 12px rgba(57, 127, 207, 0.15) !important;
  background: var(--surface-3) !important;
}
.sim-target-btn.hover-emerald:hover {
  border-color: rgba(16, 185, 129, 0.5);
}
.sim-target-btn.hover-rose:hover {
  border-color: rgba(244, 63, 94, 0.5);
}
.sim-target-btn.hover-cyan:hover {
  border-color: rgba(6, 182, 212, 0.5);
}