:root{
    --bg:#0b0d12;
    --bg-panel:#12151c;
    --bg-panel-2:#171b24;
    --bg-panel-3:#1c212c;
    --line:#232838;
    --line-soft:#1b1f2a;
    --text:#e6e9f0;
    --text-dim:#8b93a7;
    --text-faint:#5b6377;
    --accent:#4da3ff;
    --accent-dim:#2d6bb0;
    --ok:#2ecc71;
    --warn:#c9b458;
    --err:#ff5f5f;
    --mono:"JetBrains Mono","SF Mono",Consolas,monospace;
    --sans:"Inter","Segoe UI",system-ui,sans-serif;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(77,163,255,.08), transparent 60%),
      radial-gradient(900px 500px at 110% 10%, rgba(46,204,113,.05), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);}

  .wrap{max-width:1080px;margin:0 auto;padding:48px 20px 80px;}

  header.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:36px;gap:16px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand-mark{
    width:38px;height:38px;border-radius:9px;
    background:linear-gradient(135deg,var(--accent),#7a5cff);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-weight:700;font-size:15px;color:#0b0d12;
    box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 24px -8px rgba(77,163,255,.5);
  }
  .brand h1{font-size:17px;margin:0;letter-spacing:.2px;}
  .brand span.sub{display:block;font-size:12px;color:var(--text-faint);font-family:var(--mono);margin-top:2px;}
  .badge{
    font-family:var(--mono);font-size:11px;color:var(--text-dim);
    border:1px solid var(--line);padding:5px 10px;border-radius:999px;
    display:flex;align-items:center;gap:6px;
  }
  .badge.testing{color:var(--warn);border-color:rgba(201,180,88,.35);}
  .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);}
  .dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn);}

  .tabs{display:flex;gap:4px;background:var(--bg-panel);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:24px;}
  .tab{
    flex:1;text-align:center;padding:11px 16px;border-radius:9px;cursor:pointer;
    font-size:13.5px;font-weight:600;color:var(--text-dim);user-select:none;
    transition:background .15s ease,color .15s ease;
  }
  .tab.active{background:var(--bg-panel-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line);}
  .tab:not(.active):hover{color:var(--text);}

  .panel{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    display:none;
  }
  .panel.active{display:block;}

  .field-label{font-size:12px;color:var(--text-dim);margin-bottom:8px;display:block;font-weight:600;letter-spacing:.2px;}
  .hint{font-size:12px;color:var(--text-faint);margin-top:6px;line-height:1.5;}

  input[type=text]{
    width:100%;background:var(--bg-panel-2);border:1px solid var(--line);
    color:var(--text);padding:13px 14px;border-radius:8px;font-family:var(--mono);
    font-size:13.5px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;
  }
  input[type=text]:focus{border-color:var(--accent-dim);box-shadow:0 0 0 3px rgba(77,163,255,.12);}
  input[type=text]::placeholder{color:var(--text-faint);}

  .row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center;}

  .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
  .seg button{
    flex:1;background:var(--bg-panel-2);color:var(--text-dim);border:none;
    padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans);
    border-right:1px solid var(--line);
  }
  .seg button:last-child{border-right:none;}
  .seg button.active{background:rgba(77,163,255,.14);color:var(--accent);}

  .btn{
    background:linear-gradient(135deg,var(--accent),#3d7fd6);
    color:#08111d;border:none;padding:13px 22px;border-radius:8px;
    font-weight:700;font-size:13.5px;cursor:pointer;letter-spacing:.2px;
    display:inline-flex;align-items:center;gap:8px;
    transition:transform .1s ease,box-shadow .15s ease;
    box-shadow:0 8px 20px -8px rgba(77,163,255,.55);
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:active{transform:translateY(0);}
  .btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
  .btn.secondary{
    background:var(--bg-panel-2);color:var(--text);box-shadow:none;
    border:1px solid var(--line);
  }
  .btn.small{padding:8px 14px;font-size:12.5px;}

  .dropzone{
    border:1.5px dashed var(--line);
    border-radius:10px;
    padding:34px 20px;
    text-align:center;
    cursor:pointer;
    background:var(--bg-panel-2);
    transition:border-color .15s ease,background .15s ease;
  }
  .dropzone.drag{border-color:var(--accent);background:rgba(77,163,255,.06);}
  .dropzone .file-name{font-family:var(--mono);color:var(--accent);font-size:13px;margin-top:8px;}
  .dropzone .dz-icon{font-size:26px;margin-bottom:8px;opacity:.8;}
  .dropzone .dz-text{font-size:13.5px;color:var(--text-dim);}
  .dropzone .dz-sub{font-size:11.5px;color:var(--text-faint);margin-top:4px;}

  .status{
    margin-top:18px;border-radius:8px;padding:13px 14px;font-family:var(--mono);
    font-size:12.5px;line-height:1.7;display:none;white-space:pre-wrap;word-break:break-word;
    border:1px solid var(--line-soft);background:var(--bg-panel-2);color:var(--text-dim);
    max-height:220px;overflow:auto;
  }
  .status.show{display:block;}
  .status .l-ok{color:var(--ok);}
  .status .l-err{color:var(--err);}
  .status .l-warn{color:var(--warn);}
  .status .l-info{color:var(--accent);}

  .meta-table{width:100%;border-collapse:collapse;margin-top:16px;font-size:12.5px;font-family:var(--mono);display:none;}
  .meta-table.show{display:table;}
  .meta-table td{padding:8px 0;border-top:1px solid var(--line-soft);color:var(--text-dim);}
  .meta-table td:first-child{color:var(--text-faint);width:150px;}
  .meta-table td:last-child{color:var(--text);}

  .turnstile-slot{margin-top:14px;}

  footer{margin-top:40px;text-align:center;font-size:11.5px;color:var(--text-faint);font-family:var(--mono);}
  footer a{color:var(--text-faint);text-decoration:underline;}

  .spin{
    width:13px;height:13px;border-radius:50%;
    border:2px solid rgba(8,17,29,.35);border-top-color:#08111d;
    animation:sp .7s linear infinite;
  }
  @keyframes sp{to{transform:rotate(360deg);}}

  /* ---------------- Code viewer ---------------- */
  .viewer-shell{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:14px;
    height:640px;
    max-height:75vh;
  }
  .viewer-empty{
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
    color:var(--text-faint);font-size:13px;height:100%;text-align:center;padding:20px;
  }
  .tree-pane{
    background:var(--bg-panel-2);border:1px solid var(--line);border-radius:8px;
    overflow:auto;font-family:var(--mono);font-size:12.5px;padding:10px;
  }
  .tree-pane details{margin-left:2px;}
  .tree-pane summary{
    cursor:pointer;color:var(--text-dim);padding:4px 4px;border-radius:5px;list-style:none;
    display:flex;align-items:center;gap:6px;
  }
  .tree-pane summary::-webkit-details-marker{display:none;}
  .tree-pane summary:hover{background:var(--bg-panel-3);color:var(--text);}
  .tree-pane summary::before{content:"▸";font-size:10px;color:var(--text-faint);transition:transform .1s;}
  .tree-pane details[open]>summary::before{transform:rotate(90deg);}
  .tree-file{
    cursor:pointer;color:var(--text-dim);padding:4px 4px 4px 18px;border-radius:5px;
    display:flex;align-items:center;gap:6px;white-space:nowrap;
  }
  .tree-file:hover{background:var(--bg-panel-3);color:var(--text);}
  .tree-file.active{background:rgba(77,163,255,.16);color:var(--accent);}
  .tree-file .ext{color:var(--text-faint);font-size:10.5px;}

  .editor-pane{
    display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;overflow:hidden;
    background:var(--bg-panel-2);
  }
  .editor-toolbar{
    display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);
    background:var(--bg-panel-3);font-family:var(--mono);font-size:12px;color:var(--text-dim);flex-wrap:wrap;
  }
  .editor-toolbar .fname{color:var(--text);font-weight:600;margin-right:auto;}
  .editor-toolbar select{
    background:var(--bg-panel-2);color:var(--text);border:1px solid var(--line);
    border-radius:6px;padding:5px 8px;font-family:var(--sans);font-size:12px;
  }
  .editor-host{flex:1;min-height:0;}
  .editor-host .CodeMirror{height:100%;font-family:var(--mono);font-size:13px;}

  @media (max-width:760px){
    .viewer-shell{grid-template-columns:1fr;height:auto;}
    .tree-pane{max-height:220px;}
    .editor-host{height:420px;}
  }

  @media (prefers-reduced-motion:reduce){
    .btn,.spin,.dropzone{transition:none;animation:none;}
  }