: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; 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 .muted{font-size:12px; color:var(--muted)}
.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}