/* ========================================================
   SILK WHITE — Design System v5.0
   Concept: Light theme, clean white cards with shadows,
            top nav + centered container, blue/gold palette,
            slide-down mobile menu
======================================================== */

/* --- VARIABLES --- */
:root {
    --bg:        #eef2f8;
    --bg2:       #e8edf6;
    --card:      #ffffff;
    --card2:     #f8fafd;
    --navy:      #0f1f44;
    --blue:      #2563eb;
    --blue-lt:   #eff6ff;
    --blue-md:   #dbeafe;
    --gold:      #d97706;
    --gold-lt:   #fffbeb;
    --gold-md:   #fde68a;
    --text:      #1e293b;
    --text2:     #475569;
    --muted:     #94a3b8;
    --border:    #e2e8f0;
    --border2:   #f1f5f9;
    --danger:    #dc2626;
    --danger-lt: #fef2f2;
    --success:   #16a34a;
    --success-lt:#f0fdf4;
    --warn:      #d97706;
    --warn-lt:   #fffbeb;
    --nav-h:     64px;
    --radius:    10px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --shadow-xs: 0 1px 2px rgba(15,31,68,.06);
    --shadow-sm: 0 2px 8px rgba(15,31,68,.08);
    --shadow:    0 4px 18px rgba(15,31,68,.10);
    --shadow-lg: 0 8px 36px rgba(15,31,68,.13);
    --container: 1120px;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Noto Sans KR', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}

a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
img { display: block; max-width: 100%; }
input, textarea, select { font-family: inherit; }

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--border2); }
::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

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

.topNav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--nav-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
    display: flex; align-items: center;
}
.topNavInner {
    width: 100%; max-width: var(--container);
    margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 0;
}

.navLogo {
    display: flex; align-items: center; gap: 10px;
    margin-right: 32px; flex-shrink: 0;
}
.navLogo img { height: 32px; }
.navLogoText {
    font-size: 13px; font-weight: 900; color: var(--navy);
    letter-spacing: -.3px;
}

.navLinks {
    display: flex; align-items: center; gap: 2px;
    flex: 1;
}
.navLink {
    padding: 8px 14px;
    font-size: 13px; font-weight: 600; color: var(--text2);
    border-radius: var(--radius);
    transition: color .15s, background .15s;
    white-space: nowrap;
    display: flex; align-items: center; gap: 6px;
    position: relative;
}
.navLink:hover { color: var(--blue); background: var(--blue-lt); }
.navLink.active { color: var(--blue); background: var(--blue-lt); font-weight: 700; }
.navLink .navBadge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--danger); color: #fff;
    font-size: 10px; font-weight: 900; border-radius: 99px;
}

.navRight {
    display: flex; align-items: center; gap: 10px;
    margin-left: auto; flex-shrink: 0;
}

.navUserChip {
    display: flex; align-items: center; gap: 8px;
    background: var(--blue-lt); border: 1px solid var(--blue-md);
    border-radius: 99px; padding: 5px 14px 5px 5px;
}
.navUserAvatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--blue);
    color: #fff; font-size: 13px; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
}
.navUserName { font-size: 12px; font-weight: 700; color: var(--navy); }

.navMoneyGroup {
    display: flex; align-items: center; gap: 6px;
}
.navMoneyItem {
    display: flex; align-items: center; gap: 4px;
    padding: 5px 10px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: 99px;
}
.navMoneyLabel { font-size: 10px; font-weight: 700; color: var(--muted); }
.navMoneyVal { font-size: 12px; font-weight: 900; color: var(--navy); }

.navLogoutBtn {
    padding: 7px 16px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 12px; font-weight: 700;
    color: var(--text2); transition: .15s;
}
.navLogoutBtn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-lt); }

.navHamburger {
    display: none;
    width: 36px; height: 36px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius);
    align-items: center; justify-content: center;
    font-size: 18px; color: var(--text2);
    margin-left: auto;
}

/* Lang trigger in nav */
.navLangWrap { position: relative; }
.navLangBtn {
    display: flex; align-items: center; gap: 4px;
    padding: 7px 12px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 12px; font-weight: 700;
    color: var(--text2); transition: .15s;
}
.navLangBtn:hover { border-color: var(--blue); color: var(--blue); }

/* ========================================================
   MOBILE SLIDE-DOWN MENU
======================================================== */

.mobileMenu {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 190;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
    padding: 12px 0 16px;
}
.mobileMenu.open {
    transform: translateY(0);
    opacity: 1; pointer-events: auto;
}

.mobileMenuLinks { display: flex; flex-direction: column; }
.mobileMenuLink {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px;
    font-size: 14px; font-weight: 600; color: var(--text2);
    border-bottom: 1px solid var(--border2);
    transition: color .12s, background .12s;
}
.mobileMenuLink:last-child { border-bottom: none; }
.mobileMenuLink:hover, .mobileMenuLink.active { color: var(--blue); background: var(--blue-lt); }
.mobileMenuLink .mmIcon { font-size: 16px; width: 22px; text-align: center; }

.mobileUserRow {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px 16px;
    border-bottom: 1px solid var(--border2);
    margin-bottom: 4px;
}
.mobileUserAvatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 900; flex-shrink: 0;
}
.mobileUserInfo {}
.mobileUserName { font-size: 14px; font-weight: 800; color: var(--navy); }
.mobileUserMoney { font-size: 12px; color: var(--text2); }

.mobileMenuOverlay {
    display: none; position: fixed; inset: 0; z-index: 180;
    background: rgba(15,31,68,.25);
}
.mobileMenuOverlay.open { display: block; }

/* ========================================================
   NOTICE BAR
======================================================== */

.noticeBar {
    background: var(--gold-lt);
    border-bottom: 1px solid var(--gold-md);
    padding: 8px 0;
}
.noticeBarInner {
    max-width: var(--container); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text2); overflow: hidden;
}
.noticeBadge {
    flex-shrink: 0;
    font-size: 10px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--gold);
    background: var(--gold-md); border-radius: 4px;
    padding: 2px 8px; white-space: nowrap;
}

/* ========================================================
   PAGE WRAP + CONTAINER
======================================================== */

.pageWrap {
    padding-top: var(--nav-h);
    min-height: 100vh;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* ========================================================
   PAGE HEADER
======================================================== */

.pageHeader {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.pageHeaderLeft { display: flex; align-items: center; gap: 14px; }
.pageHeaderIcon {
    width: 44px; height: 44px; border-radius: var(--radius);
    background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.pageHeaderIcon.gold { background: var(--gold); box-shadow: 0 4px 12px rgba(217,119,6,.25); }
.pageTitle { font-size: 22px; font-weight: 900; color: var(--navy); letter-spacing: -.5px; }
.pageSubtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pageHeaderRight { display: flex; gap: 8px; flex-wrap: wrap; }

/* ========================================================
   CARDS
======================================================== */

.gCard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.gCardHead {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card2);
}
.gCardHeadTitle {
    font-size: 14px; font-weight: 800; color: var(--navy);
    display: flex; align-items: center; gap: 8px;
}
.gCardHeadTitle::before {
    content: '';
    display: block; width: 3px; height: 14px;
    background: var(--blue); border-radius: 2px;
}
.gCardBody { padding: 20px; }

/* stat cards */
.statGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.statCard {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 20px;
    box-shadow: var(--shadow-xs);
}
.statCardLabel {
    font-size: 11px; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.statCardVal { font-size: 26px; font-weight: 900; color: var(--navy); }
.statCardSub { font-size: 12px; color: var(--blue); margin-top: 4px; font-weight: 600; }

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

.gBtn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: var(--blue); color: #fff;
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius); border: none;
    cursor: pointer; transition: .15s; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(37,99,235,.25);
    letter-spacing: .1px;
}
.gBtn-primary:hover { background: #1d4ed8; box-shadow: 0 4px 14px rgba(37,99,235,.35); transform: translateY(-1px); }

.gBtn-gold {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: var(--gold); color: #fff;
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius); border: none;
    cursor: pointer; transition: .15s; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(217,119,6,.25);
}
.gBtn-gold:hover { background: #b45309; transform: translateY(-1px); }

.gBtn-outline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: var(--card); color: var(--text2);
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius); border: 1px solid var(--border);
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.gBtn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

.gBtn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px;
    background: var(--danger-lt); color: var(--danger);
    font-size: 13px; font-weight: 700;
    border-radius: var(--radius); border: 1px solid rgba(220,38,38,.2);
    cursor: pointer; transition: .15s; white-space: nowrap;
}
.gBtn-danger:hover { background: var(--danger); color: #fff; }

.gBtn-sm { padding: 6px 14px; font-size: 12px; }

/* ========================================================
   TABLES
======================================================== */

.gTable { width: 100%; border-collapse: collapse; }
.gThead tr { background: var(--card2); }
.gTh {
    padding: 11px 16px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--muted); text-align: left;
    border-bottom: 2px solid var(--border); white-space: nowrap;
}
.gTbody .gTr {
    border-bottom: 1px solid var(--border2);
    transition: background .1s;
}
.gTbody .gTr:hover { background: var(--blue-lt); }
.gTbody .gTr:last-child { border-bottom: none; }
.gTd {
    padding: 13px 16px;
    font-size: 13px; color: var(--text2);
    vertical-align: middle;
}
.gTd a { color: var(--text); font-weight: 600; transition: color .1s; }
.gTd a:hover { color: var(--blue); }
.gTd.center { text-align: center; }

/* ========================================================
   FORMS
======================================================== */

.gField { margin-bottom: 16px; }
.gLabel {
    display: block; font-size: 12px; font-weight: 700; color: var(--text2);
    margin-bottom: 6px; letter-spacing: .1px;
}
.gInput {
    width: 100%; height: 44px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    padding: 0 14px; font-size: 14px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.gInput:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    background: var(--card);
}
.gInput::placeholder { color: var(--muted); }

.gTextarea {
    width: 100%;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    padding: 12px 14px; font-size: 14px; outline: none;
    resize: vertical; min-height: 120px;
    transition: border-color .15s, box-shadow .15s;
}
.gTextarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
    background: var(--card);
}
.gTextarea::placeholder { color: var(--muted); }

.gSelect {
    width: 100%; height: 44px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    padding: 0 14px; font-size: 14px; outline: none;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.gSelect:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.gSelect option { background: var(--card); }

/* ========================================================
   STATUS CHIPS
======================================================== */

.chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 99px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
}
.chip-ok  { background: var(--success-lt); color: var(--success); }
.chip-err { background: var(--danger-lt); color: var(--danger); }
.chip-pnd { background: var(--warn-lt); color: var(--warn); }

/* ========================================================
   PAGINATION
======================================================== */

.pagination {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; padding: 20px 0 4px; flex-wrap: wrap;
}
.pageBtn {
    min-width: 36px; height: 36px; padding: 0 10px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 13px; font-weight: 600;
    color: var(--text2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: .12s; cursor: pointer;
    box-shadow: var(--shadow-xs);
}
.pageBtn:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }
.pageBtn.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ========================================================
   GAME CARDS
======================================================== */

.providerWrap { margin-bottom: 40px; }
.providerSectionHead {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.providerTitle {
    font-size: 16px; font-weight: 900; color: var(--navy);
    display: flex; align-items: center; gap: 10px;
}
.sectionBadge {
    font-size: 10px; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--blue); background: var(--blue-lt);
    border: 1px solid var(--blue-md);
    padding: 2px 10px; border-radius: 99px;
}
.sectionBadge.slot { color: var(--gold); background: var(--gold-lt); border-color: var(--gold-md); }

.providerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.providerCard {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    cursor: pointer; transition: box-shadow .18s, transform .18s;
    box-shadow: var(--shadow-sm);
    position: relative;
}
.providerCard:hover {
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}
.providerCard:hover .providerOverlay { opacity: 1; }
.providerImage {
    width: 100%; aspect-ratio: 16/9;
    background: var(--bg2) center/cover no-repeat;
}
.providerName {
    padding: 10px 14px;
    font-size: 12px; font-weight: 700; color: var(--text2);
}
.providerOverlay {
    position: absolute; inset: 0;
    background: rgba(15,31,68,.65);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .18s;
}
.providerPlayBtn {
    background: var(--blue); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: .5px;
    padding: 8px 22px; border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(37,99,235,.4);
}

/* ========================================================
   SLOT MODAL
======================================================== */

.slotModalWrap {
    display: none; position: fixed; inset: 0;
    background: rgba(15,31,68,.55); z-index: 9999;
    align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(4px);
}
.slotModalWrap.show { display: flex; }

.slotModal {
    width: 100%; max-width: 900px; max-height: 85vh;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.slotModalHeader {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--card2); flex-shrink: 0;
}
.slotModalTitle { font-size: 16px; font-weight: 900; color: var(--navy); }
.slotModalClose {
    width: 32px; height: 32px; background: var(--bg2);
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--muted); font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: .15s;
}
.slotModalClose:hover { color: var(--danger); border-color: rgba(220,38,38,.3); background: var(--danger-lt); }
.slotModalSearch {
    padding: 14px 20px; border-bottom: 1px solid var(--border2); flex-shrink: 0;
}
.slotSearchInput {
    width: 100%; height: 42px;
    background: var(--card2); border: 1px solid var(--border);
    border-radius: var(--radius); color: var(--text);
    padding: 0 14px; font-size: 13px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.slotSearchInput:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.slotSearchInput::placeholder { color: var(--muted); }
.slotModalBody { flex: 1; overflow-y: auto; padding: 16px 20px; }

/* ========================================================
   MONEY FORMS
======================================================== */

.chargeLayout {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px;
    align-items: start;
}

.infoBox {
    background: var(--blue-lt); border: 1px solid var(--blue-md);
    border-radius: var(--radius); padding: 16px; margin-bottom: 16px;
}
.infoBox.gold { background: var(--gold-lt); border-color: var(--gold-md); }
.infoBoxTitle {
    font-size: 12px; font-weight: 800; color: var(--blue);
    margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.infoBox.gold .infoBoxTitle { color: var(--gold); }
.infoBoxRow {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid var(--blue-md);
    font-size: 12px;
}
.infoBox.gold .infoBoxRow { border-color: var(--gold-md); }
.infoBoxRow:last-child { border-bottom: none; }
.infoBoxKey { color: var(--text2); font-weight: 600; }
.infoBoxVal { color: var(--navy); font-weight: 800; }

.moneyAmtInput {
    width: 100%; height: 56px;
    background: var(--card); border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--navy); font-size: 22px; font-weight: 900;
    padding: 0 16px; outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.moneyAmtInput:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.moneyAmtInput::placeholder { color: var(--muted); font-size: 15px; font-weight: 400; }

.moneyBtnGrid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
    margin-top: 10px;
}
.moneyBtnGrid button {
    padding: 9px 4px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 11px; font-weight: 700;
    color: var(--text2); transition: .12s; cursor: pointer;
    box-shadow: var(--shadow-xs);
}
.moneyBtnGrid button:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

.balanceStrip {
    display: flex; align-items: center; gap: 24px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 20px;
    margin-bottom: 20px; box-shadow: var(--shadow-xs);
    flex-wrap: wrap;
}
.balanceItem { display: flex; flex-direction: column; gap: 2px; }
.balanceLabel { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.balanceVal { font-size: 20px; font-weight: 900; color: var(--navy); }

/* ========================================================
   POSTS / MESSAGES
======================================================== */

.postTitle {
    font-size: 20px; font-weight: 900; color: var(--navy);
    line-height: 1.4; margin-bottom: 12px;
}
.postMeta {
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12px; color: var(--muted);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}
.postMeta span { display: flex; align-items: center; gap: 4px; }
.postBody {
    font-size: 14px; line-height: 1.9; color: var(--text2);
    white-space: pre-wrap;
}

.cvBlock {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); overflow: hidden;
    margin-bottom: 12px; box-shadow: var(--shadow-xs);
}
.cvBlockHead {
    padding: 12px 16px;
    background: var(--card2); border-bottom: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: space-between;
}
.cvBlockLabel {
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    text-transform: uppercase;
}
.cvBlockLabel.q { color: var(--blue); }
.cvBlockLabel.a { color: var(--gold); }
.cvBlockMeta { font-size: 11px; color: var(--muted); }
.cvBlockBody { padding: 16px; font-size: 13px; color: var(--text2); line-height: 1.7; }
.cvWaiting {
    padding: 16px; text-align: center;
    font-size: 12px; color: var(--warn);
    background: var(--warn-lt); border-top: 1px solid rgba(217,119,6,.15);
}

/* ========================================================
   LANGUAGE DROPDOWN
======================================================== */

.langDropdown {
    display: none; position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); min-width: 160px;
    overflow: hidden; z-index: 9999;
    box-shadow: var(--shadow);
}
.langDropdown.open { display: block; }
.langOption {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; font-size: 13px; color: var(--text2);
    cursor: pointer; transition: .1s;
}
.langOption:hover, .langOption.active { background: var(--blue-lt); color: var(--blue); }
.optFlag { font-size: 16px; }

/* ========================================================
   EMPTY STATE
======================================================== */

.emptyState {
    text-align: center; padding: 60px 20px;
    color: var(--muted); font-size: 13px;
}
.emptyState .emptyIcon { font-size: 40px; margin-bottom: 12px; opacity: .4; }
.emptyState p { font-weight: 600; }

/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 960px) {
    .navLinks, .navMoneyGroup, .navUserChip, .navLogoutBtn, .navLangWrap { display: none; }
    .navHamburger { display: flex; }
    .chargeLayout { grid-template-columns: 1fr; }
    .statGrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .container { padding: 16px 16px 40px; }
    .noticeBarInner { padding: 0 16px; }
    .topNavInner { padding: 0 16px; }
    .pageHeader { margin-bottom: 16px; }
    .providerGrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .moneyBtnGrid { grid-template-columns: repeat(2, 1fr); }
    .statGrid { grid-template-columns: 1fr; }
}