/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:         #0a0a14;
    --bg2:        #12122a;
    --bg3:        #1c1c3a;
    --surface:    #1e1e3f;
    --border:     #2e2e5e;
    --text:       #e8e8f8;
    --text-muted: #888aaa;
    --accent:     #a78bfa;
    --accent2:    #7c3aed;
    --gold:       #ffd700;
    --green:      #1dd1a1;
    --red:        #e17055;
    --radius:     10px;
    --radius-sm:  6px;
}

html { font-size: 16px; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea { width: 100%; padding: .55rem .75rem; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: .95rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; color: var(--text-muted); margin-bottom: .75rem; }
label.checkbox-label { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
label.checkbox-label input { width: auto; }
textarea { resize: vertical; min-height: 80px; }
code { background: var(--bg3); padding: .15em .4em; border-radius: 4px; font-size: .85em; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: .9rem; font-weight: 600; cursor: pointer; transition: .15s; background: var(--bg3); color: var(--text); }
.btn:hover { filter: brightness(1.15); }
.btn--primary  { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.btn--outline  { background: transparent; border-color: var(--border); color: var(--text); }
.btn--danger   { background: transparent; border-color: var(--red); color: var(--red); }
.btn--sm       { padding: .35rem .8rem; font-size: .82rem; }
.btn--full     { width: 100%; }
.btn:disabled  { opacity: .5; cursor: not-allowed; }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.alert--error   { background: rgba(225,112,85,.15); border: 1px solid var(--red);   color: var(--red); }
.alert--success { background: rgba(29,209,161,.12); border: 1px solid var(--green); color: var(--green); }
.hint { color: var(--text-muted); font-size: .9rem; padding: .5rem 0; }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: .15em .55em; border-radius: 99px; font-size: .72rem; font-weight: 700; background: var(--bg3); color: var(--text-muted); }
.badge--live { background: #c0392b; color: #fff; animation: pulse 1.5s infinite; }
.badge--paid { background: var(--gold); color: #111; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }

/* ── Site Header ──────────────────────────────────────────────────────────── */
.site-header, .app-header {
    display: flex; align-items: center; gap: 1rem;
    padding: .75rem 1.25rem;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.site-title, .app-title { font-weight: 700; font-size: 1.05rem; flex: 1; }
.app-back { font-size: .85rem; color: var(--text-muted); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.site-nav a { color: var(--text-muted); }
.site-nav a:hover { color: var(--text); }
.nav-admin { color: var(--accent) !important; font-weight: 600; }

/* ── Verify banner ────────────────────────────────────────────────────────── */
.verify-banner { background: rgba(167,139,250,.15); border-bottom: 1px solid rgba(167,139,250,.4); color: var(--accent); padding: .65rem 1.25rem; font-size: .88rem; display: flex; align-items: center; gap: .75rem; }
.verify-banner a { color: var(--accent); font-weight: 600; text-decoration: underline; }
.verify-status { padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: .9rem; }
.verify-status--ok      { background: rgba(29,209,161,.1);  color: var(--green); }
.verify-status--pending { background: rgba(167,139,250,.1); color: var(--accent); }

/* ── Auth page ────────────────────────────────────────────────────────────── */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 400px; }
.auth-logo { font-size: 2.5rem; text-align: center; margin-bottom: .75rem; }
.auth-card h1 { text-align: center; margin-bottom: 1.25rem; font-size: 1.4rem; }
.auth-error { background: rgba(225,112,85,.15); border: 1px solid var(--red); color: var(--red); padding: .6rem .9rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .9rem; }
.auth-switch { text-align: center; margin-top: 1rem; font-size: .9rem; color: var(--text-muted); }

/* ── Home / Event Grid ────────────────────────────────────────────────────── */
.home-page { display: flex; flex-direction: column; min-height: 100vh; }
.home-main { flex: 1; max-width: 900px; margin: 0 auto; padding: 2rem 1rem; width: 100%; }
.home-heading { font-size: 1.4rem; margin-bottom: 1.5rem; }
.home-empty { color: var(--text-muted); }
.event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1rem; }
.event-card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; transition: .2s; position: relative; color: var(--text); }
.event-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.event-card--active { border-color: var(--accent2); }
.event-card__badge { position: absolute; top: .75rem; right: .75rem; }
.event-card__name { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.event-card__meta { font-size: .82rem; color: var(--text-muted); }

/* ── Tab bar ──────────────────────────────────────────────────────────────── */
.tab-bar { display: flex; background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 1rem; gap: .25rem; }
.tab-btn { background: none; border: none; color: var(--text-muted); padding: .75rem 1rem; font-size: .9rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: .15s; }
.tab-btn--active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-bar--inline { background: transparent; border-bottom: 1px solid var(--border); padding: 0; margin-bottom: .75rem; }

/* ── App main ─────────────────────────────────────────────────────────────── */
.app-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.app-main { flex: 1; overflow-y: auto; }
.tab-section { display: none; padding: 1rem; }
.tab-section--active { display: block; }

/* ── Acts grid ────────────────────────────────────────────────────────────── */
.acts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr)); gap: .75rem; }
.act-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: .2s; position: relative; }
.act-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.act-card--current { border-color: var(--gold); box-shadow: 0 0 12px rgba(255,215,0,.3); }
.act-card__img { height: 90px; background: var(--bg3) center/cover no-repeat; position: relative; }
.act-card__info { padding: .5rem .6rem; }
.act-card__country { display: block; font-size: .82rem; font-weight: 700; }
.act-card__artist  { display: block; font-size: .75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-badge { position: absolute; top: .3rem; left: .3rem; background: var(--gold); color: #111; font-size: .65rem; font-weight: 800; padding: .15em .45em; border-radius: 4px; }
.act-pts-badge { position: absolute; bottom: .3rem; right: .3rem; color: #fff; font-size: .75rem; font-weight: 800; padding: .15em .45em; border-radius: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* ── Drawer ───────────────────────────────────────────────────────────────── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .2s; }
.overlay--visible { opacity: 1; pointer-events: all; }
.act-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px,100vw); background: var(--bg2); z-index: 201; transform: translateX(100%); transition: transform .25s; overflow-y: auto; display: flex; flex-direction: column; }
.act-drawer--open { transform: none; }
.drawer-close { position: absolute; top: .75rem; right: .75rem; background: rgba(0,0,0,.5); border: none; color: #fff; font-size: 1rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: center; }
.drawer-hero { height: 240px; background: var(--bg3) center/cover no-repeat; flex-shrink: 0; }
.drawer-body { padding: 1.25rem; flex: 1; }
.drawer-country { font-size: 1.3rem; font-weight: 800; margin-bottom: .25rem; }
.drawer-artist  { font-size: 1rem; font-weight: 600; color: var(--accent); margin-bottom: .15rem; }
.drawer-song    { font-size: .9rem; color: var(--text-muted); font-style: italic; margin-bottom: .75rem; }
.drawer-desc    { font-size: .85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1rem; }
.pts-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem; margin-bottom: .5rem; }
.pts-btn { background: var(--bg3); border: 2px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 1rem; font-weight: 800; padding: .55rem; cursor: pointer; transition: .15s; }
.pts-btn:hover { border-color: var(--accent); }
.pts-btn--active { color: #fff; }
.pts-clear { width: 100%; padding: .45rem; font-size: .85rem; font-weight: 600; background: transparent; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
.pts-clear.pts-btn--active { border-color: var(--accent); color: var(--accent); }

/* ── Ranking rows ─────────────────────────────────────────────────────────── */
.ranking-list, #tippingList { max-width: 680px; margin: 0 auto; }
.rank-row { display: flex; align-items: center; gap: .75rem; padding: .65rem .5rem; border-bottom: 1px solid var(--border); cursor: default; }
.rank-row--expandable { cursor: pointer; }
.rank-row--expandable:hover { background: var(--bg3); border-radius: var(--radius-sm); }
.rank-pos  { font-size: .85rem; font-weight: 700; color: var(--text-muted); width: 24px; text-align: right; flex-shrink: 0; }
.rank-img  { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; background: var(--bg3); flex-shrink: 0; }
.rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rank-country { font-weight: 700; font-size: .92rem; }
.rank-artist  { font-size: .8rem; color: var(--text-muted); }
.rank-pts  { font-weight: 700; font-size: .95rem; color: var(--accent); white-space: nowrap; }
.rank-chevron { font-size: .7rem; color: var(--text-muted); flex-shrink: 0; }

/* ── Tipping detail panel ─────────────────────────────────────────────────── */
.detail-panel { display: none; padding: 0 .5rem; }
.detail-panel--open { display: block; }
.detail-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; border-radius: var(--radius-sm); margin-bottom: 2px; }
.detail-row--hit { background: rgba(29,209,161,.08); }
.detail-row--win { background: rgba(255,215,0,.1); }
.detail-rank { font-size: .8rem; color: var(--text-muted); width: 22px; text-align: right; flex-shrink: 0; }
.detail-img  { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: var(--bg3); flex-shrink: 0; }
.detail-info { flex: 1; min-width: 0; }
.detail-country   { font-size: .82rem; font-weight: 600; display: block; }
.detail-zone-row  { display: flex; align-items: center; gap: .3rem; margin: .15rem 0; }
.detail-user-pts  { font-size: .72rem; font-weight: 800; padding: .1em .4em; border-radius: 4px; color: #fff; }
.detail-arrow     { font-size: .72rem; color: var(--text-muted); }
.detail-zone-label { font-size: .72rem; color: var(--text-muted); }
.detail-official  { font-size: .72rem; color: var(--text-muted); display: block; }
.detail-score { font-weight: 800; font-size: .88rem; flex-shrink: 0; }
.detail-score--win  { color: var(--gold); }
.detail-score--hit  { color: var(--green); }
.detail-score--miss { color: var(--text-muted); }

/* ── Inner pages ──────────────────────────────────────────────────────────── */
.inner-page { display: flex; flex-direction: column; min-height: 100vh; }
.inner-main { flex: 1; max-width: 860px; margin: 0 auto; padding: 1.5rem 1rem; width: 100%; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.card h2 { font-size: 1.05rem; margin-bottom: 1rem; }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.card-header h2 { margin-bottom: 0; }
.card-header-actions { display: flex; gap: .5rem; }
.inline-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.inline-form select, .inline-form input { flex: 1; min-width: 0; }

/* ── Admin table ──────────────────────────────────────────────────────────── */
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.admin-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.admin-table td { padding: .5rem .5rem; border-bottom: 1px solid var(--border); }
.admin-table__actions { display: flex; gap: .4rem; align-items: center; }

/* ── Groups ───────────────────────────────────────────────────────────────── */
.group-row { display: flex; align-items: center; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--border); }
.group-info { flex: 1; min-width: 0; }
.group-info strong { display: block; font-size: .95rem; }
.group-meta { font-size: .8rem; color: var(--text-muted); }
.group-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.member-list { list-style: none; }
.member-item { display: flex; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.member-name { flex: 1; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 300; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay--visible { opacity: 1; pointer-events: all; }
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-60%); width: min(520px,calc(100vw - 2rem)); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; z-index: 301; opacity: 0; pointer-events: none; transition: .2s; max-height: calc(100vh - 4rem); overflow-y: auto; }
.modal--open { opacity: 1; pointer-events: all; transform: translate(-50%,-50%); }
.modal h2 { margin-bottom: 1.25rem; font-size: 1.1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }