:root{
  --r:18px;
  --shadow: 0 18px 44px rgba(0,0,0,.42);

  --bgA:#07051a; --bgB:#120a2b;
  --card: rgba(20,14,44,.78);
  --stroke: rgba(120,90,220,.28);

  --txt:#f3f0ff;
  --muted: rgba(243,240,255,.75);

  --accent:#54e8ff;
  --accent2:#a878ff;
  --glow: rgba(84,232,255,.18);

  --selectBg: rgba(255,255,255,.06);
  --optionBg: #120a2b;
  --optionTxt: #f3f0ff;
}

[data-theme="dark"]{
  --bgA:#0b0e18; --bgB:#0f1220;
  --card: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.14);
  --txt:#eef2ff; --muted: rgba(238,242,255,.72);
  --accent:#1877F2; --accent2:#0f5ed1; --glow: rgba(24,119,242,.12);
  --selectBg: rgba(255,255,255,.06);
  --optionBg: #0f1220;
  --optionTxt: #eef2ff;
  --shadow: 0 18px 44px rgba(0,0,0,.42);
}

[data-theme="light"]{
  --bgA:#f3f5fb; --bgB:#eef2f7;
  --card: rgba(255,255,255,.92);
  --stroke: rgba(10,20,40,.12);
  --txt:#0f172a; --muted: rgba(15,23,42,.65);
  --accent:#1877F2; --accent2:#0f5ed1; --glow: rgba(24,119,242,.10);
  --selectBg: rgba(15,23,42,.04);
  --optionBg: #ffffff;
  --optionTxt: #0f172a;
  --shadow: 0 18px 44px rgba(15,23,42,.12);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(900px 600px at 15% 10%, var(--glow), transparent 60%),
    linear-gradient(180deg, var(--bgA), var(--bgB));
  color:var(--txt);
  min-height:100vh;
}

.app{
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 14px 34px;
  display:grid;
  grid-template-columns: 270px 1fr;
  gap: 16px;
}
@media(max-width: 980px){ .app{grid-template-columns:1fr} }

.card{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

/* Sidebar */
.sidebar{padding:14px}
.brand{
  display:flex; align-items:center; gap:10px;
  padding:10px; border-radius:14px;
}
.brand img{
  width:40px;height:40px;border-radius:10px;object-fit:cover;
  border:1px solid var(--stroke)
}
.brand .t1{font-weight:900;font-size:14px}
.brand .t2{font-size:12px;color:var(--muted);margin-top:2px}
.nav{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.navbtn{
  display:inline-flex; align-items:center; justify-content:space-between;
  padding:12px 12px; border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--txt);
  cursor:pointer;
  text-decoration:none;
}
.tag{
  font-size:11px; padding:6px 9px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--muted);
}
.badge{
  padding:9px 10px;border-radius:999px;border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);font-size:12px;color:var(--muted)
}

/* Main */
.main{padding:14px}
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding: 14px;
}
.title{font-size:20px;font-weight:950;margin:0}
.subtitle{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  max-width: 780px;
}
.themeSel{display:flex; gap:10px; align-items:center; flex-shrink:0}

/* visits badge next to theme */
.topRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.visitPill{
  padding:9px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}

.section{padding:14px; margin: 0 14px 14px}
.section h3{margin:0 0 10px; font-size:14px}

label{display:block;font-size:12px;color:var(--muted);margin:10px 0 6px}

/* Inputs */
select, input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: var(--selectBg);
  color:var(--txt);
  outline:none;
}
textarea{
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.5;
  resize: vertical;
}

/* Fix dropdown options colors */
select{ color-scheme: dark; }
[data-theme="light"] select{ color-scheme: light; }
option{ background: var(--optionBg); color: var(--optionTxt); }

.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:980px){.grid2{grid-template-columns:1fr}}

.rowline{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom: 6px;
}
.pill{
  padding:8px 10px;border-radius:999px;border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);font-size:12px;color:var(--muted)
}

.btns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
button{
  cursor:pointer;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  padding:11px 14px;
  border-radius:14px;
  transition: transform .1s ease, background .1s ease, border-color .1s ease;
}
button:hover{transform: translateY(-1px); border-color: rgba(24,119,242,.35); background: rgba(24,119,242,.10)}
button.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #001018;
  font-weight: 950;
}
[data-theme="dark"] button.primary{ color:#fff }
[data-theme="light"] button.primary{ color:#fff }

.hint{font-size:12px;color:var(--muted);margin-top:8px}
.ok{color:#9ff0b0}
.err{color:#ffb4b4}

.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  display:flex; align-items:center; gap:8px;
  padding:10px 10px; border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  user-select:none;
}
.chip input{width:auto}

/* Outputs */
.tabs{display:flex; gap:10px; flex-wrap:wrap}
.tab{
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--txt);
  cursor:pointer;
  font-size:12px;
}
.tab.active{border-color: rgba(24,119,242,.45); background: rgba(24,119,242,.12)}
pre.out{
  margin:10px 0 0;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.12);
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  min-height: 180px;
  direction:ltr;
  text-align:left;
}
[data-theme="light"] pre.out{background: rgba(15,23,42,.04)}

.footer{
  padding:14px;
  margin: 0 14px 14px;
  font-size:12px;
  color: var(--muted);
  line-height:1.6;
  direction:ltr;
  text-align:left;
}