:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; background: #f4f7fb; color: #172033; }
* { box-sizing: border-box; }
body { margin: 0; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.login-card { width: min(100%, 420px); background: white; padding: 2.5rem; border-radius: 18px; box-shadow: 0 20px 60px rgba(30, 48, 80, .12); }
.login-card h1 { margin: 0; color: #2457d6; }
.login-card p { margin: .5rem 0 2rem; color: #667085; }
label { display: block; margin: 1rem 0 .4rem; font-weight: 650; }
input { width: 100%; padding: .8rem; border: 1px solid #cfd7e6; border-radius: 8px; }
button { width: 100%; margin-top: 1.5rem; padding: .85rem; border: 0; border-radius: 8px; background: #2457d6; color: white; font-weight: 700; cursor: pointer; }
.alert { color: #b42318; background: #fee4e2; padding: .75rem; border-radius: 8px; }
.notice { color: #067647; background: #dcfae6; padding: .75rem; border-radius: 8px; }
.admin-page { min-height: 100vh; display: grid; grid-template-columns: 230px 1fr; background: #f4f7fb; }
aside { position: sticky; top: 0; height: 100vh; background: #101828; color: white; padding: 1.5rem; display: flex; flex-direction: column; }
.brand { color: white; text-decoration: none; font-size: 1.3rem; font-weight: 800; margin-bottom: 1.5rem; }
nav { display: grid; gap: .3rem; }
nav a { color: #cbd5e1; text-decoration: none; padding: .65rem .75rem; border-radius: 8px; font-size: .9rem; }
nav a:hover { color: white; background: #344054; }
aside form { margin-top: auto; } aside button { background: #344054; }
main { min-width: 0; padding: 2rem; } header h1 { margin: 0; } header p { color: #667085; }
.cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 1rem; margin: 1.5rem 0; }
.cards article,.panel,.table-wrap { background: white; border: 1px solid #e4e7ec; border-radius: 12px; padding: 1.2rem; }
.cards span { display: block; color: #667085; font-size: .85rem; }.cards strong { display: block; margin-top: .5rem; font-size: 1.7rem; }
.split { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }.panel h2 { margin-top: 0; }
.table-wrap { overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: .85rem; } th,td { text-align: left; padding: .7rem; border-bottom: 1px solid #eaecf0; white-space: nowrap; } th { color: #475467; background: #f9fafb; }
.actions { display: flex; gap: 1rem; align-items: end; margin: 1rem 0; padding: 1rem; background: white; border: 1px solid #e4e7ec; border-radius: 12px; }.actions form { display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; }.actions label { margin: 0; }.actions input,.actions select { width: auto; min-width: 180px; padding: .65rem; border: 1px solid #cfd7e6; border-radius: 8px; }.actions button { width: auto; margin: 0; padding: .7rem 1.1rem; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1rem; margin-bottom: 1rem; }.detail-grid span { display: block; color: #667085; font-size: .8rem; }.detail-grid strong { display: block; overflow-wrap: anywhere; margin-top: .25rem; }.panel pre { white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid #eaecf0; padding-bottom: .7rem; }
@media(max-width:800px){.admin-page{grid-template-columns:1fr}aside{position:static;height:auto}nav{grid-template-columns:repeat(2,1fr)}main{padding:1rem}.split{grid-template-columns:1fr}}