:root{
--bg:#07111f;
--bg-soft:#0f1b2d;
--panel:#132238;
--panel-strong:#182b45;
--border:rgba(148,163,184,.16);
--text:#e5eefb;
--muted:#93a4bc;
--primary:#36c2b4;
--primary-dark:#1b8f85;
--danger:#f87171;
--danger-soft:rgba(248,113,113,.14);
--secondary:#4f8cff;
--shadow:0 24px 60px rgba(2,8,23,.28);
}

*{
box-sizing:border-box;
}

html{
color-scheme:dark;
}

body{
margin:0;
min-height:100vh;
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
background:
radial-gradient(circle at top left, rgba(54,194,180,.12), transparent 26%),
radial-gradient(circle at top right, rgba(79,140,255,.12), transparent 24%),
linear-gradient(180deg, #091220 0%, #0c1628 100%);
color:var(--text);
}

a{
color:inherit;
}

.sidebar{
position:fixed;
inset:0 auto 0 0;
width:260px;
padding:28px 22px;
background:rgba(5,10,18,.9);
border-right:1px solid var(--border);
backdrop-filter:blur(16px);
}

.brand{
margin-bottom:32px;
}

.brand-kicker,
.eyebrow{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:rgba(54,194,180,.12);
color:#7ce8dd;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}

.brand h2{
margin:14px 0 0;
font-size:24px;
line-height:1.2;
}

.nav{
display:flex;
flex-direction:column;
gap:10px;
}

.nav-link{
padding:14px 16px;
border-radius:16px;
text-decoration:none;
color:var(--muted);
font-weight:600;
transition:.2s ease;
}

.nav-link:hover,
.nav-link.active{
background:rgba(79,140,255,.12);
color:var(--text);
}

.nav-link-muted{
margin-top:10px;
border:1px solid var(--border);
}

.content{
margin-left:260px;
padding:36px;
}

.page-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:28px;
}

.page-head h1{
margin:12px 0 8px;
font-size:34px;
line-height:1.1;
}

.page-subtitle,
.panel-header p,
.login-subtitle{
margin:0;
max-width:720px;
color:var(--muted);
line-height:1.6;
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:18px;
margin-bottom:28px;
}

.card,
.panel,
.login-box{
background:linear-gradient(180deg, rgba(24,43,69,.96) 0%, rgba(16,29,47,.96) 100%);
border:1px solid var(--border);
border-radius:24px;
box-shadow:var(--shadow);
}

.card{
padding:22px;
position:relative;
overflow:hidden;
}

.card::after{
content:"";
position:absolute;
inset:auto -24px -24px auto;
width:110px;
height:110px;
background:radial-gradient(circle, rgba(54,194,180,.14), transparent 65%);
}

.card-label{
display:block;
margin-bottom:14px;
font-size:13px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--muted);
}

.card p{
margin:0;
font-size:36px;
font-weight:800;
}

.panel{
padding:24px;
}

.panel-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:18px;
}

.panel-header h2{
margin:0 0 6px;
font-size:22px;
}

.table-wrap{
overflow-x:auto;
}

table{
width:100%;
border-collapse:collapse;
min-width:720px;
}

th,
td{
padding:18px 14px;
border-bottom:1px solid rgba(148,163,184,.12);
text-align:left;
vertical-align:middle;
}

th{
font-size:12px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:#8ea3c4;
}

table tr:hover{
background:rgba(255,255,255,.02);
}

.status{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:110px;
padding:8px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
letter-spacing:.05em;
text-transform:uppercase;
}

.status.ativo{
background:rgba(54,194,180,.14);
color:#78e7db;
}

.status.bloqueado{
background:var(--danger-soft);
color:#ff9b9b;
}

.actions-cell{
width:1%;
white-space:nowrap;
}

.actions{
display:inline-flex;
justify-content:flex-start;
align-items:center;
gap:10px;
flex-wrap:nowrap;
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:11px 16px;
border:none;
border-radius:14px;
text-decoration:none;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-compact{
padding:9px 12px;
border-radius:12px;
font-size:13px;
min-height:40px;
}

.btn:hover{
transform:translateY(-1px);
}

.btn-primary{
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color:#041017;
box-shadow:0 12px 24px rgba(27,143,133,.24);
}

.btn-secondary{
background:rgba(79,140,255,.16);
color:#dbe7ff;
border:1px solid rgba(79,140,255,.22);
}

.btn-danger{
background:linear-gradient(135deg, #f97373 0%, #dc4d4d 100%);
color:white;
}

.btn-ghost-danger{
background:rgba(248,113,113,.08);
color:#ffb4b4;
border:1px solid rgba(248,113,113,.18);
}

.form-panel{
max-width:720px;
}

.stack-form{
display:flex;
flex-direction:column;
gap:18px;
}

.field{
display:flex;
flex-direction:column;
gap:8px;
}

.field span{
font-size:14px;
font-weight:700;
color:#c6d3e7;
}

input{
width:100%;
padding:14px 16px;
border:1px solid rgba(148,163,184,.18);
border-radius:16px;
background:rgba(5,10,18,.34);
color:var(--text);
outline:none;
transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:focus{
border-color:rgba(54,194,180,.56);
box-shadow:0 0 0 4px rgba(54,194,180,.12);
background:rgba(5,10,18,.48);
}

button{
font-family:inherit;
}

.login{
display:flex;
align-items:center;
justify-content:center;
padding:24px;
}

.login-box{
width:min(100%, 430px);
padding:32px;
}

.login-box h2{
margin:14px 0 10px;
font-size:32px;
}

.erro{
margin:18px 0 0;
padding:12px 14px;
border-radius:14px;
background:rgba(248,113,113,.1);
border:1px solid rgba(248,113,113,.2);
color:#ffb8b8;
}

@media (max-width: 960px){
.sidebar{
position:relative;
width:auto;
inset:auto;
height:auto;
}

.content{
margin-left:0;
padding:24px;
}

.page-head{
flex-direction:column;
align-items:stretch;
}
}

@media (max-width: 640px){
.content{
padding:18px;
}

.panel,
.card,
.login-box{
border-radius:20px;
}

.page-head h1{
font-size:28px;
}

.actions{
justify-content:flex-start;
flex-wrap:wrap;
}

.btn{
width:100%;
}

.actions .btn{
width:auto;
}
}