:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#25313a;
  background:#f4f6f8;
  --red:#b5121b;
  --red-dark:#8e0f16;
  --red-soft:#fbecee;
  --ink:#25313a;
  --muted:#6f7a83;
  --surface:#ffffff;
  --surface-soft:#f8fafb;
  --line:#dfe4e8;
  --line-strong:#cfd6db;
  --success:#1f7a46;
  --success-soft:#eaf6ef;
  --warning:#a86b00;
  --warning-soft:#fff5db;
  --danger:#b4232d;
  --danger-soft:#fbeaec;
  --shadow:0 10px 30px rgba(31,45,55,.08);
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 0%,rgba(181,18,27,.07),transparent 24rem),
    linear-gradient(180deg,#f7f8fa 0,#f3f5f7 100%);
  color:var(--ink);
}

button,input,select,textarea{font:inherit}
button{
  border:0;
  border-radius:9px;
  padding:.72rem 1rem;
  background:var(--red);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}
button:hover{background:var(--red-dark);transform:translateY(-1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line-strong);
}
button.ghost:hover{background:#f7f8f9;border-color:#bcc6cc}

input,select,textarea{
  width:100%;
  min-height:42px;
  padding:.68rem .78rem;
  border:1px solid var(--line-strong);
  border-radius:9px;
  background:#fff;
  color:var(--ink);
  outline:none;
  transition:.18s ease;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(181,18,27,.10);
}
textarea{min-height:92px;resize:vertical}
label{display:grid;gap:.42rem;font-size:.88rem;font-weight:600;color:#49555e}
small{color:var(--muted)}

header{
  min-height:76px;
  padding:0 max(22px,calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 3px 14px rgba(31,45,55,.04);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(10px);
}

.brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.brand-logo{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
}
.brand-logo svg{width:100%;height:100%;overflow:visible}
.brand-logo path:first-child{fill:var(--red)}
.brand-logo .brand-cross{fill:#fff}
.brand-copy{line-height:1.05}
.brand-copy strong{
  display:block;
  font-size:1.08rem;
  letter-spacing:.01em;
  color:var(--red-dark);
}
.brand-copy small{
  display:block;
  margin-top:.24rem;
  color:#4e5961;
  font-size:.78rem;
  font-weight:600;
}

.header-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px 18px;
  background:
    linear-gradient(rgba(255,255,255,.80),rgba(255,255,255,.86)),
    radial-gradient(circle at 20% 10%,rgba(181,18,27,.18),transparent 24rem),
    #f4f6f8;
}
.login-card{
  width:min(94vw,455px);
  background:rgba(255,255,255,.98);
  border:1px solid var(--line);
  border-radius:18px;
  padding:30px;
  box-shadow:0 24px 70px rgba(37,49,58,.14);
}
.login-card .brand{
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.login-card .brand-logo{width:52px;height:52px}
.login-card h1{
  margin:0 0 8px;
  color:#202b32;
  font-size:1.65rem;
}
.login-subtitle{
  margin:0 0 22px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.5;
}
.login-card form{display:grid;gap:15px}
.login-card button{margin-top:3px;min-height:44px}
.msg{min-height:1.15em;color:var(--danger);font-size:.86rem}
.msg.ok{color:var(--success)}

.app{
  width:min(1240px,100%);
  margin:auto;
  padding:28px 20px 42px;
  display:grid;
  gap:18px;
}

.toolbar{
  display:grid;
  grid-template-columns:210px minmax(240px,1fr) auto;
  gap:10px;
  align-items:center;
}
.toolbar-actions{display:flex;gap:8px;align-items:center}
.toolbar-actions button{white-space:nowrap}

.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.stats article,.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 4px 16px rgba(31,45,55,.045);
}
.stats article{padding:17px 18px}
.stats small{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-weight:600;
  font-size:.82rem;
}
.stats strong{
  display:block;
  color:#202a31;
  font-size:1.9rem;
  letter-spacing:-.03em;
}
.stats article:first-child{border-top:3px solid var(--red)}

.card{padding:17px}

.agenda-card{order:0}
.donors-grid{order:1}
.section-hint{display:block;color:var(--muted);margin-top:4px;font-size:.78rem}
.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.panel-title h2{
  margin:0;
  font-size:1.05rem;
  color:#26323a;
}
.panel-title input{width:auto}
.agenda-card .panel-title{
  margin:-1px -1px 12px;
  padding:0 0 13px;
  border-bottom:1px solid var(--line);
}

.grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);
  gap:18px;
}
.donors-grid>section:first-child{min-width:0}
.donors-list{
  max-height:620px;
  overflow-y:auto;
  scrollbar-gutter:stable;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}
.list{display:grid}
.donor{
  width:100%;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 13px;
  background:#fff;
  color:var(--ink);
  border-radius:0;
  border-bottom:1px solid #edf0f2;
  text-align:left;
  font-weight:400;
}
.donor:hover{background:#fbf6f6;transform:none}
.donor:last-child{border-bottom:0}
.donor b{display:block;color:#2b343a;font-size:.91rem}
.donor small{display:block;margin-top:3px;font-size:.76rem}
.avatar{
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red-soft);
  color:var(--red-dark);
  font-size:.77rem;
  font-weight:800;
}
.pill{
  display:inline-flex;
  padding:.28rem .55rem;
  border-radius:999px;
  background:var(--success-soft);
  color:var(--success);
  font-size:.72rem;
  font-weight:700;
}
.empty{
  min-height:280px;
  display:grid;
  place-items:center;
  color:var(--muted);
  text-align:center;
}
.event{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.event b{font-size:.86rem}
.event small{font-size:.75rem}
.contact-form{
  display:grid;
  gap:10px;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid var(--line);
}
.contact-form h3{margin:0 0 3px}

.agenda-row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) 150px 230px;
  gap:10px;
  align-items:center;
  padding:11px 4px;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
}
.agenda-row:last-child{border-bottom:0}
.agenda-row>b{color:var(--red-dark)}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.span2{grid-column:1/-1}

dialog{
  width:min(720px,94vw);
  max-height:90vh;
  overflow:auto;
  padding:20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 24px 80px rgba(25,36,44,.22);
}
dialog::backdrop{background:rgba(25,34,40,.48);backdrop-filter:blur(2px)}
dialog h2,dialog h3{color:#26323a}
dialog footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

.users-dialog{width:min(980px,96vw)}
.dialog-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-bottom:12px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.dialog-head h2,.dialog-head p{margin:0}
.dialog-head p{margin-top:5px;color:var(--muted)}
.users-layout{
  display:grid;
  grid-template-columns:minmax(300px,.8fr) minmax(380px,1.2fr);
  gap:22px;
}
.users-list{display:grid;gap:8px;max-height:440px;overflow:auto}
.user-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface-soft);
}
.user-row b{display:block}
.user-row small{display:block;color:var(--muted);margin-top:3px}
.user-actions{display:flex;align-items:center;gap:8px}
.status-active{color:var(--success)}
.status-inactive{color:var(--danger)}

@media(max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .donors-list{max-height:480px}
}
@media(max-width:800px){
  header{padding:12px 16px;align-items:flex-start}
  .toolbar{grid-template-columns:1fr}
  .toolbar-actions{display:grid;grid-template-columns:1fr 1fr}
  .agenda-row{grid-template-columns:82px 1fr}
  .agenda-row>*:nth-child(n+3){grid-column:2}
  .form-grid{grid-template-columns:1fr}
  .span2{grid-column:auto}
  .users-layout{grid-template-columns:1fr}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr 1fr}
  .app{padding:18px 12px 30px}
  .login-card{padding:24px 20px}
  .brand-copy small{font-size:.7rem}
}