:root {
  --bg-primary: #050910;
  --bg-navbar: #0b0f19;
  --panel-background: #131722;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --accent-primary: #5865F2;
  --accent-glow: rgba(88, 101, 242, 0.15);
  --white: #ffffff;
  --black: #000000;
  --outline-color: #222733;
  --danger: #ef4444;
  --success: #22c55e;
  --standard-label: linear-gradient(270deg, #4a9eff, #74bfff, #4a9eff);
  --producer-label: linear-gradient(270deg, #e0b3ff, #c084ff, #a95eff, #e0b3ff);
  --staff-label: linear-gradient(270deg, #f7c873, #b88aff, #f7c873);
  --transition: all 0.2s cubic-bezier(.075, .82, .165, 1);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  height: 100%; margin: 0; padding: 0;
  font-family: 'Inter', sans-serif;
  background-color: transparent;
  color: var(--text-primary);
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar { display: none; }
html { -ms-overflow-style: none; scrollbar-width: none; }
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; margin-top: 0; }
a { color: var(--accent-primary); text-decoration: none; transition: var(--transition); }
/* no hover */

/* ── Background Showcase ── */
.site-bg-showcase {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1; overflow: hidden; pointer-events: none;
  background-color: #050910;
}
.bg-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(5,9,16,0.85) 0%, rgba(5,9,16,0.55) 50%, rgba(5,9,16,0.85) 100%),
              radial-gradient(circle at center, transparent 0%, #050910 100%);
  z-index: 1;
}
.showcase-tilt-wrap {
  transform: rotate(-10deg) scale(1.6);
  display: flex; flex-direction: column; gap: 20px;
  width: 140%; position: absolute; top: -20%; left: -20%;
  opacity: 0.35; z-index: 0;
}
.showcase-row {
  display: flex; gap: 20px; width: max-content;
}
.showcase-row.row-left  { animation: scroll-left 100s linear infinite; }
.showcase-row.row-right { animation: scroll-right 100s linear infinite; }
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 10px)); }
}
@keyframes scroll-right {
  0% { transform: translateX(calc(-50% - 10px)); }
  100% { transform: translateX(0); }
}
.track-card {
  background: #0d1117; border: 1px solid var(--outline-color);
  border-radius: 12px; padding: 10px; display: flex;
  flex-direction: column; gap: 10px; width: 180px; flex-shrink: 0;
}
.track-card .track-art {
  width: 100%; aspect-ratio: 1/1; border-radius: 8px;
  overflow: hidden; background: #1c2128;
}
.track-card .track-art img { width: 100%; height: 100%; object-fit: cover; }
.track-card .track-title {
  color: var(--white); font-size: 13px; font-weight: 700;
  font-family: 'Poppins', sans-serif; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.track-card .track-footer {
  display: flex; align-items: center; gap: 8px; overflow: hidden;
}
.track-card .track-footer img {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.track-card .track-footer .track-author {
  color: var(--text-primary); font-size: 11px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 3px;
}

.page-wrapper {
  display: flex; flex-direction: column; min-height: 100vh;
}

@keyframes subtle-glow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes glow-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad-name {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.name-grad-newbie {
  background-image: var(--standard-label);
  background-size: 200% 200%;
  animation: 6s ease-in-out infinite subtle-glow;
}
.name-grad-standard {
  background-image: var(--producer-label);
  background-size: 400% 400%;
  animation: 3s linear infinite glow-gradient;
}
.name-grad-producer {
  background-image: var(--staff-label);
  background-size: 400% 400%;
  animation: 3s linear infinite glow-gradient;
  font-weight: 700;
}

/* ── Header ── */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px max(20px, calc(50vw - 500px));
  background: var(--bg-navbar); z-index: 1000;
  border-bottom: 1px solid var(--outline-color);
}
.header .logo {
  width: 130px; height: 44px;
  background: url('https://cdn.clippsly.app/brand_assets/logos/2025-colorful.png') no-repeat left center;
  background-size: contain; display: block; text-decoration: none;
}
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.product-name { color: var(--text-secondary); font: 600 .78rem 'Poppins', sans-serif; border-left: 1px solid var(--outline-color); padding-left: 10px; }
.header-buttons { display: flex; gap: 12px; }
.header-btn {
  cursor: pointer; font-family: 'Poppins', sans-serif; text-decoration: none;
  background: var(--white); color: var(--black);
  border: 1px solid var(--outline-color); border-radius: 6px;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .85rem; font-size: .9rem;
  transition: var(--transition); font-weight: 500;
}
/* no header-btn hover */

/* ── Main ── */
.main-content { flex: 1; padding: 100px 20px 60px; }
.container {
  max-width: 1040px; width: 100%; margin: 0 auto;
}

/* ── Bento Grid ── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
.bento-item {
  background: var(--panel-background);
  border: 1px solid var(--outline-color);
  border-radius: 12px;
  padding: 1.75rem;
  position: relative;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
/* no bento-item hover */

/* span helpers */
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

/* ── Portal navigation ── */
.portal-nav {
  grid-column: 1 / -1; display: flex; gap: 6px; padding: 6px;
  border: 1px solid var(--outline-color); border-radius: 12px;
  background: rgba(11,15,25,.9); width: fit-content;
}
.portal-nav button {
  border: 0; border-radius: 8px; padding: .55rem .95rem;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font: 600 .84rem 'Poppins', sans-serif;
}
.portal-nav button.active { background: var(--accent-primary); color: var(--white); }
.portal-section { grid-column: 1 / -1; display: none; }
.portal-section.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portal-section > .span-1 { grid-column: span 1; }
.portal-section > .span-2 { grid-column: span 2; }
.portal-section > .span-3 { grid-column: span 3; }

/* ── Upload workspace ── */
.upload-card { padding: 0; }
.upload-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--outline-color);
}
.upload-head h2 { font-size: 1.25rem; margin: .3rem 0 .25rem; }
.upload-head p { color: var(--text-secondary); font-size: .86rem; line-height: 1.55; margin: 0; max-width: 590px; }

.upload-tabs { display: flex; gap: 6px; padding: 1rem 1.75rem 0; }
.upload-tab {
  border: 1px solid var(--outline-color); border-radius: 8px;
  background: transparent; color: var(--text-secondary); padding: .55rem .9rem;
  cursor: pointer; font: 600 .82rem 'Poppins', sans-serif;
}
.upload-tab.active { color: var(--text-primary); background: rgba(255,255,255,.06); border-color: rgba(165,180,252,.45); }
.upload-pane { display: none; padding: 1.25rem 1.75rem 1.75rem; }
.upload-pane.active { display: block; }
.upload-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
.upload-drop {
  min-height: 210px; border: 1px dashed rgba(165,180,252,.42);
  border-radius: 12px; background: linear-gradient(145deg, rgba(88,101,242,.09), rgba(255,255,255,.018));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem; cursor: pointer;
}
.upload-drop.compact { min-height: 150px; }
.upload-drop-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(88,101,242,.16); color: #a5b4fc; margin-bottom: .8rem;
}
.upload-drop-icon svg { width: 22px; height: 22px; }
.upload-drop strong { font: 700 .94rem 'Poppins', sans-serif; }
.upload-drop span { color: var(--text-secondary); font-size: .76rem; margin-top: .3rem; max-width: 280px; overflow-wrap: anywhere; }
.upload-drop.is-dragging {
  border-color: #a5b4fc;
  background: linear-gradient(145deg, rgba(88,101,242,.2), rgba(139,92,246,.08));
  box-shadow: inset 0 0 0 1px rgba(165,180,252,.18), 0 0 24px rgba(88,101,242,.12);
}
.sr-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.upload-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .38rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label, .field-label { color: var(--text-secondary); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; }
.field input, .field select, .field textarea { max-width: none; width: 100%; }
.field textarea {
  min-height: 76px; resize: vertical; background: rgba(255,255,255,.05);
  border: 1px solid var(--outline-color); border-radius: 8px; padding: .65rem .85rem;
  color: var(--text-primary); font: .9rem 'Inter', sans-serif; outline: none;
}
.field textarea:focus, select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.cover-picker {
  display: flex; align-items: center; gap: .75rem; border: 1px solid var(--outline-color);
  background: rgba(255,255,255,.025); border-radius: 9px; padding: .65rem .75rem; cursor: pointer;
  min-height: 42px;
}
.cover-picker strong { font-size: .8rem; }
.cover-picker span { display: block; color: var(--text-secondary); font-size: .68rem; margin-top: .1rem; overflow-wrap: anywhere; }
.upload-details { grid-column: 1 / -1; border-top: 1px solid var(--outline-color); padding-top: .7rem; }
.upload-details summary { color: #a5b4fc; cursor: pointer; font-size: .78rem; font-weight: 700; list-style: none; }
.upload-details summary::-webkit-details-marker { display: none; }
.upload-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem; margin-top: .8rem; }

/* ── Storage region radio cards ── */
.storage-region-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; margin-top: .35rem; }
.storage-region-card {
  position: relative; cursor: pointer; border: 1px solid var(--outline-color); border-radius: 10px;
  padding: .7rem .8rem; background: rgba(255,255,255,.02); transition: var(--transition);
  display: flex; flex-direction: column; gap: .15rem;
}
.storage-region-card:hover { background: rgba(255,255,255,.04); border-color: rgba(165,180,252,.25); }
.storage-region-card.is-selected {
  border-color: #818cf8; background: rgba(88,101,242,.1);
  box-shadow: 0 0 0 1px rgba(129,140,248,.18), 0 0 16px rgba(88,101,242,.08);
}
.storage-region-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.storage-region-card .region-name { font-weight: 700; font-size: .82rem; color: var(--text-primary); font-family: 'Poppins', sans-serif; }
.storage-region-card .region-location { font-size: .67rem; color: var(--text-secondary); }
.storage-region-card .region-multiplier { font-size: .62rem; color: var(--text-secondary); margin-top: .15rem; }
.storage-region-card .region-badge {
  position: absolute; top: -1px; right: -1px; border-radius: 0 9px 0 8px;
  background: #818cf8; color: #fff; font-size: .58rem; font-weight: 700; padding: .15rem .45rem;
  text-transform: uppercase; letter-spacing: .04em; display: none;
}
.storage-region-card.is-recommended .region-badge { display: block; background: linear-gradient(135deg, #818cf8, #a78bfa); }
.storage-region-card .region-multiplier .region-multiplier-value { font-weight: 700; color: #a5b4fc; }
.storage-region-card.disabled {
  opacity: .38; cursor: not-allowed; pointer-events: none;
  border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.01);
}
.storage-region-card.disabled .region-name { color: var(--text-secondary); }
@media (max-width: 768px) {
  .storage-region-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Migration list ── */
.migration-tabs { display: flex; gap: 6px; margin-bottom: .8rem; border-bottom: 1px solid var(--outline-color); padding-bottom: .65rem; }
.migration-tab {
  border: 1px solid var(--outline-color); border-radius: 8px;
  background: transparent; color: var(--text-secondary); padding: .48rem .8rem;
  cursor: pointer; font: 600 .8rem 'Poppins', sans-serif;
}
.migration-tab.active { color: var(--text-primary); background: rgba(255,255,255,.06); border-color: rgba(165,180,252,.45); }
.migration-pane { display: none; }
.migration-pane.active { display: block; }
.region-row {
  display: grid; grid-template-columns: minmax(0,1fr) 90px auto; gap: .65rem; align-items: center;
  border: 1px solid var(--outline-color); border-radius: 9px; padding: .55rem .75rem;
  background: rgba(255,255,255,.02);
}
.region-row-name { font-weight: 600; font-size: .8rem; color: var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.region-row-badge {
  font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .45rem; border-radius: 4px; text-align: center;
}
.region-row .btn-sm { font-size: .72rem; padding: .32rem .6rem; }
.region-region-eu { background: rgba(59,130,246,.18); color: #93c5fd; }
.region-region-na { background: rgba(34,197,94,.18); color: #86efac; }
.region-region-asia { background: rgba(251,191,36,.18); color: #fde68a; }
.region-region-au { background: rgba(239,68,68,.18); color: #fca5a5; }
.region-region-multi { background: rgba(139,92,246,.18); color: #c4b5fd; }
.region-region-mixed { background: rgba(148,163,184,.18); color: #cbd5e1; }
@media (max-width: 768px) {
  .region-row { grid-template-columns: minmax(0,1fr) auto auto; }
  .region-row-badge { display: block; font-size: .56rem; padding: .15rem .35rem; }
}
.migration-region-picker {
  display: none; position: fixed; inset: 0; z-index: 4000;
  background: rgba(3,6,12,.82); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); place-items: center;
}
.migration-region-picker.active { display: grid; }
.migration-region-picker-card {
  width: min(420px, 92vw); padding: 1.5rem; border-radius: 14px;
  background: linear-gradient(145deg, #171c29, #101520);
  border: 1px solid rgba(165,180,252,.18);
  box-shadow: 0 28px 90px rgba(0,0,0,.55); text-align: center;
}
.migration-region-picker-card h3 { font-size: 1.1rem; margin: 0 0 .25rem; }
.migration-region-picker-card p { color: var(--text-secondary); font-size: .78rem; margin: 0 0 .85rem; }
.migration-region-picker-card .btn-row { display: flex; gap: 8px; margin-top: .2rem; }
.migration-region-picker-card .btn-row .btn { flex: 1; justify-content: center; }

/* ── Toast notification ── */
.listener-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 5000; max-width: min(500px, 90vw); padding: .75rem 1.1rem;
  border-radius: 10px; font-size: .84rem; font-weight: 500;
  color: #fff; box-shadow: 0 12px 40px rgba(0,0,0,.45);
  opacity: 0; transition: opacity .22s ease, transform .22s ease;
  transform: translateX(-50%) translateY(8px); pointer-events: none;
  text-align: center; line-height: 1.45;
}
.listener-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.listener-toast.toast-error { background: linear-gradient(135deg, #dc2626, #b91c1c); border: 1px solid rgba(239,68,68,.3); }
.listener-toast.toast-info  { background: linear-gradient(135deg, #4f46e5, #3730a3); border: 1px solid rgba(129,140,248,.25); }
.listener-toast.toast-warn  { background: linear-gradient(135deg, #d97706, #b45309); border: 1px solid rgba(251,191,36,.25); }

.check-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.check-row label { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-secondary); font-size: .78rem; cursor: pointer; }
.check-row input { width: auto; accent-color: var(--accent-primary); }
.upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.upload-note { color: var(--text-secondary); font-size: .72rem; line-height: 1.45; }
.upload-result { display: none; margin-top: .8rem; border-radius: 8px; padding: .7rem .85rem; font-size: .8rem; }
.upload-result.show { display: block; background: rgba(88,101,242,.09); color: #c7d2fe; border: 1px solid rgba(88,101,242,.2); }
.upload-result.success { background: rgba(34,197,94,.09); color: #86efac; border-color: rgba(34,197,94,.22); }
.upload-result.error { background: rgba(239,68,68,.09); color: #fca5a5; border-color: rgba(239,68,68,.22); }
.album-track-list { display: flex; flex-direction: column; gap: 7px; margin-top: .8rem; }
.album-track-row {
  display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: .65rem;
  border: 1px solid var(--outline-color); border-radius: 9px; padding: .55rem .65rem;
  background: rgba(255,255,255,.02);
}
.album-track-number { color: var(--text-secondary); font-size: .72rem; text-align: center; }
.album-track-main { min-width: 0; }
.album-track-main input { width: 100%; max-width: none; padding: .42rem .6rem; font-size: .8rem; }
.album-track-file { color: var(--text-secondary); font-size: .65rem; margin-top: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: .35rem; }
.empty-tracks { color: var(--text-secondary); font-size: .76rem; border: 1px dashed var(--outline-color); border-radius: 9px; padding: .85rem; text-align: center; margin-top: .8rem; }

/* ── Upload and encoding progress ── */
body.listener-upload-active { overflow: hidden; }
.upload-progress-overlay {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  padding: 20px; background: rgba(3,6,12,.82); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.upload-progress-overlay.active { opacity: 1; visibility: visible; }
.upload-progress-card {
  width: min(520px, 100%); padding: 2rem; text-align: center;
  border: 1px solid rgba(165,180,252,.2); border-radius: 16px;
  background: linear-gradient(145deg, #171c29, #101520);
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
}
.progress-visual { width: 64px; height: 64px; margin: 0 auto 1.2rem; position: relative; }
.progress-spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid rgba(165,180,252,.14); border-top-color: #818cf8;
  animation: listener-spin .8s linear infinite;
}
.progress-symbol {
  position: absolute; inset: 0; display: none; place-items: center;
  border-radius: 50%; font-size: 1.65rem; font-weight: 800;
}
.upload-progress-overlay.complete .progress-spinner,
.upload-progress-overlay.failed .progress-spinner { display: none; }
.upload-progress-overlay.complete .progress-symbol.success { display: grid; color: #86efac; background: rgba(34,197,94,.13); border: 1px solid rgba(34,197,94,.3); }
.upload-progress-overlay.failed .progress-symbol.failure { display: grid; color: #fca5a5; background: rgba(239,68,68,.13); border: 1px solid rgba(239,68,68,.3); }
@keyframes listener-spin { to { transform: rotate(360deg); } }
.progress-eyebrow { color: #a5b4fc; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45rem; }
.upload-progress-card h2 { font-size: 1.35rem; margin: 0 0 .55rem; }
.upload-progress-copy { color: var(--text-secondary); font-size: .86rem; line-height: 1.6; margin: 0 auto; max-width: 420px; }
.progress-status-row {
  display: flex; width: fit-content; align-items: center; justify-content: center; gap: .55rem;
  margin: 1.25rem auto 0; padding: .55rem .8rem; border-radius: 999px;
  color: var(--text-secondary); background: rgba(88,101,242,.09);
  border: 1px solid rgba(129,140,248,.18); font-size: .74rem;
}
.progress-status-row strong { color: #c7d2fe; font-weight: 700; }
.progress-status-dot {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  background: #818cf8; box-shadow: 0 0 0 0 rgba(129,140,248,.45);
  animation: listener-status-pulse 1.7s ease-out infinite;
}
.upload-progress-overlay.complete .progress-status-dot { background: #4ade80; animation: none; box-shadow: none; }
.upload-progress-overlay.failed .progress-status-dot { background: #f87171; animation: none; box-shadow: none; }
@keyframes listener-status-pulse { 70%, 100% { box-shadow: 0 0 0 7px rgba(129,140,248,0); } }
.progress-patience {
  margin: 1.15rem 0 0; padding: .8rem .9rem; border-radius: 9px;
  color: var(--text-secondary); background: rgba(255,255,255,.025);
  border: 1px solid var(--outline-color); font-size: .75rem; line-height: 1.55;
}
.progress-actions { display: flex; gap: .65rem; margin-top: 1.25rem; }
.progress-actions .btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .progress-spinner { animation-duration: 1.8s; } }


/* ── Welcome tile (main-feature style) ── */
.bento-welcome {
  background: linear-gradient(135deg, var(--panel-background) 0%, #1a1f2e 100%);
  justify-content: center;
}
.bento-welcome h2 {
  font-size: 1.5rem; font-weight: 800; margin: 0 0 4px;
}

/* ── Welcome row ── */
.welcome-row { display: flex; align-items: center; gap: 14px; }
.welcome-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(88,101,242,0.3); flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}
.storage-big {
  font-weight: 800; font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 2px;
}
.storage-sub {
  font-size: .65rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}

@media (max-width: 768px) {
  .bento-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .portal-section.active { grid-template-columns: 1fr; }
  .portal-section > .span-1, .portal-section > .span-2, .portal-section > .span-3 { grid-column: span 1; }
  .upload-layout { grid-template-columns: 1fr; }
  .upload-head { flex-direction: column; }
}

/* ── Logged-out state ── */
.logged-out-hero { text-align: center; padding: 3rem 2rem; }
.logged-out-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
.logged-out-hero .subtitle { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.state-badge {
  display: inline-block; padding: 0; border-radius: 0;
  font-size: .85rem; font-weight: 600; margin-bottom: 1.25rem; background: none;
}
.state-badge.error { color: var(--danger); }
.state-badge.warning { color: #eab308; }
.state-badge.info { color: var(--accent-primary); }

/* ── Buttons ── */
.btn {
  cursor: pointer; font-family: 'Poppins', sans-serif; font-weight: 600;
  border: none; border-radius: 8px; padding: .65rem 1.25rem; font-size: .9rem;
  transition: var(--transition); display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
}
.btn-primary { background: var(--accent-primary); color: var(--white); }
/* no btn-primary hover */
.btn-crypto {
  background: linear-gradient(135deg, #f7931a 0%, #ff6b00 100%); color: var(--white);
}
.btn-crypto:hover { background: linear-gradient(135deg, #ff8c3a 0%, #ff7b10 100%); }
.btn-outline {
  background: transparent; color: var(--text-primary);
  border: 1px solid var(--outline-color);
}
.btn-outline:hover { background: rgba(255,255,255,0.04); border-color: rgba(165,180,252,.35); }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.5); }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; border-radius: 6px; }
.btn:disabled { opacity: .55; cursor: wait; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
  border: 1px solid var(--outline-color); border-radius: 8px; overflow: hidden;
}
th, td { padding: .7rem 1rem; text-align: left; }
th {
  background: rgba(255,255,255,0.04); color: var(--text-secondary);
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em;
}
td { color: var(--text-primary); border-top: 1px solid var(--outline-color); }
tr.current-row td { background: rgba(88,101,242,0.08); font-weight: 600; }
tr.current-row td:first-child { color: var(--accent-primary); }

/* ── Integration cards ── */
.integration-list { display: flex; flex-direction: column; gap: 16px; }
.integration-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  border: 1px solid var(--outline-color);
  border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,0.015);
  transition: var(--transition);
  padding: 1.15rem 1.25rem;
}
/* no integration-item hover */
.integration-item .int-left {
  padding-bottom: .75rem; margin-bottom: .75rem;
  border-bottom: 1px solid var(--outline-color);
  display: flex; align-items: center; gap: 12px;
}
.integration-item .int-client {
  font-weight: 700; font-size: .88rem; color: var(--text-primary);
  font-family: 'Poppins', sans-serif;
}
.integration-item .int-client-sub {
  font-size: .65rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.integration-item .int-right {
  padding-top: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.integration-item .int-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .82rem;
}
.integration-item .int-label {
  font-size: .62rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .06em; width: 52px; flex-shrink: 0;
  padding-top: 2px;
}
.integration-item .int-row span:not(.int-label) {
  word-break: break-all; line-height: 1.5;
}
.integration-item code { font-size: .78rem; word-break: break-all; }

/* ── Modal ── */
.modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(5,9,16,0.75); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; justify-content: center; align-items: center;
  z-index: 2000; opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.modal-backdrop.active { opacity: 1; visibility: visible; }
.modal-container {
  background: var(--panel-background); border: 1px solid var(--outline-color);
  border-radius: 12px; padding: 2rem 2rem 1.75rem;
  max-width: 460px; width: calc(100% - 40px); text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: translateY(16px) scale(.96);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.modal-backdrop.active .modal-container { transform: translateY(0) scale(1); }
.modal-icon-wrap {
  width: 56px; height: 56px; background: var(--accent-glow);
  border-radius: 12px; display: flex; justify-content: center;
  align-items: center; margin: 0 auto 1rem;
  color: var(--accent-primary);
}
.modal-icon-wrap svg { width: 24px; height: 24px; }
.modal-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .75rem; font-family: 'Poppins', sans-serif; }
.modal-body { font-size: .88rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: .75rem; }
.modal-input {
  width: 100%; margin-bottom: .75rem; max-width: 100%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--outline-color);
  border-radius: 8px; padding: .6rem .85rem; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: .9rem; outline: none;
  transition: var(--transition);
}
.modal-input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.modal-actions { display: flex; gap: 8px; justify-content: center; }
.modal-actions .btn { flex: 1; justify-content: center; }
.modal-result { margin-top: .75rem; font-size: .85rem; text-align: left; }
.modal-result pre {
  background: rgba(0,0,0,0.35); border: 1px solid var(--outline-color);
  border-radius: 8px; padding: .75rem 1rem; font-family: monospace;
  font-size: .82rem; color: var(--success); overflow-x: auto;
  word-break: break-all; margin-top: .5rem;
}
.modal-backdrop .modal-close-x {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: var(--text-secondary);
  font-size: 1.3rem; cursor: pointer; padding: 4px 8px; line-height: 1;
}
/* no modal-close-x hover */

/* ── Key list ── */
.key-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.15rem; border: 1px solid var(--outline-color);
  border-radius: 10px; margin-bottom: .5rem;
  background: rgba(255,255,255,0.02); gap: 1rem; flex-wrap: wrap;
  transition: var(--transition);
}
/* no key-item hover */
.key-info { flex: 1; min-width: 180px; }
.key-label { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.key-prefix { font-family: monospace; font-size: .8rem; color: var(--text-secondary); }
.key-meta { font-size: .75rem; color: var(--text-secondary); }

/* ── Forms ── */
input[type="text"], input[type="number"], input[type="url"], input[type="password"], select {
  background: rgba(255,255,255,0.05); border: 1px solid var(--outline-color);
  border-radius: 8px; padding: .6rem .85rem; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: .9rem; outline: none;
  transition: var(--transition); width: 100%; max-width: 360px;
}
select { color-scheme: dark; }
input:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: .75rem; }

/* ── Misc ── */
pre {
  background: rgba(0,0,0,0.3); border: 1px solid var(--outline-color);
  border-radius: 8px; padding: 1rem; font-family: monospace; font-size: .85rem;
  color: var(--success); overflow-x: auto; word-break: break-all;
}
code { background: rgba(255,255,255,0.06); padding: .15em .4em; border-radius: 4px; font-size: .85em; }
hr { border: none; border-top: 1px solid var(--outline-color); margin: 2rem 0; }
.summary-toggle { cursor: pointer; user-select: none; list-style: none; }
.summary-toggle::-webkit-details-marker { display: none; }
/* no summary-toggle hover */
.result-msg { margin-top: .75rem; font-size: .9rem; }
.result-msg.error { color: var(--danger); }

/* ── Footer ── */
.footer {
  width: 100%; padding: 40px 24px 32px;
  background: var(--bg-primary);
  border-top: 1px solid var(--outline-color);
}
.footer-content {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px; row-gap: 32px;
}
.footer-column {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.footer-heading {
  font-size: 15px; font-weight: 700; color: var(--white);
  margin-bottom: 6px; font-family: 'Poppins', sans-serif;
}
.footer-link {
  color: var(--text-secondary); text-decoration: none; font-size: 13px;
  transition: var(--transition);
}
/* no footer-link hover */
.footer-text {
  color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin: 0;
}
.footer-company {
  grid-column: 1 / -1; padding-top: 24px;
  border-top: 1px solid var(--outline-color); gap: 18px;
}
.footer-company .footer-heading { margin-bottom: 0; }
.footer-company-details {
  display: grid; grid-template-columns: 1.1fr .7fr 1.7fr; gap: 32px;
}
.footer-company-item { min-width: 0; }
.footer-company-name {
  color: var(--white); font-size: 14px; font-weight: 600; margin: 0 0 3px;
}
.footer-label {
  color: var(--text-secondary); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; line-height: 1.4; margin: 0 0 4px;
  text-transform: uppercase;
}
.footer-company address { font-style: normal; }

@media (max-width: 768px) {
  .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .footer-company { grid-column: 1 / -1; }
  .footer-company-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-company-office { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .header { padding: 10px 16px; }
  .header .logo { width: 108px; height: 38px; }
  .product-name, .header-buttons .header-btn:last-child { display: none; }
  .header-btn { padding: .45rem .65rem; font-size: .78rem; }
  .main-content { padding-top: 78px; }
  .footer { padding-inline: 20px; }
  .footer-content, .footer-company-details { grid-template-columns: 1fr; }
  .footer-company, .footer-company-office { grid-column: auto; }
  .welcome-row { flex-direction: row; text-align: left; flex-basis: 100% !important; }
  .storage-stats { width: 100%; flex-basis: 100% !important; min-width: 0 !important; justify-content: space-between !important; gap: 12px !important; padding-right: 0 !important; }
  .storage-stats > div { flex: 1; }
  .storage-stats .storage-big { font-size: 1.2rem !important; }
  .portal-nav { width: 100%; }
  .portal-nav button { flex: 1; padding-inline: .5rem; }
  .upload-fields, .upload-details-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: span 1; }
  .upload-head, .upload-pane { padding-inline: 1.1rem; }
  .upload-tabs { padding-inline: 1.1rem; }
  .upload-actions { align-items: stretch; flex-direction: column; }
  .upload-actions .btn { justify-content: center; width: 100%; }
}

/* ── My Music ── */
.mymusic-tabs { display: flex; gap: 6px; padding: 0; margin-bottom: 1rem; }
.mymusic-tab {
  border: 1px solid var(--outline-color); border-radius: 8px;
  background: transparent; color: var(--text-secondary); padding: .5rem .85rem;
  cursor: pointer; font: 600 .82rem 'Poppins', sans-serif;
}
.mymusic-tab.active { color: var(--text-primary); background: rgba(255,255,255,.06); border-color: rgba(165,180,252,.45); }
.mymusic-pane { display: none; }
.mymusic-pane.active { display: block; }

.mymusic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 12px; }
.mymusic-card {
  background: rgba(255,255,255,0.022); border: 1px solid var(--outline-color);
  border-radius: 10px; display: flex; flex-direction: column;
}
.mymusic-card-cover {
  width: 100%; aspect-ratio: 1/1; background: #141824;
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  position: relative; overflow: hidden;
}
.mymusic-card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mymusic-card-body { padding: .3rem .72rem .6rem; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.mymusic-card-body .mymusic-card-artist {
  font-size: .7rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mymusic-card-meta { font-size: .64rem; color: var(--text-secondary); margin-top: .18rem; display: flex; gap: .55rem; flex-wrap: wrap; }

/* ── Context menu (⋯ on cards and track rows) ── */
.mymusic-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .55rem .65rem .35rem; gap: .35rem; min-height: 0;
}
.mymusic-card-header .mymusic-card-title-wrap {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .08rem;
}
.mymusic-card-header .mymusic-card-title {
  font: 700 .8rem 'Poppins', sans-serif; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.context-menu-btn {
  background: transparent; border: none; color: var(--text-secondary); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: .1rem .25rem; border-radius: 6px;
  flex-shrink: 0; letter-spacing: .08em; margin-top: -2px;
  transition: var(--transition);
}
.context-menu-btn:hover { background: rgba(165,180,252,.12); color: var(--text-primary); }
.context-menu-drop {
  display: none; position: absolute; right: 0; top: 100%; z-index: 100;
  min-width: 142px; background: #1a1f2e; border: 1px solid var(--outline-color);
  border-radius: 8px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  flex-direction: column; gap: 1px;
}
.context-menu-drop.open { display: flex; }
.context-menu-item {
  display: block; width: 100%; text-align: left; border: none;
  background: transparent; color: var(--text-primary); cursor: pointer;
  font: .75rem 'Inter', sans-serif; padding: .4rem .65rem; border-radius: 6px;
  transition: var(--transition);
}
.context-menu-item:hover { background: rgba(88,101,242,.15); color: #e0e7ff; }
.context-menu-item.danger { color: #fca5a5; }
.context-menu-item.danger:hover { background: rgba(239,68,68,.14); color: #fecaca; }
.context-menu-wrap { position: relative; flex-shrink: 0; }

/* Album tracks sub-list */
.album-tracks-sublist {
  grid-column: 1 / -1; display: none; flex-direction: column;
  margin-top: 6px; border: 1px solid var(--outline-color);
  border-radius: 10px; background: rgba(0,0,0,0.22);
}
.album-tracks-sublist.open { display: flex; }
.album-tracks-sublist-header {
  padding: .55rem .85rem; font: 600 .78rem 'Poppins',sans-serif;
  color: var(--text-primary); border-bottom: 1px solid var(--outline-color);
  background: rgba(88,101,242,0.06);
}
.album-track-subrow {
  display: grid; grid-template-columns: 28px minmax(0,1fr) 50px 28px; align-items: center; gap: .4rem;
  padding: .45rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.035); font-size: .75rem;
  position: relative;
}
.album-track-subrow:last-child { border-bottom: 0; }
.album-track-subpos { color: var(--text-secondary); text-align: center; font-size: .66rem; font-weight: 600; }
.album-track-subtitle { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.album-track-subdur { color: var(--text-secondary); font-size: .66rem; white-space: nowrap; text-align: right; }
.album-track-subactions { display: flex; justify-content: flex-end; align-items: center; }
.album-track-subactions .context-menu-btn { font-size: .9rem; padding: .05rem .2rem; }

/* Pagination */
.mymusic-pagination {
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  margin-top: 1.25rem; flex-wrap: wrap;
}
.mymusic-pagination button {
  border: 1px solid var(--outline-color); border-radius: 7px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
  font: 600 .75rem 'Poppins', sans-serif; padding: .35rem .6rem; min-width: 33px; text-align: center;
}
.mymusic-pagination button.active { background: var(--accent-primary); color: var(--white); border-color: var(--accent-primary); }
.mymusic-pagination button:disabled { opacity: .3; cursor: default; }
.mymusic-pagination .page-ellipsis { color: var(--text-secondary); padding: 0 .15rem; }

/* My Music empty state */
.mymusic-empty {
  text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary);
  border: 1px dashed var(--outline-color); border-radius: 12px; grid-column: 1 / -1;
}
.mymusic-empty strong { display: block; color: var(--text-primary); font: 600 1rem 'Poppins', sans-serif; margin-bottom: .35rem; }
.mymusic-empty p { font-size: .82rem; margin: 0; }

/* My Music section header */
.mymusic-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.mymusic-header h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.mymusic-count { color: var(--text-secondary); font-size: .78rem; }

/* My Music modal fields - mirrors .field + input/select but inside modal-body */
.mymusic-modal-field { margin-bottom: .75rem; text-align: left; }
.mymusic-modal-field label { display: block; color: var(--text-secondary); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .055em; margin-bottom: .35rem; }
.mymusic-modal-field input,
.mymusic-modal-field textarea,
.mymusic-modal-field select {
  max-width: 100% !important; width: 100%;
  background: rgba(255,255,255,0.05); border: 1px solid var(--outline-color);
  border-radius: 8px; padding: .6rem .85rem; color: var(--text-primary);
  font-family: 'Inter', sans-serif; font-size: .9rem; outline: none;
  transition: var(--transition);
}
.mymusic-modal-field input:focus,
.mymusic-modal-field textarea:focus,
.mymusic-modal-field select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-glow); }
.mymusic-modal-field textarea { min-height: 60px; resize: vertical; }
.mymusic-modal-field select { color-scheme: dark; }

/* Cover art upload row in edit modals */
.mymusic-cover-row { display: flex; align-items: center; gap: .7rem; margin-bottom: .75rem; }
.mymusic-cover-preview {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: #141824; border: 1px solid var(--outline-color);
  display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
}
.mymusic-cover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ── Playlists ── */
.playlists-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.playlists-header h2 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.playlists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.playlist-card {
  background: rgba(255,255,255,0.022); border: 1px solid var(--outline-color);
  border-radius: 10px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .55rem;
  transition: var(--transition); cursor: default; position: relative;
}
.playlist-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .4rem;
}
.playlist-card-header .playlist-card-name {
  flex: 1; min-width: 0;
  font: 700 .92rem 'Poppins', sans-serif; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.playlist-card-header .context-menu-btn { font-size: 1.15rem; margin-top: -3px; }
.playlist-card-desc {
  font-size: .76rem; color: var(--text-secondary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 0;
}
.playlist-card-meta { font-size: .7rem; color: var(--text-secondary); display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.playlist-badge {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-radius: 999px; padding: .15rem .45rem;
  background: rgba(148,163,184,.13); color: var(--text-secondary);
}
.playlist-badge.private { background: rgba(239,68,68,.12); color: #fca5a5; }

/* Playlist full view */
.playlist-full-view { display: none; }
.playlist-full-view.open { display: block; }
.playlist-full-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.playlist-full-header h3 { font-size: 1.1rem; margin: 0; flex: 1; }
.playlist-full-tracks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem; }
.playlist-track-row {
  display: grid; grid-template-columns: 28px 36px minmax(0,1fr) 70px 28px; align-items: center; gap: .5rem;
  border: 1px solid var(--outline-color); border-radius: 9px; padding: .4rem .55rem;
  background: rgba(255,255,255,0.015); font-size: .78rem;
}
.playlist-track-pos { color: var(--text-secondary); text-align: center; font-size: .66rem; font-weight: 600; }
.playlist-track-cover {
  width: 30px; height: 30px; border-radius: 5px; overflow: hidden; flex-shrink: 0;
  background: #141824; display: flex; align-items: center; justify-content: center;
}
.playlist-track-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playlist-track-info { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.playlist-track-title { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: .78rem; }
.playlist-track-artist { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; }
.playlist-track-dur { color: var(--text-secondary); font-size: .66rem; text-align: right; white-space: nowrap; }

/* Remove track from playlist button */
.playlist-empty {
  text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary);
  border: 1px dashed var(--outline-color); border-radius: 12px; grid-column: 1 / -1;
}
.playlist-empty strong { display: block; color: var(--text-primary); font: 600 1rem 'Poppins', sans-serif; margin-bottom: .35rem; }
.playlist-empty p { font-size: .82rem; margin: 0; }

/* ── Membership tier cards ── */
.membership-tier-card {
  text-align: center; padding: 1.75rem 1.35rem 1.35rem;
  border: 1px solid var(--outline-color); border-radius: 12px;
  background: rgba(255,255,255,0.018);
  transition: var(--transition);
  display: flex; flex-direction: column; gap: .4rem;
  position: relative;
}
.membership-tier-card.current {
  border-color: rgba(88,101,242,0.35);
  background: rgba(88,101,242,0.06);
}
.membership-tier-name {
  font: 700 1rem 'Poppins', sans-serif; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: .04em;
}
.membership-tier-gb {
  font: 800 2rem 'Poppins', sans-serif; line-height: 1;
  background: linear-gradient(135deg,#a5b4fc 0%,#c4b5fd 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin: .15rem 0;
}
.membership-tier-gb.free-mb {
  background: linear-gradient(135deg,#94a3b8 0%,#cbd5e1 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.membership-tier-price {
  font: 700 1.25rem 'Poppins', sans-serif; color: var(--text-primary);
  margin-top: .1rem;
}
.membership-tier-price.free {
  color: var(--text-secondary);
}
.membership-tier-duration {
  font-size: .68rem; font-weight: 700; color: #4ade80;
  background: rgba(34,197,94,0.1); border-radius: 999px;
  padding: .12rem .55rem; width: fit-content; margin: 0 auto;
}
.membership-tier-discount {
  font-size: .68rem; color: #4ade80; font-weight: 700;
  background: rgba(34,197,94,0.1); border-radius: 999px;
  padding: .12rem .55rem; width: fit-content; margin: 0 auto;
}
.membership-tier-pills {
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
  margin-top: .35rem;
}
.membership-tier-pill {
  font-size: .66rem; font-weight: 600; color: var(--text-secondary);
  background: rgba(165,180,252,0.08); border: 1px solid rgba(165,180,252,0.15);
  border-radius: 999px; padding: .2rem .6rem; white-space: nowrap;
}
.membership-tier-btn {
  margin-top: auto;
}
.membership-tier-btn-row {
  display: flex; gap: 8px; margin-top: auto;
}
.membership-tier-btn-row .btn {
  flex: 1; justify-content: center; font-size: .76rem; padding: .55rem .5rem;
  white-space: nowrap; gap: .35rem;
}
.btn-icon-card { width: 16px; height: 16px; flex-shrink: 0; }
.btn-icon-crypto { width: 16px; height: 16px; flex-shrink: 0; }
.membership-tier-legal {
  font-size: .6rem; color: var(--text-secondary);
  line-height: 1.5; margin-top: .35rem; padding-top: .45rem;
  border-top: 1px solid var(--outline-color);
}
.membership-tier-legal a { color: var(--accent-primary); }

/* ── Studio‑specific extras (all classes the listener doesn't use) ──────── */

/* Release rows & identity */
.release-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--outline-color); }
.release-row:last-child { border-bottom:0; }
.release-identity { display:flex; align-items:center; gap:12px; min-width:0; flex:1; }
.release-cover { width:42px; height:42px; flex-shrink:0; object-fit:cover; border-radius:8px; background:rgba(255,255,255,0.05); }
.release-cover-placeholder { display:grid; place-items:center; color:var(--text-secondary); }
.release-identity strong,.release-identity span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.release-identity strong { font-size:.82rem; }
.release-identity span { font-size:.7rem; color:var(--text-secondary); margin-top:2px; }
.release-date { color:var(--text-secondary); font-size:.7rem; white-space:nowrap; }

/* Status badges */
.status-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:99px; font-size:.65rem; font-weight:700; white-space:nowrap; }
.status-badge::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.status-public,.status-live,.status-published { color:#86efac; background:rgba(34,197,94,.12); }
.status-private,.status-not_sent { color:#94a3b8; background:rgba(148,163,184,.1); }
.status-review,.status-in_review,.status-processing { color:#fcd34d; background:rgba(245,158,11,.12); }
.status-declined,.status-failed { color:#fca5a5; background:rgba(239,68,68,.12); }

/* Communication detail panels */
.communication-detail { border:1px solid var(--outline-color); border-radius:10px; padding:1rem; }
.detail-header { margin-bottom:.75rem; }
.detail-header h3 { margin:0 0 4px; font-size:1rem; }
.detail-header p { margin:0; font-size:.75rem; color:var(--text-secondary); }
.message-body { font-size:.82rem; line-height:1.6; padding:.75rem 0; border-top:1px solid var(--outline-color); }
.thread-reply { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--outline-color); }
.thread-reply .field { margin-bottom:.75rem; }
.thread-reply .field span { display:block; color:var(--text-secondary); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:.35rem; }
.thread-reply .field textarea { width:100%; min-height:76px; resize:vertical; background:rgba(255,255,255,0.05); border:1px solid var(--outline-color); border-radius:8px; padding:.65rem .85rem; color:var(--text-primary); font:.9rem Inter,sans-serif; outline:none; }
.thread-message { padding:.6rem .8rem; border-radius:8px; margin-bottom:6px; background:rgba(255,255,255,0.02); }
.thread-message strong { font-size:.78rem; display:block; margin-bottom:3px; }
.thread-message p { margin:0; font-size:.78rem; line-height:1.5; }
.thread-message time { font-size:.65rem; color:var(--text-secondary); display:block; margin-top:4px; }
.thread-note { font-size:.75rem; color:var(--text-secondary); }
.communication-list-item { display:flex; align-items:center; gap:10px; width:100%; padding:.55rem .75rem; border:1px solid var(--outline-color); border-radius:8px; background:transparent; color:inherit; cursor:pointer; text-align:left; font:inherit; margin-bottom:5px; transition:var(--transition); }
.communication-list-item:hover { background:rgba(255,255,255,0.02); }
.communication-list-item.active { border-color:rgba(88,101,242,.35); background:rgba(88,101,242,.06); }
.communication-list-item.unread { border-left:2px solid #818cf8; }
.communication-avatar { width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:rgba(88,101,242,.14); color:#a5b4fc; font-weight:700; font-size:.7rem; overflow:hidden; }
.communication-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.communication-item-copy { min-width:0; flex:1; }
.communication-item-top { display:flex; justify-content:space-between; gap:8px; font-size:.75rem; }
.communication-item-top strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.communication-item-top time { color:var(--text-secondary); font-size:.65rem; white-space:nowrap; }
.communication-item-subject { font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.communication-item-meta { font-size:.65rem; color:var(--text-secondary); margin-top:3px; }
.ticket-status { display:inline-block; padding:1px 6px; border-radius:4px; font-size:.6rem; font-weight:700; text-transform:uppercase; }
.ticket-status.open { color:#86efac; background:rgba(34,197,94,.12); }
.ticket-status.closed { color:#94a3b8; background:rgba(148,163,184,.1); }
.unread-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#818cf8; margin-right:4px; vertical-align:middle; }

/* Publish cards */
.publish-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--outline-color); }
.publish-row:last-child { border-bottom:0; }
.publish-platform { display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700; min-width:90px; }
.channel-logo { width:24px; height:24px; border-radius:6px; overflow:hidden; display:grid; place-items:center; }
.channel-logo img { width:100%; height:100%; object-fit:contain; }
.publish-note { font-size:.7rem; color:var(--text-secondary); min-width:120px; }

/* Album cards */
.album-card { overflow:hidden; border:1px solid var(--outline-color); border-radius:10px; background:rgba(255,255,255,0.022); }
.album-card-art { position:relative; aspect-ratio:1.75; overflow:hidden; background:rgba(255,255,255,0.03); }
.album-card-art img { width:100%; height:100%; object-fit:cover; }
.album-card-art .cover-preview { width:100%; height:100%; display:grid; place-items:center; color:var(--text-secondary); }
.album-card-count { position:absolute; right:8px; bottom:8px; padding:3px 6px; border-radius:5px; background:rgba(0,0,0,.6); font-size:.65rem; font-weight:700; }
.album-card-body { padding:.75rem 1rem; }
.album-card-title { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.album-card-body h3 { margin:0; font-size:.85rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.album-card-body p { margin:4px 0 8px; font-size:.7rem; color:var(--text-secondary); }
.album-status-line { font-size:.68rem; color:var(--text-secondary); display:flex; gap:12px; }

/* Switch rows (edit modals) */
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--outline-color); cursor:pointer; }
.switch-row strong,.switch-row small { display:block; }
.switch-row strong { font-size:.82rem; }
.switch-row small { font-size:.7rem; color:var(--text-secondary); margin-top:2px; }
.switch-row input { position:absolute; opacity:0; width:0; height:0; }
.switch-row i { position:relative; width:31px; height:18px; flex-shrink:0; border-radius:20px; background:#475569; transition:.2s; }
.switch-row i::after { content:''; position:absolute; width:14px; height:14px; left:2px; top:2px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.2s; }
.switch-row input:checked+i { background:#5865f2; }
.switch-row input:checked+i::after { transform:translateX(13px); }

/* Album track editor */
.album-track-editor { display:flex; flex-direction:column; gap:7px; margin-top:.8rem; }
.album-edit-row { display:grid; grid-template-columns:25px 1fr 68px 26px; align-items:center; gap:8px; padding:.55rem .65rem; border:1px solid var(--outline-color); border-radius:9px; background:rgba(255,255,255,0.02); }
.album-edit-row > span { color:var(--text-secondary); font-size:.72rem; text-align:center; }
.album-edit-row input { width:100%; padding:.42rem .6rem; font-size:.8rem; background:rgba(255,255,255,0.05); border:1px solid var(--outline-color); border-radius:6px; color:var(--text-primary); outline:none; }
.album-edit-row small { color:var(--text-secondary); font-size:.65rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-edit-row button { color:var(--text-secondary); }

/* Studio button aliases (JS uses these class names) */
.primary-button { cursor:pointer; font-family:Poppins,sans-serif; font-weight:600; border:none; border-radius:8px; padding:.65rem 1.25rem; font-size:.9rem; transition:var(--transition); display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; background:var(--accent-primary); color:var(--white); }
.secondary-button { cursor:pointer; font-family:Poppins,sans-serif; font-weight:600; border:1px solid var(--outline-color); border-radius:8px; padding:.65rem 1.25rem; font-size:.9rem; transition:var(--transition); display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; background:transparent; color:var(--text-primary); }
.ghost-button { cursor:pointer; background:transparent; color:var(--text-secondary); border:1px solid transparent; border-radius:8px; padding:.55rem 1rem; font:600 .8rem Poppins,sans-serif; display:inline-flex; align-items:center; gap:.4rem; }
.text-button { cursor:pointer; background:transparent; color:var(--text-secondary); border:none; padding:.4rem 0; font:600 .78rem Poppins,sans-serif; }
.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.text-button:hover { opacity:.88; }
.primary-button:disabled,.secondary-button:disabled { opacity:.55; cursor:wait; }

/* Toast region */
.toast-region { position:fixed; z-index:5000; right:22px; bottom:22px; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast { width:min(330px,calc(100vw-44px)); display:grid; grid-template-columns:22px 1fr; align-items:start; gap:10px; padding:13px 14px; color:#f5f1eb; border:1px solid var(--outline-color); border-radius:11px; background:var(--panel-background); box-shadow:0 16px 45px rgba(0,0,0,.25); animation:toast-in .25s ease; }
.toast.success { border-color:rgba(74,222,128,.38); }
.toast.error { border-color:rgba(248,113,113,.45); }
.toast .icon { width:17px; color:#a5b4fc; flex-shrink:0; }
.toast.success .icon { color:#6ec796; }
.toast.error .icon { color:#ee7777; }
.toast strong,.toast span { display:block; }
.toast strong { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.toast span { margin-top:2px; color:var(--text-secondary); font-size:.74rem; line-height:1.5; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }

/* Studio version of upload active class */
body.studio-upload-active { overflow:hidden; }

/* Modal layer aliases (studio JS uses .modal-layer, not .modal-backdrop) */
.modal-layer { position:fixed; z-index:2000; inset:0; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; background:rgba(5,9,16,.75); backdrop-filter:blur(10px); transition:.22s; }
.modal-layer.open { visibility:visible; opacity:1; }
.modal-layer .modal-card { width:min(510px,100%); max-height:calc(100vh-40px); overflow-y:auto; padding:25px; border:1px solid var(--outline-color); border-radius:12px; background:var(--panel-background); box-shadow:0 20px 60px rgba(0,0,0,.5); transform:translateY(8px) scale(.985); transition:.22s; }
.modal-layer.open .modal-card { transform:none; }
.modal-layer .modal-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:21px; }
.modal-layer .modal-heading h2 { margin:0; font-size:1.15rem; }
.modal-layer .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:23px; }
.modal-layer .modal-close { width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; cursor:pointer; color:var(--text-secondary); font-size:1.1rem; }
.modal-layer .modal-close:hover { background:rgba(255,255,255,.06); }
.modal-layer.compact-modal { max-width:400px; text-align:center; }

/* Menu popover */
.menu-popover { position:fixed; z-index:2100; width:172px; padding:5px; border:1px solid var(--outline-color); border-radius:10px; background:var(--panel-background); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.menu-popover button { width:100%; display:flex; align-items:center; gap:8px; min-height:33px; padding:0 9px; text-align:left; border:0; border-radius:6px; background:transparent; cursor:pointer; font-size:.78rem; color:var(--text-primary); }
.menu-popover button:hover { background:rgba(88,101,242,.12); }
.menu-popover button.danger { color:#fca5a5; }
.menu-popover button.danger:hover { background:rgba(239,68,68,.14); }

/* Confirm icon */
.confirm-icon { width:43px; height:43px; display:grid; place-items:center; margin:0 auto 14px; color:#a5b4fc; border-radius:13px; background:rgba(88,101,242,.14); }
.confirm-icon .icon { width:22px; height:22px; }
.compact-modal h2 { margin:0; font-size:1.05rem; }
.compact-modal p { margin:10px 0 0; color:var(--text-secondary); font-size:.82rem; line-height:1.65; }

/* Publishing action buttons */
.publish-action { min-width:100px; }

/* Membership stats */
.membership-stats { display:flex; gap:20px; flex-wrap:wrap; }
.membership-stat { text-align:center; padding:.6rem 1.1rem; border:1px solid var(--outline-color); border-radius:10px; background:rgba(255,255,255,0.018); min-width:110px; }
.membership-stat strong { display:block; font:700 1rem Poppins,sans-serif; color:var(--text-primary); }
.membership-stat span { display:block; margin-top:2px; color:var(--text-secondary); font-size:.66rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

/* Cover preview placeholder */
.cover-preview { width:100%; height:100%; display:grid; place-items:center; color:var(--text-secondary); }

/* Eyebrow label */
.eyebrow { margin:0 0 6px; color:var(--text-secondary); font-size:.65rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width:768px) {
  .modal-layer .modal-card { width:100%; padding:18px; }
}