/* ==========================================================================
   Jukebokks — Clean, Consolidated, Responsive Styles
   - Dark Spotify-inspired theme
   - Full responsiveness (phone / tablet / desktop + landscape tune)
   - White idle glow (universal, visible despite overflow) with same "size" as green pulse
   - Green playing glow preserved (matches original feel)
   - Organized by components, no duplicate rules
   ========================================================================== */

/* ========== 1) Design Tokens (CSS variables) ========== */
:root{
  /* Colors */
  --bg-main:#121212;
  --surface-translucent:rgba(28,28,30,.7);
  --surface-raised:#1c1c1e;
  --surface-raised-hover:#232326;
  --spotify-green:#1DB954;
  --text-primary:#fff;
  --text-secondary:#b3b3b3;
  --border-color:rgba(255,255,255,.15);

  /* Radii */
  --pill-radius:999px;
  --card-radius:16px;

  /* Typography */
  --font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;

  /* Layout */
  --header-h:56px;
  --tabsbar-h: var(--header-h);

  /* Grid tokens (desktop defaults; overridden in media queries) */
  --pad-minw: 220px;
  --pad-minh: 120px;
  --grid-gap: 20px;
  --chip-h: 28px;        /* bank-tab height */
  --chip-font: 14px;
}

/* ========== 2) Base Resets & Global ========== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--font-family);
  overflow:hidden; /* app uses internal scroller */
}

/* Main scroll container */
.main-content{
  padding:0 24px 24px;
  width:100%;
  max-width:none;
  margin:0;
  overflow-y:auto;
  height:calc(100vh - var(--header-h));
  height:calc(100dvh - var(--header-h));
  scrollbar-width:none;
}
.main-content::-webkit-scrollbar{ display:none }

/* Utilities */
.hidden{ display:none !important }
.center{ display:flex; align-items:center; justify-content:center }

/* ========== 3) Buttons ========== */
.btn{
  background:var(--surface-raised);
  color:var(--text-primary);
  border:1px solid var(--border-color);
  padding:10px 16px;
  border-radius:var(--pill-radius);
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all .2s;
  white-space:nowrap;
}
.btn:hover{ background:var(--surface-raised-hover); border-color:var(--text-secondary) }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn-primary{ background:var(--spotify-green); color:#000; border:none; font-weight:700 }
.btn-primary:hover{ background:#1ed760 }
.btn.active{ background:var(--text-primary); color:var(--bg-main) }
.circle{ width:36px; height:36px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center }

/* ========== 4) App Shell & Header ========== */
.app-shell{ min-height:100vh; padding-top:var(--header-h); position:relative }
#app-container{ transition: opacity .3s ease }
.app-header{
  position:fixed; inset:0 0 auto 0;
  height:var(--header-h); z-index:5000;
  display:flex; align-items:center; gap:16px; flex-wrap:nowrap;
  padding:8px 24px;
  background:rgba(18,18,18,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-color);
}
.header-title{ display:flex; align-items:center; gap:8px; flex-grow:1 }
.header-title .title{ font-weight:700; letter-spacing:.2px }
.header-title .ver{ font-size:12px; color:var(--text-secondary) }
.header-controls,.app-header .right{ display:flex; align-items:center; gap:10px }

/* Brand (logo + name) */
.brand-name{ font-weight:800; letter-spacing:.3px }
.brand-logo{ display:block; object-fit:contain }
.brand-logo--header{ height:44px; width:auto; margin:0; padding:0; border-radius:8px }
@media (max-width:600px){ .brand-logo--header{ height:36px } }

/* ========== 5) Login View ========== */
.login-view{
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(1200px 1200px at 80% -20%, rgba(29,185,84,.18), transparent 60%),
    radial-gradient(1000px 1000px at -10% 110%, rgba(255,255,255,.06), transparent 50%),
    var(--bg-main);
  text-align:center;
}
.login-view h1{ font-size:2.4rem; margin:0; color:var(--spotify-green); letter-spacing:.2px }
#login-view > h1,
#login-view > p,
#login-view > button{ margin:6px 0 }
.login-card{
  width:100%; max-width:540px;
  background:rgba(28,28,30,.78);
  border:1px solid var(--border-color);
  border-radius:16px;
  backdrop-filter:blur(20px);
  padding:36px 40px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.login-brand{ display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:6px }
.login-brand .logo{
  width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1ed760,#1DB954 55%,#169b46);
  color:#000; font-weight:900; box-shadow:0 6px 18px rgba(29,185,84,.35)
}
.login-brand .name{ font-weight:800; font-size:1.6rem; letter-spacing:.3px }
.login-card .tagline{ margin:12px 0 24px; color:var(--text-secondary); font-size:1.06rem }
.login-card .small{ margin-top:16px; font-size:.85rem; color:var(--text-secondary) }
.btn-google{ background:#fff; color:#333; border:1px solid #ccc; border-radius:var(--pill-radius) }
.btn-google:hover{ background:#f1f1f1 }

/* ========== 6) Tabs (Banks) ========== */
#bank-tabs{
  height: var(--tabsbar-h);
  display:flex; align-items:center; gap:8px;
  padding-inline:24px;
  padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  white-space:nowrap;
  overflow-x:auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  scrollbar-width:none;
}
#bank-tabs::-webkit-scrollbar{ height:0 !important }
.bank-tab{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--chip-h); line-height:var(--chip-h);
  padding:0 12px;
  font-size:var(--chip-font); font-weight:600;
  border-radius:var(--pill-radius);
  background:var(--spotify-green);
  color:#000; border:none; cursor:pointer;
}
.bank-tab:hover{ background:#1ed760; color:#000 }
.bank-tab.active{ color:var(--bg-main); background:var(--text-primary) }

/* --- Edit-pen på bank-tab: visa ENDAST på aktiv tab i admin-läge --- */

/* Basutseende för penn-knappen, men dold */
.bank-tab .edit-pen{
  display:none;                 /* helt dold som default */
  align-items:center;
  justify-content:center;
  width:22px; height:22px;
  margin-left:8px;
  border-radius:999px;
  background:transparent;
  border:1px solid rgba(0,0,0,.08);
  line-height:0;
  pointer-events:none;          /* inte klickbar när dold */
  opacity:0;
  transition:opacity .15s ease, background .15s ease, border-color .15s ease;
  position:relative;
  z-index:2001;
}

/* Hoverstil (används bara när knappen är synlig) */
.bank-tab .edit-pen:hover{
  background:rgba(0,0,0,.06);
}

/* När tabben är aktiv i admin-läge → visa pennan och gör den klickbar */
body.admin-mode .bank-tab.active .edit-pen{
  display:inline-flex;
  pointer-events:auto;
  opacity:1;
  /* liten kontur i aktivt läge för kontrast */
  background:rgba(0,0,0,.10);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.18);
}

/* För säkerhets skull: på inaktiva tabs i admin-läge är pennan alltid döljd & oklickbar */
body.admin-mode .bank-tab:not(.active) .edit-pen{
  display:none !important;
  pointer-events:none !important;
  opacity:0 !important;
}


/* ========== 7) Grid & Pads ========== */
.grid{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--pad-minw), 1fr));
}
.pad{
  position:relative;
  overflow:hidden;
  border-radius:var(--card-radius);
  padding:16px;
  min-height:var(--pad-minh);
  color:#fff;
  background:var(--surface-raised);
  border:2px solid transparent;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition: transform .4s ease, opacity .4s ease, filter .4s ease, box-shadow .2s ease;
}
.pad:hover{ transform:scale(1.03); box-shadow:0 8px 20px rgba(0,0,0,.4) }
.pad .pad-name{ font-size: clamp(13px, 1.4vw, 16px) }

/* Tools shown in admin mode */
.pad .tools{ position:absolute; top:10px; right:10px; display:none; gap:6px; z-index:10 }
body.admin-mode .pad .tools{ display:flex }
.toolbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:rgba(0,0,0,.40); border:1px solid rgba(255,255,255,.18);
  color:#fff; line-height:0; cursor:pointer;
  transition:filter .15s ease, background .15s ease;
}
.toolbtn:hover{ background:rgba(0,0,0,.55) }

/* Jersey number overlay */
.pad-number{
  position:absolute; inset:6% 6%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  font-size: clamp(56px, 22vw, 180px);
  color: rgba(255,255,255,.42);
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
  border-radius:inherit;
  pointer-events:none;
}

/* Progress overlay when playing */
.pad-progress{
  position:absolute; top:0; left:0; height:100%;
  background-color:rgba(34,197,94,.2);
  width:0%; transition:width 16ms linear;
  z-index:5; pointer-events:none;
}

/* ---- Playing (keep original feel) ---- */
.pad.playing{
  position:relative;
  outline:2px solid var(--spotify-green);
  box-shadow:0 0 0 3px rgba(29,185,84,.6), 0 0 18px rgba(29,185,84,.45);
  transform:translateY(-1px);
  transition: box-shadow .15s ease, transform .15s ease;
  animation: glowPulse 1.4s ease-out infinite;
}
@keyframes glowPulse{
  0%{ box-shadow:0 0 0 0 rgba(29,185,84,.55), 0 0 18px rgba(29,185,84,.4) }
  70%{ box-shadow:0 0 0 10px rgba(29,185,84,0), 0 0 22px rgba(29,185,84,.35) }
  100%{ box-shadow:0 0 0 0 rgba(29,185,84,0), 0 0 18px rgba(29,185,84,.4) }
}
@media (prefers-reduced-motion:reduce){ .pad.playing{ animation:none } }

/* ---- NEW: Idle white glow (same "size" as green, visible with overflow) ---- */
.pad:not(.playing):not(.focused-pad){
  animation: idlePadGlow 1.4s ease-out infinite;
}
@keyframes idlePadGlow{
  /* Use drop-shadow so it’s not clipped by overflow; two layers to match green spread */
  0%{
    filter: drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 18px rgba(255,255,255,.18));
  }
  70%{
    filter: drop-shadow(0 0 0 10px rgba(255,255,255,0)) drop-shadow(0 0 22px rgba(255,255,255,.35));
  }
  100%{
    filter: drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 18px rgba(255,255,255,.18));
  }
}

/* Fade controls on playing pad (consistent small pills) */
.fade-controls{ display:none; opacity:0 }
.pad.playing .fade-controls{
  position:absolute; top:8px; left:8px; right:8px;
  z-index:10;
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:0;
  pointer-events:none; opacity:1; transition:opacity .3s ease;
}
.fade-btn{
  background:var(--spotify-green); color:#000; border:none;
  font-weight:700; font-size: clamp(11px, 1.2vw, 13px);
  padding:3px 8px; border-radius:var(--pill-radius);
  cursor:pointer; pointer-events:auto; white-space:nowrap;
  min-width:80px; max-width:45%; flex:0 0 auto;
  transition:background .2s;
}
.fade-btn:hover{ background:#1ed760 }

/* ========== 8) Focus Mode ========== */
#toggleFocusModeBtn.active{ background:var(--text-primary); color:var(--bg-main) }
body.focus-mode-active{ overflow:hidden; overscroll-behavior:contain }
body.focus-mode-active .main-content{ overflow:hidden !important; height:calc(100dvh - var(--header-h)) }
body.focus-mode-active .pad{ opacity:.2; filter: blur(3px); pointer-events:none }
body.focus-mode-active .pad.focused-pad{
  opacity:1; filter:none; z-index:1000; pointer-events:auto; cursor:default;
  position: fixed !important;
  left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important;
  width:min(92vw, 980px) !important; max-width:100vw;
  border-radius:28px !important;
  box-shadow: 0 0 0 3px rgba(27,230,102,.35), 0 0 30px rgba(27,230,102,.25);
}
.focus-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); z-index:1001 }

/* ========== 9) Admin Panel ========== */
.admin-slideout{
  position:fixed; top:0; left:0; width:450px; height:100%;
  background:var(--surface-translucent);
  border-right:1px solid var(--border-color);
  transform:translateX(-100%); transition:transform .35s ease;
  display:flex; flex-direction:column; backdrop-filter:blur(20px); z-index:200;
}
.admin-slideout.open{ transform:translateX(0) }
.admin-header{ padding:16px 24px; border-bottom:1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between }
.admin-title{ font-size:20px; margin:0 }
.admin-content{ padding:24px; overflow-y:auto; flex:1 }
.admin-content label{ display:block; font-size:13px; color:var(--text-secondary); margin:16px 0 8px }
.admin-content input{
  width:100%; padding:12px; border-radius:8px;
  border:1px solid var(--border-color); background:var(--surface-raised); color:var(--text-primary)
}
.admin-content input:focus{ outline:none; border-color:var(--spotify-green) }

/* ========== 10) Import Modal ========== */
#import-modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); z-index:9999; backdrop-filter:blur(5px)
}
#import-modal.active{ display:flex }
.modal-content{
  background:var(--surface-raised);
  border:1px solid var(--border-color);
  border-radius:16px; padding:24px;
  width:90%; max-width:600px; max-height:80vh;
  display:flex; flex-direction:column;
}
#import-modal .modal-list{ list-style:none; padding-left:0; margin:0 }
#import-modal .modal-list li{
  padding:12px 16px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:12px; border:1px solid transparent;
}
#import-modal .modal-list li + li{ margin-top:4px }
#import-modal .modal-list li:hover{ background:var(--surface-raised-hover) }
#import-modal .modal-list li.selected{ background:var(--spotify-green); color:#000; font-weight:600 }
#import-modal .modal-list-container{ max-height:60vh; overflow:auto; -webkit-overflow-scrolling:touch; padding-right:4px }
#import-modal .modal-footer{ display:flex; justify-content:flex-end; gap:12px; margin-top:12px }
#import-modal .btn{ pointer-events:auto }
body.modal-open #app-container{ pointer-events:none }

/* Selection tools links must be white */
#import-modal .selection-tools a{ color:#fff !important; text-decoration:underline }

/* ========== 11) Account Menu (mini) ========== */
.accmenu-anchor{ position:relative; margin-left:8px }

.accmenu-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border-color); background:var(--surface-raised);
  cursor:pointer; overflow:hidden; padding:0; line-height:0;
}
.accmenu-btn img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block }
.accmenu-btn.ok{ box-shadow:0 0 0 2px rgba(29,185,84,.6), 0 0 14px rgba(29,185,84,.45) }
.accmenu-btn.error{ box-shadow:0 0 0 2px rgba(239,68,68,.6), 0 0 14px rgba(239,68,68,.45) }
.accmenu-btn .acc-initials{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#2d2d31; color:#fff; font-weight:700 }

/* Popover — auto-bredd med min/max så den inte blir onödigt bred */
.accmenu-pop{
  position:absolute; top:44px; right:0;
  width:auto;                /* shrink-to-content */
  min-width:300px;           /* inte för smal */
  max-width:420px;           /* inte för bred */
  max-width:calc(100vw - 24px);
  background:var(--surface-raised); color:var(--text-primary);
  border:1px solid var(--border-color);
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:10000; overflow:hidden;
}
/* --- Viktigt: rader som ligger direkt under .accmenu-pop ska ha innermarginal --- */
.accmenu-pop > .acc-row{
  padding-left:20px;                 /* luft mot vänster kant */
  padding-right:20px;                /* luft mot höger kant */
}

/* Knappraden under kontot ska linjera efter avataren + containerpadding
   40 (avatar) + 10 (gap) + 20 (container L-padding) = 70px */
.accmenu-pop > .acc-row .acc-buttons{
  padding-left:70px;
}


/* Header – mer sidpadding för luft mot kanten */
.acc-hdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:20px;            /* mer luft mot vänster/höger */
  border-bottom:1px solid var(--border-color);
  background:var(--surface-raised-hover);
}

.acc-hdr-left{ display:flex; gap:12px; align-items:center; min-width:0 }
.acc-avatar{
  width:40px; height:40px;                       /* tydlig men kompakt */
  border-radius:50%; overflow:hidden;
  background:#2d2d31; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-weight:700
}
.acc-avatar img{ width:100%; height:100%; object-fit:cover }
.acc-ident{ display:flex; flex-direction:column; min-width:0 }
.acc-name{ font-weight:700; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px }
.acc-email{ color:var(--text-secondary); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Section body – lite extra luft och större sidpadding */
.acc-sec{ padding:16px 18px 14px }

/* Konto-rad + knapprad under */
.acc-row{
  display:flex; flex-direction:column; align-items:stretch;
  gap:12px;                                       /* luft mellan konto och knappar */
  padding:12px 0 10px;
}
.acc-row + .acc-row{ border-top:1px solid var(--border-color) }

.acc-left{
  display:flex; align-items:center; gap:10px; min-width:0;
}

/* Mini-spotify info */
.acc-spot-mini{ display:flex; align-items:center; gap:10px; min-width:0 }
.acc-spot-mini .img{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:#2d2d31; flex:0 0 auto }
.acc-spot-mini .img img{ width:100%; height:100%; object-fit:cover }
.acc-spot-mini .meta{ display:flex; flex-direction:column; line-height:1.2; min-width:0 }
.acc-spot-mini .meta .dn{
  font-size:16px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:260px;                                  /* tryck inte ut knappar */
}
.acc-spot-mini .meta .prod{ font-size:12px; color:var(--text-secondary) }

/* Knappar – en rad under kontot, indragna så de linjerar efter avataren */
.acc-buttons{
  display:flex; flex-wrap:nowrap; gap:10px;
  justify-content:flex-start;
  padding-left:50px;                                /* 40 avatar + 10 gap */
}

/* Pillerknappar */
.acc-btn{
  height:28px; line-height:28px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--border-color);
  background:transparent; color:inherit;
  font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .15s ease;
}
.acc-btn:hover{ background:#232326 }
.acc-btn.primary{ background:var(--spotify-green); color:#000; border:none; font-weight:700 }

/* ========== 12) Select (harmonized dropdown) ========== */
select{
  appearance:none;
  background-color:#1f1f1f;
  color:#fff;
  border:1px solid #333;
  border-radius:8px;
  padding:8px 12px;
  font-size:14px;
  font-family:inherit;
  transition:all .15s ease;
  cursor:pointer;
  width:100%;
  position:relative;
}
select:hover{ background-color:#2a2a2a; border-color:#444 }
select:focus{ outline:none; border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.3) }
select::-ms-expand{ display:none }

/* ========== 13) Spotify search list (simple) ========== */
.sp-results{ border:1px solid #2a2a2a; border-radius:8px; overflow:hidden }
.sp-results .sp-empty, .sp-results .sp-loading, .sp-results .sp-error{ padding:8px 10px; color:#bbb; background:#1f1f1f }

/* ========== 14) Loading overlay ========== */
.loading-view{
  position:fixed; inset:0; z-index:2147483647;
  min-height:100vh;
  display:none; visibility:hidden; opacity:0;
  background:var(--bg-main);
  align-items:center; justify-content:center; flex-direction:column; gap:16px; text-align:center;
}
.loading-view[aria-hidden="true"]{ display:none !important; visibility:hidden !important; opacity:0 !important }
.spinner{
  width:48px; height:48px; border-radius:50%;
  border:4px solid rgba(255,255,255,.2);
  border-top-color:#1DB954;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ========== 15) Misc helpers ========== */
.pad-unavailable{ opacity:.5; pointer-events:none; filter:grayscale(1) }
.pad-ghost{ opacity:.45 }
.pad-drag{ cursor:grabbing }
#grid .pad{ touch-action:none }

/* ========== 16) Responsive Breakpoints ========== */

/* Phone portrait (<600px) */
@media (max-width: 599.98px){
  :root{
    --header-h: 52px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 160px;
    --pad-minh: 110px;
    --grid-gap: 14px;
    --chip-h: 26px;
    --chip-font: 13px;
  }
  .app-header{ padding:6px 12px }
  .main-content{ padding:0 12px 16px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:12px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
    scroll-snap-type:x proximity;
  }
  .bank-tab{ height:var(--chip-h); font-size:var(--chip-font); scroll-snap-align:start }
  body.focus-mode-active .pad{ filter:blur(2px) }
}

/* Tablet (600–1023.98px) */
@media (min-width: 600px) and (max-width: 1023.98px){
  :root{
    --header-h: 56px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 200px;
    --pad-minh: 120px;
    --grid-gap: 18px;
    --chip-h: 28px;
    --chip-font: 14px;
  }
  .app-header{ padding:8px 18px }
  .main-content{ padding:0 18px 20px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:18px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
}

/* Desktop (>=1024px) */
@media (min-width: 1024px){
  :root{
    --header-h: 56px;
    --tabsbar-h: var(--header-h);
    --pad-minw: 220px;
    --pad-minh: 120px;
    --grid-gap: 20px;
    --chip-h: 28px;
    --chip-font: 14px;
  }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:24px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
}

/* Phone landscape tuning (≈480–740px) */
@media (min-width:480px) and (max-width:740px) and (orientation:landscape){
  :root{
    --pad-minw: 200px;
    --pad-minh: 108px;
    --grid-gap: 16px;
    --header-h: 52px;
    --tabsbar-h: var(--header-h);
    --chip-h: 26px;
    --chip-font: 13px;
  }
  .app-header{ padding:6px 16px }
  .main-content{ padding:0 16px 16px }
  #bank-tabs{
    height:var(--tabsbar-h);
    padding-inline:16px;
    padding-block: calc((var(--tabsbar-h) - var(--chip-h))/2);
  }
  .bank-tab{ height:var(--chip-h); font-size:var(--chip-font) }
  .pad .pad-name{ font-size: clamp(12px, 2.2vw, 14px) }
  .pad:hover{ transform: scale(1.01) }
  body.focus-mode-active .pad{ filter: blur(1.5px) }
}
/* === FIX 1: Add-New menu === */
.add-new-container { position: relative; }
.add-new-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface-translucent);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 150;
}
.add-new-popover.active { display: flex; }

/* === FIX 2: Admin collapsible sections === */
details { border-bottom: 1px solid var(--border-color); margin-bottom: 16px; }
summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
.details-content { padding: 0 0 16px 0; }

/* === FIX 3: White glow visibility === */
.pad:not(.playing):not(.focused-pad) {
  position: relative;
  z-index: 1;
}
.pad:not(.playing):not(.focused-pad)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  animation: whitePulseVisible 1.8s ease-in-out infinite;
}
@keyframes whitePulseVisible {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 0 24px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.25), 0 0 20px rgba(255,255,255,0.4); }
}

.ios-audio-banner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(18,18,18,0.95);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 9999;
  padding: 10px 12px;
  display: none; /* JS sätter display:block på iOS */
}

.ios-audio-banner__inner{
  max-width: 920px;
  margin: 0 auto;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  color: #fff; font-size: 14px;
}

.ios-audio-banner__btn{
  appearance: none; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 600; cursor: pointer;
  background: #1DB954; color: #121212;
}
.ios-audio-banner__btn:active { transform: translateY(1px); }