.ai-hero{padding:72px 0 52px;background:radial-gradient(circle at 75% 35%,rgba(73,221,255,.18),transparent 22rem)}.ai-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center}.ai-orb{width:min(360px,80vw);aspect-ratio:1;margin:auto;position:relative;display:grid;place-items:center}.orb-core{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;font-size:2.6rem;font-weight:900;color:#03101c;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 70px rgba(73,221,255,.35)}.orbit{position:absolute;border:1px solid rgba(73,221,255,.35);border-radius:50%;animation:spin 12s linear infinite}.o1{inset:18%}.o2{inset:8%;animation-direction:reverse;animation-duration:18s}.o3{inset:0;animation-duration:24s}.node{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent)}.n1{top:12%;left:49%}.n2{right:10%;top:52%}.n3{bottom:11%;left:37%}.n4{left:13%;top:35%}@keyframes spin{to{transform:rotate(360deg)}}
.ai-app{display:grid;grid-template-columns:230px 1fr;gap:22px;padding-top:26px;padding-bottom:76px}.ai-side{position:sticky;top:96px;height:max-content;padding:12px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.045);display:grid;gap:7px}.ai-nav{border:0;border-radius:14px;background:transparent;color:var(--muted);padding:13px;text-align:left;font-weight:800;cursor:pointer}.ai-nav:hover,.ai-nav.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#03101c}.side-status{margin-top:8px;padding:14px;border-top:1px solid var(--line)}.side-status strong,.side-status small{display:block}.side-status small{color:var(--muted);margin-top:6px;font-size:.78rem}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#35e68b;box-shadow:0 0 12px #35e68b;margin-right:7px}.ai-main{min-width:0}.ai-panel{display:none}.ai-panel.is-active{display:block;animation:panelIn .25s ease}@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.panel-head,.card-head,.camera-top,.camera-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px}.panel-head{margin-bottom:18px}.live-pill,.small-btn{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.05);color:var(--text)}.small-btn{cursor:pointer;font-weight:800}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metric-card,.ai-card,.feature{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));box-shadow:0 14px 34px rgba(0,0,0,.16)}.metric-card{padding:17px}.metric-card span,.metric-card small{display:block}.metric-card span{color:var(--muted);font-size:.78rem;text-transform:uppercase;font-weight:800}.metric-card strong{display:block;font-size:1.55rem;margin:7px 0}.metric-card small{color:var(--muted)}.ai-card{padding:20px}.overview-grid,.immersive-grid,.vision-grid,.decision-layout,.alerts-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}.mini-label{display:block;color:var(--accent);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;font-weight:900;margin-bottom:6px}
.city-map{height:360px;position:relative;overflow:hidden;margin:16px 0;border-radius:18px;background:radial-gradient(circle at 30% 30%,rgba(73,221,255,.12),transparent 12rem),linear-gradient(145deg,#0a2136,#071420);border:1px solid var(--line)}.road{position:absolute;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.16)}.r1{left:-10%;right:-10%;height:34px;top:44%;transform:rotate(-8deg)}.r2{top:-10%;bottom:-10%;width:30px;left:51%;transform:rotate(13deg)}.r3{left:10%;right:15%;height:26px;bottom:18%;transform:rotate(5deg)}.city-node{position:absolute;width:88px;height:72px;border-radius:16px;border:1px solid rgba(73,221,255,.55);background:#0b2940;color:white;cursor:pointer;box-shadow:0 0 24px rgba(73,221,255,.12)}.city-node:hover,.city-node.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#03101c;transform:translateY(-2px)}.city-node b,.city-node span{display:block}.city-node b{font-size:1.25rem}.city-node span{font-size:.76rem}.plaza{left:12%;top:18%}.park{right:12%;top:20%}.museum{left:22%;bottom:14%}.station{right:17%;bottom:13%}.data-wave{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:pulse 2s infinite}.w1{left:46%;top:30%}.w2{left:58%;top:65%;animation-delay:.7s}.w3{left:35%;top:53%;animation-delay:1.2s}@keyframes pulse{0%,100%{transform:scale(.7);opacity:.5}50%{transform:scale(1.6);opacity:1}}.activity-feed{display:grid;gap:9px;margin:16px 0;max-height:300px;overflow:auto}.activity-item{padding:11px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035)}.activity-item b,.activity-item span{display:block}.activity-item span{color:var(--muted);font-size:.82rem}
.immersive-scene{height:390px;position:relative;overflow:hidden;border-radius:18px;background:#071827}.scene-sky{position:absolute;inset:0 0 40%;background:radial-gradient(circle at 50% 25%,rgba(73,221,255,.35),transparent 30%),linear-gradient(#07101d,#102b44)}.scene-ground{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(160deg,#17314a,#07121d)}.scene-building{position:absolute;left:22%;right:22%;bottom:26%;height:35%;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#e6f4ff,#7892a7);box-shadow:0 0 50px rgba(73,221,255,.16)}.light-beam{position:absolute;bottom:0;width:18%;height:85%;filter:blur(8px);opacity:.55;clip-path:polygon(48% 0,55% 0,100% 100%,0 100%)}.b1{left:12%;background:rgba(73,221,255,.5);transform:rotate(8deg)}.b2{left:41%;background:rgba(41,214,183,.48)}.b3{right:8%;background:rgba(154,114,255,.48);transform:rotate(-9deg)}.visitor{position:absolute;bottom:13%;font-size:2rem;color:#091019;text-shadow:0 0 6px white}.v1{left:34%}.v2{right:31%}.scene-message{position:absolute;left:8%;right:8%;bottom:5%;padding:10px;text-align:center;border-radius:12px;background:rgba(4,16,29,.76);font-weight:900}.scene-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.scene-stats span{padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.experience-controls label,.decision-console label{display:block;color:var(--muted);font-weight:700;margin:14px 0}.experience-controls input,.experience-controls select,.decision-console select{width:100%;margin-top:7px;padding:11px;border-radius:12px;border:1px solid var(--line);background:#071522;color:white}.experience-controls input[type=range]{padding:0;accent-color:var(--accent)}.experience-controls output{float:right;color:var(--accent)}.choice-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.choice-row button,.event-buttons button{border:1px solid var(--line);border-radius:12px;padding:10px;background:rgba(255,255,255,.04);color:white;cursor:pointer}.choice-row button.active,.choice-row button:hover{background:var(--accent);color:#03101c}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.feature{padding:16px}.feature b,.feature span{display:block}.feature span{color:var(--muted);margin-top:7px;font-size:.9rem}
.camera-stage{padding:0;overflow:hidden}.camera-top,.camera-bottom{padding:11px 14px;background:#06111c;font-size:.82rem}.camera-scene{height:390px;position:relative;overflow:hidden;background:linear-gradient(180deg,#1f3f58 0 45%,#263746 45% 100%)}.crosswalk{position:absolute;left:-10%;right:-10%;bottom:13%;height:95px;background:repeating-linear-gradient(90deg,transparent 0 36px,rgba(255,255,255,.72) 36px 72px);transform:rotate(-3deg)}.person{position:absolute;width:18px;height:46px;background:#101820;border-radius:9px 9px 4px 4px}.p1{left:32%;bottom:30%}.p2{right:28%;bottom:36%}.vehicle{position:absolute;width:105px;height:46px;left:55%;bottom:15%;border-radius:18px 18px 8px 8px;background:#101a25;box-shadow:inset 0 -8px rgba(255,255,255,.08)}.detect-box{position:absolute;left:27%;bottom:25%;width:68px;height:86px;border:2px solid var(--accent);transition:.25s}.detect-box span{position:absolute;left:-2px;top:-25px;padding:3px 7px;background:var(--accent);color:#03101c;font-size:.7rem;font-weight:900;white-space:nowrap}.scan-line{position:absolute;left:0;right:0;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:scan 3s linear infinite}@keyframes scan{0%{top:0}50%{top:100%}100%{top:0}}.event-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.event-buttons button:hover{border-color:#ff7f7f;background:rgba(255,90,90,.12)}.analysis-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:18px}.analysis-steps div{text-align:center;opacity:.4}.analysis-steps div.active{opacity:1}.analysis-steps b{display:grid;place-items:center;width:34px;height:34px;margin:auto;border-radius:50%;background:rgba(255,255,255,.08)}.analysis-steps div.active b{background:var(--accent);color:#03101c}.analysis-steps span{display:block;margin-top:6px;font-size:.7rem}
.rule-list{display:grid;gap:9px;margin-top:15px}.rule{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}.rule input{width:20px;height:20px;accent-color:var(--accent)}.rule b,.rule small{display:block}.rule small{color:var(--muted);margin-top:4px}.decision-output{margin-top:15px;padding:15px;border-radius:14px;border:1px solid var(--line);background:#071522;color:var(--muted);min-height:100px}.response-flow{display:flex;align-items:center;gap:9px;margin-top:16px}.response-flow div{flex:1;text-align:center}.response-flow b{display:grid;place-items:center;width:44px;height:44px;margin:auto;border-radius:50%;background:var(--accent);color:#03101c}.response-flow span{display:block;margin-top:7px;font-size:.82rem}.response-flow i{flex:.35;height:1px;background:var(--line)}
.alert-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;align-content:center;margin:18px auto;background:conic-gradient(#ff6b6b 0 22%,rgba(255,255,255,.08) 22%)}.alert-ring:after{content:"";position:absolute}.alert-ring strong{font-size:2.7rem}.alert-ring span{color:var(--muted)}.alert-summary{text-align:center}.log-header,.alert-row{display:grid;grid-template-columns:75px 90px 1fr;gap:10px;padding:12px}.log-header{color:var(--accent);font-size:.72rem;text-transform:uppercase;font-weight:900}.alert-row{border-top:1px solid var(--line)}.alert-row .critical{color:#ff8e8e;font-weight:900}.alert-row .info{color:var(--accent);font-weight:900}.alert-log{padding:0;overflow:hidden}.toast-ai{position:fixed;right:18px;bottom:18px;z-index:5000;padding:13px 16px;border-radius:14px;background:#0e2b3d;border:1px solid var(--accent);opacity:0;transform:translateY(120%);transition:.25s}.toast-ai.show{opacity:1;transform:none}
@media(max-width:1050px){.ai-hero-grid,.overview-grid,.immersive-grid,.vision-grid,.decision-layout,.alerts-grid{grid-template-columns:1fr}.metric-grid,.feature-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.ai-app{grid-template-columns:1fr}.ai-side{position:static;display:flex;overflow-x:auto}.ai-nav{min-width:max-content}.side-status{display:none}.camera-scene,.immersive-scene{height:310px}}@media(max-width:560px){.metric-grid,.feature-grid,.event-buttons{grid-template-columns:1fr}.analysis-steps{grid-template-columns:repeat(2,1fr)}.response-flow{align-items:stretch;overflow-x:auto}.response-flow div{min-width:120px}.response-flow i{min-width:24px;margin-top:22px}.log-header,.alert-row{grid-template-columns:58px 72px 1fr;font-size:.8rem}}