body.ai-os{font-family:var(--font-main);background:var(--bg-deep);color:var(--text)}
.ai-grid-bg{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,black,transparent 75%);z-index:0;pointer-events:none}
.os-layout{position:relative;z-index:2;display:flex;min-height:100vh}
.os-sidebar{position:fixed;right:0;top:0;bottom:0;width:var(--sidebar-width);padding:25px 18px;background:rgba(5,8,22,.78);backdrop-filter:blur(25px);border-left:1px solid var(--border);z-index:20}
.os-brand{height:75px;display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--border);padding-bottom:20px}
.os-brand img{width:52px;height:52px;object-fit:contain}
.os-brand span{font-size:34px;font-weight:900;background:linear-gradient(90deg,var(--blue),var(--purple));-webkit-background-clip:text;color:transparent}
.os-menu{margin-top:25px;display:flex;flex-direction:column;gap:8px}
.os-menu a{height:52px;display:flex;align-items:center;gap:15px;padding:0 16px;border-radius:18px;color:var(--muted);transition:.35s}
.os-menu a:hover,.os-menu a.active{color:#fff;background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(124,58,237,.28));box-shadow:0 0 30px rgba(37,99,235,.18)}
.os-icon{font-size:22px;width:25px;text-align:center}
.os-main{margin-right:var(--sidebar-width);width:calc(100% - var(--sidebar-width));padding:25px}
.os-header{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);backdrop-filter:blur(25px)}
.os-search{height:45px;width:350px;display:flex;align-items:center;padding:0 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--muted)}
.os-user{display:flex;align-items:center;gap:15px}
.os-avatar{width:45px;height:45px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 25px rgba(37,99,235,.5)}
.os-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:25px;backdrop-filter:blur(25px);transition:.35s}
.os-card:hover{background:var(--bg-panel-hover);transform:translateY(-4px);box-shadow:0 0 35px rgba(37,99,235,.15)}
.os-workspace{margin-top:25px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:25px}
.command-center{display:flex;align-items:center;justify-content:space-between;min-height:260px;overflow:hidden;position:relative}
.command-center:before{content:"";position:absolute;width:400px;height:400px;right:-180px;top:-150px;background:radial-gradient(circle,rgba(37,99,235,.35),transparent 70%)}
.command-title{font-size:clamp(22px,2vw,34px);font-weight:900;line-height:1.7;max-width:700px;position:relative;z-index:2}
.command-title span{background:linear-gradient(90deg,var(--blue),var(--purple));-webkit-background-clip:text;color:transparent}
.command-text{margin-top:15px;color:var(--muted);font-size:17px;line-height:2}
.ai-orb{width:170px;height:170px;display:flex;align-items:center;justify-content:center;position:relative}
.orb-core{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:900;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 0 60px rgba(37,99,235,.8);animation:orbPulse 3s infinite}
.orb-ring{position:absolute;inset:10px;border-radius:50%;border:2px solid rgba(255,255,255,.25);animation:orbRotate 8s linear infinite}
.orb-ring:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:var(--cyan);top:-9px;left:50%;box-shadow:0 0 25px var(--cyan)}
@keyframes orbPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes orbRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ai-chat{min-height:520px;display:flex;flex-direction:column}
.ai-chat h2{font-size:26px;margin-bottom:20px}
.ai-chat-box{flex:1;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px;text-align:center}
.ai-input{height:60px;display:flex;align-items:center;padding:0 20px;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:20px}
.ai-input input{flex:1;background:none;border:0;color:#fff;font-size:15px}
.ai-input button{width:45px;height:45px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff}
.intelligence-panel{display:flex;flex-direction:column;gap:20px}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.panel-title span{color:var(--muted);font-size:13px}
.memory-item,.task-item,.notify-item{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);color:var(--muted)}
.memory-item:last-child,.task-item:last-child,.notify-item:last-child{border:0}
.agent-grid{margin-top:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.agent-card{padding:22px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:22px;transition:.35s}
.agent-card:hover{transform:translateY(-8px);border-color:rgba(37,99,235,.6);box-shadow:0 0 35px rgba(37,99,235,.25)}
.agent-card h3{margin-bottom:10px;font-size:19px}
.agent-card p{color:var(--muted);line-height:1.8}
.dashboard-grid{margin-top:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.dashboard-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:25px;padding:25px}
.dashboard-item h3{margin-bottom:20px;font-size:20px}
.dashboard-item p{color:var(--muted);line-height:2;margin-bottom:8px}
.os-mobile-btn{display:none;position:fixed;top:95px;right:20px;width:45px;height:45px;border-radius:15px;border:1px solid var(--border);background:rgba(255,255,255,.08);color:#fff;z-index:100;font-size:22px}
.mobile-bottom{display:none}
@media(max-width:1200px){
.os-sidebar{right:-300px;transition:.4s}
.os-sidebar.open{right:0}
.os-mobile-btn{display:block}
.os-main{margin-right:0;width:100%}
.os-workspace{grid-template-columns:1fr}
.agent-grid{grid-template-columns:repeat(2,1fr)}
.dashboard-grid{grid-template-columns:repeat(2,1fr)}
.os-search{width:250px}
}
@media(max-width:700px){
.os-main{padding:15px;padding-top:95px}
.os-header{height:70px;padding:0 15px}
.os-search{width:150px;font-size:12px}
.os-user strong,.os-user small{display:none}
.os-avatar{width:40px;height:40px}
.command-center{flex-direction:column;text-align:center;padding:20px;gap:30px}
.command-title{font-size:24px}
.command-text{font-size:14px}
.ai-orb{width:140px;height:140px}
.orb-core{width:75px;height:75px;font-size:42px}
.os-card{padding:20px}
.ai-chat{min-height:420px}
.ai-chat-box{font-size:16px}
.agent-grid{grid-template-columns:1fr}
.dashboard-grid{grid-template-columns:1fr}
.mobile-bottom{display:flex;position:fixed;bottom:15px;right:15px;left:15px;height:65px;background:rgba(5,8,22,.85);border:1px solid var(--border);backdrop-filter:blur(25px);border-radius:25px;align-items:center;justify-content:space-around;z-index:200}
.mobile-bottom a{color:#fff;font-size:22px}
}
.os-card,.agent-card,.os-sidebar{animation:fadeUp .6s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}