/* The one typeface across VetsGo: Poppins, served from this portal's own
   fonts/ folder so it renders the same everywhere, with nothing fetched from
   a third party. No other face is used — figures, codes and OTPs are Poppins
   too, with tabular digits so columns still line up. sans-serif is only what
   a browser draws in the moment before the file arrives. */
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap;
  src:url('fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Poppins-Bold.ttf') format('truetype'); }

/* VetsGo Admin console.
   ---------------------------------------------------------------------------
   A back office, read for hours at a desk: a quiet page, white cards, hairline
   rules, and plenty of air between one record and the next. Colour is for
   meaning only — a state, a figure that changed, the button that does the
   thing — so that when something is green it is saying something.

   The dispatch console stays dark: it is a live board watched in a room, and
   a map reads better on black. This is the other job, and it wants the other
   surface. Both are the same palette underneath. */
:root {
  /* brand */
  --green700:#0E5C46; --green600:#0F6B4F; --green500:#14916B; --green400:#34B488;
  --green100:#D6EDE3; --green50:#EFF7F3;
  --gold700:#8A5B06; --gold500:#F2A93B; --gold:#B97B12; --gold50:#FDF3E0;
  --coral700:#B4361B; --coral500:#F2643F; --coral:#C43F22; --coral50:#FDEDE8;
  --blue:#2E6FB0; --blue50:#EAF2FB; --violet:#7A46B0;

  /* surfaces and ink */
  --bg:#F3F6F4;        /* the page */
  --surf:#FFFFFF;      /* cards */
  --surf2:#F6F8F6;     /* inset: inputs, tracks, quiet blocks */
  --line:#E2E8E4;      /* hairline between things */
  --line2:#EDF1EE;     /* hairline inside a card */
  --track:#EAEFEB;     /* bar and donut tracks */
  --txt:#12201B; --mut:#63756D; --soft:#8B9A93;

  /* one shadow, used sparingly: cards lift off the page, nothing shouts */
  --lift:0 1px 2px rgba(18,32,27,.05), 0 10px 26px -18px rgba(18,32,27,.35);

  --ui:'Poppins',sans-serif;
  --display:var(--ui);
  --mono:var(--ui);
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body { background:var(--bg); color:var(--txt); font-family:var(--ui); -webkit-font-smoothing:antialiased; }
.hidden { display:none !important; }
.eyebrow { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); font-weight:700; }

/* buttons */
.btn { font-family:var(--ui); font-weight:600; font-size:14px; border:none; border-radius:999px;
  cursor:pointer; padding:11px 20px; display:inline-flex; align-items:center; gap:8px; justify-content:center; transition:.15s; }
.btn-primary { background:var(--green600); color:#fff; }
.btn-primary:hover { background:var(--green500); }
.btn-gold { background:var(--gold500); color:#3A2A00; }
.btn-coral { background:var(--coral500); color:#fff; }
.btn-ghost { background:var(--surf); color:var(--txt); box-shadow:inset 0 0 0 1px var(--line); }
.btn-ghost:hover { background:var(--surf2); box-shadow:inset 0 0 0 1px var(--green400); }
.btn-block { width:100%; }
.btn-sm { padding:8px 14px; font-size:13px; }
.btn:disabled { opacity:.5; cursor:default; }

/* login */
.login { position:fixed; inset:0; display:grid; place-items:center; z-index:50;
  background:radial-gradient(900px 500px at 50% -10%, #E4F1EA, var(--bg)); }
.login-card { width:400px; max-width:92vw; background:var(--surf); border:1px solid var(--line); border-radius:22px;
  padding:32px; box-shadow:0 24px 60px -30px rgba(18,32,27,.45); }
.login-card h1 { font-family:var(--display); font-size:25px; margin:14px 0 4px; letter-spacing:-.01em; }
.login-card .sub { color:var(--mut); font-size:14px; margin:0 0 22px; }
.login-card label { display:block; margin:0 0 7px; }
.login-card input { width:100%; background:var(--surf2); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:13px 15px; font-size:16px; margin-bottom:16px; font-family:var(--ui); }
.login-card input:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }
#loginCode { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:6px; text-align:center; font-size:20px; }
.mk { width:44px; height:44px; border-radius:13px; background:linear-gradient(160deg,#14916B,#0E5C46);
  display:grid; place-items:center; font-size:22px; flex:none; color:#fff; }
.login-mk { width:64px; height:64px; border-radius:18px; font-size:32px; }
.err { color:var(--coral); font-size:13px; margin-top:10px; }

/* shell */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side { background:var(--surf); border-right:1px solid var(--line); display:flex; flex-direction:column;
  gap:2px; padding:20px 14px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; margin:2px 0 22px; padding:0 6px; }
.brand b { font-family:var(--display); font-size:17px; display:block; line-height:1.1; letter-spacing:-.01em; }
.brand span { font-size:10.5px; color:var(--soft); letter-spacing:.14em; text-transform:uppercase; }
.nav { text-align:left; background:transparent; border:none; color:var(--mut); font-family:var(--ui);
  font-weight:600; font-size:13.5px; padding:10px 12px; border-radius:10px; cursor:pointer; transition:.15s;
  display:flex; align-items:center; gap:8px; }
.nav:hover { background:var(--surf2); color:var(--txt); }
/* The page you are on: a soft green pill, not a slab of colour. */
.nav.on { background:var(--green50); color:var(--green700); font-weight:700; box-shadow:inset 0 0 0 1px var(--green100); }
.nav.quiet { font-weight:500; font-size:13px; color:var(--soft); }
.nav .ct { margin-left:auto; background:var(--green100); color:var(--green700); font-size:10.5px; padding:2px 8px;
  border-radius:99px; font-weight:700; font-variant-numeric:tabular-nums; }
.nav .ct.gold { background:var(--gold50); color:var(--gold700); }
.side .sp { flex:1; }
.whoami { font-size:11.5px; color:var(--soft); padding:0 8px 10px; word-break:break-all; line-height:1.5; }

/* content */
.content { padding:32px 40px 72px; max-width:1040px; }
.vhead { display:flex; align-items:flex-start; gap:20px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.vhead h1 { font-family:var(--display); font-size:27px; margin:0 0 7px; letter-spacing:-.02em; }
.lede { color:var(--mut); font-size:13.5px; margin:0; max-width:64ch; line-height:1.6; }
.vhead select { margin-left:auto; }
select, .inp { background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 12px; font-family:var(--ui); font-size:13.5px; }
select:focus, .inp:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }
h2.sec { font-family:var(--display); font-size:11px; margin:30px 0 12px; color:var(--soft);
  text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.cards { display:flex; flex-direction:column; gap:14px; }

/* record cards */
.rec { background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--lift); }
.rec .row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rec .name { font-weight:700; font-size:15.5px; margin:10px 0 5px; letter-spacing:-.01em; }
.rec .meta { color:var(--mut); font-size:12.5px; display:flex; gap:6px 16px; flex-wrap:wrap; line-height:1.6; }
/* What can be done sits under a line, so a card reads as facts then actions. */
.rec .acts { display:flex; gap:8px; margin:15px -20px -4px; padding:14px 20px 0; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line2); }
/* A heading row between records: no card, no border, just the label. */
.rec.flat { background:transparent; border:none; box-shadow:none; padding:10px 2px 0; }
.rec.flat .name { margin:0 0 3px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--soft); }
.amt { font-family:var(--display); font-weight:700; font-size:19px; margin-left:auto; font-variant-numeric:tabular-nums; }
.grow { flex:1; }

.pill { font-size:11px; font-weight:700; padding:4px 10px; border-radius:99px; display:inline-flex; align-items:center; gap:5px;
  letter-spacing:.01em; }
.pill.ok { background:var(--green50); color:var(--green700); }
.pill.warn { background:var(--gold50); color:var(--gold700); }
.pill.bad { background:var(--coral50); color:var(--coral700); }
.pill.flat { background:var(--surf2); color:var(--mut); box-shadow:inset 0 0 0 1px var(--line); }

.empty { color:var(--mut); padding:26px 4px; font-size:13.5px; }
.note { color:var(--txt); font-size:12.5px; background:var(--surf2); border:1px solid var(--line2); border-radius:10px;
  padding:10px 12px; margin-top:10px; line-height:1.6; }
.code { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--soft); }

/* payouts */
.paytotal { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--gold700); margin:0 0 14px; font-weight:600; }
.paytotal.none { color:var(--mut); font-weight:400; }
.field { width:100%; background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 12px; font-family:var(--ui); font-size:13.5px; margin:7px 0 4px; }
.field:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }

/* ---- practices ---- */
.clinicgrid { display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start; }
@media (max-width:1080px) { .clinicgrid { grid-template-columns:1fr; } }

/* The practices screen speaks in cards; the rest of this console says .rec.
   Same shape, kept as its own name so changing one does not quietly restyle
   payouts. */
.card { background:var(--surf); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:14px; color:var(--txt); box-shadow:var(--lift); }
.card h3 { font-family:var(--display); font-size:15.5px; margin:0 0 4px; letter-spacing:-.01em; }
.card .row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }

button.card.clinicrow { display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--ui); font-size:14px; transition:.15s; }
button.card.clinicrow:hover { border-color:var(--green400); }
button.card.clinicrow.on { border-color:var(--green400); box-shadow:inset 3px 0 0 var(--green500), var(--lift); }

.memberrow { display:flex; align-items:center; gap:11px; padding:12px 0;
  border-top:1px solid var(--line2); }
.memberrow:first-child { border-top:none; }
.memberrow b { font-size:14px; }

.pill.green { background:var(--green50); color:var(--green700); }
.pill.gold  { background:var(--gold50); color:var(--gold700); }
.pill:not(.green):not(.gold):not(.ok):not(.warn):not(.bad):not(.flat) {
  background:var(--surf2); color:var(--mut); box-shadow:inset 0 0 0 1px var(--line); }

.fld { display:block; margin:12px 0; }
.fld > span { display:block; font-size:11.5px; color:var(--mut); margin-bottom:6px; font-weight:600; }
.fld input { width:100%; background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 13px; font-family:var(--ui); font-size:14px; }
.fld input:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.chip { background:var(--surf); border:1px solid var(--line); color:var(--mut);
  border-radius:99px; padding:6px 13px; font-family:var(--ui); font-size:12px;
  font-weight:600; cursor:pointer; transition:.15s; }
.chip:hover { border-color:var(--green400); color:var(--txt); }
.chip.on { background:var(--green50); border-color:var(--green400); color:var(--green700); font-weight:700; }

.sel { background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:8px 10px; font-family:var(--ui); font-size:12.5px; }
.addpanel { border-top:1px solid var(--line2); margin-top:14px; padding-top:8px; }

button, input, select, textarea { font-family:inherit; }

.soft { color:var(--mut); font-size:12.5px; line-height:1.6; }
.fld.sm { display:inline-block; margin:0; min-width:140px; }
.fld select { width:100%; }
.feeedit { align-items:flex-end; }

/* ---- overview ---- */
.content.wide { max-width:1320px; }
.ovtools { margin-left:auto; display:flex; gap:10px; align-items:center; }
.seg { display:flex; background:var(--surf2); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; }
.seg button { border:none; background:none; padding:7px 13px; border-radius:8px; font-weight:600; font-size:12.5px; color:var(--mut); cursor:pointer; }
.seg button.on { background:var(--surf); color:var(--green700); font-weight:700; box-shadow:0 1px 2px rgba(18,32,27,.12); }
.ovbody { display:flex; flex-direction:column; gap:18px; }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kpi { background:var(--surf); border:1px solid var(--line); border-radius:16px; padding:17px 19px; position:relative; overflow:hidden; box-shadow:var(--lift); }
.kpi .l { font-size:12px; color:var(--mut); }
.kpi .v { font-weight:700; font-size:26px; margin-top:6px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.kpi .d { font-size:11.5px; font-weight:600; margin-top:9px; }
.spark { position:absolute; right:0; bottom:0; width:84px; height:38px; }
.row2 { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; }
.row3 { display:grid; grid-template-columns:1fr 1.3fr; gap:18px; }
.card.ov { padding:0; margin:0; overflow:hidden; }
.ch { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 20px 10px; }
.ch h3 { margin:0; }
.ch .s { font-size:11.5px; color:var(--soft); }
.big { font-weight:700; font-size:21px; color:var(--green600); font-variant-numeric:tabular-nums; }
.donutrow { display:flex; align-items:center; gap:22px; padding:8px 22px 22px; }
.legrow { display:flex; align-items:center; gap:9px; font-size:12.5px; padding:6px 0; }
.legrow .sw { width:10px; height:10px; border-radius:3px; }
.reg, .sprow { display:flex; align-items:center; gap:12px; padding:9px 20px; }
.sprow { padding:8px 0; }
.regname, .spname { width:140px; flex-shrink:0; font-size:13px; }
.bar { flex:1; height:8px; border-radius:99px; background:var(--track); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; background:var(--green500); }
.regnum { width:74px; text-align:right; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; }
.ovtable { width:100%; border-collapse:collapse; }
.ovtable th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--soft); padding:10px 20px; font-weight:700; }
.ovtable td { padding:11px 20px; border-top:1px solid var(--line2); font-size:13px; font-variant-numeric:tabular-nums; }
.ovtable tbody tr:hover td { background:var(--surf2); }
.obsplit { display:grid; grid-template-columns:1.05fr 1fr; }
.heatwrap { padding:14px 10px 18px 20px; }
.heatlegend { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:10.5px; color:var(--soft); flex-wrap:wrap; }
.heatlegend i { width:18px; height:9px; border-radius:3px; display:inline-block; }
.oblist { border-left:1px solid var(--line2); padding:14px 18px; }
.ob { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line2); }
.ob:last-child { border:none; }
.ob .t { font-weight:600; font-size:12.5px; }
.ob .m { font-size:11px; color:var(--mut); margin-top:2px; }
.ob .sev { margin-left:auto; font-size:10.5px; font-weight:700; white-space:nowrap; }
.fscore { display:flex; align-items:center; gap:16px; }
.fbar { display:flex; height:13px; border-radius:99px; overflow:hidden; background:var(--track); }
.fleg { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:10px; font-size:11.5px; color:var(--mut); }
.fleg i { width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; }
@media (max-width:1280px) { .row2, .row3, .obsplit { grid-template-columns:1fr; } .oblist { border-left:none; border-top:1px solid var(--line2); } }
@media (max-width:900px) { .kpis { grid-template-columns:1fr 1fr; } }

/* A field that failed validation: red edge, and the reason under it. */
input.invalid, select.invalid, textarea.invalid, .fld input.invalid, .fld select.invalid { border-color:var(--coral500) !important; box-shadow:0 0 0 3px rgba(242,100,63,.16); }
.field-error { color:var(--coral); font-size:12px; margin-top:5px; line-height:1.4; }

/* ---- tablets and phones ------------------------------------------------
   Below 900px the side menu is a drawer behind a menu button (responsive.js),
   the page takes the full width, and anything wider than the screen — a table,
   a row of fields — scrolls sideways inside itself instead of the page. */
.mbar, .scrim { display:none; }
@media (max-width:900px) {
  .app { grid-template-columns:1fr; }
  .mbar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:40; padding:10px 14px;
    background:var(--surf); border-bottom:1px solid var(--line); }
  .mbar-btn { width:42px; height:42px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--txt);
    display:grid; place-items:center; cursor:pointer; }
  .mbar-title { font-family:var(--display); font-weight:700; font-size:16px; }
  .side { position:fixed; left:0; top:0; bottom:0; height:100%; width:min(280px, 86vw); z-index:60; overflow-y:auto;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:0 0 50px rgba(18,32,27,.25); }
  html.nav-open .side { transform:none; }
  html.nav-open .scrim { display:block; position:fixed; inset:0; z-index:55; background:rgba(18,32,27,.35); }
  html.nav-open body { overflow:hidden; }
  .content, .content.wide { padding:18px 16px 48px; max-width:none; min-width:0; }
  .content table { display:block; overflow-x:auto; }
  .content .row, .content .actions { flex-wrap:wrap; }
  .fld.sm { min-width:0; flex:1 1 140px; }
  .vhead { flex-wrap:wrap; gap:12px; }
  .vhead h1 { font-size:23px; }
  .ovtools, .vhead select { margin-left:0; flex-wrap:wrap; }
  .card, .ovbody > * { min-width:0; max-width:100%; }
  .card svg, .card canvas { max-width:100%; }
}
@media (max-width:520px) { .kpis { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   Safe houses.
   The section sets a lot of small things — species, hours, prices, packages —
   so it uses plain inputs and a compact table rather than a form per field.
   These are the handful of classes that needed a home; everything else on the
   screen is the console's own.
   --------------------------------------------------------------------------- */
#view-safehouses input, #view-safehouses textarea, #view-safehouses select {
  background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:9px 11px; font-family:var(--ui); font-size:13.5px; }
#view-safehouses input:focus, #view-safehouses textarea:focus, #view-safehouses select:focus {
  outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }
#view-safehouses textarea { line-height:1.55; resize:vertical; }
#view-safehouses .row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
#view-safehouses .row.between { justify-content:space-between; align-items:flex-start; }
#view-safehouses .sub { display:block; color:var(--mut); font-size:12px; margin-top:2px; }
#view-safehouses .mono { font-variant-numeric:tabular-nums; }
#view-safehouses .tbl { width:100%; border-collapse:collapse; }
#view-safehouses .tbl th { text-align:left; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.12em; color:var(--soft); padding:9px 10px; font-weight:700; }
#view-safehouses .tbl td { padding:10px; border-top:1px solid var(--line2); font-size:13px;
  font-variant-numeric:tabular-nums; }
#view-safehouses .tbl .r, #view-safehouses .tbl th.r { text-align:right; }
#view-safehouses .card.pad0 { padding:0; overflow:hidden; }
#view-safehouses .dr input[type="checkbox"] { width:16px; height:16px; accent-color:var(--green500); margin-top:3px; }

/* The plan and report editors: a label over each field, not beside it. */
.plan-edit .eyebrow { display:block; margin:14px 0 6px; }
.plan-edit .field + .field { margin-top:6px; }
.plan-edit textarea { width:100%; background:var(--surf); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:10px 12px; font-family:var(--ui); font-size:13.5px; line-height:1.6; resize:vertical; }
.plan-edit textarea:focus { outline:none; border-color:var(--green500); box-shadow:0 0 0 3px rgba(20,145,107,.14); }

/* ---- what the console says back -----------------------------------------
   A notice in the corner and a question in a card, in the console's own type
   and colours. Nothing here says "localhost says". */
.notices { position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; gap:10px; max-width:min(420px, calc(100vw - 40px)); }
.notice { display:flex; align-items:flex-start; gap:11px; background:var(--surf); border:1px solid var(--line);
  border-left:4px solid var(--green500); border-radius:14px; padding:13px 14px; box-shadow:0 12px 30px -14px rgba(18,32,27,.45);
  animation:noteIn .18s ease-out; }
.notice.going { opacity:0; transform:translateY(6px); transition:.18s ease-in; }
.notice.bad { border-left-color:var(--coral500); }
.notice.warn { border-left-color:var(--gold500); }
.notice .ico { width:20px; height:20px; border-radius:99px; display:grid; place-items:center; flex:none; margin-top:1px;
  font-size:12px; font-weight:700; background:var(--green50); color:var(--green700); }
.notice.bad .ico { background:var(--coral50); color:var(--coral700); }
.notice.warn .ico { background:var(--gold50); color:var(--gold700); }
.notice .msg { font-size:13px; line-height:1.55; color:var(--txt); }
.notice .x { background:none; border:none; color:var(--soft); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.notice .x:hover { color:var(--txt); }
@keyframes noteIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.modal { position:fixed; inset:0; z-index:90; background:rgba(18,32,27,.38); display:grid; place-items:center; padding:20px;
  animation:noteIn .15s ease-out; }
.modal-card { background:var(--surf); border:1px solid var(--line); border-radius:18px; padding:22px 24px;
  width:440px; max-width:100%; box-shadow:0 30px 70px -30px rgba(18,32,27,.55); }
.modal-card h3 { font-family:var(--display); font-size:17px; margin:0 0 6px; letter-spacing:-.01em; }
.modal-card p { margin:0; }
.modal-acts { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }