:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --border:#e5e7eb; --card:#f9fafb; --link:#1d4ed8; --accent:#4f46e5;
  --th-font: Georgia, 'Times New Roman', serif;
  --td-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Helvetica Neue', Noto Sans, 'Liberation Sans', sans-serif;
}
html.dark{
  --bg:#0f172a; --text:#e5e7eb; --muted:#9ca3af; --border:#263142; --card:#121b2e; --link:#93c5fd; --accent:#8b5cf6;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--td-font);}
a{color:var(--link);text-decoration:none}
.header{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border);}
.header .inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;}
nav a{padding:8px 12px;border-radius:10px;color:var(--text);}
nav a:hover{background:rgba(0,0,0,.06)}
.wrapper{max-width:1100px;margin:0 auto;padding:22px 16px}
h1,h2,h3{font-family:var(--th-font);margin:.6rem 0}
.card{border:1px solid var(--border);background:var(--card);border-radius:14px;overflow:hidden}
.card .pad{padding:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th{background:rgba(0,0,0,.04);font-family:var(--th-font);text-align:left}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
.table tr:nth-child(even){background:rgba(0,0,0,.03)}
.thumb{max-width:200px;max-height:140px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
input,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:transparent;color:var(--text)}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);cursor:pointer}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 8px;color:var(--muted);font-size:12px}
.success{color:#10b981;margin-top:8px}
footer{padding:28px;text-align:center;color:var(--muted);border-top:1px solid var(--border);background:var(--card)}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
.hero img{width:100%;height:auto;border-radius:14px;border:1px solid var(--border)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}