:root { --indigo: #1b2350; --ink: #0e1a3a; --gold: #f2b33d; --cyan: #38c6ea; --sand: #f6f1e7; --line: #e2dccd; --green: #005430; }
* { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Tajawal, system-ui, sans-serif; background: var(--sand); color: var(--ink); }
header { background: var(--indigo); color: #fff; padding: 14px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
header b { font-size: 20px; letter-spacing: .02em; } header b span { color: var(--gold); } header nav a { color: #dfe6ff; text-decoration: none; margin-right: 16px; font-weight: 600; }
header nav a.on, header nav a:hover { color: var(--gold); }
.wrap { max-width: 1100px; margin: auto; padding: 22px; } .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.btn { display: inline-block; font: 600 15px inherit; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 10px 16px; cursor: pointer; color: var(--ink); text-decoration: none; }
.btn.go { background: var(--gold); border-color: var(--gold); } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 13px; color: #555; } .small { font-size: 13px; color: #666; } input, select { font: 15px inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }