:root {
    --winamp-blue: #243b91;
    --winamp-blue-light: #4966ca;
    --winamp-panel: #292c31;
    --winamp-edge: #090a0c;
    --winamp-green: #62f66d;
    --winamp-yellow: #f5dd4b;
    --pink: #ef668f;
    --pink-light: #ff94b5;
}

* { box-sizing: border-box; }
html { font-family: Inter, "Noto Sans Thai", system-ui, sans-serif; color: #f5f5f5; background: #111216; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -15%, #353841 0, #191b20 45%, #101115 100%); }
button, input, textarea { font: inherit; }
.radio-page { width: min(760px, calc(100% - 28px)); margin: auto; padding: 24px 0 64px; }
.radio-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(520px, 100%); margin: 0 auto 12px; color: #d5d7dc; font-size: .76rem; font-weight: 800; }
.radio-nav a { color: #f5d951; text-decoration: none; }

.winamp { width: min(520px, 100%); margin: auto; border: 2px solid #050506; background: #202328; box-shadow: 0 0 0 1px #999ca0, 0 22px 60px #000a; }
.winamp-title, .panel-heading { display: flex; min-height: 27px; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 9px; color: #fff; background: linear-gradient(90deg, #17286f, #405dc0 52%, #17286f); font-size: .67rem; font-weight: 900; letter-spacing: .07em; text-shadow: 1px 1px #000; }
.winamp-title span, .panel-heading > span { color: #dfe5ff; font-size: .56rem; }
.player-grid { display: grid; gap: 4px; padding: 5px; background: #08090b; }
.player-main, .equalizer, .playlist-panel { min-width: 0; border: 1px solid var(--winamp-edge); background: linear-gradient(145deg, #44474c, #22252a); box-shadow: inset 1px 1px #979a9d, inset -1px -1px #08090a; }
.player-main { padding: 8px; }
.lcd-screen { position: relative; display: grid; min-height: 122px; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 9px; overflow: hidden; border: 2px inset #777b77; color: var(--winamp-green); background: #051006; }
.lcd-screen img { position: relative; z-index: 2; width: 76px; aspect-ratio: 1; border: 1px solid #326139; object-fit: cover; }
.lcd-copy { position: relative; z-index: 2; min-width: 0; }
.lcd-copy > span { display: block; color: var(--winamp-yellow); font-family: "Courier New", monospace; font-size: .61rem; font-weight: 900; }
.lcd-copy > strong { display: block; margin: 6px 0 3px; overflow: hidden; font-family: "Courier New", monospace; font-size: .98rem; text-overflow: ellipsis; text-shadow: 0 0 8px #31fa48; white-space: nowrap; }
.lcd-copy > small { display: block; overflow: hidden; color: #8edc94; font-size: .64rem; text-overflow: ellipsis; white-space: nowrap; }
.time-row { display: flex; gap: 6px; margin-top: 7px; font-family: "Courier New", monospace; font-size: .9rem; }
.lcd-screen canvas { position: absolute; right: 0; bottom: 0; width: calc(100% - 102px); height: 48px; opacity: .68; }
.retro-range { accent-color: #d8d8d8; }
.seek { width: 100%; height: 5px; margin: 8px 0; }
.transport { display: flex; align-items: center; gap: 4px; }
.transport button { width: 38px; height: 29px; border: 1px solid #050506; border-radius: 2px; color: #121318; background: linear-gradient(#f1f1f1, #8c8f93); box-shadow: inset 1px 1px #fff; cursor: pointer; font-size: .72rem; font-weight: 900; }
.transport button:active { background: #7d8084; box-shadow: inset 1px 1px #222; }
.transport label { display: flex; min-width: 120px; align-items: center; gap: 6px; margin-left: auto; font-size: .57rem; font-weight: 900; }
.transport label input { min-width: 0; width: 100%; }

.equalizer { padding-bottom: 7px; }
.eq-actions { display: flex; align-items: center; gap: 5px; }
.eq-actions select { height: 23px; padding: 2px 5px; border: 1px solid #aebbf0; color: #fff; background: #182866; font-size: .54rem; font-weight: 900; }
.eq-toggle { min-width: 58px; padding: 3px 8px; border: 1px solid #aebbf0; color: #14205a; background: #e7ebff; cursor: pointer; font-size: .57rem; font-weight: 900; }
.eq-toggle[aria-pressed="false"] { color: #e2e2e2; border-color: #696b71; background: #292b31; }
.eq-sliders { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 0; padding: 7px 5px 4px; }
.eq-sliders label { display: grid; min-width: 0; grid-template-rows: 14px 94px; justify-items: center; color: #e4e4e4; font-family: Arial, sans-serif; font-size: .48rem; }
.eq-sliders input[type="range"] { width: 18px; height: 88px; margin: 0; writing-mode: vertical-lr; direction: rtl; accent-color: var(--winamp-yellow); }
.equalizer.eq-disabled .eq-sliders { opacity: .36; }

.playlist-panel { min-height: 155px; }
.playlist-panel ol { max-height: 250px; margin: 0; padding: 4px; overflow: auto; list-style: none; background: #040a05; }
.playlist-panel li button { display: grid; width: 100%; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 6px; padding: 5px 7px; border: 0; color: var(--winamp-green); background: transparent; text-align: left; cursor: pointer; }
.playlist-panel li button:hover, .playlist-panel li button.active { color: #071108; background: var(--winamp-green); }
.playlist-panel li b { overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.playlist-panel li span, .playlist-panel li small { color: inherit; font-size: .62rem; }
#radio-audio { display: none; }

.guestbook { margin-top: 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .72); border-radius: 28px; color: #322630; background: rgba(255, 255, 255, .96); box-shadow: 0 24px 70px #0006; }
.guestbook > header { padding: 25px 26px 17px; background: linear-gradient(135deg, #fff, #fff4f8); }
.guestbook > header span { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #c13e69; background: #ffe5ed; font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.guestbook h1 { margin: 10px 0 4px; font-size: clamp(1.45rem, 4vw, 2rem); }
.guestbook > header p { margin: 0; color: #806f7d; font-size: .8rem; }
.comment-alert { margin: 0 26px 16px; padding: 11px 13px; border-radius: 12px; color: #21633e; background: #e2f7e9; }
.comment-alert.error { color: #962d4c; background: #ffe6ed; }
.comment-form { position: relative; display: grid; gap: 13px; padding: 8px 26px 25px; }
.comment-form label { display: grid; gap: 6px; color: #5f4c59; font-size: .76rem; font-weight: 800; }
.comment-form input, .comment-form textarea { width: 100%; border: 1px solid #e6d4dc; border-radius: 14px; padding: 12px 14px; color: #322630; background: #fff; outline: none; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(239, 102, 143, .12); }
.comment-form button { justify-self: end; min-width: 150px; padding: 11px 18px; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--pink-light), var(--pink)); box-shadow: 0 9px 22px rgba(239, 102, 143, .26); cursor: pointer; font-size: .74rem; font-weight: 900; }
.comment-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.comment-list { display: grid; gap: 10px; padding: 18px 26px 26px; border-top: 1px solid #f0e3e9; background: #fffafd; }
.comment-list article, .no-comments { margin: 0; padding: 15px 16px; border: 1px solid #ecdce3; border-radius: 16px; background: #fff; }
.comment-list article header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-list article strong { color: #d74876; }
.comment-list time { color: #9a8794; font-size: .67rem; }
.comment-meta { display: flex; align-items: center; gap: 8px; }
.comment-meta form { margin: 0; }
.comment-meta button { padding: 4px 9px; border: 1px solid #efb8c8; border-radius: 999px; color: #b73352; background: #fff4f7; cursor: pointer; font-size: .64rem; font-weight: 900; }
.comment-meta button:hover { border-color: #dc7894; background: #ffe5ed; }
.comment-list article p { margin: 9px 0 0; overflow-wrap: anywhere; color: #594651; font-size: .82rem; line-height: 1.6; }
.no-comments { color: #8a7581; text-align: center; }

@media (max-width: 560px) {
    .radio-page { width: 100%; padding-top: 0; }
    .radio-nav { padding: 10px 12px; margin-bottom: 0; }
    .winamp { border-right: 0; border-left: 0; }
    .lcd-screen { grid-template-columns: 60px minmax(0, 1fr); min-height: 112px; }
    .lcd-screen img { width: 60px; }
    .lcd-screen canvas { width: calc(100% - 82px); }
    .transport { flex-wrap: wrap; }
    .transport label { width: 100%; margin: 6px 0 0; }
    .eq-sliders { padding-right: 2px; padding-left: 2px; }
    .eq-sliders label { font-size: .42rem; }
    .playlist-panel li button { grid-template-columns: 26px minmax(0, 1fr); }
    .playlist-panel li small { display: none; }
    .guestbook { margin: 22px 10px 0; border-radius: 22px; }
    .guestbook > header, .comment-form, .comment-list { padding-right: 18px; padding-left: 18px; }
    .comment-alert { margin-right: 18px; margin-left: 18px; }
    .comment-form button { width: 100%; justify-self: stretch; }
}