:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#6b7280;
  --panel:#f8fafc;
  --border:#e5e7eb;
  --accent:#2563eb;
  --accent-fg:#ffffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--fg);
  background:var(--bg);
}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 16px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.9); backdrop-filter:saturate(150%) blur(6px);
}
.brand{display:flex; align-items:center; gap:10px}
.brand h1{font-size:18px; margin:0}
.brand small{font-weight:600; color:var(--muted); margin-left:6px}
.apikey{display:flex; align-items:center; gap:8px}
.apikey label{font-size:12px; color:var(--muted)}
.apikey input{width:280px; padding:8px 10px; border:1px solid var(--border); border-radius:10px}

.layout{display:grid; grid-template-columns: 1fr 420px; gap:16px; padding:16px; max-width:1280px; margin:0 auto}
@media (max-width: 1024px){ .layout{grid-template-columns:1fr} .right{order:2} .left{order:1} }

.panel{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; margin-bottom:12px}
.panel-title{font-weight:700; margin-bottom:8px}
.header-row{display:flex; align-items:center; justify-content:space-between}
.left-title{display:flex; align-items:center; gap:8px}
.actions{display:flex; gap:8px}

.btn{padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer}
.btn:hover{background:#f3f4f6}
.btn.outline{background:transparent}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.btn.primary:hover{filter:brightness(0.95)}

.viewport{height:520px; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#f7f7f8}

.tabs{display:flex; gap:6px; margin-bottom:8px}
.tab{flex:1; padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer}
.tab.active{background:#eff6ff; border-color:#bfdbfe}

.tab-content{display:none}
.tab-content.active{display:block}

.json{width:100%; min-height:220px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px; padding:10px; border:1px solid var(--border); border-radius:10px; background:#fff}

.row{display:flex; align-items:center; gap:10px; justify-content:space-between; margin-top:8px}
.muted{color:var(--muted); font-size:12px}

.alert{padding:10px 12px; border-radius:10px; border:1px solid var(--border); margin-top:10px}
.alert.info{background:#eef2ff; border-color:#c7d2fe}

.footer{padding:12px 16px; color:var(--muted); border-top:1px solid var(--border); margin-top:12px}