:root{ --bg:#ffffff; --fg:#111111; --muted:#666666; --card:#ffffff; --border:#dddddd; --brand:#0d6efd; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.site-header{background:var(--brand);border-bottom:1px solid var(--brand)}
.site-header .wrap{max-width:1100px;margin:0 auto;padding:.6rem 1rem;display:flex;align-items:center;justify-content:space-between}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.02em}
.site-nav{display:flex;gap:.6rem;flex-wrap:wrap}
.site-nav a{color:#fff;opacity:.95;text-decoration:none;padding:.35rem .5rem;border-radius:.4rem}
.site-nav a:hover{background:rgba(255,255,255,.12);}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;padding:.3rem .5rem;border-radius:.4rem}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.grid{display:grid;grid-template-columns:1fr;gap:.9rem}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:960px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--border);border-radius:.8rem;padding:1rem;display:flex;flex-direction:column;gap:.4rem}
.card h2{margin:.2rem 0;font-size:1.05rem} .meta{color:var(--muted);font-size:.9rem}
.card .tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.2rem} .tag{background:#f3f6ff;color:#335dff;font-size:.8rem;padding:.15rem .4rem;border-radius:.4rem}
.list{list-style:none;margin:0;padding:0}
@media(max-width:720px){ .nav-toggle{display:block} .site-nav{display:none;flex-direction:column;position:absolute;left:0;right:0;top:52px;background:var(--brand);padding:.6rem 1rem;border-bottom:1px solid var(--brand)} .site-nav.open{display:flex} }
.input-row{display:flex;gap:.5rem;flex-wrap:wrap}
input[type="text"],input[type="search"],select,textarea{background:#fff;border:1px solid var(--border);color:var(--fg);padding:.5rem .6rem;border-radius:.5rem;min-width:220px}
button{background:var(--brand);border:none;color:#fff;padding:.5rem .8rem;border-radius:.5rem;cursor:pointer} button.secondary{background:#fff;border:1px solid var(--border);color:var(--fg)}
pre.log{background:#fafafa;border:1px solid var(--border);padding:1rem;border-radius:.6rem;overflow:auto;max-height:50vh}