/* Rap Studio — base shell.
   Colors live here as variables so any of them can be changed in one place. */
:root{
  --ink:#07070a;
  --ink-2:#101018;
  --ink-3:#181822;
  --line:#2a2a38;
  --text:#f3f0ea;
  --text-dim:#a09aaa;
  --gold:#ffc244;
  --gold-2:#ff8a2b;
  --hot:#ff2f6d;
  --cool:#6b5bff;
  --ok:#31d68b;
  --radius:16px;
  --nav-h:64px;
}

*{box-sizing:border-box}
/* hidden must always win — several blocks below set display:flex, and without
   this the busy spinner, the take row and the publish box never go away. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text);
  font:16px/1.5 "Segoe UI",system-ui,-apple-system,sans-serif;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
#app{height:100%;position:relative}

.screen{position:absolute;inset:0 0 var(--nav-h) 0;overflow:hidden}
.screen[hidden]{display:none}

h1{font-size:26px;margin:0 0 4px;letter-spacing:-.5px}
h2{font-size:20px;margin:0 0 8px}
h3{font-size:17px;margin:0 0 6px;display:flex;align-items:center;gap:10px}
p{margin:0 0 10px}
.sub{color:var(--text-dim);font-size:14px;margin:0}
.hint{color:var(--text-dim);font-size:13.5px}
.tiny{font-size:12.5px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:12px;border:1px solid var(--line);
  background:var(--ink-3);color:var(--text);font-size:15px;font-weight:600;
  cursor:pointer;transition:transform .08s ease,filter .15s ease;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#1a1206;border-color:transparent}
.btn-line{background:transparent}
.btn-ghost{background:rgba(255,255,255,.05)}
.btn.big{padding:15px 26px;font-size:17px}

/* ---------- fields ---------- */
.row{display:flex;gap:10px;align-items:flex-end}
.row.wrap{flex-wrap:wrap}
.grow{flex:1 1 200px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12.5px;color:var(--text-dim);font-weight:600;letter-spacing:.3px}
input[type=text],input[type=number],select,textarea{
  background:var(--ink-2);border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:10px;font-size:15px;font-family:inherit;width:100%;
}
textarea{resize:vertical}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:var(--ink-3)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-9px;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));border:2px solid #1a1206;
}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--ink-3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:2px solid #1a1206;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2))}
.check{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer;padding:10px 0}
.check input{width:20px;height:20px;accent-color:var(--gold)}
.slider{margin:14px 0}
.slider label{display:flex;justify-content:space-between;font-size:13.5px;color:var(--text-dim);font-weight:600}
.slider label b{color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{
  position:absolute;left:0;right:0;bottom:0;height:var(--nav-h);
  display:flex;background:#000;border-top:1px solid var(--line);z-index:40;
}
.nav-btn{
  flex:1;background:none;border:0;color:var(--text-dim);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:11px;cursor:pointer;
}
.nav-btn span{font-size:20px;line-height:1}
.nav-btn b{font-weight:600;letter-spacing:.2px}
.nav-btn.active{color:var(--gold)}
.nav-rec.active span{filter:drop-shadow(0 0 8px var(--gold))}

/* ---------- toast + overlay ---------- */
.toast{
  position:absolute;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%);
  background:#000;border:1px solid var(--gold);color:var(--gold);
  padding:11px 18px;border-radius:99px;font-size:14px;font-weight:600;z-index:60;
  max-width:88%;text-align:center;
}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.82);z-index:70;
  display:flex;align-items:center;justify-content:center}
.overlay-box{text-align:center;max-width:320px;padding:24px}
.spinner{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
  border:4px solid var(--ink-3);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{position:relative;height:10px;background:var(--ink-3);border-radius:99px;overflow:hidden;margin-top:14px}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-2));transition:width .2s}
.progress span{position:absolute;inset:0;font-size:11px;display:flex;align-items:center;justify-content:center;color:#1a1206;font-weight:700}

.big-icon{font-size:64px;margin-bottom:10px}