:root{
  --bg:#000;
  --text:#F8F8F8;
  --muted:#c9c9c980;
  --accent:#FF7B00;
  --accent-soft:#FFA24A;
  --glass:rgba(255,255,255,0.06);
  --border:#1a1a1a;
  --radius:16px;
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:#000; font-family:var(--font);
  background-image: radial-gradient(1000px 400px at 50% -120px, #0d0d0d, #000 65%);
}
.bg-wrap{position:fixed; inset:0; overflow:hidden; z-index:-1; opacity:.35; pointer-events:none}
.bg-img{width:130%; max-width:none; position:absolute; left:-10%; top:-6%; filter:blur(2px) drop-shadow(0 0 30px #ff7b0022)}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:14px 16px; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, #060606, #010101);
  position:sticky; top:0; z-index:10;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{height:36px; width:auto; filter:drop-shadow(0 0 10px #ff7b0040)}
.brand-title{display:flex; flex-direction:column; line-height:1.05}
.brand-line.small{font-size:.85rem; color:var(--muted)}
.brand-line.big{font-size:1.15rem; letter-spacing:.02em}

.top-controls{display:flex; gap:8px; align-items:center}

.page{max-width:1100px; margin:18px auto; padding:0 14px}
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  background:linear-gradient(180deg, #0a0a0a, #020202);
  box-shadow: 0 0 0 1px #0b0b0b inset, 0 0 32px #ff7b001a;
  overflow:hidden; position:relative;
}
.hud{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px; background:rgba(255,255,255,0.02); border-bottom:1px solid var(--border);
}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  background:#101010; border:1px solid #222; color:var(--text);
  border-radius:999px; padding:6px 10px; font-size:.92rem;
}
.chip.time{border-color:#2a2a2a}
.actions{display:flex; gap:8px}

.btn{
  border:0; cursor:pointer; padding:10px 14px; border-radius:12px; font-weight:800;
  transition: transform .05s ease-out, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn.primary{ background:var(--accent); color:#000; box-shadow:0 0 18px #ff7b0030}
.btn.primary:hover{ transform:translateY(-1px); box-shadow:0 0 28px #ff7b0048}
.btn.secondary{ background:#101010; color:var(--text); border:1px solid #2a2a2a}
.btn.ghost{ background:transparent; color:var(--text); border:1px solid #2a2a2a }
.btn:active{ transform:translateY(1px) }

.canvas-wrap{position:relative; width:100%; height:62vh; min-height:460px}
#stage{position:absolute; inset:0; width:100%; height:100%; display:block}
#softGlow{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 260px at 50% 0px, #ff7b0012, transparent 65%);
  mix-blend-mode:screen; opacity:.85;
}

.gate{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}
.gcard{
  max-width:640px; padding:18px; border-radius:16px;
  border:1px solid var(--border); background:var(--glass);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow:0 0 34px #ff7b0022;
}
.glass{background:var(--glass); border:1px solid #232323}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px}
.row.btns{justify-content:flex-end}
.meter{height:8px; flex:1; border-radius:999px; border:1px solid #2a2a2a; background:#0f0f0f; overflow:hidden}
.meter>i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--accent), var(--accent-soft))}

.modal{
  width:min(720px, calc(100% - 24px)); border:1px solid #242424; color:var(--text);
  background:rgba(15,15,15,.96); backdrop-filter: blur(8px); border-radius:16px; padding:16px;
}
.modal::backdrop{background:rgba(0,0,0,.55)}
.help-list{margin:8px 0 12px}
.help-list li{margin:6px 0}

.avatar-host{
  position: fixed; right: 14px; bottom: 14px; width: 220px; height: 160px;
  border-radius:16px; border:1px solid #222; background:rgba(10,10,10,.75);
  backdrop-filter: blur(6px); box-shadow:0 0 26px #ff7b0012; overflow:hidden;
}

/* Responsiv */
@media (max-width: 860px){
  .canvas-wrap{height:60vh; min-height:420px}
  .brand-line.big{font-size:1rem}
}
@media (max-width: 560px){
  .hud{flex-direction:column; align-items:flex-start}
  .actions{align-self:flex-end}
  .avatar-host{width: 180px; height: 130px}
}