:root {
    --bg: #fff;
    --fg: #090909;
    --muted: #595959;
    --panel: #fff;
    --danger: #b00020;
    color-scheme: light
}

[data-theme=dark] {
    --bg: #101010;
    --fg: #f5f5f5;
    --muted: #aaa;
    --panel: #181818;
    --danger: #ff6b7d;
    color-scheme: dark
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.45 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace
}

button, input, dialog {
    font: inherit;
    color: inherit;
    background: var(--panel)
}

button, input {
    border: 2px solid var(--fg);
    border-radius: 0;
    padding: .55rem .75rem
}

button {
    cursor: pointer;
    margin-left: .4rem
}

button:hover, .primary {
    background: var(--fg);
    color: var(--bg)
}

button:disabled, input:disabled {
    opacity: .45
}

header {
    min-height: 58px;
    border-bottom: 3px solid var(--fg);
    padding: .75rem max(1rem, calc((100vw - 860px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between
}

nav, #account {
    display: flex;
    align-items: center;
    gap: .3rem
}

main {
    width: min(860px, calc(100% - 2rem));
    margin: 2.5rem auto
}

.broadcast {
    border: 3px solid var(--fg);
    padding: 1rem;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns:1fr minmax(240px, 420px);
    align-items: center;
    gap: 1rem;
    box-shadow: 8px 8px 0 var(--fg)
}

.player {
    display: contents
}

.player audio {
    width: 100%
}

.player p {
    grid-column: 1/-1;
    color: var(--muted);
    margin: 0
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    background: #d00;
    margin-right: .5rem
}
.status-dot.online {
    background: #19c463;
    box-shadow: 0 0 8px #19c463;
}

/* --- Reactions --- */
.reactions {
    border: 3px solid var(--fg);
    padding: .75rem 1rem;
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
    background: var(--panel);
    box-shadow: 8px 8px 0 var(--fg)
}

.reactions button {
    font-size: .95rem;
    padding: .45rem .65rem;
    border-width: 2px;
    background: var(--panel);
    transition: transform .1s ease, box-shadow .1s ease;
}

.reactions button img {
    display: block
}

.reactions button:hover {
    background: var(--fg);
    color: var(--bg);
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.reactions button:active {
    transform: scale(.95);
}

#reactions-toggle {
    font-size: .8rem;
    padding: .35rem .6rem;
    opacity: .7;
    margin-left: auto;
    align-self: flex-start;
}

#reactions-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}

.reaction-float {
    position: absolute;
    font-size: 2rem;
    animation: floatUp 2.5s ease-out forwards;
    opacity: 0;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(.6); opacity: 1; }
    70% { opacity: .9; }
    100% { transform: translateY(-320px) scale(1.2); opacity: 0; }
}

.chat-panel {
    height: min(650px, calc(100vh - 190px));
    min-height: 440px;
    border: 3px solid var(--fg);
    display: grid;
    grid-template-rows:auto 1fr auto auto;
    background: var(--panel);
    box-shadow: 8px 8px 0 var(--fg)
}

.chat-title {
    border-bottom: 2px solid var(--fg);
    padding: .8rem 1rem;
    display: flex;
    justify-content: space-between
}

.chat-title span {
    color: var(--muted)
}

#messages {
    overflow: auto;
    padding: 0 1rem
}

article {
    padding: .8rem 0;
    border-bottom: 1px solid var(--fg)
}

.avatar {
    display: none
}

.meta {
    display: flex;
    align-items: center;
    gap: .7rem
}

.meta time {
    color: var(--muted);
    font-size: .8rem
}

.meta .ban {
    margin-left: auto;
    color: var(--danger);
    padding: .2rem .45rem
}

article p {
    margin: .35rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

#message-form {
    border-top: 2px solid var(--fg);
    padding: .75rem;
    display: flex;
    align-items: center;
    gap: .4rem
}

#message-form:before {
    content: ">"
}

#message-form input {
    flex: 1;
    border-width: 0 0 2px;
    padding: .5rem
}

#chat-help {
    padding: 0 .75rem .65rem;
    color: var(--muted);
    margin: 0
}

#load-more-container button {
    width: auto;
    font-size: .85rem;
    padding: .4rem 1rem;
    opacity: .7;
    transition: opacity .2s ease;
}

#load-more-container button:hover:not(:disabled) {
    opacity: 1;
}

dialog {
    width: min(420px, calc(100% - 2rem));
    border: 3px solid var(--fg);
    border-radius: 0;
    padding: 1.2rem;
    box-shadow: 8px 8px 0 var(--fg)
}

dialog::backdrop {
    background: #7778
}

dialog form {
    display: grid;
    gap: 1rem
}

.close {
    position: absolute;
    right: 1rem;
    top: 1rem
}

label {
    display: grid;
    gap: .3rem
}

.error {
    color: var(--danger);
    margin: 0
}

@media (max-width: 650px) {
    header {
        align-items: flex-start
    }

    nav {
        align-items: flex-end;
        flex-direction: column
    }

    .broadcast {
        grid-template-columns:1fr
    }

    main {
        margin: 1rem auto
    }

    .chat-panel {
        height: 65vh;
        box-shadow: 4px 4px 0 var(--fg)
    }
}
/* --- Sandbox (dev playground) --- */
.sandbox {
    border: 3px solid var(--fg);
    padding: 0;
    margin-bottom: 1rem;
    background: var(--panel);
    box-shadow: 8px 8px 0 var(--fg)
}

.sandbox-tabs {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: .8rem 1rem;
    border-bottom: 2px solid var(--fg);
    background: var(--panel)
}

.sandbox-tab {
    flex: 0 0 auto;
    margin-left: 0;
    display: flex;
    align-items: baseline;
    gap: .4rem;
    white-space: nowrap
}

.sandbox-tab-version {
    font-size: .75em;
    opacity: .6
}

.sandbox-tab.active {
    background: var(--fg);
    color: var(--bg)
}

.sandbox-tab.active .sandbox-tab-version {
    opacity: .8
}

.sandbox-status {
    min-height: 1.2em;
    margin: .5rem 1rem 0;
    color: var(--muted);
    font-size: .9em
}

.sandbox-scores {
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--fg)
}

.sandbox-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem
}

.sandbox-stage {
    min-height: 320px;
    max-height: 60vh;
    overflow: auto;
    padding: 1rem
}

.sandbox-error {
    color: var(--danger)
}

.sandbox-scores ol {
    margin: .2rem 0 0;
    padding-left: 1.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 .8rem
}

.sandbox-scores li.you {
    font-weight: bold
}

.sandbox-scores .empty {
    color: var(--muted)
}

/* --- Track Requests --- */
.tracks-panel {
    border: 3px solid var(--fg);
    padding: 0;
    margin-bottom: 1rem;
    background: var(--panel);
    box-shadow: 8px 8px 0 var(--fg)
}

.tracks-toggle {
    width: 100%;
    text-align: left;
    border: none;
    border-top: 2px solid var(--fg);
    border-left: 3px solid var(--fg);
    padding: .65rem 1rem;
    margin: -3px 0 -3px -3px;
    font-weight: bold;
    font-size: .9rem;
}

.tracks-toggle.collapsed {
    border-bottom: 2px solid var(--fg);
}

#tracks-content {
    padding: .5rem 1rem .65rem;
    border-top: 2px solid var(--fg);
}

.tracks-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .4rem
}

#tracks-count {
    color: var(--muted);
    font-size: .8rem
}

#track-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: .35rem;
    margin-bottom: .4rem
}

#track-form input {
    border-width: 0 0 2px;
    padding: .35rem .4rem;
    font-size: .85rem
}

#track-form button[type="submit"] {
    padding: .35rem .6rem;
    font-size: .85rem;
    align-self: end;
}

#tracks-help {
    color: var(--muted);
    font-size: .75rem;
    margin: 0 0 .3rem
}

#tracks-list {
    max-height: 260px;
    min-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-top: 2px solid var(--fg);
    padding-top: .35rem
}

.track-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .6rem;
    align-items: start;
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--fg);
    font-size: .85rem
}

.track-item:last-child {
    border-bottom: none;
}

.track-main {
    min-width: 0;
}

.track-title-row {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .1rem;
}

.track-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-artist {
    color: var(--muted);
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-requester {
    color: var(--muted);
    font-size: .75rem;
}

.track-link a {
    color: var(--fg);
    text-decoration: underline;
    word-break: break-all;
    font-size: .75rem;
}

.track-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
}

.track-like-btn {
    font-size: .75rem;
    padding: .15rem .4rem;
    border-width: 1px;
    opacity: .65;
    min-width: 3.2rem;
    text-align: center;
}

.track-like-btn:hover {
    opacity: 1;
}

.track-like-btn.liked {
    opacity: 1;
    background: var(--fg);
    color: var(--bg)
}

.track-delete-btn {
    font-size: .75rem;
    padding: .15rem .35rem;
    border-color: var(--danger);
    color: var(--danger);
    opacity: .6;
    line-height: 1;
}

.track-delete-btn:hover {
    opacity: 1;
    background: var(--danger);
    color: var(--bg);
}

.track-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: .35rem;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: .85rem;
    opacity: .7;
}

.track-copy-btn:hover {
    opacity: 1;
    color: var(--fg);
}

/* --- Timetable / Gigs --- */
.timetable-panel {
    border: 3px solid var(--fg);
    padding: 0;
    margin-bottom: 1rem;
    background: var(--panel);
    box-shadow: 8px 8px 0 var(--fg)
}

.timetable-toggle {
    width: 100%;
    text-align: left;
    border: none;
    border-top: 2px solid var(--fg);
    border-left: 3px solid var(--fg);
    padding: .65rem 1rem;
    margin: -3px 0 -3px -3px;
    font-weight: bold;
    font-size: .9rem;
}

.timetable-toggle.collapsed {
    border-bottom: 2px solid var(--fg);
}

#timetable-content {
    padding: .5rem 1rem .65rem;
    border-top: 2px solid var(--fg);
}

.timetable-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .4rem
}

#gigs-count {
    color: var(--muted);
    font-size: .8rem
}

#gigs-help {
    color: var(--muted);
    font-size: .75rem;
    margin: 0 0 .3rem
}

#gigs-list {
    max-height: 340px;
    min-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-top: 2px solid var(--fg);
    padding-top: .35rem
}

.gig-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem .6rem;
    align-items: start;
    padding: .45rem .4rem;
    border-bottom: 1px solid var(--fg);
    font-size: .85rem
}

.gig-item:last-child {
    border-bottom: none;
}

.gig-main {
    min-width: 0;
}

.gig-title-row {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .15rem;
}

.gig-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gig-genre {
    color: var(--muted);
    font-size: .75rem;
    padding: .05rem .35rem;
    border: 1px solid var(--fg);
    white-space: nowrap;
}

.gig-time {
    font-weight: bold;
    margin-bottom: .15rem;
}

.gig-description {
    color: var(--muted);
    font-size: .8rem;
    margin-bottom: .15rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gig-meta {
    color: var(--muted);
    font-size: .75rem;
}

.gig-delete-btn {
    font-size: .75rem;
    padding: .15rem .35rem;
    border-color: var(--danger);
    color: var(--danger);
    opacity: .6;
    line-height: 1;
}

.gig-delete-btn:hover {
    opacity: 1;
    background: var(--danger);
    color: var(--bg);
}

/* Gig dialog */
#gig-dialog form {
    display: grid;
    gap: .8rem;
}

#gig-dialog label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

#gig-dialog input,
#gig-dialog textarea {
    border-width: 0 0 2px;
    padding: .5rem;
}

#gig-dialog textarea {
    resize: vertical;
    min-height: 60px;
    max-height: 140px;
}

.gig-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
}

.gig-datetime-row label {
    font-size: .8rem;
    color: var(--muted);
}

/* --- Admin Panel --- */
#admin-panel-dialog > div {
    display: grid;
    gap: 1rem;
}

#admin-panel-dialog section {
    border-top: 2px solid var(--fg);
    padding-top: .8rem;
}

#admin-panel-dialog h3 {
    margin: 0 0 .5rem;
    font-size: .95rem;
}

button.danger {
    border-color: var(--danger);
    color: var(--danger);
}

button.danger:hover {
    background: var(--danger);
    color: var(--bg);
}