:root { --green:#064c38; --cream:#fff4d6; --ink:#26302b; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { background:#ebe6d9; color:var(--ink); font-family:"Avenir Next","Be Vietnam Pro",system-ui,sans-serif; }
.page { min-height:100svh; margin:auto; padding:40px 20px; display:flex; justify-content:center; }
.card { position:relative; width:390px; height:844px; overflow:hidden; border:1px solid rgba(0,0,0,.06); border-radius:38px; background:#fffaf2 url("/AP%20background.webp") center center/contain no-repeat; box-shadow:0 16px 44px rgba(20,40,30,.16); display:flex; flex-direction:column; }
.paper { display:none; }
.top { position:relative; z-index:2; padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.socials { display:flex; gap:8px; }
.social { width:38px; height:38px; border-radius:50%; background:#fff; color:var(--green); display:grid; place-items:center; text-decoration:none; box-shadow:0 3px 10px rgba(11,61,42,.16); font:800 15px/1 Arial,sans-serif; }
.social svg { width:18px; height:18px; }
.status { padding:7px 13px 7px 11px; border-radius:9999px; background:#fff; box-shadow:0 3px 10px rgba(11,61,42,.16); display:flex; align-items:center; gap:8px; }
.dot { width:9px; height:9px; border-radius:50%; background:#30ad61; flex:0 0 auto; }
.status strong,.status span { display:block; line-height:1.05; }
.status strong { font-size:12.5px; font-weight:700; }
.status span { margin-top:1px; color:#7f887e; font-size:10.5px; }
.hero { position:relative; z-index:1; height:230px; }
.hero img { display:none; }
.spacer { flex:1 1 auto; min-height:190px; }
.ticker { position:relative; z-index:2; width:100%; overflow:hidden; padding:10px 0; border-top:1px solid rgba(6,76,56,.11); border-bottom:1px solid rgba(6,76,56,.11); background:rgba(255,250,242,.68); white-space:nowrap; }
.ticker-track { display:inline-flex; align-items:center; gap:34px; width:max-content; color:#396250; font-size:11px; font-weight:700; animation:ticker 108s linear infinite; }
.ticker-track span { display:inline-block; }
#songMessageTicker:not([hidden]),#songMessageTickerClone:not([hidden]),.song-message-repeat:not([hidden]){padding:4px 10px;border-radius:999px;background:#ffe29a;color:#653d00;font-weight:500;box-shadow:0 0 0 1px #dcae42,0 2px 7px rgba(130,83,0,.18);}
@keyframes ticker { to { transform:translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none; padding-left:16px; } }
.music-bar { position:relative; z-index:2; display:flex; gap:7px; margin:10px 16px -8px; }.now-playing { min-width:0; flex:1; min-height:57px; padding:7px 10px 7px 7px; border:1px solid rgba(6,76,56,.10); border-radius:15px; background:rgba(255,250,242,.82); box-shadow:0 5px 16px rgba(11,61,42,.10); color:inherit; text-decoration:none; display:flex; align-items:center; gap:9px; }
.now-playing:hover { background:#fffdf8; }
.now-playing-art { width:42px; height:42px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; overflow:hidden; background:#dcead9 center/cover no-repeat; color:var(--green); font-size:21px; font-weight:800; }
.now-playing-copy { min-width:0; display:grid; gap:2px; }
.now-playing-copy small { color:#688072; font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.now-playing-copy b,.now-playing-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.now-playing-copy b { color:var(--green); font-size:12px; line-height:1.2; }
.now-playing-copy span { color:#7f887e; font-size:10.5px; }
.now-playing-open { margin-left:auto; color:var(--green); font-weight:800; }
.song-request { flex:0 0 92px; border:1px solid rgba(6,76,56,.16); border-radius:15px; padding:7px 8px; background:#e7f3e5; color:var(--green); font:800 10px inherit; display:grid; place-items:center; gap:2px; cursor:pointer; }.song-request span { font-size:9px; line-height:1.1; }.song-rules{margin:0 0 10px;padding-left:18px;color:#68756d;font-size:11px;line-height:1.45}.song-rules li+li{margin-top:3px}#songRequestForm small{display:block;text-align:center;color:#53635a;font-size:11px;line-height:1.35}
.spotify-results{display:grid;gap:4px;margin:-2px 0 8px;padding:5px;max-height:180px;overflow:auto;border:1px solid #d7e4d9;border-radius:10px;background:#f4faf4}.spotify-results button{border:0;border-radius:8px;background:transparent;padding:6px;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:left;cursor:pointer}.spotify-results button:hover{background:#e4f1e8}.spotify-results img{width:32px;height:32px;border-radius:6px;object-fit:cover;background:#d8e8da}.spotify-results b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--green)}.spotify-results em{font:700 10px inherit;color:#397258;font-style:normal}.song-order-credential{display:block;margin-top:2px;color:#53635a;font-size:11px;font-weight:600}
.song-done{text-align:center;padding:8px 4px}.song-done>span{width:48px;height:48px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#e4f1e8;color:var(--green);font-size:25px;font-weight:800}.song-done h2{margin:12px 0 5px}.song-done p{margin:0 0 17px}
.actions { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); margin:0 16px; gap:9px; }
.action { min-width:0; min-height:58px; border:1px solid rgba(6,76,56,.12); border-radius:16px; background:rgba(255,250,242,.88); color:inherit; text-decoration:none; font:inherit; text-align:left; cursor:pointer; padding:10px 11px; display:grid; grid-template-columns:36px minmax(0,1fr); align-items:center; gap:9px; box-shadow:0 6px 18px rgba(11,61,42,.08); }
.action-icon { width:36px; height:36px; margin:0; border-radius:11px; display:grid; place-items:center; color:var(--green); background:#e7f3e5; }
.action-icon.map { color:#3a2d05; background:#ffc85a; }
.action-icon svg { width:23px; height:23px; }
.action-copy { min-width:0; }
.action b { display:block; color:var(--green); font-size:11.5px; line-height:1.15; }
.action small { display:block; margin-top:3px; color:#92988e; font-size:9px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slider { position:relative; z-index:2; height:60px; margin:16px 16px 0; border-radius:16px; background:rgba(6,76,56,.20); overflow:hidden; touch-action:none; user-select:none; }
.slider-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--green); font-size:15px; font-weight:700; }
.knob { position:absolute; left:5px; top:5px; width:50px; height:50px; border-radius:12px; color:var(--cream); background:var(--green); display:grid; place-items:center; box-shadow:0 3px 10px rgba(11,61,42,.28); cursor:grab; transition:transform .12s ease; }
.knob svg { width:22px; height:22px; }
footer { position:relative; z-index:2; padding:20px 20px 22px; text-align:center; color:#7e887f; font-size:11.5px; }
footer div+div { margin-top:5px; color:#9aa19a; font-size:11px; }
dialog { border:0; width:min(84vw,320px); border-radius:18px; padding:18px; color:var(--ink); box-shadow:0 20px 70px rgba(0,0,0,.25); }
dialog::backdrop { background:rgba(6,30,22,.42); }
dialog h2 { margin:0; color:var(--green); font-size:19px; }
dialog p { margin:5px 0 13px; color:#7e887f; font-size:12px; line-height:1.4; }
dialog input { width:100%; margin:9px 0 11px; padding:11px 12px; border:1px solid #ccd4ce; border-radius:10px; font:600 14px inherit; outline:none; }
.track-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.track-close { border:0; width:28px; height:28px; border-radius:50%; padding:0; background:#eef2ed; color:var(--green); font-size:16px; cursor:pointer; }
.track-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border-radius:11px; background:#f1f0e9; }
.track-tab { border:0; border-radius:8px; padding:8px 5px; background:transparent; color:#728078; font:700 11.5px inherit; cursor:pointer; }
.track-tab.active { background:#fff; color:var(--green); box-shadow:0 2px 7px rgba(6,76,56,.10); }
.track-label { display:block; margin-top:12px; color:#53635a; font-size:11px; font-weight:700; }
.track-submit { width:100%; border:0; border-radius:10px; padding:11px 14px; background:var(--green); color:#fff; font:700 13px inherit; cursor:pointer; }
@media (max-width:430px) {
  .page { padding:0; }
  .card { width:100%; min-height:100svh; height:100svh; border:0; border-radius:0; }
  .spacer { min-height:130px; }
}