:root {
    --ground:#0b1426; --surface:#121d33; --raised:#182645; --line:#24324f; --line-2:#2f4066;
    --ink:#eef2f8; --ink-2:#c3cde0; --muted:#8a9bbd; --faint:#5b6c8f;
    --blue:#3f7ae8; --blue-2:#8bb0f5; --plum:#8b5fc7; --teal:#2aa1bd; --gold:#c9a227; --green:#3e9a6b; --rose:#c95c7a;
  }
  * { box-sizing:border-box }
  html { background:var(--ground) }
  body { margin:0; min-height:100vh; color:var(--ink); background:
      radial-gradient(1200px 600px at 85% -10%, rgba(63,122,232,.18), transparent 60%),
      radial-gradient(800px 500px at -10% 100%, rgba(139,95,199,.14), transparent 60%), var(--ground);
    font-family:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif; font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  .wrap { max-width:1360px; margin:0 auto; padding:22px 24px 60px }
  header { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:18px }
  header h1 { font-size:22px; margin:0; letter-spacing:-.02em }
  header h1 em { font-style:normal; color:var(--blue-2) }
  .back { text-decoration:none } .back:hover { color:var(--ink-2) }
  .kicker { font-family:Menlo,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
  header p { margin:0; color:var(--muted); flex-basis:100%; font-size:13.5px }
  .cols { display:grid; grid-template-columns:400px 1fr; gap:22px; align-items:start }
  @media (max-width:980px) { .cols { grid-template-columns:1fr } }
  .panel { background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden }
  .panel h2 { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--raised) }
  .fields { padding:14px 16px; display:grid; gap:10px }
  label { display:grid; gap:4px; font-size:12px; color:var(--ink-2) }
  input[type=text], input[type=email], textarea, select { width:100%; background:var(--ground); color:var(--ink); border:1px solid var(--line-2); border-radius:8px; padding:8px 10px; font:inherit; font-size:13.5px }
  input:focus, textarea:focus, select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(63,122,232,.25) }
  textarea { resize:vertical; min-height:56px }
  .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .svc { border-top:1px solid var(--line) }
  .svc summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:11px 16px; user-select:none }
  .svc summary::-webkit-details-marker { display:none }
  .svc summary .sw { width:10px; height:10px; border-radius:3px; background:var(--c); flex:none }
  .svc summary b { font-weight:600; flex:1 }
  .svc summary .chev { color:var(--faint); transition:transform .15s }
  .svc[open] summary .chev { transform:rotate(90deg) }
  .svc summary input { accent-color:var(--blue); width:16px; height:16px; margin:0 }
  .svc .fields { padding-top:4px }
  .hint { font-size:11.5px; color:var(--faint) }
  .bar { position:sticky; top:0; z-index:5; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 14px; background:rgba(11,20,38,.9); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:12px; margin-bottom:14px }
  .btn { background:var(--blue); color:#fff; border:0; border-radius:9px; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer }
  .btn:hover { filter:brightness(1.1) }
  .btn.secondary { background:var(--raised); color:var(--ink-2); border:1px solid var(--line-2) }
  .btn.ghost { background:transparent; color:var(--muted); border:1px solid var(--line) }
  #status { color:var(--muted); font-size:13px; flex:1; min-width:180px }
  .toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--green); color:#fff; padding:10px 18px; border-radius:10px; font-weight:600; transition:.2s; pointer-events:none }
  .toast.on { opacity:1; transform:translateX(-50%) }
  .preview { background:#eef1f6; border-radius:14px; border:1px solid var(--line); overflow:auto; padding:0 }
  details.html { margin-top:14px }
  details.html summary { cursor:pointer; color:var(--muted); font-size:13px }
  pre { background:var(--ground); border:1px solid var(--line); border-radius:10px; padding:12px; font-size:11.5px; white-space:pre-wrap; word-break:break-all; max-height:320px; overflow:auto; color:var(--ink-2) }
  .warn { margin:0 16px 14px; padding:10px 12px; border-radius:9px; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.4); color:#e8cf7a; font-size:12.5px }