:root {
    --blue: #249bd3;
    --blue-dark: #087db6;
    --ink: #071827;
    --muted: #607180;
    --line: #dbe5ea;
    --soft: #f0f6f7;
    --radius: 22px;
    --shadow: 0 16px 38px rgba(3, 25, 41, .09);
}

html {
    background: #eef4f5;
}

body {
    background:
        radial-gradient(circle at 92% 4%, rgba(36, 155, 211, .13), transparent 26rem),
        linear-gradient(180deg, #f9fbfb 0, #eef4f5 100%);
    letter-spacing: .005em;
}

h1, h2, h3, .metric {
    color: #071827;
    letter-spacing: -.025em;
}

.sidebar {
    background:
        radial-gradient(circle at 0 0, rgba(36, 155, 211, .23), transparent 19rem),
        linear-gradient(180deg, #092b37 0, #031321 58%, #020b12 100%);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

.brand {
    gap: 14px;
    min-height: 82px;
}

.brand-logo {
    width: 44px;
    height: 62px;
    flex: 0 0 44px;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .4));
}

.brand strong {
    font-size: 15px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.brand small {
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sidebar nav a {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 15px;
    letter-spacing: .035em;
}

.sidebar nav a:hover,
.sidebar nav a.active {
    border-color: rgba(84, 192, 238, .25);
    background: linear-gradient(180deg, rgba(45, 169, 222, .28), rgba(20, 111, 151, .16));
    box-shadow: inset 0 1px rgba(255, 255, 255, .09);
}

.topbar {
    height: 84px;
    border-bottom-color: rgba(7, 40, 57, .1);
    background: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.topbar h1 {
    font-size: clamp(21px, 2.2vw, 30px);
    font-weight: 850;
    letter-spacing: -.035em;
}

.menu-button {
    color: var(--blue);
}

.content {
    padding: clamp(20px, 3vw, 42px);
}

.card,
.table-wrap {
    border-color: rgba(8, 51, 70, .1);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.card {
    padding: clamp(20px, 2.5vw, 30px);
}

.dashboard-metrics .card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--blue);
    background: linear-gradient(145deg, #fff 0, #f8fcfd 100%);
}

.dashboard-metrics .card::after {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    right: -32px;
    bottom: -44px;
    border-radius: 50%;
    background: rgba(36, 155, 211, .09);
}

.metric {
    font-size: 42px;
    font-weight: 900;
}

.metric-label,
.eyebrow,
th {
    letter-spacing: .075em;
    text-transform: uppercase;
}

.btn {
    min-height: 44px;
    border-radius: 999px;
    padding: 10px 21px;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-primary {
    border-color: #087bb1;
    background: linear-gradient(180deg, #35afe3 0%, #1694cd 56%, #087db6 100%);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .35),
        inset 0 -2px 2px rgba(0, 55, 90, .28),
        0 5px 0 #075f8a,
        0 9px 18px rgba(4, 87, 130, .24);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #46b9e9 0%, #209fd8 56%, #0b87c1 100%);
    filter: saturate(1.06);
    transform: translateY(-1px);
}

.btn-secondary {
    border-color: #b8cbd5;
    background: linear-gradient(180deg, #fff 0%, #f5fafc 55%, #e4edf1 100%);
    box-shadow:
        inset 0 2px 1px #fff,
        inset 0 -2px 2px rgba(43, 76, 92, .12),
        0 4px 0 #b9c9d1,
        0 8px 15px rgba(7, 40, 57, .1);
}

.btn-danger {
    box-shadow: inset 0 1px #fff, 0 4px 0 #d9a2a9, 0 8px 15px rgba(120, 22, 36, .1);
}

.btn:active {
    transform: translateY(3px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 0 rgba(0, 0, 0, .2);
}

.btn-small {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 12px;
}

.field input,
.field select,
.field textarea {
    border-color: #bfced6;
    border-radius: 13px;
    background: #fbfdfd;
    box-shadow: inset 0 1px 2px rgba(7, 40, 57, .05);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--blue);
    outline: 3px solid rgba(36, 155, 211, .15);
}

.training-icon {
    border: 1px solid #087db6;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, #3ab2e4, #087db6);
    box-shadow: inset 0 2px rgba(255, 255, 255, .28), 0 6px 12px rgba(7, 103, 149, .2);
}

.profile-chip {
    border: 2px solid rgba(36, 155, 211, .22);
    box-shadow: 0 5px 14px rgba(6, 76, 107, .13);
}

.viewer-shell {
    border: 1px solid #163849;
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(0, 19, 34, .25);
}

.pdf-toolbar {
    background: linear-gradient(180deg, #123344, #071d2b);
}

.badge-wheel-wrap {
    margin-top: 52px;
}

.badge-wheel {
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(206, 150, 33, .72), 0 18px 45px rgba(0, 0, 0, .32);
}

.badge-wheel-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wheel-selector-image {
    position: absolute;
    z-index: 5;
    top: -42px;
    left: 50%;
    width: 88px;
    height: 88px;
    object-fit: contain;
    transform: translateX(-50%) rotate(180deg);
    filter: drop-shadow(0 7px 7px rgba(0, 0, 0, .36));
    pointer-events: none;
}

.badge-artwork-reward {
    width: min(300px, 78vw);
}

.badge-artwork-profile {
    width: 150px;
    height: 150px;
}

.badge-preview {
    width: 120px;
    height: 120px;
    max-width: 120px;
    max-height: 120px;
    border-radius: 14px;
    object-fit: contain;
}

.certification-card-image {
    display: block;
    width: calc(100% + 2 * clamp(20px, 2.5vw, 30px));
    max-width: none;
    height: clamp(145px, 20vw, 225px);
    margin: calc(-1 * clamp(20px, 2.5vw, 30px)) calc(-1 * clamp(20px, 2.5vw, 30px)) 22px;
    border-radius: 24px 24px 0 0;
    object-fit: cover;
}

.certification-image-preview {
    display: block;
    width: min(420px, 100%);
    max-height: 240px;
    margin-bottom: 10px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 10px 24px rgba(4, 28, 43, .15);
}

.certification-table-image {
    width: 64px;
    height: 46px;
    margin-right: 12px;
    border-radius: 10px;
    object-fit: cover;
    vertical-align: middle;
}

.dashboard-training-image {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 7px 16px rgba(4, 37, 54, .18);
}

.home-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: clamp(24px, 4vw, 46px);
    overflow: hidden;
    position: relative;
    color: #fff;
    border-radius: 28px;
    background:
        radial-gradient(circle at 88% 15%, rgba(67, 191, 237, .6), transparent 20rem),
        linear-gradient(125deg, #07384a 0%, #075c7b 58%, #139ed3 100%);
    box-shadow: 0 22px 45px rgba(5, 49, 66, .2);
}

.home-hero::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -70px;
    bottom: -120px;
    border: 28px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
}

.home-hero > * {
    position: relative;
    z-index: 1;
}

.home-hero h2 {
    margin: 0 0 8px;
    font-size: clamp(28px, 4vw, 46px);
    color: #fff;
}

.home-hero p {
    max-width: 760px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.home-hero .eyebrow {
    color: #9fe5ff;
}

.home-hero .page-actions {
    flex: 0 0 auto;
    margin: 0;
}

.home-hero .btn-primary {
    color: #07384a;
    background: #fff;
    box-shadow: 0 8px 0 rgba(0, 34, 48, .25);
}

.home-hero .btn-secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .12);
}

.home-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 8px;
}

.home-section-heading h2 {
    margin-bottom: 0;
}

.home-news-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
}

.home-news-item {
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.home-news-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    color: #0a6789;
    background: #e4f6fd;
    font-size: 17px;
    font-weight: 950;
}

.home-news-certification .home-news-icon {
    color: #7e5700;
    background: #fff2ce;
}

.home-news-badge .home-news-icon {
    color: #8b6410;
    background: #fff0b5;
}

.home-news-leaderboard .home-news-icon {
    color: #20704e;
    background: #e5f7ee;
}

.home-news-copy {
    min-width: 0;
}

.home-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.home-news-copy h3 {
    margin: 5px 0 4px;
    font-size: 16px;
}

.home-news-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
}

.auth-page {
    background:
        radial-gradient(circle at 20% 10%, rgba(35, 160, 210, .3), transparent 28rem),
        linear-gradient(145deg, #092f3c 0, #041827 58%, #020a11 100%);
}

.auth-card {
    border-radius: 28px;
    box-shadow: 0 28px 75px rgba(0, 0, 0, .34);
}

.auth-brand-logo {
    width: 60px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3));
}

@media (max-width: 700px) {
    .btn {
        min-height: 46px;
    }

    .brand-logo {
        width: 40px;
        height: 56px;
    }

    .certification-card-image {
        height: 170px;
    }

    .home-hero,
    .home-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .home-news-list {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.danger-zone{border:2px solid rgba(193,49,49,.3);background:linear-gradient(145deg,#fff 0%,#fff8f7 100%)}
.deletion-impact>div,.national-rank-stat{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:4px}
.deletion-impact strong,.national-rank-stat strong{font-size:clamp(1.7rem,4vw,2.7rem);color:var(--ink)}
.deletion-impact span,.national-rank-stat span{color:var(--muted);font-size:.9rem}
.national-ranking-card{display:flex;justify-content:space-between;gap:28px;align-items:center;background:linear-gradient(135deg,#061b32 0%,#0c3861 62%,#0b7eb8 100%);color:#fff}
.national-ranking-card h2,.national-ranking-card .eyebrow{color:#fff}
.national-ranking-card .muted{color:rgba(255,255,255,.78)}
.national-ranking-grid{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;min-width:min(100%,620px)}
.national-rank-stat{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.national-rank-stat strong{color:#fff}.national-rank-stat span{color:rgba(255,255,255,.8)}
@media(max-width:760px){.national-ranking-card{align-items:stretch;flex-direction:column}.national-ranking-grid{grid-template-columns:1fr;min-width:0}}