/* Core look & feel inspired by Shopify's You're Extraordinary page */
:root{
  --bg:#030303;
  --bg2:#04120c;
  --text:#e7ecef;
  --muted:#95a3ab;
  --green:#00ff85;
  --green-soft:#0eea7a;
  --red:#ff4d4d;
  --border:#3a464d;
  --field:#0b0f10;
  --shadow: 0 0 0 1px rgba(0,255,133,0.25), 0 0 18px rgba(0,255,133,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:var(--text);
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0,255,133,0.08), transparent 55%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  letter-spacing:0.2px;
}

.page{max-width:960px; margin:0 auto; padding:48px 20px 80px;}
.header{margin-bottom:28px}
.header h1{font-size:44px; margin:0 0 6px; font-weight:700}
.header .hash{opacity:.9; margin-right:10px}
.header .braces{opacity:.9; color:var(--text)}
.header .accent{color:var(--green)}

.sub{color:var(--muted); margin:0 0 24px; font-size:14px}

.panel{
  background:rgba(10,14,15,0.6);
  border:1px solid var(--border);
  border-radius:12px;
  padding:22px;
  margin:18px 0;
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
}
.panel h2, .panel h3{margin:6px 0 14px 0;}

.field{display:flex; flex-direction:column; gap:8px; margin:14px 0}
label{font-weight:600}
.req{color:var(--red)}

input, select, textarea{
  background:var(--field);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 12px;
  font-size:15px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder{color:#6c7a80}
select{appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="%23b7c5cc"><path d="M7 10l5 5 5-5z"/></svg>'); background-repeat:no-repeat; background-position:right 12px center; padding-right:42px}

input:focus, select:focus, textarea:focus{border-color:var(--green-soft); box-shadow:var(--shadow)}

.actions{display:flex; align-items:center; gap:18px; margin-top:10px}
.btn{
  background:var(--green);
  color:#06110d;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-weight:700;
  cursor:pointer;
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.02)}
.btn:active{transform:translateY(0)}

.status{font-size:14px}
.status.ok{color:var(--green)}
.status.error{color:var(--red)}

.footer{margin-top:28px; color:var(--muted); font-size:13px}
.minimal ul{margin:8px 0 0 18px}

.tabs{
  display:flex;
  gap:14px;
  margin-bottom:28px;
}
.tabs a{
  color:var(--text);
  text-decoration:none;
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:8px;
}
.tabs a.active{
  background:var(--green);
  color:#06110d;
}
.tabs a:hover{
  border-color:var(--green-soft);
}