/*
==========================================
TRIOSS OS
Main Stylesheet
Version 0.1.0
==========================================
*/

:root{

--bg:#09111b;
--bg2:#111b29;

--panel:#121d2b;
--panel2:#192638;

--primary:#57ff9a;
--secondary:#39c7ff;

--danger:#ff5d70;
--warning:#ffb74f;

--text:#ffffff;
--muted:#96a5b8;

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

--shadow:0 20px 60px rgba(0,0,0,.35);

--radius:18px;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Inter",sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

}

a{

color:inherit;

text-decoration:none;

}

button{

font-family:inherit;

cursor:pointer;

border:none;

outline:none;

}

input{

font-family:inherit;

outline:none;

}

.login-page{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

position:relative;

overflow-y:auto;

background:linear-gradient(
135deg,
#08111a,
#101b29,
#08111a
);

}

/* ==========================================
   Animated Background
========================================== */

.background{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}

.blob{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.35;

animation:float 18s ease-in-out infinite;

}

.blob1{

width:500px;

height:500px;

background:#57ff9a;

top:-120px;

left:-150px;

}

.blob2{

width:450px;

height:450px;

background:#39c7ff;

right:-120px;

top:35%;

animation-delay:6s;

}

.blob3{

width:420px;

height:420px;

background:#7a5cff;

bottom:-150px;

left:30%;

animation-delay:12s;

}

@keyframes float{

0%{

transform:translate(0,0) scale(1);

}

25%{

transform:translate(80px,-40px) scale(1.05);

}

50%{

transform:translate(-60px,60px) scale(.95);

}

75%{

transform:translate(40px,-30px) scale(1.08);

}

100%{

transform:translate(0,0) scale(1);

}

}

/* ==========================================
   Login Layout
========================================== */

.login-wrapper{

position:relative;

z-index:2;

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:40px;

}

.login-card{

width:460px;

background:rgba(18,29,43,.78);

backdrop-filter:blur(24px);

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

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

box-shadow:0 30px 70px rgba(0,0,0,.45);

padding:50px;

transition:.35s;

}

.login-card:hover{

transform:translateY(-6px);

box-shadow:0 45px 90px rgba(0,0,0,.55);

}


/* ==========================================
   Logo
========================================== */

.logo{

display:flex;

flex-direction:column;

align-items:center;

margin-bottom:45px;

}

.logo-icon{

width:84px;

height:84px;

border-radius:24px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

font-weight:800;

color:#071018;

box-shadow:
0 0 45px rgba(87,255,154,.35);

margin-bottom:20px;

}

.logo h1{

font-size:38px;

font-weight:800;

letter-spacing:2px;

}

.logo p{

margin-top:8px;

color:var(--muted);

font-size:15px;

}

/* ==========================================
   Login Content
========================================== */

.login-content{

text-align:center;

}

.login-content h2{

font-size:30px;

margin-bottom:12px;

}

.login-content p{

color:var(--muted);

line-height:1.7;

margin-bottom:35px;

}

/* ==========================================
   Google Button
========================================== */

#googleLogin{

width:100%;

height:60px;

border-radius:18px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#08111a;

font-size:17px;

font-weight:700;

transition:.25s;

box-shadow:
0 10px 30px rgba(87,255,154,.25);

}

#googleLogin:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(87,255,154,.35);

}

#googleLogin:active{

transform:scale(.98);

}

/* ==========================================
   Divider
========================================== */

.divider{

height:1px;

background:var(--border);

margin:35px 0;

}

/* ==========================================
   Version
========================================== */

.version{

font-size:13px;

color:var(--muted);

letter-spacing:1px;

}


/* ==========================================
   Entrance Animations
========================================== */

.login-card{

animation:cardEnter .9s ease forwards;

}

.logo{

animation:fadeUp .8s ease forwards;

}

.login-content{

animation:fadeUp 1.1s ease forwards;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes cardEnter{

from{

opacity:0;

transform:translateY(50px) scale(.96);

}

to{

opacity:1;

transform:translateY(0) scale(1);

}

}

/* ==========================================
   Selection
========================================== */

::selection{

background:var(--primary);

color:#08111a;

}

/* ==========================================
   Scrollbar
========================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0b121b;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:999px;

}

/* ==========================================
   Responsive
========================================== */

@media (max-width:768px){

.login-wrapper{

padding:20px;

}

.login-card{

width:100%;

padding:35px;

border-radius:22px;

}

.logo h1{

font-size:30px;

}

.logo-icon{

width:70px;

height:70px;

font-size:34px;

}

.login-content h2{

font-size:24px;

}

#googleLogin{

height:55px;

font-size:16px;

}

}


/* ===================================================
   APP LAYOUT
=================================================== */

.app{

display:flex;

min-height:100vh;

background:transparent;

}

.content{

flex:1;

display:flex;

flex-direction:column;

margin-left:280px;

min-height:100vh;

}

/* ===================================================
   SIDEBAR
=================================================== */

.sidebar{

position:fixed;

top:0;

left:0;

width:280px;

height:100vh;

padding:30px;

display:flex;

flex-direction:column;

justify-content:space-between;

background:rgba(16,24,36,.88);

backdrop-filter:blur(24px);

border-right:1px solid rgba(255,255,255,.06);

z-index:100;

}

.logo{

display:flex;

align-items:center;

gap:18px;

margin-bottom:40px;

}

.logo-text h2{

font-size:28px;

font-weight:800;

}

.logo-text span{

color:var(--muted);

font-size:14px;

}

.sidebar-nav{

display:flex;

flex-direction:column;

gap:12px;

}

.sidebar-nav a{

display:flex;

align-items:center;

gap:16px;

padding:15px 18px;

border-radius:16px;

font-size:16px;

font-weight:600;

transition:.25s;

}

.sidebar-nav a:hover{

background:rgba(255,255,255,.05);

transform:translateX(6px);

}

.sidebar-nav a.active{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#08111a;

}

.sidebar-footer{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

color:var(--muted);

}

.status-dot{

width:12px;

height:12px;

border-radius:50%;

background:#57ff9a;

box-shadow:0 0 18px #57ff9a;

}


/* ===================================================
   TOPBAR
=================================================== */

.topbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:30px 40px;

border-bottom:1px solid rgba(255,255,255,.06);

background:rgba(12,18,28,.55);

backdrop-filter:blur(22px);

position:sticky;

top:0;

z-index:50;

}

.topbar-left h1{

font-size:34px;

font-weight:800;

margin-bottom:6px;

}

.topbar-left p{

color:var(--muted);

font-size:15px;

}

.topbar-right{

display:flex;

align-items:center;

gap:18px;

}

.icon-button{

width:48px;

height:48px;

border-radius:16px;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

background:rgba(255,255,255,.05);

color:white;

transition:.25s;

}

.icon-button:hover{

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#08111a;

transform:translateY(-3px);

box-shadow:0 10px 30px rgba(87,255,154,.30);

}

.user-card{

display:flex;

align-items:center;

gap:14px;

padding:8px 16px;

border-radius:18px;

background:rgba(255,255,255,.05);

transition:.25s;

}

.user-card:hover{

background:rgba(255,255,255,.08);

}

.user-avatar{

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:20px;

background:linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#08111a;

}

.user-info{

display:flex;

flex-direction:column;

}

.username{

font-weight:700;

}

.role{

font-size:13px;

color:var(--muted);

}


/* ===================================================
   DASHBOARD
=================================================== */

.dashboard{

padding:40px;

display:flex;

flex-direction:column;

gap:35px;

}

/* ===================================================
   CARD GRID
=================================================== */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:24px;

}

/* ===================================================
   CARD
=================================================== */

.card{

background:rgba(18,29,43,.78);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.06);

border-radius:22px;

padding:26px;

transition:.25s;

box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(0,0,0,.35);

border-color:rgba(87,255,154,.35);

}

.card h3{

font-size:15px;

font-weight:600;

color:var(--muted);

margin-bottom:16px;

}

.card h2{

font-size:34px;

font-weight:800;

margin-bottom:12px;

}

.card p{

color:var(--muted);

line-height:1.6;

}

/* ===================================================
   PANEL
=================================================== */

.panel{

background:rgba(18,29,43,.78);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.06);

border-radius:22px;

padding:28px;

box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.panel h2{

margin-bottom:22px;

font-size:24px;

}

/* ===================================================
   CONSOLE
=================================================== */

.console{

background:#090d14;

border-radius:16px;

padding:20px;

font-family:Consolas,Monaco,monospace;

font-size:14px;

line-height:1.8;

color:#57ff9a;

min-height:320px;

overflow-y:auto;

border:1px solid rgba(255,255,255,.05);

box-shadow:inset 0 0 30px rgba(0,0,0,.4);

}

.console div{

margin-bottom:6px;

white-space:pre-wrap;

word-break:break-word;

}

/* ===================================================
   FOOTER
=================================================== */

.footer{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 40px;

margin-top:auto;

color:var(--muted);

font-size:14px;

border-top:1px solid rgba(255,255,255,.06);

background:rgba(12,18,28,.45);

backdrop-filter:blur(16px);

}


/* ===================================================
   QUICK ACTION BUTTONS
=================================================== */

.quick-actions{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:15px;

}


.action{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

min-width:150px;

height:60px;

padding:0 28px;

border-radius:18px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.06);

color:white;

font-size:16px;

font-weight:700;

transition:.25s;

box-shadow:0 10px 30px rgba(0,0,0,.2);

}


.action:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(0,0,0,.35);

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

}


.action:active{

transform:scale(.96);

}


/* Start */

.action.primary{

background:linear-gradient(
135deg,
#57ff9a,
#22c55e
);

color:#071018;

box-shadow:

0 15px 35px rgba(87,255,154,.25);

}


.action.primary:hover{

box-shadow:

0 25px 55px rgba(87,255,154,.45);

}


/* Restart */

.action.warning{

background:linear-gradient(
135deg,
#ffd166,
#ff9f1c
);

color:#111;

}


/* Stop */

.action.danger{

background:linear-gradient(
135deg,
#ff5d70,
#ff3555
);

color:white;

}


/* Mobile */

@media(max-width:768px){

.quick-actions{

flex-direction:column;

}


.action{

width:100%;

}

}



/* ===================================================
   TRIOSS UI POLISH
=================================================== */


/* Smooth page loading */

.content{

animation:contentFade .6s ease forwards;

}


@keyframes contentFade{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* ===================================================
   Status Styling
=================================================== */

.status-online{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 15px;

border-radius:999px;

background:rgba(87,255,154,.12);

color:#57ff9a;

font-weight:700;

font-size:14px;

}


.status-online::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#57ff9a;

box-shadow:0 0 15px #57ff9a;

}


/* ===================================================
   Better Console
=================================================== */

.console::-webkit-scrollbar{

width:8px;

}


.console::-webkit-scrollbar-thumb{

background:#57ff9a;

border-radius:20px;

}


.console div::before{

content:"> ";

color:#39c7ff;

}


/* ===================================================
   Card Accent Effects
=================================================== */

.card:nth-child(1){

border-top:3px solid #57ff9a;

}


.card:nth-child(2){

border-top:3px solid #39c7ff;

}


.card:nth-child(3){

border-top:3px solid #7a5cff;

}


.card:nth-child(4){

border-top:3px solid #ffb74f;

}


/* ===================================================
   Button Click Animation
=================================================== */

button.clicked{

transform:scale(.94)!important;

}


/* ===================================================
   Mobile Improvements
=================================================== */

@media(max-width:900px){


.sidebar{

width:80px;

padding:20px 12px;

}


.logo-text,
.sidebar-nav span,
.sidebar-footer span{

display:none;

}


.content{

margin-left:80px;

}


.sidebar-nav a{

justify-content:center;

padding:15px;

}


.topbar{

padding:20px;

}


.user-info{

display:none;

}


.dashboard{

padding:20px;

}


}


@media(max-width:600px){


.sidebar{

display:none;

}


.content{

margin-left:0;

}


.topbar-left h1{

font-size:24px;

}


.topbar-right{

gap:8px;

}


.card h2{

font-size:26px;

}


}


/*
==========================================
TRIOSS OS
Application Layout
==========================================
*/


.app{

display:flex;

min-height:100vh;

}



/* SIDEBAR */

.sidebar{

width:260px;

height:100vh;

position:fixed;

left:0;

top:0;

background:var(--panel);

border-right:1px solid var(--border);

padding:30px 20px;

z-index:10;

}



.logo{

margin-bottom:40px;

}


.logo h2{

font-size:26px;

color:var(--primary);

}


.logo p{

color:var(--muted);

font-size:14px;

}



.sidebar nav{

display:flex;

flex-direction:column;

gap:10px;

}



.sidebar nav a{

padding:14px 16px;

border-radius:12px;

color:var(--muted);

transition:.25s;

}



.sidebar nav a:hover,
.sidebar nav a.active{

background:var(--panel2);

color:var(--text);

}



.sidebar nav a.active{

border-left:3px solid var(--primary);

}



/* MAIN CONTENT */

.content{

margin-left:260px;

width:calc(100% - 260px);

min-height:100vh;

}



/* TOPBAR */


.topbar{

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

background:rgba(18,29,43,.7);

border-bottom:1px solid var(--border);

backdrop-filter:blur(20px);

}



.topbar-left h2{

font-size:22px;

}



.topbar-right{

display:flex;

align-items:center;

gap:15px;

}



.user-box{

background:var(--panel2);

padding:10px 16px;

border-radius:12px;

}



.top-link{

padding:10px 15px;

border-radius:12px;

background:var(--panel2);

}



.top-link:hover{

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

}



.top-link.danger{

color:var(--danger);

}



/* DASHBOARD */


.dashboard{

padding:35px;

}



.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

margin-bottom:30px;

}



.card{

background:var(--panel);

border:1px solid var(--border);

border-radius:var(--radius);

padding:25px;

box-shadow:var(--shadow);

}



.card h3{

color:var(--muted);

font-size:15px;

margin-bottom:12px;

}



.card h2{

font-size:30px;

}



/* PANELS */


.panel{

background:var(--panel);

border:1px solid var(--border);

border-radius:var(--radius);

padding:30px;

box-shadow:var(--shadow);

}



/* CONSOLE */


.console{

background:#05080d;

border-radius:14px;

padding:20px;

height:420px;

overflow-y:auto;

font-family:monospace;

color:#57ff9a;

margin-top:20px;

}



.console-input{

display:flex;

gap:10px;

margin-top:15px;

}



.console-input input{

flex:1;

padding:14px;

background:var(--panel2);

border:1px solid var(--border);

color:white;

border-radius:12px;

}



button{

padding:12px 20px;

border-radius:12px;

background:var(--primary);

color:#06100b;

font-weight:700;

}



.action.warning{

background:var(--warning);

}


.action.danger{

background:var(--danger);

color:white;

}



.panel-actions{

display:flex;

gap:15px;

margin-top:25px;

}


.action{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

text-decoration:none;

}


.google-login{

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

width:100%;

margin-top:10px;

background:#fff;

color:#111;

border-radius:12px;

padding:14px;

font-weight:700;

transition:.2s;

}


.google-login:hover{

transform:translateY(-2px);

opacity:.9;

}


.login-card input{

width:100%;
height:58px;

margin-bottom:18px;

padding:0 20px;

border-radius:16px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

color:white;

font-size:16px;

transition:.25s;

}


.login-card input::placeholder{

color:var(--muted);

}


.login-card input:focus{

border-color:var(--primary);

box-shadow:0 0 20px rgba(87,255,154,.25);

background:rgba(255,255,255,.08);

}


.login-card form button{

width:100%;

}