/* SPDX-License-Identifier: MIT */
:root { --c-bg:#f5f7fb; --c-panel:#fff; --c-accent:#2563eb; --c-warn:#f59e0b; --c-err:#dc2626; --c-ok:#059669; --c-text:#1f2937; --radius:14px; }
* { box-sizing:border-box; }
body { margin:0; font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans JP',sans-serif; background:var(--c-bg); color:var(--c-text); }
a { color:var(--c-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { background:linear-gradient(90deg,#2563eb,#9333ea); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.site-header .inner { max-width:1200px; margin:0 auto; padding:14px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.logo a { color:#fff; font-size:1.2rem; font-weight:600; letter-spacing:.5px; }
.main-nav { display:flex; flex-wrap:wrap; gap:14px; align-items:center; font-size:.8rem; }
.main-nav a, .main-nav span { padding:6px 12px; border-radius:24px; background:rgba(255,255,255,.18); color:#fff; }
.main-nav a:hover { background:rgba(255,255,255,.3); }
.main-nav .logout { background:rgba(255,255,255,.10); }
.content { max-width:1100px; margin:38px auto 80px; padding:0 26px; }
.hero h2 { margin-top:0; }
.panel { padding:10px 14px; border-radius:10px; font-size:.75rem; line-height:1.4; margin:12px 0; }
.panel.warn { background:#fff7ed; border:1px solid #fcd34d; color:#92400e; }
.panel.err { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }
.panel.ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
.post-list { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.post { background:var(--c-panel); padding:14px 16px 16px; border-radius:var(--radius); box-shadow:0 4px 18px -4px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04); }
.post .meta { font-size:.55rem; letter-spacing:.5px; color:#555; margin-bottom:6px; }
.post .body { font-size:.85rem; line-height:1.5; }
.form { display:flex; flex-direction:column; gap:12px; max-width:480px; }
.form label { display:flex; flex-direction:column; font-size:.7rem; gap:3px; }
.form input, .form textarea { padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; font-family:inherit; font-size:.85rem; }
.form button, button { background:var(--c-accent); color:#fff; border:none; padding:9px 16px; font-size:.8rem; border-radius:8px; cursor:pointer; }
.form button:hover, button:hover { filter:brightness(1.07); }
.leak { width:100%; border-collapse:collapse; font-size:.7rem; }
.leak th, .leak td { border:1px solid #ddd; padding:4px 6px; }
.leak th { background:#f3f4f6; }
@media (max-width: 760px){ .main-nav { gap:8px; } .content { padding:0 14px; } }