:root{
  --bg:#0b0f14;
  --panel:#121924;
  --panel2:#0f1520;
  --text:#e9f1ff;
  --muted:#9fb2d1;
  --border:rgba(255,255,255,.12);

  --hp:#ff3b3b;
  --hp2:#b81414;

  --sp:#3b82f6;
  --sp2:#1e4ea8;

  --prot-parry:#ff8a00;
  --prot-dodge:#22c55e;
  --prot-react:#a855f7;
  --prot-defence:#94a3b8;

  --btn:#243043;
  --btn2:#2a3a53;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
#app{
  width: 380px;
  max-width: 100vw;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
}

.topbar{ display:flex; gap:10px; align-items:flex-start; }
.names{ flex:1; min-width:0; }
.meta{ width:88px; }
.field-row{ display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.label{ width:54px; color:var(--muted); font-size:12px; }
input.text{
  width: 100%;
  padding:4px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-size:12px;
  outline:none;
}
.rank-block{
  padding:6px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:10px;
}
.rank-label{ color:var(--muted); font-size:11px; margin-bottom:4px; }
.rank-main{ font-size:18px; font-weight:700; line-height:1; }
.rank-sub{ color:var(--muted); font-size:11px; margin-top:2px; }

.bars{ display:flex; gap:10px; margin-top:6px; }
.bar-group{ flex:1; padding:6px; border:1px solid var(--border); background:var(--panel); border-radius:10px; }
.bar-title{ color:var(--muted); font-size:12px; margin-bottom:6px; font-weight:600; }
.bar-wrap{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  overflow:hidden;
  background:rgba(0,0,0,.25);
}
.bar-wrap.hp{ box-shadow: inset 0 0 0 1px rgba(255,59,59,.25); }
.bar-wrap.sp{ box-shadow: inset 0 0 0 1px rgba(59,130,246,.25); }
.bar-fill{ height:100%; width:0%; border-radius:999px; transition:width .15s linear; }
.bar-wrap.hp .bar-fill{ background:linear-gradient(90deg, var(--hp2), var(--hp)); }
.bar-wrap.sp .bar-fill{ background:linear-gradient(90deg, var(--sp2), var(--sp)); }
.bar-value-row{ display:flex; align-items:center; gap:6px; margin-top:6px; }
input.num{
  width:74px;
  padding:3px 6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-size:12px;
  outline:none;
}
.bar-sep{ color:var(--muted); font-size:12px; }
.bar-max{ color:var(--muted); font-size:12px; }

.protections{
  margin-top:8px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.prot-circle{
  position:relative;
  padding:6px 6px 8px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  text-align:center;
  min-width:0;
}
.prot-circle::before{
  content:"";
  position:absolute;
  left:50%;
  top:-8px;
  width:26px; height:26px;
  transform:translateX(-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
}
.prot-circle.parry::before{ background:rgba(255,138,0,.18); box-shadow:0 0 0 2px rgba(255,138,0,.15); }
.prot-circle.dodge::before{ background:rgba(34,197,94,.18); box-shadow:0 0 0 2px rgba(34,197,94,.15); }
.prot-circle.react::before{ background:rgba(168,85,247,.18); box-shadow:0 0 0 2px rgba(168,85,247,.15); }
.prot-circle.defence::before{ background:rgba(148,163,184,.18); box-shadow:0 0 0 2px rgba(148,163,184,.15); }

.prot-name{ color:var(--muted); font-size:11px; margin-top:8px; font-weight:700; }
.prot-val{ font-size:16px; font-weight:800; margin:3px 0 4px; }
.prot-controls{
  display:flex; align-items:center; justify-content:center; gap:4px;
}
button.mini-btn{
  width:24px; height:22px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--btn2);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  padding:0;
  line-height:1;
}
input.prot-input{
  width:54px;
  padding:2px 5px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-size:12px;
  outline:none;
}

.params{ margin-top:10px; display:flex; gap:12px; }
.col{ flex:1; min-width:0; }
.chunk-title{ color:var(--muted); font-size:11px; font-weight:700; margin-bottom:4px; }
.params-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
}

.param-row{
  display:flex;
  gap:6px;
  align-items:center;
  padding:6px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:10px;
}
.param-name{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
}
.param-roll-btn{
  width:100%;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
  font-size:11px;
  padding:4px 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.param-controls{
  display:flex;
  align-items:center;
  gap:4px;
}
input.param-input{
  width:52px;
  padding:2px 5px;
  border-radius:7px;
  border:1px solid var(--border);
  background:var(--btn);
  color:var(--text);
  font-size:12px;
  outline:none;
}
.btn-secondary{
  margin-top:8px;
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
  padding:8px 10px;
  font-weight:800;
}

.roll-output{
  margin-top:10px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel);
}
.roll-output-title{ color:var(--muted); font-size:12px; font-weight:700; margin-bottom:6px; }
.roll-big{
  font-size:30px;
  font-weight:900;
  letter-spacing:.5px;
  color: #fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.roll-sub{ margin-top:4px; color:var(--muted); font-size:12px; min-height:18px; }

.log-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.log-window{
  width:520px;
  max-width: 92vw;
  height:70vh;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.log-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  font-weight:900;
}
.mini-close{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  border-radius:8px;
  padding:4px 8px;
  cursor:pointer;
  font-weight:900;
}
.log-list{
  padding:10px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.log-entry{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  gap:10px;
}
.log-color-dot{
  width:12px; height:12px;
  border-radius:50%;
  margin-top:3px;
  background:#fff;
  flex:0 0 auto;
}
.log-main{ flex:1; min-width:0; }
.log-line1{
  font-weight:900;
  font-size:13px;
  line-height:1.2;
}
.log-line2{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
}