body { font-family: "Sarabun", "Noto Sans Thai", system-ui, sans-serif; background: #f6f7f9; color: #1f2933; margin: 0; }
header { background: #1f2933; color: #fff; padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
header .brand { font-weight: 600; }
header nav a { color: #cfd6de; text-decoration: none; margin-right: 14px; }
header nav a.active { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }
header .user { margin-left: auto; font-size: 14px; color: #cfd6de; }
main { max-width: 760px; margin: 32px auto; background: #fff; border-radius: 14px; padding: 28px 32px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
h1 { font-size: 22px; margin: 0 0 6px; } h2 { font-size: 18px; margin: 28px 0 10px; }
.sub { color: #6b7785; margin: 0 0 20px; font-size: 14px; }
button { font: inherit; border: 0; border-radius: 10px; padding: 11px 18px; cursor: pointer; background: #1f2933; color: #fff; }
button.secondary { background: #e7eaee; color: #1f2933; padding: 7px 12px; font-size: 14px; }
button:disabled { opacity: .5; cursor: default; }
.status { background: #eef4ff; color: #1d4ed8; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin: 16px 0; }
.status.error, .warn { background: #fff1f0; color: #b42318; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.ok { background: #ecfdf3; color: #067647; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.drop { border: 2px dashed #c3cad3; border-radius: 12px; padding: 34px 20px; text-align: center; color: #6b7785; cursor: pointer; }
.drop.over { border-color: #1f2933; background: #f3f5f7; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #eef0f3; }
ul.plain { padding-left: 18px; margin: 8px 0; } ul.plain li { margin: 4px 0; }
.muted { color: #6b7785; font-size: 13px; }