:root {
  color-scheme: light;
  --ink: #142c29;
  --muted: #7a8882;
  --green: #12664f;
  --green-dark: #104b3d;
  --gold: #d89b48;
  --paper: #fbfaf6;
  --line: #e8ece6;
  --danger: #b94b41;
  font-family: "DM Sans", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.landing {
  position: relative; display: flex; min-height: 100vh; justify-content: center; overflow: hidden;
  padding: 66px 20px 48px; color: #fff; background: #122b28;
}
.landing::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg,rgba(8,32,30,.79),rgba(9,26,24,.58) 46%,rgba(9,21,19,.76)),url("https://images.unsplash.com/photo-1587474260584-136574528ed5?auto=format&fit=crop&w=2200&q=85") center 51%/cover; transform: scale(1.015); }
.landing-inner { position: relative; width: min(735px, 100%); }
.brandline { display:flex; justify-content:center; align-items:center; gap:10px; color:#bdc9bf; font-size:15px; font-weight:800; letter-spacing:3px; }
.brand-dot { width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 7px #d89b4822; }
.hero-title { margin:37px 0 10px; text-align:center; font:800 clamp(34px,6vw,50px)/1.16 Manrope,sans-serif; letter-spacing:-2.3px; }
.hero-title em { display:block; color:var(--gold);font-style:normal; }
.hero-subtitle { margin:13px 0 35px; text-align:center; color:#c4ceca; font-size:16px; }
.role-list { display:grid; gap:15px; }
.role-card { display:flex; align-items:center; width:100%; min-height:117px; padding:20px 25px; border:1px solid #ffffff36; border-radius:19px; color:white; text-align:left; background:#ffffff14; backdrop-filter:blur(12px); transition:transform .2s,background .2s,border-color .2s; }
.role-card:hover { transform:translateY(-2px);background:#ffffff23;border-color:#ffffff70; }
.role-icon { display:grid; place-items:center; flex:0 0 58px; height:58px; margin-right:20px; border-radius:17px; color:#fff; background:#116247; }
.role-card.volunteer .role-icon { color:#f6c574;background:#795c2d; }
.role-card.admin .role-icon { background:#116247; }
.role-icon svg { width:26px;height:26px; }
.role-copy { display:grid; gap:3px; }
.role-kicker { color:#dda556; font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase; }
.role-name { font:800 21px/1.35 Manrope,sans-serif;letter-spacing:-.55px; }
.role-detail { color:#c4cfca; font-size:14px; }
.role-arrow { margin-left:auto; padding-left:12px; color:#aebdb7; font-size:29px; }
.landing-foot { margin-top:24px; color:#bac5bf; text-align:center; font-size:12px; }
.screen { min-height:100vh; background:#f6f7f3; }
.topbar { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px max(22px,calc((100vw - 1100px)/2));border-bottom:1px solid var(--line);background:#fff; }
.brand { display:flex;align-items:center;gap:10px;color:var(--ink);font:800 17px Manrope,sans-serif;letter-spacing:.3px; }
.brand-mark { display:grid;place-items:center;width:33px;height:33px;border-radius:11px;color:#fff;background:var(--green);font-size:17px; }
.top-actions { display:flex;align-items:center;gap:9px; }
.page-content { width:min(1060px,calc(100% - 40px));margin:43px auto 80px; }
.eyebrow { margin:0 0 10px;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
.page-title { margin:0 0 8px;font:800 clamp(28px,4vw,36px)/1.18 Manrope,sans-serif;letter-spacing:-1.2px; }
.page-intro { max-width:650px;margin:0 0 26px;color:#74827c;line-height:1.65; }
.panel { padding:25px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 7px 25px #20372b08; }
.panel + .panel { margin-top:18px; }
.panel-title { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px; }
.panel-title h2 { margin:0;font:800 17px Manrope,sans-serif; }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px; }
.field { display:grid;gap:7px;min-width:0; }
.field.full { grid-column:1/-1; }
.field label { color:#34483f;font-size:12px;font-weight:700; }
.field input,.field select,.field textarea { width:100%;min-height:45px;padding:11px 13px;border:1px solid #e0e7e1;border-radius:9px;outline:none;color:#20362d;background:#fff;transition:border .15s,box-shadow .15s; }
.field textarea { min-height:98px;resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#58a388;box-shadow:0 0 0 3px #1b785516; }
.field input::placeholder,.field textarea::placeholder { color:#a6b0aa; }
.check-row { display:flex;align-items:center;gap:9px;color:#506058;font-size:13px; }
.check-row input { width:16px;height:16px;accent-color:var(--green); }
.button { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 17px;border:1px solid transparent;border-radius:9px;color:white;background:var(--green);font-weight:700;transition:background .15s,transform .15s; }
.button:hover { background:var(--green-dark);transform:translateY(-1px); }
.button:disabled { cursor:wait;opacity:.68; }
.button.secondary { color:#335146;border-color:#dce5df;background:#fff; }
.button.secondary:hover { background:#f4f7f3; }
.button.gold { color:#423014;background:#e5b467; }
.button.danger { color:#a43f38;border-color:#f1d7d4;background:#fff; }
.button.small { min-height:34px;padding:7px 11px;font-size:12px; }
.button.wide { width:100%; }
.form-submit { margin-top:17px; }
.form-footer { margin:18px 0 0;color:#7d8983;text-align:center;font-size:13px; }
.text-button { padding:0;border:0;color:var(--green);background:none;font-weight:700; }
.text-button:hover { text-decoration:underline; }
.note { margin:15px 0 0;padding:12px 13px;border-radius:9px;color:#59685e;background:#f4f6f1;font-size:12px;line-height:1.55; }
.alert { margin:0 0 16px;padding:11px 13px;border-radius:8px;color:#923d35;background:#fdf0ed;font-size:13px; }
.triage-button { margin-top:9px; }
.triage-result { margin-top:12px;padding:15px;border:1px solid #d8e9de;border-radius:12px;background:#f4faf5; }
.triage-head { display:flex;align-items:center;gap:8px; }
.triage-head strong { margin-right:auto;font-size:13px; }
.triage-spark { color:#29805e;font-size:17px; }
.triage-category { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:13px;font:800 17px Manrope,sans-serif; }
.triage-category span,.triage-alt,.triage-evidence,.triage-signals { color:#708077;font-size:11px;font-weight:500; }
.triage-result p { margin:9px 0;color:#52635a;font-size:13px;line-height:1.55; }
.triage-disclaimer { margin-top:12px;padding-top:10px;border-top:1px solid #deebe1;color:#78877f;font-size:10px;line-height:1.55; }
.triage-alt,.triage-evidence,.triage-signals { margin-top:7px; }
.request-triage { display:flex;align-items:center;gap:8px;margin-top:13px; }
.request-triage > span:last-child { color:#74827a;font-size:11px; }
.triage-advice { margin:8px 0 0!important;padding:9px 11px;border-left:2px solid #82b49a;border-radius:0 7px 7px 0;background:#f5f8f4;color:#56665d!important;font-size:12px!important; }
.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin:22px 0; }
.stat { padding:17px;border:1px solid var(--line);border-radius:13px;background:#fff; }
.stat strong { display:block;margin-bottom:4px;font:800 26px Manrope,sans-serif; }
.stat span { color:#7b8981;font-size:12px; }
.request-list { display:grid;gap:12px; }
.request-card { padding:17px;border:1px solid var(--line);border-radius:12px;background:white; }
.request-top { display:flex;align-items:flex-start;justify-content:space-between;gap:12px; }
.request-card h3 { margin:0 0 5px;font:800 15px Manrope,sans-serif; }
.request-card p { margin:0 0 10px;color:#77837c;font-size:13px;line-height:1.5; }
.request-meta { display:flex;flex-wrap:wrap;gap:7px 14px;color:#68776f;font-size:12px; }
.badge { display:inline-flex;align-items:center;padding:5px 9px;border-radius:99px;color:#226347;background:#e8f4eb;font-size:10px;font-weight:800;letter-spacing:.35px;text-transform:uppercase;white-space:nowrap; }
.badge.urgent,.badge.open { color:#a9443c;background:#fae9e6; }
.badge.assigned { color:#76521e;background:#fbf0d9; }
.empty { padding:27px;text-align:center;color:#859189;font-size:13px; }
.empty strong { display:block;margin-bottom:5px;color:#48594f;font-size:15px; }
.tabs { display:flex;gap:5px;margin:22px 0;padding:5px;border:1px solid #e5eae5;border-radius:11px;background:white; }
.tab { padding:9px 15px;border:0;border-radius:8px;color:#6c7a72;background:transparent;font-size:13px;font-weight:700; }
.tab.active { color:white;background:var(--green); }
.section-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 14px; }
.section-head h2 { margin:0;font:800 18px Manrope,sans-serif; }
.profile-chip { display:flex;align-items:center;gap:9px;color:#58665d;font-size:13px; }
.avatar { display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;background:#56806a;font-weight:800; }
.toast-region { position:fixed;z-index:20;right:20px;bottom:20px;display:grid;gap:8px; }
.toast { max-width:min(380px,calc(100vw - 40px));padding:13px 17px;border-radius:11px;color:white;background:#174e3c;box-shadow:0 8px 30px #10251b38;font-size:13px;animation:slide .2s ease-out; }
.toast.error { background:#a5483e; }
@keyframes slide { from { opacity:0;transform:translateY(8px); } to { opacity:1;transform:none; } }
.hidden { display:none!important; }
@media (max-width:620px) {
  .landing { padding:52px 17px 34px; }
  .brandline { font-size:11px;letter-spacing:2px; }
  .hero-title { margin-top:31px;letter-spacing:-1.5px; }
  .hero-subtitle { margin-bottom:27px;font-size:14px; }
  .role-card { min-height:103px;padding:16px;border-radius:15px; }
  .role-icon { flex-basis:49px;height:49px;margin-right:13px;border-radius:14px; }
  .role-name { font-size:17px; }
  .role-detail { font-size:12px; }
  .role-kicker { font-size:10px; }
  .page-content { width:calc(100% - 30px);margin:29px auto 55px; }
  .topbar { padding:13px 15px; }
  .form-grid { grid-template-columns:1fr;gap:13px; }
  .field.full { grid-column:auto; }
  .panel { padding:19px 16px; }
  .stats { gap:8px; }.stat { padding:12px; }.stat strong { font-size:21px; }.stat span { font-size:10px; }
  .button.mobile-text { padding:8px 10px;font-size:12px; }
}