*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#080a0f;
--surface:#0e1118;
--surface2:#121620;
--line:#202631;
--line2:#2b3341;
--text:#f1f4f8;
--muted:#707b8d;
--soft:#a4adba;
--accent:#6d7cff;
--green:#5ce6a8;
}
html{scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--text);
font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
min-height:100vh;
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
.app-shell{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
position:fixed;
left:0;
top:0;
bottom:0;
width:230px;
background:#0b0e14;
border-right:1px solid var(--line);
padding:28px 18px 20px;
display:flex;
flex-direction:column;
z-index:50;
}
.logo{
height:48px;
display:flex;
align-items:center;
gap:12px;
padding:0 9px;
margin-bottom:38px;
}
.logo-mark{
width:34px;
height:34px;
border-radius:9px;
display:grid;
place-items:center;
background:#eef1ff;
color:#090b10;
font-size:15px;
font-weight:900;
}
.logo-text{
font-size:14px;
font-weight:800;
letter-spacing:2px;
}
.side-label{
font-size:9px;
letter-spacing:1.7px;
color:#4f5868;
padding:0 12px;
margin-bottom:11px;
}
.side-nav{
display:flex;
flex-direction:column;
gap:4px;
}
.side-nav a{
height:44px;
display:flex;
align-items:center;
gap:13px;
padding:0 12px;
border-radius:9px;
font-size:13px;
color:#747f90;
transition:.2s;
}
.side-nav a:hover{
background:#121721;
color:#dfe5ef;
}
.side-nav a.active{
background:#171c27;
color:#fff;
}
.nav-icon{
width:22px;
font-size:17px;
text-align:center;
color:#8994a7;
}
.side-nav a.active .nav-icon{color:#fff}
.side-bottom{
margin-top:auto;
padding-top:18px;
border-top:1px solid var(--line);
}
.system-mini{
display:flex;
gap:10px;
align-items:center;
padding:8px 9px;
}
.live-dot{
display:block;
width:7px;
height:7px;
border-radius:50%;
background:var(--green);
box-shadow:0 0 10px rgba(92,230,168,.45);
flex:none;
}
.system-mini div{
display:flex;
flex-direction:column;
gap:3px;
}
.system-mini b{
font-size:11px;
font-weight:600;
color:#c7ced9;
}
.system-mini small{
font-size:8px;
color:#4f5968;
}

/* WORKSPACE */
.workspace{
width:calc(100% - 230px);
margin-left:230px;
min-height:100vh;
}
.workspace-header{
height:78px;
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 34px;
position:sticky;
top:0;
background:rgba(8,10,15,.93);
backdrop-filter:blur(18px);
z-index:40;
}
.global-search{
height:39px;
width:min(410px,42vw);
border:1px solid var(--line);
background:#0d1016;
border-radius:9px;
display:flex;
align-items:center;
gap:10px;
padding:0 12px;
color:#596375;
}
.global-search input{
border:0;
outline:0;
background:transparent;
color:#dfe5ef;
width:100%;
font-size:12px;
}
.global-search input::placeholder{color:#505a6a}
.global-search kbd{
font-size:9px;
white-space:nowrap;
color:#626d7d;
border:1px solid #252c37;
border-radius:5px;
padding:3px 6px;
background:#12161d;
}
.account-area{
display:flex;
align-items:center;
gap:11px;
}
.avatar{
width:34px;
height:34px;
border-radius:50%;
display:grid;
place-items:center;
background:#181e29;
border:1px solid #2b3442;
font-size:11px;
font-weight:700;
}
.account-name{
display:flex;
flex-direction:column;
gap:2px;
}
.account-name b{font-size:11px}
.account-name small{
font-size:7px;
letter-spacing:1px;
color:#566071;
}
.logout-link,.login-link{
font-size:11px;
color:#778294;
margin-left:8px;
}
.create-account{
font-size:11px;
padding:9px 13px;
background:#f1f3f7;
color:#0b0d12;
border-radius:7px;
font-weight:700;
}
.mobile-logo,.mobile-nav{display:none}
.workspace-content{
max-width:1370px;
margin:0 auto;
padding:46px 42px 70px;
}

/* HOME */
.welcome-row{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:30px;
margin-bottom:38px;
}
.eyebrow{
display:block;
font-size:9px;
letter-spacing:2px;
color:#596475;
margin-bottom:13px;
}
.welcome-row h1{
font-size:31px;
font-weight:650;
letter-spacing:-1px;
margin-bottom:10px;
}
.welcome-row p{
font-size:13px;
color:#697486;
}
.workspace-status{
min-width:165px;
display:flex;
align-items:center;
gap:11px;
border:1px solid var(--line);
border-radius:10px;
padding:12px 15px;
background:#0c0f15;
}
.workspace-status div{
display:flex;
flex-direction:column;
gap:3px;
}
.workspace-status small{
font-size:7px;
letter-spacing:1.2px;
color:#515b6b;
}
.workspace-status b{
font-size:11px;
font-weight:600;
color:#bfc7d2;
}

/* SERVICE GRID */
.quick-grid{
display:grid;
grid-template-columns:1.35fr 1fr 1fr;
gap:14px;
margin-bottom:14px;
}
.service-box{
min-height:260px;
border:1px solid var(--line);
border-radius:13px;
background:#0d1016;
padding:22px;
display:flex;
flex-direction:column;
position:relative;
overflow:hidden;
transition:.22s;
}
.service-box:hover{
border-color:#343d4d;
background:#10141c;
transform:translateY(-2px);
}
.service-main{
background:linear-gradient(145deg,#111522,#0d1016);
}
.service-main:after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
background:rgba(109,124,255,.12);
filter:blur(70px);
right:-110px;
top:-110px;
pointer-events:none;
}
.service-top{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
z-index:2;
}
.service-icon{
width:36px;
height:36px;
border:1px solid #29313e;
border-radius:9px;
display:grid;
place-items:center;
background:#141923;
font-size:16px;
}
.service-state{
font-size:7px;
letter-spacing:1.2px;
color:#697486;
border:1px solid #242b36;
border-radius:20px;
padding:5px 8px;
}
.service-info{
margin-top:auto;
position:relative;
z-index:2;
}
.service-code{
font-size:8px;
letter-spacing:1.4px;
color:#505a69;
}
.service-info h2{
font-size:20px;
font-weight:600;
margin:8px 0 8px;
}
.service-info p{
font-size:11px;
line-height:1.7;
color:#697486;
max-width:310px;
}
.service-action{
display:flex;
align-items:center;
justify-content:space-between;
padding-top:17px;
margin-top:18px;
border-top:1px solid #1d232d;
font-size:10px;
color:#7d8898;
position:relative;
z-index:2;
}
.service-action b{
font-size:16px;
font-weight:400;
color:#aeb7c5;
transition:.2s;
}
.service-box:hover .service-action b{
transform:translateX(4px);
color:white;
}

/* LOWER PANELS */
.lower-grid{
display:grid;
grid-template-columns:2fr 1fr;
gap:14px;
}
.activity-panel,.account-panel{
border:1px solid var(--line);
border-radius:13px;
background:#0d1016;
min-height:260px;
padding:23px;
}
.section-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
}
.section-head h3,.account-panel h3{
font-size:15px;
font-weight:600;
}
.section-head a{
font-size:9px;
color:#606b7c;
}
.empty-state{
height:165px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.empty-icon{
width:38px;
height:38px;
border-radius:10px;
display:grid;
place-items:center;
border:1px solid #242c38;
background:#11151d;
color:#697486;
margin-bottom:13px;
}
.empty-state b{
font-size:11px;
font-weight:500;
color:#9da6b4;
}
.empty-state p{
font-size:9px;
color:#505a69;
margin-top:6px;
}
.account-panel{
display:flex;
flex-direction:column;
}
.account-panel h3{
font-size:19px;
margin-bottom:9px;
}
.account-panel p{
font-size:11px;
line-height:1.7;
color:#687384;
max-width:280px;
}
.account-panel>a{
margin-top:auto;
font-size:10px;
color:#9da9ff;
}
.account-buttons{
display:flex;
gap:8px;
margin-top:auto;
}
.primary-small,.secondary-small{
padding:10px 14px;
border-radius:7px;
font-size:10px;
font-weight:600;
}
.primary-small{
background:#edf0f5;
color:#0c0e13;
}
.secondary-small{
border:1px solid #29313d;
color:#8e99a9;
}

/* FLASH */
.flash-wrap{
position:fixed;
right:25px;
top:92px;
z-index:100;
width:min(350px,calc(100% - 40px));
}
.flash{
padding:12px 14px;
border:1px solid #29313d;
border-radius:8px;
background:#11151d;
font-size:11px;
box-shadow:0 15px 40px rgba(0,0,0,.35);
}

/* MOBILE */
@media(max-width:900px){
.sidebar{display:none}
.workspace{
width:100%;
margin-left:0;
padding-bottom:70px;
}
.workspace-header{
height:66px;
padding:0 18px;
}
.mobile-logo{
display:flex;
align-items:center;
gap:9px;
font-size:11px;
letter-spacing:1px;
}
.mobile-logo .logo-mark{
width:29px;
height:29px;
font-size:12px;
}
.global-search{
width:38px;
height:38px;
justify-content:center;
margin-left:auto;
margin-right:12px;
}
.global-search input,.global-search kbd{display:none}
.account-name,.logout-link,.login-link{display:none}
.create-account{
padding:8px 10px;
font-size:9px;
}
.workspace-content{
padding:30px 18px 40px;
}
.quick-grid{
grid-template-columns:1fr 1fr;
}
.service-main{
grid-column:1/-1;
}
.lower-grid{
grid-template-columns:1fr;
}
.mobile-nav{
position:fixed;
display:grid;
grid-template-columns:repeat(4,1fr);
left:0;
right:0;
bottom:0;
height:64px;
background:rgba(10,13,18,.96);
backdrop-filter:blur(18px);
border-top:1px solid var(--line);
z-index:80;
}
.mobile-nav a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
font-size:8px;
color:#667182;
}
.mobile-nav a span{
font-size:16px;
color:#8a95a5;
}
}

@media(max-width:560px){
.welcome-row{
align-items:flex-start;
margin-bottom:25px;
}
.welcome-row h1{
font-size:25px;
}
.workspace-status{display:none}
.quick-grid{
grid-template-columns:1fr;
}
.service-main{grid-column:auto}
.service-box{
min-height:210px;
}
.activity-panel,.account-panel{
min-height:220px;
}
.account-area .avatar{display:none}
}

/* Functional pages, preserving the established control-center design. */
.admin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}.admin-tabs a{padding:10px 17px;border:1px solid var(--line);border-radius:8px;color:#adb9ca;font-size:14px}.admin-tabs a.selected{background:#283152;color:white;border-color:#6674c9}.admin-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.admin-columns .form-panel{width:100%;max-width:none;margin:0 0 20px}.form-panel textarea,.catalog-search select{background:#090c12;border:1px solid #343e50;color:#e8edf5;border-radius:8px;padding:12px;width:100%;font:inherit}.catalog-search select{width:150px}.mobile-nav{grid-auto-flow:column;grid-auto-columns:1fr;grid-template-columns:none!important}@media(max-width:700px){.admin-columns{grid-template-columns:1fr}.admin-tabs a{padding:9px 12px}.catalog-search{flex-wrap:wrap}}
.panel,.form-panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:28px;margin-bottom:20px;min-width:0}
.form-panel{max-width:540px;margin:20px auto 30px}
.panel h1,.form-panel h1{font-size:27px;margin-bottom:16px}.panel h2,.form-panel h2{font-size:18px;margin-bottom:20px}
.panel p,.form-panel p{color:#a4adba;font-size:14px;line-height:1.8;margin:12px 0}
.panel strong{display:block;font-size:32px;margin:20px 0}.panel>a,.form-panel p a{color:#aab3ff;display:inline-block;margin-top:14px}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:24px}
.button{display:inline-flex;justify-content:center;align-items:center;border:1px solid #8290ff;background:#6d7cff;color:white;padding:12px 18px;border-radius:8px;font-size:14px;cursor:pointer;min-height:44px}.button:hover{background:#8190ff}.button.secondary{background:#202638;border-color:#38415a}
.form-panel form{display:flex;flex-direction:column;gap:10px;margin:24px 0}.form-panel label{font-size:13px;color:#b4bfce;margin-top:8px}
.form-panel input,.form-panel select,.catalog-search input{width:100%;min-width:0;border:1px solid #343e50;border-radius:8px;background:#090c12;color:#e8edf5;padding:13px;font:inherit}
.form-panel button{margin-top:14px}input:focus,button:focus-visible,a:focus-visible{outline:2px solid #8d9aff;outline-offset:3px}
.catalog-search{display:flex;gap:12px;max-width:680px;margin-bottom:24px}.catalog-search .button{flex-shrink:0}
.text-button,.search-button{background:none;border:0;color:#b9c2d0;cursor:pointer;padding:8px;white-space:nowrap}.global-search input{min-width:0}.global-search{gap:8px}
.notice{padding:15px;border:1px solid #5b4c29;background:#211c12;color:#e7cd94!important;border-radius:8px}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}th,td{padding:16px 12px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:#8593a7;font-weight:500}td a{color:#aab3ff}
dl{display:grid;grid-template-columns:150px 1fr;gap:18px;margin:24px 0;font-size:14px}dt{color:#919eb0}dd{overflow-wrap:anywhere}.pagination{display:flex;gap:20px;margin-top:24px;font-size:13px;color:#a4adba}
.flash{margin:16px 24px;padding:14px;border:1px solid #314c46;border-radius:8px;background:#132b23;color:#b4f4cf}.flash.error{background:#321a22;border-color:#663448;color:#ffd0d8}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:11px;color:#8390a3;display:flex;justify-content:space-between;gap:16px}.service-state{font-size:10px}.mobile-nav{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.global-search{display:none}.account-area{margin-left:auto}.workspace-header{gap:12px}}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr}.panel,.form-panel{padding:20px}.welcome-row{flex-wrap:wrap}footer{flex-direction:column}dl{grid-template-columns:1fr;gap:8px}dd{margin-bottom:12px}.account-area{font-size:12px}.mobile-nav a{font-size:10px}}