:root{ --bg:#0f172a; --card:#111827; --text:#e5e7eb; --accent:#22d3ee; }
*{ box-sizing:border-box; }
body{ margin:0; font:16px/1.4 system-ui,Segoe UI,Roboto,Arial; color:#1f2937; }
header{ display:flex; align-items:center; gap:16px; justify-content:space-between; padding:16px 24px; background:lightgrey; border-bottom:1px solid #1f2937; }
nav a{ color:#1f2937; text-decoration:none; margin-left:12px; }
.container{ max-width:1024px; margin:2px auto; padding:2px; }
.card{ border:1px solid #1f2937; border-radius:14px; padding:16px; margin:16px auto; max-width:1024px; }
h1,h2{ margin:0 0 12px; }
.alert{ background:#7f1d1d; color:#fecaca; padding:10px; border-radius:10px; margin:10px 0; }
.notice{ background:#064e3b; color:#d1fae5; padding:10px; border-radius:10px; margin:10px 0; }
label{ display:block; margin:8px 0 4px;color:#1f2937 }
input[type=text],input[type=password],input[type=file]{ width:100%; padding:10px; border-radius:10px; border:1px solid #334155; background:white; color:var(--text); }
button{ padding:10px 16px; border-radius:10px; border:1px solid #334155; background:white; color:#085c0e; cursor:pointer; }
button:hover{ border-color:var(--accent); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr; } }
.center{ text-align:center; }
.thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.thumbs img{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid #1f2937; }
table{ width:100%; border-collapse:collapse; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid #1f2937; }
h2 { color:#1f2937  }h1 { color:#1f2937  }p { color:#1f2937  }
summary { color:white  }