:root{
  --red:#a50d17;
  --red2:#73070b;
  --bright:#ed1927;
  --black:#07090d;
  --panel:#11141a;
  --panel2:#0b0e13;
  --line:#303640;
  --muted:#929ba7;
  --canvas:#ececea;
}
*{box-sizing:border-box;border-radius:0}
body{margin:0;background:var(--canvas);color:#111;font-family:Arial,sans-serif}
button,input,select{font:inherit}
button,a{cursor:pointer}
.topbar{min-height:72px;padding:0 28px;display:flex;align-items:center;gap:22px;background:#050608;border-bottom:2px solid var(--red2);color:#fff}
.brand{display:flex;align-items:center;font-size:25px;font-weight:900}.brand span{min-height:70px;display:flex;align-items:center;padding:0 15px;margin-right:10px;background:linear-gradient(135deg,#b20f1a,var(--red2) 55%,#310306)}
.product{color:var(--bright);font-size:11px;font-weight:900;letter-spacing:2px}.engine-status{margin-left:auto;padding:8px 10px;border:1px solid #343943;background:#11151a;color:#b7bec8;font-size:9px;font-weight:800}.engine-status.ok{color:#72e097;border-color:#1a7542}.engine-status.bad{color:#ff737c;border-color:#8e121a}
.page{width:min(1240px,calc(100% - 36px));margin:22px auto 50px}.hero{min-height:190px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:radial-gradient(circle at 82% 20%,rgba(185,12,24,.30),transparent 24%),linear-gradient(120deg,#090b10 0%,#11151c 56%,#410409 100%);border-left:4px solid var(--red);color:#fff}.eyebrow{display:block;color:var(--bright);font-size:9px;font-weight:900;letter-spacing:1.4px}.hero h1{margin:7px 0 8px;font-size:40px}.hero p{max-width:720px;margin:0;color:#b6bec9;line-height:1.55}.hero-mark{min-width:155px;padding:16px;border:1px solid #5a161b;background:rgba(0,0,0,.25);color:#aaa;font-size:11px;letter-spacing:2px;text-align:right}.hero-mark strong{display:block;color:#ed1927;font-size:48px;line-height:1}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0;gap:1px;background:#333943}.step{min-height:90px;padding:15px;background:#11141a;color:#fff}.step span{display:block;color:#e31927;font-size:22px;font-weight:900}.step strong{display:block;margin-top:3px}.step small{display:block;margin-top:5px;color:#8d96a2}.step.active{background:linear-gradient(125deg,#15191f,#310407)}
.panel{background:#fff;border:1px solid #d3d0ca;border-top:3px solid var(--red2)}.panel-title{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px 20px;border-bottom:1px solid #ddd}.panel-title h2{margin:5px 0 0;font-size:23px}.panel-title small{color:#737b85}
.upload-panel{padding-bottom:18px}.drop-zone{width:calc(100% - 36px);min-height:250px;margin:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #5c626b;background:#0d1015;color:#fff;text-align:center}.drop-zone.drag{border-color:#ed1927;background:#160a0c}.drop-zone input{display:none}.drop-zone .upload-icon{font-size:38px;color:#ed1927}.drop-zone strong{font-size:23px}.drop-zone span{margin-top:6px;color:#98a1ac}.drop-zone button{margin-top:17px;padding:12px 22px;border:1px solid #b00f19;background:linear-gradient(105deg,#a90e19,#73070b,#330306);color:#fff;font-weight:900}
.message{min-height:18px;margin:8px 18px 0;color:#6e7680;font-size:11px}.message.error{color:#b20e18}.message.success{color:#128544}.workspace{margin-top:14px}.hidden{display:none!important}.status-badge{padding:7px 10px;border:1px solid #21824d;background:#0c2c1a;color:#78e79c;font-size:8px;font-weight:900}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}.metrics article{padding:14px;background:#11141a;border-top:2px solid #73070b;color:#fff}.metrics span{display:block;color:#9ba4af;font-size:8px;text-transform:uppercase}.metrics strong{display:inline-block;margin-top:7px;font-size:25px}.metrics small{margin-left:4px;color:#7f8894}
.mastering-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:14px;margin-top:14px}.settings-panel,.player-panel{background:#0b0e13;border-color:#313741;color:#fff}.settings-panel .panel-title,.player-panel .panel-title{border-bottom-color:#303640}.field{padding:14px 18px 0}.field>label{display:block;margin-bottom:8px;color:#aab2bd;font-size:9px;font-weight:900;text-transform:uppercase}.style-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.style-card{min-height:72px;padding:11px;border:1px solid #363c45;background:#11151b;color:#fff;text-align:left}.style-card strong{display:block;font-size:12px}.style-card small{display:block;margin-top:5px;color:#8e98a5;line-height:1.35}.style-card.active{border-color:#d71622;background:linear-gradient(135deg,#28070a,#12151a 70%)}.field select{width:100%;height:42px;padding:0 10px;border:1px solid #3c424c;background:#0d1015;color:#fff}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.settings-panel>.primary,.settings-panel>.secondary{width:calc(100% - 36px);min-height:44px;margin:14px 18px 0;border:1px solid #b5111c;color:#fff;font-weight:900}.primary{background:linear-gradient(105deg,#a90e18,#73070b,#360306);color:#fff}.secondary{background:#151920;border:1px solid #414853;color:#fff}.settings-panel button:disabled{opacity:.42;cursor:not-allowed}
.ab-buttons{display:grid;grid-template-columns:1fr 1fr;margin:15px 18px 0}.ab-buttons button{height:39px;border:1px solid #3c424c;background:#11151a;color:#aaa;font-weight:900}.ab-buttons button.active{border-color:#bd111d;background:#73070b;color:#fff}.player-art{margin:14px 18px;padding:18px;display:flex;align-items:center;gap:16px;background:radial-gradient(circle at 80% 10%,rgba(180,10,22,.24),transparent 28%),#11151a;border:1px solid #303640}.os-symbol{width:74px;height:74px;display:grid;place-items:center;background:linear-gradient(135deg,#a80e18,#3d0407);font-size:25px;font-weight:900}.player-art span{display:block;color:#e31a27;font-size:8px;font-weight:900}.player-art strong{display:block;margin-top:6px;font-size:18px}audio{width:calc(100% - 36px);margin:0 18px 14px}.master-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 18px 18px}.master-metrics div{padding:10px;background:#11151a;border-top:1px solid #73070b}.master-metrics span{display:block;color:#8e97a3;font-size:7px;text-transform:uppercase}.master-metrics strong{display:block;margin-top:4px}
.download-panel{margin-top:14px;padding:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.download-panel h2{margin:5px 0}.download-panel p{margin:0;color:#69717b}.download-actions{display:flex;gap:8px}.download-actions a{min-height:43px;padding:0 16px;font-weight:900}
footer{min-height:90px;padding:25px calc((100% - min(1240px,calc(100% - 36px)))/2);display:flex;align-items:center;justify-content:space-between;background:#07090d;color:#fff;border-top:2px solid #73070b}footer span{color:#838d99;font-size:10px}
@media(max-width:800px){.workflow,.metrics{grid-template-columns:repeat(2,1fr)}.mastering-grid{grid-template-columns:1fr}.hero-mark{display:none}.download-panel{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.topbar{padding:0 10px;gap:10px}.product{display:none}.brand{font-size:20px}.engine-status{font-size:7px}.page{width:calc(100% - 18px);margin-top:10px}.hero{padding:22px 18px;min-height:155px}.hero h1{font-size:30px}.workflow{grid-template-columns:1fr 1fr}.step{min-height:75px}.metrics{grid-template-columns:1fr 1fr}.style-grid{grid-template-columns:1fr}.drop-zone{width:calc(100% - 20px);margin:10px;min-height:210px}.download-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.download-actions a{width:100%}footer{padding:20px 12px;align-items:flex-start;flex-direction:column;gap:7px}}


/* Mastered dynamics metric */
.master-metrics strong small{
  color:#7f8894;
  font-size:9px;
  font-weight:700;
}

@media(max-width:700px){
  .master-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* =========================================================
   MASTER RESULTS — LOUDNESS RANGE READABILITY
   The LRA value is a nested <span>, so the generic metric-label
   rule was shrinking and muting the actual number.
   ========================================================= */
.master-metrics strong{
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1.08 !important;
}

.master-metrics strong #masterLra{
  display:inline !important;
  color:#ffffff !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

.master-metrics strong small{
  display:inline !important;
  margin-left:3px !important;
  color:#9ba4af !important;
  font-size:9px !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
}

/* =========================================================
   OSBEATS STUDIO MASTERING — FEATURE PACK 0.2
   Mix Health · Volume Match · Reference Mastering · Revisions
   · Genre-aware processing
   ========================================================= */

.field-help{
  display:block;
  margin-top:6px;
  color:#7f8996;
  font-size:9px;
  line-height:1.4;
}

/* Mix Health */
.mix-health-panel{margin-top:14px}
.health-summary{
  min-width:122px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  background:#0d1015;
  border:1px solid #303640;
  color:#fff;
}
.health-summary strong{font-size:25px;color:#fff}
.health-summary span{color:#9da6b2;font-size:9px;font-weight:900;text-transform:uppercase}
.health-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:15px;
  background:#fff;
}
.health-meta>div{
  padding:13px;
  border:1px solid #d7d4cf;
  border-top:2px solid var(--red2);
}
.health-meta span{display:block;color:#8a1118;font-size:8px;font-weight:900;text-transform:uppercase}
.health-meta strong{display:block;margin-top:6px;font-size:17px}
.health-meta small{display:block;margin-top:5px;color:#69727d;line-height:1.4}
.health-issues{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:0 15px 15px;
}
.health-issue{
  min-height:122px;
  padding:12px;
  background:#11141a;
  border:1px solid #303640;
  border-left:3px solid #6d7580;
  color:#fff;
}
.health-issue>span{
  color:#9ca5b0;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.health-issue strong{display:block;margin-top:6px;font-size:13px}
.health-issue p{margin:6px 0 0;color:#b5bdc7;font-size:10px;line-height:1.4}
.health-issue small{display:block;margin-top:7px;color:#828c99;font-size:9px;line-height:1.4}
.health-issue.critical{border-left-color:#f01d2b}
.health-issue.warning{border-left-color:#c87512}
.health-issue.notice{border-left-color:#b41420}
.health-issue.good{border-left-color:#159151}

/* Reference Mastering */
.reference-mastering{
  margin:15px 18px 0;
  padding:13px;
  border:1px solid #333a45;
  border-top:2px solid var(--red2);
  background:#101319;
}
.reference-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.reference-head>div>strong{display:block;margin-top:4px;font-size:13px}
.reference-mastering>p{
  margin:9px 0;
  color:#87919d;
  font-size:9px;
  line-height:1.45;
}
.switch-control,.volume-match-toggle{
  display:flex;
  align-items:center;
  gap:7px;
  color:#fff;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}
.switch-control input,.volume-match-toggle input{
  accent-color:#b30f1b;
}
.reference-upload{
  width:100%;
  min-height:37px;
  border:1px solid #3c434e;
  background:#151920;
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.reference-list{display:grid;gap:6px;margin-top:8px}
.reference-empty{
  padding:9px;
  border:1px dashed #343a44;
  color:#77818d;
  font-size:9px;
  text-align:center;
}
.reference-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) 30px;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid #303640;
  background:#0b0e13;
}
.reference-item.selected{border-color:#9f1019;background:#17080b}
.reference-item input{accent-color:#d51622}
.reference-copy{min-width:0}
.reference-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}
.reference-copy small{display:block;margin-top:3px;color:#808a96;font-size:8px}
.reference-item button{
  width:30px;height:30px;
  border:1px solid #5b2025;
  background:#1a0a0c;
  color:#ff6a73;
  font-size:17px;
}
.message.compact{margin:7px 0 0}

/* Volume match */
.volume-match-toggle{
  min-width:142px;
  justify-content:flex-end;
  padding:8px 10px;
  background:#11151a;
  border:1px solid #303640;
}
.volume-match-toggle small{
  min-width:42px;
  color:#e41b28!important;
  text-align:right;
}

/* Six result metrics */
.master-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.master-metrics strong #masterLra,
.master-metrics strong #originalPreviewLra{
  display:inline!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1.08!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

/* Revisions */
.revisions-panel{margin-top:14px}
.revision-list{display:grid;gap:7px;padding:14px;background:#0b0e13}
.revision-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:10px;
  border:1px solid #303640;
  border-left:3px solid #8e0c14;
  background:#11151a;
  color:#fff;
}
.revision-number{
  min-height:42px;
  display:grid;
  place-items:center;
  border:1px solid #561117;
  background:linear-gradient(135deg,#910c15,#270306);
  font-weight:900;
}
.revision-copy{min-width:0}
.revision-copy strong{display:block;font-size:11px}
.revision-copy span{display:block;margin-top:4px;color:#b5bec8;font-size:9px}
.revision-copy small{
  display:block;
  margin-top:4px;
  color:#7f8995;
  font-size:8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.revision-card button{
  min-height:35px;
  padding:0 12px;
  border:1px solid #a50d17;
  background:#72070b;
  color:#fff;
  font-size:9px;
  font-weight:900;
}

@media(max-width:900px){
  .health-issues{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .health-meta,.health-issues{grid-template-columns:1fr}
  .master-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .volume-match-toggle{min-width:0}
  .revision-card{grid-template-columns:46px minmax(0,1fr)}
  .revision-card button{grid-column:1/-1;width:100%}
}
@media(max-width:520px){
  .panel-title{align-items:flex-start;flex-direction:column}
  .health-summary{width:100%}
  .reference-head{align-items:flex-start;flex-direction:column}
  .volume-match-toggle{width:100%;justify-content:flex-start}
}



/* =========================================================
   MASTERING BATCH QUEUE
   ========================================================= */
.upload-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.small-secondary{
  min-height:34px;
  padding:0 13px;
  border:1px solid #3d444e;
  background:#101319;
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.small-secondary:hover{
  border-color:#b5111c;
  background:#19080b;
}

.small-secondary:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.batch-queue-panel{
  margin:18px;
  border:1px solid #303640;
  background:#0b0e13;
  color:#fff;
}

.batch-queue-head{
  min-height:64px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid #303640;
}

.batch-queue-head strong{
  display:block;
  margin-top:4px;
  font-size:17px;
}

.batch-queue-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.batch-queue-actions>span{
  color:#9ba4af;
  font-size:10px;
  font-weight:800;
}

.batch-queue{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:#303640;
}

.batch-item{
  min-width:0;
  min-height:72px;
  padding:10px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  background:#11151b;
  border-left:3px solid transparent;
}

.batch-item.active{
  border-left-color:#e01926;
  background:linear-gradient(100deg,#21070a,#11151b 48%);
}

.batch-index{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #3a414b;
  color:#e31a27;
  font-size:10px;
  font-weight:900;
}

.batch-copy{
  min-width:0;
}

.batch-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
}

.batch-copy span{
  display:block;
  margin-top:4px;
  color:#8f99a6;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
}

.batch-item>button{
  min-width:60px;
  min-height:32px;
  padding:0 10px;
  border:1px solid #4a515c;
  background:#0d1015;
  color:#fff;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.batch-item.active>button{
  border-color:#9d0d16;
  background:#62080e;
}

.session-toolbar{
  min-height:58px;
  margin-bottom:10px;
  padding:10px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #303640;
  border-top:2px solid #850a12;
  background:#0b0e13;
  color:#fff;
}

.session-toolbar>div:first-child{
  min-width:0;
}

.session-toolbar strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
}

.session-actions{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

@media(max-width:760px){
  .batch-queue{
    grid-template-columns:1fr;
  }

  .session-toolbar,
  .batch-queue-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .session-actions,
  .batch-queue-actions{
    width:100%;
  }

  .session-actions .small-secondary,
  .batch-queue-actions .small-secondary{
    flex:1;
  }
}

@media(max-width:520px){
  .upload-head-actions{
    width:100%;
    align-items:flex-start;
    flex-direction:column;
  }

  .upload-head-actions .small-secondary{
    width:100%;
  }

  .batch-queue-panel{
    margin:10px;
  }

  .batch-item{
    grid-template-columns:34px minmax(0,1fr) auto;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — APPROVED MASTERING BANNER
   ========================================================= */
.hero{
  position:relative !important;
  width:100% !important;
  min-height:330px !important;
  height:330px !important;
  padding:0 !important;
  overflow:hidden !important;

  background-image:url("/assets/studio-mastering-banner.png") !important;
  background-size:cover !important;
  background-position:center 20% !important;
  background-repeat:no-repeat !important;

  border:1px solid #20242b !important;
  border-left:0 !important;
  border-bottom:2px solid var(--red2) !important;
}

/* The artwork already contains the OSBeats logo/tagline,
   so remove the old text overlay and MASTER 01 block. */
.hero > div{
  display:none !important;
}

/* Keep the banner proportion clean on tablets and phones. */
@media(max-width:800px){
  .hero{
    min-height:240px !important;
    height:240px !important;
    background-position:center 24% !important;
  }
}

@media(max-width:520px){
  .hero{
    min-height:165px !important;
    height:165px !important;
    padding:0 !important;
    background-position:center 28% !important;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — RED / BLACK WORKFLOW TABS
   Matches the approved OSBeats button/tab treatment.
   ========================================================= */
.steps{
  gap:1px !important;
  background:#2c3138 !important;
  border-top:1px solid #5b070c !important;
  border-bottom:1px solid #5b070c !important;
}

.step{
  position:relative !important;
  overflow:hidden !important;
  background:
    linear-gradient(135deg,
      #090b0f 0%,
      #11151b 45%,
      #1b090c 72%,
      #4d050a 100%) !important;
  border:0 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}

.step::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(230,20,35,.12), transparent 38%),
    linear-gradient(90deg, transparent, rgba(180,0,14,.08)) !important;
}

.step > *{
  position:relative !important;
  z-index:1 !important;
}

.step .step-number,
.step > strong:first-child{
  color:#ff1828 !important;
}

.step strong,
.step b{
  color:#ffffff !important;
}

.step span,
.step small,
.step p{
  color:#aeb7c3 !important;
}

/* Current / active workflow step */
.step.active,
.step[aria-current="step"],
.step.is-active{
  background:
    linear-gradient(135deg,
      #7e050d 0%,
      #4a050a 36%,
      #19080b 72%,
      #0a0c10 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,30,45,.35),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.step.active::before,
.step[aria-current="step"]::before,
.step.is-active::before{
  background:
    radial-gradient(circle at 0% 50%, rgba(255,30,45,.25), transparent 46%),
    linear-gradient(90deg, rgba(160,0,12,.15), transparent) !important;
}

/* Hover keeps the red/black theme without changing layout */
.step:hover{
  background:
    linear-gradient(135deg,
      #16080b 0%,
      #11151b 48%,
      #30070b 78%,
      #65070d 100%) !important;
}

@media(max-width:700px){
  .steps{
    gap:1px !important;
  }

  .step{
    background:
      linear-gradient(135deg,#0a0c10 0%,#151219 55%,#4b060b 100%) !important;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — MY MASTERS / MASTER HISTORY
   ========================================================= */
.my-masters-panel{
  margin-top:18px;
  border-top:2px solid #8f080f !important;
}

.my-masters-title{
  align-items:flex-start;
}

.my-masters-title p{
  margin:4px 0 0;
  color:#6f7884;
  font-size:13px;
}

.my-masters-head-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.my-masters-head-actions > span{
  color:#6f7884;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.my-masters-empty{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:24px;
  border:1px dashed #c8cbd0;
  background:#f6f6f5;
}

.my-masters-empty strong{
  color:#11151b;
  font-size:15px;
}

.my-masters-empty span{
  color:#6f7884;
  font-size:13px;
}

.my-masters-list{
  display:grid;
  gap:10px;
}

.my-master-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  border:1px solid #2b3038;
  border-left:3px solid #a10811;
  background:
    linear-gradient(135deg,#0b0e12 0%,#11151b 62%,#2d070b 100%);
  color:#fff;
}

.my-master-main{
  display:flex;
  align-items:center;
  min-width:0;
  gap:12px;
}

.my-master-icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #a10811;
  background:#50070b;
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.my-master-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.my-master-copy strong{
  overflow:hidden;
  color:#fff;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.my-master-copy span{
  color:#aeb7c3;
  font-size:11px;
}

.my-master-copy small{
  overflow:hidden;
  color:#d2d6dc;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.my-master-metrics{
  display:flex;
  align-items:center;
  gap:14px;
}

.my-master-metrics > div{
  min-width:48px;
  text-align:center;
}

.my-master-metrics span{
  display:block;
  margin-bottom:2px;
  color:#89939f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.my-master-metrics strong{
  color:#fff;
  font-size:12px;
}

.my-master-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.master-download-link{
  display:inline-flex;
  min-width:48px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid #b10812;
  background:linear-gradient(135deg,#79070d,#2a070a);
  color:#fff !important;
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}

.master-download-link:hover{
  background:linear-gradient(135deg,#a30812,#42070b);
}

@media(max-width:900px){
  .my-master-item{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .my-master-metrics{
    grid-column:1 / -1;
    justify-content:flex-start;
    padding-left:48px;
  }
}

@media(max-width:650px){
  .my-masters-title{
    gap:12px;
  }

  .my-masters-head-actions{
    width:100%;
    justify-content:space-between;
  }

  .my-master-item{
    grid-template-columns:1fr;
    gap:12px;
  }

  .my-master-metrics{
    grid-column:auto;
    padding-left:0;
  }

  .my-master-actions{
    flex-wrap:wrap;
  }

  .my-master-actions .small-secondary,
  .master-download-link{
    flex:1 1 80px;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — MY MASTERING PROJECTS
   Account-level unfinished tracks / continue mastering
   ========================================================= */
.my-projects-panel{
  margin-top:18px;
  border-top:2px solid #8f080f !important;
}

.my-projects-title{
  align-items:flex-start;
}

.my-projects-title p{
  margin:4px 0 0;
  color:#6f7884;
  font-size:13px;
}

.my-projects-head-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.my-projects-head-actions > span{
  color:#6f7884;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.my-projects-empty{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:24px;
  border:1px dashed #c8cbd0;
  background:#f6f6f5;
}

.my-projects-empty strong{
  color:#11151b;
  font-size:15px;
}

.my-projects-empty span{
  color:#6f7884;
  font-size:13px;
}

.my-projects-list{
  display:grid;
  gap:10px;
}

.my-project-item{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) auto auto;
  align-items:center;
  gap:18px;
  padding:14px 16px;
  border:1px solid #2b3038;
  border-left:3px solid #a10811;
  background:linear-gradient(135deg,#0b0e12 0%,#11151b 58%,#30070b 100%);
  color:#fff;
}

.my-project-item.active{
  border-left-color:#ff1728;
  box-shadow:inset 0 0 0 1px rgba(255,23,40,.18);
  background:linear-gradient(135deg,#17080b 0%,#11151b 48%,#51070c 100%);
}

.my-project-main{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
}

.my-project-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid #b40913;
  background:linear-gradient(135deg,#7d070e,#280609);
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.my-project-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px;
}

.my-project-name-row{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
}

.my-project-name-row > strong{
  overflow:hidden;
  color:#fff;
  font-size:14px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.my-project-status{
  flex:0 0 auto;
  padding:3px 6px;
  border:1px solid #8d0a11;
  background:#36070a;
  color:#ff5360;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}

.my-project-copy > span{
  color:#aeb7c3;
  font-size:11px;
}

.my-project-copy > small{
  overflow:hidden;
  color:#d2d6dc;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.my-project-metrics{
  display:flex;
  align-items:center;
  gap:12px;
}

.my-project-metrics > div{
  min-width:44px;
  text-align:center;
}

.my-project-metrics span{
  display:block;
  margin-bottom:2px;
  color:#89939f;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.my-project-metrics strong{
  color:#fff;
  font-size:11px;
}

.my-project-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.project-continue-btn,
.project-remove-btn{
  min-height:34px;
  border-radius:0;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.project-continue-btn{
  padding:0 12px;
  border:1px solid #c20b16;
  background:linear-gradient(135deg,#9d0812,#3a070a);
  color:#fff;
}

.project-continue-btn:hover{
  background:linear-gradient(135deg,#c10a16,#52070c);
}

.project-remove-btn{
  padding:0 10px;
  border:1px solid #444b55;
  background:#0e1116;
  color:#aeb7c3;
}

.project-remove-btn:hover{
  border-color:#8d0a11;
  color:#fff;
}

@media(max-width:980px){
  .my-project-item{
    grid-template-columns:minmax(0,1fr) auto;
  }

  .my-project-metrics{
    grid-column:1 / -1;
    justify-content:flex-start;
    padding-left:50px;
  }
}

@media(max-width:650px){
  .my-projects-title{
    gap:12px;
  }

  .my-projects-head-actions{
    width:100%;
    justify-content:space-between;
  }

  .my-project-item{
    grid-template-columns:1fr;
    gap:12px;
  }

  .my-project-metrics{
    grid-column:auto;
    padding-left:0;
    flex-wrap:wrap;
  }

  .my-project-actions{
    width:100%;
  }

  .project-continue-btn{
    flex:1 1 auto;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — MEMBERSHIP ALLOWANCE
   ========================================================= */
.mastering-quota-card{
  width:calc(100% - 36px);
  margin:14px 18px 0;
  padding:13px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid #4a1217;
  border-left:3px solid #d3111d;
  background:
    radial-gradient(circle at 100% 0%,rgba(183,8,19,.22),transparent 38%),
    linear-gradient(135deg,#0b0e13,#151117 58%,#37070b);
}

.mastering-quota-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mastering-quota-copy strong{
  color:#fff;
  font-size:13px;
}

.mastering-quota-copy small{
  color:#aeb7c3;
  font-size:10px;
  line-height:1.4;
}

.mastering-quota-remaining{
  flex:0 0 auto;
  min-width:92px;
  padding-left:14px;
  border-left:1px solid #3b414a;
  text-align:right;
}

.mastering-quota-remaining strong{
  display:block;
  color:#ff1d2d;
  font-size:25px;
  line-height:1;
}

.mastering-quota-remaining span{
  display:block;
  margin-top:4px;
  color:#c1c7d0;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}

.master-storage-status{
  color:#79c994 !important;
}

.master-storage-status.expired{
  color:#dd7d84 !important;
}

@media(max-width:650px){
  .mastering-quota-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .mastering-quota-remaining{
    width:100%;
    padding:10px 0 0;
    border-left:0;
    border-top:1px solid #3b414a;
    text-align:left;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — SEND TO MY MUSIC
   ========================================================= */
.send-my-music,
.master-send-my-music{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #d31320;
  border-radius:0;
  background:linear-gradient(135deg,#9d0811 0%,#62070d 55%,#210508 100%);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

.send-my-music:hover,
.master-send-my-music:hover{
  background:linear-gradient(135deg,#c10a16 0%,#7c0710 55%,#2f0609 100%);
}

.send-my-music:disabled,
.master-send-my-music:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.master-send-my-music{
  min-height:34px;
  padding:0 10px;
  font-size:10px;
}

.download-actions{
  flex-wrap:wrap;
}

@media(max-width:650px){
  .send-my-music{
    width:100%;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — ONE-TIME ADD TO MY BEATS LINK
   ========================================================= */
.view-my-beats,
.master-view-my-beats{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border:1px solid #343b45;
  background:#0d1117;
  color:#fff !important;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.view-my-beats:hover,
.master-view-my-beats:hover{
  border-color:#c10a16;
  background:#171b22;
}

.send-my-music:disabled,
.master-added-my-beats{
  border-color:#29653d !important;
  background:linear-gradient(135deg,#12311d,#0d1711) !important;
  color:#8ee0a6 !important;
  opacity:1 !important;
  cursor:default !important;
}

.master-added-my-beats{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  border:1px solid #29653d;
  border-radius:0;
  font:inherit;
  font-size:10px;
  font-weight:900;
}

.master-view-my-beats{
  min-height:34px;
  padding:0 10px;
  font-size:10px;
}

@media(max-width:650px){
  .view-my-beats{
    width:100%;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — MASTER COMPLETE ACTION ROW
   Keep Download WAV / Download MP3 / Added to My Beats /
   View My Beats on one row on desktop.
   ========================================================= */
.download-actions{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}

.download-actions > a,
.download-actions > button{
  flex:0 1 auto !important;
  min-width:0 !important;
  white-space:nowrap !important;
}

#viewMyBeatsBtn{
  order:4 !important;
}

#sendToMyMusicBtn{
  order:3 !important;
}

#wavDownload{
  order:1 !important;
}

#mp3Download{
  order:2 !important;
}

@media(max-width:900px){
  .download-actions{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
  }
}

@media(max-width:650px){
  .download-actions > a,
  .download-actions > button{
    flex:1 1 100% !important;
    width:100% !important;
  }
}



/* =========================================================
   OSBEATS STUDIO MASTERING — EXTRA MASTERING CREDITS
   ========================================================= */
.mastering-quota-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.mastering-purchased-balance{
  color:#81d89c !important;
  font-weight:700;
}

.buy-mastering-credits{
  min-height:34px;
  padding:0 11px;
  border:1px solid #c40d18;
  border-radius:0;
  background:linear-gradient(135deg,#950811,#36070a);
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.buy-mastering-credits:hover{
  background:linear-gradient(135deg,#bd0a16,#50070c);
}

.mastering-credit-shop{
  margin:10px 18px 0;
  padding:14px;
  border:1px solid #3b1519;
  border-left:3px solid #d3111d;
  background:linear-gradient(135deg,#0b0e13,#13171d 65%,#31070b);
}

.mastering-credit-shop.hidden{
  display:none !important;
}

.mastering-credit-shop-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.mastering-credit-shop-head>div{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mastering-credit-shop-head strong{
  color:#fff;
  font-size:13px;
}

#closeMasteringCreditShop{
  width:30px;
  height:30px;
  border:1px solid #444b56;
  background:#0d1015;
  color:#fff;
  font-size:20px;
  cursor:pointer;
}

.mastering-credit-shop>p{
  margin:8px 0 12px;
  color:#aeb7c3;
  font-size:10px;
}

.mastering-credit-packs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}

.mastering-credit-pack{
  min-height:88px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  padding:11px;
  border:1px solid #3a414c;
  border-radius:0;
  background:#0d1117;
  color:#fff;
  text-align:left;
  cursor:pointer;
}

.mastering-credit-pack:hover{
  border-color:#c50d18;
  background:linear-gradient(135deg,#150c10,#35070b);
}

.mastering-credit-pack strong{
  color:#fff;
  font-size:12px;
}

.mastering-credit-pack span{
  color:#ff2534;
  font-size:16px;
  font-weight:900;
}

.mastering-credit-pack small{
  color:#929ba7;
  font-size:9px;
}

@media(max-width:800px){
  .mastering-credit-packs{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mastering-quota-actions{
    align-items:flex-end;
    flex-direction:column;
  }
}

@media(max-width:520px){
  .mastering-credit-packs{
    grid-template-columns:1fr;
  }

  .buy-mastering-credits{
    width:100%;
  }

  .mastering-quota-actions{
    width:100%;
    align-items:stretch;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — ALLOWANCE / CREDIT BUTTON FIX
   Keep the allowance readable in the narrow mastering column
   and give Buy Extra Credits its own full-width action row.
   ========================================================= */
.mastering-quota-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px 14px !important;
}

.mastering-quota-copy{
  grid-column:1 !important;
  grid-row:1 !important;
}

.mastering-quota-actions{
  display:contents !important;
}

.mastering-quota-remaining{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:98px !important;
  padding-left:14px !important;
  border-left:1px solid #3b414a !important;
  text-align:right !important;
}

.buy-mastering-credits{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  width:100% !important;
  min-height:40px !important;
  padding:0 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:11px !important;
  letter-spacing:.01em !important;
  white-space:nowrap !important;
}

@media(max-width:650px){
  .mastering-quota-card{
    grid-template-columns:1fr !important;
  }

  .mastering-quota-copy{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .mastering-quota-remaining{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    padding:10px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid #3b414a !important;
    text-align:left !important;
  }

  .buy-mastering-credits{
    grid-column:1 !important;
    grid-row:3 !important;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — BATCH QUEUE REMOVE CONTROL
   ========================================================= */
.batch-item{
  grid-template-columns:38px minmax(0,1fr) auto !important;
}

.batch-item-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.batch-item-actions>button{
  min-width:60px;
  min-height:32px;
  padding:0 10px;
  border-radius:0;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

.batch-open-btn{
  border:1px solid #4a515c;
  background:#0d1015;
  color:#fff;
}

.batch-item.active .batch-open-btn{
  border-color:#9d0d16;
  background:#62080e;
}

.batch-remove-btn{
  border:1px solid #7e1017;
  background:#25070a;
  color:#ff6570;
}

.batch-remove-btn:hover{
  border-color:#d3111d;
  background:#51080d;
  color:#fff;
}

@media(max-width:650px){
  .batch-item{
    grid-template-columns:34px minmax(0,1fr) !important;
  }

  .batch-item-actions{
    grid-column:1 / -1;
    width:100%;
    padding-left:44px;
  }

  .batch-item-actions>button{
    flex:1 1 50%;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — BATCH MASTER ALL
   ========================================================= */
.batch-master-all{
  min-height:34px;
  padding:0 13px;
  border:1px solid #c20d18;
  border-radius:0;
  background:linear-gradient(135deg,#970811,#39070a);
  color:#fff;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
  white-space:nowrap;
}

.batch-master-all:hover:not(:disabled){
  background:linear-gradient(135deg,#c10a16,#54070c);
}

.batch-master-all:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.batch-master-progress{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 14px;
  align-items:center;
  padding:12px 14px;
  border-top:1px solid #343a43;
  background:#0a0d11;
}

.batch-master-progress.hidden{
  display:none !important;
}

.batch-master-progress-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px;
}

.batch-master-progress-copy strong{
  color:#fff;
  font-size:11px;
}

.batch-master-progress-copy span{
  color:#aab3bf;
  font-size:9px;
}

.batch-master-progress-bar{
  grid-column:1;
  height:5px;
  overflow:hidden;
  background:#2a3038;
}

.batch-master-progress-bar>span{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#6d070c,#df111e);
  transition:width .25s ease;
}

#stopBatchMasterBtn{
  grid-column:2;
  grid-row:1 / span 2;
  min-height:34px;
  padding:0 11px;
  border:1px solid #555c67;
  border-radius:0;
  background:#12161c;
  color:#fff;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}

#stopBatchMasterBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@media(max-width:720px){
  .batch-queue-actions{
    flex-wrap:wrap;
  }

  .batch-master-all{
    flex:1 1 auto;
  }

  .batch-master-progress{
    grid-template-columns:1fr;
  }

  .batch-master-progress-bar,
  #stopBatchMasterBtn{
    grid-column:1;
    grid-row:auto;
  }

  #stopBatchMasterBtn{
    width:100%;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — FOUR-STEP PAGE FLOW
   Step 1 Upload -> Step 2 Analyze -> Step 3 Preview -> Step 4 Master
   ========================================================= */
.flow-step-heading{
  margin:14px 0 0;
  min-height:76px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  border:1px solid #d2d2cf;
  border-top:2px solid #970b13;
  background:#f5f5f3;
}

.flow-step-number{
  flex:0 0 auto;
  min-width:72px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #830911;
  background:linear-gradient(135deg,#9c0a13,#35070a);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.flow-step-heading h2{
  margin:2px 0 3px;
  color:#10141a;
  font-size:22px;
}

.flow-step-heading p{
  margin:0;
  color:#66707c;
  font-size:11px;
}

.flow-step-heading + .session-toolbar{
  margin-top:10px;
}

.mastering-grid{
  margin-top:10px !important;
}

/* Batch Tracks now occupies the unused lower area in Original vs Mastered. */
.player-panel #batchQueuePanel{
  margin:18px !important;
  margin-top:22px !important;
  border-color:#343a44 !important;
  background:#0a0d11 !important;
}

.player-panel #batchQueuePanel .batch-queue-head{
  min-height:58px;
}

.player-panel #batchQueuePanel .batch-queue{
  grid-template-columns:1fr !important;
}

.player-panel #batchQueuePanel .batch-item{
  min-height:62px;
}

.player-panel #batchQueuePanel .batch-queue-head strong{
  font-size:15px;
}

/* Step 4 owns allowance, extra credits and the final render action. */
.final-master-panel{
  margin-top:14px;
  padding-bottom:18px;
  border-top:2px solid #970b13 !important;
}

.final-master-title{
  align-items:flex-start;
}

.final-master-title p{
  margin:4px 0 0;
  color:#68727e;
  font-size:11px;
}

.final-master-panel>.mastering-quota-card{
  margin-top:18px !important;
}

.final-master-panel>#renderBtn{
  width:calc(100% - 36px);
  min-height:46px;
  margin:14px 18px 0;
  border:1px solid #b5111c;
  background:linear-gradient(105deg,#a90e18,#73070b,#360306);
  color:#fff;
  font-weight:900;
}

.final-master-panel>#renderBtn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.final-master-panel>#masteringMessage{
  margin-left:18px;
  margin-right:18px;
}

#myProjectsPanel{
  margin-top:22px;
}

@media(max-width:800px){
  .flow-step-heading{
    align-items:flex-start;
  }

  .player-panel #batchQueuePanel{
    margin:12px !important;
  }
}

@media(max-width:560px){
  .flow-step-heading{
    flex-direction:column;
  }

  .flow-step-number{
    width:100%;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — STEP 1 RED / BLACK FLOW BOX
   ========================================================= */
.upload-panel .upload-step-title{
  min-height:78px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:14px 16px !important;
  border:1px solid #5a0a10 !important;
  border-top:2px solid #d1111e !important;
  background:
    radial-gradient(circle at 0% 50%,rgba(225,17,30,.22),transparent 34%),
    linear-gradient(110deg,#0b0d11 0%,#11141a 48%,#3e070b 78%,#74080f 100%) !important;
  color:#fff !important;
}

.upload-step-title-main{
  display:flex;
  min-width:0;
  align-items:center;
  gap:14px;
}

.upload-step-title .flow-step-number{
  min-width:76px !important;
  min-height:46px !important;
  border:1px solid #ef1a28 !important;
  background:linear-gradient(135deg,#a60a14,#52070c,#160508) !important;
  color:#fff !important;
}

.upload-step-title .eyebrow{
  color:#ff2433 !important;
}

.upload-step-title h2{
  margin:2px 0 0 !important;
  color:#fff !important;
}

.upload-step-title .upload-head-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

.upload-step-title .upload-head-actions small{
  color:#c4cbd4 !important;
}

.upload-step-title #newBatchBtn{
  border-color:#c30d18 !important;
  background:linear-gradient(135deg,#850811,#260609) !important;
  color:#fff !important;
}

.upload-step-title #newBatchBtn:hover{
  background:linear-gradient(135deg,#af0a15,#41070b) !important;
}

@media(max-width:760px){
  .upload-panel .upload-step-title{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .upload-step-title .upload-head-actions{
    width:100% !important;
    justify-content:space-between !important;
  }
}

@media(max-width:520px){
  .upload-step-title-main{
    width:100% !important;
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .upload-step-title .flow-step-number{
    width:100% !important;
  }

  .upload-step-title .upload-head-actions{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .upload-step-title #newBatchBtn{
    width:100% !important;
  }
}



/* =========================================================
   OSBEATS STUDIO MASTERING — ALWAYS-VISIBLE CREDIT SUMMARY
   Show allowance and Buy Extra Credits before any upload.
   ========================================================= */
.credits-overview-panel{
  margin-top:22px;
  padding-bottom:18px;
}

.credits-overview-title{
  align-items:flex-start;
}

.credits-overview-title p{
  margin:4px 0 0;
  color:#69737f;
  font-size:11px;
}

.credits-overview-panel>.mastering-quota-card{
  margin-top:18px !important;
}

.credits-overview-panel>.mastering-credit-shop{
  margin-top:12px !important;
}

.final-master-note{
  display:block;
  margin-top:8px;
  color:#69737f;
  font-size:10px;
  line-height:1.45;
}

@media(max-width:560px){
  .credits-overview-title{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — VERSION HISTORY ACTIVE STATE
   ========================================================= */
.revision-selection-status{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid #4b1116;
  border-left:3px solid #d1111e;
  background:linear-gradient(100deg,#130a0d,#0d1117 72%);
}

.revision-selection-status>span{
  color:#ff2635;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.revision-selection-status>strong{
  color:#fff;
  font-size:12px;
}

.revision-selection-status>small{
  color:#99a3af;
  font-size:9px;
}

.revision-card.active-revision{
  border-color:#cf111d !important;
  border-left:4px solid #ef1725 !important;
  background:
    radial-gradient(circle at 0 50%,rgba(207,17,29,.18),transparent 34%),
    linear-gradient(110deg,#17080c,#11151b 72%,#31070b) !important;
  box-shadow:inset 0 0 0 1px rgba(239,23,37,.12);
}

.revision-copy-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.revision-active-badge{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:2px 6px;
  border:1px solid #278849;
  background:#0c321a;
  color:#77efa0;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
}

.revision-card button.revision-in-use,
.revision-card button.revision-in-use:disabled{
  border-color:#278849 !important;
  background:#0c321a !important;
  color:#77efa0 !important;
  opacity:1 !important;
  cursor:default !important;
}

.revision-card button.revision-loading{
  border-color:#c20d18 !important;
  background:#4b070b !important;
  color:#fff !important;
  opacity:.8 !important;
}

@media(max-width:650px){
  .revision-selection-status{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   OSBEATS STUDIO MASTERING — RESPONSIVE POLISH PASS
   Desktop / iPad / tablet / phone
   Keep this block last so it safely overrides earlier rules.
   ========================================================= */

/* Global responsive safety */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
audio,
video{
  max-width:100%;
}

audio{
  width:100%;
}

.page,
.workspace,
.panel,
.mastering-grid,
.analysis-card,
.settings-panel,
.player-panel,
.my-projects-panel,
.my-masters-panel,
.credits-overview-panel{
  min-width:0;
}

.panel-title > *,
.session-toolbar > *,
.batch-queue-head > *,
.download-panel > *,
.my-project-item > *,
.my-master-item > *,
.revision-card > *{
  min-width:0;
}

/* ---------- Large tablet / narrow desktop ---------- */
@media(max-width:1050px){
  .page{
    width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero{
    min-height:165px !important;
    padding:24px 26px !important;
  }

  .hero h1{
    font-size:34px !important;
  }

  .workflow{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .step{
    min-width:0 !important;
    padding:13px 12px !important;
  }

  .step strong,
  .step small{
    overflow-wrap:anywhere;
  }

  /* Two mastering columns get cramped inside Creator Studio before 800px. */
  .mastering-grid{
    grid-template-columns:1fr !important;
  }

  .settings-panel,
  .player-panel{
    width:100% !important;
  }

  .player-panel #batchQueuePanel{
    margin:14px !important;
  }

  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .health-meta{
    grid-template-columns:1fr 1fr !important;
  }

  .download-panel{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .download-actions{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .my-project-item,
  .my-master-item{
    grid-template-columns:minmax(0,1fr) !important;
    gap:12px !important;
  }

  .my-project-metrics,
  .my-master-metrics{
    grid-column:auto !important;
    padding-left:0 !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .my-project-actions,
  .my-master-actions{
    width:100% !important;
    flex-wrap:wrap !important;
  }
}

/* ---------- iPad / tablet portrait ---------- */
@media(max-width:820px){
  .page{
    width:calc(100% - 18px) !important;
    margin-top:12px !important;
  }

  .topbar{
    min-height:60px !important;
    padding:0 14px !important;
    gap:12px !important;
  }

  .brand{
    font-size:22px !important;
  }

  .product{
    font-size:9px !important;
  }

  .engine-status{
    margin-left:auto !important;
    white-space:nowrap;
  }

  .hero{
    min-height:145px !important;
    padding:20px !important;
  }

  .hero h1{
    font-size:30px !important;
  }

  .hero p{
    font-size:12px !important;
  }

  .hero-mark{
    display:none !important;
  }

  .workflow{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .step{
    min-height:76px !important;
  }

  .flow-step-heading{
    align-items:flex-start !important;
    padding:13px 14px !important;
  }

  .flow-step-heading h2{
    font-size:20px !important;
  }

  .panel-title,
  .upload-panel .upload-step-title,
  .session-toolbar,
  .batch-queue-head,
  .credits-overview-title,
  .my-projects-title,
  .my-masters-title,
  .final-master-title{
    align-items:flex-start !important;
    flex-wrap:wrap !important;
  }

  .upload-panel .upload-step-title{
    flex-direction:column !important;
  }

  .upload-step-title-main,
  .upload-head-actions{
    width:100% !important;
  }

  .upload-step-title .upload-head-actions{
    justify-content:space-between !important;
    flex-wrap:wrap !important;
  }

  .drop-zone{
    width:calc(100% - 24px) !important;
    margin:12px !important;
    min-height:210px !important;
    padding:18px !important;
  }

  .drop-zone strong{
    font-size:20px !important;
    text-align:center;
  }

  .drop-zone span{
    text-align:center;
  }

  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .health-meta{
    grid-template-columns:1fr !important;
  }

  .style-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .field{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .settings-panel>.primary,
  .settings-panel>.secondary{
    width:calc(100% - 28px) !important;
    margin-left:14px !important;
    margin-right:14px !important;
  }

  .player-panel .panel-title{
    gap:10px !important;
  }

  .volume-match-toggle{
    margin-left:0 !important;
  }

  .player-art{
    min-height:100px !important;
  }

  .master-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .batch-queue-actions{
    width:100%;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .batch-queue-actions > span{
    margin-right:auto;
  }

  .batch-item{
    grid-template-columns:36px minmax(0,1fr) !important;
  }

  .batch-item-actions{
    grid-column:1 / -1 !important;
    width:100% !important;
    padding-left:46px !important;
  }

  .batch-item-actions > button{
    flex:1 1 120px !important;
  }

  .batch-master-progress{
    grid-template-columns:1fr !important;
  }

  .batch-master-progress-bar,
  #stopBatchMasterBtn{
    grid-column:1 !important;
    grid-row:auto !important;
  }

  #stopBatchMasterBtn{
    width:100% !important;
  }

  .mastering-quota-card{
    width:calc(100% - 24px) !important;
    margin:12px !important;
  }

  .mastering-credit-shop{
    margin:12px !important;
  }

  .mastering-credit-packs{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .revision-card{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:10px !important;
  }

  .revision-selection-status{
    flex-wrap:wrap !important;
  }

  .my-projects-head-actions,
  .my-masters-head-actions{
    width:100% !important;
    justify-content:space-between !important;
  }

  .my-project-name-row{
    flex-wrap:wrap !important;
  }

  .my-project-copy > small,
  .my-master-copy small{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere;
  }

  .my-project-actions > *,
  .my-master-actions > *{
    flex:1 1 120px !important;
  }

  .download-actions{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }

  .download-actions > a,
  .download-actions > button{
    width:100% !important;
    min-height:42px !important;
  }

  .final-master-panel>#renderBtn{
    width:calc(100% - 24px) !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }

  footer{
    padding-left:14px !important;
    padding-right:14px !important;
    gap:8px !important;
  }
}

/* ---------- Phone ---------- */
@media(max-width:560px){
  body{
    font-size:13px;
  }

  .page{
    width:calc(100% - 10px) !important;
    margin-top:6px !important;
    margin-bottom:24px !important;
  }

  .topbar{
    min-height:54px !important;
    padding:0 8px !important;
    gap:8px !important;
  }

  .brand{
    font-size:19px !important;
  }

  .product{
    display:none !important;
  }

  .engine-status{
    max-width:48%;
    overflow:hidden;
    font-size:7px !important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero{
    min-height:128px !important;
    padding:17px 14px !important;
  }

  .hero h1{
    font-size:26px !important;
  }

  .hero p{
    font-size:11px !important;
    line-height:1.45 !important;
  }

  .workflow{
    grid-template-columns:1fr 1fr !important;
    margin:8px 0 !important;
  }

  .step{
    min-height:70px !important;
    padding:10px !important;
  }

  .step span{
    font-size:18px !important;
  }

  .step strong{
    font-size:12px !important;
  }

  .step small{
    font-size:9px !important;
  }

  .flow-step-heading{
    flex-direction:column !important;
    gap:9px !important;
    padding:12px !important;
  }

  .flow-step-number{
    width:100% !important;
    min-height:38px !important;
  }

  .flow-step-heading h2{
    font-size:19px !important;
  }

  .flow-step-heading p{
    font-size:10px !important;
    line-height:1.4;
  }

  .upload-step-title-main{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .upload-step-title .flow-step-number{
    width:100% !important;
  }

  .upload-step-title .upload-head-actions{
    align-items:stretch !important;
    flex-direction:column !important;
  }

  .upload-step-title #newBatchBtn{
    width:100% !important;
  }

  .drop-zone{
    width:calc(100% - 14px) !important;
    margin:7px !important;
    min-height:190px !important;
    padding:14px 10px !important;
  }

  .drop-zone strong{
    font-size:18px !important;
  }

  .drop-zone button{
    width:100%;
    max-width:260px;
  }

  .credits-overview-title p,
  .my-projects-title p,
  .my-masters-title p{
    font-size:11px !important;
  }

  .mastering-quota-card{
    width:calc(100% - 14px) !important;
    margin:7px !important;
    grid-template-columns:1fr !important;
    padding:12px !important;
  }

  .mastering-quota-copy{
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .mastering-quota-remaining{
    grid-column:1 !important;
    grid-row:2 !important;
    width:100% !important;
    min-width:0 !important;
    padding:10px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid #3b414a !important;
    text-align:left !important;
  }

  .buy-mastering-credits{
    grid-column:1 !important;
    grid-row:3 !important;
  }

  .mastering-credit-shop{
    margin:7px !important;
    padding:12px !important;
  }

  .mastering-credit-shop-head{
    gap:8px !important;
  }

  .mastering-credit-packs{
    grid-template-columns:1fr !important;
  }

  .session-toolbar{
    padding:10px !important;
  }

  .session-actions{
    width:100%;
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .session-actions button{
    width:100%;
  }

  .metrics{
    grid-template-columns:1fr 1fr !important;
    gap:1px !important;
  }

  .metrics article{
    min-height:86px !important;
    padding:12px !important;
  }

  .metrics article strong{
    font-size:24px !important;
  }

  .health-summary{
    width:100%;
  }

  .health-issues{
    grid-template-columns:1fr !important;
  }

  .style-grid{
    grid-template-columns:1fr !important;
  }

  .style-card{
    min-height:66px !important;
  }

  .field select{
    font-size:15px;
  }

  .reference-mastering{
    margin-left:12px !important;
    margin-right:12px !important;
    padding:12px !important;
  }

  .reference-head{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .reference-upload{
    width:100% !important;
  }

  .player-panel{
    min-height:0 !important;
  }

  .player-panel .panel-title{
    padding:12px !important;
  }

  .volume-match-toggle{
    width:100% !important;
    justify-content:space-between !important;
  }

  .ab-buttons{
    margin:10px !important;
  }

  .ab-buttons button{
    min-height:40px !important;
    padding:0 8px !important;
    font-size:12px !important;
  }

  .player-art{
    margin:10px !important;
    min-height:92px !important;
    padding:12px !important;
  }

  .os-symbol{
    flex:0 0 54px !important;
    width:54px !important;
    height:54px !important;
    font-size:22px !important;
  }

  .player-art strong{
    font-size:15px !important;
    overflow-wrap:anywhere;
  }

  .player-panel audio{
    width:calc(100% - 20px) !important;
    margin-left:10px !important;
    margin-right:10px !important;
  }

  .master-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    margin:10px !important;
  }

  .master-metrics strong{
    font-size:17px !important;
    overflow-wrap:anywhere;
  }

  .player-panel #batchQueuePanel{
    margin:10px !important;
  }

  .batch-queue-head{
    padding:11px !important;
  }

  .batch-queue-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  .batch-queue-actions > span{
    grid-column:1 / -1;
    margin:0 !important;
  }

  .batch-queue-actions button{
    width:100%;
  }

  .batch-item{
    grid-template-columns:34px minmax(0,1fr) !important;
    padding:10px !important;
  }

  .batch-copy strong{
    white-space:normal !important;
    overflow-wrap:anywhere;
  }

  .batch-item-actions{
    padding-left:44px !important;
    gap:6px !important;
  }

  .batch-item-actions > button{
    min-width:0 !important;
    flex:1 1 0 !important;
  }

  .final-master-panel{
    padding-bottom:12px !important;
  }

  .final-master-title{
    padding:12px !important;
  }

  .final-master-title h2{
    font-size:20px !important;
  }

  .revision-selection-status{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .revision-card{
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:start !important;
  }

  .revision-card button{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  .revision-number{
    width:54px !important;
    min-width:54px !important;
  }

  .revision-copy-title{
    flex-wrap:wrap !important;
  }

  .my-projects-panel,
  .my-masters-panel{
    margin-top:12px !important;
  }

  .my-projects-title,
  .my-masters-title{
    padding:12px !important;
  }

  .my-projects-head-actions,
  .my-masters-head-actions{
    gap:8px !important;
  }

  .my-project-item,
  .my-master-item{
    padding:11px !important;
  }

  .my-project-main,
  .my-master-main{
    align-items:flex-start !important;
  }

  .my-project-name-row{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:5px !important;
  }

  .my-project-name-row > strong,
  .my-master-copy strong{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:anywhere;
  }

  .my-project-metrics,
  .my-master-metrics{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    width:100% !important;
    gap:7px !important;
  }

  .my-project-metrics > div,
  .my-master-metrics > div{
    min-width:0 !important;
  }

  .my-project-actions,
  .my-master-actions{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:7px !important;
  }

  .my-project-actions > *,
  .my-master-actions > *{
    width:100% !important;
    min-width:0 !important;
  }

  .download-panel{
    padding:14px !important;
  }

  .download-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .download-actions > a,
  .download-actions > button{
    width:100% !important;
  }

  footer{
    padding:16px 10px !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:6px !important;
  }
}

/* ---------- Very small phones ---------- */
@media(max-width:390px){
  .workflow{
    grid-template-columns:1fr !important;
  }

  .metrics{
    grid-template-columns:1fr !important;
  }

  .master-metrics{
    grid-template-columns:1fr 1fr !important;
  }

  .session-actions,
  .batch-queue-actions,
  .my-project-actions,
  .my-master-actions{
    grid-template-columns:1fr !important;
  }

  .my-project-metrics,
  .my-master-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}