:root { --blue:#003781; --line:#d9e2ef; --bg:#f5f7fb; --ink:#122033; --muted:#667085; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Noto Sans Thai", Tahoma, Arial, sans-serif; color:var(--ink); background:var(--bg); }
a { color:inherit; text-decoration:none; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:20px; background:linear-gradient(135deg,#eef5ff,#fff); }
.login-card { width:min(420px,100%); display:grid; gap:14px; padding:28px; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 20px 70px rgba(0,55,129,.12); }
h1 { color:var(--blue); margin:0 0 8px; font-size:28px; }
label { display:grid; gap:6px; font-weight:700; }
input, textarea, select { width:100%; min-height:42px; padding:9px 11px; border:1px solid #cbd5e1; border-radius:6px; font:inherit; background:#fff; }
textarea { min-height:150px; resize:vertical; }
button, .button { display:inline-flex; min-height:40px; align-items:center; justify-content:center; padding:9px 14px; border-radius:6px; border:1px solid var(--blue); background:var(--blue); color:#fff; font-weight:700; cursor:pointer; }
.button.light { background:#fff; color:var(--blue); }
.button.danger { border-color:#b42318; background:#b42318; }
.alert { padding:10px 12px; background:#fff1f0; color:#b42318; border:1px solid #ffccc7; border-radius:6px; }
.notice { padding:10px 12px; background:#ecfdf3; color:#027a48; border:1px solid #abefc6; border-radius:6px; }
.sidebar { position:fixed; inset:0 auto 0 0; width:230px; padding:18px; display:flex; flex-direction:column; gap:8px; background:var(--blue); color:#fff; }
.sidebar strong { margin-bottom:12px; font-size:19px; }
.sidebar a { padding:9px 10px; border-radius:6px; color:#eaf2ff; }
.sidebar a:hover { background:rgba(255,255,255,.12); color:#fff; }
.admin-main { margin-left:230px; padding:24px; }
.topbar { margin:-24px -24px 24px; padding:16px 24px; background:#fff; border-bottom:1px solid var(--line); }
.panel { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:18px; }
.grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.stat { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px; }
.stat strong { display:block; color:var(--blue); font-size:30px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { padding:11px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#eef5ff; color:var(--blue); }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.full { grid-column:1 / -1; }
.thumb { width:92px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
@media (max-width:900px) { .sidebar{position:static;width:auto}.admin-main{margin-left:0}.grid,.form-grid{grid-template-columns:1fr}.topbar{margin:0 0 18px} }