.app-body svg[hidden]{ display:none !important; }

.app-body{
  margin:0; min-height:100vh; background: var(--bg); color: var(--text);
  display:flex; flex-direction:column;
  padding-bottom: env(safe-area-inset-bottom);
}

.app-header{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px; padding-top: calc(14px + env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.app-brand{ display:flex; align-items:center; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: .95rem; }
.app-web-link{ font-size: .8rem; color: var(--text-faint); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.app-web-link:hover{ color: var(--ember-deep); border-color: var(--ember); }

.app-main{
  flex:1; max-width: 560px; width:100%; margin: 0 auto;
  padding: 16px 14px 100px;
}

.app-search-bar{ margin-bottom: 12px; }
#appSearch{
  width: 100%; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: .95rem;
}
#appSearch::placeholder{ color: var(--text-faint); }
#appSearch:focus{ outline: none; border-color: var(--forest); }

.app-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 8px; }
.app-status{ color: var(--text-faint); text-align:center; padding: 30px 0; }

.app-row{
  display:flex; align-items:center; gap: 12px; padding: 10px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.app-row:active{ background: var(--surface-2); }
.app-row.playing{ border-color: var(--ember); background: var(--surface-2); }
.app-row-thumb{ width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink:0; }
.app-row-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap: 2px; }
.app-row-title{
  font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.app-row.playing .app-row-title{ color: var(--ember-deep); }
.app-row-meta{ font-size: .78rem; color: var(--text-faint); }
.app-row-play{
  width: 38px; height: 38px; border-radius: 50%; flex-shrink:0; border: none; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
  background: var(--ember); color: #fff;
}
.app-row-play svg{ width: 18px; height: 18px; }

.app-player{
  position: fixed; left:0; right:0; bottom:0; z-index: 30;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 0; margin:0; border-left:0; border-right:0; border-bottom:0;
  padding-bottom: env(safe-area-inset-bottom);
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.app-player-progress{ height: 4px; background: var(--surface-2); }
.app-player-progress-fill{ height:100%; background: var(--ember); width:0%; }
.app-player-row{ display:flex; align-items:center; gap: 12px; padding: 10px 14px; max-width: 560px; margin: 0 auto; }
.app-player-art{ width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink:0; }
.app-player-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap: 2px; }
.app-player-title{
  font-family: var(--font-head); font-weight: 600; font-size: .85rem; color: var(--text);
  white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.app-player-time{ font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.app-mini-playpause{ width: 38px; height: 38px; flex-shrink:0; }
.app-mini-playpause svg{ width: 18px; height: 18px; }

.app-ctrl-btn{
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: var(--text-dim); display:flex; align-items:center; justify-content:center; cursor: pointer;
}
.app-ctrl-btn svg{ width: 22px; height: 22px; }
.app-ctrl-btn:hover{ color: var(--ember-deep); }
.app-ctrl-main{
  background: var(--ember); color: #fff;
}
.app-ctrl-main:hover{ color: #fff; background: var(--ember-hover); }
.app-ctrl-big{ width: 62px; height: 62px; }
.app-ctrl-big svg{ width: 30px; height: 30px; }

/* ---------- Now playing sheet ---------- */
.app-sheet{ position: fixed; inset: 0; z-index: 40; }
.app-sheet-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,0.55); opacity:0; transition: opacity .28s ease;
}
.app-sheet.open .app-sheet-backdrop{ opacity:1; }
.app-sheet-panel{
  position:absolute; left:0; right:0; bottom:0; max-width: 560px; margin: 0 auto;
  height: 88vh; max-height: 720px; background: var(--paper); color: var(--ink);
  border-radius: 24px 24px 0 0; border: 1px solid var(--border); border-bottom:0;
  display:flex; flex-direction:column; overflow:hidden;
  transform: translateY(100%); transition: transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}
.app-sheet.open .app-sheet-panel{ transform: translateY(0); }

.app-sheet-handle{ display:flex; align-items:center; justify-content:center; position:relative; padding: 12px 0 4px; flex-shrink:0; }
.app-sheet-grip{ width: 40px; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.15); }
.app-sheet-close{
  position:absolute; right: 14px; top: 8px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: var(--paper-2); color: var(--ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.app-sheet-close svg{ width: 16px; height: 16px; }

.app-sheet-scroll{ flex:1; overflow-y:auto; padding: 8px 24px 20px; text-align:center; }
.app-sheet-cover{
  width: 190px; height: 190px; border-radius: 18px; object-fit: cover; margin: 8px auto 18px;
  box-shadow: 0 20px 40px -14px rgba(0,0,0,0.35);
}
.app-sheet-tag{
  display:inline-block; text-transform: uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700;
  color: var(--ember-deep); margin-bottom: 8px;
}
.app-sheet-title{ font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 6px; color: var(--ink); }
.app-sheet-meta{ color: var(--ink-faint); font-size: .82rem; margin-bottom: 20px; }
.app-sheet-description{ text-align: justify; color: var(--ink-dim); font-size: .92rem; line-height: 1.65; }
.app-sheet-description p{ margin: 0 0 1em; }

.app-sheet-controls{
  flex-shrink:0; padding: 16px 24px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,0,0,0.1); background: var(--paper-2);
}
.app-sheet-progress{ height: 5px; border-radius: 3px; background: rgba(0,0,0,0.12); cursor:pointer; margin-bottom: 8px; }
.app-sheet-progress-fill{ height:100%; border-radius: 3px; background: var(--ember); width:0%; }
.app-sheet-timerow{ position:relative; display:flex; align-items:center; justify-content:center; margin-bottom: 12px; min-height:26px; }
.app-sheet-time{ text-align:center; font-size: .78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.app-speed{
  position:absolute; right:0; top:50%; transform:translateY(-50%); min-width:44px; height:26px; padding:0 8px;
  border:1.5px solid rgba(0,0,0,0.2); border-radius:7px; background:transparent; color: var(--ink-dim);
  font:600 .8rem var(--font-body, inherit); cursor:pointer;
}
.app-speed:hover{ border-color: var(--forest-light); color: var(--ink); }
.app-sheet-buttons{ display:flex; align-items:center; justify-content:center; gap: 14px; }
.app-sheet-controls .app-ctrl-btn:not(.app-ctrl-main){ color: var(--ink-dim); }
.app-sheet-controls .app-ctrl-btn:not(.app-ctrl-main):hover{ color: var(--ink); }
.app-ctrl-skip{ width:44px; height:44px; }
.app-ctrl-skip svg{ width:100%; height:100%; }

body.sheet-open{ overflow: hidden; }

@media (min-width: 640px){
  .app-main{ padding-top: 24px; }
}

.app-season-tabs{ margin: 0 -14px 12px; padding: 0 14px 4px; }
.app-season-tabs .season-chip{ padding: 7px 13px; font-size: .8rem; }

.app-share-host{ position:absolute; left:0; top:50%; transform:translateY(-50%); }
.app-share-host .pp-share{ margin:0; }
.app-share-host .pp-share-btn{
  width:36px; height:36px; border:0; background:transparent; color: var(--ink-dim); border-radius:10px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.app-share-host .pp-share-btn[aria-expanded="true"]{ background: rgba(0,0,0,0.06); color: var(--ink); }
.app-share-host .pp-share-btn svg{ width:24px; height:24px; }
.app-share-host .pp-share-pop{ left:0; right:auto; border:1px solid rgba(0,0,0,0.08); }
.app-share-host .pp-share-pop a, .app-share-host .pp-share-pop button{ border:0; background:transparent; cursor:pointer; padding:0; }