:root{--bg:#fff;--txt:#111827;--muted:#6b7280;--line:#ef4444;--lineSoft:#fecaca;--shadow:0 18px 50px rgba(0,0,0,.08);--radius:18px}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--txt)}
.wrap{max-width:980px;margin:0 auto;padding:28px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px}
.dot{width:12px;height:12px;border-radius:999px;background:var(--line);box-shadow:0 0 0 4px rgba(239,68,68,.15)}
h1{font-size:18px;margin:0}
.sub{margin:6px 0 0 0;color:var(--muted);font-size:13px;line-height:1.4}
.pill{padding:7px 12px;border-radius:999px;border:1px solid var(--lineSoft);color:var(--muted);background:#fff;font-size:12px}
.card{background:#fff;border:1px solid var(--lineSoft);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:360px;position:relative;overflow:hidden}
.center::before,.center::after{content:"";position:absolute;width:120%;height:120%;border:1px solid rgba(239,68,68,.15);border-radius:999px;transform:rotate(12deg)}
.center::before{top:-60%;left:-40%}
.center::after{bottom:-65%;right:-45%}
.bigBtn{position:relative;width:120px;height:120px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px rgba(239,68,68,.08);transition:transform .08s ease;z-index:2}
.bigBtn:active{transform:scale(.98)}
.bigBtn .ring{position:absolute;inset:-10px;border-radius:999px;border:1px solid rgba(239,68,68,.25)}
.mic{width:46px;height:46px;border:2px solid var(--line);border-radius:14px;position:relative}
.mic::before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:16px;height:22px;border:2px solid var(--line);border-radius:999px}
.mic::after{content:"";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:22px;height:2px;background:var(--line);border-radius:99px}
.status{color:var(--muted);font-size:13px;z-index:2;text-align:center;max-width:520px}
.small{font-size:12px;color:var(--muted);line-height:1.5}
input,textarea,select{width:100%;border:1px solid var(--lineSoft);border-radius:14px;padding:12px 12px;outline:none;background:#fff;color:var(--txt)}
textarea{min-height:88px;resize:vertical}
.sep{height:1px;background:rgba(239,68,68,.18);margin:14px 0}
.btn{border:1px solid var(--line);background:#fff;color:var(--txt);padding:10px 12px;border-radius:14px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-block}
.btn.primary{background:rgba(239,68,68,.08)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(239,68,68,.18);padding:10px;text-align:left;font-size:13px;vertical-align:top}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--lineSoft);font-size:12px;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
audio{width:100%}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tab{padding:8px 12px;border-radius:999px;border:1px solid var(--lineSoft);color:var(--muted);text-decoration:none;background:#fff}
.tab.active{border-color:rgba(239,68,68,.55);color:var(--txt);background:rgba(239,68,68,.06)}

/* ===== Premium Humanoid (White + Red) ===== */
.premiumShell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 12px;
}

.premiumStage{
  width:min(760px, 96vw);
  padding:28px 18px 18px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(239,68,68,.16);
  box-shadow:0 18px 60px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
}

.premiumStage::before{
  content:"";
  position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 35% 30%, rgba(239,68,68,.10), transparent 50%),
    radial-gradient(circle at 70% 65%, rgba(239,68,68,.08), transparent 55%);
  filter: blur(2px);
  opacity:.9;
  animation: premBreath 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes premBreath{
  0%,100%{ transform:scale(1) translateY(0); opacity:.75; }
  50%{ transform:scale(1.05) translateY(-6px); opacity:1; }
}

.premTopbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  position:relative;
  z-index:2;
}
.premBrand{
  display:flex; flex-direction:column; gap:4px;
}
.premTitle{
  font-weight:900;
  letter-spacing:.2px;
}
.premSub{
  font-size:12px; color:var(--muted);
}

.premState{
  display:flex; align-items:center; gap:10px;
  font-size:12px;
  color:var(--muted);
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.18);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
}
.premDot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(239,68,68,.22);
  box-shadow: 0 0 0 0 rgba(239,68,68,0);
}
.premDot.on{
  background: rgba(239,68,68,.95);
  animation: premPulse 1.1s ease-in-out infinite;
}
@keyframes premPulse{
  0%{ box-shadow:0 0 0 0 rgba(239,68,68,.35); }
  70%{ box-shadow:0 0 0 14px rgba(239,68,68,0); }
  100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

/* Face */
.premFaceWrap{
  width:min(560px, 92vw);
  height:260px;
  margin: 6px auto 14px;
  position:relative;
  z-index:2;
}

.premFace{
  width:100%;
  height:100%;
}

.premHalo{
  fill:none;
  stroke: rgba(239,68,68,.22);
  stroke-width: 10;
  filter: drop-shadow(0 18px 28px rgba(239,68,68,.14));
  opacity:.9;
  stroke-linecap: round;
  stroke-dasharray: 12 22;
  animation: haloRotate 14s linear infinite;
  transform-origin: 280px 130px;
}
@keyframes haloRotate{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

.premCore{
  fill: rgba(255,255,255,.70);
  stroke: rgba(239,68,68,.18);
  stroke-width: 1.2;
}

.premEye{
  fill: rgba(239,68,68,.92);
  opacity:.85;
}
.premEyeSoft{
  fill: rgba(239,68,68,.30);
}

.premMouthLine{
  fill:none;
  stroke: rgba(239,68,68,.65);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity:.9;
}
.premMouthGlow{
  fill:none;
  stroke: rgba(239,68,68,.18);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(4px);
  opacity:.9;
}

.premGridDot{
  fill: rgba(239,68,68,.40);
  opacity:.45;
}
.premGridDot.soft{
  opacity:.18;
}

.premActions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  z-index:2;
  position:relative;
  margin-top: 10px;
}

.premBtn{
  border:2px solid rgba(239,68,68,.95);
  background:#fff;
  color:#111827;
  border-radius:999px;
  padding:12px 18px;
  font-weight:900;
  cursor:pointer;
  min-width:280px;
  box-shadow:0 14px 30px rgba(239,68,68,.12);
  transition: transform .12s ease, background .12s ease;
}
.premBtn:active{ transform: translateY(1px) scale(.99); }
.premBtn.on{
  background: rgba(239,68,68,.08);
}

.premHint{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  z-index:2;
  position:relative;
}

.premMini{
  width:min(560px, 92vw);
  margin: 12px auto 0;
  z-index:2;
  position:relative;
}
.premMini label{ font-size:12px; color:var(--muted); font-weight:800; }
.premMini textarea{
  border:1px solid rgba(239,68,68,.18);
  border-radius:16px;
}