:root {
    --bg-primary: #f4f6f8;
    --bg-secondary: #ebedf0;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fa;
    --bg-sidebar: #ffffff;
    --bg-input: #f0f2f5;
    --bg-hover: #e8eaed;
    --border: #d1d5db;
    --border-light: #e5e7eb;
    --border-glow: #2563eb;
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-muted: #9ca3af;
    --accent-blue: #2563eb;
    --accent-blue-glow: rgba(37,99,235,.08);
    --accent-cyan: #0891b2;
    --accent-green: #16a34a;
    --accent-green-glow: rgba(22,163,74,.06);
    --accent-red: #dc2626;
    --accent-red-glow: rgba(220,38,38,.06);
    --accent-orange: #ea580c;
    --accent-orange-glow: rgba(234,88,12,.06);
    --accent-purple: #7c3aed;
    --accent-purple-glow: rgba(124,58,237,.06);
    --accent-pink: #ff6090;
    --gradient-blue: linear-gradient(135deg,#2563eb,#3b82f6);
    --gradient-green: linear-gradient(135deg,#16a34a,#22c55e);
    --gradient-red: linear-gradient(135deg,#dc2626,#ef4444);
    --gradient-purple: linear-gradient(135deg,#7c3aed,#8b5cf6);
    --gradient-gold: linear-gradient(135deg,#d97706,#f59e0b);
    --shadow-card: 0 1px 3px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.04);
    --radius: 10px;
    --radius-sm: 6px;
    --sidebar-width: 258px;
    --topbar-height: 54px;
    --font-display: 'Outfit',sans-serif;
    --font-body: 'Noto Sans KR',sans-serif;
    --font-mono: 'JetBrains Mono',monospace
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    font-size: 14.5px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-primary);
    color-scheme: light
}

    html.light-mode {
        color-scheme: light
    }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    background-image: none
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-track {
    background: rgba(0,20,40,.5)
}

::-webkit-scrollbar-thumb {
    background: rgba(0,170,255,.3);
    border-radius: 0
}

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(0,170,255,.5)
    }

/* SIDEBAR */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg,var(--bg-card),var(--bg-secondary));
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 rgba(0,170,255,.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease
}

    .sidebar.collapsed {
        transform: translateX(calc(-1 * var(--sidebar-width)))
    }

.sidebar-backdrop {
    display: none
}

.sidebar-logo {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    flex-shrink: 0;
    background: linear-gradient(90deg,rgba(0,80,160,.15),transparent)
}

.sidebar-logo-img {
    width: auto;
    height: 40px;
    max-width: 120px;
    object-fit: contain;
    flex-shrink: 0
}

.logo-icon {
    width: 34px;
    height: 34px;
    background: var(--gradient-blue);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14.5px;
    color: #fff;
    box-shadow: 0 2px 12px rgba(0,130,255,.5),inset 0 1px 0 rgba(255,255,255,.15);
    border: 1px solid rgba(0,200,255,.5)
}

.logo-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(0,229,255,.3);
    letter-spacing: 2px
}

.logo-sub {
    font-size: 9.5px;
    color: var(--accent-blue);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(0,170,255,.3)
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0
}

.nav-section {
    padding: 14px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-blue);
    text-shadow: 0 0 6px rgba(0,170,255,.2);
    border-bottom: 1px solid rgba(0,170,255,.08);
    margin: 0 8px;
    padding-bottom: 6px
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all .15s;
    cursor: pointer;
    border-left: 2px solid transparent;
    white-space: nowrap;
    letter-spacing: .3px
}

    .nav-link:hover {
        color: var(--accent-cyan);
        background: rgba(0,130,255,.06);
        border-left-color: var(--accent-cyan)
    }

    .nav-link.active {
        color: var(--accent-cyan);
        background: rgba(0,130,255,.1);
        border-left-color: var(--accent-cyan);
        font-weight: 600;
        text-shadow: 0 0 8px rgba(0,200,255,.15)
    }

    .nav-link i {
        width: 16px;
        text-align: center;
        font-size: 12.5px;
        opacity: .7;
        flex-shrink: 0
    }

.nav-link-text {
    flex: 1;
    min-width: 0;
    text-align: left
}

.nav-link .nav-link-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto
}

.nav-link .badge {
    background: var(--accent-red);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    box-shadow: 0 0 8px rgba(255,56,72,.3);
    letter-spacing: .3px;
    min-width: 18px;
    text-align: center
}

.nav-link .nav-link-badges .badge {
    margin-left: 0
}

.nav-link .badge-warn {
    background: var(--accent-orange);
    box-shadow: 0 0 8px rgba(255,160,48,.3)
}

.nav-sub {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    background: rgba(0,10,25,.5)
}

    .nav-sub.open {
        max-height: 800px
    }

    .nav-sub .nav-link {
        padding-left: 40px;
        font-size: 13px;
        border-left: none
    }

    .nav-sub .nav-sub .nav-link {
        padding-left: 56px;
        font-size: 12.5px
    }

    .nav-sub .nav-sub .nav-sub .nav-link {
        padding-left: 72px;
        font-size: 12px
    }

.nav-toggle {
    position: relative
}

    .nav-toggle::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        font-size: 8.5px;
        position: absolute;
        right: 14px;
        transition: transform .2s;
        color: var(--accent-blue);
        opacity: .5
    }

    .nav-toggle.open::after {
        transform: rotate(90deg);
        opacity: 1;
        color: var(--accent-cyan)
    }

.nav-link.nav-link-alert {
    color: var(--accent-orange);
    background: rgba(255,160,48,.1);
    border-left-color: var(--accent-orange);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255,160,48,.25)
}

    .nav-link.nav-link-alert i {
        opacity: 1;
        color: var(--accent-orange)
    }

    .nav-link.nav-link-alert::after {
        color: var(--accent-orange);
        opacity: .85
    }

    .nav-link.nav-link-alert:not(.active) {
        animation: nav-link-alert-pulse 2.4s ease-in-out infinite
    }

@keyframes nav-link-alert-pulse {
    0%, 100% {
        background: rgba(255,160,48,.08);
        box-shadow: inset 0 0 0 0 rgba(255,160,48,.12)
    }

    50% {
        background: rgba(255,160,48,.16);
        box-shadow: inset 0 0 12px rgba(255,160,48,.12)
    }
}

.sidebar-footer {
    border-top: 1px solid var(--border);
    padding: 8px 12px;
    flex-shrink: 0;
    background: linear-gradient(180deg,rgba(0,30,60,.3),transparent)
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-bottom: 4px
}

.stat-row--multi {
    align-items: flex-start
}

.stat-row .label {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px
}

    .stat-row .label .dot {
        width: 5px;
        height: 5px;
        border-radius: 1px;
        display: inline-block;
        box-shadow: 0 0 4px currentColor
    }

.stat-row .value {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11.5px;
    color: var(--accent-cyan)
}

.stat-row .value--multi {
    text-align: right;
    line-height: 1.4
}

/* TOPBAR */
.topbar {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--topbar-height);
    background: linear-gradient(180deg,rgba(0,16,42,.97),rgba(0,10,28,.99));
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 16px rgba(0,0,0,.4),0 0 8px rgba(0,120,255,.04);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    transition: left .3s ease
}

    .topbar.full {
        left: 0
    }

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px
}

.btn-toggle {
    background: rgba(0,170,255,.06);
    border: 1px solid var(--border);
    color: var(--accent-blue);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s
}

    .btn-toggle:hover {
        background: rgba(0,170,255,.15);
        color: var(--accent-cyan);
        box-shadow: 0 0 6px var(--accent-blue-glow)
    }

.topbar-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(0,229,255,.2)
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 5px
}

.topbar-btn {
    position: relative;
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15.5px;
    transition: all .2s
}

    .topbar-btn:hover {
        background: rgba(0,170,255,.1);
        color: var(--accent-cyan)
    }

    .topbar-btn .dot {
        position: absolute;
        top: 6px;
        right: 6px;
        width: 6px;
        height: 6px;
        background: var(--accent-red);
        border-radius: 1px;
        box-shadow: 0 0 6px rgba(255,48,64,.5)
    }

.topbar-lang-select {
    height: 30px;
    min-width: 96px;
    max-width: 120px;
    padding: 0 24px 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input, var(--bg-card));
    color: var(--text-secondary);
    font-size: 11.5px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: all .2s
}

    .topbar-lang-select:hover,
    .topbar-lang-select:focus {
        border-color: rgba(0,170,255,.35);
        color: var(--accent-cyan);
        outline: none
    }

.topbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--gradient-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12.5px;
    color: #fff;
    cursor: pointer;
    border: 1px solid rgba(0,200,255,.3);
    box-shadow: 0 0 8px rgba(0,170,255,.2)
}

/* MAIN */
.main-content {
    margin-left: var(--sidebar-width);
    margin-top: var(--topbar-height);
    padding: 16px;
    transition: margin-left .3s ease;
    min-height: calc(100vh - var(--topbar-height))
}

    .main-content.full {
        margin-left: 0
    }

/* PAGE SECTIONS */
.page-section {
    display: none;
    animation: fadeIn .3s ease
}

    .page-section.active {
        display: block
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* TABS */
.page-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border)
}

.page-tab {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-family: var(--font-body)
}

    .page-tab:hover {
        color: var(--text-secondary);
        background: rgba(0,130,255,.04)
    }

    .page-tab.active {
        color: var(--accent-cyan);
        border-bottom-color: var(--accent-cyan);
        text-shadow: 0 0 8px rgba(0,200,255,.15)
    }

    .page-tab .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 17px;
        padding: 0 6px;
        font-size: 10px;
        font-weight: 700;
        font-family: var(--font-mono);
        line-height: 1;
        letter-spacing: -.2px;
        border-radius: 8px;
        flex-shrink: 0;
        background: rgba(0,170,255,.1);
        color: var(--accent-cyan);
        border: 1px solid rgba(0,200,255,.22);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,130,255,.08);
        transition: background .2s,border-color .2s,box-shadow .2s,color .2s
    }

    .page-tab:hover .badge {
        border-color: rgba(0,200,255,.35);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 1px 6px rgba(0,130,255,.14)
    }

    .page-tab.active .badge {
        background: rgba(0,200,255,.22);
        color: #fff;
        border-color: rgba(0,220,255,.45);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 0 10px rgba(0,200,255,.22)
    }

    .page-tab .badge.badge-green {
        background: rgba(0,216,104,.1);
        color: var(--accent-green);
        border-color: rgba(0,216,104,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,216,104,.08)
    }

    .page-tab.active .badge.badge-green {
        background: rgba(0,216,104,.25);
        color: #fff;
        border-color: rgba(0,216,104,.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 10px rgba(0,216,104,.2)
    }

    .page-tab .badge.badge-orange {
        background: rgba(255,170,0,.1);
        color: var(--accent-orange);
        border-color: rgba(255,170,0,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(255,170,0,.08)
    }

    .page-tab.active .badge.badge-orange {
        background: rgba(255,170,0,.25);
        color: #fff;
        border-color: rgba(255,170,0,.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 10px rgba(255,170,0,.2)
    }

    .page-tab .badge.badge-red {
        background: rgba(255,56,72,.1);
        color: var(--accent-red);
        border-color: rgba(255,56,72,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(255,56,72,.08)
    }

    .page-tab.active .badge.badge-red {
        background: rgba(255,56,72,.25);
        color: #fff;
        border-color: rgba(255,56,72,.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 10px rgba(255,56,72,.2)
    }

    .page-tab .badge.badge-purple {
        background: rgba(168,85,247,.1);
        color: var(--accent-purple);
        border-color: rgba(168,85,247,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(168,85,247,.08)
    }

    .page-tab.active .badge.badge-purple {
        background: rgba(168,85,247,.25);
        color: #fff;
        border-color: rgba(168,85,247,.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 10px rgba(168,85,247,.2)
    }

    .page-tab .badge.badge-blue {
        background: rgba(0,153,255,.1);
        color: var(--accent-blue);
        border-color: rgba(0,153,255,.28);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 1px 4px rgba(0,153,255,.08)
    }

    .page-tab.active .badge.badge-blue {
        background: rgba(0,153,255,.25);
        color: #fff;
        border-color: rgba(0,153,255,.5);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 0 10px rgba(0,153,255,.2)
    }

    .page-tab .badge.badge-muted {
        background: rgba(120,156,184,.1);
        color: var(--text-secondary);
        border-color: rgba(120,156,184,.22);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.04),0 1px 3px rgba(0,0,0,.06)
    }

    .page-tab.active .badge.badge-muted {
        background: rgba(120,156,184,.22);
        color: #fff;
        border-color: rgba(120,156,184,.4);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 0 8px rgba(120,156,184,.15)
    }

.settle-tab-pane {
    display: none;
    animation: fadeIn .3s ease
}

    .settle-tab-pane.active {
        display: block
    }

/* CARDS */
.card {
    background: linear-gradient(170deg,var(--bg-card) 0%,var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.3),0 0 8px rgba(0,120,255,.04)
}

.card-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    background: linear-gradient(90deg,rgba(0,50,110,.12),transparent)
}

    .card-header h3 {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        color: var(--accent-cyan);
        text-shadow: 0 0 8px rgba(0,200,255,.12)
    }

.card-body {
    padding: 16px
}

/* STAT CARDS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-bottom: 16px
}

.stat-card {
    background: linear-gradient(165deg,var(--bg-card) 0%,var(--bg-secondary) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    position: relative;
    overflow: hidden;
    transition: all .3s;
    backdrop-filter: blur(4px)
}

    .stat-card:hover {
        border-color: rgba(0,130,255,.35);
        box-shadow: 0 4px 24px rgba(0,130,255,.1);
        transform: translateY(-1px)
    }

    .stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px
    }

    .stat-card.blue::before {
        background: var(--gradient-blue);
        box-shadow: 0 0 8px rgba(0,170,255,.3)
    }

    .stat-card.green::before {
        background: var(--gradient-green);
        box-shadow: 0 0 8px rgba(0,232,120,.3)
    }

    .stat-card.red::before {
        background: var(--gradient-red);
        box-shadow: 0 0 8px rgba(255,48,64,.3)
    }

    .stat-card.purple::before {
        background: var(--gradient-purple);
        box-shadow: 0 0 8px rgba(168,85,247,.3)
    }

    .stat-card.gold::before {
        background: var(--gradient-gold);
        box-shadow: 0 0 8px rgba(255,170,0,.3)
    }

.stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16.5px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,130,255,.12)
}

.stat-card.blue .stat-icon {
    background: var(--accent-blue-glow);
    color: var(--accent-blue)
}

.stat-card.green .stat-icon {
    background: var(--accent-green-glow);
    color: var(--accent-green)
}

.stat-card.red .stat-icon {
    background: var(--accent-red-glow);
    color: var(--accent-red)
}

.stat-card.purple .stat-icon {
    background: var(--accent-purple-glow);
    color: var(--accent-purple)
}

.stat-card.gold .stat-icon {
    background: var(--accent-orange-glow);
    color: var(--accent-orange)
}

.stat-label {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: .8px;
    text-transform: uppercase
}

.stat-value {
    font-family: var(--font-display);
    font-size: 20.5px;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-cyan);
    text-shadow: 0 0 8px rgba(0,200,255,.12)
}

.stat-unit {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 3px;
    font-family: var(--font-body)
}

.stat-sub {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0,170,255,.1)
}

.stat-sub-item {
    text-align: center
}

.sub-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .3px
}

.sub-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary)
}

/* BUTTONS & INPUTS */
.toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-body);
    white-space: nowrap;
    background: rgba(0,25,55,.6);
    color: var(--text-secondary);
    letter-spacing: .3px;
    text-transform: uppercase
}

    .btn:hover {
        background: rgba(0,45,95,.6);
        color: var(--text-primary);
        border-color: var(--border-light)
    }

    .btn i {
        font-size: 10.5px
    }

.btn-primary {
    background: linear-gradient(180deg,rgba(0,120,200,.7),rgba(0,80,160,.8));
    border-color: rgba(0,170,255,.4);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.3)
}

    .btn-primary:hover {
        background: linear-gradient(180deg,rgba(0,140,230,.8),rgba(0,100,180,.9));
        box-shadow: 0 0 8px rgba(0,170,255,.3)
    }

.btn-success {
    background: linear-gradient(180deg,rgba(0,160,60,.7),rgba(0,120,40,.8));
    border-color: rgba(0,232,120,.4);
    color: #fff
}

    .btn-success:hover {
        background: linear-gradient(180deg,rgba(0,180,80,.8),rgba(0,140,50,.9));
        box-shadow: 0 0 8px rgba(0,232,120,.3)
    }

.btn-danger {
    background: linear-gradient(180deg,rgba(180,20,30,.7),rgba(140,10,20,.8));
    border-color: rgba(255,48,64,.4);
    color: #fff
}

    .btn-danger:hover {
        background: linear-gradient(180deg,rgba(200,30,40,.8),rgba(160,20,30,.9));
        box-shadow: 0 0 8px rgba(255,48,64,.3)
    }

.btn-outline {
    background: transparent;
    color: var(--accent-blue);
    border-color: rgba(0,170,255,.3)
}

    .btn-outline:hover {
        background: rgba(0,170,255,.08);
        box-shadow: 0 0 6px rgba(0,170,255,.15)
    }

.input-field {
    background: rgba(0,12,28,.85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-body);
    outline: none;
    transition: all .2s;
    box-sizing: border-box
}

input.input-field,
select.input-field {
    height: 32px;
    line-height: 18px
}

.input-field:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0,130,255,.15)
}

select.input-field {
    cursor: pointer
}

.toggle-sw {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer
}

    .toggle-sw input {
        display: none
    }

.toggle-track {
    width: 30px;
    height: 16px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    transition: background .2s
}

#memberMenu {
    max-height: calc(100vh - 16px);
    overflow-y: auto
}

.mm-item {
    display: block;
    padding: 5px 14px;
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    font-size: 12.5px;
    letter-spacing: .3px
}

    .mm-item:hover {
        background: rgba(0,170,255,.1);
        color: var(--accent-cyan)
    }

.mm-div {
    border-top: 1px solid rgba(0,170,255,.1);
    margin: 2px 0
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: transform .2s
}

.toggle-sw input:checked + .toggle-track {
    background: rgba(0,170,255,.5);
    box-shadow: 0 0 6px rgba(0,170,255,.2)
}

    .toggle-sw input:checked + .toggle-track::after {
        transform: translateX(14px);
        background: var(--accent-cyan)
    }

/* TABLE */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px
}

thead th {
    position: sticky;
    top: 0;
    background: #051028;
    padding: 10px 12px;
    text-align: left;
    font-weight: 700;
    color: var(--accent-blue);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 2px solid rgba(0,130,255,.2);
    white-space: nowrap;
    font-family: var(--font-body);
    z-index: 2
}

tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(0,35,70,.4);
    white-space: nowrap;
    transition: background .08s
}

tbody tr {
    transition: background .1s
}

    tbody tr:nth-child(even) {
        background: rgb(171 175 179 / 5%);
    }

    tbody tr:hover {
        background: rgba(0,130,255,.06)
    }
/* Sticky first column for scrollable tables */
/* Settlement table scroll with sticky ID columns */
.settle-scroll {
    overflow: auto;
    max-height: calc(100vh - var(--topbar-height) - 100px);
    -webkit-overflow-scrolling: touch;
    position: relative
}

    .settle-scroll table {
        border-collapse: separate;
        border-spacing: 0
    }

    .settle-scroll thead {
        position: sticky;
        top: 0;
        z-index: 4
    }

        .settle-scroll thead th {
            background: #060d18 !important
        }
/* table-scroll도 동일 적용 */
.table-scroll {
    overflow: auto;
    max-height: calc(100vh - var(--topbar-height) - 100px);
    -webkit-overflow-scrolling: touch;
    position: relative
}
/* Sticky columns via class (avoids nth-child+rowspan bug) */
.sc1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #0f1520 !important;
    min-width: 32px
}

.sc2 {
    position: sticky !important;
    left: 32px !important;
    z-index: 3 !important;
    background: #0d1320 !important;
    min-width: 220px;
    box-shadow: 3px 0 6px rgba(0,0,0,.3) !important
}

thead .sc1 {
    z-index: 5 !important;
    background: #060d18 !important
}

thead .sc2 {
    z-index: 5 !important;
    background: #060d18 !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.35) !important
}

html.light-mode .sc1 {
    background: #ffffff !important
}

html.light-mode .sc2 {
    background: #ffffff !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.06) !important
}

html.light-mode thead .sc1 {
    background: #eff2f6 !important
}

html.light-mode thead .sc2 {
    background: #eff2f6 !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.08) !important
}
/* Sticky header solid bg fix - prevents transparency on vertical scroll */
.settle-scroll thead th {
    background: #060d18 !important
}

html.light-mode .settle-scroll thead th {
    background: #f1f5f9 !important
}
/* 3-column sticky for 통계(오늘) - 정산시각+버튼+ID */
.st1 {
    position: sticky !important;
    left: 0 !important;
    z-index: 3 !important;
    background: #0f1520 !important;
    min-width: 75px
}

.st2 {
    position: sticky !important;
    left: 75px !important;
    z-index: 3 !important;
    background: #0f1520 !important;
    min-width: 32px
}

.st3 {
    position: sticky !important;
    left: 107px !important;
    z-index: 3 !important;
    background: #0d1320 !important;
    min-width: 220px;
    box-shadow: 3px 0 6px rgba(0,0,0,.3) !important
}

thead .st1 {
    z-index: 5 !important;
    background: #060d18 !important
}

thead .st2 {
    z-index: 5 !important;
    background: #060d18 !important
}

thead .st3 {
    z-index: 5 !important;
    background: #060d18 !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.35) !important
}

html.light-mode .st1, html.light-mode .st2 {
    background: #ffffff !important
}

html.light-mode .st3 {
    background: #ffffff !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.06) !important
}

html.light-mode thead .st1, html.light-mode thead .st2, html.light-mode thead .st3 {
    background: #eef2f7 !important
}
/* Horizontal scroll nav buttons */
/* Horizontal scroll nav buttons - see main .scroll-nav below */
.table-scroll table {
    min-width: 1200px
}

.table-scroll thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #051028;
    /* min-width: 160px; */
    /* box-shadow: 3px 0 6px rgba(0,0,0,.25); */
}

.table-scroll tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card);
    min-width: 160px;
    box-shadow: 3px 0 6px rgba(0,0,0,.2)
}

.table-scroll tbody tr:hover td:first-child {
    background: var(--bg-card-hover)
}

.text-right {
    text-align: right
}

.text-center {
    text-align: center
}

.text-green {
    color: var(--accent-green);
    text-shadow: 0 0 4px rgba(0,232,120,.2)
}

.text-red {
    color: var(--accent-red);
    text-shadow: 0 0 4px rgba(255,48,64,.2)
}

.text-blue {
    color: var(--accent-blue);
    text-shadow: 0 0 4px rgba(0,170,255,.2)
}

.text-orange {
    color: var(--accent-orange)
}

.text-purple {
    color: var(--accent-purple)
}

.text-muted {
    color: var(--text-muted)
}

.font-mono {
    font-family: var(--font-mono);
    font-size: 12.5px
}

.fw-bold {
    font-weight: 700
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 700;
    gap: 3px;
    letter-spacing: .3px;
    text-transform: uppercase
}

.tag-blue {
    background: var(--accent-blue-glow);
    color: var(--accent-blue);
    border: 1px solid rgba(0,170,255,.2)
}

.tag-green {
    background: var(--accent-green-glow);
    color: var(--accent-green);
    border: 1px solid rgba(0,232,120,.2)
}

.tag-red {
    background: var(--accent-red-glow);
    color: var(--accent-red);
    border: 1px solid rgba(255,48,64,.2)
}

.tag-orange {
    background: var(--accent-orange-glow);
    color: var(--accent-orange);
    border: 1px solid rgba(255,170,0,.2)
}

.tag-purple {
    background: var(--accent-purple-glow);
    color: var(--accent-purple);
    border: 1px solid rgba(168,85,247,.2)
}

.tag-cyan {
    background: rgba(0,229,255,.1);
    color: var(--accent-cyan);
    border: 1px solid rgba(0,229,255,.2)
}

/* GRID */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px
}

/* CHART */
.chart-area {
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg,rgba(0,60,120,.08) 0%,transparent 100%);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: flex-end;
    padding: 0 6px 6px;
    gap: 3px;
    border: 1px solid rgba(0,170,255,.06)
}

.chart-bar {
    flex: 1;
    border-radius: 1px 1px 0 0;
    min-height: 6px;
    transition: height .5s ease
}

    .chart-bar.blue {
        background: var(--gradient-blue);
        opacity: .85;
        box-shadow: 0 0 6px rgba(0,170,255,.2)
    }

    .chart-bar.green {
        background: var(--gradient-green);
        opacity: .85;
        box-shadow: 0 0 6px rgba(0,232,120,.2)
    }

    .chart-bar.red {
        background: var(--gradient-red);
        opacity: .75
    }

/* LIVE */
.live-dot {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 1px;
    display: inline-block;
    animation: livePulse 2s infinite;
    box-shadow: 0 0 6px rgba(0,232,120,.4)
}

@keyframes livePulse {
    0%,100% {
        box-shadow: 0 0 4px rgba(0,232,120,.4)
    }

    50% {
        box-shadow: 0 0 12px rgba(0,232,120,.6)
    }
}

/* SETTLEMENT */
.settle-summary {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
    margin-bottom: 16px
}

.settle-box {
    background: linear-gradient(170deg,var(--bg-card),var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all .3s
}

    .settle-box:hover {
        border-color: rgba(0,130,255,.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0,0,0,.3)
    }

    .settle-box .s-label {
        font-size: 11px;
        color: var(--text-muted);
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 700
    }

    .settle-box .s-value {
        font-family: var(--font-mono);
        font-size: 17.5px;
        font-weight: 700;
        color: var(--accent-cyan)
    }

/* BETTING CARDS */
.bet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
    gap: 10px
}

.bet-card {
    background: linear-gradient(170deg,rgba(0,18,40,.8),rgba(0,12,30,.9));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: all .25s
}

    .bet-card:hover {
        border-color: rgba(0,130,255,.4);
        box-shadow: 0 4px 20px rgba(0,130,255,.12);
        transform: translateY(-1px)
    }

.bet-card-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-cyan);
    letter-spacing: .5px
}

.bet-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    margin-bottom: 3px;
    padding: 2px 0
}

.bet-card-total {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    border-top: 1px solid rgba(0,130,255,.15);
    padding-top: 6px;
    margin-top: 4px;
    font-weight: 700
}

/* EMPTY STATE */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
    margin: 16px;
    color: var(--text-muted);
    background: linear-gradient(180deg,rgba(0,25,55,.35) 0%,rgba(0,12,28,.2) 100%);
    border: 1px dashed rgba(0,170,255,.18);
    border-radius: var(--radius);
    min-height: 180px
}

    .empty-state i {
        font-size: 38px;
        margin-bottom: 14px;
        display: block;
        color: var(--accent-cyan);
        opacity: .28;
        filter: drop-shadow(0 0 14px rgba(0,200,255,.18))
    }

    .empty-state p {
        font-size: 13.5px;
        margin: 0;
        letter-spacing: .3px;
        color: var(--text-secondary);
        font-weight: 500
    }

    .empty-state span {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        color: var(--text-muted);
        letter-spacing: .2px
    }

.empty-state--card {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    min-height: 160px;
    background: linear-gradient(180deg,rgba(0,20,45,.25) 0%,transparent 100%)
}

/* NOTIF */
.notif-panel {
    display: none;
    position: fixed;
    top: var(--topbar-height);
    right: 0;
    width: 360px;
    height: calc(100vh - var(--topbar-height));
    background: linear-gradient(170deg,var(--bg-card),var(--bg-secondary));
    border-left: 1px solid var(--border);
    z-index: 998;
    overflow-y: auto;
    padding: 16px;
    animation: slideIn .25s ease;
    box-shadow: -4px 0 24px rgba(0,0,0,.4)
}

    .notif-panel.show {
        display: block
    }

@keyframes slideIn {
    from {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

.notif-item {
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all .15s
}

    .notif-item:hover {
        background: rgba(0,170,255,.06)
    }

    .notif-item h4 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 3px;
        color: var(--accent-cyan)
    }

    .notif-item p {
        font-size: 12px;
        color: var(--text-secondary)
    }

/* SC DECORATIVE CORNERS - theme-aware */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-top: 2px solid rgba(0,130,255,.3);
    border-left: 2px solid rgba(0,130,255,.3);
    opacity: .4;
    pointer-events: none;
    z-index: 1;
    border-radius: var(--radius) 0 0 0
}

.card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    border-bottom: 2px solid rgba(0,130,255,.15);
    border-right: 2px solid rgba(0,130,255,.15);
    opacity: .25;
    pointer-events: none;
    z-index: 1;
    border-radius: 0 0 var(--radius) 0
}

.card {
    position: relative
}

/* SETTLEMENT TABLE ENHANCEMENTS */
.settle-scroll tbody tr[style*="background:rgba(229"] {
    background: rgba(0,20,50,.25) !important
}

.settle-scroll tbody tr:nth-child(even):not([style*="border-top"]) {
    background: rgba(0,15,35,.2)
}

.settle-scroll thead th[colspan] {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    padding: 8px 6px !important
}
/* 헤더 투명도 제거 - 스크롤시 겹침 방지 (솔리드 배경 강제) */
.settle-scroll thead th {
    background: #060d18 !important
}

    .settle-scroll thead th[style*="background"] {
        background: #060d18 !important
    }

.settle-scroll thead tr {
    background: #060d18 !important
}

    .settle-scroll thead tr:first-child th[colspan] {
        position: relative
    }

        .settle-scroll thead tr:first-child th[colspan]::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-radius: 0
        }
    /* 그룹헤더 색상 - 솔리드 기반 위에 반투명 오버레이 */
    .settle-scroll thead tr:first-child th {
        background: #060d18 !important
    }
/* 구분 컬럼 등 rowspan 헤더도 솔리드 */
.settle-scroll thead th[rowspan] {
    background: #060d18 !important
}

/* ===== LIGHT MODE: 정산 테이블 헤더 솔리드 배경 ===== */
html.light-mode .settle-scroll thead th {
    background: #eef2f7 !important
}

html.light-mode .settle-scroll thead tr {
    background: #eef2f7 !important
}

    html.light-mode .settle-scroll thead tr:first-child th {
        background: #eef2f7 !important
    }

html.light-mode .settle-scroll thead th[rowspan] {
    background: #eef2f7 !important
}

html.light-mode .settle-scroll thead th[colspan] {
    background: #e8edf4 !important
}

html.light-mode .settle-scroll thead th[style*="background"] {
    background: #eef2f7 !important
}

html.light-mode .sc1 {
    background: #ffffff !important
}

html.light-mode .sc2 {
    background: #ffffff !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.06) !important
}

html.light-mode thead .sc1 {
    background: #eef2f7 !important
}

html.light-mode thead .sc2 {
    background: #eef2f7 !important;
    box-shadow: 3px 0 6px rgba(0,0,0,.08) !important
}

html.light-mode .scroll-nav {
    background: #ffffff !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,.06) !important
}

/* SETTLEMENT MEMBER ROW GROUPING */
.settle-scroll tbody tr[style*="border-top:2px"] {
    border-top: 2px solid rgba(0,130,255,.2) !important
}

.settle-scroll tbody td.fw-bold {
    font-size: 13.5px
}

/* FINANCIAL VALUE HIGHLIGHTS */
.text-green {
    color: #00d868;
    text-shadow: 0 0 6px rgba(0,216,104,.25)
}

.text-red {
    color: #ff3848;
    text-shadow: 0 0 6px rgba(255,56,72,.25)
}

.text-blue {
    color: #0099ff;
    text-shadow: 0 0 5px rgba(0,153,255,.2)
}

.text-orange {
    color: var(--accent-orange);
    text-shadow: 0 0 4px rgba(255,170,0,.2)
}

.text-purple {
    color: var(--accent-purple)
}

.text-muted {
    color: var(--text-muted)
}

.font-mono {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: -.3px
}

.fw-bold {
    font-weight: 700
}

/* ENHANCED TAGS */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    gap: 3px;
    letter-spacing: .5px;
    text-transform: uppercase;
    backdrop-filter: blur(2px)
}

/* ENHANCED SETTLE BOX VALUES */
.settle-box .s-value.text-red {
    color: #ff3848;
    text-shadow: 0 0 8px rgba(255,56,72,.3)
}

.settle-box .s-value.text-green {
    color: #00d868;
    text-shadow: 0 0 8px rgba(0,216,104,.3)
}

.settle-box .s-value.text-orange {
    color: #ffaa00;
    text-shadow: 0 0 8px rgba(255,170,0,.3)
}

/* SETTLE GROUP HEADER COLORS */
.settle-grp-io {
    background: rgba(59,130,246,.08) !important
}

.settle-grp-manual {
    background: rgba(139,92,246,.06) !important
}

.settle-grp-money {
    background: rgba(255,170,0,.06) !important
}

.settle-grp-game {
    background: rgba(0,200,255,.04) !important
}

/* RATE CHIPS - 요율 표시 (ID 컬럼 내장) */
.rate-cell {
    padding: 4px 0 0 !important;
    min-width: auto;
    border-top: 1px solid rgba(0,130,255,.08);
    margin-top: 4px
}

.rate-row {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1px
}

    .rate-row:last-child {
        margin-bottom: 0
    }

.rate-chip {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 9.5px;
    font-weight: 600;
    font-family: var(--font-mono);
    letter-spacing: -.3px;
    white-space: nowrap;
    line-height: 1.3;
    opacity: .85
}

    .rate-chip .rc-label {
        font-family: var(--font-body);
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: .3px;
        opacity: .8;
        text-transform: uppercase
    }

.rc-casino {
    background: rgba(239,68,68,.1);
    color: #ff6b6b;
    border: 1px solid rgba(239,68,68,.15)
}

.rc-slot {
    background: rgba(168,85,247,.1);
    color: #c084fc;
    border: 1px solid rgba(168,85,247,.15)
}

.rc-sports {
    background: rgba(59,130,246,.1);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,.15)
}

.rc-mini {
    background: rgba(245,158,11,.1);
    color: #fbbf24;
    border: 1px solid rgba(245,158,11,.15)
}

.rc-losing {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono);
    background: rgba(255,170,0,.1);
    color: #ffaa00;
    border: 1px solid rgba(255,170,0,.18);
    letter-spacing: .2px;
    opacity: .85
}

    .rc-losing i {
        font-size: 7.5px;
        opacity: .6
    }

/* SETTLE ID DISPLAY - 아이디 부각 */
.sid-wrap {
    padding: 7px 10px;
    vertical-align: top
}

.sid-name {
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 1px;
    line-height: 1.4
}

    .sid-name .sid-id {
        color: #20b0ff;
        cursor: pointer;
        text-shadow: 0 0 8px rgba(0,160,255,.25)
    }

        .sid-name .sid-id:hover {
            color: #50d0ff;
            text-decoration: underline
        }

    .sid-name .sid-nick {
        color: var(--text-secondary);
        font-size: 12.5px;
        font-weight: 500;
        margin-left: 2px
    }

.sid-grade {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-left: 3px;
    vertical-align: middle
}

    .sid-grade.g-top {
        background: rgba(255,56,72,.12);
        color: #ff5060;
        border: 1px solid rgba(255,56,72,.2)
    }

    .sid-grade.g-sub {
        background: rgba(139,92,246,.12);
        color: #a78bfa;
        border: 1px solid rgba(139,92,246,.2)
    }

    .sid-grade.g-dist {
        background: rgba(59,130,246,.12);
        color: #60a5fa;
        border: 1px solid rgba(59,130,246,.2)
    }

    .sid-grade.g-user {
        background: rgba(0,216,104,.1);
        color: #34d399;
        border: 1px solid rgba(0,216,104,.2)
    }
/* Indent levels for hierarchy */
.sid-lv1 .sid-name {
    padding-left: 0
}

.sid-lv2 .sid-name {
    padding-left: 14px
}

.sid-lv3 .sid-name {
    padding-left: 28px
}

.sid-lv4 .sid-name {
    padding-left: 42px
}
/* Sub-row collapsed */
.settle-sub {
    display: none
}

    .settle-sub.open {
        display: table-row
    }

/* light mode */
html.light-mode .sid-name .sid-id {
    color: #1d6fb5;
    text-shadow: none
}

    html.light-mode .sid-name .sid-id:hover {
        color: #0d5fa5
    }

html.light-mode .rate-cell {
    border-top-color: rgba(0,0,0,.06)
}

html.light-mode .settle-box {
    background: linear-gradient(170deg,#ffffff,#fafbfc)
}

    html.light-mode .settle-box .s-value {
        text-shadow: none
    }

        html.light-mode .settle-box .s-value.text-green {
            color: #059669;
            text-shadow: none
        }

        html.light-mode .settle-box .s-value.text-red {
            color: #dc2626;
            text-shadow: none
        }

        html.light-mode .settle-box .s-value.text-blue {
            color: #2563eb;
            text-shadow: none
        }

        html.light-mode .settle-box .s-value.text-orange {
            color: #d97706;
            text-shadow: none
        }

        html.light-mode .settle-box .s-value.text-purple {
            color: #7c3aed;
            text-shadow: none
        }

/* RATE CHIP LIGHT MODE */
html.light-mode .rc-casino {
    background: rgba(239,68,68,.08);
    color: #dc2626;
    border-color: rgba(239,68,68,.15)
}

html.light-mode .rc-slot {
    background: rgba(168,85,247,.08);
    color: #7c3aed;
    border-color: rgba(168,85,247,.15)
}

html.light-mode .rc-sports {
    background: rgba(59,130,246,.08);
    color: #2563eb;
    border-color: rgba(59,130,246,.15)
}

html.light-mode .rc-mini {
    background: rgba(245,158,11,.08);
    color: #d97706;
    border-color: rgba(245,158,11,.15)
}

html.light-mode .rc-losing {
    background: rgba(255,170,0,.08);
    color: #b45309;
    border-color: rgba(245,158,11,.2)
}

/* DASHBOARD PULSE INDICATOR */
@keyframes pulseGlow {
    0%,100% {
        box-shadow: 0 0 4px rgba(0,216,104,.4)
    }

    50% {
        box-shadow: 0 0 14px rgba(0,216,104,.7)
    }
}

.pulse-green {
    animation: pulseGlow 2s infinite
}

/* SCROLL NAV - settle-scroll 내부 하단 고정 */
.scroll-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    background: #0d1320;
    border-top: 1px solid var(--border);
    gap: 8px;
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6;
    box-shadow: 0 -4px 12px rgba(0,0,0,.5);
    min-width: fit-content
}

    .scroll-nav button {
        padding: 6px 16px;
        font-size: 12.5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        border-radius: var(--radius-sm)
    }

    .scroll-nav .scroll-info {
        font-size: 12px;
        color: var(--text-muted);
        min-width: 60px;
        text-align: center
    }

html.light-mode .scroll-nav {
    background: #fff;
    box-shadow: 0 -4px 12px rgba(0,0,0,.08)
}

/* DATE / DATETIME TEXT INPUT (value: yyyy-MM-dd HH:mm:ss) */
input.input-datetime, input[type="date"], input[type="datetime-local"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-family: var(--font-mono);
    outline: none;
    transition: all .2s;
    min-width: 0;
    letter-spacing: .02em
}

input.input-datetime, .input-field.input-datetime {
    width: 200px;
    max-width: 100%;
    min-width: 168px
}

    input.input-datetime::placeholder {
        color: var(--text-muted);
        font-size: 11px;
        opacity: .75
    }

    input.input-datetime:focus, input[type="date"]:focus, input[type="datetime-local"]:focus {
        border-color: var(--accent-blue);
        box-shadow: 0 0 6px var(--accent-blue-glow)
    }

input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .6
}

    input[type="date"]::-webkit-calendar-picker-indicator:hover, input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1
    }

input[type="color"] {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer
}

/* MODAL OVERLAY & PANEL */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    z-index: 10000;
    align-items: center;
    justify-content: center
}

.modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 48px rgba(0,0,0,.6),0 0 24px rgba(0,120,255,.08)
}

.modal-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg,var(--accent-blue-glow),transparent)
}

.modal-footer-bar {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border)
}

/* BUTTON CONTRAST FIX */
.btn {
    text-shadow: none
}

.btn-primary, .btn-danger, .btn-success {
    border-width: 1px;
    font-weight: 700
}

.btn-primary {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #fff !important
}

.btn-danger {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff !important
}

.btn-success {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: #fff !important
}

.btn-outline {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    background: transparent
}

    .btn-outline:hover {
        background: var(--accent-blue-glow);
        color: var(--accent-blue)
    }

/* TAG CONTRAST FIX */
.tag {
    font-weight: 700;
    text-shadow: none
}

/* SELECT & OPTION theme fix */
select.input-field option {
    background: var(--bg-card);
    color: var(--text-primary)
}

/* LOGIN PAGE */
.login-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

    .login-wrap::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(from 0deg at 50% 50%,transparent 0deg,var(--accent-blue-glow) 60deg,transparent 120deg,var(--accent-blue-glow) 180deg,transparent 240deg,var(--accent-blue-glow) 300deg,transparent 360deg);
        animation: loginSpin 20s linear infinite;
        opacity: .3
    }

@keyframes loginSpin {
    to {
        transform: rotate(360deg)
    }
}

.login-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,transparent 30%,var(--bg-primary) 70%)
}

.login-box {
    position: relative;
    z-index: 2;
    width: 420px;
    max-width: 90vw;
    background: linear-gradient(170deg,var(--bg-card),var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 44px 40px;
    box-shadow: 0 24px 72px rgba(0,0,0,.6),0 0 48px rgba(0,120,255,.08)
}

.login-logo {
    text-align: center;
    margin-bottom: 32px
}

.login-logo-img {
    width: auto;
    height: 100px;
    max-width: 180px;
    object-fit: contain;
    /* margin-bottom: 14px; */
}

.login-logo-icon {
    width: 56px;
    height: 56px;
    background: var(--gradient-blue);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 23.5px;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.3),0 0 20px var(--accent-blue-glow);
    margin-bottom: 14px
}

.login-title {
    font-family: var(--font-display);
    font-size: 23.5px;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 3px;
    text-shadow: 0 0 12px var(--accent-blue-glow)
}

.login-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px
}

.login-field {
    margin-bottom: 18px
}

    .login-field label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-secondary);
        margin-bottom: 6px;
        letter-spacing: .5px;
        text-transform: uppercase
    }

    .login-field input {
        width: 100%;
        padding: 12px 14px;
        background: var(--bg-input);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        font-size: 14.5px;
        font-family: var(--font-body);
        outline: none;
        transition: all .2s
    }

        .login-field input:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 12px var(--accent-blue-glow)
        }

        .login-field input::placeholder {
            color: var(--text-muted)
        }

.login-btn {
    width: 100%;
    padding: 13px;
    background: var(--gradient-blue);
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    font-family: var(--font-display);
    letter-spacing: 2px;
    cursor: pointer;
    transition: all .3s;
    text-transform: uppercase;
    position: relative;
    overflow: hidden
}

    .login-btn:hover {
        box-shadow: 0 4px 20px var(--accent-blue-glow);
        transform: translateY(-1px)
    }

    .login-btn::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
        transition: left .5s
    }

    .login-btn:hover::after {
        left: 100%
    }

.login-opts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    font-size: 12.5px
}

    .login-opts label {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--text-secondary);
        cursor: pointer
    }

    .login-opts a {
        color: var(--accent-blue);
        text-decoration: none;
        font-weight: 600
    }

.login-footer {
    text-align: center;
    margin-top: 28px;
    font-size: 11.5px;
    color: var(--text-muted);
    letter-spacing: .5px
}

@keyframes loginShake {
    0%,100% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-10px)
    }

    40% {
        transform: translateX(10px)
    }

    60% {
        transform: translateX(-6px)
    }

    80% {
        transform: translateX(6px)
    }
}

.login-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none !important
}

/* ===== LIGHT MODE OVERRIDES ===== */
html.light-mode {
    background-image: none !important
}

    html.light-mode ::-webkit-scrollbar-track {
        background: rgba(0,0,0,.04)
    }

    html.light-mode ::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15)
    }

        html.light-mode ::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,.25)
        }
    /* Sidebar */
    html.light-mode .sidebar {
        background: linear-gradient(180deg,#ffffff,#f8f9fb);
        box-shadow: inset -1px 0 0 rgba(0,0,0,.06)
    }

    html.light-mode .sidebar-logo {
        background: linear-gradient(90deg,rgba(37,99,235,.06),transparent)
    }

    html.light-mode .logo-icon {
        box-shadow: 0 2px 8px rgba(37,99,235,.25);
        border-color: rgba(37,99,235,.3)
    }

    html.light-mode .logo-text {
        text-shadow: none
    }

    html.light-mode .logo-sub {
        text-shadow: none
    }

    html.light-mode .nav-section {
        text-shadow: none;
        border-bottom-color: rgba(0,0,0,.06)
    }

    html.light-mode .nav-link:hover {
        background: rgba(37,99,235,.06)
    }

    html.light-mode .nav-link.active {
        background: rgba(37,99,235,.08);
        text-shadow: none
    }

    html.light-mode .nav-link.nav-link-alert {
        color: #c2410c;
        background: rgba(234,88,12,.1);
        border-left-color: #ea580c;
        text-shadow: none
    }

        html.light-mode .nav-link.nav-link-alert i {
            color: #ea580c
        }

    html.light-mode .nav-sub {
        background: rgba(0,0,0,.02)
    }

    html.light-mode .nav-toggle::after {
        color: var(--accent-blue)
    }

    html.light-mode .nav-toggle.open::after {
        color: var(--accent-blue)
    }

    html.light-mode .sidebar-footer {
        background: linear-gradient(180deg,rgba(0,0,0,.02),transparent)
    }
    /* Topbar */
    html.light-mode .topbar {
        background: linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,249,251,.98));
        box-shadow: 0 1px 4px rgba(0,0,0,.06)
    }

    html.light-mode .topbar-title {
        text-shadow: none
    }

    html.light-mode .btn-toggle {
        background: rgba(37,99,235,.05)
    }

        html.light-mode .btn-toggle:hover {
            background: rgba(37,99,235,.1)
        }

    html.light-mode .topbar-btn:hover {
        background: rgba(37,99,235,.06)
    }

    html.light-mode .topbar-avatar {
        box-shadow: 0 1px 4px rgba(0,0,0,.12);
        border-color: rgba(37,99,235,.2)
    }

    html.light-mode .topbar-btn .dot {
        box-shadow: 0 0 4px rgba(220,38,38,.3)
    }
    /* Cards */
    html.light-mode .card {
        background: linear-gradient(180deg,#ffffff,#fafbfc);
        box-shadow: 0 1px 3px rgba(0,0,0,.06),0 1px 8px rgba(0,0,0,.03)
    }

        html.light-mode .card::before {
            border-color: rgba(37,99,235,.15)
        }

        html.light-mode .card::after {
            border-color: rgba(37,99,235,.08)
        }

    html.light-mode .card-header {
        background: linear-gradient(90deg,rgba(37,99,235,.04),transparent)
    }

        html.light-mode .card-header h3 {
            text-shadow: none
        }
    /* Stat cards */
    html.light-mode .stat-card {
        background: linear-gradient(180deg,#ffffff,#fafbfc)
    }

        html.light-mode .stat-card:hover {
            border-color: rgba(37,99,235,.25);
            box-shadow: 0 2px 12px rgba(37,99,235,.08)
        }

        html.light-mode .stat-card.blue::before {
            box-shadow: 0 0 6px rgba(37,99,235,.2)
        }

        html.light-mode .stat-card.green::before {
            box-shadow: 0 0 6px rgba(22,163,74,.2)
        }

        html.light-mode .stat-card.red::before {
            box-shadow: 0 0 6px rgba(220,38,38,.2)
        }

        html.light-mode .stat-card.purple::before {
            box-shadow: 0 0 6px rgba(124,58,237,.2)
        }

        html.light-mode .stat-card.gold::before {
            box-shadow: 0 0 6px rgba(234,88,12,.2)
        }

    html.light-mode .stat-icon {
        border-color: rgba(37,99,235,.1)
    }

    html.light-mode .stat-value {
        text-shadow: none
    }

    html.light-mode .stat-sub {
        border-top-color: rgba(0,0,0,.06)
    }
    /* Buttons */
    html.light-mode .btn {
        background: rgba(0,0,0,.03);
        color: var(--text-secondary)
    }

        html.light-mode .btn:hover {
            background: rgba(0,0,0,.06);
            color: var(--text-primary);
            border-color: var(--border)
        }

    html.light-mode .btn-primary {
        background: var(--accent-blue) !important;
        border-color: var(--accent-blue) !important;
        color: #fff !important;
        text-shadow: none
    }

        html.light-mode .btn-primary:hover {
            background: #1d4ed8 !important;
            box-shadow: 0 2px 8px rgba(37,99,235,.25)
        }

    html.light-mode .btn-success {
        background: var(--accent-green) !important;
        border-color: var(--accent-green) !important;
        color: #fff !important
    }

        html.light-mode .btn-success:hover {
            background: #15803d !important;
            box-shadow: 0 2px 8px rgba(22,163,74,.25)
        }

    html.light-mode .btn-danger {
        background: var(--accent-red) !important;
        border-color: var(--accent-red) !important;
        color: #fff !important
    }

        html.light-mode .btn-danger:hover {
            background: #b91c1c !important;
            box-shadow: 0 2px 8px rgba(220,38,38,.25)
        }

    html.light-mode .btn-outline {
        background: transparent;
        color: var(--accent-blue);
        border-color: var(--accent-blue)
    }

        html.light-mode .btn-outline:hover {
            background: rgba(37,99,235,.06)
        }
    /* Inputs */
    html.light-mode .input-field {
        background: #f8f9fb;
        border-color: var(--border)
    }

        html.light-mode .input-field:focus {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(37,99,235,.1)
        }

    html.light-mode select.input-field option {
        background: #fff;
        color: var(--text-primary)
    }

    html.light-mode input[type="date"], html.light-mode input[type="datetime-local"] {
        background: #f8f9fb;
        border-color: var(--border);
        color: var(--text-primary)
    }
    /* Tables */
    html.light-mode thead th {
        background: #eef2f7;
        color: var(--text-secondary)
    }

    html.light-mode .table-scroll thead th:first-child {
        background: linear-gradient(180deg,#eff2f6,#e6eaef);
        box-shadow: 3px 0 6px rgba(0,0,0,.06);
    }

    html.light-mode .table-scroll tbody td:first-child {
        background: #ffffff;
        box-shadow: 3px 0 6px rgba(0,0,0,.04)
    }

    html.light-mode .table-scroll tbody tr:hover td:first-child {
        background: #f8f9fa
    }

    html.light-mode tbody td {
        border-bottom-color: rgba(0,0,0,.05)
    }

    html.light-mode tbody tr:hover {
        background: rgba(37,99,235,.03)
    }
    /* Tags */
    html.light-mode .text-green {
        text-shadow: none;
        color: #059669
    }

    html.light-mode .text-red {
        text-shadow: none;
        color: #dc2626
    }

    html.light-mode .text-blue {
        text-shadow: none;
        color: #2563eb
    }
    /* Tabs */
    html.light-mode .page-tab:hover {
        background: rgba(37,99,235,.03)
    }

    html.light-mode .page-tab.active {
        text-shadow: none
    }

    html.light-mode .page-tab .badge {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.06)
    }

    html.light-mode .page-tab.active .badge {
        box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 1px 4px rgba(0,0,0,.08)
    }

    html.light-mode .empty-state {
        background: linear-gradient(180deg,rgba(37,99,235,.04) 0%,rgba(255,255,255,.5) 100%);
        border-color: rgba(37,99,235,.15)
    }

        html.light-mode .empty-state i {
            color: #2563eb;
            opacity: .35;
            filter: none
        }

        html.light-mode .empty-state p {
            color: #64748b
        }

        html.light-mode .empty-state span {
            color: #94a3b8
        }

    html.light-mode .empty-state--card {
        background: linear-gradient(180deg,rgba(37,99,235,.03) 0%,transparent 100%)
    }
    /* Charts */
    html.light-mode .chart-area {
        background: linear-gradient(180deg,rgba(37,99,235,.03) 0%,transparent 100%);
        border-color: rgba(0,0,0,.06)
    }

    html.light-mode .chart-bar.blue {
        box-shadow: 0 0 4px rgba(37,99,235,.15)
    }

    html.light-mode .chart-bar.green {
        box-shadow: 0 0 4px rgba(22,163,74,.15)
    }
    /* Betting */
    html.light-mode .bet-card {
        background: #f8f9fb
    }

        html.light-mode .bet-card:hover {
            border-color: rgba(37,99,235,.25);
            box-shadow: 0 2px 8px rgba(37,99,235,.08)
        }

    html.light-mode .bet-card-total {
        border-top-color: rgba(0,0,0,.06)
    }

    html.light-mode .bet-card-title {
        color: var(--accent-blue)
    }
    /* Settle */
    html.light-mode .settle-box {
        background: linear-gradient(180deg,#ffffff,#fafbfc)
    }
    /* Notifications */
    html.light-mode .notif-panel {
        background: linear-gradient(180deg,#ffffff,#f8f9fb);
        box-shadow: -2px 0 12px rgba(0,0,0,.08)
    }

    html.light-mode .notif-item:hover {
        background: rgba(37,99,235,.04)
    }

    html.light-mode .notif-item h4 {
        color: var(--accent-blue)
    }
    /* Live dot */
    html.light-mode .live-dot {
        box-shadow: 0 0 4px rgba(22,163,74,.3)
    }
    /* Modals */
    html.light-mode .modal-panel {
        background: #fff;
        box-shadow: 0 8px 40px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06)
    }

    html.light-mode .modal-header-bar {
        background: linear-gradient(90deg,rgba(37,99,235,.05),transparent)
    }
    /* Theme panel */
    html.light-mode #themePanel {
        background: linear-gradient(180deg,#ffffff,#f8f9fb);
        box-shadow: -2px 0 12px rgba(0,0,0,.08)
    }
    /* Badge */
    html.light-mode .nav-link .badge {
        box-shadow: 0 0 4px rgba(220,38,38,.2)
    }
    /* Toggle switch */
    html.light-mode .toggle-sw input:checked + .toggle-track {
        background: rgba(37,99,235,.5);
        box-shadow: none
    }
    /* Member menu context */
    html.light-mode .mm-item:hover {
        background: rgba(37,99,235,.06)
    }

    html.light-mode .mm-div {
        border-top-color: rgba(0,0,0,.06)
    }
    /* Login */
    html.light-mode .login-wrap {
        background: #f0f2f5
    }

        html.light-mode .login-wrap::before {
            opacity: .08
        }

        html.light-mode .login-wrap::after {
            background: radial-gradient(ellipse at center,transparent 30%,#f0f2f5 70%)
        }

    html.light-mode .login-box {
        background: linear-gradient(180deg,#ffffff,#f8f9fb);
        box-shadow: 0 8px 40px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.04)
    }

    html.light-mode .login-logo-icon {
        box-shadow: 0 4px 16px rgba(37,99,235,.2)
    }

    html.light-mode .login-title {
        text-shadow: none
    }

    html.light-mode .login-field input {
        background: #f4f6f8
    }

/* Members page (전체회원) – PC */
.members-page {
    max-width: 100%;
    overflow-x: hidden
}

.members-summary-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 16px
}

    .members-summary-stats .stat-value--sm {
        font-size: 15px;
        line-height: 1.45
    }

.members-currency-total-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px
}

    .members-currency-total-line:first-child {
        margin-top: 0
    }

.members-currency-tag {
    min-width: 44px;
    justify-content: center;
    flex-shrink: 0
}

.members-summary-stats .members-currency-total-line .font-mono {
    font-size: 14px
}

.members-filter-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px
}

    .members-filter-tabs::-webkit-scrollbar {
        display: none
    }

    .members-filter-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap
    }

.members-table-card {
    overflow: hidden
}

    .members-table-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

.members-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto
}

    .members-toolbar #searchForm {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        margin: 0;
        min-width: 0
    }

        .members-toolbar #searchForm > .input-field,
        .members-toolbar #searchForm > .btn,
        .members-toolbar > .btn {
            height: 32px;
            box-sizing: border-box
        }

        .members-toolbar #searchForm > .btn,
        .members-toolbar > .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            line-height: 1
        }

        .members-toolbar #searchForm > select.input-field {
            padding-top: 0;
            padding-bottom: 0
        }

.members-toolbar .member-partner-id-field {
    min-width: 180px;
    max-width: 260px;
    flex: 0 1 auto
}

.members-toolbar .member-partner-id-field .choices {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
    font-size: 13px
}

.members-toolbar .member-partner-id-field .choices__inner {
    background: rgba(0, 12, 28, .85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box
}

.members-toolbar .member-partner-id-field .choices.is-focused .choices__inner,
.members-toolbar .member-partner-id-field .choices.is-open .choices__inner {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 130, 255, .15)
}

.members-toolbar .member-partner-id-field .choices__list--single {
    padding: 0
}

.members-toolbar .member-partner-id-field .choices__list--single .choices__item {
    padding: 0;
    color: var(--text-primary)
}

.members-toolbar .member-partner-id-field .choices[data-type*=select-one]::after {
    border-color: var(--text-muted) transparent transparent;
    right: 10px
}

.members-toolbar .member-partner-id-field .choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent var(--text-muted);
    margin-top: -7.5px
}

.members-toolbar .member-partner-id-field .choices__list--dropdown,
.members-toolbar .member-partner-id-field .choices__list[aria-expanded] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
}

.members-toolbar .member-partner-id-field .choices__list--dropdown .choices__item,
.members-toolbar .member-partner-id-field .choices__list[aria-expanded] .choices__item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary)
}

.members-toolbar .member-partner-id-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.members-toolbar .member-partner-id-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(0, 130, 255, .12)
}

.members-toolbar .member-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 13px
}

html.light-mode .members-toolbar .member-partner-id-field .choices__inner {
    background: #fff;
    color: var(--text-primary)
}

html.light-mode .members-toolbar .member-partner-id-field .choices__list--dropdown,
html.light-mode .members-toolbar .member-partner-id-field .choices__list[aria-expanded],
html.light-mode .members-toolbar .member-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: #fff
}

.members-search-input {
    min-width: 0;
    flex: 1 1 120px
}

.members-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.members-pagination {
    flex-wrap: wrap;
    gap: 8px
}

/* Status ratio page (배당현황) */
.status-ratio-page {
    max-width: 100%;
    overflow-x: hidden
}

.status-ratio-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 16px
}

.status-ratio-card {
    overflow: hidden
}

.status-ratio-panel {
    position: relative
}

.status-ratio-table {
    width: 100%;
    table-layout: auto
}

.status-ratio-th-game {
    white-space: nowrap;
    min-width: 110px
}

.status-ratio-td-member {
    min-width: 180px;
    white-space: nowrap
}

.status-ratio-member-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.member-list-id-cell__wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap
}

.member-list-id-cell__level-icon {
    flex-shrink: 0
}

.member-list-id-cell__wrap .member-list-class-tag {
    flex-shrink: 0;
    font-size: 10px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap
}

.member-list-id-cell__wrap .member-list-class-tag--general,
.stat-dead-member-row .stat-dead-class-tag--general,
.treeview-page .jstree-anchor .partner-tree-class-tag--general,
.view-tree-modal__tree .jstree-anchor .partner-tree-class-tag--general,
.tree-detail-value .partner-tree-class-tag--general {
    background: var(--accent-green-glow);
    color: var(--accent-green);
    border: 1px solid rgba(0, 216, 104, .25)
}

.status-ratio-level-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px
}

.status-ratio-member-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px
}

.status-ratio-td-parent {
    white-space: nowrap
}

.status-ratio-tree-btn {
    padding: 2px 6px;
    font-size: 10.5px;
    margin-left: 4px;
    vertical-align: middle
}

.status-ratio-td-ratio {
    white-space: nowrap;
    min-width: 110px
}

.status-ratio-select {
    min-width: 100px;
    max-width: 160px;
    height: 30px;
    padding: 0 8px;
    font-size: 12px
}

.status-ratio-actions-cell {
    white-space: nowrap
}

/* Status fee page (요율현황) */
.status-fee-page {
    max-width: 100%;
    overflow-x: hidden
}

.status-fee-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 16px
}

.status-fee-card {
    overflow: hidden
}

.status-fee-panel {
    position: relative
}

.status-fee-table {
    width: 100%;
    table-layout: auto
}

.status-fee-th-group {
    white-space: nowrap;
    min-width: 168px
}

.status-fee-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
    font-size: 11.5px;
    color: var(--text-muted)
}

.status-fee-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

    .status-fee-legend-item .fa-check {
        color: var(--accent-green);
        font-size: 10px
    }

    .status-fee-legend-item .fa-minus {
        color: var(--text-muted);
        font-size: 10px
    }

.status-fee-legend-badge .status-fee-game-panel-badge {
    font-size: 10px;
    padding: 1px 6px
}

.status-fee-td-fees {
    vertical-align: top;
    min-width: 168px;
    padding: 8px !important
}

.status-fee-cell {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.status-fee-game-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.02);
    overflow: hidden
}

.status-fee-game-panel--compact .status-fee-game-panel-head {
    justify-content: center
}

.status-fee-game-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.03)
}

.status-fee-game-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.status-fee-game-panel-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    line-height: 1.3
}

.status-fee-badge--full {
    background: rgba(34,197,94,.15);
    color: var(--accent-green);
    border: 1px solid rgba(34,197,94,.25)
}

.status-fee-badge--partial {
    background: rgba(245,158,11,.15);
    color: var(--accent-orange);
    border: 1px solid rgba(245,158,11,.25)
}

.status-fee-badge--none {
    background: rgba(148,163,184,.1);
    color: var(--text-muted);
    border: 1px solid var(--border)
}

.status-fee-item-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 4px;
    padding: 6px
}

.status-fee-item-grid--single {
    grid-template-columns: 1fr
}

.status-fee-item {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    line-height: 1.25;
    border: 1px solid transparent
}

    .status-fee-item.is-set {
        background: rgba(34,197,94,.08);
        border-color: rgba(34,197,94,.18)
    }

        .status-fee-item.is-set .status-fee-item-check {
            color: var(--accent-green)
        }

        .status-fee-item.is-set .status-fee-item-val {
            color: var(--accent-green);
            font-weight: 700
        }

    .status-fee-item.is-unset {
        background: rgba(148,163,184,.06);
        border-color: rgba(148,163,184,.12)
    }

        .status-fee-item.is-unset .status-fee-item-check,
        .status-fee-item.is-unset .status-fee-item-label,
        .status-fee-item.is-unset .status-fee-item-val {
            color: var(--text-muted)
        }

.status-fee-item-check {
    font-size: 9px;
    text-align: center
}

.status-fee-item-label {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.status-fee-item-val {
    font-family: var(--font-mono,monospace);
    font-size: 10px;
    white-space: nowrap
}

.status-fee-actions-cell {
    white-space: nowrap;
    min-width: 200px
}

.status-fee-badge--high {
    background: rgba(239,68,68,.15);
    color: var(--accent-red,#ef4444);
    border: 1px solid rgba(239,68,68,.28)
}

.status-fee-item.is-high {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.22)
}

    .status-fee-item.is-high .status-fee-item-check {
        color: var(--accent-red,#ef4444)
    }

    .status-fee-item.is-high .status-fee-item-val {
        color: var(--accent-red,#ef4444);
        font-weight: 700
    }

.status-ins-legend .fa-exclamation {
    color: var(--accent-red,#ef4444);
    font-size: 10px
}

/* Status ins page (보험현황) */
.status-ins-page {
    max-width: 100%;
    overflow-x: hidden
}

.status-ins-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 16px
}

.status-ins-card {
    overflow: hidden
}

.status-ins-panel {
    position: relative
}

.status-ins-table {
    width: 100%;
    table-layout: auto
}

.status-ins-th-group {
    white-space: nowrap;
    min-width: 168px
}

.status-ins-td-ins {
    vertical-align: top;
    min-width: 168px;
    padding: 8px !important
}

.status-ins-actions-cell {
    white-space: nowrap;
    min-width: 200px
}

/* Status auto page (자동복사현황) */
.status-auto-page {
    max-width: 100%;
    overflow-x: hidden
}

.status-auto-summary-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 16px
}

@media (max-width: 900px) {
    .status-auto-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
}

.status-auto-card {
    overflow: hidden
}

.status-auto-panel {
    position: relative
}

.status-auto-table {
    width: 100%;
    table-layout: auto
}

.status-auto-th-group {
    white-space: nowrap;
    min-width: 168px
}

.status-auto-td-game {
    white-space: nowrap
}

.status-auto-td-copy {
    white-space: nowrap;
    min-width: 110px
}

.status-auto-td-flags {
    vertical-align: top;
    min-width: 168px;
    padding: 8px !important
}

.status-auto-actions-cell {
    white-space: nowrap;
    min-width: 90px
}

/* Customer QA page (1:1문의) */
.customer-qa-page {
    max-width: 100%;
    overflow-x: hidden
}

.customer-qa-summary-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px
}

@media (max-width: 900px) {
    .customer-qa-summary-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.customer-qa-card {
    overflow: hidden
}

.customer-qa-toolbar .customer-qa-date {
    width: 140px;
    min-width: 0
}

.customer-qa-date-sep {
    align-self: center;
    font-size: 12px;
    padding: 0 2px
}

.customer-qa-panel {
    position: relative
}

.customer-qa-table {
    width: 100%;
    table-layout: auto
}

.customer-qa-td-member {
    white-space: nowrap;
    min-width: 140px
}

.customer-qa-td-parent {
    white-space: nowrap;
    min-width: 120px
}

.customer-qa-td-memo {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 12px
}

.customer-qa-td-title {
    min-width: 180px;
    max-width: 260px
}

.customer-qa-actions-cell {
    white-space: nowrap;
    min-width: 200px
}

.qa-reply-modal .qa-reply-modal__panel {
    width: 820px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

    .qa-reply-modal .qa-reply-modal__panel #rmLoader,
    .qa-reply-modal .qa-reply-modal__panel form {
        display: block;
        height: auto;
        min-height: auto
    }

.qa-reply-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.qa-reply-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.qa-reply-modal .theme-sheet-modal__body,
.qa-reply-modal .qa-modal-body {
    overflow: visible;
    padding: 14px 16px 72px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.qa-modal-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden
}

.qa-modal-section--inquiry {
    border-color: rgba(0, 170, 255, .35);
    background: linear-gradient(180deg, rgba(0, 130, 255, .08) 0%, rgba(0, 130, 255, .02) 100%)
}

.qa-modal-section--reply {
    border-color: rgba(0, 232, 120, .3);
    background: linear-gradient(180deg, rgba(0, 232, 120, .07) 0%, rgba(0, 232, 120, .02) 100%)
}

.qa-reply-modal--view .qa-modal-section--reply {
    border-color: rgba(255, 170, 0, .35);
    background: linear-gradient(180deg, rgba(255, 170, 0, .08) 0%, rgba(255, 170, 0, .02) 100%)
}

.qa-modal-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-hover)
}

.qa-modal-section--inquiry .qa-modal-section__head {
    border-bottom-color: rgba(0, 170, 255, .2)
}

.qa-modal-section--reply .qa-modal-section__head {
    border-bottom-color: rgba(0, 232, 120, .2)
}

.qa-reply-modal--view .qa-modal-section--reply .qa-modal-section__head {
    border-bottom-color: rgba(255, 170, 0, .25)
}

.qa-modal-section__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px
}

.qa-modal-section__badge--inquiry {
    color: var(--accent-cyan);
    background: rgba(0, 170, 255, .14);
    border: 1px solid rgba(0, 170, 255, .28)
}

.qa-modal-section__badge--reply {
    color: var(--accent-green);
    background: rgba(0, 232, 120, .12);
    border: 1px solid rgba(0, 232, 120, .25)
}

.qa-reply-modal--view .qa-modal-section__badge--reply {
    color: var(--accent-orange);
    background: rgba(255, 170, 0, .12);
    border: 1px solid rgba(255, 170, 0, .28)
}

.qa-modal-section__hint {
    font-size: 11px;
    color: var(--text-muted)
}

.qa-modal-section__body {
    padding: 12px 14px 14px
}

.qa-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin-bottom: 10px
}

@media (max-width: 640px) {
    .qa-meta-grid {
        grid-template-columns: 1fr
    }
}

.qa-meta-item,
.qa-modal-section__field {
    min-width: 0
}

.qa-meta-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.qa-modal-section__field {
    margin-top: 2px
}

.qa-modal-section__field--editor {
    margin-top: 4px
}

.qa-modal-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    padding: 0 4px
}

.qa-modal-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-light), transparent)
}

.qa-modal-divider__label {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: .3px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px dashed var(--border-light);
    background: var(--bg-input)
}

.qa-readonly-field {
    background: var(--bg-input);
    cursor: default;
    min-height: 34px;
    display: flex;
    align-items: center;
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    word-break: break-word
}

.qa-modal-section--inquiry .qa-readonly-field {
    border-color: rgba(0, 170, 255, .18)
}

.qa-content-box {
    min-height: 80px;
    max-height: none;
    overflow: visible;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    word-break: break-word;
    overflow-wrap: anywhere
}

    .qa-content-box img,
    .qa-content-box table,
    .qa-content-box iframe {
        max-width: 100%
    }

    .qa-content-box img {
        height: auto
    }

.qa-content-box--inquiry {
    border-color: rgba(0, 170, 255, .2);
    background: var(--bg-secondary)
}

.qa-content-box--reply {
    border-color: rgba(255, 170, 0, .25);
    background: var(--bg-secondary);
    min-height: 80px;
    max-height: none;
    overflow: visible
}

.qa-modal-section--reply .input-field:not(.qa-readonly-field) {
    border-color: rgba(0, 232, 120, .22)
}

.qa-reply-modal--view .qa-modal-section--reply .input-field.qa-readonly-field {
    border-color: rgba(255, 170, 0, .25)
}

.qa-reply-modal--view .qa-modal-section--reply .input-field.qa-readonly-field,
.qa-reply-modal--view #rm_reply_title.qa-readonly-field {
    pointer-events: none;
    opacity: .95
}

.qa-reply-modal--view .note-editor.note-frame {
    opacity: .98
}

.qa-reply-modal--view .note-toolbar {
    display: none
}

.qa-reply-modal .qa-reply-editor {
    width: 100%;
    min-height: 120px
}

.qa-reply-modal .note-editor.note-frame {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    overflow: visible;
    background: var(--bg-input)
}

.qa-reply-modal .note-toolbar {
    background: var(--bg-elevated, var(--bg-input));
    border-bottom: 1px solid var(--border)
}

.qa-reply-modal .note-editing-area,
.qa-reply-modal .note-editable {
    background: var(--bg-input);
    color: var(--text-primary)
}

.qa-reply-modal .note-btn {
    color: var(--text-secondary)
}

.qa-reply-modal .note-statusbar {
    border-top: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg-input))
}

.note-modal,
.note-dropdown-menu,
.note-popover {
    z-index: 10010 !important
}

@media (max-width: 768px) {
    .qa-reply-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .qa-reply-modal .qa-reply-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

        .qa-reply-modal .theme-sheet-modal__header {
            padding: 12px 14px
        }

            .qa-reply-modal .theme-sheet-modal__header h3 {
                font-size: 13px;
                line-height: 1.35;
                padding-right: 8px
            }

        .qa-reply-modal .qa-modal-body {
            padding: 10px 12px 80px
        }

    .qa-modal-section {
        overflow: visible
    }

    .qa-modal-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px 12px
    }

    .qa-modal-section__hint {
        font-size: 10px;
        line-height: 1.45
    }

    .qa-modal-section__body {
        padding: 10px 12px 12px
    }

    .qa-content-box,
    .qa-content-box--inquiry,
    .qa-content-box--reply {
        min-height: 0;
        max-height: none;
        overflow: visible
    }

    .qa-modal-divider {
        margin: 10px 0;
        gap: 6px
    }

    .qa-modal-divider__label {
        font-size: 10px;
        line-height: 1.35;
        white-space: normal;
        text-align: center;
        max-width: 46vw
    }

    .qa-readonly-field {
        align-items: flex-start;
        min-height: 0
    }

    .qa-reply-modal .note-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap
    }

    .qa-reply-modal .note-editing-area .note-editable {
        min-height: 100px !important
    }

    .customer-qa-page .customer-qa-toolbar form {
        width: 100%
    }

    .customer-qa-toolbar .customer-qa-date {
        width: calc(50% - 14px);
        flex: 1 1 calc(50% - 14px)
    }

    .customer-qa-toolbar .input-field,
    .customer-qa-toolbar .members-search-input,
    .customer-qa-toolbar .btn {
        flex: 1 1 100%;
        min-width: 0
    }

    .customer-qa-actions-cell {
        min-width: 0;
        white-space: normal
    }

        .customer-qa-actions-cell .btn {
            margin: 2px 1px
        }

    .customer-qa-td-title,
    .customer-qa-td-memo {
        max-width: none;
        white-space: normal;
        word-break: break-word
    }
}

/* Board notice page */
.board-notice-page {
    max-width: 100%;
    overflow-x: hidden
}

.board-notice-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.board-notice-card {
    overflow: hidden
}

.board-notice-toolbar {
    flex-shrink: 0
}

.board-notice-panel {
    position: relative
}

.board-notice-table {
    width: 100%;
    table-layout: auto
}

.board-notice-th-no,
.board-notice-td-no {
    width: 48px;
    white-space: nowrap
}

.board-notice-td-title {
    min-width: 160px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.board-notice-actions-cell {
    white-space: nowrap;
    min-width: 130px
}

.board-notice-modal .board-notice-modal__panel {
    width: 760px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

    .board-notice-modal .board-notice-modal__panel #anmLoader,
    .board-notice-modal .board-notice-modal__panel #enmLoader,
    .board-notice-modal .board-notice-modal__panel form {
        display: block;
        height: auto;
        min-height: auto
    }

.board-notice-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.board-notice-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.board-notice-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.board-notice-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap
}

    .board-notice-check input {
        accent-color: var(--accent-blue);
        width: 14px;
        height: 14px;
        margin: 0
    }

.board-notice-editor {
    width: 100%;
    min-height: 120px
}

.board-notice-page .note-editor.note-frame {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.board-notice-page .note-toolbar {
    background: var(--bg-elevated, var(--bg-input));
    border-bottom: 1px solid var(--border)
}

.board-notice-page .note-editing-area,
.board-notice-page .note-editable {
    background: var(--bg-input);
    color: var(--text-primary)
}

@media (max-width: 768px) {
    .board-notice-summary-stats {
        grid-template-columns: 1fr
    }

    .board-notice-td-title {
        max-width: none;
        white-space: normal;
        word-break: break-word
    }

    .board-notice-actions-cell {
        white-space: normal;
        min-width: 0
    }

        .board-notice-actions-cell .btn {
            margin: 2px 1px
        }

    .board-notice-options {
        flex-direction: column;
        gap: 8px
    }

    .board-notice-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .board-notice-modal .board-notice-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

    .board-notice-page .note-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap
    }
}

/* Board event page */
.board-event-page {
    max-width: 100%;
    overflow-x: hidden
}

.board-event-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.board-event-card {
    overflow: hidden
}

.board-event-toolbar {
    flex-shrink: 0
}

.board-event-panel {
    position: relative
}

.board-event-table {
    width: 100%;
    table-layout: auto
}

.board-event-th-no,
.board-event-td-no {
    width: 48px;
    white-space: nowrap
}

.board-event-td-title {
    min-width: 140px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.board-event-thumb-cell {
    width: 72px;
    white-space: nowrap
}

.board-event-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    vertical-align: middle
}

.board-event-actions-cell {
    white-space: nowrap;
    min-width: 130px
}

.board-event-modal .board-event-modal__panel {
    width: 800px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

    .board-event-modal .board-event-modal__panel #aemLoader,
    .board-event-modal .board-event-modal__panel #eemLoader,
    .board-event-modal .board-event-modal__panel form {
        display: block;
        height: auto;
        min-height: auto
    }

.board-event-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.board-event-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.board-event-file-row {
    display: flex;
    align-items: center;
    gap: 8px
}

    .board-event-file-row .input-field {
        flex: 1;
        min-width: 0
    }

    .board-event-file-row .btn {
        flex-shrink: 0;
        white-space: nowrap
    }

.board-event-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.board-event-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap
}

    .board-event-check input {
        accent-color: var(--accent-blue);
        width: 14px;
        height: 14px;
        margin: 0
    }

.board-event-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px
}

.board-event-editor {
    width: 100%;
    min-height: 120px
}

.board-event-page .note-editor.note-frame {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.board-event-page .note-toolbar {
    background: var(--bg-elevated, var(--bg-input));
    border-bottom: 1px solid var(--border)
}

.board-event-page .note-editing-area,
.board-event-page .note-editable {
    background: var(--bg-input);
    color: var(--text-primary)
}

@media (max-width: 768px) {
    .board-event-summary-stats {
        grid-template-columns: 1fr
    }

    .board-event-td-title {
        max-width: none;
        white-space: normal;
        word-break: break-word
    }

    .board-event-actions-cell {
        white-space: normal;
        min-width: 0
    }

        .board-event-actions-cell .btn {
            margin: 2px 1px
        }

    .board-event-meta-grid {
        grid-template-columns: 1fr
    }

    .board-event-file-row {
        flex-direction: column;
        align-items: stretch
    }

        .board-event-file-row .btn {
            width: 100%
        }

    .board-event-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .board-event-modal .board-event-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

    .board-event-page .note-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap
    }
}

/* Board page (게시판) */
.board-page {
    max-width: 100%;
    overflow-x: hidden
}

.board-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.board-card {
    overflow: hidden
}

.board-toolbar {
    flex-wrap: wrap;
    gap: 8px
}

    .board-toolbar #searchForm {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px
    }

.board-date {
    width: 140px;
    min-width: 120px
}

.board-date-sep {
    flex-shrink: 0
}

.board-search-input {
    min-width: 120px;
    width: 160px
}

.board-write-btn {
    flex-shrink: 0
}

.board-panel {
    position: relative
}

.board-table {
    width: 100%;
    table-layout: auto
}

.board-th-no,
.board-td-no {
    width: 56px;
    white-space: nowrap
}

.board-td-title {
    min-width: 160px;
    max-width: 360px
}

.board-reply-count {
    margin-left: 6px;
    vertical-align: middle
}

.board-td-author {
    white-space: nowrap
}

.board-level-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-right: 4px
}

.board-actions-cell {
    white-space: nowrap;
    min-width: 180px
}

.board-modal .board-modal__panel {
    width: 820px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

.board-reply-modal .board-reply-modal__panel {
    width: 920px
}

.board-modal .board-modal__panel #abmLoader,
.board-modal .board-modal__panel #eemLoader,
.board-modal .board-modal__panel #brmLoader,
.board-modal .board-modal__panel form {
    display: block;
    height: auto;
    min-height: auto
}

.board-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.board-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.board-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-bottom: 10px
}

.board-form-grid--wide {
    grid-column: 1 / -1
}

.board-subject-row {
    display: flex;
    align-items: center;
    gap: 8px
}

    .board-subject-row .input-field {
        flex: 1;
        min-width: 0
    }

.board-color-input {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    cursor: pointer;
    flex-shrink: 0
}

.board-textarea {
    min-height: 100px;
    resize: vertical
}

.board-inline-row {
    display: flex;
    align-items: center;
    gap: 8px
}

    .board-inline-row .input-field {
        flex: 1;
        min-width: 0
    }

    .board-inline-row .btn {
        flex-shrink: 0;
        white-space: nowrap
    }

.board-field-hint {
    margin: 6px 0 0;
    font-size: 11px
}

.board-bet-slot,
.board-reply-slot {
    margin-bottom: 10px
}

.board-bet-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.board-bet-table {
    width: 100%;
    min-width: 720px;
    font-size: 11px
}

    .board-bet-table th,
    .board-bet-table td {
        padding: 6px 8px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle
    }

    .board-bet-table th {
        background: var(--bg-elevated, var(--bg-input));
        color: var(--text-secondary);
        font-weight: 600;
        white-space: nowrap
    }

    .board-bet-table tbody tr:last-child td {
        border-bottom: none
    }

.board-bet-pick {
    background: rgba(34, 211, 238, .12)
}

.board-bet-logo-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle
}

.board-bet-logo-md {
    width: 30px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle
}

.board-bet-choice {
    color: var(--accent-purple)
}

.board-bet-empty,
.board-bet-loading,
.board-reply-empty {
    padding: 12px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    text-align: center
}

.board-readonly-content {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word
}

.board-modal-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border)
}

    .board-modal-section:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none
    }

.board-modal-section__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px
}

.board-modal-section--compose {
    padding-top: 4px
}

.board-reply-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.board-reply-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    overflow: hidden
}

.board-reply-item--new {
    border-color: rgba(239, 68, 68, .35)
}

.board-reply-item--reviewed {
    border-color: rgba(34, 197, 94, .25)
}

.board-reply-meta {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg-input));
    font-size: 11.5px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px
}

.board-reply-body {
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
    color: var(--text-primary)
}

.board-reply-del {
    padding: 2px 6px !important;
    font-size: 10px !important;
    vertical-align: middle
}

@media (max-width: 768px) {
    .board-summary-stats {
        grid-template-columns: 1fr
    }

    .board-toolbar {
        flex-direction: column;
        align-items: stretch
    }

        .board-toolbar #searchForm {
            width: 100%
        }

        .board-toolbar .input-field,
        .board-toolbar .board-date,
        .board-toolbar .board-search-input {
            width: 100%;
            min-width: 0
        }

    .board-write-btn {
        width: 100%
    }

    .board-td-title {
        max-width: none
    }

    .board-actions-cell {
        white-space: normal;
        min-width: 0
    }

        .board-actions-cell .btn {
            margin: 2px 1px
        }

    .board-form-grid {
        grid-template-columns: 1fr
    }

    .board-inline-row,
    .board-subject-row {
        flex-direction: column;
        align-items: stretch
    }

        .board-inline-row .btn,
        .board-subject-row .board-color-input {
            width: 100%
        }

    .board-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .board-modal .board-modal__panel,
        .board-reply-modal .board-reply-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }
}

/* Attendance config page */
.attendance-config-page {
    max-width: 100%;
    overflow-x: hidden
}

.attendance-config-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.attendance-config-card {
    overflow: hidden
}

.attendance-config-body {
    padding-top: 16px
}

.attendance-config-notice {
    margin-bottom: 20px
}

.attendance-config-section {
    margin-bottom: 22px
}

    .attendance-config-section:last-child {
        margin-bottom: 0
    }

.attendance-config-section__title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px
}

.attendance-config-grid {
    gap: 12px 16px
}

.attendance-config-field {
    min-width: 0
}

.attendance-config-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500
}

.attendance-config-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

    .attendance-config-inline .input-field {
        width: 160px;
        min-width: 120px;
        flex-shrink: 0
    }

.attendance-config-suffix {
    font-size: 12px;
    line-height: 1.4
}

.attendance-point-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px
}

.attendance-point-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}

.attendance-point-card--highlight {
    border-color: rgba(251, 191, 36, .35);
    background: linear-gradient(165deg, var(--bg-input), rgba(251, 191, 36, .06))
}

.attendance-point-card__head {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.attendance-point-card__label {
    font-size: 11.5px;
    color: var(--text-muted)
}

.attendance-point-card__input {
    display: flex;
    align-items: center;
    gap: 6px
}

    .attendance-point-card__input .input-field {
        flex: 1;
        min-width: 0;
        font-weight: 600
    }

.attendance-point-card__unit {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0
}

.attendance-config-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

@media (max-width: 992px) {
    .attendance-point-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 768px) {
    .attendance-config-summary-stats {
        grid-template-columns: 1fr
    }

    .attendance-config-grid {
        grid-template-columns: 1fr
    }

    .attendance-config-inline {
        flex-direction: column;
        align-items: stretch
    }

        .attendance-config-inline .input-field {
            width: 100%
        }

    .attendance-point-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .attendance-config-footer .btn {
        width: 100%
    }
}

@media (max-width: 480px) {
    .attendance-point-grid {
        grid-template-columns: 1fr
    }
}

/* Attendance list page */
.attendance-list-page {
    max-width: 100%;
    overflow-x: hidden
}

.attendance-list-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.attendance-list-card {
    overflow: hidden
}

.attendance-list-toolbar {
    flex-wrap: wrap;
    gap: 8px
}

    .attendance-list-toolbar #searchForm {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px
    }

.attendance-list-date {
    width: 140px;
    min-width: 120px
}

.attendance-list-date-sep {
    flex-shrink: 0
}

.attendance-list-search-input {
    min-width: 120px;
    width: 160px
}

.attendance-list-panel {
    position: relative
}

.attendance-list-table {
    width: 100%;
    table-layout: auto
}

.attendance-list-td-member,
.attendance-list-td-parent {
    min-width: 140px;
    white-space: nowrap
}

    .attendance-list-td-member .member-menu-btn,
    .attendance-list-td-parent .member-menu-btn {
        font-weight: 600
    }

.attendance-list-actions-cell {
    white-space: nowrap;
    min-width: 90px
}

@media (max-width: 768px) {
    .attendance-list-summary-stats {
        grid-template-columns: 1fr
    }

    .attendance-list-toolbar {
        flex-direction: column;
        align-items: stretch
    }

        .attendance-list-toolbar #searchForm {
            width: 100%
        }

        .attendance-list-toolbar .input-field,
        .attendance-list-toolbar .attendance-list-date,
        .attendance-list-toolbar .attendance-list-search-input {
            width: 100%;
            min-width: 0
        }

    .attendance-list-td-member,
    .attendance-list-td-parent {
        white-space: normal;
        word-break: break-word
    }

    .attendance-list-actions-cell {
        white-space: normal;
        min-width: 0
    }
}

/* Customer inbox page (쪽지함) */
.customer-inbox-page {
    max-width: 100%;
    overflow-x: hidden
}

.customer-inbox-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.customer-inbox-card {
    overflow: hidden
}

.customer-inbox-toolbar {
    flex-wrap: wrap;
    gap: 8px
}

    .customer-inbox-toolbar form {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0
    }

    .customer-inbox-toolbar .customer-inbox-date {
        width: 140px;
        min-width: 0
    }

.customer-inbox-date-sep {
    align-self: center;
    font-size: 12px;
    padding: 0 2px
}

.customer-inbox-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0
}

.customer-inbox-panel {
    position: relative
}

.customer-inbox-table {
    width: 100%;
    table-layout: auto
}

.customer-inbox-td-member {
    white-space: nowrap;
    min-width: 140px
}

.customer-inbox-td-title {
    min-width: 160px;
    max-width: 280px;
    word-break: break-word
}

.customer-inbox-actions-cell {
    white-space: nowrap;
    min-width: 140px
}

.customer-inbox-modal .customer-inbox-modal__panel {
    width: 640px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

.customer-inbox-send-modal .customer-inbox-modal__panel {
    width: 520px
}

.customer-inbox-modal .customer-inbox-modal__panel #vmmLoader,
.customer-inbox-modal .customer-inbox-modal__panel #smamLoader,
.customer-inbox-modal .customer-inbox-modal__panel form {
    display: block;
    height: auto;
    min-height: auto
}

.customer-inbox-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.customer-inbox-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.customer-inbox-modal-body {
    padding-bottom: 16px
}

.customer-inbox-modal-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 12px
}

    .customer-inbox-modal-section:last-child {
        margin-bottom: 0
    }

.customer-inbox-modal-section--content {
    border-color: rgba(0, 170, 255, .3);
    background: linear-gradient(180deg, rgba(0, 130, 255, .06) 0%, rgba(0, 130, 255, .02) 100%)
}

.customer-inbox-modal-section__head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-hover)
}

.customer-inbox-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-cyan)
}

.customer-inbox-modal-badge--content {
    color: var(--accent-blue)
}

.customer-inbox-modal-section__body {
    padding: 12px 14px
}

.customer-inbox-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px
}

.customer-inbox-meta-label {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 4px
}

.customer-inbox-readonly {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
    min-height: 34px;
    display: flex;
    align-items: center
}

.customer-inbox-content-box {
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 170, 255, .2);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
    word-break: break-word;
    overflow-wrap: anywhere
}

.customer-inbox-hint {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px
}

.customer-inbox-hint--warn {
    color: var(--accent-orange)
}

.customer-inbox-send-textarea {
    min-height: 120px;
    resize: vertical
}

@media (max-width: 900px) {
    .customer-inbox-summary-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 768px) {
    .customer-inbox-summary-stats {
        grid-template-columns: 1fr
    }

    .customer-inbox-toolbar .customer-inbox-date {
        width: calc(50% - 14px);
        flex: 1 1 calc(50% - 14px)
    }

    .customer-inbox-toolbar .input-field,
    .customer-inbox-toolbar .btn {
        flex: 1 1 auto;
        min-width: 0
    }

    .customer-inbox-actions {
        width: 100%
    }

        .customer-inbox-actions .btn {
            flex: 1 1 auto;
            justify-content: center
        }

    .customer-inbox-meta-grid {
        grid-template-columns: 1fr
    }

    .customer-inbox-actions-cell {
        white-space: normal;
        min-width: 0
    }

        .customer-inbox-actions-cell .btn {
            margin: 2px 1px
        }

    .customer-inbox-td-title {
        max-width: none;
        white-space: normal
    }

    .customer-inbox-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .customer-inbox-modal .customer-inbox-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }
}

/* Customer template page */
.customer-template-page {
    max-width: 100%;
    overflow-x: hidden;
    --customer-template-create-editor-h: 260px
}

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

.customer-template-column {
    display: contents
}

    .customer-template-column > .customer-template-form-card:nth-child(1) {
        grid-column: 1;
        grid-row: 1
    }

    .customer-template-column > .customer-template-list-card:nth-child(2) {
        grid-column: 1;
        grid-row: 2
    }

    .customer-template-column:nth-child(2) > .customer-template-form-card:nth-child(1) {
        grid-column: 2;
        grid-row: 1
    }

    .customer-template-column:nth-child(2) > .customer-template-list-card:nth-child(2) {
        grid-column: 2;
        grid-row: 2
    }

.customer-template-form-card,
.customer-template-list-card {
    overflow: hidden
}

.customer-template-form-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0
}

.customer-template-create-form {
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.customer-template-create-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0
}

.customer-template-create-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 12px 16px;
    align-items: start;
    border-bottom: 1px solid var(--border)
}

.customer-template-create-row--title {
    align-items: center
}

.customer-template-create-row--content {
    align-items: start;
    border-bottom: none;
    flex: 1;
    min-height: 0
}

.customer-template-create-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card)
}

.customer-template-label {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 32px;
    margin: 0;
    white-space: nowrap
}

.customer-template-create-row--content .customer-template-label {
    line-height: 1.4;
    padding-top: 8px
}

.customer-template-create-editor-wrap {
    min-width: 0;
    width: 100%;
    height: var(--customer-template-create-editor-h);
    display: flex;
    flex-direction: column
}

    .customer-template-create-editor-wrap .input-field,
    .customer-template-create-editor-wrap .customer-template-editor,
    .customer-template-create-editor-wrap .note-editor.note-frame {
        width: 100%;
        box-sizing: border-box
    }

    .customer-template-create-editor-wrap .customer-template-textarea {
        flex: 1;
        height: 100%;
        min-height: 0
    }

    .customer-template-create-editor-wrap .note-editor.note-frame {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden
    }

    .customer-template-create-editor-wrap .note-editor .note-editing-area {
        flex: 1;
        min-height: 0 !important
    }

.customer-template-create-btn {
    flex-shrink: 0;
    white-space: nowrap
}

.customer-template-textarea {
    min-height: var(--customer-template-create-editor-h);
    resize: none
}

.customer-template-editor {
    width: 100%;
    min-height: var(--customer-template-create-editor-h)
}

.customer-template-page .note-editor.note-frame {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    margin: 0
}

.customer-template-page .note-toolbar {
    background: var(--bg-elevated, var(--bg-input));
    border-bottom: 1px solid var(--border)
}

.customer-template-page .note-editing-area,
.customer-template-page .note-editable {
    background: var(--bg-input);
    color: var(--text-primary)
}

.customer-template-list-card {
    overflow: visible
}

    .customer-template-list-card .customer-template-panel {
        position: relative;
        overflow: visible
    }

.customer-template-table {
    width: 100%;
    table-layout: fixed
}

.customer-template-th-date,
.customer-template-td-date {
    width: 100px;
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.customer-template-th-actions,
.customer-template-actions-cell {
    width: 72px
}

.customer-template-td-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal
}

.customer-template-actions-cell {
    white-space: nowrap
}

.customer-template-action-btn {
    padding: 3px 7px !important;
    font-size: 11px !important;
    line-height: 1;
    min-width: 0
}

.customer-template-modal .customer-template-modal__panel {
    width: 720px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

    .customer-template-modal .customer-template-modal__panel #etmLoader,
    .customer-template-modal .customer-template-modal__panel #emtmLoader,
    .customer-template-modal .customer-template-modal__panel form {
        display: block;
        height: auto;
        min-height: auto
    }

.customer-template-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.customer-template-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.customer-template-modal .theme-sheet-modal__body {
    overflow: visible;
    padding-bottom: 16px
}

.customer-template-modal .note-editor.note-frame {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

@media (max-width: 900px) {
    .customer-template-page {
        --customer-template-create-editor-h: 200px
    }

    .customer-template-grid {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

    .customer-template-column {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0
    }

        .customer-template-column > .customer-template-form-card:nth-child(1),
        .customer-template-column > .customer-template-list-card:nth-child(2),
        .customer-template-column:nth-child(2) > .customer-template-form-card:nth-child(1),
        .customer-template-column:nth-child(2) > .customer-template-list-card:nth-child(2) {
            grid-column: auto;
            grid-row: auto
        }

    .customer-template-form-card {
        height: auto
    }
}

@media (max-width: 768px) {
    .customer-template-create-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 12px
    }

    .customer-template-label,
    .customer-template-create-row--content .customer-template-label {
        line-height: 1.3;
        padding-top: 0
    }

    .customer-template-create-footer {
        padding: 10px 12px
    }

        .customer-template-create-footer .customer-template-create-btn {
            width: 100%;
            justify-content: center
        }

    .customer-template-page {
        --customer-template-create-editor-h: 180px
    }

    .customer-template-th-date,
    .customer-template-td-date {
        width: 72px;
        font-size: 9.5px
    }

    .customer-template-th-actions,
    .customer-template-actions-cell {
        width: 64px
    }

    .customer-template-action-btn {
        padding: 2px 5px !important;
        font-size: 10px !important
    }

    .customer-template-table thead th,
    .customer-template-table tbody td {
        padding-left: 8px;
        padding-right: 8px
    }

    .customer-template-modal {
        align-items: flex-end;
        padding: 0;
        overflow: hidden
    }

        .customer-template-modal .customer-template-modal__panel {
            width: 100%;
            max-width: 100%;
            height: calc(100dvh - 8px);
            height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            max-height: calc(100vh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

    .customer-template-page .note-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap
    }
}

/* Partner class page */
.partner-class-page .partner-class-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.partner-class-color {
    display: flex;
    gap: 6px;
    align-items: center
}

    .partner-class-color input[type="color"] {
        width: 30px;
        height: 30px;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: 2px;
        cursor: pointer;
        background: transparent;
        flex-shrink: 0
    }

.partner-class-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,.12);
    vertical-align: middle
}

    .partner-class-swatch + .partner-class-swatch {
        margin-left: 4px
    }

.partner-class-page #classWizardTabs {
    margin-bottom: 12px
}

    .partner-class-page #classWizardTabs .page-tab.active .wizard-step-num {
        background: var(--accent-blue);
        color: #fff
    }

/* Black bank page */
.black-bank-page {
    max-width: 100%;
    overflow-x: hidden
}

.black-bank-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.black-bank-form-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

    .black-bank-form-grid .input-field {
        width: 100%;
        box-sizing: border-box
    }

.black-bank-memo-field {
    margin-top: 8px
}

    .black-bank-memo-field .input-field {
        width: 100%;
        box-sizing: border-box
    }

.black-bank-actions {
    margin-top: 10px
}

.black-bank-list-panel {
    padding: 0;
    max-height: none
}

.black-bank-table {
    table-layout: auto;
    width: 100%
}

    .black-bank-table .black-bank-td-bank {
        width: 1%;
        white-space: nowrap
    }

    .black-bank-table .black-bank-td-memo {
        max-width: 280px;
        white-space: normal;
        word-break: break-word
    }

    .black-bank-table .black-bank-actions-cell {
        white-space: nowrap
    }

        .black-bank-table .black-bank-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

/* Black IP page */
.black-ip-page {
    max-width: 100%;
    overflow-x: hidden
}

.black-ip-form-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

    .black-ip-form-grid .input-field {
        width: 100%;
        box-sizing: border-box
    }

.black-ip-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.black-ip-memo-field {
    margin-top: 8px
}

    .black-ip-memo-field .input-field {
        width: 100%;
        box-sizing: border-box
    }

.black-ip-actions {
    margin-top: 10px
}

.black-ip-list-panel {
    padding: 0;
    max-height: none
}

.black-ip-table {
    table-layout: auto;
    width: 100%
}

    .black-ip-table .black-ip-td-ip {
        width: 1%;
        white-space: nowrap
    }

    .black-ip-table .black-ip-td-memo {
        max-width: 280px;
        white-space: normal;
        word-break: break-word
    }

    .black-ip-table .black-ip-actions-cell {
        white-space: nowrap
    }

        .black-ip-table .black-ip-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

/* Admin list page */
.admin-list-page {
    max-width: 100%;
    overflow-x: hidden
}

.admin-list-form-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

.admin-list-extra-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    margin-top: 8px
}

    .admin-list-form-grid .input-field,
    .admin-list-extra-grid .input-field {
        width: 100%;
        box-sizing: border-box
    }

.admin-list-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.admin-list-actions {
    margin-top: 10px
}

.admin-list-panel {
    padding: 0;
    max-height: none
}

.admin-list-table {
    table-layout: auto;
    width: 100%
}

    .admin-list-table .admin-list-td-id {
        width: 1%;
        white-space: nowrap
    }

    .admin-list-table .admin-list-td-memo {
        max-width: 220px;
        white-space: normal;
        word-break: break-word
    }

    .admin-list-table .admin-list-td-ip {
        max-width: 160px;
        white-space: normal;
        word-break: break-all
    }

    .admin-list-table .admin-list-actions-cell {
        white-space: nowrap
    }

        .admin-list-table .admin-list-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

.admin-list-readonly {
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: default
}

.admin-list-modal-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

    .admin-list-modal-grid .theme-sheet-modal__field {
        margin-bottom: 0
    }

/* Admin work log page */
.admin-work-log-page {
    max-width: 100%;
    overflow-x: hidden
}

.log-member-page {
    max-width: 100%;
    overflow-x: hidden
}

.log-member-list-panel {
    padding: 0;
    max-height: none
}

.log-member-table {
    table-layout: fixed;
    width: 100%
}

    .log-member-table col.log-member-col-id {
        width: 11%
    }

    .log-member-table col.log-member-col-tag {
        width: 8%
    }

    .log-member-table col.log-member-col-tag2 {
        width: 8%
    }

    .log-member-table col.log-member-col-value {
        width: 18%
    }

    .log-member-table col.log-member-col-admin {
        width: 7%
    }

    .log-member-table col.log-member-col-ip {
        width: 9%
    }

    .log-member-table col.log-member-col-memo {
        width: 10%
    }

    .log-member-table col.log-member-col-date {
        width: 11%
    }

    .log-member-table .log-member-td-id {
        white-space: nowrap
    }

    .log-member-table .log-member-td-ip {
        white-space: nowrap
    }

    .log-member-table .log-member-td-tag2 {
        min-width: 0;
        white-space: normal;
        word-break: keep-all
    }

    .log-member-table .log-member-td-value,
    .log-member-table .log-member-td-before,
    .log-member-table .log-member-td-after {
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.45;
        vertical-align: top
    }

    .log-member-table .log-member-td-memo {
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.45;
        vertical-align: top
    }

.members-toolbar .log-member-date {
    min-width: 130px
}

.members-toolbar .log-member-date-sep {
    line-height: 32px
}

.log-config-page {
    max-width: 100%;
    overflow-x: hidden
}

.log-config-list-panel {
    padding: 0;
    max-height: none
}

.log-config-table {
    table-layout: fixed;
    width: 100%
}

    .log-config-table col.log-config-col-tag {
        width: 12%
    }

    .log-config-table col.log-config-col-tag2 {
        width: 12%
    }

    .log-config-table col.log-config-col-value {
        width: 22%
    }

    .log-config-table col.log-config-col-admin {
        width: 12%
    }

    .log-config-table col.log-config-col-ip {
        width: 9%
    }

    .log-config-table col.log-config-col-memo {
        width: 14%
    }

    .log-config-table col.log-config-col-date {
        width: 14%
    }

    .log-config-table .log-config-td-admin {
        white-space: nowrap
    }

    .log-config-table .log-config-td-tag2 {
        min-width: 0;
        white-space: normal;
        word-break: keep-all
    }

    .log-config-table .log-config-td-value,
    .log-config-table .log-config-td-before,
    .log-config-table .log-config-td-after {
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.45;
        vertical-align: top
    }

    .log-config-table .log-config-td-memo {
        min-width: 0;
        max-width: none;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.45;
        vertical-align: top
    }

.members-toolbar .log-config-date {
    min-width: 130px
}

.members-toolbar .log-config-date-sep {
    line-height: 32px
}

.admin-work-log-list-panel {
    padding: 0;
    max-height: none
}

.admin-work-log-table {
    table-layout: auto;
    width: 100%
}

    .admin-work-log-table .admin-work-log-td-name,
    .admin-work-log-table .admin-work-log-td-ip {
        width: 1%;
        white-space: nowrap
    }

    .admin-work-log-table .admin-work-log-td-domain {
        max-width: 220px;
        white-space: normal;
        word-break: break-all
    }

    .admin-work-log-table .admin-work-log-td-memo {
        max-width: 320px;
        white-space: normal;
        word-break: break-word
    }

.members-toolbar .admin-work-log-date {
    width: auto;
    min-width: 130px;
    flex: 0 1 auto
}

.members-toolbar .admin-work-log-date-sep {
    color: var(--text-muted);
    padding: 0 2px;
    line-height: 32px;
    flex-shrink: 0
}

/* Admin login live page */
.admin-login-live-page {
    max-width: 100%;
    overflow-x: hidden
}

.admin-login-live-panel {
    padding: 0;
    max-height: none
}

.admin-login-live-table {
    table-layout: auto;
    width: 100%
}

    .admin-login-live-table .admin-login-live-td-id,
    .admin-login-live-table .admin-login-live-td-ip {
        width: 1%;
        white-space: nowrap
    }

    .admin-login-live-table .admin-login-live-td-domain,
    .admin-login-live-table .admin-login-live-td-path {
        max-width: 220px;
        white-space: normal;
        word-break: break-all
    }

    .admin-login-live-table .admin-login-live-td-id .tag {
        margin-left: 6px;
        vertical-align: middle
    }

    .admin-login-live-table .admin-login-live-actions-cell {
        white-space: nowrap
    }

        .admin-login-live-table .admin-login-live-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

/* Member login log page */
.member-login-log-page {
    max-width: 100%;
    overflow-x: hidden
}

.member-login-log-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 16px
}

    .member-login-log-summary-stats .stat-value--sm {
        font-size: 17px
    }

.member-login-log-card {
    margin-bottom: 0;
    overflow: hidden
}

    .member-login-log-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

.member-login-log-panel {
    padding: 0;
    max-height: none
}

.member-login-log-table {
    table-layout: auto;
    width: 100%
}

    .member-login-log-table .member-login-log-td-id,
    .member-login-log-table .member-login-log-td-ip {
        width: 1%;
        white-space: nowrap
    }

    .member-login-log-table .member-login-log-td-url {
        max-width: 260px;
        white-space: normal;
        word-break: break-all
    }

.member-login-log-td-ip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.member-login-log-ip-btn {
    padding: 1px 6px;
    font-size: 9px;
    flex-shrink: 0;
    margin-right: 4px;
    font-family: var(--font-body) !important;
    font-variant-numeric: normal;
    letter-spacing: normal
}

.member-login-live-page .member-login-live-table .member-login-log-td-ip .btn {
    font-family: var(--font-body) !important;
    font-variant-numeric: normal;
    letter-spacing: normal
}

.members-toolbar .member-login-log-date {
    width: auto;
    min-width: 130px;
    flex: 0 1 auto
}

.members-toolbar .member-login-log-date-sep {
    flex-shrink: 0;
    line-height: 32px
}

/* Member login live page */
.member-login-live-page {
    max-width: 100%;
    overflow-x: hidden
}

.member-login-live-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px
}

    .member-login-live-tabs::-webkit-scrollbar {
        display: none
    }

    .member-login-live-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap
    }

.member-login-live-summary-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-bottom: 16px
}

    .member-login-live-summary-stats .stat-value--sm {
        font-size: 17px
    }

.member-login-live-card {
    margin-bottom: 0;
    overflow: hidden;
    position: relative
}

    .member-login-live-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px
    }

.member-login-live-refresh-note {
    font-size: 12.5px;
    margin-left: auto
}

.member-login-live-panel {
    padding: 0;
    max-height: none
}

.member-login-live-table {
    table-layout: auto;
    width: 100%
}

    .member-login-live-table .member-login-live-td-id,
    .member-login-live-table .member-login-live-td-ip,
    .member-login-live-table .member-login-log-td-ip {
        width: 1%;
        white-space: nowrap
    }

    .member-login-live-table .member-login-live-td-domain,
    .member-login-live-table .member-login-live-td-path {
        max-width: 220px;
        white-space: normal;
        word-break: break-all
    }

.member-login-live-td-ip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.member-login-live-td-thirdparty {
    white-space: nowrap
}

    .member-login-live-td-thirdparty .font-mono {
        margin-right: 4px
    }

.member-login-live-action-btn {
    padding: 2px 6px;
    font-size: 11.5px;
    vertical-align: middle
}

.member-login-live-actions-cell {
    white-space: nowrap
}

.member-login-live-page .member-login-live-table td.font-mono,
.member-login-live-page .member-login-live-table .font-mono,
.member-login-live-page .member-login-live-table td.member-login-live-td-money,
.member-login-live-page .member-login-live-table td.member-login-live-td-point {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12.5px;
    letter-spacing: -.3px;
    font-variant-numeric: tabular-nums
}

    .member-login-live-page .member-login-live-table td.font-mono a {
        font-family: inherit
    }

/* Config domain page */
.config-domain-page {
    max-width: 100%;
    overflow-x: hidden
}

.config-domain-tabs {
    margin-bottom: 14px
}

.config-domain-actions {
    margin-bottom: 12px
}

.config-domain-list-panel {
    padding: 0;
    max-height: none
}

.config-domain-table {
    table-layout: auto;
    width: 100%
}

    .config-domain-table .config-domain-input {
        width: 100%;
        min-width: 160px;
        box-sizing: border-box
    }

    .config-domain-table .config-domain-select {
        width: 100%;
        min-width: 180px;
        max-width: 260px;
        box-sizing: border-box
    }

    .config-domain-table .config-domain-ui-col {
        width: 1%;
        white-space: nowrap
    }

    .config-domain-table .config-domain-use-col {
        width: 90px
    }

    .config-domain-table .config-domain-toggle {
        justify-content: center;
        margin: 0 auto
    }

    .config-domain-table .config-domain-actions-cell {
        white-space: nowrap
    }

        .config-domain-table .config-domain-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

.config-domain-live-page > .card > .card-body {
    padding: 14px 18px
}

.config-domain-live-count {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(0,130,255,.1);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap
}

.config-domain-live-table .config-domain-input[data-type="name"] {
    min-width: 140px;
    max-width: 220px
}

.config-domain-live-table .config-domain-input[data-type="domain"] {
    min-width: 220px
}

.admin-list-panel,
.admin-work-log-list-panel,
.log-config-list-panel,
.log-member-list-panel,
.admin-login-live-panel,
.member-login-log-panel,
.member-login-live-panel,
.config-domain-list-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%
}

.table-scroll.admin-list-panel,
.table-scroll.admin-work-log-list-panel,
.table-scroll.admin-login-live-panel,
.table-scroll.member-login-log-panel,
.table-scroll.member-login-live-panel {
    max-height: none
}

    .table-scroll.admin-list-panel .admin-list-table,
    .table-scroll.admin-work-log-list-panel .admin-work-log-table,
    .table-scroll.log-config-list-panel .log-config-table,
    .table-scroll.log-member-list-panel .log-member-table,
    .table-scroll.admin-login-live-panel .admin-login-live-table,
    .table-scroll.member-login-log-panel .member-login-log-table,
    .table-scroll.member-login-live-panel .member-login-live-table,
    .table-scroll.config-domain-list-panel .config-domain-table {
        min-width: 860px
    }

.table-scroll.config-domain-list-panel .config-domain-table {
    min-width: 620px
}

/* Admin config page (uses config-site-page patterns) */
.config-site-page.admin-config-page--split .admin-config-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start
}

.admin-config-main-actions {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border)
}

.admin-config-game-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.admin-config-game-section-title {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .3px
}

    .admin-config-game-section-title:first-child {
        margin-top: 0
    }

/* Admin del history page */
.admin-del-history-page {
    max-width: 100%;
    overflow-x: hidden
}

.admin-del-history-body {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.admin-del-history-notice {
    margin-bottom: 0;
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .22);
    color: var(--accent-red)
}

    .admin-del-history-notice i {
        flex-shrink: 0;
        margin-top: 1px
    }

.admin-del-history-game-panel {
    display: none;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg, var(--bg-card), var(--bg-secondary))
}

    .admin-del-history-game-panel.is-visible {
        display: block
    }

.admin-del-history-game-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 10px;
    letter-spacing: .3px
}

.admin-del-history-game-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.admin-del-history-game-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    font-size: 11.5px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s, background .15s
}

    .admin-del-history-game-item:has(input:checked) {
        border-color: rgba(37, 99, 235, .35);
        background: var(--accent-blue-glow)
    }

    .admin-del-history-game-item input {
        margin: 0;
        flex-shrink: 0
    }

.members-toolbar .admin-del-history-userid {
    min-width: 120px;
    flex: 1 1 120px;
    max-width: 180px
}

    .members-toolbar .admin-del-history-userid:disabled {
        opacity: .55;
        cursor: not-allowed
    }

.members-toolbar .admin-del-history-delete-btn {
    white-space: nowrap
}

.empty-state--inline {
    padding: 16px 10px
}

    .empty-state--inline p {
        margin: 0;
        font-size: 12.5px;
        color: var(--text-muted)
    }

/* Roulette page */
.roulette-page .roulette-table {
    table-layout: auto;
    width: 100%
}

.roulette-page .roulette-list-panel {
    padding: 0;
    max-height: none
}

.roulette-page .roulette-color-swatch {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    color: #fff
}

.roulette-page .roulette-actions-cell {
    white-space: nowrap
}

    .roulette-page .roulette-actions-cell .btn {
        padding: 3px 8px;
        font-size: 11.5px
    }

.roulette-page .roulette-color-field {
    display: flex;
    align-items: center;
    gap: 8px
}

    .roulette-page .roulette-color-field .input-field {
        flex: 1;
        min-width: 0
    }

.partner-class-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

    .partner-class-form-grid .input-field {
        width: 100%;
        box-sizing: border-box
    }

.partner-class-color-text {
    width: 100px
}

.partner-class-list-panel {
    padding: 0;
    max-height: none
}

.partner-class-table {
    width: 100%
}

    .partner-class-table thead th:nth-child(1),
    .partner-class-table tbody td:nth-child(1) {
        width: 72px;
        text-align: center
    }

    .partner-class-table thead th:nth-child(3),
    .partner-class-table tbody td:nth-child(3) {
        width: 88px;
        text-align: center
    }

    .partner-class-table thead th:nth-child(4),
    .partner-class-table tbody td:nth-child(4) {
        width: 96px;
        text-align: center
    }

    .partner-class-table .partner-class-td-name {
        white-space: normal;
        word-break: break-word
    }

    .partner-class-table .partner-class-actions-cell {
        white-space: nowrap
    }

        .partner-class-table .partner-class-actions-cell .btn {
            padding: 3px 8px;
            font-size: 11.5px
        }

.partner-class-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end
}

.partner-class-complete {
    padding: 40px;
    margin: 0;
    border: none;
    background: transparent
}

    .partner-class-complete i {
        opacity: 1
    }

/* Treeview page – PC */
.treeview-page {
    max-width: 100%;
    overflow-x: hidden
}

.treeview-layout {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,2fr);
    gap: 16px;
    align-items: start
}

.tree-sidebar-card {
    /* position: sticky; */
    /* top: calc(var(--topbar-height) + 12px); */
    align-self: start;
    margin-bottom: 0
}

.tree-search-input {
    width: 100%;
    margin-bottom: 12px
}

.tree-container {
    font-family: var(--font-mono);
    font-size: 13.5px;
    line-height: 2.2;
    max-height: 600px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.tree-node {
    word-break: break-word;
    overflow-wrap: anywhere
}

.tree-detail-panel {
    margin-bottom: 0
}

.treeview-main-card {
    margin-bottom: 0;
    overflow: hidden
}

.tree-jstree-container {
    max-height: min(72vh, 1100px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0
}

.tree-detail-empty .empty-state {
    min-height: 280px
}

.tree-action-tabs {
    margin-bottom: 14px;
    flex-wrap: wrap
}

.tree-tab-panel {
    display: none
}

    .tree-tab-panel.active {
        display: block
    }

.tree-action-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.tree-action-btn {
    padding: 4px 10px !important;
    font-size: 11px !important
}

.tree-detail-fields {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 8px
}

.tree-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px
}

.tree-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    min-width: 0
}

.tree-detail-item--last,
.tree-detail-grid .tree-detail-item:nth-last-child(-n+2) {
    /* border-bottom: none; */
}

.tree-detail-label {
    font-size: 11px;
    color: var(--text-muted);
    width: 70px;
    flex-shrink: 0
}

.tree-detail-value {
    font-size: 12px;
    word-break: break-word;
    flex: 1;
    min-width: 0
}

.tree-detail-value--strong {
    font-weight: 600
}

.tree-detail-value--mono {
    font-family: var(--font-mono)
}

.tree-detail-value--date {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted)
}

.tree-detail-value--login {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--accent-blue)
}

.tree-detail-tag {
    font-size: 10px
}

.tree-section-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px
}

    .tree-section-title:first-child {
        margin-top: 0
    }

.tree-member-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center
}

.tree-dead-stats {
    margin-bottom: 8px
}

.tree-dead-warning {
    font-size: 11px;
    color: var(--accent-red);
    margin: 0 0 12px
}

.tree-fee-section {
    margin-top: 4px
}

.tree-fee-group {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .02)
}

.tree-fee-group-title {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px
}

.tree-fee-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.treeview-page .jstree-default .jstree-anchor {
    color: var(--text-secondary);
    font-size: 12.5px;
    line-height: 1.6;
    height: auto;
    padding: 2px 4px
}

.treeview-page .jstree-default .jstree-clicked,
.treeview-page .jstree-default .jstree-hovered {
    background: var(--accent-blue-glow, rgba(59, 130, 246, .12));
    border-radius: 4px;
    box-shadow: none
}

.treeview-page .jstree-default .jstree-themeicon {
    margin-right: 4px
}

.treeview-page .jstree-search {
    font-style: normal;
    color: var(--accent-orange);
    font-weight: 700
}

.treeview-page .jstree-anchor .partner-tree-class-tag {
    margin-right: 4px;
    vertical-align: middle
}

.treeview-page .jstree-anchor .partner-tree-node-identity {
    vertical-align: middle
}

.view-tree-modal__tree .jstree-anchor .partner-tree-class-tag {
    margin-right: 4px;
    vertical-align: middle
}

.view-tree-modal__tree .jstree-anchor .partner-tree-node-identity {
    vertical-align: middle
}

/* Member create page (회원생성) – PC */
.member-create-page {
    max-width: 100%;
    overflow-x: hidden
}

.member-create-wizard, .member-bulk-card {
    margin-bottom: 16px
}

.member-wizard-tabs {
    flex-wrap: wrap;
    margin-bottom: 16px
}

.wizard-step-num {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    font-weight: 700
}

    .wizard-step-num.is-active {
        background: var(--accent-blue);
        color: #fff
    }

.member-wizard-tabs .page-tab.active .wizard-step-num.is-active {
    background: var(--accent-blue);
    color: #fff
}

.form-grid {
    display: grid;
    gap: 14px
}

.form-grid-2 {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.form-grid-3 {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.form-field label.form-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.form-hint {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 4px
}

.form-hint-warn {
    color: var(--accent-red)
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap
}

.bulk-create-grid {
    margin-bottom: 0
}

.bulk-info-notice {
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--accent-green-glow);
    border: 1px solid rgba(22,163,74,.2);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--accent-green);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5
}

.bulk-range-block {
    margin-top: 14px
}

.bulk-range-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.bulk-range-label {
    font-size: 12.5px;
    color: var(--text-secondary);
    font-weight: 600;
    flex-shrink: 0
}

.bulk-range-input {
    width: 80px;
    min-width: 0;
    text-align: center;
    flex: 0 1 80px
}

.bulk-count-label {
    font-size: 12.5px;
    color: var(--accent-blue);
    font-weight: 600;
    margin-left: 0
}

.bulk-preview-box {
    margin-top: 14px;
    padding: 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm)
}

.bulk-preview-title {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 600
}

    .bulk-preview-title i {
        margin-right: 4px
    }

.bulk-preview-list {
    font-size: 12.5px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
    max-height: 100px;
    overflow-y: auto;
    line-height: 1.8;
    -webkit-overflow-scrolling: touch
}

.member-fee-tabs {
    margin-bottom: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .member-fee-tabs::-webkit-scrollbar {
        display: none
    }

    .member-fee-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap
    }

.member-fee-grid {
    margin-top: 0
}

.member-complete-panel .empty-state {
    padding: 32px 16px;
    text-align: center
}

.member-complete-icon {
    color: var(--accent-green);
    font-size: 42px;
    display: block
}

.member-complete-text {
    font-size: 16px;
    font-weight: 600;
    margin-top: 14px;
    color: var(--text-primary)
}

.member-complete-btn {
    margin-top: 12px
}

/* Add partner page (회원생성) */
.add-partner-page .add-partner-wizard,
.add-partner-page .add-partner-wizard-body,
.add-partner-page .add-partner-wizard .tab-pane,
.add-partner-page .add-partner-wizard form,
.add-partner-page .add-partner-wizard .form-grid,
.add-partner-page .add-partner-bulk-card .form-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.add-partner-page .add-partner-wizard .member-fee-tabs,
.add-partner-page .add-partner-wizard .member-fee-grid,
.add-partner-page .add-partner-wizard .ap-fee-panel,
.add-partner-page .add-partner-wizard .set-fee-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.add-partner-page .add-partner-wizard .form-field,
.add-partner-page .add-partner-bulk-card .form-field {
    width: 100%;
    min-width: 0
}

.add-partner-page .add-partner-wizard .input-field,
.add-partner-page .add-partner-wizard select.input-field,
.add-partner-page .add-partner-bulk-card .input-field,
.add-partner-page .add-partner-bulk-card select.input-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.add-partner-wizard .card-body {
    padding: 16px 18px
}

.add-partner-page #addPartnerWizardPanel {
    position: relative;
    min-height: 160px
}

.add-partner-check-field {
    display: flex;
    align-items: flex-end
}

.add-partner-page .add-partner-wizard .form-field .choices,
.add-partner-page .add-partner-parent-field .choices {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    font-size: 13px
}

.add-partner-page .add-partner-wizard .form-field .choices__inner,
.add-partner-page .add-partner-parent-field .choices__inner {
    width: 100%;
    height: 32px;
    min-height: 32px;
    background: rgba(0, 12, 28, .85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box
}

.add-partner-page .add-partner-wizard .form-field .choices.is-focused .choices__inner,
.add-partner-page .add-partner-wizard .form-field .choices.is-open .choices__inner,
.add-partner-page .add-partner-parent-field .choices.is-focused .choices__inner,
.add-partner-page .add-partner-parent-field .choices.is-open .choices__inner {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 130, 255, .15)
}

.add-partner-page .add-partner-wizard .form-field .choices__list--single,
.add-partner-page .add-partner-parent-field .choices__list--single {
    padding: 0;
    min-height: 18px;
    display: flex;
    align-items: center
}

.add-partner-page .add-partner-wizard .form-field .choices__list--single .choices__item,
.add-partner-page .add-partner-parent-field .choices__list--single .choices__item {
    padding: 0;
    line-height: 18px;
    color: var(--text-primary)
}

.add-partner-page .add-partner-wizard .form-field .choices[data-type*=select-one]::after,
.add-partner-page .add-partner-parent-field .choices[data-type*=select-one]::after {
    border-color: var(--text-muted) transparent transparent;
    right: 10px;
    top: 50%;
    margin-top: -2.5px
}

.add-partner-page .add-partner-wizard .form-field .choices__list--dropdown,
.add-partner-page .add-partner-wizard .form-field .choices__list[aria-expanded],
.add-partner-page .add-partner-parent-field .choices__list--dropdown,
.add-partner-page .add-partner-parent-field .choices__list[aria-expanded] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 40;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
}

.add-partner-page .add-partner-wizard .form-field .choices__list--dropdown .choices__item,
.add-partner-page .add-partner-wizard .form-field .choices__list[aria-expanded] .choices__item,
.add-partner-page .add-partner-parent-field .choices__list--dropdown .choices__item,
.add-partner-page .add-partner-parent-field .choices__list[aria-expanded] .choices__item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary)
}

.add-partner-page .add-partner-wizard .form-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.add-partner-page .add-partner-wizard .form-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.add-partner-page .add-partner-parent-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.add-partner-page .add-partner-parent-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(0, 130, 255, .12)
}

.add-partner-page .add-partner-wizard .form-field .choices[data-type*=select-one] .choices__input,
.add-partner-page .add-partner-parent-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 13px
}

html.light-mode .add-partner-page .add-partner-wizard .form-field .choices__inner,
html.light-mode .add-partner-page .add-partner-parent-field .choices__inner {
    background: var(--bg-input);
    border-color: var(--border)
}

html.light-mode .add-partner-page .add-partner-wizard .form-field .choices__list--dropdown,
html.light-mode .add-partner-page .add-partner-wizard .form-field .choices__list[aria-expanded],
html.light-mode .add-partner-page .add-partner-wizard .form-field .choices[data-type*=select-one] .choices__input,
html.light-mode .add-partner-page .add-partner-parent-field .choices__list--dropdown,
html.light-mode .add-partner-page .add-partner-parent-field .choices__list[aria-expanded],
html.light-mode .add-partner-page .add-partner-parent-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card);
    border-color: var(--border)
}

.add-partner-wizard-nav {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border)
}

    .add-partner-wizard-nav .btn {
        min-width: 108px
    }

    .add-partner-wizard-nav #btnWizardNext {
        margin-left: auto
    }

.add-partner-bulk-card {
    margin-top: 16px
}

.add-partner-page #bulkCreatePanel {
    position: relative;
    min-height: 80px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.add-partner-page .bulk-range-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.add-partner-page .ap-fee-panel {
    display: none
}

    .add-partner-page .ap-fee-panel.is-active {
        display: block
    }

.add-partner-page .set-fee-card {
    margin-bottom: 10px
}

.add-partner-pending-table {
    width: 100%;
    table-layout: auto
}

    .add-partner-pending-table thead th {
        white-space: nowrap
    }

.add-partner-member-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.add-partner-level-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%
}

.add-partner-status-tags {
    margin-top: 4px
}

    .add-partner-status-tags .tag {
        font-size: 10px;
        padding: 2px 6px;
        border-radius: 4px
    }

.add-partner-tree-link {
    margin-left: 6px;
    font-size: 12px
}

.add-partner-blackbank {
    color: var(--accent-red);
    background: rgba(255,48,64,.08)
}

.add-partner-blackbank-num {
    color: var(--accent-red);
    background: rgba(0,0,0,.35)
}

.add-partner-actions-cell {
    white-space: nowrap
}

    .add-partner-actions-cell .btn {
        padding: 3px 8px;
        font-size: 11.5px;
        margin: 1px 0
    }

.add-partner-row--new {
    background: rgba(0,232,120,.06)
}

.add-partner-row--pending {
    background: rgba(0,200,255,.06)
}

.add-partner-row--suspend {
    background: rgba(255,170,0,.08)
}

.add-partner-row--exit {
    background: rgba(255,255,255,.04)
}

.add-partner-page .invalid-feedback {
    display: none;
    font-size: 11.5px;
    color: var(--accent-red);
    margin-top: 4px;
    line-height: 1.4
}

.add-partner-page .form-field .invalid-feedback,
.add-partner-page .set-fee-field .invalid-feedback {
    display: none
}

.add-partner-page .input-field.is-invalid,
.add-partner-page select.input-field.is-invalid {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 1px rgba(255,48,64,.15)
}

.add-partner-page .was-validated .input-field:invalid,
.add-partner-page .was-validated select.input-field:invalid {
    border-color: var(--accent-red)
}

.bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px
}

@media(max-width:992px) {
    .members-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .form-grid-3 {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .treeview-layout {
        grid-template-columns: minmax(0,1fr) minmax(0,1.5fr)
    }
}

/* Charge / Exchange pages (충전·환전현황) – PC */
.charge-page, .exchange-page, .pointexchange-page {
    max-width: 100%;
    overflow-x: hidden
}

.charge-summary-stats, .exchange-summary-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 16px
}

.charge-section-card, .exchange-section-card {
    margin-bottom: 16px;
    overflow: hidden
}

.charge-history-card, .exchange-history-card {
    margin-bottom: 0
}

.charge-page .charge-section-card .card-header,
.exchange-page .exchange-section-card .card-header,
.pointexchange-page .charge-section-card .card-header {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap
}

.charge-toolbar, .exchange-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: auto
}

.charge-auto-refresh-controls,
.exchange-auto-refresh-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

.charge-auto-refresh-sec,
.exchange-auto-refresh-sec {
    width: 64px;
    min-width: 64px;
    text-align: center;
    padding: 4px 6px
}

.charge-auto-refresh-sec-unit,
.exchange-auto-refresh-sec-unit {
    font-size: 12px;
    color: var(--text-muted)
}

.charge-btn-wait, .exchange-btn-wait {
    color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important
}

.inout-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-height: none
}

.inout-payment-code-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.inout-payment-api-name {
    font-size: 12px;
    color: var(--text-muted)
}

.inout-payment-transfer-link {
    color: var(--accent-cyan);
    font-family: var(--font-mono, monospace);
    font-weight: 600;
    text-decoration: none
}

    .inout-payment-transfer-link:hover {
        text-decoration: underline
    }

.inout-payment-status-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center
}

.inout-exchange-resume-btn {
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap
}

.inout-empty-msg {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13.5px
}

.inout-search-input {
    min-width: 0;
    flex: 1 1 100px
}

.charge-filter-toolbar .input-datetime,
.exchange-filter-toolbar .input-datetime,
.charge-filter-toolbar .input-field[type="datetime-local"],
.exchange-filter-toolbar .input-field[type="datetime-local"] {
    width: 200px;
    min-width: 0;
    flex: 1 1 200px
}

.charge-filter-toolbar select.input-field,
.exchange-filter-toolbar select.input-field {
    width: auto;
    min-width: 88px;
    flex: 0 1 auto
}

.charge-pagination, .exchange-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 8px
}

.charge-pagination-btns, .exchange-pagination-btns {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.charge-pagination-info, .exchange-pagination-info {
    font-size: 12.5px;
    color: var(--text-muted)
}

.charge-bonus-cell {
    min-width: 120px
}

    .charge-bonus-cell .input-field {
        width: 100%;
        margin-bottom: 4px;
        font-size: 11.5px;
        padding: 4px 6px;
        text-align: right
    }

    .charge-bonus-cell select.input-field {
        font-size: 11px;
        padding: 3px 4px
    }

.charge-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    align-items: center
}

    .charge-action-btns .btn {
        padding: 2px 6px;
        font-size: 11.5px
    }

.charge-history-memo {
    display: inline;
    margin-right: 4px;
    vertical-align: middle
}

.charge-history-memo-btn {
    padding: 2px 6px;
    font-size: 11.5px;
    vertical-align: middle
}

.charge-pagination-btn {
    padding: 3px 8px;
    font-size: 11.5px
}

/* Inout history page */
.inout-history-page {
    max-width: 100%;
    overflow-x: hidden
}

.inout-history-summary-stats {
    grid-template-columns: minmax(88px, 0.55fr) repeat(4, minmax(0, 1fr)) minmax(220px, 1.85fr);
    margin-bottom: 16px
}

    .inout-history-summary-stats .stat-value--sm {
        font-size: 15px;
        line-height: 1.45
    }

    .inout-history-summary-stats .inout-history-stat--cancel .stat-value--sm,
    .inout-history-summary-stats .inout-history-stat--cancel .stat-currency-value,
    .inout-history-summary-stats .inout-history-stat--cancel .stat-currency-line .font-mono {
        white-space: nowrap;
        overflow: visible
    }

    .inout-history-summary-stats .inout-history-stat--cancel .stat-currency-line {
        flex-wrap: nowrap
    }

.inout-history-currency-total-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px
}

    .inout-history-currency-total-line:first-child {
        margin-top: 0
    }

.inout-history-currency-tag {
    min-width: 44px;
    justify-content: center;
    flex-shrink: 0
}

.inout-history-summary-stats .inout-history-currency-total-line .font-mono {
    font-size: 14px
}

.inout-history-card {
    margin-bottom: 0;
    overflow: hidden
}

    .inout-history-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

.inout-history-toolbar {
    width: 100%
}

    .inout-history-toolbar .inout-history-date {
        width: auto;
        min-width: 130px;
        flex: 0 1 auto
    }

    .inout-history-toolbar .inout-history-date-sep {
        flex: 0 0 auto
    }

.inout-history-sort-options {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    box-sizing: border-box;
    white-space: nowrap
}

html.light-mode .inout-history-sort-options {
    background: var(--bg-input)
}

.inout-history-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer
}

    .inout-history-radio input {
        margin: 0
    }

/* Bet history sports page */
.bethistory-sports-page {
    max-width: 100%;
    overflow-x: hidden
}

.bethistory-sports-summary-stats,
.bethistory-thirdparty-summary-stats {
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-bottom: 16px
}

.bethistory-thirdparty-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

    .bethistory-thirdparty-summary-stats .stat-value--sm {
        line-height: 1.45
    }

.bethistory-thirdparty-table {
    min-width: 1400px
}

.bethistory-thirdparty-game {
    max-width: 180px;
    white-space: normal;
    word-break: break-word
}

.bethistory-thirdparty-txn {
    font-size: 11.5px;
    max-width: 140px;
    white-space: normal;
    word-break: break-all
}

.bethistory-sports-summary-stats .stat-value--sm {
    font-size: 15px;
    line-height: 1.45
}

.popup-summary-stats .stat-value--multi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.45;
    white-space: normal
}

.popup-summary-stats .games-currency-total-line,
.popup-summary-stats .inout-history-currency-total-line {
    justify-content: flex-start;
    width: 100%
}

    .popup-summary-stats .games-currency-total-line .font-mono,
    .popup-summary-stats .inout-history-currency-total-line .font-mono {
        font-size: 14px
    }

.bethistory-sports-card {
    margin-bottom: 0;
    overflow: hidden
}

    .bethistory-sports-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap
    }

.bethistory-sports-toolbar {
    width: 100%;
    flex: 1 1 100%
}

.bethistory-sports-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%
}

    .bethistory-sports-search-form > .input-field {
        width: auto;
        min-width: 88px;
        flex: 0 1 auto
    }

    .bethistory-sports-search-form > .bethistory-sports-datetime {
        min-width: 168px
    }

    .bethistory-sports-search-form > .bethistory-sports-keyword {
        min-width: 120px;
        flex: 1 1 140px
    }

    .bethistory-sports-search-form > .btn,
    .bethistory-sports-search-form > a.btn {
        flex: 0 0 auto
    }

    .bethistory-sports-toolbar .bethistory-sports-datetime,
    .bethistory-sports-search-form > .bethistory-sports-datetime {
        width: auto;
        min-width: 172px;
        flex: 0 1 auto;
        font-family: var(--font-mono);
        font-size: 12px
    }

.bethistory-sports-page .flatpickr-calendar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 12px 48px rgba(0,0,0,.55),0 0 24px rgba(0,120,255,.08)
}

.bethistory-sports-page .flatpickr-months .flatpickr-month,
.bethistory-sports-page .flatpickr-current-month .flatpickr-monthDropdown-months,
.bethistory-sports-page .flatpickr-weekdays,
.bethistory-sports-page .flatpickr-time input,
.bethistory-sports-page .flatpickr-time .flatpickr-am-pm {
    color: var(--text-primary);
    background: transparent
}

.bethistory-sports-page .flatpickr-day {
    color: var(--text-primary)
}

    .bethistory-sports-page .flatpickr-day:hover,
    .bethistory-sports-page .flatpickr-day.selected {
        background: var(--accent-blue);
        border-color: var(--accent-blue);
        color: #fff
    }

.bethistory-sports-page .flatpickr-time {
    border-top: 1px solid var(--border)
}

.bethistory-sports-toolbar .bethistory-sports-date-sep {
    flex: 0 0 auto;
    line-height: 32px
}

.bethistory-sports-panel {
    padding: 0;
    max-height: none
}

.bethistory-sports-table {
    min-width: 1280px;
    table-layout: auto;
    width: 100%
}

    .bethistory-sports-table .bethistory-sports-td-member {
        white-space: nowrap
    }

.bethistory-sports-ratio {
    font-size: 11.5px;
    line-height: 1.45;
    white-space: nowrap
}

.bethistory-sports-detail-btn {
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1.2
}

/* Sports management config pages */
.sports-mng-page {
    max-width: 100%;
    overflow-x: hidden
}

    .sports-mng-page .sports-mng-create-card {
        margin-bottom: 16px;
        overflow: visible;
        position: relative;
        z-index: 5
    }

.sports-mng-actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 16px;
    overflow: visible
}

    .sports-mng-actions-toolbar .sports-mng-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
        position: relative;
        overflow: visible
    }

    .sports-mng-actions-toolbar .sports-mng-field-label {
        font-size: 12px;
        color: var(--text-muted)
    }

    .sports-mng-actions-toolbar .input-field {
        min-width: 120px
    }

    .sports-mng-actions-toolbar .sports-mng-field .choices {
        width: 100%;
        min-width: 120px;
        position: relative
    }

        .sports-mng-actions-toolbar .sports-mng-field .choices.is-open {
            overflow: visible;
            z-index: 50
        }

    .sports-mng-actions-toolbar .sports-mng-field .choices__list--dropdown,
    .sports-mng-actions-toolbar .sports-mng-field .choices__list[aria-expanded] {
        z-index: 60
    }

.sports-mng-ligue-select-wrap {
    position: relative;
    min-width: 120px;
    min-height: 32px
}

.bethistory-sports-search-form .sports-mng-ligue-select-wrap {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center
}

.sports-mng-ligue-select-wrap .waitMe_text {
    display: none !important;
    height: 0;
    margin: 0;
    padding: 0
}

.sports-mng-ligue-select-wrap.waitMe_container .waitMe {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important
}

    .sports-mng-ligue-select-wrap.waitMe_container .waitMe .waitMe_content {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important
    }

    .sports-mng-ligue-select-wrap.waitMe_container .waitMe .waitMe_progress {
        margin: 0 !important;
        line-height: 0
    }

.sports-mng-page .choices,
.bethistory-sports-search-form .choices {
    margin-bottom: 0;
    font-size: 13px;
    min-width: 88px;
    flex: 0 1 auto
}

.sports-mng-page .choices__inner {
    background: rgba(0, 12, 28, .85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box
}

.sports-mng-page .choices.is-focused .choices__inner,
.sports-mng-page .choices.is-open .choices__inner {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 130, 255, .15)
}

.sports-mng-page .choices__list--single {
    padding: 0
}

    .sports-mng-page .choices__list--single .choices__item {
        padding: 0;
        color: var(--text-primary)
    }

.sports-mng-page .choices[data-type*=select-one]::after {
    border-color: var(--text-muted) transparent transparent;
    right: 10px
}

.sports-mng-page .choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent var(--text-muted);
    margin-top: -7.5px
}

.sports-mng-page .choices__list--dropdown,
.sports-mng-page .choices__list[aria-expanded] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
}

    .sports-mng-page .choices__list--dropdown .choices__item,
    .sports-mng-page .choices__list[aria-expanded] .choices__item {
        padding: 6px 10px;
        font-size: 13px;
        color: var(--text-primary)
    }

    .sports-mng-page .choices__list--dropdown .choices__item--selectable.is-highlighted,
    .sports-mng-page .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
        background: rgba(0, 130, 255, .12)
    }

.sports-mng-page .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 13px
}

.sports-mng-page .choices__placeholder {
    opacity: .65;
    color: var(--text-muted)
}

html.light-mode .sports-mng-page .choices__inner {
    background: #fff;
    color: var(--text-primary)
}

html.light-mode .sports-mng-page .choices__list--dropdown,
html.light-mode .sports-mng-page .choices__list[aria-expanded] {
    background: #fff
}

html.light-mode .sports-mng-page .choices[data-type*=select-one] .choices__input {
    background: #fff
}

.sports-mng-sync-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

    .sports-mng-sync-lock a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1
    }

    .sports-mng-sync-lock i {
        font-size: 14px
    }

.sports-mng-note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 12px;
    padding: 0 16px
}

.sports-mng-table {
    table-layout: auto;
    width: 100%
}

.sports-mng-table--jongmok {
    min-width: 1100px
}

.sports-mng-table--ligue {
    min-width: 1500px
}

.sports-mng-table--team {
    min-width: 1300px
}

.sports-mng-table--type {
    min-width: 900px
}

.sports-mng-table--odds {
    min-width: 1600px
}

.sports-mng-table--bet {
    min-width: 1400px
}

.sports-mng-cell-input {
    min-width: 70px;
    width: 100%;
    padding: 4px 8px;
    font-size: 12px;
    height: 32px
}

    .sports-mng-cell-input[type="number"] {
        max-width: 100px;
        text-align: center
    }

.sports-mng-file-input {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap
}

    .sports-mng-file-input .input-field {
        width: 100px;
        flex: 0 1 auto
    }

.sports-mng-checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px
}

    .sports-mng-checks .form-check-inline {
        margin: 0
    }

.sports-mng-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px
}

    .sports-mng-nav-tabs .nav-link {
        padding: 6px 14px;
        font-size: 12.5px;
        border-radius: var(--radius-sm);
        color: var(--text-muted);
        text-decoration: none;
        border: 1px solid transparent
    }

        .sports-mng-nav-tabs .nav-link:hover {
            color: var(--text-primary);
            background: rgba(255,255,255,.04)
        }

        .sports-mng-nav-tabs .nav-link.active {
            color: var(--accent-blue);
            border-color: rgba(59,130,246,.35);
            background: rgba(59,130,246,.1)
        }

.sports-mng-bonus-section {
    padding: 16px
}

    .sports-mng-bonus-section + .sports-mng-bonus-section {
        border-top: 1px solid var(--border)
    }

.sports-mng-bonus-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px
}

.sports-mng-bonus-folders {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
    gap: 12px
}

.sports-mng-bonus-folder-item {
    display: flex;
    flex-direction: column;
    gap: 6px
}

    .sports-mng-bonus-folder-item .folder {
        width: 100%
    }

/* Fee history pages */
.feehistory-summary-stats {
    grid-template-columns: repeat(6,minmax(0,1fr));
    margin-bottom: 16px
}

    .feehistory-summary-stats .stat-value--sm {
        font-size: 15px
    }

.feehistory-table {
    min-width: 1200px
}

.feehistory-thirdparty-table {
    min-width: 1300px
}

.feehistory-memo {
    max-width: 200px;
    white-space: normal;
    word-break: break-word;
    font-size: 11.5px
}

.feehistory-td-sub {
    background: rgba(239,68,68,.06)
}

    .feehistory-td-sub .member-menu-btn {
        font-weight: 600
    }

.feehistory-recalc-link {
    color: var(--accent-red);
    font-size: 10px;
    margin-left: 4px
}

.feehistory-recalc-badge {
    cursor: pointer;
    text-decoration: none
}

.feehistory-page .member-menu-btn {
    cursor: pointer;
    color: var(--accent-blue)
}

/* Game money pages */
.gamemoney-summary-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
    margin-bottom: 16px
}

    .gamemoney-summary-stats .stat-value--sm {
        font-size: 15px
    }

.gamemoney-table {
    min-width: 1000px
}

.gamemoney-memo {
    max-width: 260px;
    white-space: normal;
    word-break: break-word;
    font-size: 11.5px
}

.gamemoney-page .member-menu-btn {
    cursor: pointer;
    color: var(--accent-blue)
}

.pointexchange-table {
    min-width: 900px
}

.pointexchange-summary-stats {
    margin-bottom: 16px
}

.gamemoney-eggs-summary-stats {
    grid-template-columns: repeat(5,minmax(0,1fr));
    margin-bottom: 16px
}

    .gamemoney-eggs-summary-stats .stat-value--sm {
        font-size: 15px
    }

.gamemoney-eggs-table {
    min-width: 1100px
}

.gamemoney-eggs-memo {
    max-width: 280px;
    white-space: normal;
    word-break: break-word;
    font-size: 11.5px
}

/* Games management pages */
.games-summary-stats {
    grid-template-columns: repeat(5,minmax(0,1fr));
    margin-bottom: 16px
}

    .games-summary-stats .stat-value--sm {
        font-size: 15px;
        line-height: 1.45
    }

.games-currency-total-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px
}

    .games-currency-total-line:first-child {
        margin-top: 0
    }

.games-summary-stats .games-currency-total-line {
    justify-content: flex-start
}

.games-currency-tag {
    min-width: 44px;
    justify-content: center;
    flex-shrink: 0
}

.games-currency-cell .games-currency-total-line .font-mono {
    font-size: 12.5px
}

.games-table {
    min-width: 1200px
}

.games-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center
}

.games-result-ball {
    font-family: var(--font-mono);
    font-size: 12px;
    word-break: break-all
}

.games-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center
}

    .games-action-btns .btn {
        font-size: 11px;
        padding: 3px 8px
    }

.games-list-pagination {
    border-top: 1px solid var(--border)
}

.games-list-pagination-btns {
    align-items: center
}

    .games-list-pagination-btns .pagination {
        display: flex;
        gap: 4px;
        list-style: none;
        padding: 0;
        margin: 0
    }

        .games-list-pagination-btns .pagination li a,
        .games-list-pagination-btns .pagination li span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            padding: 0 6px;
            font-size: 11.5px;
            border-radius: 6px;
            border: 1px solid var(--border);
            color: var(--text-muted);
            background: rgba(255,255,255,.02)
        }

        .games-list-pagination-btns .pagination li.active a {
            color: #fff;
            border-color: rgba(0,200,255,.45);
            background: rgba(0,130,255,.25)
        }

.games-sheet-modal .theme-sheet-modal__panel {
    width: 480px
}

.games-sheet-modal__balls {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 8px
}

.games-sheet-modal__hint {
    font-size: 11.5px;
    color: var(--accent-red);
    margin-top: 4px
}

/* Ins config page */
.ins-config-page {
    max-width: 100%;
    overflow-x: hidden
}

    .ins-config-page .ins-config-create-card {
        margin-bottom: 16px
    }

.ins-config-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    gap: 12px;
    padding: 16px
}

    .ins-config-form-grid .ins-config-field {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .ins-config-form-grid .ins-config-field-label {
        font-size: 12px;
        color: var(--text-muted)
    }

    .ins-config-form-grid .ins-config-field--wide {
        grid-column: 1 / -1
    }

    .ins-config-form-grid .ins-config-metrics-row {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 12px;
        align-items: start
    }

.ins-config-field--metric {
    min-width: 0
}

.ins-config-pair {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    width: 100%
}

    .ins-config-pair .ins-config-pair-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0
    }

    .ins-config-pair .ins-config-pair-label {
        font-size: 11px;
        color: var(--text-muted)
    }

    .ins-config-pair .input-field {
        width: 100%;
        min-width: 0;
        box-sizing: border-box
    }

.ins-config-hint {
    font-size: 11.5px;
    color: var(--accent-red);
    margin: 0;
    line-height: 1.45
}

.ins-config-table {
    min-width: 1300px
}

.ins-config-api-info {
    font-size: 11.5px;
    line-height: 1.5
}

.ins-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center
}

.ins-config-sheet-modal .theme-sheet-modal__panel {
    width: 560px
}

.ins-config-sheet-modal__pair {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px
}

.ins-config-sheet-metrics {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
    align-items: start
}

    .ins-config-sheet-metrics .ins-config-field-label {
        font-size: 12px;
        color: var(--text-muted)
    }

/* Ins history page */
.ins-history-page {
    max-width: 100%;
    overflow-x: hidden
}

.ins-history-summary-stats {
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin-bottom: 16px
}

    .ins-history-summary-stats .stat-value--sm {
        font-size: 15px
    }

.ins-history-stat-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
    line-height: 1.45
}

.ins-history-table {
    min-width: 1200px
}

.ins-history-memo {
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
    font-size: 11.5px;
    color: var(--text-muted)
}

.ins-byuser-page .ins-byuser-fee-stats {
    grid-template-columns: repeat(6,minmax(0,1fr));
    margin-bottom: 16px
}

.ins-byuser-table {
    min-width: 1400px
}

.ins-byuser-table--ladder {
    min-width: 1100px
}

.ins-byuser-money {
    font-size: 12px
}

.ins-byuser-hit {
    background: rgba(255,120,80,.18) !important
}

.ins-byuser-type-btn {
    cursor: pointer;
    margin-top: 4px
}

.ins-byuser-partner-select {
    min-width: 180px;
    max-width: 280px
}

.ins-byuser-page .ins-byuser-partner-id-field {
    min-width: 180px;
    max-width: 280px;
    flex: 0 1 auto
}

.ins-byuser-page .ins-byuser-partner-id-field .choices {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-bottom: 0;
    font-size: 13px
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__inner {
    background: rgba(0, 12, 28, .85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box
}

.ins-byuser-page .ins-byuser-partner-id-field .choices.is-focused .choices__inner,
.ins-byuser-page .ins-byuser-partner-id-field .choices.is-open .choices__inner {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 130, 255, .15)
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__list--single {
    padding: 0
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__list--single .choices__item {
    padding: 0;
    color: var(--text-primary)
}

.ins-byuser-page .ins-byuser-partner-id-field .choices[data-type*=select-one]::after {
    border-color: var(--text-muted) transparent transparent;
    right: 10px
}

.ins-byuser-page .ins-byuser-partner-id-field .choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent var(--text-muted)
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__list--dropdown,
.ins-byuser-page .ins-byuser-partner-id-field .choices__list[aria-expanded] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 40
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__list--dropdown .choices__item,
.ins-byuser-page .ins-byuser-partner-id-field .choices__list[aria-expanded] .choices__item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary)
}

.ins-byuser-page .ins-byuser-partner-id-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.ins-byuser-page .ins-byuser-partner-id-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--accent-blue-glow)
}

.ins-byuser-page .ins-byuser-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-input);
    border: 0;
    color: var(--text-primary);
    margin: 0;
    padding: 6px 10px
}

html.light-mode .ins-byuser-page .ins-byuser-partner-id-field .choices__inner {
    background: var(--bg-input);
    border-color: var(--border)
}

html.light-mode .ins-byuser-page .ins-byuser-partner-id-field .choices__list--dropdown,
html.light-mode .ins-byuser-page .ins-byuser-partner-id-field .choices__list[aria-expanded],
html.light-mode .ins-byuser-page .ins-byuser-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card)
}

/* Popup windows */
.popup-body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary)
}

.popup-page {
    padding: 16px;
    max-width: 100%;
    overflow-x: hidden;
    min-height: 100vh
}

.popup-content-page .bethistory-sports-card {
    margin-bottom: 0
}

.popup-content-page .card-header h3 {
    font-size: 15px
}

.popup-calendar-wrap {
    max-width: 1100px;
    margin: 0 auto
}

    .popup-calendar-wrap .fc-toolbar-title {
        color: var(--text-primary);
        font-size: 16px
    }

    .popup-calendar-wrap .fc-button {
        background: rgba(0,130,255,.15);
        border: 1px solid rgba(0,200,255,.25);
        color: var(--text-primary)
    }

    .popup-calendar-wrap .fc-daygrid-day-number,
    .popup-calendar-wrap .fc-col-header-cell-cushion {
        color: var(--text-muted)
    }

.popup-memo-cell {
    max-width: 280px;
    white-space: normal;
    word-break: break-word;
    font-size: 11.5px
}

.popup-memo-textarea {
    width: 100%;
    min-width: 200px;
    max-width: 300px;
    min-height: 72px;
    padding: 6px 8px;
    font-size: 11.5px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    resize: vertical
}

.popup-content-page .bethistory-sports-summary-stats,
.popup-content-page > .stats-grid {
    margin-bottom: 16px
}

.popup-table {
    min-width: 960px
}

.popup-content-page .charge-pagination {
    padding: 12px 16px;
    border-top: 1px solid var(--border)
}

.popup-content-page .games-list-pagination {
    padding: 12px 16px;
    border-top: 1px solid var(--border)
}

/* Stat day table */
.stat-table-page {
    max-width: 100%;
    overflow-x: hidden
}

.stat-table-card .card-header {
    flex-wrap: wrap;
    gap: 10px
}

.stat-table-search-form .stat-table-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 4px
}

    .stat-table-search-form .stat-table-check input {
        width: 15px;
        height: 15px;
        accent-color: var(--accent-cyan)
    }

.stat-table-search-form .stat-month-year-select {
    min-width: 120px;
    width: auto
}

/* Stat dead (losing settlement) */
.stat-dead-page {
    max-width: 100%;
    overflow-x: hidden
}

.stat-dead-tabs {
    margin-bottom: 14px
}

.stat-dead-card .card-header {
    flex-wrap: wrap;
    gap: 10px
}

.stat-dead-search-form .stat-partner-id-field,
.stat-partner-search-form .stat-partner-id-field {
    min-width: 180px;
    max-width: 260px;
    flex: 0 1 auto
}

.stat-dead-search-form .stat-partner-id-field .choices,
.stat-partner-search-form .stat-partner-id-field .choices {
    width: 100%;
    min-width: 0;
    max-width: 100%
}

.stat-dead-search-form .stat-partner-id-field .choices__inner,
.stat-partner-search-form .stat-partner-id-field .choices__inner {
    background: rgba(0, 12, 28, .85);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    min-height: 32px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    line-height: 18px;
    box-sizing: border-box
}

.stat-dead-search-form .stat-partner-id-field .choices.is-focused .choices__inner,
.stat-dead-search-form .stat-partner-id-field .choices.is-open .choices__inner,
.stat-partner-search-form .stat-partner-id-field .choices.is-focused .choices__inner,
.stat-partner-search-form .stat-partner-id-field .choices.is-open .choices__inner {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(0, 130, 255, .15)
}

.stat-dead-search-form .stat-partner-id-field .choices__list--single,
.stat-partner-search-form .stat-partner-id-field .choices__list--single {
    padding: 0
}

.stat-dead-search-form .stat-partner-id-field .choices__list--single .choices__item,
.stat-partner-search-form .stat-partner-id-field .choices__list--single .choices__item {
    padding: 0;
    color: var(--text-primary)
}

.stat-dead-search-form .stat-partner-id-field .choices[data-type*=select-one]::after,
.stat-partner-search-form .stat-partner-id-field .choices[data-type*=select-one]::after {
    border-color: var(--text-muted) transparent transparent;
    right: 10px
}

.stat-dead-search-form .stat-partner-id-field .choices[data-type*=select-one].is-open::after,
.stat-partner-search-form .stat-partner-id-field .choices[data-type*=select-one].is-open::after {
    border-color: transparent transparent var(--text-muted);
    margin-top: -7.5px
}

.stat-dead-search-form .stat-partner-id-field .choices__list--dropdown,
.stat-dead-search-form .stat-partner-id-field .choices__list[aria-expanded],
.stat-partner-search-form .stat-partner-id-field .choices__list--dropdown,
.stat-partner-search-form .stat-partner-id-field .choices__list[aria-expanded] {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35)
}

.stat-dead-search-form .stat-partner-id-field .choices__list--dropdown .choices__item,
.stat-dead-search-form .stat-partner-id-field .choices__list[aria-expanded] .choices__item,
.stat-partner-search-form .stat-partner-id-field .choices__list--dropdown .choices__item,
.stat-partner-search-form .stat-partner-id-field .choices__list[aria-expanded] .choices__item {
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary)
}

.stat-dead-search-form .stat-partner-id-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.stat-dead-search-form .stat-partner-id-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.stat-partner-search-form .stat-partner-id-field .choices__list--dropdown .choices__item--selectable.is-highlighted,
.stat-partner-search-form .stat-partner-id-field .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(0, 130, 255, .12)
}

.stat-dead-search-form .stat-partner-id-field .choices[data-type*=select-one] .choices__input,
.stat-partner-search-form .stat-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 13px
}

html.light-mode .stat-dead-search-form .stat-partner-id-field .choices__inner,
html.light-mode .stat-partner-search-form .stat-partner-id-field .choices__inner {
    background: #fff;
    color: var(--text-primary)
}

html.light-mode .stat-dead-search-form .stat-partner-id-field .choices__list--dropdown,
html.light-mode .stat-dead-search-form .stat-partner-id-field .choices__list[aria-expanded],
html.light-mode .stat-dead-search-form .stat-partner-id-field .choices[data-type*=select-one] .choices__input,
html.light-mode .stat-partner-search-form .stat-partner-id-field .choices__list--dropdown,
html.light-mode .stat-partner-search-form .stat-partner-id-field .choices__list[aria-expanded],
html.light-mode .stat-partner-search-form .stat-partner-id-field .choices[data-type*=select-one] .choices__input {
    background: #fff
}

.stat-dead-search-form .stat-dead-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 4px
}

    .stat-dead-search-form .stat-dead-check input {
        width: 15px;
        height: 15px;
        accent-color: var(--accent-cyan)
    }

.stat-dead-filter-modal .theme-sheet-modal__panel {
    max-width: 420px
}

.stat-partner-tabs {
    margin-bottom: 14px
}

.stat-partner-card .card-header {
    flex-wrap: wrap;
    gap: 10px
}

.stat-partner-search-form .stat-partner-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 4px
}

    .stat-partner-search-form .stat-partner-check input {
        width: 15px;
        height: 15px;
        accent-color: var(--accent-cyan)
    }

.stat-partner-panel {
    max-height: none
}

.stat-partner-table-wrap {
    min-width: 100%
}

.stat-partner-all-table,
.stat-partner-game-table {
    min-width: 1200px;
    font-size: 12px
}

.stat-partner-all-table {
    min-width: 1280px
}

.stat-partner-table-wrap td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    vertical-align: middle
}

.stat-partner-table-wrap .stat-partner-value-col {
    text-align: right
}

.stat-partner-all-table .stat-dead-th--member,
.stat-partner-game-table .stat-dead-th--member {
    min-width: 0;
    width: 1%;
    white-space: nowrap
}

.stat-partner-table-wrap .stat-dead-member-col {
    width: 1%;
    min-width: 0;
    max-width: none;
    white-space: nowrap;
    padding: 6px 10px !important
}

.stat-partner-table-wrap .stat-dead-member-col--combined {
    min-width: 0
}

.stat-partner-table-wrap .stat-dead-member-cell {
    width: max-content;
    max-width: none
}

.stat-partner-table-wrap .stat-dead-member-row {
    flex-wrap: nowrap;
    min-width: auto
}

.stat-partner-table-wrap .stat-dead-member-id,
.stat-partner-table-wrap .stat-dead-member-link {
    white-space: nowrap
}

.stat-partner-table-wrap .stat-partner-type-col {
    text-align: right
}

    .stat-partner-table-wrap .stat-partner-type-col .stat-dead-stack {
        align-items: flex-end
    }

    .stat-partner-table-wrap .stat-partner-type-col .stat-dead-stack__line {
        justify-content: flex-end
    }

.stat-partner-io-col {
    min-width: 112px;
    padding: 6px 10px !important;
    background: rgba(255, 200, 48, .03);
    border-left: 1px solid rgba(255, 200, 48, .1);
    vertical-align: middle
}

.stat-partner-game-table .stat-partner-io-col:first-of-type,
.stat-partner-all-table .stat-partner-io-col:first-of-type {
    border-left: 2px solid rgba(255, 200, 48, .22)
}

.stat-partner-io-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

    .stat-partner-io-line .stat-dead-tag {
        flex-shrink: 0
    }

    .stat-partner-io-line .font-mono {
        flex-shrink: 0;
        text-align: right;
        min-width: 52px
    }

.stat-partner-fold-col {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    padding: 4px 2px !important;
    text-align: center
}

.stat-partner-all-table th.stat-partner-fold-col,
.stat-partner-game-table th.stat-partner-fold-col {
    width: 28px;
    min-width: 28px;
    max-width: 28px
}

.stat-partner-time-col {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    padding: 6px 4px !important;
    text-align: center;
    cursor: pointer
}

.stat-dead-member-cell .stat-partner-fold-slot {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.stat-dead-member-cell .stat-partner-fold-btn,
.stat-dead-member-cell .stat-dead-fold-btn {
    flex-shrink: 0;
    margin: 0
}

.stat-partner-self-row td {
    background: rgba(0, 212, 255, .04)
}

.stat-partner-self-member .stat-dead-member-row {
    justify-content: flex-start
}

.stat-partner-all-table .stat-partner-value-col.stat-dead-io-col,
.stat-partner-game-table .stat-partner-value-col.stat-dead-sports-col,
.stat-partner-game-table .stat-partner-value-col.stat-dead-mini-col,
.stat-partner-game-table .stat-partner-value-col.stat-dead-thirdparty-col {
    background: transparent
}

.stat-partner-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px
}

.stat-partner-today-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--accent-orange);
    background: rgba(255, 152, 0, 0.08);
    border-bottom: 1px solid var(--border)
}

.stat-partner-filter-modal .theme-sheet-modal__panel {
    max-width: 480px
}

.stat-partner-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px
}

.stat-partner-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer
}

    .stat-partner-filter-option input {
        accent-color: var(--accent-cyan)
    }

.stat-dead-filter-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px
}

.stat-dead-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px
}

.stat-dead-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer
}

    .stat-dead-filter-option input {
        accent-color: var(--accent-cyan)
    }

.stat-dead-panel {
    max-height: none
}

.stat-dead-table-wrap {
    min-width: 100%
}

    .stat-dead-table-wrap .table {
        min-width: 1200px;
        font-size: 12px
    }

    .stat-dead-table-wrap .th1,
    .stat-dead-table-wrap .th2 {
        text-align: center;
        white-space: nowrap;
        font-size: 11.5px;
        font-weight: 700;
        padding: 8px 6px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        background: rgba(0, 30, 60, .55)
    }

    .stat-dead-table-wrap td {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .04);
        vertical-align: middle
    }

/* Stat dead — 통합 / 게임별 루징 tables */
.stat-dead-summary-wrap,
.stat-dead-bygame-wrap {
    min-width: 100%
}

.stat-dead-summary-table,
.stat-dead-bygame-table {
    min-width: 1480px;
    font-size: 12px
}

.stat-dead-bygame-table {
    min-width: 1600px
}

    .stat-dead-summary-table .stat-th,
    .stat-dead-bygame-table .stat-th,
    .stat-partner-all-table .stat-th,
    .stat-partner-game-table .stat-th {
        text-align: center;
        white-space: nowrap;
        font-size: 11.5px;
        font-weight: 700;
        padding: 8px 6px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary)
    }

.stat-dead-th--fold {
    width: 40px;
    min-width: 40px;
    background: rgba(0, 30, 60, .7)
}

.stat-dead-th--member {
    min-width: 240px;
    background: rgba(0, 30, 60, .85);
    color: var(--accent-cyan)
}

.stat-dead-th--io {
    background: rgba(255, 200, 48, .12);
    color: #ffc848
}

.stat-dead-th--game {
    background: rgba(0, 153, 255, .1);
    color: var(--accent-blue)
}

.stat-dead-th--sports {
    background: rgba(0, 216, 104, .1);
    color: var(--accent-green)
}

.stat-dead-th--mini {
    background: rgba(147, 112, 219, .12);
    color: #b794f6
}

.stat-dead-th--thirdparty {
    background: rgba(255, 120, 90, .1);
    color: #ff9a7a
}

.stat-dead-sports-col {
    background: rgba(0, 216, 104, .03);
    padding: 8px 10px !important;
    border-left: 1px solid rgba(0, 216, 104, .1)
}

.stat-dead-bygame-table .stat-dead-sports-col:first-of-type {
    border-left: 2px solid rgba(0, 216, 104, .22)
}

.stat-dead-mini-col {
    background: rgba(147, 112, 219, .04);
    padding: 6px 8px !important;
    border-left: 1px solid rgba(147, 112, 219, .12)
}

.stat-dead-bygame-table .stat-dead-mini-col:first-of-type {
    border-left: 2px solid rgba(147, 112, 219, .25)
}

.stat-dead-thirdparty-col {
    background: rgba(255, 120, 90, .04);
    padding: 6px 8px !important;
    border-left: 1px solid rgba(255, 120, 90, .12)
}

.stat-dead-bygame-table .stat-dead-thirdparty-col:first-of-type {
    border-left: 2px solid rgba(255, 120, 90, .25)
}

.stat-dead-bygame-row:hover td,
.stat-dead-summary-row:hover td {
    background: rgba(0, 130, 255, .04)
}

.stat-dead-bygame-row td,
.stat-dead-summary-row td {
    padding: 0;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, .04)
}

.stat-dead-fold-col {
    width: 40px;
    padding: 8px 4px !important
}

.stat-dead-member-col {
    min-width: 200px;
    padding: 8px 10px !important
}

.stat-dead-member-col--combined {
    min-width: 240px
}

.stat-dead-member-cell {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding-left: calc(var(--dead-depth, 0) * 12px)
}

.stat-dead-member-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    line-height: 1.35
}

.stat-dead-member-link {
    color: var(--text-primary);
    text-decoration: none;
    flex-shrink: 0
}

    .stat-dead-member-link:hover {
        color: var(--accent-cyan)
    }

.stat-dead-member-id {
    font-weight: 700;
    font-size: 13px
}

.stat-dead-member-sep {
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0
}

.stat-dead-member-nick {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap
}

.stat-dead-member-row .stat-dead-class-tag {
    flex-shrink: 0
}

.stat-dead-class-tag {
    font-size: 10px;
    line-height: 1.35;
    border: 1px solid transparent;
    font-weight: 700;
    white-space: nowrap
}

.stat-dead-io-col {
    background: rgba(255, 200, 48, .04);
    padding: 8px 10px !important;
    border-left: 1px solid rgba(255, 200, 48, .08)
}

    .stat-dead-io-col:first-of-type {
        border-left: 2px solid rgba(255, 200, 48, .2)
    }

.stat-dead-game-col {
    background: rgba(0, 153, 255, .03);
    padding: 6px 8px !important;
    border-left: 1px solid rgba(0, 153, 255, .08)
}

.stat-dead-type-col {
    text-align: right;
    border-left: 2px solid rgba(0, 153, 255, .18) !important
}

    .stat-dead-type-col .stat-dead-stack {
        align-items: flex-end
    }

.stat-dead-rate {
    color: var(--accent-orange);
    font-weight: 600
}

.stat-dead-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 88px
}

.stat-dead-stack__line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 28px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.stat-dead-type-col .stat-dead-stack__line {
    justify-content: flex-end
}

.stat-dead-stack__line:last-child {
    border-bottom: none
}

.stat-dead-stack__line--total {
    background: rgba(0, 212, 255, .08);
    border-top: 1px solid rgba(0, 212, 255, .2);
    margin-top: 2px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm)
}

    .stat-dead-stack__line--total .font-mono:not(.text-red):not(.text-blue) {
        color: var(--accent-cyan)
    }

.stat-dead-tag {
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap
}

.stat-dead-game-col.text-center .stat-dead-stack__line,
.stat-dead-mini-col.text-center .stat-dead-stack__line,
.stat-dead-thirdparty-col.text-center .stat-dead-stack__line,
.stat-dead-sports-col.text-center .stat-dead-stack__line {
    justify-content: center
}

@media (max-width: 768px) {
    .stat-dead-search-form > .input-field,
    .stat-dead-search-form > .btn,
    .stat-dead-search-form > .stat-partner-id-field {
        width: 100%;
        min-width: 0;
        max-width: none
    }

    .stat-dead-search-form > .bethistory-sports-date-sep {
        display: none
    }

    .stat-partner-search-form > .input-field,
    .stat-partner-search-form > .btn,
    .stat-partner-search-form > .stat-partner-id-field {
        width: 100%;
        min-width: 0;
        max-width: none
    }

    .stat-partner-search-form > .bethistory-sports-date-sep {
        display: none
    }
}

.stat-table-section-title {
    padding: 12px 16px 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border)
}

.stat-table-panel {
    max-height: none
}

.stat-settlement-table {
    min-width: 1400px;
    font-size: 12px
}

    .stat-settlement-table .stat-th {
        text-align: center;
        white-space: nowrap;
        font-size: 11.5px;
        font-weight: 700;
        padding: 8px 6px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary)
    }

    .stat-settlement-table .stat-th--date {
        background: rgba(0, 30, 60, .85);
        color: var(--accent-cyan);
        min-width: 88px
    }

    .stat-settlement-table .stat-th--inout {
        background: rgba(255, 200, 48, .14);
        color: var(--accent-gold)
    }

    .stat-settlement-table .stat-th--game {
        background: rgba(255, 160, 48, .12);
        color: var(--accent-orange);
        min-width: 110px
    }

    .stat-settlement-table .stat-th--bet {
        background: rgba(0, 170, 255, .1);
        color: var(--accent-blue)
    }

    .stat-settlement-table .stat-th--ins {
        background: rgba(255, 160, 48, .1);
        color: var(--accent-orange)
    }

    .stat-settlement-table .stat-th--balance {
        background: rgba(148, 163, 184, .14);
        color: var(--text-secondary)
    }

    .stat-settlement-table .stat-th--point {
        background: rgba(0, 232, 120, .1);
        color: var(--accent-green)
    }

    .stat-settlement-table .stat-th--settle {
        background: rgba(0, 200, 180, .12);
        color: var(--accent-cyan)
    }

    .stat-settlement-table td,
    .stat-settlement-table .align-middle {
        vertical-align: middle
    }

    .stat-settlement-table td {
        padding: 6px 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .04)
    }

.stat-table-period {
    min-width: 100px;
    background: rgba(0, 130, 255, .04)
}

.stat-table-chk-time {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.45
}

.stat-table-game-label {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.35
}

.stat-table-row td:first-child {
    min-width: 120px
}

.stat-table-sum-row {
    background: rgba(0, 212, 255, .08);
    border-top: 1px solid rgba(0, 212, 255, .22);
    border-bottom: 1px solid rgba(0, 212, 255, .1)
}

    .stat-table-sum-row td {
        background: inherit
    }

    .stat-table-sum-row .stat-table-game-label {
        background: rgba(0, 229, 255, .16);
        color: var(--accent-cyan);
        border-color: rgba(0, 229, 255, .38);
        box-shadow: 0 0 10px rgba(0, 212, 255, .12)
    }

    .stat-table-sum-row .font-mono.fw-bold:not(.text-red):not(.text-blue) {
        color: var(--accent-cyan)
    }

.stat-table-total-row {
    background: linear-gradient(90deg, rgba(0, 153, 255, .16), rgba(0, 212, 255, .1));
    border-top: 2px solid var(--accent-cyan);
    box-shadow: inset 0 1px 0 rgba(0, 212, 255, .12);
    font-weight: 700
}

    .stat-table-total-row td {
        background: transparent
    }

    .stat-table-total-row .stat-table-total-label {
        font-size: 12px;
        letter-spacing: .04em
    }

    .stat-table-total-row .font-mono.fw-bold:not(.text-red):not(.text-blue) {
        color: var(--accent-cyan)
    }

.stat-settlement-table .text-muted {
    color: var(--text-muted)
}

@media (max-width: 768px) {
    .stat-table-search-form > .stat-table-check,
    .stat-table-search-form > .input-field,
    .stat-table-search-form > .btn {
        width: 100%;
        min-width: 0
    }

    .stat-table-search-form > .bethistory-sports-date-sep {
        display: none
    }
}

@media (max-width: 768px) {
    .popup-page {
        padding: 12px
    }

    .popup-content-page .bethistory-sports-summary-stats,
    .popup-content-page > .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .popup-content-page .bethistory-sports-toolbar .popup-date,
    .popup-content-page .bethistory-sports-toolbar .bethistory-sports-datetime {
        width: 100%;
        min-width: 0
    }

    .popup-calendar-wrap .fc-header-toolbar {
        flex-wrap: wrap;
        gap: 8px
    }

    .popup-calendar-wrap .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        gap: 6px
    }
}

/* Sports sheet modals + detail expand row */
.sports-sheet-modal .theme-sheet-modal__panel {
    width: 520px
}

.sports-sheet-modal__panel form {
    display: flex;
    flex-direction: column;
    min-height: 0
}

.sports-sheet-modal__ratio-grid,
.sports-sheet-modal__score-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px
}

.sports-sheet-modal__score-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
}

.sports-detail-row > td {
    padding: 0 !important;
    background: rgba(0,130,255,.04);
    border-bottom: 1px solid var(--border)
}

.sports-detail-wrap {
    padding: 12px 14px;
    max-height: none
}

.sports-detail-table {
    min-width: 1080px;
    width: 100%;
    table-layout: auto
}

    .sports-detail-table thead th {
        font-size: 10px;
        letter-spacing: .6px
    }

    .sports-detail-table tbody td {
        font-size: 12px;
        vertical-align: middle
    }

.sports-detail-bet-cell {
    background: rgba(0,130,255,.1)
}

.sports-detail-type-tag {
    font-size: 10px;
    letter-spacing: .2px;
    text-transform: none
}

.sports-detail-action-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center
}

    .sports-detail-action-btns .btn {
        padding: 3px 7px;
        font-size: 10.5px;
        line-height: 1.2
    }

.bethistory-sports-table .sports-detail-row:hover > td {
    background: rgba(0,130,255,.06)
}

/* Dashboard */
.dashboard-page {
    max-width: 100%;
    overflow-x: hidden
}

.stats-grid--3col {
    grid-template-columns: repeat(3,minmax(0,1fr))
}

.dashboard-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%
}

.dashboard-wide-table {
    min-width: 1100px
}

.dashboard-page .stat-sub {
    gap: 4px
}

.dashboard-page .stat-sub-item {
    flex: 1 1 0;
    min-width: 0
}

.stat-split {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px
}

.stat-split-end {
    text-align: right
}

.stat-split-label {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 2px
}

.stat-value--sm {
    font-size: 18.5px
}

    .stat-value--sm.text-red {
        color: var(--accent-red)
    }

    .stat-value--sm.text-blue {
        color: var(--accent-blue)
    }

/* Currency summary (stat cards) */
.summary-stat-currency,
.dashboard-stat-currency,
[class*="-summary-stats"] .stat-value--sm:has(.stat-currency-stack),
[class*="-summary-stats"] .stat-value--multi {
    font-size: inherit;
    line-height: inherit;
    text-shadow: none;
    color: var(--text-primary);
    width: 100%
}

.stat-currency-stack,
.dashboard-currency-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%
}

.stat-currency-line,
.dashboard-currency-line,
.games-currency-total-line,
.inout-history-currency-total-line,
.members-currency-total-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

[class*="-summary-stats"] .stat-currency-line,
[class*="-summary-stats"] .games-currency-total-line,
[class*="-summary-stats"] .inout-history-currency-total-line,
[class*="-summary-stats"] .members-currency-total-line,
.popup-summary-stats .stat-currency-line,
.popup-summary-stats .games-currency-total-line,
.popup-summary-stats .inout-history-currency-total-line {
    justify-content: flex-start;
    width: 100%
}

.games-currency-cell .stat-currency-line,
.games-currency-cell .games-currency-total-line {
    justify-content: flex-end
}

.stat-currency-tag,
.dashboard-currency-tag,
.games-currency-tag,
.inout-history-currency-tag {
    min-width: 42px;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    padding: 2px 6px
}

.stat-currency-value,
.dashboard-currency-value,
[class*="-summary-stats"] .stat-currency-line .font-mono,
[class*="-summary-stats"] .games-currency-total-line .font-mono,
[class*="-summary-stats"] .inout-history-currency-total-line .font-mono,
[class*="-summary-stats"] .members-currency-total-line .font-mono,
.popup-summary-stats .stat-currency-value,
.popup-summary-stats .games-currency-total-line .font-mono,
.popup-summary-stats .inout-history-currency-total-line .font-mono {
    font-size: 13px;
    line-height: 1.35;
    min-width: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.stat-currency-pair-grid,
.dashboard-inout-pair-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%
}

.stat-currency-pair-header,
.stat-currency-pair-row,
.dashboard-inout-pair-header,
.dashboard-inout-pair-row {
    display: grid;
    grid-template-columns: minmax(42px, auto) minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: center
}

.stat-currency-pair-header,
.dashboard-inout-pair-header {
    margin-bottom: 2px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border)
}

.stat-currency-pair-currency,
.dashboard-inout-pair-currency {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0
}

.stat-currency-pair-currency--label,
.dashboard-inout-pair-currency--label {
    min-height: 1px
}

.stat-currency-pair-amount,
.dashboard-inout-pair-amount {
    min-width: 0;
    text-align: right
}

.stat-currency-pair-header .stat-currency-pair-amount,
.dashboard-inout-pair-header .dashboard-inout-pair-amount {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: .4px;
    text-transform: uppercase
}

.stat-currency-pair-header .stat-currency-pair-amount--primary,
.stat-currency-pair-header .dashboard-inout-pair-amount--charge,
.dashboard-inout-pair-header .dashboard-inout-pair-amount--charge {
    color: var(--accent-blue)
}

.stat-currency-pair-header .stat-currency-pair-amount--secondary,
.stat-currency-pair-header .dashboard-inout-pair-amount--exchange,
.dashboard-inout-pair-header .dashboard-inout-pair-amount--exchange {
    color: var(--accent-red)
}

.stat-currency-pair-row .stat-currency-pair-amount .stat-currency-value,
.dashboard-inout-pair-row .dashboard-inout-pair-amount .dashboard-currency-value {
    display: block;
    text-align: right
}

.stat-currency-block,
.stat-currency-settlement-block,
.dashboard-settlement-block {
    padding: 6px 0;
    border-bottom: 1px solid var(--border)
}

.popup-ranking-table .popup-ranking-member-cell {
    vertical-align: top;
    border-right: 1px solid var(--border);
    background: rgba(148, 163, 184, 0.06)
}

.popup-ranking-table .popup-ranking-member-row + .popup-ranking-member-row .popup-ranking-currency-cell,
.popup-ranking-table .popup-ranking-member-row + .popup-ranking-member-row td:not(.popup-ranking-member-cell) {
    border-top: 1px dashed rgba(148, 163, 184, 0.35)
}

.popup-ranking-table .popup-ranking-currency-cell {
    white-space: nowrap
}

.popup-ranking-table .popup-ranking-member-row:last-child td,
.popup-ranking-table tbody tr:last-child td {
    border-bottom: 1px solid var(--border)
}

    .stat-currency-block:last-child,
    .stat-currency-settlement-block:last-child,
    .dashboard-settlement-block:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .stat-currency-block:first-child,
    .stat-currency-settlement-block:first-child,
    .dashboard-settlement-block:first-child {
        padding-top: 0
    }

.stat-currency-detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
    min-width: 0
}

.stat-currency-detail-label {
    font-size: 10.5px;
    color: var(--text-muted);
    flex-shrink: 0
}

.stat-currency-settlement-sub {
    margin-top: 4px
}

[class*="-summary-stats"] .stat-value--sm {
    font-size: 15px;
    line-height: 1.45
}

.bet-card-row .stat-currency-stack,
.bet-card-total .stat-currency-stack {
    align-items: flex-end
}

.bet-card-row .stat-currency-line,
.bet-card-total .stat-currency-line {
    justify-content: flex-end
}

/* Config / Site settings */
.config-site-page {
    max-width: 100%;
    overflow-x: hidden
}

.config-site-tabs {
    margin-bottom: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .config-site-tabs::-webkit-scrollbar {
        display: none
    }

    .config-site-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap;
        text-transform: none;
        letter-spacing: 0
    }

.config-site-form .config-site-actions {
    grid-column: 1 / -1
}

.config-site-form .input-field,
.config-site-form textarea.input-field {
    max-width: 100%;
    box-sizing: border-box
}

.config-site-form .toggle-sw {
    flex-wrap: wrap
}

.config-site-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%
}

.config-site-bank-table-wrap {
    position: relative
}

.config-site-bank-table {
    min-width: 900px
}

    .config-site-bank-table .config-site-bank-input {
        width: 100%;
        min-width: 100px;
        max-width: 100%;
        box-sizing: border-box
    }

    .config-site-bank-table .config-site-bank-apply-btn {
        padding: 6px 12px;
        font-size: 11.5px;
        white-space: nowrap
    }

.config-site-bank-table--responsive thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 3
}

.config-site-bank-table--responsive tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-card, #0f1520)
}

.config-site-notice {
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--accent-blue-glow);
    border: 1px solid rgba(37,99,235,.15);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--accent-blue);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45
}

/* Config / InOut settings */
.config-inout-page {
    max-width: 100%;
    overflow-x: hidden
}

.config-inout-tabs {
    margin-bottom: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .config-inout-tabs::-webkit-scrollbar {
        display: none
    }

    .config-inout-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap;
        text-transform: none;
        letter-spacing: 0
    }

.config-inout-actions {
    margin-bottom: 10px
}

    .config-inout-actions .config-inout-apply-btn {
        white-space: nowrap
    }

.config-inout-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary));
    scrollbar-gutter: stable
}

.config-inout-table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    table-layout: auto
}

    .config-inout-table thead th {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.35;
        vertical-align: middle;
        background: rgba(0,130,255,.06);
        border-bottom: 1px solid var(--border)
    }

        .config-inout-table thead th:not(:first-child) {
            width: 1%
        }

        .config-inout-table thead th:first-child,
        .config-inout-table tbody td.config-inout-level {
            position: sticky;
            left: 0;
            z-index: 2;
            width: 1%;
            min-width: 0;
            max-width: 3.75rem;
            padding: 6px 4px;
            background: var(--bg-card, #0f1520);
            box-shadow: 2px 0 8px rgba(0,0,0,.12);
            white-space: normal;
            word-break: keep-all;
            overflow-wrap: break-word;
            line-height: 1.25;
            text-align: center;
            vertical-align: middle
        }

        .config-inout-table thead th:first-child {
            z-index: 3;
            font-size: 10px;
            letter-spacing: -.2px
        }

    .config-inout-table tbody td.config-inout-level {
        font-size: 11px;
        font-weight: 700
    }

    .config-inout-table tbody td {
        padding: 6px 8px;
        vertical-align: middle;
        white-space: nowrap
    }

        .config-inout-table tbody td:not(.config-inout-level) {
            width: 1%
        }

    .config-inout-table .config-inout-input {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        text-align: right
    }

    .config-inout-table .config-inout-input--short {
        width: 100%;
        min-width: 0;
        max-width: none;
        text-align: center
    }

/* Config betwin page */
.config-betwin-page {
    max-width: 100%;
    overflow-x: hidden
}

.config-betwin-currency-tabs {
    margin-bottom: 16px;
}

    .config-betwin-currency-tabs .page-tab {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.betwin-currency-panel.active {
    display: block;
}

.config-betwin-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.config-betwin-card {
    overflow: hidden
}

.config-betwin-toolbar {
    flex-shrink: 0
}

.config-betwin-body {
    padding: 0
}

.config-betwin-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.config-betwin-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary));
    scrollbar-gutter: stable
}

.config-betwin-table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    table-layout: auto
}

    .config-betwin-table thead th {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.35;
        vertical-align: middle;
        background: rgba(0,130,255,.06);
        border-bottom: 1px solid var(--border)
    }

    .config-betwin-table tbody td {
        padding: 6px 8px;
        vertical-align: middle;
        white-space: nowrap;
        border-bottom: 1px solid var(--border)
    }

    .config-betwin-table tbody tr:last-child td {
        border-bottom: none
    }

    .config-betwin-table .config-betwin-level-col,
    .config-betwin-table .config-betwin-level-cell {
        position: sticky;
        left: 0;
        z-index: 2;
        min-width: 64px;
        max-width: 88px;
        background: var(--bg-card, #0f1520);
        box-shadow: 2px 0 8px rgba(0,0,0,.12);
        white-space: normal;
        word-break: keep-all;
        line-height: 1.25
    }

    .config-betwin-table thead .config-betwin-level-col {
        z-index: 3
    }

    .config-betwin-table .config-betwin-type-col {
        min-width: 88px
    }

    .config-betwin-table .config-betwin-input {
        display: block;
        width: 100%;
        min-width: 72px;
        max-width: 120px;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: right;
        font-size: 12px;
        padding: 6px 8px
    }

@media (max-width: 768px) {
    .config-betwin-summary-stats {
        grid-template-columns: 1fr
    }

    .config-betwin-toolbar .btn,
    .config-betwin-footer .btn {
        width: 100%
    }

    .config-betwin-table .config-betwin-input {
        min-width: 64px;
        max-width: none
    }
}

/* Config game page */
.config-game-page {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box
}

    .config-game-page .input-field,
    .config-game-page select,
    .config-game-page .form-control,
    .config-game-page .form-select {
        max-width: 100%;
        box-sizing: border-box
    }

    .config-game-page img,
    .config-game-page table {
        max-width: 100%
    }

.config-game-summary-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px
}

.config-game-content {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.config-game-section-card {
    overflow: hidden
}

    .config-game-section-card .card-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px
    }

.config-game-body {
    padding: 16px 18px
}

.config-game-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    justify-content: flex-end;
    gap: 8px
}

.config-game-block {
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg, var(--bg-card), rgba(0, 130, 255, .03))
}

    .config-game-block:last-child {
        margin-bottom: 0
    }

.config-game-block__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px
}

    .config-game-block__title i {
        color: var(--accent-blue);
        font-size: 12px;
        opacity: .9
    }

.config-game-block__hint {
    margin: -4px 0 14px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted)
}

.config-game-block--alarm {
    border-color: rgba(251, 191, 36, .28);
    background: linear-gradient(165deg, var(--bg-card), rgba(251, 191, 36, .06))
}

    .config-game-block--alarm .config-game-block__title i {
        color: var(--accent-orange, #f59e0b)
    }

.config-game-block--limit {
    border-color: rgba(139, 92, 246, .22);
    background: linear-gradient(165deg, var(--bg-card), rgba(139, 92, 246, .05))
}

    .config-game-block--limit .config-game-block__title i {
        color: var(--accent-purple, #a78bfa)
    }

.config-game-switch-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px
}

.config-game-page .config-game-switch-bar .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-input);
    transition: border-color .15s, background .15s, box-shadow .15s
}

    .config-game-page .config-game-switch-bar .form-check-inline:has(.form-check-input:checked) {
        border-color: rgba(0, 130, 255, .45);
        background: rgba(0, 130, 255, .1);
        box-shadow: 0 0 0 1px rgba(0, 130, 255, .12)
    }

.config-game-page .config-game-switch-bar .form-check-label {
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none
}

.config-game-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px 16px
}

.config-game-field {
    min-width: 0
}

.config-game-field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted)
}

.config-game-mode-card {
    display: grid;
    gap: 12px 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

    .config-game-mode-card > .col-12:first-child {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px
    }

        .config-game-mode-card > .col-12:first-child .tag {
            margin-right: 4px
        }

    .config-game-mode-card .form-check-inline {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 5px 12px;
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--bg-card);
        transition: border-color .15s, background .15s
    }

        .config-game-mode-card .form-check-inline:has(.form-check-input:checked) {
            border-color: rgba(0, 130, 255, .35);
            background: rgba(0, 130, 255, .08)
        }

@media (min-width: 992px) {
    .config-game-mode-card {
        grid-template-columns: minmax(140px, 1fr) minmax(200px, 1fr) minmax(280px, 2fr);
        align-items: start
    }
}

.config-game-mode-card .input-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin-bottom: 0
}

.config-game-mode-card .input-group-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 0
}

.config-game-mode-card .input-group .input-field,
.config-game-mode-card .input-group .config-game-select {
    width: 100%;
    min-width: 0
}

.config-game-ratio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px
}

.config-game-ratio-card {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    transition: border-color .15s, box-shadow .15s
}

    .config-game-ratio-card:hover {
        border-color: rgba(0, 130, 255, .28);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .06)
    }

    .config-game-ratio-card .form-check-inline {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border)
    }

    .config-game-ratio-card .form-check-label {
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-primary)
    }

.config-game-body .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px
}

.config-game-body .input-group-text {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    white-space: nowrap
}

.config-game-body .input-group .config-game-ratio-input {
    flex: 1;
    min-width: 52px;
    max-width: 88px;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
    box-sizing: border-box
}

.config-game-limit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px
}

.config-game-limit-item {
    min-width: 0
}

.config-game-limit-item__label {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: keep-all
}

.config-game-alarm-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
    align-items: end
}

.config-game-alarm-field {
    min-width: 0
}

.config-game-alarm-input {
    display: flex;
    align-items: center;
    gap: 8px
}

    .config-game-alarm-input .input-field {
        flex: 1;
        min-width: 0
    }

.config-game-alarm-suffix {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0
}

.config-game-body > .row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin: 0
}

    .config-game-body > .row .col-xl-3,
    .config-game-body > .row .col-xl-12,
    .config-game-body > .row .col-xl-6 {
        width: 100%;
        max-width: none;
        padding: 0;
        flex: none
    }

        .config-game-body > .row .col-xl-12.mb-3,
        .config-game-body > .row .col-xl-12.mb-6 {
            grid-column: 1 / -1
        }

        .config-game-body > .row .col-xl-12 .form-check-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 4px 6px 4px 0;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-input)
        }

            .config-game-body > .row .col-xl-12 .form-check-inline:has(.form-check-input:checked) {
                border-color: rgba(0, 130, 255, .35);
                background: rgba(0, 130, 255, .08)
            }

        .config-game-body > .row .col-xl-3.mb-3:not(:empty) {
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--bg-card)
        }

.config-game-body .row {
    margin-bottom: 0
}

.config-game-body .mb-3 {
    margin-bottom: 12px
}

.config-game-body .form-check-label {
    font-size: 12.5px;
    color: var(--text-secondary)
}

.config-game-body .col-form-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px
}

.config-game-body .text-danger {
    color: var(--accent-red, #f87171);
    font-weight: 400
}

.config-game-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary));
    scrollbar-gutter: stable
}

.config-game-table {
    width: max-content;
    min-width: 100%;
    margin: 0;
    table-layout: auto
}

    .config-game-table thead th {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.35;
        vertical-align: middle;
        text-align: center;
        background: rgba(0,130,255,.06);
        border-bottom: 1px solid var(--border)
    }

    .config-game-table tbody td {
        padding: 8px 12px;
        vertical-align: middle;
        font-size: 12px;
        border-bottom: 1px solid var(--border)
    }

    .config-game-table tbody tr:last-child td {
        border-bottom: none
    }

    .config-game-table tbody tr:hover td {
        background: rgba(0,130,255,.04)
    }

    .config-game-table .btn-sm {
        padding: 4px 10px;
        font-size: 11px
    }

.config-game-vendor-tabs {
    margin-bottom: 16px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .config-game-vendor-tabs::-webkit-scrollbar {
        display: none
    }

    .config-game-vendor-tabs .page-tab {
        flex-shrink: 0;
        white-space: nowrap;
        text-transform: none;
        letter-spacing: 0;
        font-size: 13px;
        gap: 8px
    }

        .config-game-vendor-tabs .page-tab i {
            font-size: 12px;
            opacity: .85
        }

.config-game-vendor-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input)
}

.config-game-tabs {
    border-bottom: 1px solid var(--border);
    gap: 4px;
    margin-bottom: 16px;
    padding-bottom: 0
}

    .config-game-tabs .nav-link {
        font-size: 12.5px;
        font-weight: 500;
        color: var(--text-muted);
        padding: 8px 14px;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        background: transparent
    }

        .config-game-tabs .nav-link:hover {
            color: var(--text-primary)
        }

        .config-game-tabs .nav-link.active {
            color: var(--accent-blue);
            border-bottom-color: var(--accent-blue);
            background: transparent
        }

.config-game-vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px
}

.config-game-vendor-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg, var(--bg-input), var(--bg-card));
    transition: border-color .15s
}

    .config-game-vendor-item:hover {
        border-color: rgba(0, 130, 255, .25)
    }

.config-game-vendor-name {
    min-width: 100px;
    flex-shrink: 0;
    text-align: center;
    font-weight: 600
}

.config-game-vendor-item .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border)
}

    .config-game-vendor-item .form-check-inline:has(.form-check-input:checked) {
        border-color: rgba(0, 130, 255, .35);
        background: rgba(0, 130, 255, .08)
    }

.config-game-page .form-check-input {
    border-color: var(--border);
    background-color: var(--bg-input)
}

    .config-game-page .form-check-input:checked {
        background-color: var(--accent-blue);
        border-color: var(--accent-blue)
    }

/* Legacy partial fallback (ladder/keno unconverted markup) */
.config-game-page .todo-list {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card)
}

    .config-game-page .todo-list .card-header {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        background: linear-gradient(90deg, rgba(0, 130, 255, .08), transparent)
    }

    .config-game-page .todo-list .card-body {
        padding: 16px 18px
    }

    .config-game-page .todo-list .card-footer {
        padding: 14px 16px;
        border-top: 1px solid var(--border);
        background: var(--bg-card);
        display: flex;
        justify-content: flex-end
    }

    .config-game-page .todo-list .row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
        margin: 0
    }

    .config-game-page .todo-list .col-xl-3,
    .config-game-page .todo-list .col-xl-12,
    .config-game-page .todo-list .col-xl-6 {
        width: 100%;
        max-width: none;
        padding: 0;
        flex: none
    }

        .config-game-page .todo-list .col-xl-12.mb-3 {
            grid-column: 1 / -1
        }

        .config-game-page .todo-list .col-xl-3.mb-3:not(:empty) {
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: var(--bg-card)
        }

        .config-game-page .todo-list .col-xl-12 .form-check-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 4px 6px 4px 0;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-input)
        }

            .config-game-page .todo-list .col-xl-12 .form-check-inline:has(.form-check-input:checked) {
                border-color: rgba(0, 130, 255, .35);
                background: rgba(0, 130, 255, .08)
            }

    .config-game-page .todo-list .form-control,
    .config-game-page .todo-list .form-select {
        width: 100%;
        box-sizing: border-box
    }

    .config-game-page .todo-list .table-responsive {
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        overflow-x: auto
    }

@media (max-width: 768px) {
    .config-game-page {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%
    }

    .config-game-content {
        gap: 12px
    }

    .config-game-summary-stats {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .config-game-body {
        padding: 12px 14px
    }

    .config-game-block {
        padding: 12px 14px;
        margin-bottom: 14px
    }

    .config-game-section-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .config-game-section-card .card-header h3 {
            font-size: 13px
        }

        .config-game-section-card .card-header .toolbar,
        .config-game-section-card .card-header .members-toolbar {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

            .config-game-section-card .card-header .toolbar .btn,
            .config-game-section-card .card-header .members-toolbar .btn {
                flex: 1;
                min-width: 0
            }

    .config-game-footer {
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom))
    }

        .config-game-footer .btn,
        .config-game-page .todo-list .card-footer .btn {
            width: 100%;
            min-height: 40px
        }

    .config-game-switch-bar {
        gap: 6px
    }

    .config-game-page .config-game-switch-bar .form-check-inline {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        justify-content: flex-start;
        padding: 8px 10px;
        box-sizing: border-box
    }

    .config-game-field-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .config-game-mode-card {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        gap: 10px
    }

        .config-game-mode-card > .col-12 {
            width: 100%;
            max-width: 100%;
            padding-left: 0;
            padding-right: 0
        }

        .config-game-mode-card .form-check-inline {
            flex: 1 1 calc(50% - 6px);
            min-width: 0;
            box-sizing: border-box
        }

        .config-game-mode-card .input-group {
            flex-direction: column;
            align-items: stretch;
            gap: 8px
        }

            .config-game-mode-card .input-group .input-field,
            .config-game-mode-card .input-group .config-game-select {
                width: 100%;
                min-width: 0
            }

    .config-game-alarm-row {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .config-game-alarm-input {
        flex-wrap: wrap;
        gap: 6px
    }

    .config-game-ratio-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .config-game-body > .row,
    .config-game-page .todo-list .row {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .config-game-body .input-group,
    .config-game-ratio-card .input-group,
    .config-game-page .todo-list .input-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch
    }

        .config-game-body .input-group .input-group-text,
        .config-game-ratio-card .input-group .input-group-text,
        .config-game-page .todo-list .input-group .input-group-text {
            white-space: normal;
            word-break: keep-all;
            text-align: center;
            font-size: 10px;
            line-height: 1.25;
            padding: 5px 6px
        }

        .config-game-body .input-group .config-game-ratio-input,
        .config-game-body .input-group .input-field,
        .config-game-ratio-card .input-group .input-field {
            max-width: none;
            width: 100%;
            min-width: 0;
            box-sizing: border-box
        }

    .config-game-limit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    .config-game-vendor-grid {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .config-game-vendor-item {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .config-game-vendor-name {
        min-width: 0;
        width: 100%;
        text-align: left
    }

    .config-game-vendor-item .form-check-inline {
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start
    }

    .config-game-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 12px;
        padding-bottom: 2px
    }

        .config-game-tabs::-webkit-scrollbar {
            display: none
        }

        .config-game-tabs .nav-item {
            flex-shrink: 0
        }

        .config-game-tabs .nav-link {
            white-space: nowrap;
            padding: 8px 12px
        }

    .config-game-table-wrap {
        max-width: 100%;
        margin: 0;
        -webkit-overflow-scrolling: touch
    }

    .config-game-table thead th,
    .config-game-table tbody td {
        padding: 8px 10px;
        font-size: 11px
    }

        .config-game-table tbody td:last-child {
            white-space: normal
        }

            .config-game-table tbody td:last-child .btn {
                min-height: 32px;
                margin: 2px;
                padding: 5px 10px
            }

    .config-game-page .todo-list .card-body,
    .config-game-page .todo-list .card-header {
        padding: 12px 14px
    }

    .config-game-page .config-game-body .col-xl-12.mb-3 {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        padding: 0
    }

        .config-game-page .config-game-body .col-xl-12.mb-3 > .tag {
            margin-bottom: 2px
        }

        .config-game-page .config-game-body .col-xl-12.mb-3 .form-check-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            padding: 6px 12px;
            border: 1px solid var(--border);
            border-radius: 999px;
            background: var(--bg-input);
            flex: 1 1 calc(50% - 6px);
            min-width: 0;
            box-sizing: border-box
        }

            .config-game-page .config-game-body .col-xl-12.mb-3 .form-check-inline:has(.form-check-input:checked) {
                border-color: rgba(0, 130, 255, .35);
                background: rgba(0, 130, 255, .08)
            }

        .config-game-page .config-game-body .col-xl-12.mb-3 > .btn {
            width: 100%;
            margin: 4px 0 0;
            min-height: 40px;
            box-sizing: border-box
        }

    .config-ratio-grid {
        grid-template-columns: 1fr
    }

    .config-ratio-field:first-child {
        max-width: none
    }
}

@media (max-width: 480px) {
    .config-game-page .config-game-switch-bar .form-check-inline,
    .config-game-mode-card .form-check-inline {
        flex: 1 1 100%
    }

    .config-game-limit-grid {
        grid-template-columns: 1fr
    }

    .config-game-body .input-group,
    .config-game-ratio-card .input-group {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width: 360px) {
    .config-game-body .input-group,
    .config-game-ratio-card .input-group,
    .config-game-page .todo-list .input-group {
        grid-template-columns: 1fr
    }

        .config-game-body .input-group .input-group-text {
            grid-column: 1
        }

        .config-game-body .input-group .config-game-ratio-input,
        .config-game-body .input-group .input-field {
            grid-column: 1
        }
}

/* Config ratio modal (game custom ratio CRUD) */
.config-ratio-modal .config-ratio-modal__panel {
    width: 920px;
    max-width: 96vw;
    max-height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y
}

    .config-ratio-modal .config-ratio-modal__panel form,
    .config-ratio-modal .config-ratio-modal__panel > div[id$="Loader"] {
        display: block;
        height: auto;
        min-height: auto
    }

.config-ratio-modal .theme-sheet-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 1px 0 var(--border)
}

.config-ratio-modal .theme-sheet-modal__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: var(--bg-card);
    box-shadow: 0 -1px 0 var(--border);
    padding-bottom: max(12px, env(safe-area-inset-bottom))
}

.config-ratio-modal__body {
    padding-top: 12px;
    padding-bottom: 12px
}

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

.config-ratio-field {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg, var(--bg-input), var(--bg-card))
}

    .config-ratio-field:first-child {
        grid-column: 1 / -1;
        max-width: 420px;
        background: var(--bg-card);
        border-color: rgba(0, 130, 255, .2)
    }

    .config-ratio-field:empty {
        display: none
    }

.config-ratio-modal .theme-sheet-modal__label {
    display: block;
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border)
}

.config-ratio-field:first-child .theme-sheet-modal__label {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 6px
}

.config-ratio-modal .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px
}

.config-ratio-modal .input-group-text {
    font-size: 11px;
    line-height: 1.3;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 8px;
    white-space: nowrap
}

.config-ratio-modal .config-ratio-input {
    flex: 1;
    min-width: 52px;
    max-width: 88px;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
    box-sizing: border-box
}

.config-ratio-modal #acrp_name,
.config-ratio-modal #ecrp_name,
.config-ratio-modal #acrl_name,
.config-ratio-modal #ecrl_name,
.config-ratio-modal #acrk_name,
.config-ratio-modal #ecrk_name {
    max-width: 100%;
    text-align: left
}

.config-ratio-modal .invalid-feedback {
    font-size: 11px;
    color: var(--accent-red, #f87171);
    margin-top: 4px
}

@media (max-width: 768px) {
    .config-ratio-modal {
        padding: 0;
        align-items: flex-end
    }

        .config-ratio-modal .config-ratio-modal__panel {
            width: 100%;
            max-width: 100vw;
            max-height: 92dvh;
            max-height: 92vh;
            border-radius: var(--radius) var(--radius) 0 0;
            margin: 0
        }

        .config-ratio-modal .theme-sheet-modal__header {
            padding: 12px 14px
        }

            .config-ratio-modal .theme-sheet-modal__header h3 {
                font-size: 13px;
                line-height: 1.35
            }

    .config-ratio-modal__body {
        padding: 12px 14px
    }

    .config-ratio-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .config-ratio-field {
        padding: 10px 12px
    }

        .config-ratio-field:first-child {
            max-width: none
        }

    .config-ratio-modal .input-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        align-items: stretch
    }

    .config-ratio-modal .input-group-text {
        white-space: normal;
        word-break: keep-all;
        text-align: center;
        font-size: 10px;
        line-height: 1.25;
        padding: 4px 6px
    }

    .config-ratio-modal .config-ratio-input {
        max-width: none;
        min-width: 0;
        width: 100%;
        box-sizing: border-box
    }

    .config-ratio-modal .theme-sheet-modal__footer {
        flex-direction: row-reverse;
        gap: 8px;
        padding: 12px 14px;
        padding-bottom: max(12px, env(safe-area-inset-bottom))
    }

        .config-ratio-modal .theme-sheet-modal__footer .btn {
            flex: 1;
            min-height: 40px
        }
}

@media (max-width: 360px) {
    .config-ratio-modal .input-group {
        grid-template-columns: 1fr
    }
}

.config-banklist-page {
    max-width: 100%;
    overflow-x: hidden
}

.config-banklist-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary));
    scrollbar-gutter: stable
}

.config-banklist-table {
    width: 100%;
    margin: 0
}

    .config-banklist-table thead th {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 11px;
        line-height: 1.35;
        vertical-align: middle;
        text-align: center;
        background: rgba(0,130,255,.06);
        border-bottom: 1px solid var(--border)
    }

    .config-banklist-table tbody td {
        padding: 10px 14px;
        vertical-align: middle;
        border-bottom: 1px solid rgba(0,130,255,.06)
    }

    .config-banklist-table tbody tr:last-child td {
        border-bottom: none
    }

    .config-banklist-table tbody tr:hover td {
        background: rgba(0,130,255,.04)
    }

.config-banklist-logo-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center
}

.config-banklist-logo {
    display: block;
    width: auto;
    max-width: 88px;
    max-height: 32px;
    margin: 0 auto;
    object-fit: contain
}

.config-banklist-name {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap
}

.config-banklist-inspection {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word
}

.config-banklist-toggle-wrap {
    text-align: center
}

    .config-banklist-toggle-wrap .toggle-sw {
        justify-content: center;
        margin: 0 auto
    }

.config-banklist-actions {
    text-align: center;
    white-space: nowrap
}

    .config-banklist-actions .btn {
        padding: 6px 12px;
        font-size: 11.5px;
        white-space: nowrap
    }

.config-banklist-empty {
    padding: 28px 16px !important;
    color: var(--text-muted);
    text-align: center
}

.config-currency-payment-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.config-currency-payment-name {
    font-size: 12px;
    color: var(--text-primary)
}

.config-currency-modal .theme-sheet-modal__panel {
    width: 640px
}

.config-currency-amount-section {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 4px
}

.config-currency-amount-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px
}

.config-currency-amount-section__header .theme-sheet-modal__label {
    margin: 0
}

.config-currency-amount-section__hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px
}

.config-currency-amount-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.config-currency-amount-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) auto;
    gap: 6px;
    align-items: start
}

.config-currency-amount-key {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.config-currency-amount-row .input-field {
    margin: 0;
    min-width: 0
}

.config-currency-amount-row .cc-amount-remove {
    padding: 6px 8px
}

@media (max-width: 640px) {
    .config-currency-amount-row {
        grid-template-columns: 1fr
    }

    .config-currency-amount-row .cc-amount-remove {
        justify-self: end
    }
}

/* Theme sheet modal (sendMPModal pattern) */
.theme-sheet-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 10002;
    align-items: center;
    justify-content: center
}

.theme-sheet-modal__panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 480px;
    max-width: 95vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,.55),0 0 24px rgba(0,120,255,.08)
}

.theme-sheet-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg,rgba(0,130,255,.1),transparent)
}

    .theme-sheet-modal__header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary)
    }

.theme-sheet-modal__close {
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.2
}

.theme-sheet-modal__body {
    padding: 16px
}

.theme-sheet-modal__field {
    margin-bottom: 10px
}

.theme-sheet-modal__label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px
}

.theme-sheet-modal__body .input-field {
    width: 100%;
    box-sizing: border-box
}

.theme-sheet-modal__body textarea.input-field {
    min-height: 120px;
    resize: vertical
}

.theme-sheet-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--border)
}

/* Edit member modal */
.edit-member-modal .edit-member-modal__panel {
    width: 700px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

    .edit-member-modal .edit-member-modal__panel #emmLoader,
    .edit-member-modal .edit-member-modal__panel form {
        display: flex;
        flex-direction: column;
        min-height: 0;
        flex: 1
    }

.edit-member-modal .theme-sheet-modal__header,
.edit-member-modal .theme-sheet-modal__footer {
    flex-shrink: 0
}

.edit-member-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.edit-member-tabs {
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 4px
}

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

.edit-member-label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 3px
}

.edit-member-grid .input-field,
.edit-member-section .input-field {
    width: 100%;
    box-sizing: border-box
}

.edit-member-inline {
    display: flex;
    gap: 4px;
    align-items: center
}

    .edit-member-inline .input-field {
        flex: 1;
        min-width: 0
    }

.edit-member-inline-btn {
    padding: 2px 8px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0
}

.edit-member-hint {
    font-size: 9px;
    color: var(--accent-red);
    display: block;
    margin-top: 3px;
    line-height: 1.35
}

/* Set fee modal */
.set-fee-modal {
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px)
}

    .set-fee-modal .set-fee-modal__panel {
        width: 720px;
        max-width: 95vw;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: none
    }

        .set-fee-modal .set-fee-modal__panel #sfmLoader,
        .set-fee-modal .set-fee-modal__panel #simLoader,
        .set-fee-modal .set-fee-modal__panel #sbmLoader,
        .set-fee-modal .set-fee-modal__panel #scbmLoader,
        .set-fee-modal .set-fee-modal__panel #scmLoader,
        .set-fee-modal .set-fee-modal__panel #vtmLoader,
        .set-fee-modal .set-fee-modal__panel #eimmLoader,
        .set-fee-modal .set-fee-modal__panel form {
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex: 1
        }

.view-tree-modal__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1
}

.view-tree-modal__card {
    margin-bottom: 0;
    padding: 14px 16px
}

.view-tree-modal__tree {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 2;
    max-height: 52vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.view-tree-modal__footer {
    justify-content: flex-end
}

    .view-tree-modal__footer .btn-danger {
        padding: 8px 24px
    }

.set-fee-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: none
}

    .set-fee-modal__header h3 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary)
    }

.set-fee-modal__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1
}

.set-fee-modal__tabs-bar {
    padding: 12px 20px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0
}

    .set-fee-modal__tabs-bar .page-tabs {
        margin: 0
    }

.set-fee-modal__subtabs-bar {
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0
}

    .set-fee-modal__subtabs-bar .page-tabs {
        margin: 0
    }

    .set-fee-modal__subtabs-bar .page-tab {
        font-size: 12px;
        padding: 6px 12px
    }

.sfm-main-panel {
    min-height: 0
}

.set-fee-modal__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch
}

.set-fee-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    flex-shrink: 0
}

.set-fee-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px
}

    .set-fee-card:last-child {
        margin-bottom: 0
    }

.set-fee-card__title {
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary)
}

.set-fee-card__title--danger {
    margin-bottom: 4px;
    color: var(--accent-red)
}

.set-fee-field label {
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px
}

.set-fee-field .input-field,
.set-fee-field select.input-field,
.set-fee-field textarea.input-field {
    width: 100%;
    box-sizing: border-box
}

.edit-inout-memo-modal__textarea {
    min-height: 120px;
    resize: vertical
}

.edit-inout-memo-modal__footer {
    justify-content: flex-end
}

.set-fee-hint {
    font-size: 9px;
    color: var(--accent-red);
    display: block;
    margin-top: 0;
    line-height: 1.35
}

.set-fee-card > div > .set-fee-hint {
    margin-top: 8px
}

.set-fee-check-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-top: 12px
}

    .set-fee-check-inline + .set-fee-check-inline {
        margin-top: 6px
    }

    .set-fee-check-inline input {
        margin: 0
    }

.set-fee-modal__footer-check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    margin-right: auto
}

    .set-fee-modal__footer-check input {
        margin: 0
    }

.set-fee-modal__footer .btn-primary,
.set-fee-modal__footer .btn-danger {
    padding: 8px 24px
}

.set-bp-game-check {
    margin-top: 8px
}

.set-bp-modal .set-bp-game-list {
    display: grid;
    gap: 12px
}

.set-bp-modal .set-bp-game-card {
    margin-bottom: 0
}

    .set-bp-modal .set-bp-game-card .set-fee-card__title {
        margin-bottom: 10px
    }

.set-bp-modal .set-bp-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary)
}

.set-bp-modal .set-bp-toggle--compact {
    font-size: 11px;
    gap: 6px
}

.set-bp-modal .set-bp-toggle input {
    margin: 0;
    flex-shrink: 0
}

.set-bp-modal .set-bp-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
}

.set-bp-modal .set-bp-vendor-card .set-fee-card__title {
    margin-bottom: 12px
}

.set-bp-vendor-wrap:empty::before {
    content: "업체 목록을 불러오는 중...";
    display: block;
    font-size: 11px;
    color: var(--text-muted)
}

.set-bp-vendor-section + .set-bp-vendor-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border)
}

.set-bp-vendor-section__label {
    margin-bottom: 10px
}

.set-bp-vendor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px
}

.set-bp-vendor-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .12)
}

.set-bp-vendor-item__head {
    margin-bottom: 2px
}

    .set-bp-vendor-item__head .tag {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        text-transform: none;
        letter-spacing: 0
    }

.set-bp-vendor-check {
    margin-top: 0 !important
}

.set-bp-toggle--gb {
    color: var(--accent-red)
}

@media(max-width:1200px) {
    .set-bp-vendor-grid {
        grid-template-columns: 1fr
    }

    .set-bp-modal .set-bp-toggle-row {
        grid-template-columns: 1fr
    }
}

.edit-member-section {
    border-top: 1px solid var(--border);
    margin-top: 12px;
    padding-top: 12px
}

.edit-member-section-title {
    font-size: 12px;
    margin: 0 0 8px
}

.edit-member-currency-wallet-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.edit-member-currency-wallet-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--surface-2, rgba(255, 255, 255, .02))
}

.edit-member-currency-wallet-item.is-main {
    border-color: var(--primary, #0ea5e9);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .15)
}

.edit-member-currency-wallet-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px
}

.edit-member-currency-wallet-name {
    font-size: 12px;
    color: var(--text-muted, #94a3b8)
}

.edit-member-currency-wallet-amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px
}

.edit-member-currency-wallet-amount {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0
}

.edit-member-currency-wallet-empty {
    color: var(--text-muted, #94a3b8);
    font-size: 12px
}

.edit-member-memo {
    min-height: 50px;
    resize: vertical
}

.edit-member-field-row {
    display: flex;
    gap: 8px;
    align-items: center
}

    .edit-member-field-row .input-field {
        flex: 1;
        min-width: 0
    }

.edit-member-check {
    font-size: 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: var(--text-muted);
    cursor: pointer
}

.edit-member-check-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.config-inout-form {
    max-width: 500px
}

.config-inout-field {
    margin-bottom: 12px
}

.config-inout-field-label {
    font-size: 12.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 4px;
    line-height: 1.35
}

.config-inout-field-input,
.config-inout-form .input-field {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.config-inout-field-hint {
    display: block;
    font-size: 10.5px;
    color: var(--accent-red);
    margin-top: 4px;
    line-height: 1.4
}

.config-inout-field--toggle .config-inout-toggle {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

.config-inout-toggle-label {
    font-size: 12.5px;
    line-height: 1.35
}

.config-inout-rest-time {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap
}

.config-inout-rest-time-input {
    width: 80px;
    text-align: center;
    flex-shrink: 0
}

.config-inout-rest-time-sep {
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap
}

#soundSettingsArea {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.config-site-sound-card {
    margin-bottom: 0;
    box-shadow: none;
    border: 1px solid var(--border);
    background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary))
}

.config-site-sound-card__head {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap
}

.config-site-sound-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

    .config-site-sound-card__icon i {
        font-size: 14px
    }

.config-site-sound-card__meta {
    flex: 1;
    min-width: 150px
}

.config-site-sound-card__title {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 2px
}

.config-site-sound-card__desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4
}

.config-site-sound-card__toggle {
    flex-shrink: 0
}

    .config-site-sound-card__toggle .sound-toggle-label {
        font-size: 10px;
        min-width: 2.5em
    }

.config-site-sound-card__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap
}

    .config-site-sound-card__actions .btn-sm {
        padding: 4px 10px;
        font-size: 10px
    }

.config-site-sound-card__threshold {
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.config-site-sound-card__threshold--dual {
    gap: 12px
}

.config-site-sound-card__threshold-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap
}

.config-site-sound-card__threshold-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap
}

.config-site-sound-card__threshold-input {
    width: 110px;
    text-align: right;
    font-size: 11px
}

.config-site-sound-card__threshold-input--short {
    width: 55px;
    text-align: center
}

.config-site-sound-card__info {
    padding: 6px 16px 10px;
    border-top: 1px solid var(--border);
    font-size: 10px;
    color: var(--text-secondary)
}

.config-site-sound-card__info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.config-site-sound-card__audio {
    height: 28px;
    flex: 1;
    max-width: 250px;
    min-width: 120px
}

.config-site-sound-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm)
}

/* RESPONSIVE */
@media(max-width:1200px) {
    .stats-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .stats-grid--3col {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }

    .settle-summary {
        grid-template-columns: repeat(3,1fr)
    }

    .grid-2, .grid-3 {
        grid-template-columns: 1fr
    }
}

@media(max-width:768px) {
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)))
    }

        .sidebar.mobile-open {
            transform: translateX(0)
        }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0,0,0,.55);
        backdrop-filter: blur(2px);
        -webkit-tap-highlight-color: transparent
    }

    body.sidebar-mobile-open .sidebar-backdrop {
        display: block
    }

    body.sidebar-mobile-open {
        overflow: hidden
    }

    .topbar {
        left: 0
    }

    .main-content {
        margin-left: 0;
        padding: 12px
    }

    .topbar {
        padding: 0 12px
    }

    .topbar-title {
        max-width: min(52vw,220px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        letter-spacing: 1px
    }

    .stats-grid:not(.charge-summary-stats):not(.exchange-summary-stats):not(.members-summary-stats) {
        grid-template-columns: 1fr
    }

    .stats-grid--3col {
        grid-template-columns: 1fr
    }

    .dashboard-page .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

    .dashboard-page .card-header h3 {
        white-space: normal;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 1px
    }

    .dashboard-page .toolbar {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        width: 100%;
        gap: 6px
    }

        .dashboard-page .toolbar .btn {
            justify-content: center;
            width: 100%;
            min-width: 0;
            padding: 8px 10px
        }

        .dashboard-page .toolbar .toggle-sw {
            grid-column: 1/-1;
            justify-content: center;
            padding: 4px 0
        }

        .dashboard-page .toolbar .input-field[type="date"] {
            width: 100%;
            min-width: 0;
            box-sizing: border-box
        }

        .dashboard-page .toolbar .btn-outline {
            grid-column: 1/-1
        }

    .dashboard-page .stat-card {
        padding: 12px 14px
    }

    .dashboard-page .stat-label {
        font-size: 10.5px;
        line-height: 1.35;
        letter-spacing: .5px
    }

    .dashboard-page .stat-value {
        font-size: 17px
    }

    .dashboard-page .stat-value--sm {
        font-size: 16px
    }

    .dashboard-page .dashboard-stat-currency .stat-currency-value,
    [class*="-summary-stats"] .stat-currency-value {
        font-size: 12px
    }

    .stat-currency-pair-header,
    .stat-currency-pair-row,
    .dashboard-inout-pair-header,
    .dashboard-inout-pair-row {
        grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px
    }

    .stat-currency-tag,
    .dashboard-currency-tag,
    .games-currency-tag,
    .inout-history-currency-tag {
        min-width: 38px;
        font-size: 9px;
        padding: 1px 4px
    }

    .dashboard-page .stat-split {
        flex-wrap: wrap
    }

        .dashboard-page .stat-split > div {
            flex: 1 1 45%;
            min-width: 0
        }

    .dashboard-page .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin-bottom: 8px
    }

    .dashboard-page .stat-sub {
        flex-wrap: wrap;
        gap: 8px 4px
    }

    .dashboard-page .bet-grid {
        grid-template-columns: 1fr
    }

    .dashboard-page .card-body {
        padding: 12px
    }

    .dashboard-page .dashboard-table-wrap table {
        font-size: 12px
    }

    .dashboard-page .dashboard-table-wrap thead th {
        padding: 8px 10px;
        font-size: 10px
    }

    .dashboard-page .dashboard-table-wrap tbody td {
        padding: 7px 10px
    }

    .config-site-page .card .card-header {
        padding: 12px 14px
    }

    .config-site-page .card-header h3 {
        white-space: normal;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 1px
    }

    .config-site-page .card-body {
        padding: 12px
    }

    .config-site-tabs {
        margin-bottom: 12px
    }

        .config-site-tabs .page-tab {
            font-size: 11.5px;
            padding: 8px 12px;
            letter-spacing: 0
        }

    .config-site-form {
        gap: 12px
    }

        .config-site-form > div:empty {
            display: none
        }

        .config-site-form label[style*="font-size:12.5px"] {
            font-size: 12px !important;
            line-height: 1.35
        }

        .config-site-form .config-site-actions .btn {
            width: 100%;
            justify-content: center
        }

    .config-site-notice {
        font-size: 12.5px;
        padding: 10px 12px
    }

    .config-site-sound-card__head {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px
    }

    .config-site-sound-card__meta {
        min-width: 0
    }

    .config-site-sound-card__toggle {
        width: 100%;
        justify-content: space-between
    }

    .config-site-sound-card__actions {
        width: 100%;
        justify-content: stretch
    }

        .config-site-sound-card__actions .btn {
            flex: 1 1 calc(33.333% - 4px);
            min-width: 72px;
            justify-content: center
        }

    .config-site-sound-card__threshold,
    .config-site-sound-card__threshold--dual {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px
    }

    .config-site-sound-card__threshold-group {
        width: 100%
    }

    .config-site-sound-card__threshold-input {
        flex: 1 1 80px;
        width: auto;
        max-width: 100%
    }

    .config-site-sound-card__info-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px
    }

    .config-site-sound-card__audio {
        max-width: 100%;
        width: 100%
    }

    .config-site-bank-table-wrap {
        overflow-x: visible
    }

    .config-site-bank-table--responsive {
        min-width: 0;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0
    }

        .config-site-bank-table--responsive thead {
            display: none
        }

        .config-site-bank-table--responsive tbody tr {
            display: block;
            margin-bottom: 12px;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            background: linear-gradient(165deg,var(--bg-card),var(--bg-secondary))
        }

        .config-site-bank-table--responsive tbody td {
            display: block;
            padding: 8px 0;
            border-bottom: none;
            white-space: normal;
            text-align: left !important;
            position: static;
            background: transparent
        }

            .config-site-bank-table--responsive tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 10px;
                font-weight: 700;
                color: var(--text-muted);
                margin-bottom: 5px;
                letter-spacing: .3px
            }

        .config-site-bank-table--responsive .config-site-bank-level {
            font-size: 14px;
            padding-bottom: 10px;
            margin-bottom: 6px;
            border-bottom: 1px solid var(--border)
        }

            .config-site-bank-table--responsive .config-site-bank-level::before {
                display: none
            }

        .config-site-bank-table--responsive .config-site-bank-actions {
            padding-top: 10px;
            margin-top: 4px;
            border-top: 1px solid rgba(0,130,255,.12)
        }

            .config-site-bank-table--responsive .config-site-bank-actions::before {
                display: none
            }

        .config-site-bank-table--responsive .config-site-bank-apply-btn {
            width: 100%;
            justify-content: center
        }

    .config-inout-page .card-header h3 {
        white-space: normal;
        font-size: 12px;
        line-height: 1.35;
        letter-spacing: 0
    }

    .config-banklist-page .card-body {
        padding: 12px
    }

    .config-banklist-table thead th,
    .config-banklist-table tbody td {
        padding: 8px 10px;
        font-size: 11px
    }

    .config-banklist-logo {
        max-width: 64px;
        max-height: 28px
    }

    .config-banklist-inspection {
        max-width: 200px;
        font-size: 11px
    }

    .config-banklist-actions .btn {
        padding: 5px 8px;
        font-size: 10.5px
    }

    .partner-class-page {
        overflow-x: hidden
    }

        .partner-class-page > .card .card-header {
            padding: 12px 14px
        }

            .partner-class-page > .card .card-header h3 {
                font-size: 14px
            }

        .partner-class-page > .card .card-body {
            padding: 12px 14px
        }

        .partner-class-page #classListPanel.card-body {
            padding: 0
        }

    .black-bank-form-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .black-bank-page > .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .black-bank-page > .card .card-header h3 {
            font-size: 14px
        }

    .black-bank-page > .card .card-body {
        padding: 12px 14px
    }

    .black-bank-page #blackBankListPanel.card-body {
        padding: 0
    }

    .black-bank-actions .btn {
        width: 100%;
        justify-content: center
    }

    .black-bank-table {
        font-size: 12px
    }

        .black-bank-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .black-bank-table tbody td {
            padding: 8px 10px
        }

        .black-bank-table .black-bank-td-memo {
            max-width: 160px
        }

    .black-ip-form-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .black-ip-page > .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .black-ip-page > .card .card-header h3 {
            font-size: 14px
        }

    .black-ip-page > .card .card-body {
        padding: 12px 14px
    }

    .black-ip-page #blackIpListPanel.card-body {
        padding: 0
    }

    .black-ip-actions .btn {
        width: 100%;
        justify-content: center
    }

    .black-ip-table {
        font-size: 12px
    }

        .black-ip-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .black-ip-table tbody td {
            padding: 8px 10px
        }

        .black-ip-table .black-ip-td-memo {
            max-width: 160px
        }

    .admin-list-form-grid,
    .admin-list-modal-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .admin-list-extra-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .admin-list-page,
    .admin-work-log-page,
    .log-config-page,
    .log-member-page,
    .admin-login-live-page,
    .member-login-log-page,
    .member-login-live-page,
    .admin-del-history-page,
    .config-domain-page,
    .bethistory-sports-page {
        overflow-x: hidden
    }

        .admin-list-page > .card .card-header {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
            padding: 12px 14px
        }

            .admin-list-page > .card .card-header h3 {
                font-size: 14px
            }

        .admin-list-page > .card .card-body {
            padding: 12px 14px
        }

            .admin-list-page > .card .card-body.table-scroll.admin-list-panel,
            .admin-list-page #adminListPanel.card-body {
                padding: 0
            }

    .admin-list-actions .btn {
        width: 100%;
        justify-content: center
    }

    .table-scroll.admin-list-panel .admin-list-table {
        min-width: 780px
    }

    .admin-list-table {
        font-size: 12px
    }

        .admin-list-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .admin-list-table tbody td {
            padding: 8px 10px
        }

        .admin-list-table .admin-list-td-memo {
            max-width: none;
            min-width: 120px
        }

        .admin-list-table .admin-list-actions-cell {
            min-width: 88px
        }

            .admin-list-table .admin-list-actions-cell .btn {
                display: inline-flex;
                width: auto;
                padding: 4px 7px;
                margin: 0 1px
            }

    .admin-work-log-page > .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .admin-work-log-page > .card .card-header h3 {
            font-size: 14px
        }

    .admin-work-log-page > .card .card-body.table-scroll {
        padding: 0
    }

    .admin-work-log-page .members-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%
    }

        .admin-work-log-page .members-toolbar #searchForm {
            display: contents
        }

        .admin-work-log-page .members-toolbar .input-field,
        .admin-work-log-page .members-toolbar .btn {
            min-width: 0
        }

        .admin-work-log-page .members-toolbar .admin-work-log-date {
            flex: none;
            width: 100%;
            grid-column: span 1
        }

        .admin-work-log-page .members-toolbar .admin-work-log-date-sep {
            display: none
        }

        .admin-work-log-page .members-toolbar .members-search-input,
        .admin-work-log-page .members-toolbar .btn-primary {
            grid-column: 1 / -1
        }

    .table-scroll.admin-work-log-list-panel .admin-work-log-table {
        min-width: 720px
    }

    .admin-work-log-table {
        font-size: 12px
    }

        .admin-work-log-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .admin-work-log-table tbody td {
            padding: 8px 10px
        }

        .admin-work-log-table .admin-work-log-td-domain,
        .admin-work-log-table .admin-work-log-td-memo {
            max-width: none;
            min-width: 120px
        }

    .admin-login-live-page > .card .card-header {
        padding: 12px 14px
    }

        .admin-login-live-page > .card .card-header h3 {
            font-size: 14px
        }

    .admin-login-live-page > .card .card-body.table-scroll {
        padding: 0
    }

    .table-scroll.admin-login-live-panel .admin-login-live-table {
        min-width: 680px
    }

    .admin-login-live-table {
        font-size: 12px
    }

        .admin-login-live-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .admin-login-live-table tbody td {
            padding: 8px 10px
        }

        .admin-login-live-table .admin-login-live-td-id {
            white-space: normal;
            min-width: 108px;
            line-height: 1.45
        }

            .admin-login-live-table .admin-login-live-td-id .tag {
                display: inline-block;
                margin: 4px 0 0;
                margin-left: 0;
                font-size: 10px;
                padding: 1px 5px
            }

        .admin-login-live-table .admin-login-live-td-domain,
        .admin-login-live-table .admin-login-live-td-path {
            max-width: none;
            min-width: 100px
        }

    .member-login-log-page > .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .member-login-log-page > .card .card-header h3 {
            font-size: 14px
        }

    .member-login-log-page > .card .card-body.table-scroll {
        padding: 0
    }

    .member-login-log-page .members-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%
    }

        .member-login-log-page .members-toolbar #searchForm {
            display: contents
        }

        .member-login-log-page .members-toolbar .input-field,
        .member-login-log-page .members-toolbar .btn {
            min-width: 0
        }

        .member-login-log-page .members-toolbar .member-login-log-date {
            width: 100%;
            min-width: 0
        }

        .member-login-log-page .members-toolbar .member-login-log-date-sep {
            display: none
        }

        .member-login-log-page .members-toolbar .inout-search-input,
        .member-login-log-page .members-toolbar .btn-primary {
            grid-column: 1 / -1
        }

    .member-login-log-summary-stats {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px
    }

    .table-scroll.member-login-log-panel .member-login-log-table {
        min-width: 720px
    }

    .member-login-log-table {
        font-size: 12px
    }

        .member-login-log-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .member-login-log-table tbody td {
            padding: 8px 10px
        }

        .member-login-log-table .member-login-log-td-url {
            max-width: none;
            min-width: 120px
        }

    .member-login-live-page > .card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .member-login-live-page > .card .card-header h3 {
            font-size: 14px
        }

    .member-login-live-refresh-note {
        margin-left: 0;
        font-size: 12px
    }

    .member-login-live-page > .card .card-body.table-scroll {
        padding: 0
    }

    .member-login-live-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px
    }

    .table-scroll.member-login-live-panel .member-login-live-table {
        min-width: 900px
    }

    .member-login-live-table {
        font-size: 12px
    }

        .member-login-live-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .member-login-live-table tbody td {
            padding: 8px 10px
        }

        .member-login-live-table .member-login-live-td-domain,
        .member-login-live-table .member-login-live-td-path {
            max-width: none;
            min-width: 100px
        }

    .admin-login-live-table .admin-login-live-actions-cell {
        min-width: 96px
    }

        .admin-login-live-table .admin-login-live-actions-cell .btn {
            display: inline-flex;
            width: auto;
            padding: 4px 7px;
            margin: 0 1px;
            font-size: 11px
        }

            .admin-login-live-table .admin-login-live-actions-cell .btn .fa-sign-out-alt {
                margin: 0
            }

    .config-domain-page > .card .card-header {
        padding: 12px 14px
    }

        .config-domain-page > .card .card-header h3 {
            font-size: 14px
        }

    .config-domain-page > .card .card-body {
        padding: 0
    }

    .config-domain-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 0;
        padding: 12px 14px 0;
        border-bottom: 1px solid var(--border)
    }

        .config-domain-tabs::-webkit-scrollbar {
            display: none
        }

        .config-domain-tabs .page-tab {
            flex: 0 0 auto;
            white-space: nowrap;
            justify-content: center;
            padding: 8px 12px;
            font-size: 11px
        }

    .config-domain-page [id^="domainTab_"] {
        padding-bottom: 12px
    }

    .config-domain-actions {
        padding: 12px 14px 0
    }

        .config-domain-actions .btn {
            width: 100%;
            justify-content: center
        }

    .table-scroll.config-domain-list-panel {
        margin: 0;
        padding: 0
    }

        .table-scroll.config-domain-list-panel .config-domain-table {
            min-width: 580px
        }

    .config-domain-table {
        font-size: 12px
    }

        .config-domain-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .config-domain-table tbody td {
            padding: 8px 10px;
            vertical-align: middle
        }

        .config-domain-table .config-domain-input {
            min-width: 140px
        }

        .config-domain-table .config-domain-select {
            min-width: 150px;
            max-width: none
        }

        .config-domain-table .config-domain-actions-cell {
            min-width: 92px
        }

            .config-domain-table .config-domain-actions-cell .btn {
                display: inline-flex;
                width: auto;
                padding: 4px 7px;
                margin: 0 1px
            }

    .config-domain-page .empty-state--card {
        margin: 12px 14px
    }

    .config-domain-live-page > .card > .card-body {
        padding: 12px 14px
    }

    .config-domain-live-page .config-domain-actions .btn {
        width: 100%
    }

    .admin-list-page .empty-state--card,
    .admin-work-log-page .empty-state--card,
    .admin-login-live-page .empty-state--card,
    .member-login-log-page .empty-state--card,
    .admin-del-history-page .empty-state--card {
        padding: 28px 16px
    }

    .admin-del-history-page > .card .card-header {
        padding: 12px 14px
    }

        .admin-del-history-page > .card .card-header h3 {
            font-size: 14px
        }

    .admin-del-history-page > .card .card-body {
        padding: 12px 14px
    }

    .admin-del-history-page .members-toolbar {
        width: 100%
    }

        .admin-del-history-page .members-toolbar #delFormToolbar {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            width: 100%
        }

        .admin-del-history-page .members-toolbar .admin-work-log-date {
            min-width: 0;
            width: 100%
        }

        .admin-del-history-page .members-toolbar .admin-work-log-date-sep {
            display: none
        }

        .admin-del-history-page .members-toolbar .input-field,
        .admin-del-history-page .members-toolbar .btn {
            width: 100%;
            max-width: none
        }

        .admin-del-history-page .members-toolbar .admin-del-history-date-group {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 6px;
            align-items: center
        }

            .admin-del-history-page .members-toolbar .admin-del-history-date-group .admin-work-log-date-sep {
                display: block;
                line-height: 1;
                text-align: center
            }

        .admin-del-history-page .members-toolbar .admin-del-history-delete-btn {
            grid-column: 1 / -1
        }

    .admin-del-history-game-grid {
        gap: 6px
    }

    .admin-del-history-game-item {
        flex: 1 1 calc(50% - 6px);
        min-width: 0
    }

    .config-site-page.admin-config-page--split .admin-config-layout {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .config-site-page.admin-config-page--split > .admin-config-layout > .card .card-header {
        padding: 12px 14px
    }

        .config-site-page.admin-config-page--split > .admin-config-layout > .card .card-header h3 {
            font-size: 14px
        }

    .config-site-page.admin-config-page--split > .admin-config-layout > .card .card-body {
        padding: 12px 14px
    }

    .admin-config-main-actions .btn {
        width: 100%;
        justify-content: center
    }

    .roulette-page > .card .card-header {
        padding: 12px 14px
    }

        .roulette-page > .card .card-header h3 {
            font-size: 14px
        }

    .roulette-page > .card .card-body {
        padding: 0
    }

    .roulette-page .roulette-table {
        font-size: 12px
    }

        .roulette-page .roulette-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .roulette-page .roulette-table tbody td {
            padding: 8px 10px
        }

    .partner-class-page #classWizardTabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 12px
    }

        .partner-class-page #classWizardTabs::-webkit-scrollbar {
            display: none
        }

        .partner-class-page #classWizardTabs .page-tab {
            flex-shrink: 0;
            white-space: nowrap;
            font-size: 12.5px;
            padding: 8px 12px
        }

    .partner-class-form-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .partner-class-color {
        width: 100%
    }

        .partner-class-color .input-field {
            flex: 1;
            min-width: 0;
            width: auto !important
        }

    .partner-class-actions {
        justify-content: stretch
    }

        .partner-class-actions .btn {
            width: 100%;
            justify-content: center
        }

    .partner-class-complete {
        padding: 28px 16px
    }

        .partner-class-complete i {
            font-size: 40px !important
        }

        .partner-class-complete .btn {
            width: 100%;
            justify-content: center;
            margin-top: 12px !important
        }

    .partner-class-table {
        font-size: 12px
    }

        .partner-class-table thead th {
            padding: 8px 10px;
            font-size: 10px;
            letter-spacing: .8px
        }

        .partner-class-table tbody td {
            padding: 8px 10px
        }

            .partner-class-table thead th:nth-child(1),
            .partner-class-table tbody td:nth-child(1) {
                width: 52px
            }

            .partner-class-table thead th:nth-child(3),
            .partner-class-table tbody td:nth-child(3) {
                width: 72px
            }

            .partner-class-table thead th:nth-child(4),
            .partner-class-table tbody td:nth-child(4) {
                width: 80px
            }

        .partner-class-table .partner-class-swatch {
            width: 22px;
            height: 22px
        }

        .partner-class-table .partner-class-actions-cell .btn {
            padding: 4px 7px;
            font-size: 11px
        }

    .theme-sheet-modal__panel {
        width: 100%;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        border-radius: var(--radius)
    }

    .theme-sheet-modal__header h3 {
        font-size: 13px
    }

    .theme-sheet-modal__footer {
        flex-direction: column-reverse;
        gap: 8px
    }

        .theme-sheet-modal__footer .btn {
            width: 100%;
            justify-content: center
        }

    .edit-member-modal {
        align-items: flex-end;
        padding: 0
    }

        .edit-member-modal .edit-member-modal__panel {
            width: 100%;
            max-width: 100%;
            max-height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

        .edit-member-modal .theme-sheet-modal__header {
            padding: 12px 14px
        }

            .edit-member-modal .theme-sheet-modal__header h3 {
                font-size: 13px;
                line-height: 1.35;
                padding-right: 8px
            }

    .edit-member-modal__body {
        padding: 12px 14px
    }

    .edit-member-modal .theme-sheet-modal__footer {
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0))
    }

    .set-fee-modal {
        align-items: flex-end;
        padding: 0
    }

        .set-fee-modal .set-fee-modal__panel {
            width: 100%;
            max-width: 100%;
            max-height: calc(100vh - 8px);
            max-height: calc(100dvh - 8px);
            border-radius: var(--radius) var(--radius) 0 0;
            margin-top: auto
        }

    .set-fee-modal__header {
        padding: 12px 14px
    }

        .set-fee-modal__header h3 {
            font-size: 13px;
            line-height: 1.35;
            padding-right: 8px
        }

    .set-fee-modal__tabs-bar {
        padding: 8px 0 0;
        overflow: hidden
    }

        .set-fee-modal__tabs-bar .page-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0;
            padding: 0 14px 2px
        }

            .set-fee-modal__tabs-bar .page-tabs::-webkit-scrollbar {
                display: none
            }

        .set-fee-modal__tabs-bar .page-tab {
            font-size: 11px;
            padding: 7px 10px;
            letter-spacing: 0;
            flex-shrink: 0;
            white-space: nowrap
        }

    .set-fee-modal__subtabs-bar {
        padding: 0 0 10px;
        margin-bottom: 10px;
        overflow: hidden
    }

        .set-fee-modal__subtabs-bar .page-tabs {
            overflow-x: auto;
            flex-wrap: nowrap;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0
        }

            .set-fee-modal__subtabs-bar .page-tabs::-webkit-scrollbar {
                display: none
            }

        .set-fee-modal__subtabs-bar .page-tab {
            font-size: 11px;
            padding: 6px 10px;
            flex-shrink: 0;
            white-space: nowrap
        }

    .set-fee-modal__content {
        padding: 12px 14px
    }

    .set-fee-card {
        padding: 14px;
        margin-bottom: 12px
    }

    .set-fee-card__title {
        font-size: 12px;
        margin-bottom: 10px
    }

    .set-fee-modal__footer {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0))
    }

    .set-fee-modal__footer-check {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2px
    }

    .set-fee-modal__footer .btn-primary,
    .set-fee-modal__footer .btn-danger {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        justify-content: center
    }

    .set-fee-modal__close {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .set-fee-field .input-field {
        min-height: 38px;
        font-size: 14px
    }

    .set-fee-check-inline,
    .set-fee-modal__footer-check {
        font-size: 12px;
        min-height: 32px
    }

    .view-tree-modal__card {
        padding: 12px
    }

    .view-tree-modal__tree {
        max-height: min(48vh, 48dvh);
        font-size: 12.5px;
        line-height: 1.85
    }

    .view-tree-modal__footer .btn-danger {
        width: 100%;
        justify-content: center
    }

    .edit-member-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .edit-member-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 6px
    }

    .edit-member-inline-btn {
        width: 100%;
        justify-content: center;
        padding: 6px 10px;
        font-size: 11px
    }

    .edit-member-field-row {
        flex-direction: column;
        align-items: stretch;
        gap: 6px
    }

    .edit-member-check {
        align-self: flex-start;
        margin-top: 2px
    }

    .edit-member-label {
        font-size: 12px;
        margin-bottom: 4px
    }

    .edit-member-hint {
        font-size: 10px
    }

    .edit-member-section {
        margin-top: 10px;
        padding-top: 10px
    }

    .edit-member-section-title {
        font-size: 11.5px
    }

    .edit-member-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -14px 12px;
        padding: 0 14px 2px
    }

        .edit-member-tabs::-webkit-scrollbar {
            display: none
        }

        .edit-member-tabs .page-tab {
            font-size: 11px;
            padding: 7px 10px;
            letter-spacing: 0;
            flex-shrink: 0;
            white-space: nowrap
        }

    .config-inout-page .card-body {
        padding: 12px
    }

    .config-inout-tabs {
        margin-bottom: 10px
    }

        .config-inout-tabs .page-tab {
            font-size: 11.5px;
            padding: 8px 12px
        }

    .config-inout-actions .config-inout-apply-btn {
        width: 100%;
        justify-content: center
    }

    .config-inout-form {
        max-width: none
    }

    .config-inout-field-label {
        font-size: 12px
    }

    .config-inout-field--toggle .config-inout-toggle {
        width: 100%;
        justify-content: space-between
    }

    .config-inout-rest-time {
        flex-direction: column;
        align-items: stretch
    }

    .config-inout-rest-time-input {
        width: 100%;
        max-width: none
    }

    .config-inout-rest-time-sep {
        text-align: center;
        padding: 2px 0
    }

    .config-inout-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

        .config-inout-table-wrap .config-inout-table {
            font-size: 12px
        }

        .config-inout-table-wrap thead th {
            padding: 8px 10px;
            font-size: 10px
        }

        .config-inout-table-wrap tbody td {
            padding: 7px 8px
        }

    .settle-summary {
        grid-template-columns: repeat(2,1fr)
    }

    .members-page {
        overflow-x: hidden
    }

    .members-summary-stats,
    .status-ratio-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        margin-bottom: 12px
    }

    .status-ratio-select {
        min-width: 90px;
        max-width: 120px
    }

    .members-filter-tabs {
        margin-bottom: 12px
    }

    .members-table-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

    .members-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%
    }

        .members-toolbar #searchForm {
            display: contents
        }

        .members-toolbar .btn, .members-toolbar select, .members-toolbar .member-partner-id-field, .members-toolbar .members-search-input {
            grid-column: span 1
        }

        .members-toolbar .btn-success, .members-toolbar .btn-outline[onclick*="filterModal"] {
            grid-column: span 1
        }

        .members-toolbar .btn-primary {
            grid-column: 1/-1
        }

    .members-search-input {
        grid-column: 1/-1;
        width: 100%
    }

    .members-table-scroll {
        max-width: 100%
    }

    .members-pagination {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 12px
    }

    .treeview-page {
        overflow-x: hidden
    }

    .treeview-layout {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .tree-sidebar-card {
        position: static;
        top: auto
    }

    .tree-container {
        max-height: min(42vh,360px);
        font-size: 12.5px;
        line-height: 1.85
    }

    .tree-children {
        padding-left: 12px !important
    }

    .tree-node .tag {
        font-size: 10px;
        margin-top: 2px
    }

    .treeview-main-card > .card-header {
        padding: 12px 14px
    }

    .tree-detail-grid {
        grid-template-columns: 1fr
    }

        .tree-detail-grid .tree-detail-item:nth-last-child(2) {
            border-bottom: 1px solid var(--border)
        }

        .tree-detail-grid .tree-detail-item:last-child {
            border-bottom: none
        }

    .tree-jstree-container {
        max-height: min(42vh, 360px)
    }

    .form-grid-2, .form-grid-3 {
        grid-template-columns: 1fr
    }

    .member-create-page {
        overflow-x: hidden
    }

        .member-create-page .card-header {
            padding: 12px 14px
        }

            .member-create-page .card-header h3 {
                font-size: 14px
            }

    .member-wizard-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-bottom: 12px
    }

        .member-wizard-tabs::-webkit-scrollbar {
            display: none
        }

        .member-wizard-tabs .page-tab {
            flex-shrink: 0;
            white-space: nowrap;
            font-size: 12.5px;
            padding: 8px 12px
        }

    .member-fee-tabs {
        margin-bottom: 10px
    }

        .member-fee-tabs .page-tab {
            font-size: 12px;
            padding: 7px 10px
        }

    .member-create-page .form-grid {
        gap: 12px
    }

    .member-create-page .input-field, .member-create-page select.input-field {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box
    }

    .wizard-nav {
        flex-direction: row;
        width: 100%
    }

        .wizard-nav .btn {
            flex: 1;
            min-width: 0;
            justify-content: center
        }

    .bulk-range-row {
        gap: 6px
    }

    .bulk-range-input {
        flex: 1 1 72px;
        max-width: 100%;
        width: auto
    }

    .bulk-count-label {
        flex: 1 1 100%;
        width: 100%;
        margin-top: 4px
    }

    .bulk-actions {
        flex-direction: column
    }

        .bulk-actions .btn {
            width: 100%;
            flex: none;
            min-width: 0;
            justify-content: center
        }

    .member-complete-panel .empty-state {
        padding: 24px 12px
    }

    .member-complete-icon {
        font-size: 36px
    }

    .member-complete-text {
        font-size: 14.5px
    }

    .bulk-info-notice {
        font-size: 12.5px;
        padding: 10px 12px
    }

    .bulk-preview-list {
        max-height: 88px;
        font-size: 12px
    }

    .charge-summary-stats, .exchange-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        margin-bottom: 12px
    }

    .charge-page .charge-section-card .card-header, .exchange-page .exchange-section-card .card-header, .pointexchange-page .charge-section-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px
    }

        .charge-page .charge-section-card .card-header h3, .exchange-page .exchange-section-card .card-header h3, .pointexchange-page .charge-section-card .card-header h3 {
            font-size: 14px
        }

    .charge-actions-toolbar, .exchange-actions-toolbar {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        width: 100%;
        gap: 6px
    }

        .charge-actions-toolbar .charge-auto-refresh-controls,
        .exchange-actions-toolbar .exchange-auto-refresh-controls {
            grid-column: 1/-1;
            justify-content: flex-start
        }

        .charge-actions-toolbar .btn, .exchange-actions-toolbar .btn {
            justify-content: center;
            width: 100%
        }

    .charge-filter-toolbar, .exchange-filter-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%
    }

        .charge-filter-toolbar .inout-search-input, .exchange-filter-toolbar .inout-search-input {
            grid-column: 1/-1
        }

        .charge-filter-toolbar .btn-primary, .exchange-filter-toolbar .btn-primary {
            grid-column: 1/-1
        }

        .charge-filter-toolbar .text-muted, .exchange-filter-toolbar .text-muted {
            display: none
        }

        .charge-filter-toolbar .input-datetime, .exchange-filter-toolbar .input-datetime,
        .charge-filter-toolbar .input-field[type="datetime-local"], .exchange-filter-toolbar .input-field[type="datetime-local"] {
            width: 100%;
            flex: 1 1 100%
        }

    .charge-pagination, .exchange-pagination {
        flex-direction: column;
        align-items: flex-start
    }

    .inout-history-summary-stats,
    .bethistory-sports-summary-stats,
    .bethistory-thirdparty-summary-stats,
    .feehistory-summary-stats,
    .gamemoney-summary-stats,
    .gamemoney-eggs-summary-stats,
    .games-summary-stats,
    .ins-history-summary-stats {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px
    }

    .inout-history-summary-stats {
        grid-template-columns: minmax(80px, 0.7fr) repeat(2, minmax(0, 1fr));
    }

        .inout-history-summary-stats .inout-history-stat--cancel {
            grid-column: span 2
        }

    .ins-byuser-page .ins-byuser-fee-stats {
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 10px
    }

    .ins-config-form-grid {
        grid-template-columns: 1fr;
        padding: 12px 14px;
        gap: 10px
    }

        .ins-config-form-grid .ins-config-field,
        .ins-config-form-grid .ins-config-field--metric {
            width: 100%;
            min-width: 0
        }

        .ins-config-form-grid .input-field,
        .ins-config-form-grid select.input-field {
            width: 100%;
            min-width: 0
        }

    .ins-config-metrics-row,
    .ins-config-sheet-metrics {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .ins-config-page .ins-config-create-card .card-header,
    .ins-config-page .bethistory-sports-card .card-header {
        padding: 12px 14px
    }

        .ins-config-page .ins-config-create-card .card-header h3,
        .ins-config-page .bethistory-sports-card .card-header h3 {
            font-size: 14px
        }

    .ins-config-page .sports-mng-actions-toolbar {
        padding: 0 14px 12px;
        width: 100%
    }

        .ins-config-page .sports-mng-actions-toolbar .btn {
            width: 100%;
            justify-content: center
        }

    .ins-config-sheet-modal .theme-sheet-modal__panel {
        width: 100%;
        max-width: calc(100vw - 24px)
    }

    .ins-config-sheet-modal__pair {
        grid-template-columns: 1fr
    }

    .ins-config-hint {
        font-size: 11px
    }

    .bethistory-sports-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .bethistory-sports-search-form > .input-field,
    .bethistory-sports-search-form > .choices,
    .bethistory-sports-search-form > .ins-byuser-partner-id-field,
    .bethistory-sports-search-form > .btn,
    .bethistory-sports-search-form > a.btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%
    }

    .bethistory-sports-toolbar .bethistory-sports-date-sep {
        display: none
    }

    .bethistory-sports-toolbar .bethistory-sports-datetime {
        width: 100%;
        min-width: 0
    }

    .sports-sheet-modal__ratio-grid,
    .sports-sheet-modal__score-grid {
        grid-template-columns: 1fr
    }

    .inout-history-card .card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px
    }

    .inout-history-toolbar .inout-history-date-sep {
        display: none
    }

    .inout-history-toolbar .inout-history-date {
        width: 100%;
        min-width: 0
    }

    .inout-history-toolbar .member-partner-id-field,
    .inout-history-toolbar .inout-history-sort-options {
        width: 100%;
        max-width: none;
        min-width: 0
    }

    .inout-history-toolbar .member-partner-id-field .choices {
        width: 100%;
        max-width: none
    }
}

@media(max-width:480px) {
    .topbar-title {
        max-width: min(42vw,160px);
        font-size: 12px
    }

    .dashboard-page .toolbar {
        grid-template-columns: 1fr
    }

    .dashboard-page .stat-value {
        font-size: 15px
    }

    .dashboard-page .stat-value--sm {
        font-size: 14.5px
    }

    .config-site-tabs .page-tab {
        font-size: 11px;
        padding: 7px 10px
    }

    .edit-member-tabs .page-tab {
        font-size: 10.5px;
        padding: 6px 9px
    }

    .set-fee-modal__tabs-bar .page-tab {
        font-size: 10.5px;
        padding: 6px 9px
    }

    .set-fee-modal__header h3 {
        font-size: 12.5px
    }

    .set-fee-card {
        padding: 12px
    }

    .edit-member-modal .theme-sheet-modal__header h3 {
        font-size: 12.5px
    }

    .config-site-sound-card__actions .btn {
        flex: 1 1 100%
    }

    .charge-summary-stats, .exchange-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

    .ins-config-pair {
        gap: 6px
    }

    .ins-history-summary-stats {
        grid-template-columns: 1fr;
        gap: 8px
    }

    .ins-byuser-page .ins-byuser-fee-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

    .ins-byuser-partner-select,
    .ins-byuser-page .ins-byuser-partner-id-field {
        min-width: 0;
        max-width: none;
        width: 100%
    }

    .ins-byuser-page .ins-byuser-partner-id-field .choices {
        width: 100%;
        max-width: none
    }

    .ins-config-actions .btn {
        flex: 1 1 auto;
        min-width: 0
    }

    .inout-history-summary-stats,
    .bethistory-sports-summary-stats,
    .bethistory-thirdparty-summary-stats,
    .feehistory-summary-stats,
    .gamemoney-summary-stats,
    .gamemoney-eggs-summary-stats,
    .member-login-log-summary-stats,
    .member-login-live-summary-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

    .inout-history-summary-stats .inout-history-stat--cancel {
        grid-column: 1 / -1
    }

        .inout-history-summary-stats .stat-value--sm,
        .bethistory-sports-summary-stats .stat-value--sm,
        .bethistory-thirdparty-summary-stats .stat-value--sm,
        .feehistory-summary-stats .stat-value--sm,
        .gamemoney-summary-stats .stat-value--sm,
        .gamemoney-eggs-summary-stats .stat-value--sm,
        .member-login-log-summary-stats .stat-value--sm,
        .member-login-live-summary-stats .stat-value--sm {
            font-size: 13.5px
        }

    .charge-actions-toolbar, .exchange-actions-toolbar {
        grid-template-columns: 1fr
    }

    .charge-filter-toolbar, .exchange-filter-toolbar {
        grid-template-columns: 1fr
    }

    .charge-page .stat-value, .exchange-page .stat-value {
        font-size: 17px
    }

    .members-summary-stats {
        gap: 8px
    }

    .members-toolbar {
        grid-template-columns: 1fr
    }

    .members-page .stat-value {
        font-size: 15px
    }

    .member-create-page .card-body {
        padding: 10px
    }

    .member-wizard-tabs .page-tab {
        font-size: 11.5px;
        padding: 7px 10px
    }

    .member-fee-tabs .page-tab {
        font-size: 11px;
        padding: 6px 8px
    }

    .add-partner-wizard-nav {
        flex-direction: column
    }

        .add-partner-wizard-nav .btn {
            width: 100%;
            justify-content: center
        }

    .add-partner-actions-cell .btn {
        display: inline-flex;
        margin: 2px 0
    }

    .add-partner-pending-table thead th:nth-child(n+4),
    .add-partner-pending-table tbody td:nth-child(n+4) {
        font-size: 11.5px
    }

    .member-complete-icon {
        font-size: 32px
    }

    .member-complete-text {
        font-size: 13.5px
    }

    .bulk-range-label {
        font-size: 11.5px
    }

    .bulk-count-label {
        font-size: 12px
    }

    .partner-class-page #classWizardTabs .page-tab {
        font-size: 11.5px;
        padding: 7px 10px
    }

    .black-bank-table .black-bank-td-memo {
        max-width: 120px
    }

    .black-bank-table .black-bank-actions-cell .btn {
        padding: 4px 7px;
        font-size: 11px
    }
}
/* ===== RISK CONTROL BOARD ===== */
.rcb {
    margin-bottom: 18px
}

.rcb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: linear-gradient(90deg,rgba(255,56,72,.08),rgba(255,170,0,.04),transparent);
    border: 1px solid rgba(255,56,72,.18);
    border-left: 4px solid var(--accent-red);
    border-radius: var(--radius)
}

    .rcb-header h2 {
        font-family: var(--font-display);
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        color: var(--accent-red);
        display: flex;
        align-items: center;
        gap: 8px
    }

        .rcb-header h2 i {
            font-size: 14.5px
        }

    .rcb-header .rcb-ts {
        font-size: 11px;
        color: var(--text-muted);
        font-family: var(--font-mono)
    }

.rcb-toggle {
    background: none;
    border: 1px solid rgba(255,56,72,.3);
    color: var(--accent-red);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: .5px
}

    .rcb-toggle:hover {
        background: rgba(255,56,72,.1)
    }

.rcb-body {
    transition: max-height .4s ease,opacity .3s ease;
    overflow: hidden
}

    .rcb-body.collapsed {
        max-height: 0 !important;
        opacity: 0;
        margin: 0;
        padding: 0
    }
/* KPI Row */
.rcb-kpi {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 8px;
    margin-bottom: 14px
}

.rcb-kpi-card {
    background: linear-gradient(170deg,rgba(10,18,30,.9),rgba(6,10,18,.95));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s
}

    .rcb-kpi-card:hover {
        border-color: rgba(0,170,255,.3);
        transform: translateY(-1px)
    }

    .rcb-kpi-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px
    }

    .rcb-kpi-card[data-tone="green"]::before {
        background: var(--gradient-green)
    }

    .rcb-kpi-card[data-tone="red"]::before {
        background: var(--gradient-red)
    }

    .rcb-kpi-card[data-tone="orange"]::before {
        background: var(--gradient-gold)
    }

    .rcb-kpi-card[data-tone="blue"]::before {
        background: var(--gradient-blue)
    }

    .rcb-kpi-card[data-tone="purple"]::before {
        background: var(--gradient-purple)
    }

.rcb-kpi-label {
    font-size: 10.5px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 4px;
    white-space: nowrap
}

.rcb-kpi-val {
    font-family: var(--font-display);
    font-size: 17.5px;
    font-weight: 700;
    line-height: 1.2
}

    .rcb-kpi-val.v-green {
        color: var(--accent-green)
    }

    .rcb-kpi-val.v-red {
        color: var(--accent-red)
    }

    .rcb-kpi-val.v-orange {
        color: var(--accent-orange)
    }

    .rcb-kpi-val.v-blue {
        color: var(--accent-cyan)
    }

    .rcb-kpi-val.v-purple {
        color: var(--accent-purple)
    }

.rcb-kpi-delta {
    font-size: 10px;
    font-family: var(--font-mono);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px
}

    .rcb-kpi-delta.up {
        color: var(--accent-green)
    }

    .rcb-kpi-delta.down {
        color: var(--accent-red)
    }

    .rcb-kpi-delta.flat {
        color: var(--text-muted)
    }
/* Risk + Action layout */
.rcb-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
    margin-bottom: 0
}
/* Partner Risk Cards */
.rcb-partners {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 8px;
    align-content: start
}

.rcb-p {
    background: linear-gradient(170deg,rgba(10,18,32,.92),rgba(6,10,18,.96));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden
}

    .rcb-p:hover {
        border-color: rgba(0,170,255,.35);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0,0,0,.3)
    }

    .rcb-p::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        border-radius: var(--radius) 0 0 var(--radius)
    }

    .rcb-p.lv-safe::before {
        background: var(--accent-green)
    }

    .rcb-p.lv-caution::before {
        background: var(--accent-blue)
    }

    .rcb-p.lv-warning::before {
        background: var(--accent-orange)
    }

    .rcb-p.lv-risk::before {
        background: var(--accent-red)
    }

    .rcb-p.lv-critical::before {
        background: #ff1030;
        box-shadow: 0 0 10px rgba(255,16,48,.4)
    }

    .rcb-p.lv-critical {
        border-color: rgba(255,56,72,.35);
        background: linear-gradient(170deg,rgba(40,8,12,.6),rgba(6,10,18,.96))
    }

.rcb-p-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
}

.rcb-p-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--accent-cyan);
    letter-spacing: .3px
}

.rcb-p-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 2px;
    letter-spacing: 1px;
    text-transform: uppercase
}

    .rcb-p-badge.b-safe {
        background: rgba(0,216,104,.15);
        color: var(--accent-green);
        border: 1px solid rgba(0,216,104,.25)
    }

    .rcb-p-badge.b-caution {
        background: rgba(0,153,255,.12);
        color: var(--accent-blue);
        border: 1px solid rgba(0,153,255,.2)
    }

    .rcb-p-badge.b-warning {
        background: rgba(255,170,0,.15);
        color: var(--accent-orange);
        border: 1px solid rgba(255,170,0,.25)
    }

    .rcb-p-badge.b-risk {
        background: rgba(255,56,72,.15);
        color: var(--accent-red);
        border: 1px solid rgba(255,56,72,.25)
    }

    .rcb-p-badge.b-critical {
        background: rgba(255,16,48,.25);
        color: #ff6080;
        border: 1px solid rgba(255,16,48,.4);
        animation: critPulse 2.5s ease infinite
    }

@keyframes critPulse {
    0%,100% {
        box-shadow: 0 0 4px rgba(255,16,48,.3)
    }

    50% {
        box-shadow: 0 0 10px rgba(255,16,48,.5)
    }
}

.rcb-p-score {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    margin-left: 6px
}

.rcb-p-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    margin-bottom: 8px
}

.rcb-p-m {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    padding: 1px 0
}

    .rcb-p-m .ml {
        color: var(--text-muted)
    }

    .rcb-p-m .mv {
        font-family: var(--font-mono);
        font-weight: 600;
        font-size: 11.5px
    }

.rcb-p-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.rcb-p-tag {
    font-size: 9.5px;
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: help
}

    .rcb-p-tag.t-red {
        background: rgba(255,56,72,.12);
        color: var(--accent-red);
        border: 1px solid rgba(255,56,72,.2)
    }

    .rcb-p-tag.t-orange {
        background: rgba(255,170,0,.1);
        color: var(--accent-orange);
        border: 1px solid rgba(255,170,0,.2)
    }

    .rcb-p-tag.t-blue {
        background: rgba(0,153,255,.1);
        color: var(--accent-blue);
        border: 1px solid rgba(0,153,255,.15)
    }
/* Immediate Action */
.rcb-action {
    background: linear-gradient(180deg,rgba(255,16,48,.06),rgba(10,15,25,.95));
    border: 1px solid rgba(255,56,72,.2);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden
}

.rcb-action-hdr {
    padding: 10px 14px;
    background: rgba(255,16,48,.08);
    border-bottom: 1px solid rgba(255,56,72,.15);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-red);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase
}

    .rcb-action-hdr i {
        font-size: 13.5px
    }

.rcb-action-list {
    padding: 8px
}

.rcb-action-item {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    overflow: hidden
}

    .rcb-action-item:last-child {
        margin-bottom: 0
    }

    .rcb-action-item:hover {
        border-color: rgba(255,56,72,.35);
        background: rgba(255,56,72,.04)
    }

    .rcb-action-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px
    }

    .rcb-action-item.ai-critical::before {
        background: var(--accent-red)
    }

    .rcb-action-item.ai-risk::before {
        background: var(--accent-orange)
    }

    .rcb-action-item.ai-warning::before {
        background: var(--accent-orange);
        opacity: .6
    }

.rcb-ai-rank {
    font-family: var(--font-display);
    font-size: 17.5px;
    font-weight: 800;
    color: var(--accent-red);
    opacity: .5;
    position: absolute;
    right: 10px;
    top: 6px
}

.rcb-ai-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text-primary);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px
}

.rcb-ai-reason {
    font-size: 11.5px;
    color: var(--accent-orange);
    margin-bottom: 5px;
    line-height: 1.4
}

.rcb-ai-vals {
    display: flex;
    gap: 12px;
    font-size: 11px;
    font-family: var(--font-mono)
}

    .rcb-ai-vals span {
        color: var(--text-muted)
    }

    .rcb-ai-vals b {
        margin-left: 3px
    }
/* Filter Bar */
.rcb-filter-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 12px;
    background: rgba(0,153,255,.06);
    border: 1px solid rgba(0,153,255,.2);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    color: var(--accent-blue)
}

    .rcb-filter-bar.show {
        display: flex
    }

    .rcb-filter-bar .rcb-fb-label {
        font-weight: 700
    }

    .rcb-filter-bar .rcb-fb-target {
        font-family: var(--font-mono);
        color: var(--accent-cyan)
    }

    .rcb-filter-bar .rcb-fb-clear {
        margin-left: auto;
        background: none;
        border: 1px solid rgba(0,153,255,.3);
        color: var(--accent-blue);
        padding: 2px 8px;
        border-radius: 2px;
        cursor: pointer;
        font-size: 11.5px;
        font-weight: 600
    }

        .rcb-filter-bar .rcb-fb-clear:hover {
            background: rgba(0,153,255,.1)
        }
/* Light mode */
html.light-mode .rcb-header {
    background: linear-gradient(90deg,rgba(220,38,38,.06),rgba(234,88,12,.03),transparent);
    border-color: rgba(220,38,38,.15)
}

html.light-mode .rcb-kpi-card {
    background: linear-gradient(170deg,#ffffff,#fafbfc)
}

html.light-mode .rcb-p {
    background: linear-gradient(170deg,#ffffff,#fafbfc)
}

    html.light-mode .rcb-p.lv-critical {
        background: linear-gradient(170deg,rgba(254,226,226,.5),#ffffff)
    }

html.light-mode .rcb-action {
    background: linear-gradient(180deg,rgba(254,226,226,.3),#ffffff);
    border-color: rgba(220,38,38,.15)
}

html.light-mode .rcb-action-hdr {
    background: rgba(220,38,38,.05)
}

html.light-mode .rcb-filter-bar {
    background: rgba(37,99,235,.04);
    border-color: rgba(37,99,235,.15)
}

@media(max-width:1200px) {
    .rcb-kpi {
        grid-template-columns: repeat(4,1fr)
    }

    .rcb-main {
        grid-template-columns: 1fr
    }

    .rcb-partners {
        grid-template-columns: repeat(auto-fill,minmax(220px,1fr))
    }
}

@media(max-width:768px) {
    .rcb-kpi {
        grid-template-columns: repeat(2,1fr)
    }

    .rcb-partners {
        grid-template-columns: 1fr
    }
}
/* RISK CONFIG PAGE */
.rcfg-section {
    background: linear-gradient(170deg,var(--bg-card),var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden
}

.rcfg-section-hdr {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .5px
}

    .rcfg-section-hdr i {
        font-size: 17.5px
    }

.rcfg-section-body {
    padding: 20px
}

.rcfg-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0,170,255,.06)
}

    .rcfg-row:last-child {
        border-bottom: none
    }

.rcfg-label {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4
}

.rcfg-desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
    line-height: 1.4
}

.rcfg-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px
}

.rcfg-input {
    background: rgba(0,12,28,.85);
    border: 2px solid var(--border);
    color: var(--accent-cyan);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 17.5px;
    font-family: var(--font-mono);
    font-weight: 700;
    outline: none;
    transition: all .2s;
    text-align: right;
    width: 160px
}

    .rcfg-input:focus {
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 3px rgba(0,130,255,.2)
    }

.rcfg-unit {
    font-size: 14.5px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    min-width: 30px
}

.rcfg-info {
    padding: 14px 20px;
    background: rgba(0,153,255,.06);
    border: 1px solid rgba(0,153,255,.15);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    font-size: 14.5px;
    color: var(--accent-blue);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6
}

    .rcfg-info i {
        font-size: 17.5px;
        margin-top: 2px;
        flex-shrink: 0
    }

.rcfg-warn {
    background: rgba(255,170,0,.06);
    border-color: rgba(255,170,0,.2);
    color: var(--accent-orange)
}

.rcfg-btn-area {
    display: flex;
    gap: 10px;
    padding: 20px;
    justify-content: center
}

.rcfg-btn {
    padding: 12px 32px;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: var(--radius);
    cursor: pointer;
    border: 2px solid;
    transition: all .2s;
    font-family: var(--font-body);
    letter-spacing: .5px
}

.rcfg-btn-save {
    background: linear-gradient(180deg,rgba(0,160,60,.8),rgba(0,120,40,.9));
    border-color: rgba(0,232,120,.5);
    color: #fff
}

    .rcfg-btn-save:hover {
        box-shadow: 0 0 16px rgba(0,232,120,.3);
        transform: translateY(-1px)
    }

.rcfg-btn-reset {
    background: rgba(0,25,55,.6);
    border-color: var(--border);
    color: var(--text-secondary)
}

    .rcfg-btn-reset:hover {
        border-color: var(--accent-orange);
        color: var(--accent-orange)
    }

.rcfg-lv-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 8px;
    margin-top: 12px
}

.rcfg-lv {
    text-align: center;
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border)
}

.rcfg-lv-name {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 4px
}

.rcfg-lv-range {
    font-size: 16.5px;
    font-family: var(--font-mono);
    font-weight: 700
}

html.light-mode .rcfg-input {
    background: #f4f6f8;
    border-color: #d1d5db;
    color: #1e40af
}

html.light-mode .rcfg-section {
    background: #ffffff
}

@media(max-width:1200px) {
    .rcfg-row {
        grid-template-columns: 1fr;
        gap: 8px
    }
}