*{box-sizing:border-box;font-family:Inter,system-ui,Arial,Helvetica,sans-serif}
:root{
	--bg:#1f1140; /* deep purple */
	--panel:#1a0f33;
	--muted:#9aa0c7;
	--accent:#7c3aed; /* purple */
	--brand:#6d28d9;
	--card:#1b0f34;
	--surface:#120b29;
}
body{margin:0;font-size:13px;background:linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);color:#e6eef6;padding:24px}
.site-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;background:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.brand-link{display:flex;align-items:center;gap:12px;color:var(--bg);text-decoration:none}
.logo{width:197px;height:53px;border-radius:8px}
.brand-title{font-weight:700;color:#0f1724;font-size:1.25rem}
.container{width:90%;max-width:none;margin:0 auto;background:white;padding:32px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.08);color:#0f1724}
h1{margin-top:0}
table{width:100%;border-collapse:collapse;margin-top:12px;background:transparent}
thead th{background:transparent;padding:6px 8px;text-align:left;border-bottom:1px solid #eef2f7;color:var(--muted)}
tbody td{padding:6px 8px;border-bottom:1px solid #f1f5f9;line-height:1.2}
table tr:nth-child(even){background:#fbfdff}
.table-compact tbody td{padding:4px}
button, input[type=submit]{background:var(--accent);color:#fff;border:none;padding:10px 14px;border-radius:8px;cursor:pointer;box-shadow:0 10px 30px rgba(124,58,237,0.14)}
button.secondary{background:#6b7280}
button.danger{background:#ef4444;color:#fff;border:none;padding:8px 10px;border-radius:8px;cursor:pointer}
form label{display:block;margin:8px 0}
input[type=text], input[type=email], input[type=password], textarea, select, input[type=date], input[type=datetime-local]{width:100%;padding:8px;border:1px solid #e6eef6;border-radius:8px;background:#fff}
.error{color:#b91c1c;font-size:0.95em}
.notice{color:#065f46;font-size:0.95em}
.form-row{display:flex;gap:12px}
.form-row > label{flex:1}
@media(max-width:700px){.form-row{flex-direction:column}}

.main-nav{display:flex;gap:12px;align-items:center}
.main-nav a{color:#2b0b4f;text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.main-nav a:hover{background:rgba(124,58,237,0.08)}
.main-nav .signout{color:#ef4444}
.user-greet{margin-left:8px;color:var(--muted);font-weight:600}

.pagination{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.pagination a{padding:6px 10px;background:linear-gradient(180deg,#faf5ff,#f3e8ff);border:1px solid rgba(124,58,237,0.12);color:var(--brand);text-decoration:none;border-radius:8px}
.pagination .current{padding:6px 10px;background:var(--accent);color:#fff;border-radius:8px}

@media(max-width:900px){
		.container{padding:12px}
		table thead{display:none}
		table, tbody, tr, td{display:block;width:100%}
		tr{margin-bottom:12px}
		td{border-bottom:none;padding:6px;background:#fff}
		td:before{content:attr(data-label);font-weight:600;display:block;margin-bottom:4px;color:#6b7280}
}