/* ==========================================
   Diretório: /css/global.css
   STAR IMPERIAL SYSTEMS - Estilo global
   Paleta: verde, preto e dourado
   ========================================== */

:root {
    --preto:        #0a0a0a;
    --preto-card:   #141414;
    --preto-suave:  #1e1e1e;
    --verde:        #1db954;
    --verde-escuro: #0d6b30;
    --dourado:      #d4af37;
    --dourado-claro:#f1d77b;
    --texto:        #f5f5f5;
    --texto-suave:  #9a9a9a;
    --borda:        #2a2a2a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    background: var(--preto);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--dourado); text-decoration: none; }
a:hover { color: var(--dourado-claro); }

/* ---------- FOOTER ---------- */
.imperial-footer {
    margin-top: auto;
    background: linear-gradient(90deg, #000, var(--preto-suave), #000);
    border-top: 1px solid var(--dourado);
    color: var(--texto-suave);
    text-align: center;
    padding: 14px 10px;
    font-size: 13px;
    line-height: 1.6;
}
.imperial-footer strong { color: var(--dourado); }
.imperial-footer #app-version { color: var(--verde); font-weight: 600; }

/* ---------- CARDS ---------- */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
.card {
    background: var(--preto-card);
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    cursor: pointer;
    transition: .25s;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent, rgba(212,175,55,.06));
    opacity: 0; transition: .25s;
}
.card:hover {
    transform: translateY(-4px);
    border-color: var(--dourado);
    box-shadow: 0 8px 30px rgba(212,175,55,.15);
}
.card:hover::before { opacity: 1; }
.card .card-icon { font-size: 38px; margin-bottom: 12px; }
.card .card-title { color: var(--dourado); font-size: 17px; font-weight: 600; }
.card .card-sub  { color: var(--texto-suave); font-size: 12px; margin-top: 4px; }

/* ---------- BOTÕES ---------- */
.btn {
    background: var(--verde);
    color: #fff; border: none;
    padding: 11px 22px; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: .2s;
}
.btn:hover { background: var(--verde-escuro); }
.btn-dourado { background: var(--dourado); color: #000; }
.btn-dourado:hover { background: var(--dourado-claro); }