:root {
  --blue: #0056a3;
  --blue-dark: #003f79;
  --blue-soft: #eaf3fb;
  --gold: #ffbe00;
  --ink: #172033;
  --muted: #687386;
  --line: #dfe6ef;
  --bg: #f3f6fb;
  --white: #ffffff;
  --danger: #b42318;
  --warning: #9a6700;
  --success: #067647;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
a { color: inherit; }
button, input, textarea { font: inherit; }
button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 72px;
  padding: 12px clamp(16px, 4vw, 40px);
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, .16);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.brand img { width: 42px; height: 42px; border-radius: 11px; object-fit: cover; background: white; }
.brand span { color: var(--gold); }
.topbar-user { display: flex; align-items: center; gap: 14px; }
.user-copy { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.user-copy strong { font-size: 14px; }
.user-copy span { font-size: 12px; color: #cfe3f7; margin-top: 3px; }

.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 52px; }
.footer { text-align: center; color: #8b95a6; font-size: 12px; padding: 12px 16px 28px; }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { margin: 5px 0 8px; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.035em; }
.page-heading p { margin: 0; color: var(--muted); line-height: 1.6; }
.split-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; }
.compact-heading { margin-bottom: 22px; }
.eyebrow { color: var(--blue); font-weight: 900; font-size: 12px; letter-spacing: .12em; }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; text-decoration: none; color: var(--blue); font-weight: 800; font-size: 14px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--blue); color: white; box-shadow: 0 7px 18px rgba(0, 86, 163, .18); }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { background: white; color: var(--blue); border-color: #b9cee2; }
.button-ghost { color: white; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }

.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dashboard-card {
  min-height: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: white;
  border-radius: 24px;
  text-decoration: none;
  overflow: hidden;
  border-top: 5px solid var(--blue);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dashboard-card:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(15,23,42,.11); }
.dashboard-card::after { content: ""; position: absolute; width: 190px; height: 190px; border-radius: 50%; right: -85px; top: -70px; background: rgba(0,86,163,.04); }
.dashboard-card.accent-gold { border-top-color: var(--gold); }
.dashboard-card.accent-slate { border-top-color: #64748b; }
.status-pill, .count-pill, .status-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.status-soon { background: #fff6d8; color: #8a5d00; }
.card-icon { width: 52px; height: 52px; margin: 22px 0 17px; border-radius: 16px; display: grid; place-items: center; background: #edf4ff; color: var(--blue); font-size: 21px; }
.dashboard-card h2 { font-size: 23px; margin: 0 0 10px; }
.dashboard-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.card-action { margin-top: auto; padding-top: 25px; color: var(--blue); font-weight: 900; display: flex; align-items: center; gap: 9px; }

.table-card, .detail-card, .capture-card, .upload-progress-card, .empty-state {
  background: white;
  border: 1px solid rgba(223,230,239,.8);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(15,23,42,.055);
}
.table-card { overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
th { padding: 14px 16px; text-align: left; background: #f8fafc; color: #6b7485; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
td { padding: 16px; border-top: 1px solid #edf1f5; font-size: 14px; }
.click-row { cursor: pointer; }
.click-row:hover { background: #f8fbff; }
.mobile-list { display: none; }
.status-badge { padding: 6px 9px; text-transform: none; letter-spacing: 0; }
.status-badge.large { font-size: 13px; padding: 9px 13px; }
.status-geprueft { background: #ecfdf3; color: var(--success); }
.status-pruefung_fehler { background: #fff7ed; color: #b54708; }
.status-gespeichert { background: #eef4ff; color: #3538cd; }

.empty-state { padding: 56px 28px; text-align: center; }
.empty-icon { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 20px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: 30px; }
.empty-state h2 { margin: 0 0 9px; }
.empty-state p { color: var(--muted); margin: 0 auto 23px; max-width: 560px; line-height: 1.55; }

.capture-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.capture-card { padding: 24px; }
.capture-choice { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 16px; padding: 18px; border: 1px dashed #b8c7d9; border-radius: 18px; background: #fbfdff; }
.capture-choice + .capture-choice { margin-top: 13px; }
.capture-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--blue-soft); color: var(--blue); font-size: 21px; }
.capture-choice h2 { margin: 0 0 4px; font-size: 17px; }
.capture-choice p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.mobile-camera-only { display: none; }
.selected-files-block { margin: 26px 0 22px; }
.section-title-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.section-title-row h2, .detail-card h2 { margin: 0; font-size: 19px; }
.file-empty { margin-top: 12px; padding: 16px; border-radius: 14px; background: #f8fafc; color: var(--muted); font-size: 14px; text-align: center; }
.selected-files { display: grid; gap: 9px; margin-top: 12px; }
.selected-file { display: grid; grid-template-columns: 42px minmax(0,1fr) 36px; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; }
.file-kind { width: 40px; height: 40px; display: grid; place-items: center; background: #f1f5f9; color: var(--blue); border-radius: 11px; }
.file-copy { min-width: 0; display: flex; flex-direction: column; }
.file-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.file-copy span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.remove-file { border: 0; width: 34px; height: 34px; border-radius: 10px; background: #fff1f0; color: var(--danger); cursor: pointer; }
.field-label { display: block; font-weight: 900; font-size: 14px; margin-bottom: 8px; }
.field-label span { color: var(--muted); font-weight: 400; }
.text-field { width: 100%; resize: vertical; border: 1px solid #cfd8e4; border-radius: 14px; padding: 13px 14px; background: white; color: var(--ink); outline: none; }
.text-field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,86,163,.1); }
.submit-panel { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.submit-help { color: var(--muted); font-size: 13px; line-height: 1.55; }
.submit-actions { display: flex; gap: 10px; flex-shrink: 0; }
.upload-progress-card { padding: 24px; text-align: center; position: sticky; top: 94px; }
.progress-icon { width: 60px; height: 60px; margin: 0 auto 15px; border-radius: 18px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); font-size: 24px; }
.upload-progress-card h2 { font-size: 18px; margin: 0 0 8px; }
.upload-progress-card p { color: var(--muted); font-size: 13px; min-height: 36px; line-height: 1.4; }
.progress-track { height: 10px; background: #e7edf4; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--blue); border-radius: inherit; transition: width .15s ease; }
.progress-percent { margin-top: 8px; color: var(--blue); font-weight: 900; font-size: 13px; }

.alert { padding: 14px 16px; border-radius: 14px; margin: 0 0 18px; line-height: 1.5; font-size: 14px; }
.alert-error { background: #fff1f0; border: 1px solid #ffd0cc; color: var(--danger); }
.alert-warning { background: #fffaeb; border: 1px solid #fedf89; color: #7a4d00; }
.compact-alert { margin: 20px 0 0; }
.compact-alert ul { margin-bottom: 0; }

.detail-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; }
.detail-card { padding: 24px; }
.document-list { display: grid; gap: 9px; margin-top: 16px; }
.document-link { display: grid; grid-template-columns: 34px 1fr 20px; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; text-decoration: none; color: var(--blue); }
.document-link div { display: flex; flex-direction: column; min-width: 0; color: var(--ink); }
.document-link strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.document-link span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.note-box { margin-top: 18px; padding: 14px; border-radius: 13px; background: #f8fafc; }
.note-box p { margin: 7px 0 0; white-space: pre-wrap; color: var(--muted); }
.key-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.key-value-grid > div { padding: 13px; border-radius: 13px; background: #f8fafc; display: flex; flex-direction: column; gap: 5px; }
.key-value-grid span { color: var(--muted); font-size: 11px; text-transform: uppercase; font-weight: 800; }
.key-value-grid strong { font-size: 14px; }
.muted-box { margin-top: 16px; padding: 16px; border-radius: 14px; background: #f8fafc; color: var(--muted); }
.json-details { margin-top: 18px; }
.json-details summary { cursor: pointer; color: var(--blue); font-weight: 900; }
.json-details pre { overflow: auto; max-height: 480px; padding: 14px; background: #101828; color: #e5e7eb; border-radius: 13px; font-size: 11px; line-height: 1.45; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at top, #eaf3fb 0, #f3f6fb 48%, #edf1f6 100%); }
.login-card { width: min(430px, 100%); background: white; border-radius: 26px; padding: 34px; box-shadow: 0 24px 70px rgba(15,23,42,.13); text-align: center; }
.login-logo { width: 74px; height: 74px; border-radius: 20px; object-fit: cover; margin-bottom: 15px; }
.login-card h1 { margin: 5px 0 10px; font-size: 31px; }
.login-card p { color: var(--muted); line-height: 1.55; }
.google-button-wrap { display: flex; justify-content: center; margin-top: 24px; min-height: 44px; }
.error-message { min-height: 20px; color: var(--danger) !important; font-size: 13px; }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .capture-layout { grid-template-columns: 1fr; }
  .upload-progress-card { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .topbar { min-height: 64px; padding: 10px 14px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand img { width: 38px; height: 38px; }
  .user-copy { display: none; }
  .desktop-label { display: none; }
  .button-ghost { width: 42px; padding: 0; }
  .page-shell { width: min(100% - 22px, 1180px); padding-top: 26px; }
  .split-heading { align-items: stretch; flex-direction: column; }
  .split-heading > .button { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-card { min-height: 250px; }
  .desktop-table { display: none; }
  .mobile-list { display: grid; gap: 10px; }
  .beleg-mobile-card { display: block; padding: 16px; border-radius: 16px; background: white; border: 1px solid var(--line); box-shadow: 0 7px 20px rgba(15,23,42,.04); text-decoration: none; }
  .mobile-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
  .mobile-card-top strong { font-size: 15px; }
  .mobile-card-meta { display: flex; flex-wrap: wrap; gap: 9px 13px; margin-top: 12px; color: var(--muted); font-size: 12px; }
  .mobile-camera-only { display: grid; }
  .capture-card { padding: 15px; border-radius: 18px; }
  .capture-choice { grid-template-columns: 46px 1fr; padding: 15px; }
  .capture-icon { width: 44px; height: 44px; border-radius: 13px; }
  .capture-choice .file-button { grid-column: 1 / -1; width: 100%; }
  .submit-panel { flex-direction: column; align-items: stretch; }
  .submit-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .submit-actions .button { padding-inline: 10px; }
  .key-value-grid { grid-template-columns: 1fr; }
  .detail-card { padding: 17px; }
  .login-card { padding: 27px 20px; }
}

.status-pruefung_laeuft { background: #eaf3fb; color: var(--blue); }
.detail-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.alert-subcopy { display: inline-block; margin-top: 4px; opacity: .85; }
.usage-card { margin-top: 22px; }
.usage-intro { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 10px 0 0; }
.usage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.usage-grid > div { min-width: 0; padding: 13px; border-radius: 13px; background: #f8fafc; display: flex; flex-direction: column; gap: 5px; }
.usage-grid span { color: var(--muted); font-size: 10px; text-transform: uppercase; font-weight: 800; }
.usage-grid strong { font-size: 16px; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .usage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .detail-heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .detail-heading-actions .status-badge { align-self: flex-start; }
  .detail-heading-actions .button { width: 100%; }
  .usage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Invoice management + AI cost dashboard */
.dashboard-card.accent-green { border-top-color: #12b76a; }
.dashboard-card.accent-violet { border-top-color: #7f56d9; }
.dashboard-card.accent-green .card-icon { background: #ecfdf3; color: #067647; }
.dashboard-card.accent-violet .card-icon { background: #f4f3ff; color: #6938ef; }
.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.compact-card { min-height: 260px; }
.subtle-actions { margin-top: 18px; text-align: right; }
.subtle-actions a, .section-actions a { color: var(--blue); font-weight: 800; text-decoration: none; font-size: 13px; }
.section-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 22px; }
.summary-card { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 19px; box-shadow: 0 8px 22px rgba(15,23,42,.04); display: flex; flex-direction: column; gap: 6px; }
.summary-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 900; }
.summary-card strong { font-size: 24px; letter-spacing: -.025em; }
.summary-card small { color: var(--muted); font-size: 11px; }

.invoice-form { display: grid; gap: 18px; }
.form-section { margin: 0; }
.form-section > h2 { margin: 0 0 17px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 13px; margin-top: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid label, .invoice-line label, .danger-card label { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-grid label > span, .invoice-line label > span, .danger-card label > span { font-size: 12px; font-weight: 900; color: #475467; }
.form-grid input, .form-grid select, .form-grid textarea, .invoice-line input, .danger-card textarea, .invoice-form textarea {
  width: 100%; min-height: 43px; border: 1px solid #cfd8e4; border-radius: 11px; padding: 10px 11px; background: white; color: var(--ink); outline: none;
}
.form-grid textarea, .danger-card textarea, .invoice-form textarea { resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus, .invoice-line input:focus, .danger-card textarea:focus, .invoice-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,86,163,.09); }
.span-2 { grid-column: span 2; }
.field-help { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.small-button { min-height: 38px; padding: 7px 12px; font-size: 13px; }
.invoice-lines { display: grid; gap: 10px; margin-top: 16px; }
.invoice-line { display: grid; grid-template-columns: minmax(220px, 2.2fr) minmax(85px,.7fr) minmax(100px,.8fr) minmax(120px,1fr) minmax(85px,.7fr) 42px; gap: 9px; align-items: end; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fbfdff; }
.remove-line { min-height: 43px; border: 0; border-radius: 10px; background: #fff1f0; color: var(--danger); cursor: pointer; }
.invoice-live-total { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 15px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.invoice-live-total span { color: var(--muted); font-size: 13px; }
.invoice-live-total strong { font-size: 21px; }
.invoice-position-card { margin: 22px 0; overflow-x: auto; }
.invoice-actions-grid { margin-top: 22px; }
.address-block { color: #475467; line-height: 1.65; }
.subheading { margin-top: 25px !important; }
.danger-card { border-color: #fecdca; }
.danger-card p { color: var(--muted); line-height: 1.55; }
.button-danger { background: #b42318; color: white; }
.button-danger:hover { background: #912018; }
.status-open { background: #eef4ff; color: #3538cd; }
.status-countered { background: #f2f4f7; color: #475467; }
.status-counter_entry { background: #fff1f0; color: #b42318; }
.alert-success { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.audit-list { display: grid; gap: 0; margin-top: 15px; }
.audit-row { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; padding: 13px 0; border-top: 1px solid #edf1f5; }
.audit-row:first-child { border-top: 0; }
.audit-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
.audit-row > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.audit-row span, .audit-row small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.audit-row small { padding: 7px 9px; margin-top: 4px; border-radius: 9px; background: #f8fafc; }
.model-cost-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.model-cost-grid > div { padding: 15px; border-radius: 14px; background: #f8fafc; display: flex; flex-direction: column; gap: 6px; }
.model-cost-grid strong { overflow-wrap: anywhere; }
.model-cost-grid span { color: var(--muted); font-size: 12px; }
.model-cost-grid b { color: var(--blue); margin-top: 3px; }
.cost-unknown { color: var(--warning); font-weight: 800; }
.info-note { margin-top: 18px; padding: 13px 15px; color: var(--muted); font-size: 12px; line-height: 1.55; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.65); }
.usage-cost { background: #eef8ff !important; border: 1px solid #c9e4f8; }
.usage-cost strong { color: var(--blue); }

@media (max-width: 1050px) {
  .invoice-line { grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(90px, .8fr)); }
  .invoice-line .line-description { grid-column: span 2; }
  .remove-line { align-self: end; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
  .form-grid.three { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .model-cost-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .choice-grid, .summary-grid, .form-grid.two, .form-grid.three, .model-cost-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .invoice-line { grid-template-columns: 1fr 1fr; }
  .invoice-line .line-description { grid-column: 1 / -1; }
  .invoice-line .remove-line { grid-column: 1 / -1; width: 100%; }
  .invoice-live-total { justify-content: space-between; }
  .section-actions { width: 100%; justify-content: space-between; }
}

/* Collapsible recurring invoice issuer data */
.collapsible-form-section { padding: 0; overflow: hidden; }
.collapsible-form-summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; user-select: none; }
.collapsible-form-summary::-webkit-details-marker { display: none; }
.collapsible-form-summary h2 { margin: 0; font-size: 19px; }
.collapsible-form-summary p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.collapse-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: 12px; font-weight: 900; white-space: nowrap; }
.collapse-hint i { transition: transform .18s ease; }
.collapsible-form-section[open] .collapse-hint i { transform: rotate(180deg); }
.collapsible-form-body { margin: 0; padding: 0 24px 24px; border-top: 1px solid var(--line); padding-top: 18px; }
@media (max-width: 700px) {
  .collapsible-form-summary { padding: 17px; align-items: flex-start; }
  .collapsible-form-body { padding: 17px; padding-top: 16px; }
  .collapse-hint { font-size: 0; }
  .collapse-hint i { font-size: 13px; margin-top: 4px; }
}