:root{
  --bg0:#050814;
  --bg1:#0a1022;
  --card:#0b1328cc;
  --line:#16244a;
  --txt:#eaf2ff;
  --muted:#94a3b8;
  --neon:#00ffc6;
  --neon2:#00aaff;
  --warn:#ff8a00;
  --bad:#ff3355;
  --shadow: 0 0 18px rgba(0,255,198,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--txt);
  background: radial-gradient(1100px 700px at 20% 0%, #0b1a3a 0%, var(--bg0) 55%, #000 100%);
  overflow-x:hidden;
}

.bg{
  position:fixed; inset:-2px;
  background:
    radial-gradient(700px 420px at 75% 10%, rgba(0,255,198,.11), transparent 60%),
    radial-gradient(640px 420px at 20% 80%, rgba(0,170,255,.12), transparent 55%),
    radial-gradient(520px 380px at 50% 40%, rgba(255,114,0,.07), transparent 55%);
  pointer-events:none;
  filter: blur(0.2px);
}

.top{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(180deg, rgba(5,8,20,.92), rgba(5,8,20,.55));
  border-bottom:1px solid rgba(22,36,74,.6);
  backdrop-filter: blur(10px);
}

.brand{ display:flex; gap:12px; align-items:center; }
.logoDot{
  width:12px; height:12px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--neon), #0082ff);
  box-shadow: 0 0 18px rgba(0,255,198,.35);
}
.brandTitle{ font-weight:800; letter-spacing:2px; }
.brandTitle span{ color:var(--neon); }
.brandSub{ font-size:12px; opacity:.75; margin-top:2px; }

.topNav{ display:flex; gap:10px; }
.pill{
  text-decoration:none;
  color:var(--txt);
  font-size:12px;
  padding:8px 10px;
  border:1px solid rgba(22,36,74,.75);
  border-radius:999px;
  background: rgba(10,16,34,.35);
}
.pill.active{
  border-color: rgba(0,255,198,.55);
  box-shadow: var(--shadow);
}

.wrap{ max-width:1180px; margin:18px auto 60px; padding:0 16px; }

.card{
  background: linear-gradient(180deg, rgba(11,19,40,.85), rgba(8,12,28,.75));
  border:1px solid rgba(22,36,74,.7);
  border-radius:18px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.card + .card{ margin-top:14px; }

.hero{
  display:flex; gap:14px;
  padding:18px;
  align-items:stretch;
}
.heroLeft{ flex:1; }
.heroRight{ width:360px; }
.hero h1{ margin:0 0 8px; color:var(--neon); letter-spacing:2px; }
.hero p{ margin:0; color:rgba(234,242,255,.78); line-height:1.5; }

.chipRow{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(22,36,74,.8);
  background: rgba(10,16,34,.35);
  color:rgba(234,242,255,.85);
}

.previewBox{
  height:100%;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(22,36,74,.75);
  background: radial-gradient(420px 220px at 20% 10%, rgba(0,255,198,.08), transparent 70%),
              radial-gradient(420px 220px at 70% 90%, rgba(0,170,255,.10), transparent 70%),
              rgba(5,8,20,.55);
}
.previewTitle{ font-weight:700; opacity:.9; margin-bottom:10px; }
.previewText{
  font-size:34px;
  font-weight:800;
  letter-spacing:2px;
  text-shadow: 0 0 18px rgba(0,0,0,.35);
}
.previewHint{ font-size:11px; opacity:.7; margin-top:10px; }

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.col{ display:flex; flex-direction:column; gap:14px; }

.cardHead{
  padding:14px 14px 0;
}
.cardTitle{
  font-weight:800;
  letter-spacing:1px;
}
.cardHint{
  margin-top:6px;
  font-size:12px;
  color:rgba(148,163,184,.9);
}
.warn{ color: rgba(255,138,0,.95) !important; }

.formatBar{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px 0;
}
.fmtBtn{
  width:36px; height:34px;
  border-radius:10px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(10,16,34,.35);
  color:var(--txt);
  cursor:pointer;
}
.fmtBtn.active{
  border-color: rgba(0,255,198,.55);
  box-shadow: var(--shadow);
}
.fmtLegend{
  margin-left:auto;
  font-size:11px;
  opacity:.7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60%;
}

.ta{
  width:calc(100% - 28px);
  margin:12px 14px 14px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(5,8,20,.65);
  color: var(--neon);
  resize: vertical;
  outline:none;
}
.ta:focus{ border-color: rgba(0,255,198,.45); box-shadow: var(--shadow); }

.smallTa{ min-height:90px; color:#dfe8ff; }
.outTa{ min-height:140px; color:#dfe8ff; }

.inputTa{ min-height:86px; }

.mono{ font-family: inherit; }

.miniRow{ padding: 0 14px 14px; }

.seg{ padding:12px; border-radius:14px; border:1px solid rgba(22,36,74,.75); background: rgba(10,16,34,.28); }
.segLabel{ font-size:12px; opacity:.75; margin-bottom:8px; }
.segBtns{ display:flex; flex-wrap:wrap; gap:8px; }
.segBtn{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(22,36,74,.8);
  background: rgba(5,8,20,.35);
  color:rgba(234,242,255,.88);
  cursor:pointer;
}
.segBtn.active{ border-color: rgba(0,255,198,.55); box-shadow: var(--shadow); }

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  padding: 0 14px 14px;
}
.row3{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  padding: 0 14px 14px;
}

.field label{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-bottom:6px;
}
.inp{
  width:100%;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(5,8,20,.55);
  color:#dfe8ff;
  padding:0 12px;
  outline:none;
}
.inp:focus{ border-color: rgba(0,255,198,.45); box-shadow: var(--shadow); }

select, input[type="number"]{
  width:100%;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(5,8,20,.55);
  color:#dfe8ff;
  padding:0 10px;
  outline:none;
}

.stepper{ display:flex; gap:8px; align-items:center; }
.step{
  width:42px; height:38px;
  border-radius:12px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(10,16,34,.35);
  color:#dfe8ff;
  cursor:pointer;
}
.step:hover{ filter:brightness(1.08); }

.btn{
  height:40px;
  border:none;
  border-radius:12px;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  color:#000;
  font-weight:800;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.08); }

.btnGhost{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(22,36,74,.85);
  background: rgba(10,16,34,.35);
  color:#dfe8ff;
  cursor:pointer;
}
.btnGhost:hover{ filter:brightness(1.08); }
.btnGhost.small{ height:38px; }

.gradientWrap{ padding: 0 14px 14px; }
.gradientBar{
  position:relative;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(22,36,74,.85);
  background: linear-gradient(90deg, #ff7200, #ff1f00);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  cursor: crosshair;
  user-select:none;
}
.gradMeta{
  display:flex; justify-content:space-between; gap:10px;
  margin-top:10px;
  font-size:11px;
  opacity:.75;
}
.stop{
  position:absolute;
  top:50%;
  transform: translate(-50%, -50%);
  width:18px; height:18px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.8);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  cursor: grab;
}
.stop:active{ cursor:grabbing; }

.stopList{
  padding: 0 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.stopRow{
  display:grid;
  grid-template-columns: 1fr 120px 70px;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(22,36,74,.75);
  background: rgba(10,16,34,.25);
}
.stopRow .pos{
  font-size:12px;
  color: rgba(234,242,255,.85);
}
.stopRow input[type="range"]{ width:100%; }
.stopRow input[type="color"]{
  width:100%;
  height:38px;
  border:none;
  border-radius:12px;
  background: transparent;
  cursor:pointer;
}

.toggle{
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(22,36,74,.75);
  background: rgba(10,16,34,.25);
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
  color: rgba(234,242,255,.85);
}
.toggle input{ display:none; }
.tg{
  width:42px; height:24px;
  border-radius:999px;
  background: rgba(5,8,20,.6);
  border:1px solid rgba(22,36,74,.85);
  position:relative;
}
.tg::after{
  content:"";
  width:18px; height:18px;
  border-radius:50%;
  position:absolute;
  top:50%; left:3px;
  transform: translateY(-50%);
  background: rgba(234,242,255,.85);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: all .18s ease;
}
.toggle input:checked + .tg{
  border-color: rgba(0,255,198,.55);
  box-shadow: var(--shadow);
}
.toggle input:checked + .tg::after{
  left:20px;
  background: var(--neon);
}

.customWrap{ padding: 0 14px 14px; }
.hidden{ display:none; }

.hintSm{
  margin-top:8px;
  font-size:11px;
  opacity:.75;
  line-height:1.4;
}
.kbd{
  display:inline-block;
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(22,36,74,.75);
  background: rgba(5,8,20,.55);
  color: rgba(234,242,255,.9);
}

.urlBox{ padding: 0 14px 14px; }
.urlLine{ display:grid; grid-template-columns: 1fr 90px; gap:10px; align-items:center; }

.foot{
  margin-top:14px;
  display:flex; justify-content:space-between; gap:10px;
  padding:14px 6px;
  opacity:.8;
  font-size:12px;
}

.muted{ color:rgba(148,163,184,.95); }
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .hero{ flex-direction:column; }
  .heroRight{ width:auto; }
  .row3{ grid-template-columns: 1fr; }
  .fmtLegend{ max-width:45%; }
}