/* v11a: band Shop, Albums, Checkout preview and Band Studio. Palette: cyan #19e6ff, purple #8a2bff, gold #ffc83d. */
.btn.btn-primary { background: linear-gradient(180deg, #7af3ff, #19e6ff 45%, #0bb8d0); border-color: transparent; color: #041018; font-weight: 800; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.shop-main { max-width: 1100px; margin: 0 auto 64px; padding: 0 20px; }
.shop-main h1 { font-size: clamp(28px, 4vw, 42px); margin: 18px 0 10px; }
.shop-fine { color: var(--muted); font-size: 16px; margin: 14px 0 0; }

/* band page: shop grid */
.shop-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.shop-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 18px; padding: 10px 10px 14px; transition: border-color .18s, transform .18s; }
.shop-card:hover, .shop-card:focus { border-color: #19e6ff; transform: translateY(-2px); outline: none; }
.shop-card-photo { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(25,230,255,.35), rgba(138,43,255,.45)); display: grid; place-items: center; margin-bottom: 6px; }
.shop-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-card-ph { font-size: 64px; font-weight: 900; color: #07060d; }
.shop-card-cat { color: #19e6ff; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.shop-card-title { font-size: 19px; line-height: 1.25; }
.shop-card-price { font-size: 20px; font-weight: 900; }
.shop-card-ship { color: var(--muted); font-size: 15px; }
.shop-badge { position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.shop-badge-out { background: rgba(7,6,13,.85); color: #fff; border: 1px solid var(--stroke-strong); }

/* album player + cards */
.alb-player { position: sticky; top: 8px; z-index: 3; background: rgba(10,8,22,.94); border: 1px solid rgba(25,230,255,.5); border-radius: 18px; padding: 14px 16px; margin: 0 0 18px; box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.alb-now { display: flex; flex-direction: column; margin-bottom: 6px; }
.alb-now-title { font-size: 20px; } .alb-now-sub { color: var(--muted); font-size: 16px; }
.alb-progress { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.alb-progress input[type=range] { flex: 1; min-height: 0; padding: 0; accent-color: #19e6ff; background: none; box-shadow: none; border: 0; }
.alb-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; min-width: 42px; }
.alb-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.alb-card { display: grid; grid-template-columns: 220px 1fr; gap: 6px 22px; padding: 16px; margin: 0 0 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); }
.alb-cover { grid-row: span 2; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #19e6ff, #8a2bff); display: grid; place-items: center; }
.alb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alb-cover-ph { font-size: 72px; color: #07060d; }
.alb-title { margin: 0; font-size: 26px; color: var(--text); }
.alb-meta { margin: 4px 0; color: #19e6ff; font-weight: 700; }
.alb-desc { margin: 6px 0; white-space: pre-wrap; color: var(--muted); }
.alb-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.alb-buy { border-color: #8a2bff; }
.alb-tracks { grid-column: 2; list-style: none; margin: 8px 0 0; padding: 0; }
.alb-track { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; width: 100%; text-align: left; min-height: 44px; border-radius: 10px; margin: 0 0 4px; padding: 8px 12px; box-shadow: none; backdrop-filter: none; background: rgba(255,255,255,.03); }
.alb-track:hover, .alb-track:focus { transform: none; }
.alb-track.is-now { border-color: #19e6ff; background: rgba(25,230,255,.12); }
.alb-tn { color: var(--muted); font-variant-numeric: tabular-nums; } .alb-td { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .alb-card { grid-template-columns: 1fr; } .alb-cover { grid-row: auto; max-width: 320px; } .alb-tracks { grid-column: 1; }
  .alb-controls .btn { flex: 1 1 45%; }
}

/* product page */
.sp-back { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0; }
.sp-back a:not(.btn) { color: #19e6ff; font-weight: 700; text-decoration: none; font-size: 18px; }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.sp-photo { aspect-ratio: 1; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, rgba(25,230,255,.35), rgba(138,43,255,.45)); display: grid; place-items: center; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sp-thumb { width: 72px; height: 72px; min-height: 0; padding: 0; overflow: hidden; border-radius: 10px; }
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-info h1 { margin: 6px 0 8px; }
.sp-price { font-size: 30px; font-weight: 900; margin: 0 0 14px; } .sp-ship { font-size: 18px; color: var(--muted); font-weight: 600; }
.sp-opt { margin: 0 0 14px; } .sp-opt-l { display: block; font-weight: 800; margin-bottom: 6px; }
.sp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sp-chip { min-width: 56px; }
.sp-chip.is-on { border-color: #19e6ff; background: rgba(25,230,255,.18); box-shadow: 0 0 0 2px rgba(25,230,255,.5); }
.sp-chip.is-out { opacity: .45; text-decoration: line-through; }
.sp-stock { font-weight: 800; color: #19e6ff; min-height: 1.4em; } .sp-stock.is-out { color: var(--muted); }
.sp-buy { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.sp-qty { display: flex; flex-direction: column; font-weight: 700; gap: 4px; }
.sp-total { font-weight: 700; margin: 12px 0 0; }
.sp-msg { min-height: 1.4em; font-weight: 700; } .sp-msg a { color: #19e6ff; }
.sp-desc { margin-top: 18px; line-height: 1.55; font-size: 18px; white-space: pre-wrap; }
@media (max-width: 760px) { .sp-grid { grid-template-columns: 1fr; gap: 18px; } }

/* checkout */
.co-preview { margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px solid #8a2bff; background: rgba(138,43,255,.18); font-size: 17px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 26px; align-items: start; }
.co-step { background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 18px; padding: 16px 18px; margin: 0 0 18px; }
.co-step h2 { margin: 0 0 12px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.co-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #19e6ff, #8a2bff); color: #07060d; font-weight: 900; }
.co-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--stroke); }
.co-line-ph { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, rgba(25,230,255,.4), rgba(138,43,255,.5)); display: grid; place-items: center; font-size: 26px; color: #07060d; }
.co-line-ph img { width: 100%; height: 100%; object-fit: cover; }
.co-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-line-unit { color: var(--muted); font-size: 15px; }
.co-line-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.co-line-ctl select { min-height: 42px; padding: 4px 8px; width: auto; min-width: 64px; }
.co-ok { color: #19e6ff; font-weight: 800; min-height: 1.4em; }
.co-remove { min-height: 42px; padding: 4px 12px; font-size: 15px; }
.co-line-total { font-weight: 900; min-width: 80px; text-align: right; }
.co-problems { color: #ffc83d; font-weight: 700; }
.co-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; margin: 0 0 10px; }
.co-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.co-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.co-pm { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--stroke-strong); font-weight: 800; cursor: pointer; }
.co-pm:has(input:checked) { border-color: #19e6ff; background: rgba(25,230,255,.12); }
.co-pm input { min-height: 0; width: 20px; height: 20px; accent-color: #19e6ff; box-shadow: none; }
.co-pm-ico { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,.12); font-weight: 900; }
.co-card-box .co-row { grid-template-columns: 1fr 1fr; }
.co-fake { min-height: 48px; border-radius: 10px; border: 1px dashed var(--stroke-strong); color: var(--muted); display: flex; align-items: center; padding: 0 14px; margin: 0 0 10px; }
.co-sum { position: sticky; top: 12px; background: rgba(10,8,22,.9); border: 1px solid rgba(25,230,255,.45); border-radius: 18px; padding: 18px; }
.co-sum h2 { margin: 0 0 10px; }
.co-dl { margin: 0; } .co-dl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--stroke); }
.co-dl dt { color: var(--muted); font-weight: 700; } .co-dl dd { margin: 0; font-weight: 800; text-align: right; }
.co-tax { color: var(--muted); font-weight: 600 !important; font-size: 15px; }
.co-total dt, .co-total dd { font-size: 24px; color: var(--text) !important; font-weight: 900 !important; }
.co-place { width: 100%; margin-top: 14px; min-height: 58px; font-weight: 900; white-space: normal; border-color: #8a2bff; }
.co-soon { text-align: center; color: #19e6ff; font-weight: 800; margin: 10px 0 0; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } .co-sum { position: static; } .co-pay { grid-template-columns: 1fr; } .co-row { grid-template-columns: 1fr 1fr; } .co-row label:first-child { grid-column: span 2; } .co-line { grid-template-columns: 56px 1fr; } .co-line-ctl { grid-column: span 2; } }

/* Band Studio */
.st-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.st-tab[aria-selected="true"] { border-color: #19e6ff; background: rgba(25,230,255,.18); }
.st-view { margin-left: auto; }
.st-note { padding: 10px 14px; border-radius: 12px; border: 1px solid #8a2bff; background: rgba(138,43,255,.15); }
.st-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-row { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); margin: 0 0 10px; }
.st-thumb { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, rgba(25,230,255,.4), rgba(138,43,255,.5)); display: grid; place-items: center; font-size: 26px; color: #07060d; }
.st-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-badge { padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 15px; border: 1px solid var(--stroke-strong); white-space: nowrap; }
.st-badge.is-live, .st-badge.is-shipped, .st-badge.is-delivered { border-color: #19e6ff; color: #19e6ff; }
.st-badge.is-draft, .st-badge.is-pending { color: var(--muted); }
.st-badge.is-paid { border-color: #ffc83d; color: #ffc83d; }
.st-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.st-danger { border-color: rgba(255,255,255,.3); color: #fff; }
.st-wait { color: #ffc83d; font-weight: 700; font-size: 15px; }
.st-form { background: rgba(10,8,22,.85); border: 1px solid rgba(25,230,255,.45); border-radius: 18px; padding: 18px; margin: 12px 0 20px; }
.st-form h3 { margin: 0 0 12px; font-size: 22px; }
.st-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; } .st-l { font-weight: 800; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.st-photo { position: relative; width: 110px; height: 110px; border-radius: 12px; overflow: hidden; border: 1px solid var(--stroke); }
.st-photo img { width: 100%; height: 100%; object-fit: cover; }
.st-photo .st-wait { position: absolute; left: 4px; bottom: 4px; background: rgba(7,6,13,.85); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.st-photo .st-x { position: absolute; top: 4px; right: 4px; }
.st-x { min-height: 36px; min-width: 36px; padding: 0 8px; font-size: 16px; }
.st-vars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.st-var { display: grid; grid-template-columns: 1fr 1fr 110px 40px; gap: 8px; align-items: center; }
.st-var-h span { font-weight: 800; color: var(--muted); font-size: 15px; }
.st-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.st-chip { min-height: 38px; padding: 0 12px; }
.st-check { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 10px 0; }
.st-check input { min-height: 0; width: 22px; height: 22px; accent-color: #19e6ff; box-shadow: none; }
.st-storage { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-weight: 700; }
.st-bar { display: block; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; max-width: 520px; }
.st-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #19e6ff, #8a2bff); }
.st-tracks { list-style: none; padding: 0; margin: 0 0 10px; }
.st-track { display: grid; grid-template-columns: 30px 1fr auto 36px 36px 36px; gap: 8px; align-items: center; margin: 0 0 6px; }
.st-tn { color: var(--muted); font-weight: 800; text-align: right; }
.st-prog { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .st-prog progress { flex: 1; accent-color: #19e6ff; }
.st-empty { padding: 26px; border-radius: 16px; border: 1px dashed var(--stroke-strong); text-align: center; }
.st-order { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); margin: 0 0 10px; }
.st-order-h { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.st-ship { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) {
  .st-row { grid-template-columns: 56px 1fr; } .st-row .st-badge { justify-self: start; } .st-row .st-acts { grid-column: span 2; }
  .st-grid2 { grid-template-columns: 1fr; } .st-var { grid-template-columns: 1fr 1fr 80px 40px; }
  .st-track { grid-template-columns: 24px 1fr 36px 36px 36px; } .st-track .hint { grid-column: 2 / -1; grid-row: 2; font-size: 14px; }
  .st-view { margin-left: 0; }
}
/* admin review grid */
.shop-admin-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.shop-admin-card { width: 200px; } .shop-admin-card img { width: 200px; height: 200px; object-fit: cover; border-radius: 12px; display: block; }
@media (max-width: 520px) { .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .shop-card-title { font-size: 16px; } .shop-card-price { font-size: 17px; } }
.st-form label.st-check { flex-direction: row !important; align-items: center; }
.st-form label.st-check input { flex: 0 0 22px; width: 22px !important; }
.st-ship select, .st-ship input { width: auto; flex: 1 1 180px; }
/* YouTube-linked album tracks */
.alb-yt { aspect-ratio: 16 / 9; max-width: 480px; border-radius: 12px; overflow: hidden; margin: 6px 0 4px; background: #000; }
.alb-yt iframe { width: 100%; height: 100%; display: block; border: 0; }
.alb-yt-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; border: 1px solid #8a2bff; color: #c9a6ff; font-size: 13px; font-weight: 800; vertical-align: middle; }
.alb-note { color: var(--muted); font-size: 15px; margin: 8px 0 0; }
.st-yt { margin: 10px 0; padding: 12px; border-radius: 12px; border: 1px dashed rgba(138,43,255,.6); }
.st-yt-row { display: flex; gap: 8px; flex-wrap: wrap; } .st-yt-row input { flex: 1 1 260px; }
.st-yt-prev { display: grid; grid-template-columns: 200px 1fr; gap: 12px; margin-top: 10px; align-items: start; }
.st-yt-prev img { width: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.st-yt-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .st-yt-info .st-field { width: 100%; }
@media (max-width: 600px) { .st-yt-prev { grid-template-columns: 1fr; } }
/* v11a Live: free and ticketed shows */
.live-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.live-free-badge, .live-tix-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 14px; font-weight: 900; letter-spacing: .06em; vertical-align: middle; }
.live-free-badge { background: #19e6ff; color: #041018; }
.live-tix-badge { border: 1px solid #8a2bff; color: #d9c4ff; }
.band-live { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.band-live-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); color: var(--text); text-decoration: none; }
.band-live-card:hover, .band-live-card:focus { border-color: #19e6ff; outline: none; }
.band-live-card strong { font-size: 19px; } .band-live-when { color: var(--muted); font-size: 15px; }

/* Karaoke in Band Studio */
.kara-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.kara-row-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.kara-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(138,43,255,.25); color: #19e6ff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.kara-form .kara-audio audio { width: 100%; margin: 8px 0; }
.kara-warn { color: #ffc83d !important; font-weight: 700; }
.kara-sync { margin: 16px 0; padding: 14px; border-radius: 16px; border: 1px solid rgba(25,230,255,.3); background: rgba(25,230,255,.06); }
.kara-clock { font-variant-numeric: tabular-nums; font-weight: 800; color: #19e6ff; margin-left: auto; }
.kara-now { font-weight: 700; margin: 10px 0; }
.kara-lines { max-height: 240px; overflow-y: auto; margin: 0; padding: 0 0 0 22px; }
.kara-line { cursor: pointer; padding: 4px 6px; border-radius: 8px; }
.kara-line.on { background: rgba(255,200,61,.16); color: #ffc83d; font-weight: 800; }
.kara-t { display: inline-block; min-width: 48px; margin-right: 8px; font-variant-numeric: tabular-nums; color: #19e6ff; }
.real-promise { border: 1px solid rgba(25,230,255,.35); border-radius: 12px; padding: 10px 12px; }
.kara-yt { margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16/9; }
.kara-yt.hidden { display: none !important; }
.kara-yt iframe { width: 100%; height: 100%; }