:root {
  --bg: #f4f7fb;
  --surface: rgba(255,255,255,.92);
  --surface-strong: #ffffff;
  --text: #172033;
  --muted: #7a8499;
  --line: #e7ecf4;
  --shadow: 0 18px 50px rgba(20, 35, 70, .08);
  --radius: 24px;
  --primary: #4f46e5;
  --primary-dark: #3730a3;
  --danger: #dc2626;
  --success: #059669;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; min-height:100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, #e9efff 0, transparent 30%), var(--bg); color:var(--text); }
button,input,select { font:inherit; }
a { color:inherit; text-decoration:none; }
.topbar { max-width:1800px; margin:0 auto; padding:28px 32px 12px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar h1 { margin:3px 0 0; font-size:clamp(1.55rem, 2vw, 2.3rem); letter-spacing:-.04em; }
.compact-topbar { max-width:980px; }
.eyebrow { color:var(--muted); font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; }
.icon-button { width:48px; height:48px; display:grid; place-items:center; background:var(--surface-strong); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); font-size:1.2rem; }
.page-shell { max-width:1800px; margin:0 auto; padding:16px 32px 42px; }
.page-shell.narrow { max-width:980px; }
.flash { margin:0 0 18px; padding:14px 18px; border-radius:16px; font-weight:700; }
.flash.success { background:#e8fff6; color:#047857; border:1px solid #a7f3d0; }
.flash.error { background:#fff0f0; color:#b91c1c; border:1px solid #fecaca; }
.hero-summary { background:linear-gradient(135deg,#0f172a,#1e293b 65%,#312e81); color:#fff; border-radius:28px; padding:26px 30px; box-shadow:0 24px 60px rgba(15,23,42,.18); display:flex; align-items:center; justify-content:space-between; gap:26px; margin-bottom:24px; }
.hero-label { display:block; color:#cbd5e1; font-size:.88rem; margin-bottom:6px; }
.hero-value { display:block; font-size:clamp(2rem,4vw,3.4rem); line-height:1; letter-spacing:-.055em; }
.hero-value.positive { color:#6ee7b7; }
.hero-value.negative { color:#fca5a5; }
.hero-mini-grid { min-width:min(520px,48%); display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.hero-mini-grid div { padding:14px 16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); border-radius:17px; }
.hero-mini-grid span { display:block; color:#cbd5e1; font-size:.78rem; margin-bottom:4px; }
.hero-mini-grid b { font-size:1.05rem; }
.dashboard-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; align-items:start; }
.cost-card { min-width:0; background:var(--surface); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.7); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.card-head { padding:20px 20px 14px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.card-title-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.card-title-wrap h2 { margin:0 0 3px; font-size:1rem; letter-spacing:-.025em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-title-wrap span:not(.card-icon) { color:var(--muted); font-size:.75rem; }
.card-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:14px; font-weight:900; background:#eef2ff; color:#4338ca; }
.green .card-icon { background:#e9fbf3; color:#059669; }
.blue .card-icon { background:#eaf3ff; color:#2563eb; }
.purple .card-icon { background:#f3eefe; color:#7c3aed; }
.orange .card-icon { background:#fff2e7; color:#ea580c; }
.add-button { width:36px; height:36px; border:0; border-radius:12px; background:#111827; color:#fff; cursor:pointer; font-size:1.35rem; line-height:1; box-shadow:0 8px 18px rgba(17,24,39,.16); }
.add-button.compact { width:32px; height:32px; }
.entry-list { padding:0 12px 8px; }
.entry-row { display:flex; justify-content:space-between; gap:12px; padding:13px 8px; border-top:1px solid var(--line); }
.entry-main { min-width:0; }
.entry-main strong,.reserve-row strong { display:block; font-size:.88rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry-main span,.reserve-row span { display:block; margin-top:2px; color:var(--muted); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entry-actions { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.entry-actions b { font-size:.86rem; white-space:nowrap; }
.tiny-action { width:24px; height:24px; border-radius:8px; display:grid; place-items:center; color:var(--muted); }
.card-footer { display:flex; justify-content:space-between; gap:12px; padding:15px 20px 18px; background:#f9fbfe; border-top:1px solid var(--line); }
.card-footer span { color:var(--muted); font-size:.82rem; }
.card-footer strong { font-size:.95rem; }
.empty-state { margin:6px 0 10px; padding:18px 12px; text-align:center; color:var(--muted); background:#f8fafc; border:1px dashed #d8e0ed; border-radius:14px; font-size:.8rem; }
.empty-state.small { margin:8px 0; padding:12px; }
.total-card { background:linear-gradient(180deg,#fff,#fbfcff); }
.summary-list { padding:0 20px 10px; }
.summary-list div { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line); font-size:.82rem; }
.summary-list span { color:var(--muted); }
.summary-list strong { white-space:nowrap; }
.reserve-block { margin:8px 14px 14px; padding:14px; border-radius:18px; background:#f5f3ff; border:1px solid #ede9fe; }
.reserve-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.reserve-head span { display:block; color:#7c3aed; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.reserve-head strong { display:block; margin-top:2px; }
.reserve-list { margin-top:8px; }
.reserve-row { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid rgba(124,58,237,.12); }
.reserve-row div { min-width:0; }
.reserve-row b { font-size:.82rem; white-space:nowrap; }
.surplus-box { margin:14px; padding:18px; border-radius:20px; color:#fff; }
.surplus-box.positive { background:linear-gradient(135deg,#059669,#10b981); }
.surplus-box.negative { background:linear-gradient(135deg,#dc2626,#ef4444); }
.surplus-box span { display:block; font-size:.78rem; opacity:.82; }
.surplus-box strong { display:block; margin-top:3px; font-size:1.8rem; letter-spacing:-.04em; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:18px; background:rgba(15,23,42,.48); backdrop-filter:blur(8px); }
.modal-backdrop[hidden] { display:none; }
.modal-card { width:min(520px,100%); background:#fff; border-radius:26px; box-shadow:0 30px 90px rgba(15,23,42,.3); padding:24px; }
.modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; }
.modal-head h2 { margin:4px 0 0; font-size:1.45rem; letter-spacing:-.035em; }
.close-button { width:38px; height:38px; border:0; background:#f1f5f9; border-radius:12px; cursor:pointer; font-size:1.5rem; }
.form-grid { display:grid; gap:16px; }
.form-grid label span { display:block; font-size:.78rem; color:#667085; font-weight:700; margin:0 0 7px 2px; }
.form-grid input,.form-grid select,.inline-form input { width:100%; border:1px solid #dfe5ef; background:#fbfcfe; color:var(--text); border-radius:14px; padding:13px 14px; outline:none; transition:.2s; }
.form-grid input:focus,.form-grid select:focus,.inline-form input:focus { border-color:#818cf8; box-shadow:0 0 0 4px rgba(99,102,241,.1); background:#fff; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
.primary-button,.secondary-button,.danger-button { border:0; border-radius:14px; padding:12px 16px; font-weight:800; cursor:pointer; }
.primary-button { background:linear-gradient(135deg,var(--primary),#6366f1); color:#fff; box-shadow:0 10px 20px rgba(79,70,229,.2); }
.secondary-button { background:#eef2f7; color:#334155; }
.danger-button { background:#fff0f0; color:#b91c1c; }
.link-button { display:inline-block; }
.split-actions { justify-content:space-between; align-items:center; }
.split-actions > div { display:flex; gap:10px; }
.settings-layout { max-width:980px; display:grid; gap:20px; }
.settings-card { background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:24px; }
.section-head { margin-bottom:18px; }
.section-head h2 { margin:4px 0 0; font-size:1.35rem; }
.inline-form { display:grid; grid-template-columns:1fr auto; gap:10px; margin-bottom:18px; }
.category-list { display:grid; gap:8px; }
.category-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 13px; background:#f8fafc; border:1px solid var(--line); border-radius:13px; }
.tiny-delete { width:30px; height:30px; border:0; background:#fff0f0; color:#b91c1c; border-radius:9px; cursor:pointer; font-size:1.2rem; }
body.modal-open { overflow:hidden; }

@media (max-width: 1400px) {
  .dashboard-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .total-card { grid-column:span 1; }
}
@media (max-width: 980px) {
  .page-shell,.topbar { padding-left:20px; padding-right:20px; }
  .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-summary { align-items:stretch; flex-direction:column; }
  .hero-mini-grid { min-width:0; width:100%; }
}
@media (max-width: 640px) {
  .topbar { padding-top:20px; }
  .page-shell { padding:10px 14px 28px; }
  .topbar { padding-left:14px; padding-right:14px; }
  .dashboard-grid { grid-template-columns:1fr; gap:14px; }
  .hero-summary { padding:22px 20px; border-radius:22px; margin-bottom:16px; }
  .hero-mini-grid { grid-template-columns:1fr; }
  .cost-card { border-radius:21px; }
  .card-head { padding:17px 16px 12px; }
  .card-footer { padding-left:16px; padding-right:16px; }
  .settings-card,.modal-card { padding:19px; border-radius:21px; }
  .inline-form { grid-template-columns:1fr; }
  .modal-actions { flex-wrap:wrap; }
  .split-actions { align-items:stretch; flex-direction:column-reverse; }
  .split-actions > div { display:grid; grid-template-columns:1fr 1fr; }
  .danger-button { width:100%; }
}


.topbar-actions { display:flex; align-items:center; gap:10px; }
.login-page { min-height:100vh; background:radial-gradient(circle at top left, rgba(99,102,241,.22), transparent 34%), radial-gradient(circle at bottom right, rgba(16,185,129,.16), transparent 30%), #0b1220; }
.login-shell { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:22px; }
.login-card { width:min(430px,100%); background:rgba(255,255,255,.98); border:1px solid rgba(255,255,255,.7); border-radius:30px; padding:34px; box-shadow:0 32px 100px rgba(0,0,0,.34); text-align:center; }
.login-mark { width:62px; height:62px; display:grid; place-items:center; margin:0 auto 18px; border-radius:20px; color:#fff; background:linear-gradient(135deg,var(--primary),#6366f1); font-size:1.8rem; box-shadow:0 15px 30px rgba(79,70,229,.28); }
.login-card h1 { margin:6px 0 8px; font-size:clamp(1.8rem,6vw,2.3rem); letter-spacing:-.05em; }
.login-card > p { margin:0 0 22px; color:var(--muted); }
.pin-form { display:grid; gap:13px; text-align:left; }
.pin-form label { font-size:.78rem; color:#667085; font-weight:800; margin-left:2px; }
.pin-form input { width:100%; border:1px solid #dfe5ef; background:#fbfcfe; border-radius:16px; padding:15px 16px; text-align:center; font-size:1.9rem; letter-spacing:.55em; text-indent:.55em; outline:none; }
.pin-form input:focus { border-color:#818cf8; box-shadow:0 0 0 4px rgba(99,102,241,.1); background:#fff; }
.pin-form .primary-button { margin-top:3px; width:100%; padding:14px 18px; }
.login-lock { margin:0 0 16px; padding:11px 13px; border-radius:13px; background:#fff7ed; color:#9a3412; font-size:.85rem; font-weight:700; }
.primary-button:disabled,.pin-form input:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:640px) { .login-card { padding:26px 20px; border-radius:25px; } }

.lock-icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* v0.5: Sortierung & Trenner */
.sortable-list { position:relative; transition:opacity .18s ease; }
.sortable-list.is-saving { opacity:.72; }
.sortable-item { position:relative; transition:transform .16s ease, opacity .16s ease, box-shadow .16s ease; }
.sortable-item.is-dragging { opacity:.5; z-index:5; }
.sortable-item.is-touch-dragging { box-shadow:0 14px 35px rgba(15,23,42,.16); background:var(--surface-strong); border-radius:14px; }
.drag-handle { width:20px; flex:0 0 20px; display:grid; place-items:center; align-self:center; color:#a3adbd; font-size:1.05rem; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; }
.drag-handle:active { cursor:grabbing; color:#64748b; }
.entry-row .entry-main { flex:1 1 auto; }
.reserve-row .drag-handle { margin-right:2px; }
.reserve-row > div { flex:1 1 auto; }
.separator-row { min-height:42px; display:flex; align-items:center; gap:7px; margin:8px 2px 5px; padding:7px 6px; }
.separator-row::after { content:""; height:1px; flex:1 1 auto; min-width:14px; background:linear-gradient(90deg,#cbd5e1,transparent); order:2; }
.separator-label { order:1; flex:0 1 auto; max-width:70%; color:#64748b; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.09em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.separator-row .drag-handle { order:0; }
.separator-row .tiny-action { order:3; flex:0 0 auto; }
.separator-add { display:block; width:calc(100% - 24px); margin:0 12px 10px; padding:8px 10px; border:1px dashed #cbd5e1; border-radius:11px; background:transparent; color:#7a8499; font-size:.72rem; font-weight:800; cursor:pointer; transition:.18s; }
.separator-add:hover { border-color:#818cf8; color:#4f46e5; background:#f8f9ff; }
.reserve-separator { margin-left:-5px; margin-right:-5px; }
.reserve-separator::after { background:linear-gradient(90deg,rgba(124,58,237,.35),transparent); }
.reserve-separator-add { width:100%; margin:9px 0 0; border-color:rgba(124,58,237,.25); color:#7c3aed; }
@media (max-width:640px) {
  .drag-handle { width:24px; flex-basis:24px; font-size:1.15rem; }
  .separator-add { padding:10px; }
}


/* v0.6: monatlich zurückzulegende, unregelmäßige Kosten */
.hero-mini-grid { grid-template-columns:repeat(3,1fr); }
.provision-mini { background:rgba(129,140,248,.15) !important; }
.provision-badge { display:inline-flex; align-items:center; margin-left:6px; padding:2px 6px; border-radius:999px; background:#eef2ff; color:#4f46e5; font-size:.58rem; font-style:normal; font-weight:900; letter-spacing:.02em; vertical-align:1px; }
.checkbox-card { display:flex !important; align-items:flex-start; gap:12px; padding:14px; border:1px solid #dfe5ef; background:#fbfcfe; border-radius:16px; cursor:pointer; }
.checkbox-card input { width:20px !important; height:20px; flex:0 0 auto; margin:2px 0 0; accent-color:#4f46e5; }
.checkbox-card > span { display:block !important; margin:0 !important; color:var(--text) !important; }
.checkbox-card strong { display:block; font-size:.86rem; }
.checkbox-card small { display:block; margin-top:3px; color:var(--muted); font-size:.72rem; font-weight:500; line-height:1.4; }
@media (max-width:980px) { .hero-mini-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px) { .hero-mini-grid { grid-template-columns:1fr; } }


/* v0.6.2: kompakte Rücklege-Option mit Info-Tooltip */
.provision-option {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    width:100%;
    min-height:32px;
}
.provision-check {
    display:inline-flex !important;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    width:auto !important;
    margin:0 !important;
    cursor:pointer;
}
.provision-check input {
    width:18px !important;
    height:18px;
    flex:0 0 18px;
    margin:0 !important;
    accent-color:#4f46e5;
    cursor:pointer;
}
.provision-check > span {
    margin:0 !important;
    color:var(--text) !important;
    font-size:.86rem;
    font-weight:800;
    line-height:1.2;
}
.info-tooltip {
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    outline:none;
}
.info-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:19px;
    height:19px;
    border-radius:50%;
    border:1px solid #cfd7e6;
    background:#f6f8fc;
    color:#667085;
    font-size:.72rem;
    font-weight:900;
    font-family:Arial,sans-serif;
    line-height:1;
    cursor:help;
    transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.info-tooltip:hover .info-icon,
.info-tooltip:focus .info-icon,
.info-tooltip:focus-visible .info-icon {
    background:#eef2ff;
    border-color:#a5b4fc;
    color:#4f46e5;
    transform:translateY(-1px);
}
.tooltip-text {
    position:absolute;
    z-index:50;
    left:50%;
    bottom:calc(100% + 10px);
    width:min(290px, calc(100vw - 40px));
    padding:10px 12px;
    border-radius:10px;
    background:#111827;
    color:#fff;
    font-size:.74rem;
    font-weight:600;
    line-height:1.45;
    text-align:left;
    box-shadow:0 12px 30px rgba(15,23,42,.22);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,5px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.tooltip-text::after {
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:#111827;
}
.info-tooltip:hover .tooltip-text,
.info-tooltip:focus .tooltip-text,
.info-tooltip:focus-visible .tooltip-text {
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}
@media (max-width:640px) {
    .tooltip-text {
        left:auto;
        right:-8px;
        transform:translateY(5px);
    }
    .tooltip-text::after {
        left:auto;
        right:11px;
        transform:none;
    }
    .info-tooltip:hover .tooltip-text,
    .info-tooltip:focus .tooltip-text,
    .info-tooltip:focus-visible .tooltip-text {
        transform:translateY(0);
    }
}

/* v0.7: unabhängiger Rücklagen-Zähler mit Buchungsverlauf */
.hero-mini-grid { grid-template-columns:repeat(4,minmax(0,1fr)); min-width:min(760px,58%); }
.reserve-balance-mini { background:rgba(16,185,129,.14) !important; border-color:rgba(110,231,183,.2) !important; }
.reserve-balance-mini b { color:#a7f3d0; }

.reserve-booking-box {
  margin:14px;
  padding:15px;
  border-radius:18px;
  background:#f8fafc;
  border:1px solid var(--line);
}
.reserve-booking-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.reserve-booking-head > div > span { display:block; color:var(--text); font-size:.86rem; font-weight:900; }
.reserve-booking-head small { display:block; margin-top:3px; color:var(--muted); font-size:.68rem; line-height:1.35; }
.history-link { border:0; padding:5px 0; background:transparent; color:#4f46e5; font-size:.76rem; font-weight:900; cursor:pointer; }
.history-link:hover { color:#3730a3; text-decoration:underline; }
.reserve-booking-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.amount-input-wrap { position:relative; min-width:0; }
.amount-input-wrap input {
  width:100%;
  height:44px;
  padding:10px 38px 10px 12px;
  border:1px solid #dfe5ef;
  border-radius:13px;
  background:#fff;
  color:var(--text);
  outline:none;
}
.amount-input-wrap input:focus { border-color:#818cf8; box-shadow:0 0 0 4px rgba(99,102,241,.1); }
.amount-input-wrap > span { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:800; }
.reserve-book-button { min-height:44px; padding:10px 14px; border-radius:13px; }

.reserve-history-modal { width:min(620px,100%); max-height:min(760px,calc(100dvh - 36px)); display:flex; flex-direction:column; }
.reserve-history-modal .modal-head { flex:0 0 auto; }
.history-balance { flex:0 0 auto; display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; padding:15px 16px; border-radius:17px; background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; }
.history-balance span { color:#cbd5e1; font-size:.78rem; }
.history-balance strong { font-size:1.25rem; }
.reserve-history-list { overflow:auto; min-height:0; padding-right:3px; }
.reserve-history-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px 2px; border-top:1px solid var(--line); }
.history-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; font-weight:900; }
.history-icon.positive { background:#e8fff6; color:#047857; }
.history-icon.negative { background:#fff0f0; color:#b91c1c; }
.history-main { min-width:0; }
.history-main strong { display:block; font-size:.84rem; }
.history-main span { display:block; margin-top:2px; color:var(--muted); font-size:.7rem; }
.history-amount { font-size:.86rem; white-space:nowrap; }
.history-amount.positive { color:#059669; }
.history-amount.negative { color:#dc2626; }

@media (max-width:1200px) {
  .hero-mini-grid { min-width:0; width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .hero-mini-grid { grid-template-columns:1fr; }
  .reserve-booking-form { grid-template-columns:1fr; }
  .reserve-book-button { width:100%; }
  .reserve-history-row { grid-template-columns:36px minmax(0,1fr); }
  .history-amount { grid-column:2; margin-top:-4px; }
}

/* v0.7.2 – Betrag oben, Verwendungszweck sauber darunter */
.reserve-booking-form-with-purpose {
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "amount button"
    "purpose purpose";
}
.reserve-amount-input { grid-area:amount; }
.reserve-booking-form-with-purpose .reserve-book-button { grid-area:button; }
.reserve-purpose-input {
  grid-area:purpose;
  min-width:0;
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #dfe5ef;
  border-radius:13px;
  background:#fff;
  color:var(--text);
  outline:none;
}
.reserve-purpose-input:focus { border-color:#818cf8; box-shadow:0 0 0 4px rgba(99,102,241,.1); }
@media (max-width: 620px) {
  .reserve-booking-form-with-purpose {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "amount button"
      "purpose purpose";
  }
  .reserve-booking-form-with-purpose .reserve-book-button { width:auto; }
}