:root{
  /* Fluent / M365-ish palette */
  --bg:#f3f2f1;
  --card:#ffffff;
  --text:#201f1e;
  --muted:#605e5c;
  --border:#edebe9;
  --border2:#e1dfdd;
  --danger:#a4262c;
  --accent:#0078d4;
  --accent2:#106ebe;
  --radius:14px;
  --radius-sm:12px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background:var(--bg);
  margin:0;
  color:var(--text);
}

/* Link defaults (Fluent-like) */
a{color:var(--accent2);}
a:hover{color:var(--accent);}


/* Auth (login) */
.page-auth{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:24px;
  background:
    radial-gradient(900px 520px at 20% 12%, #ffffff 0%, var(--bg) 45%, #eef2ff 100%);
}
.page-auth .auth-card{
  width:min(420px, 100%);
  box-shadow:0 22px 70px rgba(17,24,39,.10);
  border:1px solid rgba(17,24,39,.10);
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(6px);
}
.page-auth .auth-card h2{
  margin:0 0 8px 0;
  text-align:center;
}

.page-auth .auth-card form{margin-top:6px;}
.page-auth .auth-card .btn{width:100%; margin-top:12px;}

.wrap{max-width:1200px; margin:24px auto; padding:0 16px;}
.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:10px 0;
}
.top h1,.top h2{margin:0; font-size:20px; font-weight:700;}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}

.err{
  background:#ffe7e7;
  border:1px solid #ffb3b3;
  padding:10px;
  border-radius:var(--radius-sm);
  margin:12px 0 0 0;
}

.ok{
  background:#dcfce7;
  border:1px solid #86efac;
  padding:10px;
  border-radius:var(--radius-sm);
  margin:12px 0 0 0;
  color:#166534;
}

/* Toast notifications (global) */
.toast-stack{
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(560px, calc(100vw - 24px));
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  display: grid;
  grid-template-columns: 18px 1fr 26px;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 60px rgba(17,24,39,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

.toast.is-show{
  transform: translateY(0);
  opacity: 1;
}

.toast .dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 4px;
  background: var(--accent);
}

.toast.success{ border-color: rgba(22,101,52,.18); }
.toast.success .dot{ background: #16a34a; }
.toast.error{ border-color: rgba(185,28,28,.18); }
.toast.error .dot{ background: #dc2626; }
.toast.info{ border-color: rgba(7,89,133,.18); }
.toast.info .dot{ background: #0284c7; }
.toast.warn{ border-color: rgba(161,98,7,.18); }
.toast.warn .dot{ background: #f59e0b; }

.toast .msg{
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}

.toast .close{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 26px;
  height: 26px;
  border-radius: 10px;
  color: rgba(0,0,0,.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toast .close:hover{ background: rgba(0,0,0,.06); }

/* Hidden flash data nodes (used for toast) */
.flash-data{ display:none !important; }

/* Forms */
label{display:block; margin-top:10px; font-size:14px;}
input,select,textarea{
  width:100%;
  padding:10px;
  margin-top:6px;
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:14px;
}

/* Checkboxes / radios (override global width:100% for inputs) */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  padding:0;
  margin-top:0;
}
label.checkbox{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid rgba(0,120,212,.25);
  border-color:rgba(0,120,212,.65);
}
textarea{min-height:80px; resize:vertical;}

.row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

/* Dashboard menu */
.menu{display:flex; flex-direction:column; gap:10px; margin-top:14px; max-width:760px; margin-left:auto; margin-right:auto;}
.menu .card{padding:9px 10px;}
.menu-item{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.menu-text{font-weight:700; font-size:14px;}
.menu-muted{color:var(--muted); font-size:12px;}
@media (max-width: 780px){
  .row,.grid{grid-template-columns:1fr;}
  .top{flex-direction:column; align-items:flex-start;}
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:#fff;
  border:1px solid var(--border2);
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-size:14px;
  line-height:1.4;
}
.btn:hover{filter:brightness(.98);}
.btn:active{transform:translateY(1px);}

.btn-primary{
  background:linear-gradient(180deg, var(--accent2) 0%, var(--accent) 100%);
  border-color:var(--accent2);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.btn-primary:hover{filter:brightness(1.05);}
.btn:focus-visible{
  outline:3px solid rgba(0,120,212,.35);
  outline-offset:2px;
}
.btn-secondary{
  background:#fff;
  border-color:var(--border2);
  color:var(--text);
}

.btn-warning{
  background:#fff;
  border-color:#fdba74;
  color:#9a3412;
}
.btn-danger{
  background:#fff;
  border-color:#ffb3b3;
  color:var(--danger);
}

.btn-warning{
  background:#fff;
  border-color:#fdba74;
  color:#9a3412;
}
.btn-sm{padding:7px 10px; border-radius:10px; font-size:13px;}
.btn-xs{padding:6px 9px; border-radius:10px; font-size:12px;}


.actions{white-space:nowrap;}
.actions .btn{margin-right:8px;}
.actions form{display:inline; margin:0;}
.actions form:last-child .btn{margin-right:0;}

/* Global actions flex (used in invoice list and other tables) */
.actions-flex{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.actions-flex form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin:0;
}
.actions-flex .btn{margin:0; flex:0 0 auto;}

/* Align action icon groups vertically */
td.actions{ vertical-align: middle; }


/* Bank transactions: keep action controls inside the last column (no clipping) */
.bank-tx-table td.actions {padding-right:16px; vertical-align: middle;}
/* The global table cell border-bottom makes the Actions column look like it has extra
   "lines" under the icons (especially in Trash). Keep separators in other columns,
   but remove the underline inside the Actions column for bank transactions tables. */
.bank-tx-table td.actions{border-bottom:none;}
.bank-tx-table .actions-flex{
  display: inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.bank-tx-table .actions-flex form{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin:0;
}
.bank-tx-table .actions-flex .btn{margin:0; flex:0 0 auto;}
.bank-tx-table .actions-flex select{
  height:30px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:0 8px;
  width:180px;
  max-width:200px;
  min-width:120px;
  flex:1 1 120px;
}

/* Give the actions column a bit more room on narrower tables */
.bank-tx-table td.actions{min-width:auto; display: revert-layer;}
@media (max-width: 1100px){
  .bank-tx-table td.actions{min-width:auto;}
  .bank-tx-table .actions-flex select{width:150px; max-width:170px;}
}

/* Actions as compact 2-column grid (used in invoice list) */
.actions-grid{
  display:grid;
  grid-template-columns:repeat(2, max-content);
  gap:6px 8px;
  align-items:start;
  justify-content:start;
}
.actions-grid .btn{margin:0; white-space:nowrap;}
.actions-grid form{margin:0;}

/* Tables */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  margin-top:14px;
}
th,td{
  padding:10px;
  border-bottom:1px solid #eee;
  text-align:left;
  font-size:14px;
}
th{background:#fafafa; font-weight:600;}
tbody tr:last-child td{border-bottom: 1px;}

/* Bank account cell (client list) */
.bank-acc{max-width:240px; word-break:break-all;}

/* Zebra rows + hover (better readability for long invoice lists) */
.table-zebra tbody tr:nth-child(even){background:#faf9f8;}
.table-zebra tbody tr:hover{background:#f3f9ff;}

/* Filter bar */
.filters{
  margin-top:14px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 0px;
}
.filter-form{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.filter-label{
  margin:0;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.filter-select{
  width:auto;
  min-width:260px;
}

/* Supplier assets preview */
.assetBox{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  background:#fff;
}
.assetLabel{font-weight:700; margin:0 0 6px 0;}
.assetImg{
  max-width:240px;
  max-height:140px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:#fff;
}
.assetBtnForm{margin-top:8px;}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
}
.badge-ok{background:#dcfce7; border:1px solid #86efac; color:#166534;}
.badge-bad{background:#fee2e2; border:1px solid #fecaca; color:#991b1b;}
.badge-warn{background:#ffedd5; border:1px solid #fdba74; color:#9a3412;}
.actions .badge{margin-right:8px;}

/* --- Faktury: helper třídy pro přehledný seznam --- */
.badge-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.nowrap{ white-space:nowrap; }
.text-end{ text-align:right; }
.muted{ opacity:.75; }

details > summary{ cursor:pointer; }
pre.email-body{
  white-space:pre-wrap;
  background:#fafafa;
  border:1px solid #eee;
  padding:10px;
  border-radius:12px;
  margin:8px 0 0 0;
  font-size:13px;
}

details summary{cursor:pointer;}
pre.email-body{
  margin:8px 0 0 0;
  padding:10px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
  white-space:pre-wrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
}

table td{ vertical-align:middle; }

/* =========================
   Icon-only buttons (UI)
   ========================= */

/* Base: use with <a> or <button> without touching routes/forms */
.icon-only{
  --icon: none;
  /* Default: all icons black (exceptions override per-icon) */
  --icon-filter: grayscale(1) brightness(0);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0;
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  font-size:0; /* hide text safely */
  line-height:1;
  color:#111827;
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  text-decoration:none;
}

/* IMPORTANT: when icon-only is combined with .btn/.btn-primary/etc, neutralize button backgrounds */
.btn.icon-only,
.btn-primary.icon-only,
.btn-secondary.icon-only,
.btn-warning.icon-only,
.btn-danger.icon-only{
  background:transparent ;
  border-color:transparent !important;
  box-shadow:none !important;
  filter:none !important;
}

/* Neutral hover background for all icons */
.icon-only:hover,
.btn.icon-only:hover,
.btn-primary.icon-only:hover,
.btn-secondary.icon-only:hover,
.btn-warning.icon-only:hover,
.btn-danger.icon-only:hover{
  background:#f3f4f6 !important;
}

/* Render the icon image */
.icon-only::before{
  content:"";
  width:24px;
  height:24px;
  display:block;
  background: var(--icon) center / 24px 24px no-repeat;
  filter: var(--icon-filter);
}

/* If some button still keeps a boxicon inside, hide it */
.icon-only i{ display:none !important; }

/* Small numeric badge for icon-only controls (e.g., bulk actions) */
.icon-only.has-badge{ position:relative; }
.icon-only .icon-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  background:#111827;
  color:#fff;
}

/* Icon mappings */
.i-back{ --icon: url('/assets/icons/ui/back.png'); }
.i-adduser{ --icon: url('/assets/icons/ui/adduser.png'); }
.i-new-invoice{ --icon: url('/assets/icons/ui/new-invoice.png'); }
.i-invoice-list{ --icon: url('/assets/icons/ui/invoice_list.png'); }
.i-new-customer{ --icon: url('/assets/icons/ui/new-customer.png'); }
.i-new-company{ --icon: url('/assets/icons/ui/new-company.png'); }
.i-new-unit{ --icon: url('/assets/icons/ui/new-unit.png'); }
.i-set-default{ --icon: url('/assets/icons/ui/set-default.png'); }
.i-match{ --icon: url('/assets/icons/ui/match.png'); }
.i-save{ --icon: url('/assets/icons/ui/save.png'); }
.i-import-payments{ --icon: url('/assets/icons/ui/import-payments.png'); }
.i-export{ --icon: url('/assets/icons/ui/csv.png'); }
.i-filter{ --icon: url('/assets/icons/ui/filter.png'); }
.i-reset{ --icon: url('/assets/icons/ui/reset.png'); --icon-filter: grayscale(1) brightness(0); }
.i-ares{ --icon: url('/assets/icons/ui/ares.svg'); --icon-filter: grayscale(1) brightness(0); }
.i-group{ --icon: url('/assets/icons/ui/group.png'); --icon-filter: grayscale(1) brightness(0); }
.i-pdf{ --icon: url('/assets/icons/ui/pdf.png'); }
.i-word{ --icon: url('/assets/icons/ui/word.png'); }
.i-email{ --icon: url('/assets/icons/ui/email.png'); }
.i-reminder{ --icon: url('/assets/icons/ui/reminder.png'); }
.i-edit{ --icon: url('/assets/icons/ui/edit.png'); }
.i-paid{ --icon: url('/assets/icons/ui/paid.png'); }
.i-no-paid{ --icon: url('/assets/icons/ui/no_paid.png'); }
.i-cancel{ --icon: url('/assets/icons/ui/cancel.png'); }
.i-cancel-access{ --icon: url('/assets/icons/ui/cancel.png'); --icon-filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(3500%) hue-rotate(345deg) brightness(100%) contrast(103%); }
.i-close{ --icon: url('/assets/icons/ui/cancel.png'); }
.i-delete{ --icon: url('/assets/icons/ui/delete.png'); --icon-filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(3500%) hue-rotate(345deg) brightness(100%) contrast(103%); }
.i-company-access{ --icon: url('/assets/icons/ui/company_access.png'); --icon-filter: none; }
.i-activate{ --icon: url('/assets/icons/ui/activate.png'); }
.i-deactivate{ --icon: url('/assets/icons/ui/deactivate.png'); }
.i-power{ --icon: url('/assets/icons/ui/activate.png'); }
.i-download { --icon: url('/assets/icons/ui/download.svg'); }
.i-list{ --icon: url('/assets/icons/ui/list.svg'); }
.i-ares{ --icon: url('/assets/icons/ui/ares.svg'); }
.i-open{ --icon: url('/assets/icons/ui/open.svg'); }
.i-lock{ --icon: url('/assets/icons/ui/lock.svg'); }
.i-check{ --icon: url('/assets/icons/ui/check.svg'); }
.i-add{ --icon: url('/assets/icons/ui/add.png'); }
.i-new-template{ --icon: url('/assets/icons/ui/template.png'); }
.i-addcard{ --icon: url('/assets/icons/ui/addcard.png'); }
.i-add-access{ --icon: url('/assets/icons/ui/add.png'); }
.i-unlink{ --icon: url('/assets/icons/ui/unpair.png'); }
.i-download{ --icon: url('/assets/icons/ui/download.png'); }
.i-login{ --icon: url('/assets/icons/ui/login.svg'); }
.i-pick-file{ --icon: url('/assets/icons/ui/pick-file.png'); }
.i-overdue{ --icon: url('/assets/icons/ui/overdue.png'); }
.i-unmatched{ --icon: url('/assets/icons/ui/unmatched.png'); }
.i-unpaid{ --icon: url('/assets/icons/ui/unpaid.svg'); }
.i-change-password{ --icon: url('/assets/icons/ui/change-password.png'); }
.i-role{ --icon: url('/assets/icons/ui/role.png'); }
.i-logout{ --icon: url('/assets/icons/ui/logout.png'); }
.i-password{ --icon: url('/assets/icons/ui/passwords.png'); }
.i-mfa{ --icon: url('/assets/icons/ui/mfa.png'); }
.i-activation{ --icon: url('/assets/icons/ui/activation.png'); }
.i-potvrdit{ --icon: url('/assets/icons/ui/nechat.png'); --icon-filter: invert(34%) sepia(88%) saturate(520%) hue-rotate(85deg) brightness(95%) contrast(90%); }
.i-keep{ --icon: url('/assets/icons/ui/nechat.png'); --icon-filter: invert(34%) sepia(88%) saturate(520%) hue-rotate(86deg) brightness(95%) contrast(90%); }
.i-reset-old{ --icon: url('/assets/icons/ui/reset_old.png'); --icon-filter: brightness(1), invert(0);}
.i-delete-reimport{ --icon: url('/assets/icons/ui/delete.png'); --icon-filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(3500%) hue-rotate(345deg) brightness(100%) contrast(103%); }
/* Special behaviors requested */

/* Fix: trash row "grey line under icons" look (center actions vertically) */


/* DELETE (bin) = red, hover “tučněji” + darker red, but keep global grey background */
.icon-only.i-delete{ background:transparent; }
.icon-only.i-delete:hover{ background:#f3f4f6; }
.icon-only.i-delete::before{
  filter: brightness(0) saturate(100%) invert(17%) sepia(92%) saturate(6700%) hue-rotate(355deg) brightness(95%) contrast(110%);
}
.icon-only.i-delete:hover::before{
  filter: brightness(.85) saturate(1.2) drop-shadow(0 0 0.6px rgba(185,28,28,.85));
  transform: scale(1.06);
}

/* RESET = black default, red on hover (use original red asset) */
.icon-only.i-reset:hover{ --icon-filter: none; }

.icon-only.i-ares:hover{ --icon-filter: none; }
.icon-only.i-group:hover{ --icon-filter: none; }
/* State toggle (activate/deactivate) */
.icon-only.state-toggle{ border-radius:12px; }
.icon-only.state-toggle.is-active{ background:#16a34a !important; border-color:#16a34a !important; --icon-filter: invert(1); }
.icon-only.state-toggle.is-active:hover{ background:#16a34a !important; border-color:#16a34a !important; }
.icon-only.state-toggle.is-inactive{ background:#dc2626 !important; border-color:#dc2626 !important; --icon-filter: invert(1); }
.icon-only.state-toggle.is-inactive:hover{ background:#dc2626 !important; border-color:#dc2626 !important; }

/* Invoice paid-state button (uses i-paid icon) */
.btn-paystate{ background: transparent !important; border-color: transparent !important; }
.btn-paystate:hover{
  background: #f3f4f6 !important; /* jemný hover jako ostatní icon-only */
  filter: none !important; }
.btn-paystate.paystate-paid::before{
  --icon-filter: brightness(0) saturate(100%) invert(44%) sepia(94%) saturate(421%) hue-rotate(86deg) brightness(95%) contrast(95%);
}
.btn-paystate.paystate-partial::before{
  --icon-filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(3000%) hue-rotate(2deg) brightness(101%) contrast(102%);
}
.btn-paystate.paystate-unpaid::before{
  --icon-filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(3500%) hue-rotate(345deg) brightness(100%) contrast(103%);
}

/* === Icon-only: barva jen ikony (přes filter), pozadí necháme jak je === */
.icon-only.is-green::before{
  --icon-filter: brightness(0) saturate(100%) invert(44%) sepia(94%) saturate(421%) hue-rotate(86deg) brightness(95%) contrast(95%);
}
.icon-only.is-orange::before{
  --icon-filter: brightness(0) saturate(100%) invert(60%) sepia(73%) saturate(3000%) hue-rotate(2deg) brightness(101%) contrast(102%);
}
.icon-only.is-red::before{
  --icon-filter: brightness(0) saturate(100%) invert(23%) sepia(98%) saturate(3500%) hue-rotate(345deg) brightness(100%) contrast(103%);
}

/* Custom file input (icon-only) */
.file-picker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.file-picker .file-name{
  font-size:13px;
  color:#6b7280;
}
.file-icon-input{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* State toggle requested: activate = green, deactivate = red (always) */
.icon-only.state-toggle.action-activate{
  background:#16a34a !important;
  border-color:#16a34a !important;
}
.icon-only.state-toggle.action-activate::before{ --icon-filter: invert(1); }
.icon-only.state-toggle.action-activate:hover{ background:#15803d !important; border-color:#15803d !important; }

.icon-only.state-toggle.action-deactivate{
  background:#dc2626 !important;
  border-color:#dc2626 !important;
}
.icon-only.state-toggle.action-deactivate::before{ --icon-filter: invert(1); }
.icon-only.state-toggle.action-deactivate:hover{ background:#b91c1c !important; border-color:#b91c1c !important; }


/* Simple modal (used for template preview) */
.ui-modal{position:fixed; inset:0; z-index:9999;}
.ui-modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.55);}
.ui-modal__dialog{position:relative; max-width:900px; margin:6vh auto; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.35); max-height:90vh;}
.ui-modal__close{position:absolute; top:10px; right:12px; border:none; background:rgba(0,0,0,.06); width:36px; height:36px; border-radius:999px; font-size:22px; line-height:36px; cursor:pointer;}
.ui-modal__body{padding:18px; overflow:auto; max-height:calc(90vh - 24px);}
.ui-modal__body img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid rgba(0,0,0,.08);}
@media (max-width: 980px){.ui-modal__dialog{max-width:94vw; margin:4vh auto;}}


.grid-2{ display:grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 860px){ .grid-2{ grid-template-columns: 1fr; } }

.label{ display:block; font-size:12px; color:#6b7280; margin-bottom:6px; }

.input{ width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; outline:none; }
.input:focus{ border-color:#cbd5e1; box-shadow:0 0 0 3px rgba(59,130,246,0.08); }

.actions-center{ justify-content:center; }