.app-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:#0e1621;color:#ddd;font:14px system-ui,sans-serif;padding-top:max(12px,env(safe-area-inset-top));}
.app-brand{display:flex;align-items:center;gap:9px;font-weight:700;}
.app-header>div{display:flex;align-items:center;gap:16px;}
.app-install{font:inherit;background:#4082bc;color:white;border:0;border-radius:6px;padding:8px 12px;cursor:pointer;}
.app-install[hidden]{display:none;}
.app-home{font-size:13px;}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);}
*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
input,button{outline:none;}
a,a:hover,a:visited{color:#ddd;text-decoration:none;}
.flex{display:-webkit-flex;display:flex;}
.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.flex-align{-webkit-align-items:center;align-items:center;}
.w-full{width:100%;}

/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */
#simp button,#simp input,#simp img{border:0;}
#simp{font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
#simp .simp-album{padding:20px 25px 5px;}
#simp .simp-album .simp-cover{margin-right:20px;}
#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
#simp .simp-album .simp-title{font-size:120%;font-weight:bold;}
#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;}
#simp .simp-controls{padding:15px;}
#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
#simp .simp-controls button[disabled]{color:#636469;cursor:initial;}
#simp .simp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;}
#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;}
#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
#simp .simp-controls .simp-loading .simp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;}
#simp .simp-controls .simp-volume{max-width:110px;display:none;}
#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;}
#simp .simp-controls .simp-others .simp-active{background:#242f3d;}
#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
#simp .simp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;}
#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;}
#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
#simp .simp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
#simp .simp-hide{max-height:0;}
/* playlist */
#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:calc(100vh - 255px);}
#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
#simp ul li[hidden]{display:none;}
#simp ul li:last-child{padding-bottom:13px;}
#simp ul li:nth-child(odd){background:#0e1621;}
#simp ul li:hover{background:#242f3d;}
#simp ul li.simp-active{background:#4082bc;color:#fff;}
#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;}
/* playlist scrollbar */
#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
#simp ul::-webkit-scrollbar-track{background-color:#2f3841;}
#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
#simp .simp-shide { display: none; }
/* progress animation */
@-webkit-keyframes audio-progress{to{background-position:25px 0;}}
@keyframes audio-progress{to{background-position:25px 0;}}
/* mobile */
@media screen and (max-width:480px) {
#simp .simp-controls .simp-volume/*,#simp .simp-controls .simp-others*/{display:none;}
#simp .simp-controls .simp-time{display:none; /*margin-right:10px;*/}
}
@media screen and (max-width:370px) {
#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;}
}
#simp .simp-cover {display:none;}
#simp {position:relative;display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100vh;height:100dvh;}
#simp.albums-collapsed {grid-template-columns:minmax(0,1fr);}
#simp .album-toolbar {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#101a24;border-bottom:1px solid #293949;min-height:52px;}
#simp .album-toolbar-summary {font-size:11px;color:#9cb0c2;}
#simp .simp-main {display:flex;flex-direction:column;min-width:0;min-height:0;}
#simp .simp-player,#simp .simp-footer {flex-shrink:0;}
#simp .simp-footer {grid-column:1/-1;border-top:1px solid #293949;background:#101a24;}
#simp .simp-info {min-width:0;width:100%;}
#simp .simp-title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#simp .simp-playlist {flex:1;min-height:0;position:relative;}
#simp ul {height:100%;max-height:none;margin-top:0;}
#simp ul[hidden] {display:none;}
#simp .simp-status {margin:0;padding:0 20px 12px;color:#f4d49a;line-height:1.5;}
#simp .library-load-state {padding:20px;color:#9cb0c2;line-height:1.6;}
#simp .library-load-state[hidden] {display:none;}
#simp .library-retry {margin-top:12px;}
#simp button:focus-visible,#simp li:focus-visible,#simp input:focus-visible {outline:2px solid #8ccaff;outline-offset:-2px;}
#simp .simp-queue-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid #293949;border-bottom:1px solid #293949;}
#simp .simp-queue-heading h2 {font-size:14px;font-weight:600;}
#simp .queue-count {color:#9cb0c2;font-size:12px;}
#simp .simp-empty {padding:36px 20px;color:#aabac8;text-align:center;line-height:1.6;}
#simp .simp-albums {display:flex;flex-direction:column;min-height:0;padding:22px 16px 16px;background:#101a24;border-right:1px solid #293949;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#42566a transparent;}
#simp .simp-albums[hidden] {display:none;}
#simp .album-heading-row {display:flex;justify-content:space-between;align-items:center;gap:8px;}
#simp .library-eyebrow {color:#87a1b8;letter-spacing:.15em;font-size:10px;font-weight:600;margin-bottom:6px;}
#simp #album-heading {font-size:22px;font-weight:650;letter-spacing:-.04em;}
#simp .album-selection-summary {font-size:12px;color:#9cb0c2;margin:12px 0;}
#simp .album-actions {display:flex;gap:8px;margin-bottom:20px;}
#simp .album-actions button,#simp .album-toggle,#simp .library-retry {border:1px solid #3a5165;border-radius:6px;background:#1b2b3a;color:#e2edf6;font:inherit;font-size:12px;min-height:36px;padding:8px 10px;cursor:pointer;}
#simp .album-actions button {flex:1;}
#simp .album-actions button:disabled {opacity:.4;cursor:default;}
#simp .album-actions button:not(:disabled):hover,#simp .album-toggle:hover,#simp .library-retry:hover {background:#29445a;}
#simp .album-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;}
#simp .album-card {position:relative;display:flex;flex-direction:column;min-width:0;cursor:pointer;}
#simp .album-cover {position:relative;display:grid;place-items:center;aspect-ratio:1;isolation:isolate;border:2px solid transparent;border-radius:9px;background:linear-gradient(145deg,#326e99,#173249);color:#e2f4ff;font-weight:750;font-size:22px;letter-spacing:.06em;opacity:.72;transition:opacity .15s,border-color .15s;}
#simp .album-cover:before {content:'';position:absolute;inset:15%;border:1px solid #ffffff35;border-radius:50%;box-shadow:0 0 0 8px #ffffff08,0 0 0 16px #ffffff06;z-index:-1;}
#simp .album-cover img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:7px;}
#simp .album-card:nth-child(4n+2) .album-cover {background:linear-gradient(145deg,#9b7033,#49341c);}
#simp .album-card:nth-child(4n+3) .album-cover {background:linear-gradient(145deg,#a84c67,#442538);}
#simp .album-card:nth-child(4n) .album-cover {background:linear-gradient(145deg,#7958a8,#30254b);}
#simp .album-card.is-selected .album-cover {opacity:1;border-color:#76bff0;}
#simp .album-card:hover .album-cover {opacity:1;}
#simp .album-card input {position:absolute;top:7px;right:7px;width:18px;height:18px;accent-color:#84caf7;cursor:pointer;z-index:1;}
#simp .album-card:focus-within .album-cover {outline:2px solid #b5e1ff;outline-offset:3px;}
#simp .album-name {font-size:12px;line-height:1.4;margin-top:8px;overflow-wrap:anywhere;font-weight:600;color:#e1e9ef;}
#simp .album-count {font-size:11px;margin-top:4px;color:#93a8ba;}
#simp .album-hint {margin:24px 0 0;color:#839caf;font-size:11px;line-height:1.7;}
@media (max-width:640px) {
  html body {overflow-x:hidden;overflow-y:auto;background:#17212b;}
  #simp {display:flex;flex-direction:column;height:auto;min-height:100vh;min-height:100dvh;overflow:visible;}
  #simp .album-toolbar {position:sticky;top:0;z-index:2;flex-shrink:0;}
  #simp .simp-albums {padding:14px 12px;border-right:0;border-bottom:1px solid #293949;overflow:visible;flex-shrink:0;}
  #simp .album-heading-row {margin-bottom:10px;}
  #simp #album-heading {font-size:16px;}
  #simp .library-eyebrow,#simp .album-selection-summary,#simp .album-hint {display:none;}
  #simp .album-actions {margin-bottom:14px;}
  #simp .album-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px;}
  #simp .album-cover {font-size:18px;}
  #simp .album-card input {width:16px;height:16px;top:5px;right:5px;}
  #simp .album-name {font-size:11px;}
  #simp .simp-main {flex:none;}
  #simp .simp-playlist {flex:none;height:clamp(180px,38dvh,320px);}
  #simp .simp-album {padding:16px 20px 5px;}
}
@media (max-width:360px) {
  #simp .simp-controls {gap:8px;}
  #simp .simp-controls .simp-tracker {flex-basis:100%;order:3;margin-left:0;}
  #simp .simp-controls .simp-others {margin-left:auto;}
}

.app-header a:focus-visible,.app-install:focus-visible{outline:2px solid #89cfff;outline-offset:4px;}
@media (min-width:641px){
  body{display:flex;flex-direction:column;height:100vh;height:100dvh;}
  body>div{flex:1;min-height:0;}
  #simp{height:100%;}
}