:root{--bg: #f4f4f5;--surface: #ffffff;--surface-muted: #f7f7f8;--border: #e6e6e9;--text: #17171a;--text-muted: #6b6b75;--text-faint: #9a9aa4;--accent: #2f4bd4;--accent-track: #dcdff5;--online-bg: #10893e;--online-text: #ffffff;--offline-bg: #c0332b;--offline-text: #ffffff;--radius: 14px;--backdrop-dim: .45;--panel-opacity: .45;--accent-art: #9a9cf5;--online: #2f9e58;--shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 8px 24px rgb(0 0 0 / 6%);color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--bg: #101014;--surface: #18181d;--surface-muted: #1f1f26;--border: #2a2a33;--text: #f2f2f5;--text-muted: #a1a1ad;--text-faint: #74747f;--accent: #7f95ff;--accent-track: #2c2f45;--online-bg: #1f9d55;--offline-bg: #d4453b;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%)}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.4;-webkit-text-size-adjust:100%}.page{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:20px 16px calc(28px + env(safe-area-inset-bottom,0px));background:var(--surface);min-height:100vh}@media(min-width:680px){.page{margin:24px auto;min-height:0;border-radius:var(--radius);box-shadow:var(--shadow)}}.page--message{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;min-height:70vh}.hero{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-bottom:18px;border-bottom:1px solid var(--border)}.hero__site{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.01em;flex:1 1 auto;min-width:0;overflow-wrap:break-word}.hero__meta{display:flex;align-items:center;gap:12px;flex:0 0 auto}.hero__seen{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);font-size:.875rem;white-space:nowrap}.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.875rem;font-weight:600}.chip--online{background:var(--online-bg);color:var(--online-text)}.chip--offline{background:var(--offline-bg);color:var(--offline-text)}.icon{width:15px;height:15px;flex:0 0 auto}.reconnecting{margin:10px 0 0;font-size:.8125rem;color:var(--text-muted)}.section{margin-top:20px}.section__heading{margin:0 0 8px;font-size:.9375rem;font-weight:600;color:var(--text-muted)}.empty{margin:0;color:var(--text-faint);font-size:.9375rem}.tracklist{list-style:none;margin:0;padding:0}.track{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.track:last-child{border-bottom:none}.track__index{width:14px;flex:0 0 auto;text-align:right;color:var(--text-faint);font-size:.8125rem;font-variant-numeric:tabular-nums}.track__body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}.track__title{font-size:1rem;overflow-wrap:anywhere}.track__artist{font-size:.8125rem;color:var(--text-muted);overflow-wrap:anywhere}.track__meta{display:flex;align-items:baseline;gap:12px;flex:0 0 auto;color:var(--text-muted);font-size:.875rem;font-variant-numeric:tabular-nums}.track__time{color:var(--text-faint);font-size:.75rem;letter-spacing:.04em;padding-right:12px;border-right:1px solid var(--border)}.context{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:20px;padding:10px 12px;border-radius:10px;background:var(--surface-muted);color:var(--text-muted);font-size:.875rem}.context__left{display:inline-flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}.context__schedule{color:var(--text);font-weight:600}.context__position{white-space:nowrap}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted);padding:14px}.card--now{display:flex;align-items:stretch;padding:0;overflow:hidden}.card__art{display:inline-flex;align-items:center;justify-content:center;width:112px;height:auto;min-height:112px;align-self:stretch;flex:0 0 auto;background:var(--accent-track);color:var(--accent)}.card__art--image{display:block;object-fit:cover}.icon--music{width:32px;height:32px}.card__col{display:flex;flex-direction:column;justify-content:center;gap:12px;flex:1 1 auto;min-width:0;padding:12px 14px}@media(min-width:600px){.card__art{width:164px;min-height:164px}.icon--music{width:40px;height:40px}.card__col{gap:16px;padding:16px 20px}}.card__body{display:flex;flex-direction:column;min-width:0}.card__title{font-size:1.0625rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__artist{font-size:.9375rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__progress{display:flex;flex-direction:column}.progress{margin-top:14px;height:6px;border-radius:999px;background:var(--accent-track);overflow:hidden}.progress__fill{height:100%;border-radius:999px;background:var(--accent);transition:width .9s linear}@media(prefers-reduced-motion:reduce){.progress__fill{transition:none}}.card__progress .progress{margin-top:0}.card__times{display:flex;justify-content:space-between;margin-top:6px;color:var(--text-muted);font-size:.8125rem;font-variant-numeric:tabular-nums}.message__title{margin:0;font-size:1.25rem;font-weight:700}.message__code{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.125rem;letter-spacing:.06em;color:var(--text-muted)}.message__body{margin:0;max-width:30rem;color:var(--text-muted)}.footer{margin-top:26px;padding-top:14px;border-top:1px solid var(--border);color:var(--text-faint);font-size:.8125rem;text-align:center}.page--message .footer{border-top:none}:root{--danger: #c0332b;--danger-text: #ffffff;--upcoming-bg: #e6e9fb;--upcoming-text: #2f4bd4;--done-bg: #ececf0;--done-text: #6b6b75;--cancelled-bg: #f7e3e2;--cancelled-text: #a12c25}@media(prefers-color-scheme:dark){:root{--danger: #d4453b;--upcoming-bg: #262b47;--upcoming-text: #a8b6ff;--done-bg: #23232a;--done-text: #a1a1ad;--cancelled-bg: #3a2323;--cancelled-text: #f0a49e}}.appbar{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:10px 16px calc(10px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;gap:12px}.appbar__brand{font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.appbar__button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:.875rem;cursor:pointer;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.appbar__button:hover{border-color:var(--accent);color:var(--accent)}.button{min-height:44px;padding:10px 18px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}.button:disabled{opacity:.55;cursor:default}.button--ghost{background:transparent;color:var(--text);border-color:var(--border)}.button--icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}.history-entry{margin:0 0 14px}.history-entry .button{width:100%}.button--danger{background:var(--danger);border-color:var(--danger);color:var(--danger-text)}.button--small{min-height:34px;padding:6px 12px;font-size:.875rem;font-weight:500}.link{padding:0;border:0;background:none;color:var(--accent);font:inherit;text-decoration:underline;cursor:pointer}.field{margin:0 0 14px}.field__label{display:block;margin-bottom:5px;font-size:.8125rem;font-weight:600;color:var(--text-muted)}.field__input{display:block;width:100%;min-width:0;max-width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-muted);color:var(--text);font:inherit}input[type=date].field__input,input[type=time].field__input{-webkit-appearance:none;appearance:none;text-align:left}.field__input::-webkit-date-and-time-value{min-height:1.4em;text-align:left}.field__input--passcode{letter-spacing:.4em;font-size:1.25rem;font-variant-numeric:tabular-nums}.fieldset{margin:0 0 14px;padding:0;border:0}.choices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.choice{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;font-size:.9375rem;cursor:pointer}.choice input{margin:0}.form__row{display:flex;gap:10px;margin-top:6px}.form__links{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:.9375rem}.form__lead,.form__note{margin:0 0 12px;color:var(--text-muted);font-size:.9375rem}.form__error{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--cancelled-bg);color:var(--cancelled-text);font-size:.9375rem}.form__done{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--surface-muted);color:var(--text);font-size:.9375rem}.notice{padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted)}.notice__body{margin:0;color:var(--text-muted);font-size:.9375rem}.quiet{padding:18px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-muted)}.quiet__title{margin:0 0 10px;font-size:1.125rem;font-weight:700}.quiet__body{margin:0 0 8px;color:var(--text-muted);font-size:.9375rem;line-height:1.45}.quiet__body:last-child{margin-bottom:0}.sheet-backdrop{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:#00000073;touch-action:none}.sheet{display:flex;flex-direction:column;width:100%;max-width:480px;max-height:90vh;max-height:90dvh;overflow:hidden;padding:16px 0 0;border-radius:var(--radius) var(--radius) 0 0;background:var(--surface);box-shadow:var(--shadow)}.sheet__body{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}@media(min-width:680px){.sheet-backdrop{align-items:center}.sheet{border-radius:var(--radius)}}.sheet__head{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:0 16px}.sheet__title{margin:0;font-size:1.125rem}.sheet__close{min-width:36px;min-height:36px;border:0;border-radius:999px;background:var(--surface-muted);color:var(--text-muted);font-size:1.25rem;line-height:1;cursor:pointer}.account__name{margin:0;font-weight:600}.account__email{margin:2px 0 16px;color:var(--text-muted);font-size:.9375rem}.account__heading{margin:0 0 8px;font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.account__sites{margin:0 0 16px;padding:0;list-style:none}.account__site{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid var(--border)}.account__site-name{font-weight:500}.account__site-brand{color:var(--text-muted);font-size:.875rem}.select-section{margin-top:4px}.booking__when{display:grid;gap:10px}.bookings{margin:0;padding:0;list-style:none}.booking-row{padding:12px 0;border-bottom:1px solid var(--border)}.booking-row:last-child{border-bottom:0}.booking-row__head{display:flex;align-items:center;justify-content:space-between;gap:10px}.booking-row__playlist{font-weight:600}.booking-row__when{margin-top:2px;color:var(--text-muted);font-size:.9375rem}.booking-row__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;color:var(--text-faint);font-size:.8125rem}.booking-row__cancelled{color:var(--cancelled-text)}.booking-row__actions{margin-top:8px}.chip--booking{text-transform:none}.chip--upcoming{background:var(--upcoming-bg);color:var(--upcoming-text)}.chip--playing{background:var(--online-bg);color:var(--online-text)}.chip--done{background:var(--done-bg);color:var(--done-text)}.chip--cancelled{background:var(--cancelled-bg);color:var(--cancelled-text)}.playout-form__times{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.playout-form__times>.field{min-width:0}.playout{margin-top:18px}.playout__range{margin:0 0 8px;font-size:.9375rem;font-weight:600;color:var(--text-muted)}.playout-list{margin:0;padding:0;list-style:none}.playout-day{padding:12px 0 4px;font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)}.playout-playlist{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:6px;padding:12px 0 6px;border-bottom:1px solid var(--border);font-size:.875rem;font-weight:600;color:var(--text-muted);overflow-wrap:anywhere}.playout-playlist__note{font-size:.75rem;font-weight:600;color:var(--text-faint)}.playout-row{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}.playout-row:last-child{border-bottom:0}.playout-row__time{flex:0 0 auto;min-width:3em;color:var(--text-muted);font-size:.875rem;font-variant-numeric:tabular-nums}.playout-row__meta{font-size:.8125rem;color:var(--text-faint);overflow-wrap:anywhere}.chip--announcement{align-self:flex-start;margin:0 0 3px;padding:2px 8px;font-size:.75rem;background:var(--upcoming-bg);color:var(--upcoming-text)}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.backdrop:after{content:"";position:absolute;inset:0;background:rgb(0 0 0 / calc(1 - var(--backdrop-dim)))}.backdrop__slot{position:absolute;inset:0}.backdrop__source[hidden]{display:none}.backdrop__layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}.backdrop__layer--shown{opacity:1}@media(prefers-reduced-motion:reduce){.backdrop__layer{transition:none}}body.has-artwork{color-scheme:dark;--bg: #111114;--surface: rgba(18, 18, 22, var(--panel-opacity));--surface-muted: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .1);--text: #f2f2f5;--text-muted: #b4b4bc;--text-faint: #8a8a93;--accent: var(--accent-art);--accent-track: rgba(255, 255, 255, .1);--online-bg: var(--online);--online-text: #ffffff;--offline-bg: #d4453b;--shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%)}@media(min-width:680px){body.has-artwork .page{border:1px solid rgba(255,255,255,.08)}}body.has-artwork .field__input option{background:#16161b;color:var(--text)}body.has-artwork .card{background:#ffffff0d}body.has-artwork .card__art{background:#2b2c44}body.has-artwork .appbar__brand{color:var(--text);text-shadow:0 1px 2px rgb(0 0 0 / 70%),0 0 8px rgb(0 0 0 / 45%)}body.has-artwork .appbar__button{background:#14141873}body.has-artwork .sheet{background:#16161b}
