*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f4f6f8;color:#0f172a}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:#101828;color:#fff;padding:24px 16px}
.sidebar h2{margin:0 0 28px;font-size:22px}
.sidebar a{display:block;color:#fff;text-decoration:none;padding:12px 10px;border-radius:8px;margin-bottom:6px}
.sidebar a:hover{background:#1d2939}
.topbar{position:fixed;top:0;left:230px;right:0;height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:flex-end;padding:0 28px;font-weight:bold;z-index:5}
.main{margin-left:230px;padding:96px 32px 40px;background:#f4f6f8;min-height:100vh}
h1{margin:0 0 24px;font-size:30px}
.card{background:#fff;border-radius:16px;padding:24px;margin-bottom:24px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.card-title{font-size:18px;font-weight:700;margin-bottom:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-group label{display:block;font-size:13px;font-weight:700;margin-bottom:7px;color:#334155}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #d9dee8;border-radius:10px;font-size:14px;background:#fff}
textarea{min-height:90px;resize:vertical}
.full{grid-column:1/-1}
.btn{margin-top:18px;background:#16a34a;color:#fff;border:none;padding:12px 22px;border-radius:10px;font-weight:700;cursor:pointer}
table{width:100%;border-collapse:collapse}
th{background:#f8fafc;text-align:left;padding:14px}
td{padding:14px;border-top:1px solid #eef2f7}
.empty{text-align:center;color:#64748b;padding:28px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700}
.Criando{background:#fef3c7;color:#92400e}
.Testando{background:#dbeafe;color:#1d4ed8}
.Escalando{background:#dcfce7;color:#166534}
.Pausado{background:#fee2e2;color:#991b1b}
.Encerrado{background:#e5e7eb;color:#374151}
@media(max-width:800px){.sidebar{position:static;width:100%}.topbar{position:static;left:0}.main{margin-left:0;padding:24px}.form-grid{grid-template-columns:1fr}}

button{
    background:#22c55e;
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

button:hover{
    background:#16a34a;
}


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

.cards .card{
    margin:0;
}

.cards .card span{
    display:block;
    color:#64748b;
    font-size:14px;
    margin-bottom:8px;
}

.cards .card strong{
    font-size:28px;
    font-weight:700;
}

.cards{
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    gap:15px !important;
    margin-bottom:20px;
}

.cards .card{
    margin:0 !important;
    padding:20px !important;
}

.cards .card span{
    display:block;
    color:#64748b;
    font-size:14px;
    margin-bottom:8px;
}

.cards .card strong{
    display:block;
    font-size:32px;
    font-weight:700;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-top:20px;
}

.rank-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

.rank-pos{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

@media(max-width:1200px){
    .cards{
        grid-template-columns:repeat(2,1fr) !important;
    }

    .dashboard-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:700px){
    .cards{
        grid-template-columns:1fr !important;
    }
}