/* ==== THEME ==== */
:root{
  --bg:#ffffff; --text:#0f172a; --muted:#64748b; --panel:#f1f5f9;
  --card:#ffffff; --border:#e2e8f0; --accent:#2563eb; --accent-contrast:#ffffff; --focus:#94a3b8;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --text:#e5e7eb; --muted:#9aa3b2; --panel:#0f172a;
    --card:#0e1626; --border:#1f2b42; --accent:#60a5fa; --accent-contrast:#0b1220; --focus:#334155;
  }
}
body[data-theme="light"]{color-scheme: light;
  --bg:#ffffff; --text:#0f172a; --muted:#64748b; --panel:#f1f5f9;
  --card:#ffffff; --border:#e2e8f0; --accent:#2563eb; --accent-contrast:#ffffff; --focus:#94a3b8;
}
body[data-theme="dark"]{color-scheme: dark;
  --bg:#0b1220; --text:#e5e7eb; --muted:#9aa3b2; --panel:#0f172a;
  --card:#0e1626; --border:#1f2b42; --accent:#60a5fa; --accent-contrast:#0b1220; --focus:#334155;
}

html,body{height:100%}
body{
  margin:0;
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.nowrap{white-space:nowrap}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.hide-sm{display:inline}
@media (max-width:640px){.hide-sm{display:none}}

/* ==== HEADER ==== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; backdrop-filter:saturate(150%) blur(6px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  z-index:10;
  flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:8px; font-weight:700}
.logo>span{display:inline-block; width:26px; height:26px; border-radius:8px;
  background:var(--text); color:var(--bg); font-size:14px; line-height:26px; text-align:center}
.logo-text{font-weight:800}
.top-nav{display:flex; gap:12px; flex-wrap:wrap}
.nav-link{padding:8px 10px; border-radius:10px}
.nav-link:hover{background:var(--panel); text-decoration:none}
.header-actions{display:flex; gap:8px; align-items:center}

/* Menu button: hidden on desktop, shown on mobile */
.menu-btn{display:none !important;}
@media (max-width:720px){
  .menu-btn{display:inline-flex !important; order:1}
  .top-nav{display:none; width:100%; order:2; padding-top:6px}
  body[data-menu="open"] .top-nav{display:flex}
  .header-actions{order:3}
}

/* ==== Buttons ==== */
.btn{
  --pad:10px 14px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:var(--pad); border-radius:12px; border:1px solid var(--border);
  background:var(--card); color:var(--text); cursor:pointer;
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--accent); color:var(--accent-contrast); border-color:color-mix(in oklab, var(--accent) 70%, var(--border))}
.btn.ghost{background:transparent}
.btn:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.icon{font-size:1.1em}

/* ==== Hero ==== */
.hero{
  padding:40px 16px 24px; text-align:center; border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 70%, transparent), transparent);
}
.hero h1{font-size:clamp(24px, 3.5vw, 40px); margin:0 0 10px}
.lead{max-width:820px; margin:0 auto 12px; color:var(--muted)}
.keywords{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:0; list-style:none; margin:12px auto 0}
.keywords li{padding:6px 10px; border:1px dashed var(--border); border-radius:999px; font-size:14px; color:var(--muted)}

/* ==== Panel ==== */
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:14px; margin:24px auto; max-width:1100px;
}
.panel-title{margin:0 0 10px; font-size:18px}
.switch{display:flex; align-items:center; gap:10px; margin:6px 0}
.switch input{width:18px; height:18px}

/* ==== Tabs ==== */
.tabs{margin:8px auto 32px}
.tablist{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.tab{
  padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  background:var(--card); cursor:pointer;
}
.tab.active{background:var(--accent); color:var(--accent-contrast); border-color:transparent}
.tabpanel{display:none}
.tabpanel.active{display:block}

/* ==== IO / grids ==== */
.io{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:860px){ .io{grid-template-columns:1fr auto 1fr} }

.io-col{display:flex; flex-direction:column; gap:8px}
.label{font-weight:600}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; resize:vertical; min-height:150px
}
.row{display:flex; gap:8px; flex-wrap:wrap}
.muted{color:var(--muted)}
.small{font-size:12px}

.io-actions{display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center}
@media (max-width:859px){ .io-actions{order:-1; flex-direction:row; justify-content:flex-start} }

/* ==== Dropzone & preview ==== */
.dropzone{
  border:2px dashed var(--border); border-radius:16px; padding:20px; text-align:center; color:var(--muted);
}
.dropzone:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.dropzone.drag{background:color-mix(in oklab, var(--panel) 70%, transparent)}
.preview{margin-top:12px; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.preview img{max-width:100%; height:auto; border-radius:12px; border:1px solid var(--border)}

/* ==== Image grid ==== */
.image-grid{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width:900px){ .image-grid{grid-template-columns:1fr 1fr} }

.select select{
  margin-left:8px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text)
}

/* ==== Content ==== */
.content{padding:10px 0 40px}
.content h2{font-size:28px}
.content code{background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:0 6px}
.note{border:1px solid var(--border); border-radius:12px; padding:10px; background:var(--panel)}
.pop-queries{columns:2; gap:24px; list-style:disc; padding-left:20px}

/* ==== Footer ==== */
.site-footer{padding:20px 0; border-top:1px solid var(--border); color:var(--muted); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.footer-nav a{color:var(--muted)}