:root{--bg1:#0b1220;--bg2:#0f172a;--card:#111827cc;--muted:#94a3b8;--text:#e2e8f0;--brand:#0ea5e9;--brand2:#22d3ee;--accent:#10b981}
/* Light theme overrides */
[data-theme="light"]{--bg1:#f8fafc;--bg2:#eef2f7;--card:#ffffffcc;--muted:#475569;--text:#0f172a;--brand:#0ea5e9;--brand2:#38bdf8;--accent:#059669}
*{box-sizing:border-box}
/* Loading skeleton for instant perceived speed on iPhone */
/* skeleton removed */
html,body{height:100%;overflow-x:hidden}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;background:radial-gradient(1200px 800px at 20% -10%,#0b3b66 0%,transparent 60%),radial-gradient(800px 600px at 120% 0%,#0a3d2e 0%,transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text);padding-bottom:env(safe-area-inset-bottom);-webkit-text-size-adjust:100%}
.noselect, html, body, .container, .controls, .list, .item, button, .btn, .icon-btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,#search,#freq{-webkit-user-select:text;user-select:text}
.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem;justify-content:space-between;padding:calc(env(safe-area-inset-top) + .75rem) calc(env(safe-area-inset-right) + 1rem) .75rem calc(env(safe-area-inset-left) + 1rem);background:linear-gradient(180deg,#0b1220cc,#0b122000);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid #ffffff14}
.brand{display:flex;align-items:center;gap:.6rem}
.brand-icon{width:28px;height:28px;border-radius:6px;box-shadow:0 0 0 2px #ffffff0f}
.brand-name{margin:0;font-size:1.05rem;letter-spacing:.2px}
.header-actions{display:flex;align-items:center;gap:.25rem}
.header-actions{margin-left:auto}
.icon-btn{appearance:none;border:none;background:transparent;color:#94a3b8;border-radius:8px;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.icon-btn:hover{color:#e2e8f0;background:#0b122033}
.icon-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.svg-icon{width:20px;height:20px;display:block;fill:currentColor}
.app-header::after{content:"";}
.search{appearance:none;flex:1;min-width:0;max-width:420px;border:1px solid #334155;background:#0b1220;padding:.6rem .8rem;border-radius:10px;color:var(--text);outline:none}
.search:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0ea5e933}
.app-header{flex-wrap:wrap}
@media(max-width:480px){
  .app-shell{max-width:420px}
  .now-playing .controls{padding:.4rem}
  .app-header{backdrop-filter:none;box-shadow:0 2px 6px rgba(2,6,23,.12)}
  /* iOS rendering fixes: disable heavy paint effects and reduce shadows to avoid blanking during scroll */
  .app-header, .modal-overlay, .modal-panel, .filters, .list, .now-playing, .controls, .bgfx-row {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 4px rgba(2,6,23,.08) !important;
  }
  /* Force GPU compositing and hint for fewer repaints on iOS Safari */
  .list, .items, .controls, .now-playing { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; }
  /* Ensure scrolling doesn't rely on -webkit-overflow-scrolling which can trigger repaint issues */
  .modal-body{overflow:auto;}
}
@media(max-width:430px){
  .freq-row{flex-direction:row;flex-wrap:wrap}
  .freq-row > *{flex:0 0 auto}
  #freq{width:100%;max-width:none}
  .freq-row #play,.freq-row #stop{flex:1}
  /* Make timer dropdown only as wide as its content on narrow screens */
  .timer-select{flex:0 0 auto;width:auto;min-width:0} /* removed order so it stays left */
  #timerCountdown{margin-top:.4rem}
  .multi-actions-right{flex-wrap:wrap}
  .multi-actions-right .btn{flex:1 1 48%}
  .bgfx-row{flex-wrap:wrap}
  .bgfx-row .select, .bgfx-row input[type=range]{flex:1 0 100%}
  .filters{flex-direction:column;align-items:flex-start}
  .filter-row{width:100%}
  .sel-count{font-size:.8rem}
  /* Performance tweaks for iPhone: reduce heavy blur & large shadows */
  .app-header{-webkit-backdrop-filter:none;backdrop-filter:none}
  .controls, .list{box-shadow:0 4px 14px #00000055}
}
.container{max-width:1000px;margin:1rem auto;padding:0 calc(env(safe-area-inset-right) + 1rem) 0 calc(env(safe-area-inset-left) + 1rem);display:grid;grid-template-columns:1fr;gap:1rem}
.controls{background:var(--card);border:1px solid #ffffff14;border-radius:16px;padding:1rem;box-shadow:0 10px 30px #00000044}
.controls > .search{width:100%;margin-bottom:.75rem}
.search-wrap{position:relative}
.search-wrap .search{width:100%;padding-right:2.2rem}
.search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:1px solid #334155;border-radius:8px;background:#0b1220;color:#94a3b8;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.search-clear:hover{color:#e2e8f0;background:#0b122033}
.search-clear:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.multi-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
  /* Allow action buttons to wrap on very narrow screens */
  .multi-actions-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;white-space:normal}

/* Secondary action row (Save/Create) */
.multi-actions-secondary{margin-top:.4rem}
.multi-actions-secondary .multi-actions-right{gap:.5rem;flex-wrap:wrap}
.multi-actions-secondary .btn{padding:.4rem .6rem}
.freq-input label{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.35rem}
.freq-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
#freq{flex:0 0 auto;width:11ch;max-width:140px;background:#0b1220;color:var(--text);border:1px solid #334155;border-radius:10px;padding:.6rem .7rem;outline:none}
#freq,.search,.select,input,select,button,textarea{font-size:16px}
#freq:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0ea5e933}
.timer-input{background:#0b1220;color:var(--text);border:1px solid #334155;border-radius:10px;padding:.5rem .7rem;min-width:9ch}
.btn{appearance:none;border:1px solid #334155;background:#0b1220;color:var(--text);border-radius:10px;padding:.6rem .9rem;cursor:pointer}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.select:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand2));border:1px solid #334155;color:#001018;font-weight:700;box-shadow:0 6px 16px rgba(14,165,233,.12)}
.btn.sm{padding:.4rem .6rem;font-size:.85rem;border-radius:8px}

/* Improve multi-action buttons: consistent height, spacing and visual hierarchy */
.multi-actions-right .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .6rem;
  font-size:0.95rem;
  line-height:1.2;
  min-height:40px;
  border-radius:10px;
  white-space:normal;
  width:auto;
  text-align:center;
}
.multi-actions-right .btn.sm{padding:.35rem .55rem;font-size:0.9rem}
.multi-actions-right .btn[disabled]{opacity:.55;cursor:not-allowed}
.multi-actions-right .btn.primary{padding:.45rem .7rem;font-weight:700;box-shadow:0 6px 16px rgba(14,165,233,.12);background:linear-gradient(180deg,var(--brand),var(--brand2));border:1px solid #334155;color:#001018}
.multi-actions-right .btn:not(.primary){background:transparent;border:1px solid #334155}

/* Tweak selected count alignment */
.sel-count{display:inline-flex;align-items:center;gap:.5rem;padding-right:.4rem}

/* Make the favourites checkbox compact and positioned logically */
.fav-toggle{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-size:0.95rem}
.fav-toggle input[type=checkbox]{width:16px;height:16px;margin:0}
.sliders{margin-top:.8rem}
#volume{width:100%;appearance:none;height:6px;background:#0b1220;border:1px solid #334155;border-radius:999px}
.now-playing{margin-top:.6rem;color:var(--muted);font-size:.9rem;overflow-wrap:anywhere;word-break:break-word}
.timer-countdown{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .6rem;border:1px solid #334155;border-radius:10px;background:#0b1220;color:#e2e8f0;min-width:8.5ch;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-variant-numeric:tabular-nums;letter-spacing:.5px;box-shadow:inset 0 0 0 1px #ffffff08,0 1px 0 #0005;text-shadow:0 0 8px rgba(14,165,233,.35),0 0 2px rgba(14,165,233,.7)}
.timer-countdown.disabled{opacity:.5;filter:saturate(.6)}
.multi-actions{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
/* Consolidated definition: base wrapping behavior & flex layout for side-by-side buttons */
.multi-actions-right{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
  width:100%;
}
.multi-actions-right .btn,
.multi-actions-secondary .multi-actions-right .btn{
  flex:0 1 calc(50% - 0.35rem);
  max-width:calc(50% - 0.35rem);
  box-sizing:border-box;
}

/* New 2x2 grid for action buttons: 2 rows, 2 columns */
.actions-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin-top:.6rem;
}
.actions-grid .btn{
  padding:.5rem .8rem;
  font-size:1rem;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:normal;
  border-radius:10px;
}
.actions-grid .btn.primary{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  border:1px solid #334155;
  color:#001018;
  font-weight:700;
  box-shadow:0 6px 16px rgba(14,165,233,.12);
}
.actions-grid .btn:not(.primary){
  background:transparent;
  border:1px solid #334155;
}

@media(max-width:480px){
  .actions-grid{flex-direction:column;align-items:stretch}
  .actions-col{flex:0 0 auto}
}
.sel-count{color:var(--muted);font-size:.9rem}
.filters{margin-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.filter-row{display:flex;align-items:center;gap:.5rem}
.filter-col{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.select{appearance:none;background:#0b1220;color:var(--text);border:1px solid #334155;border-radius:10px;padding:.5rem .7rem}
.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px #0ea5e933}
.fav-toggle{color:var(--muted);display:flex;align-items:center;gap:.4rem}
.timer-custom{display:inline-flex;align-items:center;gap:.35rem}

/* Group the timer controls so dropdown, custom inputs and display stay on one line */
.timer-group{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;white-space:nowrap}
.timer-group .select{padding:.5rem .7rem;font-size:.85rem;min-width:0;height:40px;display:inline-flex;align-items:center}
.timer-group .timer-select{flex:0 0 auto;width:auto}
.timer-group #timerCustomWrap .select{padding:.5rem .7rem;font-size:.85rem;height:40px;display:inline-flex;align-items:center}
.timer-group .timer-countdown{padding:.5rem .7rem;font-size:.85rem;min-width:6.5ch;height:40px;display:inline-flex;align-items:center;justify-content:center}

@media(max-width:430px){
  /* small adjustments inside the small-screen media query */
  .timer-group .select{font-size:.8rem;padding:.45rem .65rem;height:36px}
  .timer-group .timer-countdown{font-size:.8rem;padding:.45rem .65rem;min-width:5.5ch;height:36px}
}
/* Extra compact tweaks for very narrow viewports (iPhone) to avoid layout zoom/overflow */
@media(max-width:420px){
  .controls{padding:.6rem .6rem}
  .search{padding:.45rem .55rem}
  .brand-name{font-size:1rem}
  .freq-row{gap:.35rem}
  #freq{width:7.5ch;max-width:86px;padding:.45rem .55rem}
  .btn{padding:.3rem .5rem;font-size:14px}
  .btn.primary{padding:.4rem .6rem}
  .timer-group .select{font-size:12px;padding:.2rem .35rem}
  .timer-group .timer-countdown{font-size:11px;padding:.2rem .35rem;min-width:4.5ch}
  .multi-actions-right .btn{padding:.28rem .45rem;min-height:36px}
  .multi-actions-right{gap:.35rem}
  .filter-row label, .filter-row .select{font-size:14px}
  .filter-col{gap:.2rem}
  .fav-toggle{font-size:14px}
  .container{padding-left:calc(env(safe-area-inset-left) + .6rem);padding-right:calc(env(safe-area-inset-right) + .6rem)}
}
.bgfx-controls{margin-top:.8rem;display:flex;flex-direction:column;gap:.35rem}
.bgfx-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.bgfx-row input[type=range]{flex:1;margin-left:.6rem;min-width:90px}
.bgfx-select{min-width:0;flex:1}
.list{background:var(--card);border:1px solid #ffffff14;border-radius:16px;padding:.25rem .25rem;box-shadow:0 10px 30px #00000044}
.section{position:relative}
.section-head{position:sticky;top:calc(56px + env(safe-area-inset-top));background:#0b1220e6;padding:.35rem .6rem;border-radius:8px;margin:.6rem;display:inline-block;color:#93c5fd;border:1px solid #1e293b}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.25rem .5rem;padding:.25rem .5rem .75rem}
.item{display:flex;align-items:center;justify-content:space-between;padding:.7rem .8rem;border:1px solid #334155;border-radius:12px;background:#0b1220}
.item:hover{border-color:#475569;background:#0b1525}
.item:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}
.item .left{display:flex;align-items:flex-start;gap:.6rem}
.item .pick{width:18px;height:18px;accent-color:var(--brand);margin-top:.1rem}
.item .star{border:none;background:transparent;color:#94a3b8;padding:2px;cursor:pointer;min-width:28px;height:28px;line-height:1;font-size:18px;-webkit-tap-highlight-color:transparent}
.item .star:hover{color:#cbd5e1}
.item .star.active{color:#fbbf24}
.item .star:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
.item .text{display:flex;flex-direction:column;gap:.2rem}
.item .text,.item .name,.item .hz{-webkit-user-select:none;user-select:none;cursor:default}
.item .name{font-weight:600}
.item .desc{color:var(--muted);font-size:.85rem;line-height:1.2}
.item .tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.1rem}
.item .tag{font-size:.75rem;color:#a5b4fc;background:#0b1220;border:1px solid #334155;border-radius:999px;padding:.15rem .5rem}
.item .hz{color:var(--accent)}
@media(min-width:900px){.container{grid-template-columns:360px 1fr}.controls{position:sticky;top:72px;height:max-content}}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50}
.modal-overlay{position:absolute;inset:0;background:#0008;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-panel{position:relative;z-index:1;max-width:560px;margin:10vh auto;background:var(--card);border:1px solid #ffffff1a;border-radius:16px;box-shadow:0 20px 60px #0008;padding:1rem;max-height:calc(100vh - 20vh);display:flex;flex-direction:column}
  .modal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
  .modal-body{display:grid;gap:.75rem;overflow:auto;flex:1 1 auto;min-height:0}
  .modal-foot{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.setting-label{color:var(--muted)}
.setting-field{display:flex;gap:1rem;align-items:center}
.setting-field.column-stack{flex-direction:column;align-items:stretch;gap:.35rem}
.setting-field.flex-fill{flex:1}
.setting-field.compact-gap{gap:.4rem;flex-wrap:wrap}
.full-width-input{width:100%}
.audio-hidden{opacity:0;position:absolute;pointer-events:none;z-index:-1;width:1px;height:1px}
.radio{display:flex;align-items:center;gap:.35rem}

/* Light theme component overrides */
[data-theme="light"] .search,
[data-theme="light"] #freq,
[data-theme="light"] .select{background:#ffffff;border-color:#cbd5e1;color:#0f172a}
[data-theme="light"] .btn{background:#ffffff;border-color:#cbd5e1;color:#0f172a}
[data-theme="light"] .btn.primary{color:#001018}
[data-theme="light"] .btn[disabled]{opacity:.55}
[data-theme="light"] #volume{background:#e5e7eb;border-color:#cbd5e1}
[data-theme="light"] .now-playing{color:#475569}
[data-theme="light"] .app-header{background:linear-gradient(180deg,#ffffffcc,#ffffff00);border-bottom:1px solid #e2e8f0}

/* ensure header action icons sit flush to the right and are more visible in light theme */
[data-theme="light"] .header-actions{margin-left:auto}
[data-theme="light"] .header-actions .icon-btn{color:#0f172a}
[data-theme="light"] .header-actions .icon-btn:hover{color:#0f172a;background:#ffffff10}
[data-theme="light"] .section-head{background:#ffffffcc;color:#334155;border-color:#cbd5e1}
[data-theme="light"] .item{background:#ffffff;border-color:#e2e8f0}
[data-theme="light"] .item:hover{background:#f8fafc;border-color:#e2e8f0}
[data-theme="light"] .item .tag{background:#f1f5f9;border-color:#cbd5e1;color:#475569}
[data-theme="light"] .item .desc{color:#334155}
[data-theme="light"] .list{border-color:#e2e8f0}
[data-theme="light"] .search::placeholder{color:#64748b}
[data-theme="light"] .select:disabled,[data-theme="light"] .btn[disabled]{background:#f1f5f9;color:#94a3b8;border-color:#e2e8f0}
[data-theme="light"] .timer-input{background:#ffffff;border-color:#cbd5e1;color:#0f172a}
[data-theme="light"] .timer-countdown{background:#ffffff;border-color:#cbd5e1;color:#0f172a;text-shadow:none}
[data-theme="light"] .search-clear{background:#ffffff;border-color:#cbd5e1;color:#64748b}

/* Adjust Library and Custom buttons to be side by side */