/* ============================================================
   RawBlock — brutalist design system.
   Black on white, thick borders (no shadows), 0 radius, uppercase.
   Fonts: Archivo Black (headline) / Work Sans (body) / Space Mono (mono).
   ============================================================ */
:root{
  --black:#000; --white:#fff; --blue:#00F;
  --ok:#008000; --warn:#FFA500; --err:#F00;
  --sunken:#F0F0F0; --disabled:#CCC; --disabled-bg:#F5F5F5;
  --head:"Archivo Black",sans-serif; --body:"Work Sans",sans-serif; --mono:"Space Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.6;
  background:var(--white);color:var(--black);-webkit-tap-highlight-color:transparent}
a{color:var(--blue)}
h1{font-family:var(--head);font-weight:400;font-size:64px;line-height:1}
h2{font-family:var(--head);font-weight:400;font-size:28px;line-height:1.1;margin:0 0 18px;text-transform:uppercase}
h3{font-family:var(--head);font-weight:400;font-size:22px;line-height:1.1;margin:0 0 8px}
.muted{color:var(--black);font-family:var(--mono);font-size:13px}

/* ---- top bar ---- */
#topbar{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;background:var(--white);border-bottom:5px solid var(--black)}
.brand{font-family:var(--head);font-size:22px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.cost{font-family:var(--mono);font-size:13px;border:3px solid var(--black);padding:4px 10px}
.cost b{font-weight:700}
main{max-width:760px;margin:0 auto;padding:24px 16px}

/* ---- cards (skill picker) ---- */
.cards{display:grid;grid-template-columns:1fr;gap:16px}
.card{background:var(--white);border:3px solid var(--black);padding:24px;cursor:pointer}
.card:hover{background:var(--black);color:var(--white)}
.card:hover h3{color:var(--white)}
.card:active{border-width:5px}
.card h3{margin:0 0 6px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--black);color:var(--white);border:3px solid var(--black);
  padding:10px 24px;min-height:44px;font-family:var(--body);font-size:14px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer}
.btn:hover{background:var(--white);color:var(--black)}
.btn:active{background:var(--black);color:var(--white);border-width:5px}
.btn.sec{background:var(--white);color:var(--black)}
.btn.sec:hover{background:var(--black);color:var(--white)}
.btn.pay{background:var(--err);color:var(--white);border-color:var(--black)}
.btn.pay:hover{background:var(--black);color:var(--err)}
.btn:disabled{background:var(--sunken);color:var(--disabled);border-color:var(--disabled);cursor:not-allowed}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:12px 0}

/* ---- inputs ---- */
input,textarea,select{background:var(--sunken);color:var(--black);border:3px solid var(--black);
  border-radius:0;padding:10px 12px;font-family:var(--mono);font-size:15px;width:100%}
input:hover,textarea:hover,select:hover{background:#E8E8E8}
input:focus,textarea:focus,select:focus{outline:none;border-width:5px;background:var(--sunken)}
textarea{min-height:72px;resize:vertical}
label{font-family:var(--head);font-size:14px;text-transform:uppercase;display:block;margin:16px 0 4px}

/* ---- chips (filter/select) ---- */
.chip{background:var(--white);color:var(--black);border:2px solid var(--black);border-radius:0;
  padding:4px 12px;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.chip.on{background:var(--black);color:var(--white)}

/* ---- stage rail ---- */
.rail{display:flex;gap:0;overflow-x:auto;padding:0 0 14px;margin-bottom:14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.step{flex:0 0 auto;padding:8px 14px;border:3px solid var(--black);border-right-width:0;background:var(--white);
  font-family:var(--mono);font-size:12px;cursor:pointer;white-space:nowrap;display:flex;gap:6px;align-items:center;text-transform:uppercase}
.step:last-child{border-right-width:3px}
.step.cur{background:var(--black);color:var(--white)}
.dot{width:9px;height:9px;border:2px solid var(--black)}
.step.cur .dot{border-color:var(--white)}
.dot.absent{background:var(--white)} .dot.fresh{background:var(--ok);border-color:var(--ok)}
.dot.stale{background:var(--warn);border-color:var(--warn)} .dot.pay{background:var(--err);border-color:var(--err)}

/* ---- panels / scenes ---- */
.panel{background:var(--white);border:3px solid var(--black);padding:20px;margin-bottom:16px}
.scene{background:var(--white);border:3px solid var(--black);padding:14px;margin:14px 0}
.scene .lbl{font-family:var(--head);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.gallery img{width:100%;border:3px solid var(--black);border-radius:0;display:block}
audio,video{width:100%;margin-top:10px;border-radius:0}
audio{border:3px solid var(--black)}

/* ---- badges (free/pay) ---- */
.badge{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:2px 10px;border:2px solid var(--black)}
.badge.free{color:var(--ok);border-color:var(--ok)}
.badge.pay{color:var(--err);border-color:var(--err)}

/* ---- radio (title options) — circle is the one 0-radius exception ---- */
.radio-row{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:3px solid var(--black);cursor:pointer}
.radio-row input[type=radio]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;
  border:3px solid var(--black);border-radius:50%;background:var(--white);margin:2px 0 0;padding:0;cursor:pointer}
.radio-row input[type=radio]:checked{background:radial-gradient(var(--black) 0 5px,var(--white) 6px)}
.radio-row input[type=radio]:focus{outline:none;border-width:5px}

/* ---- toast (inverted block) ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--black);color:var(--white);
  font-family:var(--mono);font-size:13px;padding:12px 18px;border-radius:0;z-index:50;max-width:90%}

/* ---- spinner ---- */
.spin{display:inline-block;width:14px;height:14px;border:3px solid var(--white);border-top-color:transparent;
  animation:s 1s linear infinite}
.btn.sec .spin,.chip .spin{border-color:var(--black);border-top-color:transparent}
@keyframes s{to{transform:rotate(360deg)}}

/* ---- login modal ---- */
.login-ov{position:fixed;inset:0;background:var(--white);display:flex;
  align-items:center;justify-content:center;z-index:999;padding:16px}
.login-box{background:var(--white);border:5px solid var(--black);
  padding:32px 28px;width:min(360px,90vw);display:flex;flex-direction:column;gap:16px}
.login-box h2{margin:0;text-align:left}
.login-box input{width:100%}
.login-box button{background:var(--black);color:var(--white);border:3px solid var(--black);
  padding:12px;font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;cursor:pointer}
.login-box button:hover{background:var(--white);color:var(--black)}
.login-err{color:var(--err);font-family:var(--mono);font-size:12px;min-height:16px}