.award-theme-origin { --award-color: #d5a4ff; --award-halo: #a576f7; }
.award-theme-watch { --award-color: #ffb375; --award-halo: #f56a78; }
.award-theme-episodes { --award-color: #82dcff; --award-halo: #548eff; }
.award-theme-time { --award-color: #ffdc85; --award-halo: #e9a748; }
.award-theme-collection { --award-color: #a9bcff; --award-halo: #767dfa; }
.award-theme-explore { --award-color: #a5f0ca; --award-halo: #48be9b; }
.award-theme-ratings { --award-color: #ffb4d5; --award-halo: #e972b2; }
.award-theme-social { --award-color: #d4b8ff; --award-halo: #a178ee; }

.award-frame-round { --frame-color: #da9c72; --medal-light: #ffd0a8; --medal-dark: #835146; }
.award-frame-crest { --frame-color: #b6c9ef; --medal-light: #eef6ff; --medal-dark: #6485ac; }
.award-frame-diamond { --frame-color: #6eaaff; --medal-light: #b6dcff; --medal-dark: #315fa0; }
.award-frame-star { --frame-color: #cc85ff; --medal-light: #f1ceff; --medal-dark: #8149b6; }

.awards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.award-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 17px;
    min-height: 148px;
    padding: 20px 17px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid color-mix(in srgb, var(--award-halo) 42%, var(--line));
    border-radius: 20px;
    background-color: #10182d;
    background-image: linear-gradient(90deg, #10182ddc 0%, #10182db2 48%, #10182d94 100%), var(--award-art);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 3px 0 var(--frame-color), inset 0 1px #ffffff10;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.award-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 18%, #ffffff0b 38%, transparent 55%);
    transform: translateX(-130%);
    transition: transform .7s ease;
}

.award-card.unlocked {
    border-color: color-mix(in srgb, var(--frame-color) 48%, var(--award-halo));
    background: linear-gradient(90deg, #10182ddc 0%, #10182db2 48%, #10182d94 100%),
                var(--award-art) center / cover no-repeat;
}

.award-card:hover {
    transform: translateY(-4px);
    border-color: var(--frame-color);
    box-shadow: inset 3px 0 var(--frame-color), 0 0 22px color-mix(in srgb, var(--frame-color) 15%, transparent);
}

.award-card:hover::before { transform: translateX(130%); }
.award-card.is-pinned { box-shadow: inset 3px 0 var(--frame-color), 0 0 0 1px color-mix(in srgb, var(--frame-color) 55%, transparent), 0 14px 30px #080b1740; }

.award-card.locked {
    opacity: 1;
    border-color: color-mix(in srgb, var(--award-halo) 28%, #394057);
    background-image: linear-gradient(90deg, #10182dec 0%, #10182dd2 55%, #10182dac 100%), var(--award-art);
}

.award-card.locked:hover { border-color: #79819c; }
.award-card.locked .award-emblem { filter: grayscale(.78); opacity: .66; }
.award-card.locked .award-title { color: #d6dbeb; }

.award-emblem {
    position: relative;
    flex: 0 0 86px;
    width: 86px;
    height: 96px;
    display: grid;
    place-items: start center;
    margin-top: 7px;
    isolation: isolate;
    transition: transform .28s ease;
}

.award-emblem::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 17px;
    bottom: 0;
    width: 52px;
    height: 34px;
    background: linear-gradient(90deg, var(--medal-dark), var(--medal-light), var(--medal-dark));
    clip-path: polygon(0 0, 100% 0, 88% 100%, 50% 74%, 12% 100%);
}

.award-medal {
    position: relative;
    z-index: 1;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border: 2px solid var(--medal-light);
    border-radius: 50%;
    background: linear-gradient(145deg, var(--medal-light), var(--medal-dark) 52%, var(--medal-light));
    box-shadow: 0 5px 16px #0007, inset 0 2px 3px #fff7;
}

.award-medal::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid color-mix(in srgb, var(--award-color) 50%, #ffffff);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 25%, color-mix(in srgb, var(--award-halo) 34%, #262b43), #151c31 75%);
    box-shadow: inset 0 2px 9px #060915b8;
}

.award-frame-crest .award-medal {
    border-radius: 28% 28% 44% 44%;
    clip-path: polygon(50% 0, 91% 12%, 94% 61%, 50% 100%, 6% 61%, 9% 12%);
}

.award-frame-crest .award-medal::before {
    border-radius: 25% 25% 42% 42%;
    clip-path: polygon(50% 0, 90% 11%, 95% 60%, 50% 100%, 5% 60%, 10% 11%);
}

.award-frame-diamond .award-medal {
    border-radius: 23px;
    transform: rotate(45deg) scale(.82);
}

.award-frame-diamond .award-medal::before { border-radius: 16px; }
.award-frame-diamond .award-symbol { transform: rotate(-45deg) scale(1.18); }

.award-frame-star .award-medal {
    border: 0;
    clip-path: polygon(50% 0, 61% 10%, 78% 5%, 84% 21%, 100% 29%, 91% 45%, 100% 62%, 83% 71%, 78% 95%, 60% 91%, 50% 100%, 39% 91%, 22% 95%, 17% 72%, 0 62%, 9% 46%, 0 29%, 16% 21%, 22% 5%, 39% 10%);
}

.award-frame-star .award-medal::before { inset: 9px; border: 2px solid var(--medal-light); }

.award-card:hover .award-emblem { transform: rotate(-5deg) scale(1.06); }

.award-symbol {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    color: var(--award-color);
    filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--award-halo) 56%, transparent));
}

.award-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.award-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 18px;
}

.award-card.is-pinnable .award-topline { padding-right: 30px; }

.award-category {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--award-color);
}

.award-pts {
    flex: none;
    color: #ffe4a1;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.award-title {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.23;
    letter-spacing: -.02em;
}

.award-description {
    margin: 0;
    color: #bac4db;
    font-size: 12px;
    line-height: 1.45;
}

.award-level { align-self: flex-start; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--frame-color) 42%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--frame-color) 12%, transparent); color: var(--frame-color); font-size: 10px; font-weight: 800; }
.award-max-level { margin-top: auto; padding-top: 8px; color: var(--frame-color); font-size: 11px; font-weight: 750; }

.award-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: #a2ebbe;
    font-size: 11px;
    font-weight: 700;
}

.award-date-mark {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7ee7a3;
    box-shadow: 0 0 8px #7ee7a3;
}

.award-progress {
    height: 7px;
    width: 100%;
    margin-top: auto;
    overflow: hidden;
    border-radius: 999px;
    background: #ffffff18;
}

.award-progress span {
    display: block;
    width: var(--p, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--award-halo), var(--award-color));
    box-shadow: 0 0 10px var(--award-halo);
}

.award-progress-text {
    color: #aeb8cd;
    font-size: 11px;
    font-weight: 650;
}

.award-pin-btn {
    position: absolute;
    top: 16px;
    right: 15px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid #ffffff2b;
    border-radius: 9px;
    background: #ffffff10;
    color: #c8cce0;
    cursor: pointer;
    opacity: 1;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.award-pin-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.award-pin-btn:hover { transform: translateY(-2px); background: #ffffff2b; color: #fff; }
.award-pin-btn.active { background: color-mix(in srgb, var(--award-halo) 43%, #242139); color: #fff; border-color: var(--award-color); }
.award-pin-btn:focus-visible, .awards-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.awards-page { gap: 22px; }

.awards-hero {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 252px;
    padding: 30px 36px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 20px;
    background: linear-gradient(90deg, #080d1cf5 0%, #0b1022df 38%, #0b102267 66%, #0b102220),
                url("/images/profile/awards-hero-v1.webp") center 54% / cover no-repeat;
    box-shadow: inset 0 1px #ffffff19, 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent);
}

.awards-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent 40%, #000);
}

.awards-hero-copy { position: relative; z-index: 1; min-width: 0; max-width: min(62%, 690px); }
.awards-back { display: block; width: fit-content; margin-bottom: 22px; color: var(--accent-soft); font-size: 12px; font-weight: 750; text-decoration: none; }
.awards-back:hover { color: #fff; }
.awards-hero .eyebrow { display: block; color: var(--accent-soft); }
.awards-hero h1 { margin: 7px 0 7px; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.1; letter-spacing: -.04em; overflow-wrap: anywhere; }
.awards-hero p { margin: 0; color: #d4ddf1; font-size: 14px; line-height: 1.5; }
.awards-hero-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.awards-hero-stats > span { padding: 7px 11px; border: 1px solid #ffffff27; border-radius: 9px; background: #ffffff0c; color: #d7d6e5; font-size: 12px; }
.awards-hero-stats b { color: #fff; font-size: 15px; }
.awards-hero-stats .awards-rank { color: #f5d48f; font-weight: 800; }

.awards-pin-hint { margin: 0; color: var(--muted); font-size: 12px; }
.awards-feedback { margin: -12px 0 0; color: #ffbbba; font-size: 12px; }
.awards-feedback:empty { display: none; }

.awards-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 42px 20px; border: 1px dashed var(--line); border-radius: 20px; background: var(--surface); text-align: center; }
.awards-empty .award-emblem { flex: none; margin: 0 0 9px; }
.awards-empty strong { font-size: 17px; }
.awards-empty p { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 800px) {
    .awards-hero { padding: 25px; }
    .awards-hero-copy { max-width: 72%; }
}

@media (max-width: 620px) {
    .awards-hero { min-height: 0; padding: 22px; }
    .awards-hero-copy { max-width: 100%; }
    .awards-hero { background-position: center, 65% center; background-image: linear-gradient(90deg, #080d1cf5 0%, #0b1022de 72%, #0b10228c), url("/images/profile/awards-hero-v1.webp"); }
    .awards-back { margin-bottom: 18px; }
    .awards-hero-stats { margin-top: 18px; }
    .award-card { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
    .award-card:hover, .award-card:hover .award-emblem { transform: none; }
    .award-card::before { display: none; }
}