/* Google Sites-like classic style (light-first), simple, flat UI */
:root{
  --bg:#f1f3f4; --panel:#fff; --text:#1f2937; --muted:#5f6b7a;
  --link:#1a73e8; --link-hover:#1558b0; --border:#e5e7eb; --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --panel:#141820; --text:#e6edf3; --muted:#aab3bf;
    --link:#8ab4f8; --link-hover:#a3c4ff; --border:#1f2531;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif}
a{color:var(--link)} a:hover{color:var(--link-hover)}
.layout{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:100dvh;padding:16px}
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .nav{display:none}
  .sidebar.open .nav{display:block}
  .nav-toggle{display:inline-block}
}
.sidebar{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--text);font-weight:800;margin-bottom:10px}
.brand small{color:var(--muted);font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.nav a{
  text-decoration:none;color:var(--text);
  padding:10px 12px;border-radius:8px;
}
.nav a:hover{background: #f6f7f8;}
@media (prefers-color-scheme: dark){ .nav a:hover{background:#1a1f29;} }
.nav-toggle{display:none;margin-top:12px;border:1px solid var(--border);background:transparent;padding:6px 10px;border-radius:8px;color:var(--text)}

.content{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:0 0 12px 0;
}
.banner img{width:100%;height:220px;object-fit:cover;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);display:block}
.page-title{padding:12px 18px 4px;border-bottom:1px solid var(--border)}
.page-title h1{margin:.25rem 0 .2rem;font-size:clamp(1.4rem,2.1rem,2.4rem)}
.subtitle{margin:0;color:var(--muted)}

.section{padding:16px 18px;border-bottom:1px solid var(--border)}
.section:last-child{border-bottom:none}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:1fr} @media(min-width:980px){.grid.two{grid-template-columns:1fr 1fr}}

.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.table thead th{background:#f6f7f8} @media (prefers-color-scheme: dark){ .table thead th{background:#1a1f29}}

.notice{padding:10px;border:1px dashed var(--border);border-radius:8px;background:#fafbfc}
@media (prefers-color-scheme: dark){ .notice{background:#151a22}}

.btn{display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;background:var(--link);color:#fff;font-weight:700}
.btn:hover{filter:brightness(.96)}

.footer{padding:12px 18px;color:var(--muted);font-size:.95rem}

.sidebar { position: sticky; top: 0; z-index: 1000; }


@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 10px; }
  .nav-toggle { display: block; }
  .nav { display: none; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
  .sidebar.open .nav { display: flex; flex-direction: column; }
}

.layout {
  width: 100%;
  max-width: 1600px;   /* ← keeps it from growing too wide */
  margin: 0 auto;      /* ← centers it horizontally */
}