:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #070708; color: #f5f5f7; min-height: 100vh; }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app { width: min(680px, 100%); margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)); }
header { display:flex; align-items:center; justify-content:space-between; padding: 6px 2px 18px; }
.brand { font-weight: 800; letter-spacing: .12em; font-size: 13px; }
.status { color: #8e8e93; font-size: 13px; }
.paste-card, .player-card, .library-card { background:#121214; border:1px solid #242427; border-radius:22px; padding:16px; margin-bottom:14px; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
label { display:block; font-size:13px; color:#a1a1a6; margin: 0 0 8px 3px; }
.input-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
input[type=url] { width:100%; min-width:0; background:#1c1c1e; color:#fff; border:1px solid #343438; border-radius:14px; padding:14px 13px; outline:none; }
input[type=url]:focus { border-color:#666; }
button { border:0; cursor:pointer; }
.secondary { background:#2c2c2e; color:#fff; padding:0 15px; border-radius:14px; }
.primary { width:100%; margin-top:10px; padding:14px; border-radius:14px; background:#f5f5f7; color:#0a0a0a; font-weight:750; }
.primary:disabled { opacity:.5; }
.hint { margin:10px 4px 0; font-size:12px; color:#707075; line-height:1.45; }
.hidden { display:none; }
.cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; background:#1c1c1e; }
.meta { padding:13px 3px 10px; }
h1 { font-size:18px; margin:0 0 6px; line-height:1.25; }
.meta p { margin:0; color:#8e8e93; font-size:13px; }
.time-row { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:8px; font-size:11px; color:#8e8e93; }
#seek { width:100%; }
.controls { display:flex; justify-content:center; align-items:center; gap:26px; padding:18px 0 12px; }
.round, .play { display:grid; place-items:center; border-radius:999px; color:#fff; background:#2c2c2e; }
.round { width:52px; height:52px; font-size:14px; }
.play { width:74px; height:74px; font-size:30px; background:#fff; color:#000; padding-left:4px; }
.player-actions { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:8px 2px 0; }
.action-btn { min-height:38px; background:#232326; color:#eee; border-radius:11px; padding:8px 12px; font-size:13px; text-align:left; }
.action-btn.selected { background:#f5f5f7; color:#090909; font-weight:700; }
.speed-control { display:flex; align-items:center; gap:8px; color:#aaa; font-size:13px; }
select { background:#1c1c1e; color:#fff; border:1px solid #343438; border-radius:10px; padding:7px 10px; }
.tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; background:#1c1c1e; border-radius:13px; padding:4px; }
.tab { background:transparent; color:#8e8e93; padding:9px 5px; border-radius:10px; font-size:12px; font-weight:650; white-space:nowrap; }
.tab span { opacity:.7; margin-left:2px; }
.tab.active { background:#343438; color:#fff; }
.section-tools { display:flex; justify-content:space-between; align-items:center; min-height:38px; padding:8px 2px 0; color:#6e6e73; font-size:11px; }
.link-btn { background:transparent; color:#8e8e93; padding:6px; }
.link-btn.danger { color:#a06a6a; }
.collection.empty { color:#6e6e73; font-size:13px; padding:13px 2px 5px; }
.collection-item { display:grid; grid-template-columns:62px 1fr auto; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #242427; }
.collection-item:first-child { border-top:0; }
.collection-item img { width:62px; height:52px; object-fit:cover; border-radius:9px; background:#1c1c1e; cursor:pointer; }
.item-main { min-width:0; cursor:pointer; }
.item-title { font-size:13px; line-height:1.3; font-weight:650; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.item-sub { font-size:10.5px; line-height:1.35; color:#777; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-actions { display:flex; align-items:center; gap:6px; }
.replay-btn { min-width:58px; height:32px; padding:0 10px; border-radius:999px; background:#2c2c2e; color:#fff; font-size:12px; font-weight:650; white-space:nowrap; }
.replay-btn:active { background:#3a3a3c; }
.delete-btn { width:30px; height:30px; border-radius:999px; background:#202023; color:#8e8e93; font-size:20px; line-height:1; }
.delete-btn:active { background:#343438; }
@media (max-width:390px) {
  .app { padding-left:12px; padding-right:12px; }
  .paste-card, .player-card, .library-card { border-radius:19px; padding:14px; }
  .tab { font-size:11px; }
  .player-actions { grid-template-columns:1fr; }
  .speed-control { justify-content:space-between; }
}
@media (display-mode: standalone) { .hint { display:none; } }