:root {
    --bg: #0c0c18;
    --surf: #161628;
    --surf2: #1e1e38;
    --acc: #7c5cbf;
    --acc2: #a78bfa;
    --acc3: #c4b5fd;
    --ok: #22c55e;
    --ng: #ef4444;
    --txt: #e2e8f0;
    --muted: #94a3b8;
    --border: #2a2a48;
}

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

body {
    background: var(--bg);
    color: var(--txt);
    font-family: 'Segoe UI', 'Hiragino Sans', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center
}

/* Header */
header {
    width: 100%;
    background: var(--surf);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.logo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--acc2)
}

.rate {
    font-size: .85rem;
    color: var(--muted)
}

.rate b {
    color: var(--acc2)
}

main {
    width: 100%;
    max-width: 600px;
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

/* Stats bar */
.stats {
    display: flex;
    background: var(--surf);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden
}

.stat {
    flex: 1;
    padding: 12px 8px;
    text-align: center;
    border-right: 1px solid var(--border)
}

.stat:last-child {
    border-right: none
}

.stat-v {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--acc2)
}

.stat-l {
    font-size: .7rem;
    color: var(--muted);
    margin-top: 2px
}

/* Mode tabs */
.tabs {
    display: flex;
    gap: 6px;
    background: var(--surf);
    border-radius: 12px;
    padding: 6px;
    border: 1px solid var(--border)
}

.tab {
    flex: 1;
    padding: 10px 6px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: .85rem;
    transition: all .2s
}

.tab.on {
    background: var(--acc);
    color: #fff;
    font-weight: 700
}

/* Question card */
.qcard {
    background: var(--surf);
    border-radius: 16px;
    padding: 22px;
    border: 1px solid var(--border)
}

.prog-hint {
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: 4px
}

.prog-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--acc2);
    margin-bottom: 18px
}

/* Slots */
.slots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px
}

.slot-w {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.slot-n {
    font-size: .7rem;
    color: var(--muted)
}

.slot {
    width: 68px;
    height: 68px;
    border-radius: 12px;
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    user-select: none
}

.slot.revealed {
    background: var(--acc);
    border: 2px solid var(--acc);
    color: #fff
}

.slot.filled {
    background: var(--surf2);
    border: 2px solid var(--acc2);
    color: var(--acc2)
}

.slot.sel-slot {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px #fbbf2430
}

.slot.ok-slot {
    background: #14532d;
    border: 2px solid var(--ok);
    color: var(--ok)
}

.slot.ng-slot {
    background: #7f1d1d;
    border: 2px solid var(--ng);
    color: var(--ng);
    font-size: .65rem;
    line-height: 1.2;
    text-align: center;
    padding: 4px
}

.slot.empty {
    color: var(--border);
    font-size: 1.4rem
}

.arr {
    color: var(--border);
    font-size: 1rem;
    padding-bottom: 18px
}

.hint-txt {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.6
}

/* Cards */
.cards-wrap {
    background: var(--surf);
    border-radius: 16px;
    padding: 18px;
    border: 1px solid var(--border)
}

.cards-lbl {
    font-size: .75rem;
    color: var(--muted);
    text-align: center;
    margin-bottom: 12px
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center
}

.card {
    width: 78px;
    height: 78px;
    border-radius: 12px;
    background: var(--surf2);
    border: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
    gap: 4px;
    user-select: none
}

.card:hover {
    border-color: var(--acc2);
    transform: translateY(-2px)
}

.card.sel-card {
    border-color: #fbbf24;
    box-shadow: 0 0 0 3px #fbbf2430;
    background: #1c1600
}

.card.used {
    opacity: .3;
    pointer-events: none
}

.card-ico {
    font-size: 1rem
}

.card-nm {
    font-size: 1rem;
    font-weight: 700
}

/* Buttons */
.btns {
    display: flex;
    gap: 8px
}

.btn {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: 12px;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.btn-p {
    background: var(--acc);
    color: #fff
}

.btn-p:hover {
    background: #6b4aae
}

.btn-p:disabled {
    opacity: .35;
    cursor: not-allowed
}

.btn-s {
    background: var(--surf);
    color: var(--muted);
    border: 1px solid var(--border)
}

.btn-s:hover {
    border-color: var(--acc2);
    color: var(--acc2)
}

.btn-full {
    width: 100%
}

/* Result banner */
.banner {
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    display: none
}

.banner.show {
    display: block
}

.banner.ok {
    background: #14532d;
    color: var(--ok)
}

.banner.ng {
    background: #7f1d1d;
    color: var(--ng)
}

/* Listen mode */
.play-big {
    width: 100%;
    padding: 22px;
    border-radius: 16px;
    background: var(--surf2);
    border: 2px solid var(--border);
    color: var(--acc2);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.play-big:hover {
    border-color: var(--acc2)
}

.play-big:disabled {
    opacity: .5;
    cursor: not-allowed
}

.choices {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.choice {
    padding: 16px;
    border-radius: 12px;
    background: var(--surf2);
    border: 2px solid var(--border);
    color: var(--txt);
    font-size: .95rem;
    cursor: pointer;
    transition: all .2s;
    text-align: left
}

.choice:hover:not(:disabled) {
    border-color: var(--acc2)
}

.choice.ok-c {
    border-color: var(--ok);
    background: #14532d;
    color: var(--ok)
}

.choice.ng-c {
    border-color: var(--ng);
    background: #7f1d1d;
    color: var(--ng)
}

.choice:disabled {
    pointer-events: none
}

/* Progress info */
.prog-info {
    font-size: .8rem;
    color: var(--muted);
    background: var(--surf);
    border-radius: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    line-height: 1.8
}

.prog-info b {
    color: var(--acc3)
}

/* Listening mode */
.listen-panel {
    background: var(--surf);
    border-radius: 16px;
    padding: 18px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px
}

.listen-section {
}

.listen-label {
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: 8px
}

.listen-seg {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.seg-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surf2);
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s
}

.seg-btn.on {
    background: var(--acc);
    border-color: var(--acc);
    color: #fff;
    font-weight: 700
}

.seg-btn:hover:not(.on) {
    border-color: var(--acc2);
    color: var(--acc2)
}

.key-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px
}

.key-btn {
    padding: 8px 4px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surf2);
    color: var(--muted);
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s;
    text-align: center
}

.key-btn.sharp {
    background: #111128;
    font-size: .78rem
}

.key-btn.on {
    background: var(--acc);
    border-color: var(--acc);
    color: #fff;
    font-weight: 700
}

.key-btn:hover:not(.on) {
    border-color: var(--acc2);
    color: var(--acc2)
}

.chord-display {
    background: var(--surf);
    border-radius: 16px;
    padding: 18px;
    border: 1px solid var(--border)
}

.chord-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap
}

.chord-badge {
    background: var(--surf2);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    min-width: 72px;
    transition: all .25s
}

.chord-badge.active {
    border-color: var(--acc2);
    background: var(--acc);
    box-shadow: 0 0 12px #7c5cbf55
}

.cb-num {
    font-size: .65rem;
    color: var(--muted);
    margin-bottom: 4px
}

.chord-badge.active .cb-num {
    color: #c4b5fd
}

.cb-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--acc2)
}

.chord-badge.active .cb-name {
    color: #fff
}

.cb-notes {
    font-size: .65rem;
    color: var(--muted);
    margin-top: 4px;
    letter-spacing: .03em
}

.chord-badge.active .cb-notes {
    color: #c4b5fd
}

.cb-arrow {
    color: var(--border);
    font-size: 1.2rem
}