/* ============================================================
   Dynamic Excel Dashboard — standalone add-on module.
   Scoped entirely under #dynamicApp / .dyn-* so nothing here can
   reach the existing billing dashboard's markup.
   ============================================================ */

/* While the module is open the billing UI is parked, not altered. */
body.dynamic-active > .topbar,
body.dynamic-active > nav.tabs,
body.dynamic-active > main#app,
body.dynamic-active > #emptyState{ display:none !important; }

#dynamicApp{ padding-bottom:48px; }

/* ---- header / nav: same language as the billing dashboard ---- */
.dyn-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
  box-shadow:0 1px 0 var(--border), 0 6px 24px -18px rgba(16,24,40,0.5);
}
.dyn-brand{ display:flex; align-items:center; gap:13px; }
.dyn-mark{
  font-size:19px; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; flex:none;
  background:linear-gradient(135deg, var(--violet), var(--primary) 55%, var(--teal));
  box-shadow:0 6px 18px -5px color-mix(in srgb, var(--violet) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.dyn-brand h1{ font-size:16.5px; margin:0; font-weight:700; letter-spacing:-0.02em; }
.dyn-meta{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.dyn-actions{ display:flex; gap:9px; flex-wrap:wrap; }

.dyn-tabs{
  display:flex; gap:4px; padding:0 28px; background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border); position:sticky; top:var(--dyn-topbar-h, 66px);
  z-index:19; overflow-x:auto;
}
.dyn-tab{
  border:none; background:transparent; color:var(--text-muted);
  padding:13px 15px; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dyn-tab:hover{ color:var(--text-dim); }
.dyn-tab.active{ color:var(--primary); border-bottom-color:var(--primary); }

.dyn-panel{ animation: fadeSlideUp var(--dur-med) var(--ease-out) both; }
.dyn-wrap{ max-width:var(--content-max, 1480px); margin:0 auto; }

/* ---- wizard ---- */
.dyn-stage{ padding:22px 28px; }
.dyn-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:20px 22px; margin-bottom:16px;
}
.dyn-card > h3{
  margin:0 0 4px; font-size:15px; font-weight:700; letter-spacing:-0.01em; color:var(--text);
}
.dyn-card > p.dyn-hint{ margin:0 0 16px; font-size:12.5px; color:var(--text-muted); }

.dyn-steps{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.dyn-step{
  display:flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text-muted);
}
.dyn-step b{
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:50%; background:var(--border); color:var(--text-dim); font-size:10.5px;
}
.dyn-step.active{ background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 45%, transparent); color:var(--primary); }
.dyn-step.active b{ background:var(--primary); color:#fff; }
.dyn-step.done{ color:var(--good); border-color:color-mix(in srgb, var(--good) 40%, transparent); }
.dyn-step.done b{ background:var(--good); color:#fff; }

.dyn-drop{
  border:2px dashed var(--border-strong); border-radius:var(--radius); padding:38px 22px;
  text-align:center; background:var(--surface-2); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dyn-drop:hover, .dyn-drop.over{ border-color:var(--primary); background:var(--primary-wash); }
.dyn-drop .dyn-drop-icon{ font-size:34px; }
.dyn-drop h4{ margin:10px 0 4px; font-size:15px; font-weight:700; color:var(--text); }
.dyn-drop p{ margin:0; font-size:12.5px; color:var(--text-muted); }

.dyn-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px; }
.dyn-field{ display:flex; flex-direction:column; gap:5px; }
.dyn-field > label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
}
.dyn-field > label .dyn-req{ color:var(--critical); }
.dyn-field select, .dyn-field input[type=text]{
  width:100%; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  padding:8px 10px; border-radius:var(--radius-sm); font-size:13px; font-family:inherit;
}
.dyn-field select:focus, .dyn-field input:focus{
  outline:none; border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent);
}
.dyn-field .dyn-auto{ font-size:11px; color:var(--good); font-weight:600; }

.dyn-check-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:10px; }
.dyn-check{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
  transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.dyn-check:hover{ border-color:var(--border-strong); }
.dyn-check.on{ background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 45%, transparent); }
.dyn-check.disabled{ opacity:.5; cursor:not-allowed; }
.dyn-check input{
  appearance:none; margin:2px 0 0; width:15px; height:15px; border-radius:4px; flex:none;
  border:1.5px solid var(--border-strong); position:relative; cursor:inherit;
}
.dyn-check input:checked{ background:var(--primary); border-color:var(--primary); }
.dyn-check input:checked::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:900; color:#fff;
}
.dyn-check-text{ display:flex; flex-direction:column; gap:2px; }
.dyn-check-title{ font-size:13px; font-weight:700; color:var(--text); }
.dyn-check-sub{ font-size:11.5px; color:var(--text-muted); }

.dyn-preview-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
.dyn-preview{ width:100%; border-collapse:collapse; font-size:12px; }
.dyn-preview th{
  text-align:left; padding:8px 10px; background:var(--surface-2); color:var(--text-dim);
  font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; white-space:nowrap;
  border-bottom:1px solid var(--border-strong);
}
.dyn-preview td{
  padding:7px 10px; border-bottom:1px solid var(--border); color:var(--text-dim);
  white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis;
}

.dyn-status-row{
  display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--border);
}
.dyn-status-row:last-child{ border-bottom:0; }
.dyn-status-name{ flex:1; font-size:13px; font-weight:600; color:var(--text); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dyn-status-count{ font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dyn-status-row select{
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  padding:6px 9px; border-radius:8px; font-size:12.5px; min-width:150px;
}

.dyn-actions-row{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.dyn-spacer{ margin-left:auto; }

.dyn-alert{
  padding:11px 14px; border-radius:11px; font-size:12.5px; font-weight:600; margin-bottom:14px;
  background:var(--critical-wash); border:1px solid color-mix(in srgb, var(--critical) 40%, transparent);
  color:var(--critical);
}
.dyn-alert.info{ background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 40%, transparent); color:var(--primary); }
.dyn-alert.ok{ background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 40%, transparent); color:var(--good); }
.dyn-alert ul{ margin:6px 0 0; padding-left:20px; font-weight:500; }

/* ---- profiles ---- */
.dyn-profiles{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.dyn-profile{
  display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text-dim);
}
.dyn-profile button{
  border:none; background:transparent; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:5px;
  color:var(--text-muted);
}
.dyn-profile button:hover{ background:var(--border); color:var(--text); }
.dyn-profile .dyn-load{ color:var(--primary); font-weight:700; }

/* ---- dashboard chrome reused from the billing look ---- */
.dyn-kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.dyn-kpi{
  padding:14px 16px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border); border-left:3px solid var(--c, var(--primary)); box-shadow:var(--shadow-sm);
}
.dyn-kpi-label{ display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }
.dyn-kpi-val{ display:block; font-size:22px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; margin-top:4px; letter-spacing:-0.02em; }
.dyn-kpi-sub{ display:block; font-size:11px; color:var(--text-muted); margin-top:3px; font-variant-numeric:tabular-nums; }

.dyn-filters{
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px; margin-bottom:16px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.dyn-filters .dyn-field{ min-width:150px; }
.dyn-filters .dyn-spacer{ margin-left:auto; }

.dyn-chart-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:14px; }
.dyn-chart-wrap{ position:relative; height:270px; }

.dyn-empty{
  text-align:center; padding:52px 22px; color:var(--text-muted);
}
.dyn-empty .dyn-empty-icon{ font-size:40px; }
.dyn-empty h3{ margin:12px 0 6px; font-size:17px; color:var(--text); }
.dyn-empty p{ margin:0; font-size:13px; }

.dyn-disabled-note{
  padding:10px 13px; border-radius:10px; font-size:12px; color:var(--text-muted);
  background:var(--surface-2); border:1px dashed var(--border-strong); margin-bottom:14px;
}

@media (max-width: 720px){
  .dyn-stage{ padding:16px; }
  .dyn-topbar, .dyn-tabs{ padding-left:16px; padding-right:16px; }
  .dyn-filters .dyn-spacer{ margin-left:0; }
}

@media print{
  body.dynamic-active .dyn-topbar,
  body.dynamic-active .dyn-tabs,
  body.dynamic-active .dyn-filters,
  body.dynamic-active .dyn-noprint{ display:none !important; }
  body.dynamic-active .dyn-card{ break-inside:avoid; box-shadow:none; border-color:#bbb; }
}

/* Filter bar host — the bar itself reuses the billing .filterbar styling */
.dyn-filter-host:empty{ display:none; }
.dyn-filter-host .filterbar{ margin:18px 28px 0; }

/* ---- Reports modal: same width as the billing one ---------------------- */
#dynReportModal .modal-card{ max-width:920px; }

/* Printing the dynamic report: flatten the modal exactly as the billing one
   does, otherwise the fixed/transformed card repeats and clips across pages. */
@media print{
  body.dynamic-active > *:not(#dynamicApp){ display:none !important; }
  body.dynamic-active #dynamicApp > *:not(#dynReportModal){ display:none !important; }

  @page{ margin:12mm; }
  body.dynamic-active, body.dynamic-active #dynamicApp{
    background:#fff !important; height:auto !important; overflow:visible !important;
    padding:0 !important; margin:0 !important;
  }
  #dynReportModal, #dynReportModal *{ transition:none !important; animation:none !important; }
  #dynReportModal{
    display:block !important; position:static !important; inset:auto !important;
    opacity:1 !important; visibility:visible !important; background:none !important;
    padding:0 !important; margin:0 !important; z-index:auto !important; overflow:visible !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  #dynReportModal .modal-card{
    display:block !important; position:static !important;
    transform:none !important; -webkit-transform:none !important;
    width:auto !important; max-width:none !important;
    height:auto !important; max-height:none !important;
    background:#fff !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; overflow:visible !important;
  }
  #dynReportModal .modal-header,
  #dynReportModal .modal-actions,
  #dynReportModal .report-cats{ display:none !important; }
  #dynReportModal .report-content{
    display:block !important; position:static !important;
    height:auto !important; max-height:none !important; overflow:visible !important;
    padding:0 !important; margin:0 !important; color:#000 !important;
    font-size:11pt; line-height:1.45;
  }
  #dynReportModal .report-doc, #dynReportModal .report-doc-title{ color:#000 !important; }
  #dynReportModal .report-head{ border-bottom:2px solid #173454 !important; }
  #dynReportModal .report-meta, #dynReportModal .report-meta b{ color:#333 !important; }
  #dynReportModal .report-stats{ grid-template-columns:repeat(3,1fr) !important; }
  #dynReportModal .report-stat{ background:#f8fafc !important; border:1px solid #dbe3ee !important; }
  #dynReportModal .rs-label, #dynReportModal .rs-sub{ color:#7d8da1 !important; }
  #dynReportModal .rs-val{ color:#102a43 !important; }
  #dynReportModal .report-section h4{ color:#102a43 !important; border-bottom:1px solid #999 !important; }
  #dynReportModal .report-table th{ background:#173454 !important; color:#fff !important; text-align:center !important; }
  #dynReportModal .report-table td{ color:#102a43 !important; border-bottom:1px solid #dbe3ee !important; text-align:center !important; }
  #dynReportModal .report-table tfoot td{ background:#eef4fb !important; color:#102a43 !important; border-top:2px solid #c5d0df !important; }
  #dynReportModal .report-section{ break-inside:auto; }
  #dynReportModal .report-section h4{ break-after:avoid; }
  #dynReportModal .report-table thead{ display:table-header-group; }
  #dynReportModal .report-table tr{ break-inside:avoid; }
}

/* ============================================================
   Saved Excel profiles — card, manager, dialogs.
   Scoped under #dynamicApp / .dyn-* like the rest of the module.
   ============================================================ */

/* Destructive action, built from the same tokens as the other buttons. */
#dynamicApp .btn-danger{
  background:var(--critical); border-color:var(--critical); color:#fff;
  box-shadow:0 3px 8px color-mix(in srgb, var(--critical) 26%, transparent);
}
#dynamicApp .btn-danger:hover{
  background:color-mix(in srgb, var(--critical) 88%, #000);
  border-color:color-mix(in srgb, var(--critical) 88%, #000); filter:none;
  box-shadow:0 5px 14px color-mix(in srgb, var(--critical) 34%, transparent);
}

/* Visible keyboard focus everywhere in the module. */
#dynamicApp :focus-visible{
  outline:2px solid var(--primary); outline-offset:2px; border-radius:var(--radius-sm);
}
.dyn-check:focus-within{ border-color:var(--primary); }

.dyn-card-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.dyn-card-head-actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.dyn-count-badge{
  font-size:11px; font-weight:700; letter-spacing:.03em; padding:4px 9px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); white-space:nowrap;
}
.dyn-sheet-picker{ max-width:460px; margin-bottom:16px; }
.dyn-sheet-picker > label{ margin-bottom:1px; }

/* ---- profile list ---- */
.dyn-prof-list{ display:flex; flex-direction:column; gap:10px; }
.dyn-prof{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:13px 15px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dyn-prof:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.dyn-prof-main{ min-width:0; flex:1 1 260px; }
.dyn-prof-name{
  margin:0 0 5px; font-size:13.5px; font-weight:700; color:var(--text); letter-spacing:-0.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dyn-prof-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:11.5px; color:var(--text-muted);
}
.dyn-prof-sub{ margin-top:3px; }
.dyn-prof-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  padding:3px 9px; border-radius:999px; font-weight:700; color:var(--text-dim);
  background:var(--surface); border:1px solid var(--border);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dyn-prof-warn{
  margin:8px 0 0; padding:7px 10px; border-radius:9px; font-size:11.5px; font-weight:600;
  color:var(--warning); background:var(--warning-wash);
  border:1px solid color-mix(in srgb, var(--warning) 38%, transparent);
}
.dyn-prof-actions{ display:flex; gap:8px; flex-wrap:wrap; flex:none; }
.dyn-prof-actions .btn{ padding:7px 13px; font-size:12.5px; }

.dyn-prof-empty{
  text-align:center; padding:30px 18px; color:var(--text-muted);
  border:1px dashed var(--border-strong); border-radius:12px; background:var(--surface-2);
}
.dyn-prof-empty .dyn-empty-icon{ font-size:30px; }
.dyn-prof-empty h4{ margin:8px 0 5px; font-size:14px; color:var(--text); font-weight:700; }
.dyn-prof-empty p{ margin:0 auto; font-size:12.5px; max-width:420px; line-height:1.55; }

/* ---- quick-apply strip on the worksheet step ---- */
.dyn-prof-strip{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:16px;
  padding:11px 13px; border-radius:12px;
  background:var(--primary-wash); border:1px solid color-mix(in srgb, var(--primary) 32%, transparent);
}
.dyn-prof-strip-label{ font-size:11.5px; font-weight:700; color:var(--primary); }
.dyn-prof-pill{
  display:inline-flex; align-items:baseline; gap:7px; cursor:pointer;
  padding:6px 12px; border-radius:999px; font-family:inherit;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  transition:border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.dyn-prof-pill:hover{ border-color:var(--primary); transform:translateY(-1px); }
.dyn-prof-pill b{ font-size:12.5px; font-weight:700; }
.dyn-prof-pill span{ font-size:11px; color:var(--text-muted); }

/* ---- manager modal ---- */
/* min-width:0 lets these shrink below their content width — without it a flex
   item keeps its intrinsic width and the card runs off a phone screen. */
.dyn-prof-modal, .dyn-save-modal{ max-width:min(680px, 100%); min-width:0; }
.dyn-confirm-modal{ max-width:min(480px, 100%); min-width:0; }
.dyn-prof-modal .modal-header, .dyn-save-modal .modal-header, .dyn-confirm-modal .modal-header{ gap:12px; }
.dyn-prof-modal .modal-header > div{ min-width:0; }
.dyn-modal-sub{ margin:3px 0 0; font-size:12px; color:var(--text-muted); }
.dyn-prof-body{ padding:14px 20px; overflow-y:auto; }
.dyn-prof-body .dyn-prof{ background:var(--surface-2); }

.dyn-prof-status{
  margin:0; padding:0 20px; font-size:12.5px; font-weight:600;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out);
}
.dyn-prof-status.show{ max-height:120px; opacity:1; padding:12px 20px 0; }
.dyn-prof-status.ok{ color:var(--good); }
.dyn-prof-status.error{ color:var(--critical); }
.dyn-prof-status.info{ color:var(--primary); }

/* ---- save dialog ---- */
.dyn-save-body{ padding:16px 20px; overflow-y:auto; }
.dyn-save-body .dyn-field > label{ margin-bottom:2px; }
.dyn-save-body input[type=text]{
  width:100%; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  padding:10px 12px; border-radius:var(--radius-sm); font-size:14px; font-family:inherit; font-weight:600;
}
.dyn-save-body input[type=text]:focus{
  outline:none; border-color:var(--primary); background:var(--surface);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent);
}
.dyn-save-title{
  margin:18px 0 8px; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--text-muted);
}
.dyn-save-summary{
  margin:0; padding:4px 0 0; border-top:1px solid var(--border);
}
.dyn-sum-row{
  display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px;
}
.dyn-sum-row:last-child{ border-bottom:0; }
.dyn-sum-row dt{ flex:0 0 148px; color:var(--text-muted); font-weight:700; }
.dyn-sum-row dd{ margin:0; flex:1; min-width:0; color:var(--text-dim); word-break:break-word; }
.dyn-sum-row dd b{ color:var(--text); }

.dyn-inline-alert{
  margin-top:14px; padding:10px 13px; border-radius:10px; font-size:12.5px; font-weight:600;
  background:var(--critical-wash); border:1px solid color-mix(in srgb, var(--critical) 40%, transparent);
  color:var(--critical);
}
.dyn-inline-alert.ok{ background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 40%, transparent); color:var(--good); }

/* ---- confirm dialog ---- */
.dyn-confirm-body{ padding:18px 20px; }
.dyn-confirm-body p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--text-dim); }
.dyn-confirm-body p b{ color:var(--text); }
.dyn-confirm-body .dyn-hint{ margin-top:10px; font-size:12px; color:var(--text-muted); }

/* ---- warning variant of the wizard alert ---- */
.dyn-alert.warn{
  background:var(--warning-wash); border-color:color-mix(in srgb, var(--warning) 40%, transparent); color:var(--warning);
}

/* ---- transient feedback ---- */
.dyn-toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 16px);
  z-index:400; max-width:min(520px, calc(100vw - 32px));
  padding:12px 18px; border-radius:12px; font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring), visibility 0s linear var(--dur-med);
}
.dyn-toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; }
.dyn-toast.ok{ border-left:3px solid var(--good); }
.dyn-toast.error{ border-left:3px solid var(--critical); }

.dyn-spin{ display:inline-block; animation:dynSpin 1.4s linear infinite; }
@keyframes dynSpin{ to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .dyn-spin{ animation:none; }
  .dyn-toast{ transition:opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast); }
}

/* ---- tablet / mobile ---- */
@media (max-width: 760px){
  .dyn-prof{ align-items:stretch; }
  .dyn-prof-actions{ width:100%; }
  .dyn-prof-actions .btn{ flex:1 1 0; }
  .dyn-sheet-picker{ max-width:none; }
  .dyn-sum-row{ flex-direction:column; gap:2px; }
  .dyn-sum-row dt{ flex:none; }
  .dyn-prof-body, .dyn-save-body, .dyn-confirm-body{ padding-left:16px; padding-right:16px; }
  .dyn-prof-status.show{ padding-left:16px; padding-right:16px; }
}
@media (max-width: 520px){
  .dyn-card-head-actions{ width:100%; justify-content:space-between; }
  .dyn-prof-strip{ align-items:flex-start; }
  .dyn-toast{ left:16px; right:16px; transform:translateY(16px); max-width:none; }
  .dyn-toast.show{ transform:translateY(0); }
}

@media print{
  .dyn-toast, #dynProfileModal, #dynProfileSaveModal, #dynConfirmModal{ display:none !important; }
}