/* SwagVIP FM — retro (NSO pink/aqua) and gold (gangster black/gold) themes */
body{--bg:#D9F3F6;--bgimg:url(bg_radio.gif);--ink:#443355;--link:#2D6FB0;--vlink:#7755AA;--hot:#FF0066;--frame:#8FC4D6;--side:#F2FBFF;--main:#fff;--sec:#D9F0FA;--secink:#2E78A8;--mut:#7799AA;--box:#F2FBFF;--btn:#c0c0c0;--btnink:#000;--btnhi:#dfdfdf;--btnlo:#808080;--field:#fff;--fieldink:#000;--chatbg:#c0c0c0;--msg:#fff;--msgink:#222;--nick:#2E5F99;--led:#ff4fa3;--ledoff:#2a0d1c;--ledbg:#12040b;--accent:#CC0066;--live:#FF0000;
margin:0;padding:16px 0 30px;background:var(--bg) var(--bgimg);color:var(--ink);font:13px/1.35 Verdana,Tahoma,sans-serif}
body.t-gold{--bg:#0d0b08;--bgimg:url(bg_gold.gif);--ink:#e8d9b0;--link:#e9bf55;--vlink:#c9a24a;--hot:#fff1b8;--frame:#8a6a22;--side:#15110b;--main:#100d09;--sec:#2a2112;--secink:#f3cf6a;--mut:#9c8a5e;--box:#18130c;--btn:#2a2112;--btnink:#f3cf6a;--btnhi:#c9a24a;--btnlo:#4a3a18;--field:#0a0806;--fieldink:#f3e3b5;--chatbg:#1d170e;--msg:#0a0806;--msgink:#e8d9b0;--nick:#e9bf55;--led:#ffcc3d;--ledoff:#251c08;--ledbg:#060503;--accent:#f3cf6a;--live:#ff3b2f;font-family:Georgia,"Times New Roman",serif}
a{color:var(--link);text-decoration:none}a:visited{color:var(--vlink)}a:hover{color:var(--hot);text-decoration:underline}
img{border:0}
.wrap{width:740px;margin:0 auto}
.banner{display:block;line-height:0;margin-bottom:6px}
.frame{background:var(--frame);padding:1px;margin-bottom:6px}
.strip{padding:1px}
.cols{display:flex;gap:1px}
.side{width:140px;flex:none;background:var(--side);padding:12px;box-sizing:content-box}
.main{flex:1;min-width:0;background:var(--main);padding:12px}
.lbl{font:bold 10px Verdana,sans-serif;color:var(--secink);text-transform:lowercase}.lbl.c{text-align:center;margin-top:6px;font-weight:normal;font-style:italic}
.menu{list-style:none;margin:6px 0 10px;padding:0}.menu li{display:flex;align-items:center;gap:4px;margin:3px 0;font:bold 13px Verdana,sans-serif}.menu li.on a{text-decoration:underline;color:var(--hot)}
.themebtn{display:block;text-align:center;margin:8px 0 12px;padding:3px 4px;background:var(--btn);color:var(--btnink)!important;border:2px outset var(--btnhi);font:bold 11px Verdana,sans-serif}.themebtn:active{border-style:inset}.themebtn:hover{text-decoration:none}
.mascot{text-align:center;line-height:0}a.secret{cursor:default}
.clock{margin:6px auto 0;width:110px;text-align:center;border:2px inset var(--btnhi);background:var(--field);color:var(--fieldink);font:bold 14px/22px "Courier New",monospace;letter-spacing:2px}
.sec{background:var(--sec);color:var(--secink);padding:3px;margin:0 0 10px;font:13px Verdana,sans-serif;display:flex;align-items:center;gap:4px}.sec b{font-weight:bold}
.rule{text-align:center;margin:14px 0;line-height:0}
/* LED ticker (driven by app.js) */
.led-ticker{position:relative;height:30px;overflow:hidden;background:var(--ledbg);border:2px inset var(--btnhi)}
.led-ticker>#tickerText{display:flex;position:absolute;left:0;top:1px;width:max-content;height:28px;font-size:0;line-height:0;white-space:nowrap;animation:ledTicker 24s linear infinite;will-change:transform;color:var(--led);font:bold 14px/28px "Courier New",monospace}
.led-ticker>#tickerText:not(:has(.led-copy)){font-size:14px;padding-left:10px;animation:none}
.led-ticker>#tickerText.ticker-restart{animation:none!important;transform:translate3d(var(--led-start),0,0)!important}
.led-ticker .led-copy{display:flex;flex:0 0 auto;height:28px;padding-right:24px}
.led-ticker .led-glyph{display:inline-block;width:20px;height:28px;margin:0 2px;font-size:0;line-height:0}
.led-ticker .led-glyph i{display:inline-block;width:3px;height:3px;margin:0 1px 1px 0;background:var(--ledoff);vertical-align:top}
.led-ticker .led-glyph i.on{background:var(--led);box-shadow:0 0 2px var(--led)}
.led-ticker .led-space{display:inline-block;width:8px;height:28px}
@keyframes ledTicker{from{transform:translate3d(var(--led-start),0,0)}to{transform:translate3d(var(--led-shift),0,0)}}
/* now playing */
.np{display:flex;gap:12px}.np-art img{display:block;width:180px;height:100px;border:1px solid var(--ink);object-fit:cover}
.np-meta{flex:1;min-width:0}.radio-controls{font:bold 10px Verdana,sans-serif;color:var(--accent)}.radio-controls .dot{color:var(--mut)}.radio-controls[data-live="1"] .dot{color:var(--live)}
.np-title{font:bold 19px/1.2 "Times New Roman",serif;color:var(--secink);margin:5px 0 10px;word-wrap:break-word}
.player{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button,input[type=submit],.chat-form button,.page-view button{font:11px Verdana,sans-serif;background:var(--btn);color:var(--btnink);border:2px outset var(--btnhi);padding:2px 8px;cursor:pointer}
button:active{border-style:inset}button:disabled{opacity:.5;cursor:default}
.power{width:44px;height:30px;font:bold 15px Arial,sans-serif;padding:0}.power.playing{border-style:inset;color:var(--hot)}
.plabel{font:bold 12px Verdana,sans-serif}.volume{font:10px Verdana,sans-serif;color:var(--mut);margin-left:auto}.volume input{width:80px;vertical-align:middle}
input,select,textarea{font:12px "Courier New",monospace;border:2px inset var(--btnhi);background:var(--field);color:var(--fieldink);padding:2px}
input[type=range]{border:0;background:transparent;padding:0}
/* chat */
.chat-shell{position:relative;background:var(--chatbg);border:2px outset var(--btnhi);padding:6px}
.chat-head{display:flex;justify-content:space-between;align-items:center;gap:6px}.chat-head form{display:flex;gap:4px}.chat-head input{width:130px}
.users-toggle{background:none;border:0;color:var(--link);text-decoration:underline;padding:0;font-size:10px}
.auth-nick-note{margin:4px 0;font:10px Verdana,sans-serif;color:var(--mut)}body:not(.t-gold) .auth-nick-note{color:#444}
.chat-layout{position:relative;display:grid;grid-template-columns:150px 1fr;gap:4px;height:285px;margin-top:4px}
.chat-layout.users-hidden{grid-template-columns:1fr}.chat-layout.users-hidden .chat-users{display:none}
.chat-users{background:var(--msg);border:2px inset var(--btnhi);overflow:auto;font:11px Verdana,sans-serif;color:var(--msgink)}
.online-title{padding:3px 5px;font-weight:bold;color:var(--secink);background:var(--sec)}
.chat-user-list{list-style:none;margin:0;padding:0}.chat-user-list li{padding:3px 5px;border-bottom:1px dotted var(--btnlo)}.chat-user-list li small{float:right;color:var(--mut);font-size:9px}.chat-user-list li.current-user{font-weight:bold}.users-empty{color:var(--mut)}
.chat-main{position:relative;min-width:0;background:var(--msg);border:2px inset var(--btnhi);display:flex;flex-direction:column}
#messages{flex:1;overflow:auto;padding:4px 6px;font:11px/1.4 Verdana,sans-serif;color:var(--msgink)}
.chat-empty{color:var(--mut)}.day{text-align:center;color:var(--mut);margin:6px 0;font-size:10px}
.chat-message{display:flex;flex-wrap:wrap;gap:0 4px;padding:1px 0;align-items:baseline}.chat-message small{order:-1;color:#999;font-size:10px;min-width:38px}.chat-message small:before{content:"["}.chat-message small:after{content:"]"}
.chat-message b{color:var(--nick)}.chat-message b:after{content:":"}.chat-message span{word-break:break-word}.chat-message-own b{color:var(--accent)}
img.chat-smile{vertical-align:middle;max-height:40px}
.role-mark{font-family:Arial,sans-serif;margin-left:2px}.owner-mark{color:#c08a1c}.dj-mark{color:#4d6ea6}
.chat-form{position:relative;display:flex;gap:4px;margin-top:5px}.chat-form input{flex:1;min-width:0}
.emoji-picker{position:absolute;right:96px;bottom:30px;z-index:5;width:300px;max-height:220px;overflow:auto;display:flex;flex-wrap:wrap;gap:3px;padding:5px;background:var(--side);border:2px outset var(--btnhi)}
.emoji-picker[hidden]{display:none}.emoji-choice{padding:2px;line-height:0}.emoji-choice img{max-width:36px;max-height:36px}
.poll{display:none;position:absolute;left:6px;right:6px;top:6px;z-index:3;background:var(--side);border:2px outset var(--btnhi);padding:6px;font:11px Verdana,sans-serif;color:var(--ink)}.poll.show{display:block}.poll span{display:block;margin:4px 0}.poll button{margin:2px 4px 0 0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--side);color:var(--ink);border:2px outset var(--btnhi);padding:6px 12px;font:12px Verdana,sans-serif;display:none;z-index:10}#toast.show{display:block}
/* boxes, login, dj */
.box{background:var(--box);border:1px solid var(--frame);padding:10px 12px;margin:0 0 12px}.box h3{margin:0 0 6px;font:bold 15px "Times New Roman",serif;color:var(--secink)}.box p{margin:6px 0}
.telegram-login-link{display:inline-block;padding:4px 12px;background:var(--btn);color:var(--btnink)!important;border:2px outset var(--btnhi);font:bold 12px Verdana,sans-serif}
.login-status{color:var(--accent);font-size:12px}.muted{color:var(--mut);font-size:11px}
.profile-box{display:none}.profile-box form{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end}
.dj-console{background:var(--box);border:2px outset var(--btnhi);margin-bottom:12px;font:12px Verdana,sans-serif}
.dj-console-head{display:flex;justify-content:space-between;padding:6px 8px;background:var(--sec);color:var(--secink)}
.dj-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border-bottom:1px solid var(--frame);align-items:center}.dj-console .dj-red{background:#b0182c;color:#fff;font-weight:bold}.dj-shuffle{font-size:11px}
.dj-nowline{display:flex;gap:8px;align-items:center;padding:8px;border-bottom:1px solid var(--frame);color:var(--mut)}.dj-nowline strong{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dj-listeners{margin-left:auto;white-space:nowrap}
.dj-workspace{display:grid;grid-template-columns:1fr 1fr;min-height:220px}.dj-library{border-right:1px solid var(--frame)}.dj-library,.dj-queue{min-width:0}
.dj-tabs{padding:5px 8px;border-bottom:1px solid var(--frame);color:var(--secink)}.dj-library-tools,.dj-transport{display:flex;gap:6px;align-items:center;padding:6px 8px;border-bottom:1px dotted var(--frame)}
.dj-source-status,.dj-empty{padding:12px 8px;color:var(--mut);line-height:1.5}.dj-queue-help{font-size:10px;color:var(--mut)}
.dj-track-list{max-height:260px;overflow:auto}.dj-track{display:flex;gap:6px;align-items:center;padding:5px 8px;border-bottom:1px dotted var(--frame);font-size:11px}
.dj-track-info{flex:1;min-width:0}.dj-track-info b,.dj-track-info small{display:block}.dj-track-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dj-track-info small{color:var(--mut);font-size:10px}
.dj-track-actions{display:flex;gap:2px}.dj-track-actions button{padding:1px 4px;min-width:20px}.dj-track-hidden{opacity:.55}.dj-track-current{box-shadow:inset 3px 0 var(--accent);background:var(--sec)}
.dj-poll-box form,.role-admin form{display:flex;flex-wrap:wrap;gap:5px}.dj-poll-box input{flex:1;min-width:0}
.role-admin{display:none;margin-top:8px;padding-top:8px;border-top:1px dotted var(--frame)}
/* footer */
.foot{background:var(--side);border:1px solid var(--frame);padding:12px;text-align:center;font:11px Verdana,sans-serif}
.fgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}.fgrid textarea{font-size:9px;width:170px;resize:none}
.sign{font-weight:bold}
.odo{display:inline-flex;gap:1px;margin-top:4px}.odo b{display:inline-block;width:13px;background:#000;color:#3f3;font:bold 13px/18px "Courier New",monospace;border:1px solid var(--btnlo)}body.t-gold .odo b{color:#ffcc3d}
.foot .rule{margin:10px 0 4px}.b88{margin:6px 0}.small{margin-top:4px;font-size:10px}.mut{color:var(--mut)}
body.t-gold .banner img,body.t-gold .mascot img{image-rendering:auto}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.mailbtn{display:inline-block;margin:0}
.chat-layout>*{min-height:0}.chat-main{overflow:hidden}#messages{min-height:0}