:root {
    --brand: #1f6feb;
    --ink: #172033;
}

body {
    color: var(--ink);
}

/* =========================
   Hero Section
========================= */
.hero {
    min-height: calc(100vh - 58px);
    display: flex;
    align-items: center;
    background: linear-gradient(
        135deg,
        #eef5ff 0%,
        #ffffff 55%,
        #f8fafc 100%
    );
}

/* =========================
   Card Components
========================= */
.hero-panel,
.review-box,
.stat,
.login-card {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 18px 48px rgba(31, 111, 235, 0.1);
}

/* =========================
   Admin Layout
========================= */
.admin-bg {
    background: #f5f7fb;
}

.admin-sidebar {
    width: 250px;
    min-height: 100vh;
    background: #14213d;
}

.admin-sidebar a {
    display: block;
    padding: 10px 8px;
    color: #dbeafe;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.admin-sidebar a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =========================
   Statistics Card
========================= */
.stat span {
    display: block;
    color: #64748b;
}

.stat strong {
    font-size: 34px;
    font-weight: 700;
}

/* =========================
   Login Page
========================= */
.login-bg {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #eef5ff;
}

.login-card {
    width: min(420px, 92vw);
}