/* =====================================================
   Glass AI Dashboard V3
   Premium Performance Glass System
===================================================== */


:root{

    --bg:#050706;

    --glass:
    rgba(255,255,255,.055);

    --border:
    rgba(255,255,255,.13);

    --white:
    rgba(255,255,255,.92);

    --muted:
    rgba(255,255,255,.45);

    --green:#00ff9d;

    --blue:#00b7ff;


    --mx:50%;

    --my:50%;


}





*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html,
body{


    width:100%;

    min-height:100%;


}





body{


    background:

    radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(0,255,150,.12),
    transparent 40%
    ),

    var(--bg);


    color:white;


    font-family:

    Inter,
    "SF Pro Display",
    system-ui,
    sans-serif;


    overflow-x:hidden;


}







/* ================================
背景光
================================ */



.background{


position:fixed;

inset:0;

pointer-events:none;

z-index:-1;


}



.light{


position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.45;


}



.light-green{


width:500px;

height:500px;


background:

rgba(0,255,140,.15);


top:10%;

left:45%;


animation:

floatGreen 14s infinite alternate;


}



.light-blue{


width:400px;

height:400px;


background:

rgba(0,140,255,.12);


right:-100px;

bottom:-100px;


}




@keyframes floatGreen{


from{

transform:translate3d(-50px,0,0);

}


to{

transform:translate3d(60px,40px,0);

}


}







/* ================================
玻璃系统
================================ */


.glass-panel{


position:relative;


background:

linear-gradient(

145deg,

rgba(255,255,255,.11),

rgba(255,255,255,.035)

);


border:

1px solid var(--border);



box-shadow:


inset 0 1px 0 rgba(255,255,255,.2),


0 30px 80px rgba(0,0,0,.45);



backdrop-filter:

blur(18px);



-webkit-backdrop-filter:

blur(18px);



overflow:hidden;



}





.glass-panel::before{


content:"";


position:absolute;


inset:0;



background:

linear-gradient(

120deg,

rgba(255,255,255,.18),

transparent 30%

);



opacity:.35;



pointer-events:none;


}







/* ================================
顶部
================================ */



.topbar{


position:fixed;


top:20px;

left:50%;


transform:translateX(-50%);


width:

calc(100% - 40px);


height:72px;


border-radius:28px;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 24px;


z-index:10;



}





.brand{


display:flex;


align-items:center;


gap:14px;



}



.brand-icon{


width:42px;

height:42px;


border-radius:16px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(0,255,150,.15);


color:var(--green);


box-shadow:

0 0 30px rgba(0,255,150,.35);



}



.brand h1{


font-size:18px;


}


.brand span{


font-size:12px;

color:var(--muted);


}






.header-status{


display:flex;

align-items:center;

gap:15px;


}



.online-dot{


width:10px;

height:10px;


border-radius:50%;


background:var(--green);


box-shadow:

0 0 15px var(--green);


}





.header-status button{


background:none;

border:0;


color:white;

font-size:25px;


}








/* ================================
布局
================================ */



.dashboard{


display:grid;


grid-template-columns:

260px 1fr;


gap:25px;


padding:

120px 30px 30px;



}







/* ================================
导航
================================ */



.navigation{


height:

calc(100vh - 150px);


border-radius:32px;


padding:25px;


display:flex;


flex-direction:column;


}



.profile{


display:flex;

gap:15px;

align-items:center;


margin-bottom:45px;


}



.avatar{


width:55px;

height:55px;


border-radius:20px;


display:flex;

align-items:center;

justify-content:center;


background:

rgba(0,255,150,.15);


color:var(--green);


}




.profile p{


font-size:13px;

color:var(--muted);


}





nav{


display:flex;

flex-direction:column;


gap:8px;


}





nav a{


padding:14px 16px;


border-radius:18px;


color:var(--muted);


text-decoration:none;


display:flex;


gap:15px;


}



nav a.active,
nav a:hover{


background:

rgba(255,255,255,.09);


color:white;


}








.system-card{


margin-top:auto;


padding:20px;


border-radius:24px;


background:

rgba(0,0,0,.18);


}



.system-card strong{


display:block;


font-size:36px;


margin:10px 0;


}




.mini-progress{


height:6px;


background:

rgba(255,255,255,.1);


border-radius:10px;


}



.mini-progress div{


width:90%;


height:100%;


background:

var(--green);


border-radius:inherit;


}





/* ================================
工作区
================================ */


.workspace{


display:grid;


grid-template-columns:

2fr 1fr;


gap:25px;


}





.headline{


grid-column:

1/-1;


}


.headline h2{


font-size:42px;


}



.headline p{


color:var(--muted);


margin-top:8px;


}




/* ================================
数据卡
================================ */



.metrics{


grid-column:

1/-1;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:20px;


}



.metric{


padding:25px;


border-radius:28px;


}



.metric span{


color:var(--muted);


}


.metric strong{


display:block;


font-size:45px;


margin:15px 0;


}



.metric em{


font-style:normal;

color:var(--green);


}

/* ================================
AI CORE
================================ */


.core{


border-radius:36px;


padding:28px;


min-height:520px;


}




.section-title{


display:flex;


align-items:center;


justify-content:space-between;


}



.section-title h3{


font-size:20px;


font-weight:600;


}



.section-title span{


font-size:12px;


padding:7px 14px;


border-radius:30px;


background:

rgba(0,255,150,.12);


color:var(--green);


}





.core-space{


height:430px;


display:flex;


align-items:center;


justify-content:center;


perspective:900px;


}





.orbit{


width:300px;

height:300px;


position:relative;


display:flex;


align-items:center;


justify-content:center;


transform-style:preserve-3d;


}





.orbit-ring{


position:absolute;


inset:0;


border-radius:50%;


border:

1px solid rgba(255,255,255,.15);


transform:

rotateX(70deg);


animation:

rotateRing 12s linear infinite;


}





.orbit-ring::after{


content:"";


position:absolute;


width:8px;

height:8px;


border-radius:50%;


background:var(--green);


top:0;

left:50%;


box-shadow:

0 0 25px var(--green);


}






@keyframes rotateRing{


to{

transform:

rotateX(70deg)
rotateZ(360deg);

}


}







.core-card{


width:170px;


height:220px;


border-radius:32px;


position:relative;


display:flex;


align-items:center;


justify-content:center;


flex-direction:column;


background:

linear-gradient(

145deg,

rgba(0,255,150,.18),

rgba(255,255,255,.05)

);


border:

1px solid rgba(255,255,255,.2);


transform:

translateZ(80px);


box-shadow:


0 0 80px rgba(0,255,150,.18);



}



.core-card strong{


font-size:22px;


z-index:2;


}



.core-card p{


color:var(--muted);


margin-top:8px;


z-index:2;


}





.core-light{


position:absolute;


width:120px;


height:120px;


border-radius:50%;


background:

var(--green);


filter:blur(45px);


opacity:.35;


animation:

corePulse 3s infinite;


}



@keyframes corePulse{


50%{

transform:scale(1.35);

opacity:.55;

}


}







/* ================================
状态模块
================================ */


.status{


padding:28px;


border-radius:36px;


}




.health{


height:180px;


display:flex;


flex-direction:column;


align-items:center;


justify-content:center;


}




.health strong{


font-size:72px;


letter-spacing:-4px;


background:

linear-gradient(

135deg,

white,

var(--green)

);


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}




.health span{


color:var(--muted);


}





.progress{


height:10px;


background:

rgba(255,255,255,.1);


border-radius:20px;


overflow:hidden;


margin:20px 0;


}




.progress div{


width:87%;


height:100%;


background:

linear-gradient(

90deg,

var(--green),

var(--blue)

);


box-shadow:

0 0 25px var(--green);


}






.status ul{


list-style:none;


display:flex;


flex-direction:column;


gap:12px;


}



.status li{


display:flex;


justify-content:space-between;


padding:16px;


border-radius:20px;


background:

rgba(255,255,255,.04);


color:var(--muted);


}



.status b{


color:white;


}








/* ================================
实时数据
================================ */


.timeline{


grid-column:

1/-1;


height:260px;


padding:28px;


border-radius:36px;


}



.chart{


height:150px;


margin-top:30px;


display:flex;


align-items:flex-end;


justify-content:space-around;


gap:15px;


}



.chart i{


display:block;


width:26px;


border-radius:20px 20px 0 0;


background:

linear-gradient(

180deg,

var(--green),

rgba(0,255,150,.15)

);


box-shadow:

0 0 25px rgba(0,255,150,.3);


animation:

chartMove 3s infinite ease-in-out;


}



.chart i:nth-child(1){

height:35%;

}



.chart i:nth-child(2){

height:70%;

animation-delay:.2s;

}



.chart i:nth-child(3){

height:50%;

animation-delay:.4s;

}



.chart i:nth-child(4){

height:90%;

animation-delay:.6s;

}



.chart i:nth-child(5){

height:60%;

animation-delay:.8s;

}



.chart i:nth-child(6){

height:80%;

animation-delay:1s;

}



.chart i:nth-child(7){

height:45%;

animation-delay:1.2s;

}





@keyframes chartMove{


50%{

transform:scaleY(.75);

}


}







/* ================================
交互优化
================================ */



.glass-panel{


contain:paint;


will-change:transform;


}




/* ================================
移动端
================================ */



@media(max-width:900px){


.dashboard{


display:block;


padding:110px 16px 25px;


}



.navigation{


display:none;


}



.workspace{


display:flex;


flex-direction:column;


}



.headline h2{


font-size:32px;


}



.metrics{


grid-template-columns:

1fr;


}



.metric strong{


font-size:36px;


}



.core{


min-height:430px;


}



.core-space{


height:350px;


}



.orbit{


width:240px;

height:240px;


}



.core-card{


width:140px;

height:190px;


}



.status{


order:3;


}



.timeline{


height:220px;


}



}



@media(max-width:500px){


.topbar{


height:64px;


border-radius:22px;


}



.brand h1{


font-size:16px;


}



.header-status span{


display:none;


}



.headline h2{


font-size:28px;


}



.chart i{


width:18px;


}


}

/* =====================================================
   Performance Mode
===================================================== */


.pause-animation *{


animation-play-state:paused!important;


}





.low-power .light{


filter:blur(45px);


}



.low-power .glass-panel{


backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);


}