/* How Much — shared UI tokens + components */
:root{
  --hm-bg:#07060a;
  --hm-panel:#13101a;
  --hm-ink:#f5ecff;
  --hm-dim:rgba(245,236,255,.6);
  --hm-dimmer:rgba(245,236,255,.38);
  --hm-accent:#ff4fa3;     /* hot pink */
  --hm-accent2:#9d6bff;    /* purple */
  --hm-accent3:#30ffd5;    /* teal */
  --hm-warn:#ffc857;
  --hm-bad:#ff5470;
  --hm-stroke:rgba(157,107,255,.25);
}
*{box-sizing:border-box}
body{margin:0;padding:0;background:var(--hm-bg);color:var(--hm-ink);
  font-family:'Roboto Mono',Consolas,monospace;min-height:100vh}
a{color:var(--hm-accent);text-decoration:none}
a:hover{color:var(--hm-accent3)}
.hm-topbar{display:flex;align-items:center;gap:10px;padding:10px 18px;
  border-bottom:1px solid var(--hm-stroke);
  background:linear-gradient(180deg,rgba(30,10,40,.9),rgba(10,8,18,.5));flex-wrap:wrap}
.hm-brand{font-family:'Orbitron',monospace;font-size:15px;font-weight:900;
  letter-spacing:.22em;
  background:linear-gradient(90deg,#ff4fa3,#9d6bff,#30ffd5,#ff4fa3);
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:hmShimmer 7s linear infinite}
@keyframes hmShimmer{to{background-position:300% center}}
.hm-topbtn{padding:6px 12px;border-radius:8px;border:1px solid var(--hm-stroke);
  background:rgba(157,107,255,.08);color:var(--hm-accent2);font-family:inherit;
  font-size:10px;font-weight:700;cursor:pointer;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.hm-topbtn:hover{background:rgba(157,107,255,.22);color:#fff}
.hm-topbtn.primary{border-color:rgba(255,79,163,.45);background:rgba(255,79,163,.14);
  color:var(--hm-accent)}
.hm-topbtn.primary:hover{background:rgba(255,79,163,.3);color:#fff}
.hm-wrap{max-width:1160px;margin:0 auto;padding:16px}
.hm-card{background:linear-gradient(180deg,rgba(30,16,40,.55),rgba(10,8,18,.85));
  border:1px solid var(--hm-stroke);border-radius:14px;padding:14px;margin-bottom:14px}
.hm-card h2{font-family:'Orbitron',monospace;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hm-accent);margin:0 0 10px}
.hm-input, .hm-textarea, .hm-select{
  width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--hm-stroke);
  background:rgba(0,0,0,.4);color:var(--hm-ink);font-family:inherit;font-size:12px;outline:none}
.hm-textarea{min-height:90px;resize:vertical;line-height:1.45}
.hm-btn{padding:8px 14px;border-radius:9px;border:1px solid rgba(255,79,163,.4);
  background:linear-gradient(180deg,rgba(255,79,163,.18),rgba(157,107,255,.18));
  color:#fff;font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;cursor:pointer}
.hm-btn:hover{background:linear-gradient(180deg,rgba(255,79,163,.32),rgba(157,107,255,.32))}
.hm-btn.ghost{background:transparent;border-color:var(--hm-stroke);color:var(--hm-accent2)}
.hm-btn.ghost:hover{background:rgba(157,107,255,.14);color:#fff}
.hm-btn.ok{border-color:rgba(48,255,213,.45);color:var(--hm-accent3);
  background:rgba(48,255,213,.1)}
.hm-btn.ok:hover{background:rgba(48,255,213,.22);color:#fff}
.hm-btn.bad{border-color:rgba(255,84,112,.45);color:var(--hm-bad);background:rgba(255,84,112,.1)}
.hm-btn:disabled{opacity:.4;cursor:not-allowed}
.hm-pill{display:inline-block;padding:2px 8px;border-radius:99px;font-size:9px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(157,107,255,.14);color:var(--hm-accent2)}
.hm-pill.teal{background:rgba(48,255,213,.14);color:var(--hm-accent3)}
.hm-pill.pink{background:rgba(255,79,163,.14);color:var(--hm-accent)}
.hm-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:4px 0}
.hm-grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.hm-post{background:var(--hm-panel);border:1px solid var(--hm-stroke);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.hm-post .thumb{aspect-ratio:16/9;background:#1a1124 center/cover no-repeat;
  position:relative;display:flex;align-items:center;justify-content:center}
.hm-post .thumb.locked::after{content:"🔒 LOCKED";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.85));
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Orbitron',monospace;letter-spacing:.15em;font-size:14px}
.hm-post .body{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.hm-post .caption{font-size:11px;line-height:1.45;color:var(--hm-ink);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical}
.hm-post .meta{font-size:9px;color:var(--hm-dim);display:flex;gap:8px}
.hm-post .price{color:var(--hm-warn);font-weight:700}
.hm-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.9);border:1px solid rgba(157,107,255,.45);color:#fff;
  padding:10px 20px;border-radius:9px;font-size:11px;z-index:10000;display:none}
.hm-hero{padding:40px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(255,79,163,.15),rgba(10,8,18,0) 70%)}
.hm-hero h1{font-family:'Orbitron',monospace;font-size:34px;font-weight:900;
  letter-spacing:.05em;margin:0 0 14px;
  background:linear-gradient(90deg,#ff4fa3,#9d6bff,#30ffd5);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hm-hero .sub{font-size:13px;color:var(--hm-dim);max-width:720px;margin:0 auto 20px}
.hm-gate{position:fixed;inset:0;background:rgba(10,4,18,.96);z-index:9999;
  display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.hm-gate .box{max-width:460px;background:var(--hm-panel);border:1px solid var(--hm-stroke);
  border-radius:14px;padding:22px;text-align:center}
.hm-locked{padding:14px;background:rgba(255,79,163,.1);border:1px dashed rgba(255,79,163,.4);
  border-radius:10px;color:var(--hm-accent);font-size:12px}
@media(max-width:600px){
  .hm-hero h1{font-size:24px}
  .hm-brand{font-size:12px;letter-spacing:.12em}
}