*{box-sizing:border-box}body{margin:0;background:#070b0c;color:#e5e8e7;font:14px Arial,sans-serif}header{height:72px;background:#080d0e;border-bottom:1px solid #242d2f;display:flex;align-items:center;padding:0 5%;gap:35px}.brand{font-size:26px;color:#e7a727;min-width:300px}.brand b{color:#eee}.brand i{color:#e9a51f;font-style:normal}.brand small{display:block;font-size:7px;color:#777;letter-spacing:2px;margin-left:28px}nav{display:flex;gap:25px;flex:1;justify-content:center}nav a,.login{color:#aeb5b4;text-decoration:none;font-size:11px;font-weight:bold}.login{border:1px solid #8d651b;color:#e7a727;padding:10px 20px;border-radius:4px}.hero{height:395px;position:relative;background:radial-gradient(circle at 20% 30%,#342b1c,#0b1011 46%,#050708)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#0009,#0002)}.hero-inner{position:relative;text-align:center;padding-top:65px}.hero-inner>small{color:#e7aa25;font-weight:bold;letter-spacing:2px}.hero h1{font-size:68px;margin:8px 0 0;text-shadow:4px 4px #222}.hero h1 em{color:#e9a51f;font-style:normal}.hero p{letter-spacing:6px;color:#bbb}.serverline{display:flex;justify-content:center;gap:30px;margin:25px 0;font-size:12px}.green{color:#38cf69!important}.buttons button{padding:14px 30px;border:1px solid #e0a11f;background:#e5a51f;color:#111;font-weight:bold;border-radius:4px;margin:0 5px}.buttons .outline{background:#0e1314;color:#e5a51f}main{max-width:1250px;margin:auto;padding:20px}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.summary article,.card{background:#0b1214;border:1px solid #263033;border-radius:6px}.summary article{padding:20px}.summary small{color:#727b7b;display:block}.summary b{color:#e5a51f;font-size:24px;display:block;margin-top:7px}.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:14px}.card{padding:18px}.card h2{font-size:13px;color:#e7a826}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #182123;font-size:10px}th{color:#6e7777}.offers{display:grid;grid-template-columns:1fr 1fr;gap:10px}.offers>div{border:1px solid #493819;padding:18px}.offers h3,.offers b{color:#e5a51f}.offers p{color:#899292;font-size:11px;line-height:1.5}footer{text-align:center;padding:30px;color:#596262;font-size:9px}@media(max-width:750px){header{height:auto;padding:15px;flex-wrap:wrap}.brand{min-width:auto}nav{order:3;width:100%;overflow:auto}.hero h1{font-size:48px}.serverline{flex-wrap:wrap;gap:15px}.summary,.grid,.offers{grid-template-columns:1fr}}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid .full{grid-column:1/-1}.form-grid label,.card>form>label{display:flex;flex-direction:column;gap:7px}.form-grid input,.form-grid select,.form-grid textarea,.card textarea{padding:12px;border:1px solid #333;background:#101010;color:inherit;border-radius:8px}.alert{padding:13px;border-radius:8px;margin-bottom:18px}.alert.error{background:#321b1b}.alert.success{background:#17351f}.ticket-public-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.ticket-public-meta span{padding:5px 9px;border:1px solid #333;border-radius:999px;font-size:12px}.messages-public{display:flex;flex-direction:column;gap:12px;margin:20px 0}.msg{padding:14px;background:#111;border:1px solid #292929;border-radius:10px}.msg header{display:flex;justify-content:space-between}.msg small,.muted{opacity:.55}.card{max-width:1000px;margin:0 auto;padding:24px;background:#151515;border:1px solid #292929;border-radius:14px}.btn.primary{padding:11px 18px}.site-main{max-width:1100px;margin:auto;padding:35px 20px}.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #222}.site-header nav{display:flex;gap:18px}.brand{text-decoration:none;font-weight:800}.brand span{font-style:italic}.hero{margin:20px auto 28px;max-width:1000px}.eyebrow{font-size:11px;letter-spacing:.16em;opacity:.6}.hero h1{font-size:38px;margin:8px 0}.hero p{opacity:.7}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.site-header{flex-direction:column;gap:12px}.hero h1{font-size:30px}}
.offline-public{color:#e55b5b!important}.site-main .hero{background:linear-gradient(145deg,#0c1315,#080c0d);border:1px solid #263033;border-radius:8px;padding:38px}.site-main .hero h1{font-size:38px;text-shadow:none}.site-main .hero p{letter-spacing:1px}.site-main .hero .serverline{justify-content:flex-start}.site-main .card{max-width:none}.site-main .buttons{margin-top:20px}@media(max-width:700px){.site-main .hero{padding:24px}.site-main .hero h1{font-size:30px}}

/* ==========================================
   HERO CSAC
   ========================================== */

section.hero {
    position: relative !important;
    width: 100% !important;
    max-width: 1100px !important;

    aspect-ratio: 1672 / 941 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 20px auto 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background-image: url('/assets/csac-banner.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border: 1px solid #2a3031 !important;
    border-radius: 10px 10px 0 0 !important;

    box-shadow: 0 20px 50px rgba(0,0,0,.55) !important;
}


/* ==========================================
   PAINEL ABAIXO DO BANNER
   ========================================== */

.hero-server-panel {
    width: 100% !important;
    max-width: 1100px !important;

    margin: 0 auto 28px !important;
    padding: 15px 20px 18px !important;

    background: #080d0e !important;

    border: 1px solid #2a3031 !important;
    border-top: 0 !important;

    border-radius: 0 0 10px 10px !important;

    text-align: center !important;
}


/* ==========================================
   INFORMAÇÕES
   ========================================== */

.hero-server-panel .serverline {
    width: 100% !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    flex-wrap: wrap !important;

    gap: 18px !important;

    margin: 0 0 14px !important;

    padding: 10px !important;

    background: #0d1416 !important;

    border: 1px solid #292f31 !important;
    border-radius: 6px !important;
}


/* ==========================================
   BOTÕES — CORREÇÃO
   ========================================== */

.hero-server-panel .buttons {
    width: 100% !important;

    display: flex !important;
    flex-direction: row !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
}


.hero-server-panel .buttons button {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 190px !important;

    width: 190px !important;
    min-width: 190px !important;
    height: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid #e0a11f !important;
    border-radius: 5px !important;

    background: #e5a51f !important;

    color: #111 !important;

    font-size: 12px !important;
    font-weight: bold !important;

    cursor: pointer !important;
}


.hero-server-panel .buttons .outline {
    background: #0e1314 !important;
    color: #e5a51f !important;
}


/* ==========================================
   STATUS
   ========================================== */

.hero-server-panel .green {
    color: #38cf69 !important;
}

.hero-server-panel .offline-public {
    color: #e55b5b !important;
}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 700px) {

    section.hero {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .hero-server-panel {
        width: calc(100% - 24px) !important;
        margin-left: 12px !important;
        margin-right: 12px !important;
    }

    .hero-server-panel .buttons {
        flex-direction: column !important;
    }

    .hero-server-panel .buttons button {
        flex: none !important;
        width: 100% !important;
        max-width: 320px !important;
    }
}