:root{
  --navy:#002b45; --deep:#001d31; --teal:#00adc2; --teal-ink:#06788a;
  --sand:#f5f3ee; --paper:#fffdfa; --muted:#5f7180; --line:rgba(0,43,69,.14);
  --danger:#a83232; --ok:#1e7a5f;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0; min-height:100%; background:var(--sand); color:var(--navy);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:15px; line-height:1.5;
}
a{color:var(--teal-ink)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif; font-weight:400; margin:0 0 .4em}

/* ---- auth screens (login / forgot / admin login) ---- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:100%; max-width:380px; background:var(--paper); border:1px solid var(--line);
  padding:40px 34px; box-shadow:0 20px 50px rgba(0,29,49,.08);
}
.auth-card .brand{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); margin-bottom:18px; font-weight:600}
.auth-card h1{font-size:28px; margin-bottom:22px}
.field{margin-bottom:16px}
.field label{display:block; font-size:12px; letter-spacing:.03em; color:var(--muted); margin-bottom:6px}
.field input,.field select{
  width:100%; padding:11px 12px; border:1px solid var(--line); background:#fff;
  font-size:15px; color:var(--navy); font-family:inherit;
}
.field input:focus,.field select:focus{outline:2px solid var(--teal); outline-offset:1px}
.btn{
  display:inline-block; width:100%; padding:12px 18px; border:0; background:var(--navy);
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.02em; cursor:pointer; text-align:center;
}
.btn:hover{background:var(--deep)}
.btn.secondary{background:transparent; color:var(--navy); border:1px solid var(--line)}
.btn.secondary:hover{background:var(--line)}
.error{background:#fbeaea; color:var(--danger); border:1px solid #e8c2c2; padding:10px 14px; font-size:13.5px; margin-bottom:16px}
.success{background:#e9f5f0; color:var(--ok); border:1px solid #bfe0d2; padding:10px 14px; font-size:13.5px; margin-bottom:16px}
.auth-links{margin-top:18px; font-size:13px; text-align:center; color:var(--muted)}

/* ---- app shell (dashboard / admin) ---- */
.app-header{
  background:var(--navy); color:#fff; padding:16px 26px; display:flex;
  align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.app-header .logo{font-family:Georgia,serif; font-size:19px; letter-spacing:.02em}
.app-header .logo b{color:var(--teal)}
.app-header nav{display:flex; gap:20px; font-size:13px}
.app-header nav a{color:rgba(255,255,255,.82); text-decoration:none}
.app-header nav a:hover,.app-header nav a.active{color:#fff}
.app-header .who{font-size:12.5px; color:rgba(255,255,255,.6)}

.app-body{max-width:980px; margin:0 auto; padding:40px 24px 80px}
.app-body h1{font-size:28px; margin-bottom:6px}
.app-body .lede{color:var(--muted); margin-bottom:30px; font-size:14.5px}

.panel{background:var(--paper); border:1px solid var(--line); padding:26px; margin-bottom:22px}
.panel h2{font-size:18px; margin-bottom:14px}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px}
.card{background:var(--paper); border:1px solid var(--line); padding:18px}
.card .area{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink); font-weight:600}
.card h3{font-size:17px; margin:6px 0 4px}
.card .meta{font-size:12.5px; color:var(--muted)}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line)}
th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
tr:hover td{background:rgba(0,43,69,.02)}

.badge{display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--line); border-radius:2px; color:var(--muted)}
.badge.ok{color:var(--ok); border-color:rgba(30,122,95,.35)}

.empty-state{padding:50px 20px; text-align:center; color:var(--muted)}

.inline-form{display:flex; gap:8px; flex-wrap:wrap; align-items:end}
.inline-form .field{margin-bottom:0; flex:1; min-width:140px}

.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:10px}

@media(max-width:640px){
  .app-header{padding:14px 16px}
  .app-body{padding:28px 16px 60px}
}