/* ============================================================
   LINGUAFLOW
   GLOBAL APP CSS
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
    --green: #58cc02;
    --green-dark: #46a302;
    --green-soft: #efffe7;

    --bg: #f7f9fc;
    --white: #ffffff;

    --text: #172033;
    --muted: #7c8799;

    --border: #e5eaf0;

    --yellow: #ffc800;
    --yellow-soft: #fff8d9;

    --orange: #ff9600;
    --orange-soft: #fff4df;

    --blue: #1cb0f6;
    --blue-soft: #eaf8ff;

    --red: #ff4b4b;
    --red-soft: #fff0f0;

    --purple: #8b5cf6;
    --purple-soft: #f1ebff;

    --shadow-sm:
        0 2px 8px rgba(23, 32, 51, .05);

    --shadow:
        0 8px 24px rgba(23, 32, 51, .07);

    --shadow-lg:
        0 16px 40px rgba(23, 32, 51, .10);
}

/* ============================================================
   CLASSROOM UI
   ============================================================ */
.class-page { max-width: 1180px; padding-top: 38px; padding-bottom: 80px; }
.class-hero, .class-detail-hero { position: relative; overflow: hidden; display:flex; justify-content:space-between; align-items:center; padding:38px 42px; border-radius:28px; color:#fff; background:linear-gradient(135deg,#172033 0%,#263b62 65%,#3f6ed4 100%); box-shadow:var(--shadow-lg); }
.class-hero h1, .class-detail-hero h1 { margin:10px 0 8px; color:#fff; font-size:38px; letter-spacing:-1.4px; }
.class-hero p, .class-detail-hero p { margin:0; color:rgba(255,255,255,.72); font-weight:650; }
.eyebrow, .panel-kicker { color:#7794d9; font-size:11px; font-weight:950; letter-spacing:1.3px; }
.class-hero .eyebrow, .class-detail-hero .eyebrow { color:#a9c2ff; }
.hero-orb { width:100px; height:100px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#9bbaff; font-size:50px; transform:rotate(20deg); background:rgba(255,255,255,.08); }
.class-action-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 34px; }
.class-panel, .class-card, .empty-class { background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow-sm); }
.class-panel { padding:24px; }
.join-panel { border-color:#ccecff; background:linear-gradient(135deg,#fff,#f1fbff); }
.create-panel { border-color:#d8f2c6; background:linear-gradient(135deg,#fff,#f6fff1); }
.panel-icon { float:right; width:44px; height:44px; display:grid; place-items:center; border-radius:14px; font-size:23px; background:#eaf8ff; }
.create-panel .panel-icon { background:var(--green-soft); }
.class-panel h2 { margin:0 0 5px; font-size:19px; letter-spacing:-.4px; }
.class-panel p { margin:0 0 18px; color:var(--muted); font-size:13px; }
.inline-form, .stack-form { display:flex; gap:9px; }
.stack-form { flex-direction:column; }
.stack-form label { margin:3px 0 -5px; color:var(--muted); font-size:11px; font-weight:850; }
.class-panel input, .class-panel select { min-height:45px; width:100%; padding:0 13px; border:1px solid #dfe6ef; border-radius:12px; outline:none; background:#fff; color:var(--text); }
.class-panel input:focus, .class-panel select:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(28,176,246,.11); }
.class-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 17px; border-radius:12px; color:#fff; font-size:13px; font-weight:900; cursor:pointer; transition:transform .18s,filter .18s; white-space:nowrap; }
.class-btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.class-btn.green { background:var(--green); box-shadow:0 3px 0 var(--green-dark); }
.class-btn.blue { background:var(--blue); box-shadow:0 3px 0 #0d8dc9; }
.class-btn.purple { background:var(--purple); box-shadow:0 3px 0 #7042d4; }
.class-btn.outline { color:var(--text); border:1px solid var(--border); background:#fff; }
.class-alert { margin:18px 0; padding:14px 17px; color:#a65b00; border:1px solid #ffe1a9; border-radius:14px; background:#fff8e9; font-weight:750; }
.class-section-title { display:flex; align-items:center; gap:9px; margin:0 0 15px; font-size:21px; }
.class-section-title span, .heading-count { display:inline-flex; align-items:center; justify-content:center; min-width:27px; height:25px; padding:0 8px; border-radius:99px; background:var(--purple-soft); color:var(--purple); font-size:12px; }
.class-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.course-select-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.course-select-card { padding:24px; border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); text-align:left; transition:.2s; }
.course-select-card:hover, .course-select-card.selected { transform:translateY(-4px); border-color:#b7dcff; box-shadow:var(--shadow-lg); }
.course-select-card.selected { background:linear-gradient(145deg,#fff,#f5fbff); }
.course-select-top { display:flex; align-items:center; justify-content:space-between; }
.course-select-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:19px; font-size:32px; background:linear-gradient(135deg,#eef3ff,#e7f9df); }
.course-select-card h2 { margin:21px 0 7px; font-size:20px; }
.course-select-card p { min-height:42px; margin:0 0 22px; color:var(--muted); font-size:13px; line-height:1.55; }
.course-language, .selected-badge { padding:6px 9px; border-radius:8px; color:#5271b9; background:#eef3ff; font-size:10px; font-weight:900; letter-spacing:.5px; }
.selected-badge { color:#3f9700; background:var(--green-soft); }
.course-hero { background:linear-gradient(135deg,#3f2877,#7145c9 60%,#9a74ed); }
.theme-ocean { --green:#1cb0f6; --green-dark:#0d8dc9; --green-soft:#eaf8ff; }
.reward-hero { background:linear-gradient(135deg,#162a55,#3b58bc 60%,#7a66df); }
.reward-success { color:#287d00; border-color:#bfe7a5; background:#efffe7; }
.billing-page { max-width:1000px; padding-top:38px; padding-bottom:80px; }.billing-hero { padding:38px; border-radius:26px; color:#fff; background:linear-gradient(135deg,#172033,#703fd1); box-shadow:var(--shadow-lg); }.billing-hero > span { color:#e0d1ff; font-size:11px; font-weight:950; letter-spacing:1px; }.billing-hero h1 { margin:12px 0 8px; font-size:35px; }.billing-hero p { margin:0; color:#d7ccf3; }.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }.plan-card { position:relative; padding:28px; border:1px solid var(--border); border-radius:23px; background:#fff; box-shadow:var(--shadow); }.plan-card.featured { border:2px solid #8b5cf6; background:linear-gradient(145deg,#fff,#fbf8ff); }.plan-badge { display:inline-block; padding:6px 9px; border-radius:7px; color:#6d45c4; background:#f0e8ff; font-size:9px; font-weight:950; letter-spacing:.6px; }.plan-card h2 { margin:18px 0 3px; font-size:22px; }.plan-period { color:var(--muted); font-weight:800; }.plan-price { margin-top:14px; color:var(--text); font-size:28px; font-weight:950; letter-spacing:-.7px; }.plan-price span { color:var(--muted); font-size:12px; font-weight:800; letter-spacing:0; }.plan-card ul { margin:24px 0; padding:0; list-style:none; color:#526078; line-height:2.1; font-size:13px; font-weight:700; }.plan-card .class-btn { width:100%; }.billing-note { margin:18px 0; color:var(--muted); text-align:center; font-size:11px; }
.reward-columns { display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:20px; }
.task-list { display:flex; flex-direction:column; gap:10px; }
.task-row { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid #edf0f5; border-radius:15px; background:#fafbfc; }
.task-row.done { border-color:#d3efc2; background:#f7fff3; }
.task-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#5971b5; background:#eaf0ff; font-size:19px; }
.task-row.done .task-icon { color:#fff; background:var(--green); }
.task-copy { flex:1; min-width:0; }.task-copy strong,.task-copy small { display:block; }.task-copy strong { font-size:13px; }.task-copy small { margin-top:3px; color:var(--muted); font-size:11px; }
.task-progress { height:7px; margin-top:9px; overflow:hidden; border-radius:99px; background:#e7ebf1; }.task-progress span { display:block; height:100%; border-radius:inherit; background:var(--green); }.task-copy em { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-style:normal; font-weight:850; }
.task-reward { color:#bd8200; font-size:12px; font-weight:900; text-align:center; line-height:1.6; }.claimed { color:#51a52b; font-size:11px; font-weight:900; white-space:nowrap; }
.chest-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.chest-card { padding:17px 12px; border:1px solid #e9edf4; border-radius:16px; text-align:center; background:#fbfcff; }.chest-icon { font-size:41px; filter:drop-shadow(0 7px 6px rgba(31,50,90,.13)); }.chest-card strong,.chest-card small,.chest-card > span { display:block; }.chest-card strong { margin-top:6px; font-size:13px; }.chest-card small { margin-top:3px; color:var(--muted); font-size:11px; }.chest-card > span { margin:9px 0 12px; color:#c28b15; font-size:10px; font-weight:900; }.chest-card .class-btn { width:100%; min-height:37px; padding:0 8px; font-size:11px; }.rarity-common { border-color:#dce3eb; }.rarity-uncommon { border-color:#9bd8b2; background:#f5fff8; }.rarity-rare { border-color:#9dc4ff; background:#f3f8ff; }.rarity-epic { border-color:#d2b4ff; background:#fbf6ff; }.rarity-legendary { border-color:#ffd777; background:#fffaf0; }
.theme-ocean .profile-card { background:linear-gradient(135deg,#0f5fa5,#1cb0f6); color:#fff; }
.profile-edit-link { float:right; padding:10px 13px; border:1px solid var(--border); border-radius:11px; color:var(--green-dark); background:#fff; font-size:12px; font-weight:850; }
.profile-cosmetic { display:inline-block; margin-top:8px; padding:5px 9px; border-radius:8px; color:#9a6500; background:#fff4c7; font-size:11px; font-weight:900; }
.settings-hero { display:flex; align-items:center; gap:30px; margin-bottom:20px; padding:27px 31px; border-radius:24px; color:#fff; background:linear-gradient(135deg,#172033,#4a3b9c); box-shadow:var(--shadow); }
.settings-hero h1 { margin:6px 0; font-size:28px; }
.settings-hero p { margin:0; color:rgba(255,255,255,.72); font-size:13px; }
.settings-preview { display:flex; align-items:center; gap:10px; min-width:190px; padding:15px; border:1px solid rgba(255,255,255,.2); border-radius:16px; background:rgba(255,255,255,.1); }
.settings-preview strong, .settings-preview small { display:block; }.settings-preview small { margin-top:4px; color:#c1c7ec; font-size:10px; }
.preview-avatar { width:45px; height:45px; display:grid; place-items:center; border-radius:13px; background:#fff; font-size:25px; }
.profile-settings-form { display:flex; flex-direction:column; gap:15px; }
.settings-section { display:grid; grid-template-columns:190px 1fr; gap:24px; align-items:start; padding:24px; border:1px solid var(--border); border-radius:20px; background:#fff; }
.settings-section h2 { margin:6px 0; font-size:17px; }.settings-section p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }
.avatar-options, .theme-options { display:flex; flex-wrap:wrap; gap:10px; }.avatar-options label input, .theme-option input { position:absolute; opacity:0; }
.avatar-options label span { display:grid; place-items:center; width:53px; height:53px; border:2px solid transparent; border-radius:15px; font-size:27px; background:#f3f6fa; cursor:pointer; }.avatar-options label input:checked + span { border-color:var(--green); box-shadow:0 0 0 4px var(--green-soft); }
.theme-option { padding:13px 16px; border:2px solid transparent; border-radius:13px; color:#fff; font-size:12px; font-weight:900; cursor:pointer; background:linear-gradient(135deg,#58cc02,#46a302); }.theme-option.theme-ocean { background:linear-gradient(135deg,#1cb0f6,#1662b4); }.theme-option input:checked + span:before { content:'✓ '; }.theme-option span { cursor:pointer; }
.settings-section > select { min-height:45px; padding:0 12px; border:1px solid #dfe6ef; border-radius:12px; background:#fff; }.save-profile { align-self:flex-end; border:0; }
.class-card { padding:22px; transition:transform .2s, box-shadow .2s; }
.class-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.class-card-top { display:flex; justify-content:space-between; align-items:center; }
.class-avatar { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; font-size:28px; background:linear-gradient(135deg,#eef3ff,#e8f9f1); }
.class-arrow { color:#94a1b5; font-size:25px; }
.class-card h2 { margin:20px 0 5px; font-size:19px; }
.class-card p { margin:0; color:var(--muted); font-size:13px; }
.class-card-meta, .class-card-footer { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:22px; color:var(--muted); font-size:11px; font-weight:800; }
.code-mini { padding:6px 8px; border-radius:8px; color:#466ac5; background:#eef3ff; letter-spacing:.6px; }
.class-card-footer { padding-top:14px; border-top:1px solid #eef1f5; color:#8490a3; }
.role-pill, .live-pill { padding:5px 8px; border-radius:7px; color:#718096; background:#f0f3f7; font-size:9px; letter-spacing:.5px; }
.teacher-pill { color:#3e9700; background:var(--green-soft); }
.empty-class { grid-column:1/-1; padding:55px 20px; text-align:center; color:var(--muted); }
.empty-class div { font-size:42px; }
.empty-class h3 { margin:12px 0 4px; color:var(--text); }
.back-link { display:inline-block; margin-bottom:18px; color:var(--muted); font-size:13px; font-weight:850; }
.class-detail-hero { padding:32px 36px; }
.code-card { min-width:170px; padding:16px; text-align:center; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.1); }
.code-card small { display:block; color:#b6c6e8; font-size:9px; font-weight:900; letter-spacing:1px; }
.code-card strong { display:block; margin:7px 0 10px; color:#fff; font-size:26px; letter-spacing:2px; }
.copy-code { padding:7px 10px; border:0; border-radius:8px; color:#fff; background:rgba(255,255,255,.17); font-size:10px; font-weight:850; cursor:pointer; }
.dot { color:#9bbaff; }
.class-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.class-stats > div { display:grid; grid-template-columns:32px 1fr; column-gap:9px; padding:17px 19px; border:1px solid var(--border); border-radius:17px; background:#fff; }
.class-stats span { grid-row:span 2; display:grid; place-items:center; font-size:20px; }
.class-stats strong { font-size:20px; line-height:1; }
.class-stats small { color:var(--muted); font-size:11px; font-weight:750; }
.detail-actions { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 26px; }
.detail-columns { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.content-panel { margin-bottom:18px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:17px; }
.section-heading h2 { margin:5px 0 0; font-size:21px; }
.live-pill { color:#3e9700; background:var(--green-soft); }
.member-list, .assignment-list { display:flex; flex-direction:column; gap:8px; }
.member, .assignment { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:#f8fafc; }
.member:hover { background:#eef9e8; }
.member-avatar { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:#4268c2; background:#e9efff; font-weight:950; }
.member > div:nth-child(2), .assignment > div:nth-child(2) { flex:1; }
.member strong, .assignment strong { display:block; font-size:13px; }
.member small, .assignment small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.member > span { color:#6c7c9c; font-size:11px; font-weight:850; }
.member i { padding-left:5px; color:#8b5cf6; font-style:normal; }
.assignment-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:#3f9700; background:#e7f9db; font-weight:950; }
.assignment-status { padding:6px 8px; border-radius:8px; color:#3f9700; background:#e7f9db; font-size:10px; font-weight:900; }
.empty-inner { padding:20px; color:var(--muted); text-align:center; font-size:13px; }
.compact-panel { margin-bottom:18px; }
.compact-panel h2 { margin:8px 0 18px; }
.form-row { display:grid; grid-template-columns:70px 1fr; gap:8px; }
@media (max-width:900px) { .class-page { padding-top:24px; } .class-grid, .course-select-grid { grid-template-columns:repeat(2,1fr); } .detail-columns { grid-template-columns:1fr; } .detail-columns aside { display:grid; grid-template-columns:1fr 1fr; gap:18px; } }
@media (max-width:650px) { .class-action-grid, .class-grid, .course-select-grid, .detail-columns aside { grid-template-columns:1fr; } .class-hero, .class-detail-hero { padding:27px 22px; } .class-hero h1, .class-detail-hero h1 { font-size:29px; } .hero-orb { display:none; } .code-card { min-width:140px; padding:11px; } .class-detail-hero { align-items:flex-start; gap:16px; flex-direction:column; } .class-stats { grid-template-columns:1fr 1fr; } .inline-form { flex-direction:column; } .detail-actions .class-btn { flex:1; } .member > span { display:none; } }
@media (max-width:650px) { .settings-hero, .settings-section { grid-template-columns:1fr; display:flex; flex-direction:column; align-items:flex-start; } .settings-preview { width:100%; min-width:0; } .save-profile { align-self:stretch; } }
@media (max-width:650px) { .plan-grid { grid-template-columns:1fr; }.billing-hero { padding:27px 22px; }.billing-hero h1 { font-size:28px; } }
@media (max-width:800px) { .reward-columns { grid-template-columns:1fr; } }


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--bg);

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Inter",
        "Nunito",
        sans-serif;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;
}

a {
    color: inherit;

    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

img {
    max-width: 100%;
}


/* ============================================================
   APP SHELL
   ============================================================ */

.app {
    min-height: 100vh;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 250px;

    padding: 24px 16px;

    background: var(--white);

    border-right: 1px solid var(--border);

    display: flex;
    flex-direction: column;

    z-index: 100;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
    display: flex;
    align-items: center;

    gap: 11px;

    padding:
        4px
        10px
        28px;

    color: var(--text);

    font-size: 21px;

    font-weight: 950;

    letter-spacing: -.7px;
}

.logo-mark {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--green);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 20px;

    box-shadow:
        0 4px 0 var(--green-dark);
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.nav a {
    position: relative;

    height: 50px;

    padding: 0 14px;

    border-radius: 14px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: var(--muted);

    font-size: 14px;

    font-weight: 850;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.nav a:hover {
    background: var(--green-soft);

    color: var(--green-dark);

    transform: translateX(2px);
}

.nav a.active {
    background: var(--green-soft);

    color: var(--green-dark);

    padding-left: 20px;
}

.nav a.active::before {
    content: "";

    position: absolute;

    left: 0;

    width: 4px;
    height: 22px;

    border-radius:
        0
        8px
        8px
        0;

    background: var(--green);
}

.nav-icon {
    width: 24px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;
}


/* ============================================================
   SIDEBAR USER
   ============================================================ */

.sidebar-user {
    margin-top: auto;

    padding: 14px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 16px;

    box-shadow: var(--shadow-sm);
}

.user-name {
    color: var(--text);

    font-size: 13px;

    font-weight: 900;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}

.user-level {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 700;
}


/* ============================================================
   MAIN
   ============================================================ */

.main {
    margin-left: 260px;

    min-height: 100vh;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 30px 34px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
.site-footer a:hover { color: var(--green-dark); }

.legal-page {
    width: min(900px, calc(100% - 60px));
    margin: 0 auto;
    padding: 54px 0 28px;
}

.legal-header { margin-bottom: 24px; }
.legal-kicker { color: var(--green-dark); font-size: 11px; font-weight: 950; letter-spacing: 1.4px; text-transform: uppercase; }
.legal-header h1 { margin: 8px 0 0; font-size: 38px; letter-spacing: -1.2px; }
.legal-card { padding: 36px 42px; border: 1px solid var(--border); border-radius: 24px; background: var(--white); box-shadow: var(--shadow-sm); }
.legal-card h2 { margin: 28px 0 9px; font-size: 20px; letter-spacing: -.35px; }
.legal-card h3 { margin: 20px 0 7px; font-size: 15px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card p, .legal-card li { color: #526078; font-size: 14px; line-height: 1.75; }
.legal-card ul { padding-left: 22px; }
.legal-card strong { color: var(--text); }
.legal-card a { color: var(--green-dark); font-weight: 800; }
.placeholder { display: inline-block; padding: 1px 5px; border-radius: 5px; color: #9a6500; background: var(--yellow-soft); }

@media (max-width: 650px) {
    .site-footer { flex-direction: column; padding: 22px 16px 28px; }
    .legal-page { width: calc(100% - 28px); padding-top: 28px; }
    .legal-header h1 { font-size: 30px; }
    .legal-card { padding: 25px 21px; }
}


/* ============================================================
   TOPBAR
   ============================================================ */

.topbar {
    position: sticky;

    top: 0;

    min-height: 74px;

    padding:
        14px
        30px;

    background:
        rgba(255, 255, 255, .90);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-bottom: 1px solid var(--border);

    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 24px;

    z-index: 50;
}


/* ============================================================
   PAGE TITLE
   ============================================================ */

.page-title {
    min-width: 0;
}

.page-title h1 {
    margin: 0;

    font-size: 24px;

    line-height: 1.1;

    letter-spacing: -.7px;

    font-weight: 950;
}

.page-title p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 12px;

    font-weight: 650;
}


/* ============================================================
   TOP STATS
   ============================================================ */

.stats {
    display: flex;

    align-items: center;

    gap: 8px;
}

.stat-pill {
    height: 38px;

    padding:
        0
        12px;

    display: flex;
    align-items: center;

    gap: 6px;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 11px;

    box-shadow: var(--shadow-sm);

    color: var(--text);

    font-size: 12px;

    font-weight: 900;

    white-space: nowrap;
}


/* ============================================================
   CONTENT
   ============================================================ */

.content {
    width: min(920px, calc(100% - 48px));

    margin: 0 auto;

    padding:
        30px
        0
        70px;
}


/* ============================================================
   GENERIC SECTION
   ============================================================ */

.section {
    margin-top: 28px;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    min-height: 44px;

    padding:
        0
        17px;

    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    font-size: 13px;

    font-weight: 900;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--green);

    color: white;

    box-shadow:
        0 4px 0 var(--green-dark);
}

.btn-primary:hover {
    background: #62d609;
}

.btn-secondary {
    background: white;

    color: var(--text);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);
}

.btn-danger {
    background: var(--red);

    color: white;
}


/* ============================================================
   DASHBOARD
   ============================================================ */


/* COURSE HEADER */

.course-header {
    padding:
        8px
        0
        22px;
}

.course-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 15px;

    border-radius: 17px;

    background: var(--green-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 29px;

    border: 1px solid var(--green-border, #d8f3c4);
}

.course-header h1 {
    margin: 0;

    font-size: 29px;

    letter-spacing: -.9px;

    font-weight: 950;
}

.course-header p {
    margin: 7px 0 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.5;

    font-weight: 650;
}


/* DAILY GOAL */

.daily {
    position: relative;

    min-height: 86px;

    padding:
        17px
        19px;

    margin-bottom: 30px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 17px;

    box-shadow: var(--shadow-sm);

    display: grid;

    grid-template-columns:
        48px
        1fr
        auto;

    grid-template-rows:
        auto
        auto;

    column-gap: 13px;

    align-items: center;
}

.daily-icon {
    grid-row: 1 / 3;

    width: 48px;
    height: 48px;

    border-radius: 14px;

    background: var(--green-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
}

.daily-title {
    font-size: 13px;

    font-weight: 950;
}

.daily-subtitle {
    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 650;
}

.daily-value {
    align-self: center;

    color: var(--green-dark);

    font-size: 12px;

    font-weight: 950;
}

.daily-progress {
    grid-column: 2 / 4;

    height: 8px;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: #edf0f2;
}

.daily-progress > div {
    height: 100%;

    width: min(
        100%,
        calc(var(--daily-progress, 0) * 1%)
    );

    background: var(--green);

    border-radius: inherit;
}


/* ============================================================
   COURSE UNITS
   ============================================================ */

.unit {
    margin-top: 32px;
}

.unit-header {
    padding:
        0
        3px
        17px;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.unit-number {
    margin-bottom: 4px;

    color: var(--green-dark);

    font-size: 10px;

    font-weight: 950;

    text-transform: uppercase;

    letter-spacing: .7px;
}

.unit-title {
    font-size: 19px;

    font-weight: 950;

    letter-spacing: -.4px;
}

.unit-description {
    margin-top: 4px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 650;
}

.unit-progress {
    padding:
        6px
        9px;

    border-radius: 9px;

    background: var(--green-soft);

    color: var(--green-dark);

    font-size: 11px;

    font-weight: 950;

    white-space: nowrap;
}


/* ============================================================
   LESSON TREE
   ============================================================ */

.tree {
    position: relative;

    padding:
        28px
        0
        8px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 26px;
}

.tree::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 4px;

    background:
        repeating-linear-gradient(
            to bottom,
            #dfe5e9 0,
            #dfe5e9 7px,
            transparent 7px,
            transparent 14px
        );

    border-radius: 999px;

    z-index: 0;
}

.lesson-wrap {
    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* LESSON */

.lesson {
    position: relative;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: white;

    border: 4px solid #e2e7eb;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;

    box-shadow:
        0 4px 0 #cfd6dc;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}

.lesson:hover {
    transform: translateY(-3px);

    box-shadow:
        0 7px 0 #cfd6dc;
}

.lesson.current {
    background: var(--green);

    border-color: var(--green);

    color: white;

    box-shadow:
        0 5px 0 var(--green-dark),
        0 10px 25px rgba(88, 204, 2, .22);
}

.lesson.completed {
    background: var(--green-soft);

    border-color: var(--green);

    color: var(--green-dark);

    box-shadow:
        0 4px 0 var(--green-dark);
}

.lesson.locked {
    background: #f1f3f5;

    border-color: #e0e4e7;

    color: #a8b0b8;

    box-shadow:
        0 4px 0 #d4d9dd;
}


/* CHECK */

.check {
    position: absolute;

    right: -4px;
    bottom: -2px;

    width: 23px;
    height: 23px;

    border-radius: 50%;

    background: var(--green);

    border: 3px solid white;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;

    font-weight: 950;
}


/* LESSON LABEL */

.lesson-label {
    margin-top: 8px;

    max-width: 145px;

    text-align: center;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 850;
}

.current-label {
    color: var(--green-dark);

    font-weight: 950;
}


/* ============================================================
   LEVEL CARD
   ============================================================ */

.level-card {
    margin-top: 38px;

    padding: 18px 20px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    box-shadow: var(--shadow-sm);
}

.level-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 900;
}

.level-xp {
    color: var(--green-dark);

    font-weight: 950;
}

.xp-bar {
    width: 100%;

    height: 11px;

    overflow: hidden;

    border-radius: 999px;

    background: #e9edf0;
}

.xp-bar > div {
    height: 100%;

    width: 0;

    background: var(--green);

    border-radius: inherit;
}


/* ============================================================
   LEADERBOARD
   ============================================================ */

.league-card {
    background: white;

    border: 1px solid var(--border);

    border-radius: 22px;

    box-shadow: var(--shadow);

    overflow: hidden;
}

.league-header {
    padding: 22px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--border);

    gap: 15px;
}

.league-title {
    display: flex;

    align-items: center;

    gap: 13px;
}

.league-icon {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    background: var(--yellow-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 23px;
}

.league-title h2 {
    margin: 0;

    font-size: 17px;

    font-weight: 950;
}

.league-title span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 650;
}

.week-badge {
    padding:
        7px
        10px;

    border-radius: 9px;

    background: var(--green-soft);

    color: var(--green-dark);

    font-size: 10px;

    font-weight: 950;
}


/* PODIUM */

.podium {
    min-height: 285px;

    padding:
        35px
        25px
        0;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 15px;
}

.podium-user {
    width: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    position: relative;
}

.podium-user.first {
    margin-bottom: 22px;
}

.podium-user.second {
    margin-bottom: 0;
}

.podium-user.third {
    margin-bottom: 0;
}

.crown {
    position: absolute;

    top: -27px;

    font-size: 22px;
}


/* LEADERBOARD AVATAR */

.podium .avatar {
    width: 62px;
    height: 62px;

    border-radius: 20px;

    background: var(--green-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 29px;

    border: 3px solid var(--green);

    box-shadow:
        0 4px 0 var(--green-dark);
}

.podium-user.second .avatar {
    border-color: #d8dde2;

    background: #f5f6f7;

    box-shadow:
        0 4px 0 #cbd1d6;
}

.podium-user.third .avatar {
    border-color: #e3c69e;

    background: #fff7eb;

    box-shadow:
        0 4px 0 #d4b98f;
}

.podium-name {
    margin-top: 9px;

    max-width: 130px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 950;
}

.podium-xp {
    margin-top: 4px;

    color: var(--green-dark);

    font-size: 10px;

    font-weight: 900;
}

.podium-block {
    width: 100%;

    margin-top: 12px;

    display: flex;

    align-items: flex-start;

    justify-content: center;

    padding-top: 14px;

    background: var(--green-soft);

    color: var(--green-dark);

    font-size: 23px;

    font-weight: 950;

    border-radius:
        13px
        13px
        0
        0;
}

.first .podium-block {
    height: 110px;

    background: var(--green);
    color: white;
}

.second .podium-block {
    height: 78px;

    background: #eef1f3;
}

.third .podium-block {
    height: 58px;

    background: #fff0dc;

    color: #b47727;
}


/* ============================================================
   RANKING
   ============================================================ */

.ranking {
    padding:
        0
        20px
        20px;
}

.ranking-row {
    min-height: 67px;

    padding:
        10px
        13px;

    margin-top: 7px;

    display: flex;

    align-items: center;

    gap: 13px;

    border: 1px solid transparent;

    border-radius: 13px;

    transition:
        background .16s ease,
        transform .16s ease;
}

.ranking-row:hover {
    background: #fafbfc;

    transform: translateX(2px);
}

.ranking-row.current {
    background: var(--green-soft);

    border-color: var(--green-border, #d8f3c4);
}

.rank {
    width: 38px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 950;
}

.rank-user {
    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}

.small-avatar {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #f1f3f5;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
}

.rank-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 900;
}

.you {
    display: inline-block;

    margin-left: 5px;

    padding:
        3px
        6px;

    border-radius: 6px;

    background: var(--green);

    color: white;

    font-size: 8px;

    font-weight: 950;
}

.rank-xp {
    color: var(--green-dark);

    font-size: 12px;

    font-weight: 950;

    white-space: nowrap;
}

.rank-xp span {
    color: var(--muted);

    font-size: 10px;
}


/* ============================================================
   YOUR RANK
   ============================================================ */

.your-rank {
    margin-top: 16px;

    padding:
        15px
        18px;

    background: var(--green-soft);

    border:
        1px solid
        var(--green-border, #d8f3c4);

    border-radius: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.your-rank-left {
    display: flex;

    align-items: center;

    gap: 11px;
}

.your-rank-icon {
    width: 39px;
    height: 39px;

    border-radius: 11px;

    background: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
}

.your-rank-title {
    color: var(--green-dark);

    font-size: 12px;

    font-weight: 950;
}

.your-rank-sub {
    margin-top: 2px;

    color: #78916a;

    font-size: 10px;

    font-weight: 650;
}

.your-rank-xp {
    color: var(--green-dark);

    font-size: 12px;

    font-weight: 950;
}


/* ============================================================
   LEADERBOARD EMPTY
   ============================================================ */

.empty {
    padding:
        55px
        25px;

    text-align: center;
}

.empty-icon {
    font-size: 40px;
}

.empty h3 {
    margin:
        13px
        0
        5px;

    font-size: 16px;

    font-weight: 950;
}

.empty p {
    max-width: 360px;

    margin:
        0
        auto;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.5;

    font-weight: 650;
}


/* ============================================================
   PROFILE
   ============================================================ */

.profile-card {
    position: relative;

    min-height: 205px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow);
}

.profile-card::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -150px;
    top: -170px;

    border-radius: 50%;

    background: var(--green-soft);
}

.profile-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: 100px;
    bottom: -115px;

    border-radius: 50%;

    background:
        rgba(88, 204, 2, .045);
}

.profile-content {
    position: relative;

    z-index: 2;

    min-height: 205px;

    padding:
        32px
        36px;

    display: flex;

    align-items: center;

    gap: 23px;
}


/* PROFILE AVATAR */

.profile-card .avatar {
    width: 100px;
    height: 100px;

    flex-shrink: 0;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #67dc09,
            #50bd00
        );

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 43px;

    box-shadow:
        0 6px 0 var(--green-dark),
        0 12px 25px rgba(88, 204, 2, .17);
}

.profile-name {
    font-size: 28px;

    line-height: 1.1;

    font-weight: 950;

    letter-spacing: -.8px;
}

.profile-card .username {
    margin-top: 7px;

    color: var(--muted);

    font-size: 13px;

    font-weight: 600;
}

.profile-card .level {
    display: inline-flex;

    align-items: center;

    margin-top: 15px;

    padding:
        7px
        11px;

    background: var(--green-soft);

    border: 1px solid var(--green-border, #d8f3c4);

    border-radius: 9px;

    color: var(--green-dark);

    font-size: 11px;

    font-weight: 950;
}


/* ============================================================
   PROFILE STATS
   ============================================================ */

.profile-card ~ .stats {
    margin-top: 17px;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 13px;
}

.profile-card ~ .stats .stat {
    min-height: 135px;

    padding: 18px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 17px;

    box-shadow: var(--shadow-sm);

    transition:
        transform .17s ease,
        box-shadow .17s ease;
}

.profile-card ~ .stats .stat:hover {
    transform: translateY(-3px);

    box-shadow: var(--shadow);
}

.profile-card ~ .stats .stat-icon {
    width: 40px;
    height: 40px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--green-soft);

    font-size: 19px;
}

.profile-card ~ .stats .stat:nth-child(2) .stat-icon {
    background: var(--orange-soft);
}

.profile-card ~ .stats .stat:nth-child(3) .stat-icon {
    background: var(--blue-soft);
}

.profile-card ~ .stats .stat:nth-child(4) .stat-icon {
    background: var(--purple-soft);
}

.profile-card ~ .stats .stat-value {
    margin-top: 12px;

    font-size: 24px;

    line-height: 1;

    font-weight: 950;

    letter-spacing: -.5px;
}

.profile-card ~ .stats .stat-label {
    margin-top: 6px;

    color: var(--muted);

    font-size: 10px;

    font-weight: 750;
}


/* ============================================================
   PROFILE XP
   ============================================================ */

.profile-card ~ .stats + .section {
    margin-top: 28px;

    padding:
        22px
        24px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 18px;

    box-shadow: var(--shadow-sm);
}

.profile-card ~ .stats + .section .section-title {
    margin-bottom: 15px;

    font-size: 16px;

    font-weight: 950;
}

.profile-card ~ .stats + .section .xp-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 850;
}

.profile-card ~ .stats + .section .xp-top span:last-child {
    color: var(--green-dark);

    font-weight: 950;
}

.profile-card ~ .stats + .section .progress {
    width: 100%;

    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background: #e9edf0;
}

.profile-card ~ .stats + .section .progress-bar {
    height: 100%;

    min-width: 2px;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--green),
            #73dc23
        );
}

.profile-card ~ .stats + .section .xp-next {
    margin-top: 9px;

    color: var(--muted);

    font-size: 11px;

    font-weight: 650;
}

.profile-card ~ .stats + .section .xp-next strong {
    color: var(--text);
}


/* ============================================================
   PROFILE ACHIEVEMENTS
   ============================================================ */

.profile-card ~ .stats + .section + .section {
    margin-top: 29px;
}

.profile-card ~ .stats + .section + .section .section-title {
    margin-bottom: 14px;

    font-size: 17px;

    font-weight: 950;
}

.achievements {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 12px;
}

.achievement {
    min-height: 91px;

    padding: 15px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    display: grid;

    grid-template-columns:
        47px 1fr;

    grid-template-rows:
        auto auto;

    column-gap: 12px;

    align-content: center;

    box-shadow: var(--shadow-sm);

    transition:
        transform .17s ease,
        box-shadow .17s ease;
}

.achievement:hover {
    transform: translateY(-2px);

    box-shadow: var(--shadow);
}

.achievement-icon {
    grid-row: 1 / 3;

    width: 47px;
    height: 47px;

    border-radius: 14px;

    background: var(--green-soft);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
}

.achievement-name {
    align-self: end;

    font-size: 12px;

    font-weight: 950;
}

.achievement-description {
    margin-top: 4px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.35;

    font-weight: 650;
}

.achievement.locked {
    opacity: .42;

    filter: grayscale(.8);

    background: #fafbfc;
}


/* ============================================================
   RESPONSIVE — 1000
   ============================================================ */

@media (max-width: 1000px) {

    .content {
        width: min(
            900px,
            calc(100% - 40px)
        );
    }

    .profile-card ~ .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .achievements {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .podium-user {
        width: 125px;
    }
}


/* ============================================================
   RESPONSIVE — 800
   ============================================================ */

@media (max-width: 800px) {

    .sidebar {
        display: none;
    }

    .main {
        margin-left: 0;
    }

    .topbar {
        min-height: 64px;

        padding:
            11px
            16px;
    }

    .topbar .page-title {
        display: none;
    }

    .content {
        width: calc(100% - 28px);

        padding-top: 22px;
    }

    .stats {
        gap: 6px;
    }

    .stat-pill {
        padding:
            0
            9px;

        font-size: 11px;
    }

    .profile-content {
        padding: 27px;

        min-height: 0;
    }

    .profile-card {
        min-height: 0;
    }

    .profile-card .avatar {
        width: 88px;
        height: 88px;

        border-radius: 25px;

        font-size: 37px;
    }

    .profile-name {
        font-size: 24px;
    }

    .podium {
        padding-left: 15px;
        padding-right: 15px;

        gap: 8px;
    }

    .podium-user {
        width: 115px;
    }

    .league-header {
        padding:
            18px;
    }
}


/* ============================================================
   RESPONSIVE — 600
   ============================================================ */

@media (max-width: 600px) {

    .topbar {
        justify-content: flex-end;
    }

    .stat-pill {
        height: 35px;

        padding:
            0
            8px;
    }

    .profile-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 17px;
    }

    .profile-card .avatar {
        width: 80px;
        height: 80px;

        border-radius: 22px;

        font-size: 33px;
    }

    .profile-name {
        font-size: 23px;
    }

    .profile-card ~ .stats {
        gap: 9px;
    }

    .profile-card ~ .stats .stat {
        min-height: 120px;

        padding: 15px;
    }

    .profile-card ~ .stats .stat-value {
        font-size: 22px;
    }

    .achievements {
        grid-template-columns: 1fr;
    }

    .daily {
        grid-template-columns:
            45px
            1fr;

        grid-template-rows:
            auto
            auto
            auto;
    }

    .daily-icon {
        width: 45px;
        height: 45px;
    }

    .daily-value {
        grid-column: 2;

        margin-top: 5px;

        justify-self: start;
    }

    .daily-progress {
        grid-column: 1 / 3;
    }

    .league-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .podium {
        min-height: 255px;

        gap: 4px;
    }

    .podium-user {
        width: 105px;
    }

    .podium .avatar {
        width: 55px;
        height: 55px;

        font-size: 25px;
    }

    .podium-name {
        max-width: 95px;

        font-size: 11px;
    }

    .ranking {
        padding:
            0
            12px
            15px;
    }

    .ranking-row {
        gap: 9px;
    }

    .rank {
        width: 28px;
    }
}


/* ============================================================
   RESPONSIVE — 420
   ============================================================ */

@media (max-width: 420px) {

    .content {
        width: calc(100% - 20px);
    }

    .topbar {
        padding:
            10px;
    }

    .stats {
        gap: 4px;
    }

    .stat-pill {
        padding:
            0
            7px;

        font-size: 10px;
    }

    .profile-card ~ .stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .profile-card ~ .stats .stat {
        min-height: 112px;

        padding: 14px;
    }

    .profile-card ~ .stats .stat-icon {
        width: 36px;
        height: 36px;

        font-size: 17px;
    }

    .profile-card ~ .stats .stat-value {
        font-size: 20px;
    }

    .profile-card ~ .stats .stat-label {
        font-size: 9px;
    }

    .podium-user {
        width: 95px;
    }

    .podium {
        gap: 0;
    }

    .podium-xp {
        font-size: 9px;
    }

    .first .podium-block {
        height: 95px;
    }

    .second .podium-block {
        height: 68px;
    }

    .third .podium-block {
        height: 52px;
    }
}

/* =========================================================
   SHOP
   ========================================================= */

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.shop-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 30px;
    font-weight: 950;
}

.shop-header p {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 600;
}

.shop-gems,
.gems {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 11px 15px;

    border-radius: 13px;
    background: #f4f0ff;
    border: 1px solid #e4d9ff;

    color: #7048c8;
    font-size: 15px;
    font-weight: 950;
}

.gem-icon {
    font-size: 19px;
}


/* ---------- Alerts ---------- */

.alert {
    padding: 14px 16px;
    margin-bottom: 18px;

    border-radius: 14px;

    background: var(--white);
    border: 1px solid var(--border);

    color: var(--text);
    font-size: 14px;
    font-weight: 750;
}

.alert.error {
    background: #fff0f0;
    border-color: #ffd0d0;
    color: #c93636;
}

.alert.success {
    background: var(--green-soft);
    border-color: #c8efad;
    color: #318300;
}


/* ---------- Hero ---------- */

.shop-hero,
.hero {
    padding: 27px 28px;
    margin-bottom: 30px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #f0ffe8,
            #ffffff
        );

    border: 1px solid #dcefcf;
    box-shadow: var(--shadow-sm);
}

.shop-hero h2,
.hero h2 {
    margin: 0 0 8px;

    color: var(--text);
    font-size: 21px;
    font-weight: 950;
}

.shop-hero p,
.hero p {
    margin: 0;

    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
}


/* ---------- Products ---------- */

.shop-section-title,
.section-title {
    margin-bottom: 14px;

    color: var(--text);
    font-size: 16px;
    font-weight: 950;
}

.products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.product {
    padding: 22px;

    border-radius: 18px;

    background: var(--white);
    border: 1px solid var(--border);

    box-shadow: var(--shadow-sm);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: #d2e7c5;
}

.product-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 15px;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--green-soft);

    font-size: 30px;
}

.product h3 {
    margin: 0 0 7px;

    color: var(--text);
    font-size: 17px;
    font-weight: 950;
}

.product-description {
    min-height: 44px;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 20px;
}

.price {
    color: #7048c8;
    font-size: 14px;
    font-weight: 950;
}

.buy-button {
    min-height: 40px;
    padding: 9px 15px;

    border: 0;
    border-bottom: 3px solid var(--green-dark);
    border-radius: 10px;

    background: var(--green);
    color: white;

    font: inherit;
    font-size: 12px;
    font-weight: 950;

    cursor: pointer;

    transition:
        transform .12s ease,
        background .12s ease;
}

.buy-button:hover {
    background: #61d505;
    transform: translateY(-1px);
}

.buy-button:active {
    transform: translateY(1px);
}

.buy-button.disabled,
.buy-button:disabled {
    background: #dfe4e9;
    border-bottom-color: #c5cbd1;
    color: #89919b;
    cursor: not-allowed;
    transform: none;
}


@media (max-width: 700px) {

    .shop-header,
    .header {
        align-items: flex-start;
        flex-direction: column;
    }

    .products {
        grid-template-columns: 1fr;
    }

    .hero,
    .shop-hero {
        padding: 21px;
    }
}

/* SVG chest opening animation */
.floating-gem { display:inline-block; color:#a9c2ff; font-size:25px; animation:gemFloat 2.8s ease-in-out infinite; }
.reward-orb { animation:orbPulse 2.4s ease-in-out infinite; }
.chest-visual { position:relative; height:122px; display:grid; place-items:center; }
.chest-svg { width:145px; height:125px; overflow:visible; filter:drop-shadow(0 9px 7px rgba(31,50,90,.16)); transform-origin:50% 82%; }
.chest-body,.chest-lid,.chest-band,.chest-lock { fill:#9b6a3a; }
.rarity-uncommon .chest-body,.rarity-uncommon .chest-lid,.rarity-uncommon .chest-band { fill:#42ad72; }
.rarity-rare .chest-body,.rarity-rare .chest-lid,.rarity-rare .chest-band { fill:#4389dc; }
.rarity-epic .chest-body,.rarity-epic .chest-lid,.rarity-epic .chest-band { fill:#9066d7; }
.rarity-legendary .chest-body,.rarity-legendary .chest-lid,.rarity-legendary .chest-band { fill:#e8a927; }
.chest-shadow { fill:none; stroke:rgba(30,45,70,.14); stroke-width:8; stroke-linecap:round; }.chest-band { opacity:.9; }.chest-lock { fill:#ffd96b!important; stroke:#8a5b12; stroke-width:2; }.chest-keyhole { fill:#805719; }.chest-glow { fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; opacity:.65; }
.rarity-spark { position:absolute; right:22%; top:7px; color:#ffd76a; opacity:.7; animation:sparkTwinkle 1.8s ease-in-out infinite; }.chest-range { color:#bd8200!important; }
.chest-card.is-opening { animation:chestShake .34s ease-in-out 2; }.chest-card.is-opening .chest-svg { animation:chestOpen .9s cubic-bezier(.2,.85,.25,1) forwards; }.chest-card.is-opening .chest-lock { animation:lockPop .45s .25s ease forwards; }.chest-card.is-opening .rarity-spark { animation:burstSpark .9s ease forwards; }
.open-result { position:relative; display:flex; align-items:center; gap:13px; overflow:hidden; margin:20px 0 -3px; padding:17px 21px; border:1px solid #ffd778; border-radius:17px; color:#775100; background:linear-gradient(100deg,#fff9df,#fff); box-shadow:0 8px 25px rgba(255,196,49,.18); animation:resultIn .55s cubic-bezier(.2,.8,.2,1); }.open-result strong,.open-result span { display:block; }.open-result span { margin-top:3px; font-size:12px; }.result-burst { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#f6b820; animation:burstIn .7s ease; }
@keyframes chestShake { 0%,100%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-4px) rotate(-2deg)} 75%{transform:translateX(4px) rotate(2deg)} } @keyframes chestOpen { 0%{transform:rotate(0) scale(1)} 38%{transform:rotate(-8deg) translateY(-5px) scale(1.05)} 65%{transform:rotate(5deg) translateY(-9px) scale(1.1)} 100%{transform:rotate(0) translateY(-2px) scale(1.03)} } @keyframes lockPop { 0%{transform:scale(1)} 55%{transform:scale(1.35) rotate(12deg)} 100%{transform:scale(.85) translateY(8px);opacity:.3} } @keyframes burstSpark { 0%{transform:scale(1);opacity:.7} 60%{transform:scale(2.4);opacity:1} 100%{transform:scale(3);opacity:0} } @keyframes gemFloat { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-7px) rotate(12deg)} } @keyframes orbPulse { 0%,100%{box-shadow:0 0 0 rgba(155,186,255,0)} 50%{box-shadow:0 0 28px rgba(155,186,255,.28)} } @keyframes sparkTwinkle { 0%,100%{transform:scale(.8) rotate(0);opacity:.4} 50%{transform:scale(1.3) rotate(20deg);opacity:1} } @keyframes resultIn { from{opacity:0;transform:translateY(-10px) scale(.98)} to{opacity:1;transform:none} } @keyframes burstIn { from{transform:scale(.3) rotate(-30deg)} to{transform:scale(1) rotate(0)} }
@media (prefers-reduced-motion: reduce) { .floating-gem,.reward-orb,.rarity-spark,.chest-card.is-opening,.chest-card.is-opening .chest-svg,.open-result,.result-burst { animation:none!important; } }