/* line-bot.net style: dark + neon glass (v2 prettier) */
:root{
  --bg0:#070A12;
  --bg1:#0B1224;

  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.10);

  --txt:#EAF0FF;
  --muted: rgba(234,240,255,.68);

  --brand:#7C5CFF;
  --brand2:#2AD3FF;
  --ok:#2ee59d;
  --warn:#ffd166;
  --bad:#ff4d6d;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 26px;

  --glow: 0 0 0 1px rgba(124,92,255,.22), 0 0 30px rgba(42,211,255,.18);
  --glow2: 0 0 0 1px rgba(42,211,255,.22), 0 0 42px rgba(124,92,255,.20);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Kanit", "Prompt", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--txt);
  background:
    radial-gradient(1100px 650px at 10% 10%, rgba(42,211,255,.18), transparent 58%),
    radial-gradient(980px 540px at 85% 22%, rgba(124,92,255,.22), transparent 56%),
    radial-gradient(900px 520px at 50% 92%, rgba(46,229,157,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit;text-decoration:none}
.small{font-size:.92rem}
.muted{color:var(--muted)}
.hr{height:1px;background:rgba(255,255,255,.08);margin:14px 0}

.container-fluid{padding:18px}
@media (min-width:1100px){ .container-fluid{padding:26px} }

/* glass card */
.cardx{
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.045));
  border:1px solid var(--stroke);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow:hidden;
}
.cardx .cardx-h{
  padding:18px 18px 12px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.cardx .cardx-b{ padding:18px; }

/* hero */
.hero{
  padding:18px;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(700px 380px at 20% 30%, rgba(42,211,255,.12), transparent 60%),
    radial-gradient(700px 380px at 80% 10%, rgba(124,92,255,.16), transparent 55%),
    rgba(255,255,255,.04);
  box-shadow: var(--glow);
}
.hero h1{margin:0;font-size:1.35rem;letter-spacing:.2px}
.hero p{margin:6px 0 0 0;color:var(--muted);line-height:1.45}
@media (min-width:900px){
  .hero{padding:22px}
  .hero h1{font-size:1.6rem}
}

/* buttons */
.btnx{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
  transition:.18s ease;
  user-select:none;
  white-space:nowrap;
}
.btnx:hover{ transform: translateY(-1px); box-shadow: var(--glow); border-color: rgba(42,211,255,.25); }
.btnx:active{ transform: translateY(0); }
.btnx-lg{ padding:12px 16px; border-radius: 16px; font-weight:800; }

.btnx-primary{
  background: linear-gradient(90deg, rgba(124,92,255,.96), rgba(42,211,255,.92));
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--glow2);
}
.btnx-ghost{ background: transparent; border-color: rgba(255,255,255,.14); }

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:var(--muted);
  font-size:.86rem;
}
.badge.ok{ color: rgba(46,229,157,.95); border-color: rgba(46,229,157,.25); }
.badge.warn{ color: rgba(255,209,102,.95); border-color: rgba(255,209,102,.25); }
.badge.bad{ color: rgba(255,77,109,.95); border-color: rgba(255,77,109,.25); }

.inputx, .selectx, .textareax{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color:var(--txt);
  outline:none;
}
.inputx:focus, .selectx:focus, .textareax:focus{
  border-color: rgba(42,211,255,.35);
  box-shadow: 0 0 0 4px rgba(42,211,255,.10);
}

.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:980px){ .grid2{grid-template-columns: 1.25fr .75fr} }

/* fancy drop */
.drop{
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(0,0,0,.16);
  border-radius: 20px;
  padding:18px;
  position:relative;
}
.drop:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(124,92,255,.20), rgba(42,211,255,.18));
  opacity:.0;
  pointer-events:none;
  transition:.18s ease;
}
.drop:hover:before{ opacity:.55; }
.drop:hover{ box-shadow: var(--glow); border-color: rgba(42,211,255,.30); }

/* steps */
.steps{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:980px){ .steps{grid-template-columns: repeat(3,1fr)} }
.step{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding:14px;
}
.step .n{
  width:28px;height:28px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background: rgba(124,92,255,.18);
  border:1px solid rgba(124,92,255,.25);
  font-weight:900;
}
.step .t{margin-top:10px;font-weight:900}
.step .d{margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.4}

/* file preview row */
.fileRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.fileName{font-weight:800}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--muted);
  font-size:.86rem;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0 20px rgba(42,211,255,.25);
}