/* Hop components (design_handoff_hopzup/docs/02-screens.md, 03-motion.md).
   Every colour is a --hz-* token, every edge is a logical property so the
   layout mirrors for Arabic, and every movement collapses to a short
   crossfade under reduced motion (see the end of this file). */

/* ------------------------------------------------------------ motion */

/* From 1 %, not 0: Chrome's LCP ignores text that first paints fully transparent. */
@keyframes hz-enter { from { transform: translateY(16px); opacity: .01; } to { transform: none; opacity: 1; } }
@keyframes hz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hz-rise { 0% { transform: translateY(12px); opacity: 0; } 60% { transform: translateY(-4px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hz-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hz-shake { 0%, 100% { transform: none; } 15% { transform: translateX(-12px); } 32% { transform: translateX(10px); } 50% { transform: translateX(-7px); } 68% { transform: translateX(5px); } 84% { transform: translateX(-2px); } }
@keyframes hz-lock { 0% { transform: scale(1.4); opacity: 0; border-color: var(--hz-ink); } 45% { transform: scale(1); opacity: 1; border-color: var(--hz-ink); } 70%, 100% { transform: scale(1); opacity: 1; border-color: var(--hz-fern); } }
@keyframes hz-fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hz-hopv {
  0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 1; }
  55% { transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55 - 90px)) scale(.75) rotate(-8deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(0); opacity: 0; }
}
@keyframes hz-ringpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hz-coral) 50%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--hz-coral) 0%, transparent); } }
@keyframes hz-dropin { 0% { transform: translateY(-40px) scale(.85); opacity: 0; } 60% { transform: translateY(4px) scale(1.01); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes hz-dot { 0% { transform: scale(1.6); background: var(--hz-coral); } 100% { transform: scale(1); background: var(--hz-reed); } }
@keyframes hz-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hz-shrink { 0% { transform: scale(1); opacity: 1; max-height: 120px; } 100% { transform: scale(.6); opacity: 0; max-height: 0; } }
@keyframes hz-word { from { transform: translateY(.35em); opacity: .01; } to { transform: none; opacity: 1; } }
@keyframes hz-toast-out { to { opacity: 0; } }

.hz-enter { animation: hz-enter var(--hz-d-enter) var(--hz-ease-out) both; }
.hz-shake { animation: hz-shake 480ms var(--hz-ease-std); }

/* ------------------------------------------------------------ shared */

.hz-mono { font-family: var(--hz-font-mono); }
.hz-ltr { direction: ltr; unicode-bidi: isolate; }
.hz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hz-hit); padding: 0 22px; border: 0; border-radius: var(--hz-r-pill);
  background: var(--hz-pool); color: var(--hz-ink); font: 500 16px/1.2 var(--hz-font);
  cursor: pointer; text-decoration: none; white-space: normal; text-align: center;
  transition: background-color var(--hz-d-press) var(--hz-ease-out), transform var(--hz-d-press) var(--hz-ease-out);
}
.hz-btn:hover { background: var(--hz-reed); }
.hz-btn:active { transform: scale(.97); }
.hz-btn:disabled { cursor: default; transform: none; }
.hz-btn-ink { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-btn-ink:hover { background: var(--hz-ink-hover); }
.hz-btn-cloud { background: var(--hz-cloud); }
.hz-btn-send { background: var(--hz-coral); color: #fff; font-size: 19px; font-weight: 700; padding: 0 24px; min-height: 52px; }
.hz-btn-send:hover { background: var(--hz-coral-hover); }
.hz-btn-send:disabled { background: var(--hz-mist); color: var(--hz-hint); }
.hz-btn-blush { background: var(--hz-blush); color: var(--hz-team-text); }
.hz-btn-danger { background: var(--hz-clay); color: var(--hz-on-ink); }
.hz-btn-block { width: 100%; }
.hz-link { border: 0; background: none; padding: 0; color: var(--hz-ink); font: 600 inherit/inherit var(--hz-font); font-size: inherit; cursor: pointer; }
.hz-link:hover { color: var(--hz-clay); }
.hz-btn:focus-visible, .hz-link:focus-visible, .hz-bubble:focus-visible, .hz-tool:focus-visible,
.hz-seg button:focus-visible, .hz-nav a:focus-visible, .hz-ctl:focus-visible, .hz-chip:focus-visible {
  outline: 3px solid var(--hz-coral); outline-offset: 3px;
}

/* InlineNotice */
.hz-notice {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 16px; border-radius: 18px; background: var(--hz-blush); color: var(--hz-error-text);
  font-size: 15px; line-height: 1.45;
}
.hz-notice-actions { display: flex; gap: 14px; align-items: center; }
.hz-notice a, .hz-notice .hz-link { color: var(--hz-team-text); }
.hz-notice-ok { background: var(--hz-success-bg); color: var(--hz-success-text); }
.hz-notice-quiet { background: var(--hz-mist); color: var(--hz-slate-2); }

/* Segmented switch (Show / Enter, Contact / Report …) */
.hz-seg { display: inline-flex; padding: 4px; border-radius: var(--hz-r-pill); background: var(--hz-switch-track); font-weight: 500; }
.hz-seg button {
  min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--hz-r-pill); background: none;
  color: var(--hz-slate-2); font: 500 15px/1.2 var(--hz-font); cursor: pointer;
  transition: background-color var(--hz-d-menu) var(--hz-ease-out), color var(--hz-d-menu) var(--hz-ease-out);
}
.hz-seg button[aria-pressed="true"], .hz-seg button[aria-selected="true"] { background: var(--hz-cloud); color: var(--hz-ink); box-shadow: 0 2px 8px -2px rgba(20, 50, 45, .2); }

/* ------------------------------------------------------------ bubble */

.hz-bubble {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 92px; padding: 0; border: 0; background: none; color: var(--hz-ink);
  font: inherit; text-align: center; cursor: pointer;
}
.hz-bubble-disc {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: 4px; border-radius: 50%;
  background: var(--hz-reed); color: var(--hz-ink); font-size: 17px; font-weight: 600;
  transition: background-color var(--hz-d-press) var(--hz-ease-out), box-shadow var(--hz-d-press) var(--hz-ease-out), transform var(--hz-d-press) var(--hz-ease-out);
}
.hz-bubble-dot { position: absolute; inset-inline-end: 0; bottom: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--hz-fern); box-shadow: 0 0 0 3px var(--hz-cloud); }
.hz-bubble-badge {
  position: absolute; inset-inline-start: -2px; bottom: -4px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; border-radius: var(--hz-r-pill);
  background: var(--hz-cloud); color: var(--hz-ink); font: 700 10px/1 var(--hz-font);
  box-shadow: 0 0 0 2px var(--hz-mist);
}
.hz-bubble-name { max-width: 92px; font-size: 13px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hz-bubble-sub { margin-top: -4px; font-size: 12px; color: var(--hz-slate); }
@media (min-width: 1000px) { .hz-bubble-name { font-size: 15px; } .hz-bubble-sub { font-size: 14px; } }
.hz-bubble[aria-pressed="true"] .hz-bubble-disc,
.hz-bubble.is-drop .hz-bubble-disc {
  width: 72px; height: 72px; margin: 0; background: var(--hz-ink); color: var(--hz-on-ink); font-size: 19px;
  box-shadow: var(--hz-ring-selected);
}
.hz-bubble[aria-pressed="true"] .hz-bubble-dot, .hz-bubble.is-drop .hz-bubble-dot { display: none; }
.hz-bubble-team .hz-bubble-disc { background: var(--hz-blush); color: var(--hz-team-text); font-size: 14px; }
.hz-bubble-team[aria-pressed="true"] .hz-bubble-disc, .hz-bubble-team.is-drop .hz-bubble-disc { background: var(--hz-blush); color: var(--hz-team-text); font-size: 15px; }
.hz-bubble-off .hz-bubble-disc { background: var(--hz-mist); color: var(--hz-hint); box-shadow: inset 0 0 0 2px var(--hz-reed); }
.hz-bubble-off .hz-bubble-dot { display: none; }
.hz-bubble-off { cursor: not-allowed; }
.hz-bubble-add .hz-bubble-disc { background: none; border: 2px dashed var(--hz-dashed); color: var(--hz-slate); font-size: 24px; font-weight: 400; }
.hz-bubble-add .hz-bubble-name { color: var(--hz-slate); font-weight: 400; }
.hz-bubble-lg .hz-bubble-disc { width: 104px; height: 104px; margin: 0; font-size: 15px; font-weight: 500; }
.hz-bubble-self .hz-bubble-disc { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-bubble-other .hz-bubble-disc { background: none; border: 3px dashed var(--hz-dashed); color: var(--hz-slate); }
.hz-bubble.is-landing .hz-bubble-disc { animation: hz-ringpulse 560ms var(--hz-ease-out) 2; }
.hz-bubble-check {
  position: absolute; top: -2px; inset-inline-end: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--hz-fern); color: #fff;
  font-size: 14px; font-weight: 700; box-shadow: 0 0 0 3px var(--hz-cloud);
  animation: hz-pop 380ms var(--hz-ease-out) both;
}

.hz-dest-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.hz-dest-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.hz-send-wrap { display: flex; align-items: center; gap: 12px; }
.hz-kbd { font: 400 12px var(--hz-font-mono); color: var(--hz-slate); }

/* ------------------------------------------------------------ code card */

.hz-codecard-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hz-codecard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 320px; max-width: 100%; height: 372px; padding: 22px; box-sizing: border-box;
  border-radius: var(--hz-r-stage); background: var(--hz-cloud); box-shadow: var(--hz-shadow-lifted);
}
.hz-codecard-body { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; animation: hz-fade 240ms var(--hz-ease-out); }
.hz-qr { position: relative; width: 220px; height: 220px; padding: 10px; box-sizing: content-box; border-radius: 14px; background: #fff; }
.hz-qr img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.hz-qr-lock { position: absolute; inset: -4px; border: 4px solid var(--hz-ink); border-radius: 18px; animation: hz-lock 1100ms var(--hz-ease-out) both; pointer-events: none; }
.hz-digits { display: flex; gap: 6px; direction: ltr; }
.hz-digit { width: 36px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--hz-pool); font-size: 25px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hz-digit-gap { width: 8px; }
.hz-codecard-meta { display: flex; gap: 10px; font-size: 13px; color: var(--hz-slate); }
.hz-codecard-expired { width: 240px; height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; box-sizing: border-box; border-radius: 24px; background: var(--hz-mist); text-align: center; }
.hz-codecard-expired strong { font-size: 19px; font-weight: 600; }
.hz-codecard-expired span { font-size: 14px; color: var(--hz-slate); line-height: 1.4; }
.hz-code-enter { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hz-code-enter p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--hz-slate-2); text-align: center; }
.hz-code-input {
  width: 100%; height: 64px; box-sizing: border-box; border: 0; outline: none; border-radius: 18px;
  background: var(--hz-pool); color: inherit; text-align: center; direction: ltr;
  font: 600 30px/1 var(--hz-font); letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.hz-code-input:focus { box-shadow: 0 0 0 3px var(--hz-coral); }
.hz-code-error { padding: 10px 12px; border-radius: 14px; background: var(--hz-blush); color: var(--hz-error-text); font-size: 14px; line-height: 1.4; }
.hz-codecard-hint { font-size: 14px; color: var(--hz-slate); text-align: center; }
/* In the split panel (v3) the white split card is the card: no second surface. */
.hz-codecard-wrap.is-v3 { gap: 12px; }
.hz-codecard-wrap.is-v3 .hz-codecard { width: 100%; max-width: 320px; height: 352px; padding: 4px; background: none; box-shadow: none; border-radius: 0; }
.hz-codecard-wrap.is-v3 .hz-qr { width: 200px; height: 200px; }
.hz-codecard-wrap.is-v3 .hz-codecard-meta { white-space: nowrap; }
.hz-codecard-wrap.is-v3 .hz-codecard-meta .hz-link { font-weight: 600; color: var(--hz-ink); }
.hz-codecard-wrap.is-v3 .hz-codecard-hint { margin: 0; font-size: 13px; }
.hz-codecard-swap { min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--hz-r-pill); background: none; color: #17211F; font: 600 15px var(--hz-font); white-space: nowrap; cursor: pointer; }
.hz-codecard-swap:hover { background: #E9F3F0; }
@media (max-width: 999px), (min-width: 1000px) and (max-height: 524px) {
  .hz-codecard-wrap.is-v3 .hz-codecard { height: 280px; }
  .hz-codecard-wrap.is-v3 .hz-qr { width: 140px; height: 140px; }
  .hz-codecard-wrap.is-v3 .hz-codecard-hint { display: none; }
}
@media (min-width: 1000px) and (max-height: 524px), (max-width: 999px) and (max-height: 699px) {
  .hz-codecard-wrap.is-v3 .hz-codecard { height: 240px; }
  .hz-codecard-wrap.is-v3 .hz-qr { width: 120px; height: 120px; }
}
@media (max-height: 639px) {
  .hz-codecard { height: 300px; }
  .hz-qr { width: 150px; height: 150px; }
  .hz-codecard-expired { width: 180px; height: 180px; }
}

/* ------------------------------------------------------------ composer */

.hz-stage { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: var(--hz-r-stage); background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); min-width: 0; }
.hz-composer-text {
  width: 100%; min-height: 64px; resize: none; border: 0; outline: none; background: none; color: var(--hz-ink);
  font: 400 24px/1.4 var(--hz-font);
}
.hz-composer-text::placeholder { color: var(--hz-hint); }
.hz-well {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: 180px; padding: 18px; border-radius: var(--hz-r-card); background: var(--hz-pool); color: var(--hz-slate-2);
  transition: box-shadow var(--hz-d-press) var(--hz-ease-out), background-color var(--hz-d-press) var(--hz-ease-out);
}
.hz-well.is-drag { box-shadow: inset 0 0 0 3px var(--hz-coral); background: color-mix(in srgb, var(--hz-coral) 12%, var(--hz-pool)); color: var(--hz-ink); }
.hz-well.has-files { align-items: stretch; justify-content: flex-start; }
.hz-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.hz-chip-file {
  position: relative; display: flex; flex-direction: column; gap: 6px; width: 150px; padding: 8px; box-sizing: border-box;
  border-radius: var(--hz-r-md); background: var(--hz-cloud); animation: hz-rise 280ms var(--hz-ease-out);
}
.hz-chip-thumb { height: 84px; border-radius: 14px; background: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 8px, var(--hz-stripe-b) 8px 16px); background-size: cover; background-position: center; }
.hz-chip-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-chip-size { font-size: 12px; color: var(--hz-slate); }
.hz-chip-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--hz-cloud); color: var(--hz-slate-2); cursor: pointer; font-size: 16px; }
.hz-progress { display: flex; align-items: center; gap: 14px; }
.hz-progress-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--hz-pool); overflow: hidden; }
.hz-progress-fill { height: 100%; background: var(--hz-coral); transform-origin: left center; transition: width 200ms linear; }
[dir="rtl"] .hz-progress-fill { transform-origin: right center; }
.hz-progress-fern .hz-progress-fill { background: var(--hz-fern); }
.hz-progress-label { font: 500 14px var(--hz-font); color: var(--hz-slate-2); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ recent tile */

.hz-recent { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hz-recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hz-recent-head h2 { margin: 0; font: var(--hz-heading); }
.hz-recent-head span { font-size: 14px; color: var(--hz-slate); }
.hz-empty { padding: 28px 24px; border: 2px dashed var(--hz-reed); border-radius: var(--hz-r-card); color: var(--hz-slate); }
.hz-empty strong { display: block; margin-bottom: 6px; color: var(--hz-ink); font-size: 17px; font-weight: 600; }
.hz-tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: var(--hz-r-tile); background: var(--hz-cloud); min-width: 0; }
.hz-tile.is-new { animation: hz-dropin 520ms var(--hz-ease-out) both; }
.hz-tile.is-expired { opacity: .55; }
.hz-tile.is-removing { animation: hz-shrink 900ms var(--hz-ease-std) both; overflow: hidden; }
.hz-tile-thumb { height: 120px; border-radius: var(--hz-r-md); background: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 8px, var(--hz-stripe-b) 8px 16px); background-size: cover; background-position: center; }
.hz-tile-team .hz-tile-thumb { background: repeating-linear-gradient(135deg, var(--hz-blush) 0 8px, var(--hz-blush-stripe) 8px 16px); }
.hz-tile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 0 4px; }
.hz-tile-title { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-tile-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hz-slate); }
.hz-tile-team .hz-tile-meta { color: var(--hz-team-text); }
.hz-tile-meta .hz-opened-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hz-fern); }
.hz-tile-meta-text { animation: hz-fade 200ms var(--hz-ease-out); }
.hz-tile-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px 4px; }
.hz-tile-actions .hz-btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
.hz-badge-new { position: absolute; top: 18px; inset-inline-start: 18px; padding: 4px 9px; border-radius: var(--hz-r-pill); background: var(--hz-coral); color: #fff; font: 700 11px/1 var(--hz-font); animation: hz-pop 300ms var(--hz-ease-out) 380ms both; }
.hz-ring { flex: none; width: 26px; height: 26px; transform: rotate(-90deg); }
.hz-ring circle { fill: none; stroke-width: 3; }
.hz-ring .hz-ring-track { stroke: var(--hz-reed); }
.hz-ring .hz-ring-fill { stroke: var(--hz-fern); stroke-linecap: round; transition: stroke 300ms linear; }
.hz-ring.is-last .hz-ring-fill { stroke: var(--hz-coral); }

/* ------------------------------------------------------------ action sheet */

.hz-scrim { position: fixed; inset: 0; z-index: 80; background: var(--hz-scrim); animation: hz-fade 200ms var(--hz-ease-out); }
.hz-sheet {
  position: fixed; z-index: 81; top: 16px; bottom: 16px; inset-inline-end: 16px; width: min(480px, calc(100vw - 32px));
  display: flex; flex-direction: column; border-radius: var(--hz-r-panel); background: var(--hz-cloud); color: var(--hz-ink);
  box-shadow: var(--hz-shadow-lifted); animation: hz-rise 280ms var(--hz-ease-out); overflow: hidden;
}
.hz-sheet:focus { outline: none; }
.hz-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 22px 22px 10px; }
.hz-sheet-context { font-size: 13px; color: var(--hz-slate); overflow-wrap: anywhere; }
.hz-sheet-title { margin: 4px 0 0; font: var(--hz-title); font-size: 24px; }
.hz-sheet-close { width: var(--hz-hit); height: var(--hz-hit); border: 0; border-radius: 50%; background: var(--hz-pool); color: var(--hz-ink); font-size: 20px; cursor: pointer; }
.hz-sheet-body { flex: 1; overflow: auto; padding: 8px 22px 22px; display: flex; flex-direction: column; gap: 14px; animation: hz-fade 200ms var(--hz-ease-out); }
.hz-sheet-foot { padding: 14px 22px 22px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--hz-pool); }
.hz-sheet-grab { display: none; }
@media (max-width: 759px) {
  .hz-sheet {
    top: auto; bottom: 0; inset-inline: 0; width: auto; max-height: calc(92dvh * var(--vz));
    border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .hz-sheet.is-medium { max-height: calc(60dvh * var(--vz)); }
  .hz-sheet-grab { display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--hz-reed); }
}

.hz-tools { display: flex; flex-direction: column; gap: 10px; }
.hz-tool {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; align-items: center; width: 100%;
  padding: 16px 20px; border: 0; border-radius: var(--hz-r-tile); background: var(--hz-mist); color: var(--hz-ink);
  font: inherit; text-align: start; cursor: pointer; transition: box-shadow var(--hz-d-press) var(--hz-ease-out);
}
.hz-tool:hover { box-shadow: 0 0 0 2px var(--hz-coral); }
.hz-tool strong { display: block; font-size: 17px; font-weight: 500; color: var(--hz-ink); }
.hz-tool > span:first-child > span { display: block; font-size: 14px; color: var(--hz-slate); }
.hz-tool-go > span { display: block; line-height: 1; }
.hz-tool-go { width: 40px; height: 40px; border-radius: 50%; background: var(--hz-pool); display: flex; align-items: center; justify-content: center; }
[dir="rtl"] .hz-tool-go, [dir="rtl"] .hz-flip { transform: scaleX(-1); }
.hz-sheet .hz-tool { background: var(--hz-mist); }
.hz-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hz-step { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--hz-slate); }
.hz-step-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hz-reed); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; }
.hz-step.is-active { color: var(--hz-ink); font-weight: 500; }
.hz-step.is-active .hz-step-mark { box-shadow: inset 0 0 0 3px var(--hz-fern); }
.hz-step.is-done { color: var(--hz-ink); }
.hz-step.is-done .hz-step-mark { background: var(--hz-fern); box-shadow: none; animation: hz-pop 300ms var(--hz-ease-out); }
.hz-result-text { margin: 0; padding: 16px 18px; border-radius: var(--hz-r-md); background: var(--hz-mist); font: 400 17px/1.6 var(--hz-font); white-space: pre-wrap; overflow-wrap: anywhere; }
.hz-result-line { display: block; animation: hz-rise 320ms var(--hz-ease-out) both; }
.hz-dest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hz-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--hz-r-pill);
  background: var(--hz-pool); color: var(--hz-ink); font: 500 15px var(--hz-font); cursor: pointer;
}
.hz-chip[aria-pressed="true"] { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-chip-team { background: var(--hz-blush); color: var(--hz-team-text); }
.hz-chip-team[aria-pressed="true"] { background: var(--hz-blush); color: var(--hz-team-text); box-shadow: 0 0 0 2px var(--hz-coral); }
.hz-chip:disabled { color: var(--hz-hint); cursor: not-allowed; }
.hz-sheet-text { width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical; padding: 14px 16px; border: 0; outline: none; border-radius: var(--hz-r-md); background: var(--hz-mist); color: var(--hz-ink); font: 400 16px/1.5 var(--hz-font); }
.hz-sheet-text:focus { box-shadow: 0 0 0 3px var(--hz-coral); }

/* ------------------------------------------------------------ toast */

.hz-toasts { position: fixed; z-index: 90; inset-inline: 0; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.hz-toast {
  max-width: min(560px, calc(100vw - 32px)); padding: 13px 20px; border-radius: var(--hz-r-pill);
  background: var(--hz-ink); color: var(--hz-on-ink); font-size: 15px; line-height: 1.35; box-shadow: var(--hz-shadow-raised);
  pointer-events: auto; animation: hz-rise 240ms var(--hz-ease-out);
}
.hz-toast.is-leaving { animation: hz-toast-out 200ms var(--hz-ease-out) forwards; }
@media (max-width: 759px) { .hz-toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } .hz-toast { border-radius: 12px; } }

/* ------------------------------------------------------------ quota dots */

.hz-quota { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); box-shadow: var(--hz-shadow-nav); font: 500 14px var(--hz-font); color: var(--hz-ink); }
.hz-dots { display: inline-flex; gap: 5px; direction: ltr; }
.hz-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hz-coral); }
.hz-dot.is-used { background: var(--hz-reed); }
.hz-dot.is-spending { animation: hz-dot 420ms var(--hz-ease-out) both; }
.hz-quota-count { font-variant-numeric: tabular-nums; }
@media (max-width: 999px) { .hz-header .hz-quota { display: none; } }
/* Team context uses no Free actions (Q-004): no dots there. */
:root[data-section="team"] .hz-header .hz-quota, :root[data-team-dest] .hz-header .hz-quota { display: none; }

/* ------------------------------------------------------------ header & nav */

.hz-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 84px; max-width: 1360px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; }
/* The NavPill stays in the middle on every screen, whatever the right side
   shows (the allowance is hidden in Team, Settings has Back to Transfer). */
@media (min-width: 760px) {
  .hz-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .hz-header > .hz-brand { justify-self: start; }
  .hz-header > .hz-tools-right { justify-self: end; grid-column: 3; }
}
.hz-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--hz-ink); text-decoration: none; font: 600 21px var(--hz-font); flex: none; }
.hz-brand img { width: 30px; height: 30px; }
.hz-nav { flex: none; display: inline-flex; gap: 2px; padding: 5px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); box-shadow: var(--hz-shadow-nav); }
.hz-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 20px; border-radius: var(--hz-r-pill); color: var(--hz-slate-2); font: 400 16px var(--hz-font); text-decoration: none; }
.hz-nav a:hover { background: var(--hz-pool); }
.hz-nav a[aria-current="page"] { background: var(--hz-ink); color: var(--hz-on-ink); font-weight: 500; }
.hz-nav .icon { width: 18px; height: 18px; }
.hz-tools-right { flex: none; display: flex; align-items: center; gap: 8px; }
/* Settings header (02-screens §B): 76 px, 1100 px column, "← Back to Transfer"
   in place of the NavPill and the allowance. */
.hz-back-pill { display: none; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); color: var(--hz-ink); font: 500 15px var(--hz-font); text-decoration: none; white-space: nowrap; }
.hz-back-pill:hover { background: var(--hz-pool); }
:root[data-settings] .hz-header .hz-nav, :root[data-settings] .hz-header .hz-quota { display: none; }
:root[data-settings] .hz-back-pill { display: inline-flex; }
/* Phones have the bottom navigation; the back link would crowd the header. */
@media (max-width: 520px) { :root[data-settings] .hz-back-pill { display: none; } }
.hz-ctl {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
  border: 0; border-radius: var(--hz-r-pill); background: var(--hz-cloud); color: var(--hz-ink); font: 600 14px var(--hz-font); cursor: pointer; box-shadow: var(--hz-shadow-nav);
}
.hz-ctl-round { width: 40px; padding: 0; }
.hz-ctl-ink { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-ctl .icon { width: 18px; height: 18px; }
.hz-pop {
  position: absolute; z-index: 70; min-width: 240px; padding: 8px; border-radius: var(--hz-r-tile); background: var(--hz-cloud);
  box-shadow: var(--hz-shadow-lifted); animation: hz-rise 200ms var(--hz-ease-out);
}
.hz-pop a, .hz-pop button.hz-pop-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; box-sizing: border-box;
  border: 0; border-radius: 14px; background: none; color: var(--hz-ink); font: 400 15px var(--hz-font); text-align: start; text-decoration: none; cursor: pointer;
}
.hz-pop a:hover, .hz-pop button.hz-pop-item:hover { background: var(--hz-mist); }
.hz-pop hr { height: 1px; margin: 6px 8px; border: 0; background: var(--hz-pool); }
.hz-pop .hz-check { color: var(--hz-coral); font-weight: 700; }
/* Desktop header v3 (02-screens "Desktop header"): 108 high, logo 42 + 27/600
   wordmark, NavPill at 19 px (tabs 13/26, 22 px icons), 52 px controls with
   24 px icons, 1720 scaled px wide. Compact (760–999 px, unscaled): tabs 11/18
   at 17 px, 46 px controls, the wordmark hides and the logo tile stays. */
@media (min-width: 760px) {
  .hz-header { height: 108px; max-width: 1720px; }
  .hz-brand { gap: 12px; font-size: 27px; }
  .hz-brand img { width: 42px; height: 42px; }
  .hz-nav { padding: 6px; }
  .hz-nav a { min-height: 50px; padding: 0 26px; gap: 10px; font-size: 19px; }
  .hz-nav .icon { width: 22px; height: 22px; }
  .hz-ctl { min-width: 52px; height: 52px; padding: 0 16px; font-size: 16px; }
  .hz-ctl-round { width: 52px; padding: 0; }
  .hz-ctl .icon { width: 24px; height: 24px; }
  .hz-quota { min-height: 52px; padding: 0 18px; box-sizing: border-box; font-size: 16px; }
  .hz-dot { width: 10px; height: 10px; }
  .hz-back-pill { min-height: 52px; padding: 0 22px; font-size: 17px; }
}
@media (min-width: 760px) and (max-width: 999px) {
  /* Tablets: three equal columns leave the right one too narrow for the
     language, theme and account buttons, which then cover the nav. A row
     with the nav centred in the free space never overlaps. */
  .hz-header { display: flex; }
  .hz-header > .hz-nav { margin-inline: auto; }
  .hz-nav a { min-height: 44px; padding: 0 18px; font-size: 17px; }
  .hz-ctl { min-width: 46px; height: 46px; }
  .hz-ctl-round { width: 46px; }
  .hz-brand .hz-wordmark { display: none; }
}
.hz-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hz-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 0; border-radius: 16px; background: none; color: var(--hz-ink); font: 500 13px var(--hz-font); cursor: pointer; }
.hz-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--hz-coral); }
.hz-swatch i { width: 44px; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hz-reed); }
.hz-swatch-light i { background: #F2F7F6; }
.hz-swatch-dark i { background: #0F1715; }
.hz-swatch-auto i { background: linear-gradient(135deg, #F2F7F6 50%, #0F1715 50%); }

.hz-bottomnav {
  position: fixed; z-index: 60; inset-inline: 0; bottom: 0; display: none; grid-template-columns: repeat(3, 1fr);
  height: calc(76px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box;
  border-radius: 24px 24px 0 0; background: var(--hz-cloud); box-shadow: 0 -10px 30px -20px rgba(20, 50, 45, .35);
}
.hz-bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--hz-slate); font: 500 12px var(--hz-font); text-decoration: none; }
.hz-bottomnav a > span:first-child { display: flex; align-items: center; justify-content: center; width: 60px; height: 34px; border-radius: var(--hz-r-pill); }
.hz-bottomnav a[aria-current="page"] { color: var(--hz-ink); font-weight: 600; }
.hz-bottomnav a[aria-current="page"] > span:first-child { background: var(--hz-android-pill); }
.hz-bottomnav .icon { width: 22px; height: 22px; }
@media (max-width: 759px) {
  .hz-bottomnav { display: grid; }
  .hz-header, :root[data-settings] .hz-header { height: 52px; padding: 0 20px; }
  .hz-back-pill { padding: 0 14px; font-size: 14px; }
  .hz-header .hz-nav { display: none; }
  .hz-header .hz-ctl { box-shadow: none; }
  .hz-brand { font-size: 18px; }
  .hz-brand img { width: 26px; height: 26px; }
}

/* ------------------------------------------------------------ headline (M24) */

.hz-hero { margin: 0; font-weight: 600; font-size: 44px; line-height: 1.08; letter-spacing: -0.025em; }
.hz-hero > span { display: block; }
.hz-hero-slot { display: inline-grid; vertical-align: bottom; text-align: start; }
.hz-hero-slot > span { grid-area: 1 / 1; justify-self: start; }
.hz-hero-sizer { visibility: hidden; }
.hz-hero-word { color: var(--hz-coral); animation: hz-word 360ms var(--hz-ease-out) both; }
@media (max-width: 599px) {
  .hz-hero { font-size: 36px; }
  .hz-hero-slot { display: grid; }
}

/* ------------------------------------------------------------ hop overlay (M5/M7/M15) */

.hz-hop-layer { position: fixed; inset: 0; z-index: 95; pointer-events: none; }
.hz-ghost {
  position: fixed; width: 60px; height: 48px; margin: -24px 0 0 -30px; border-radius: 12px;
  background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised);
  background-image: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 6px, var(--hz-stripe-b) 6px 12px);
  animation: hz-hopv var(--hz-d-hop) var(--hz-ease-hop) both;
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hz-enter, .hz-tile.is-new, .hz-chip-file, .hz-sheet, .hz-toast, .hz-pop, .hz-result-line, .hz-hero-word,
  .hz-bubble-check, .hz-badge-new, .hz-step.is-done .hz-step-mark, .hz-dot.is-spending, .hz-codecard-body, .hz-qr-lock {
    animation: hz-fade 120ms linear both !important;
  }
  .hz-shake, .hz-bubble.is-landing .hz-bubble-disc { animation: none !important; }
  .hz-tile.is-removing { animation: hz-toast-out 120ms linear both !important; }
  .hz-ghost { display: none; }
  .hz-btn:active { transform: none; }
}
:root[data-motion="reduce"] :is(.hz-enter, .hz-tile.is-new, .hz-chip-file, .hz-sheet, .hz-toast, .hz-pop, .hz-result-line, .hz-hero-word,
  .hz-bubble-check, .hz-badge-new, .hz-step.is-done .hz-step-mark, .hz-dot.is-spending, .hz-codecard-body, .hz-qr-lock) {
  animation: hz-fade 120ms linear both !important;
}
:root[data-motion="reduce"] :is(.hz-shake, .hz-bubble.is-landing .hz-bubble-disc) { animation: none !important; }
:root[data-motion="reduce"] .hz-tile.is-removing { animation: hz-toast-out 120ms linear both !important; }
:root[data-motion="reduce"] .hz-ghost { display: none; }

/* ------------------------------------------------------------ entry / connect (A0–A4, 0d) */

.hz-nav a.has-new, .hz-bottomnav a.has-new > span:first-child { position: relative; }
.hz-nav a.has-new::after, .hz-bottomnav a.has-new > span:first-child::after {
  content: ""; position: absolute; top: 6px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--hz-coral);
}
@media (max-width: 759px) { body.app { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

.hz-entry { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.hz-entry-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.hz-entry-notice[hidden] { display: none; }
.hz-entry-title { white-space: normal; }
.hz-entry-back { align-self: flex-start; color: #B9CDC8; }
/* Phones (stacked halves): the white card leads with Scan, then the two choices. */
.hz-entry-phone { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.hz-entry-phone .hz-btn-ink { min-height: 58px; font-size: 17px; }
.hz-entry-phone-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hz-entry-phone-card { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* Phone, Enter a code / Show my code: the card needs the room, so the
   description above it steps aside (the headline stays). */
@media (max-width: 759px) {
  .hz-split.is-coding .hz-split-body { display: none; }
}
@media (max-width: 759px) and (max-height: 720px) {
  .hz-split.is-coding .hz-split-h1 { font-size: 30px; }
  .hz-split.is-coding { --pad-y: 14px; }
}
@media (max-width: 759px) and (max-height: 620px) {
  .hz-split.is-coding .hz-split-left { display: none; }
}
.hz-entry-phone-back { align-self: flex-start; min-height: 44px; padding: 0 4px; font-size: 16px; font-weight: 600; }
.hz-entry-phone-row .hz-btn { background: #E9F3F0; color: #17211F; }
.hz-entry-phone-row .hz-btn[aria-pressed="true"] { box-shadow: 0 0 0 2px #E46F55; }
/* The Approve card sits inside the white split card. */
.hz-split-card .hz-approve { width: 100%; padding: 0; background: none; box-shadow: none; }

/* M28, connected: "the seam closes" (02-screens "Entry motion"). */
.hz-connected { position: relative; flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 36px; overflow: hidden; }
.hz-connected-half.is-left { background: #17211F; animation: hz-eo-fade 300ms ease-in both; }
.hz-connected-half.is-right { background: #E46F55; animation: hz-eo-fade 300ms ease-in both; }
.hz-connected-iris { position: absolute; inset: 0; background: #17211F; clip-path: circle(0% at 50% 50%); animation: hz-eo-iris 700ms 120ms cubic-bezier(0.6, 0, 0.2, 1) forwards; }
.hz-connected-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px; color: #F2F7F6; text-align: center; }
.hz-connected-row { display: flex; align-items: center; direction: ltr; animation: hz-eo-rise 420ms 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hz-connected-me, .hz-connected-peer { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; font: 600 22px var(--hz-font); }
.hz-connected-me { background: #F2F7F6; color: #17211F; }
.hz-connected-peer { background: #E46F55; color: #17211F; }
.hz-connected-line { width: 80px; height: 3px; background: #E46F55; transform-origin: left; animation: hz-sweep 360ms 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hz-connected-check { position: absolute; right: -4px; bottom: -4px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #46A88C; color: #FFFFFF; font-size: 18px; animation: hz-pop 300ms 1150ms cubic-bezier(0.2, 0.8, 0.2, 1.4) both; }
.hz-connected-title { margin: 0; font: 600 44px/1.1 var(--hz-font); letter-spacing: -0.03em; animation: hz-eo-rise 420ms 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hz-connected-sub { margin: 0; font-size: 17px; color: #B9CDC8; animation: hz-eo-rise 420ms 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes hz-eo-fade { to { opacity: 0; } }
@keyframes hz-eo-iris { to { clip-path: circle(80% at 50% 50%); } }
@keyframes hz-eo-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 859px) { .hz-connected { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr; } .hz-connected-title { font-size: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .hz-connected * { animation: hz-fade 120ms linear both !important; }
  .hz-connected-iris { clip-path: none; }
}
:root[data-motion="reduce"] .hz-connected * { animation: hz-fade 120ms linear both !important; }
:root[data-motion="reduce"] .hz-connected-iris { clip-path: none; }

/* Approve (A3) */
.hz-approve {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(520px, 100%); box-sizing: border-box;
  padding: 28px; border-radius: var(--hz-r-stage); background: var(--hz-cloud); box-shadow: var(--hz-shadow-lifted); text-align: center;
}
.hz-approve-bubble { width: 88px; height: 88px; border-radius: 50%; background: var(--hz-reed); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.hz-approve h2 { margin: 0; font: var(--hz-title); font-size: 24px; overflow-wrap: anywhere; }
.hz-approve p { margin: 0; color: var(--hz-slate-2); font-size: 15px; }
.hz-approve-code strong { margin-inline-start: 6px; color: var(--hz-ink); font-size: 17px; letter-spacing: .08em; }
.hz-radios { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 4px 0 0; padding: 0; border: 0; }
.hz-radio-row { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--hz-r-md); background: var(--hz-mist); text-align: start; cursor: pointer; }
.hz-radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.hz-radio-dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hz-dashed); box-sizing: border-box; }
.hz-radio-row input:checked + .hz-radio-dot { box-shadow: inset 0 0 0 6px var(--hz-coral); }
.hz-radio-row input:focus-visible + .hz-radio-dot { outline: 3px solid var(--hz-coral); outline-offset: 3px; }
.hz-radio-row strong { display: block; font-size: 15px; font-weight: 600; }
.hz-radio-row span span { display: block; font-size: 13px; color: var(--hz-slate); }
.hz-approve-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }

/* Linked (A4 / M3) */
.hz-linked { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hz-linked p { margin: 0; font-size: 17px; color: var(--hz-slate-2); }
.hz-linked-row { display: flex; align-items: center; }
.hz-linked-line { display: block; width: clamp(60px, 14vw, 120px); height: 4px; border-radius: 2px; background: var(--hz-reed); overflow: hidden; }
.hz-linked-line > span { display: block; height: 100%; background: var(--hz-fern); transform-origin: left center; animation: hz-fillx 800ms var(--hz-ease-out) both; }
[dir="rtl"] .hz-linked-line > span { transform-origin: right center; }
.hz-linked-peer { position: relative; width: 104px; height: 104px; border-radius: 50%; background: var(--hz-reed); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.hz-linked-peer .hz-bubble-check { width: 34px; height: 34px; top: -4px; inset-inline-end: -4px; animation-delay: 700ms; }
.hz-linked .hz-bubble-self { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hz-linked-line > span { animation: hz-fade 120ms linear both; } }
:root[data-motion="reduce"] .hz-linked-line > span { animation: hz-fade 120ms linear both; }
.hz-linked .hz-bubble-name { display: none; }

/* ------------------------------------------------------------ transfer workspace (A5) */

.hz-transfer { width: 100%; max-width: 1360px; margin: 0 auto; padding: 8px 32px 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.hz-transfer-grid { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.hz-transfer-grid > .hz-stage { flex: 1 1 560px; }
.hz-transfer-recent { flex: 1 1 300px; min-width: 0; }
.hz-transfer-recent .hz-recent { max-height: calc(calc(100dvh * var(--vz)) - var(--app-header-h, 84px) - 60px); overflow: auto; padding: 2px; }
.hz-preview-img { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: var(--hz-r-md); background: var(--hz-mist); }
.hz-preview-actions { gap: 10px; }
.hz-save24 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--hz-r-md); background: var(--hz-mist); cursor: pointer; }
.hz-save24 strong { display: block; font-size: 15px; font-weight: 600; }
.hz-save24 span span { display: block; font-size: 13px; color: var(--hz-slate); }
.hz-save24:focus-visible { outline: 3px solid var(--hz-coral); outline-offset: 2px; }
.hz-pro-chip { padding: 4px 10px; border-radius: var(--hz-r-pill); background: var(--hz-ink); color: var(--hz-on-ink); font: 700 12px var(--hz-font); }
@media (max-width: 759px) {
  .hz-transfer { padding: 4px 20px 24px; }
  .hz-transfer-grid { gap: 18px; }
  .hz-stage { padding: 18px; border-radius: var(--hz-r-card); gap: 14px; }
  .hz-composer-text { font-size: 18px; min-height: 48px; }
  .hz-well { min-height: 110px; }
  .hz-dest-row { flex-direction: column; align-items: stretch; }
  .hz-dest-list { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
  .hz-send-wrap { justify-content: flex-end; }
  .hz-send-wrap .hz-kbd { display: none; }
  .hz-send-wrap .hz-btn-send { flex: 1; }
  .hz-transfer-recent .hz-recent { max-height: none; overflow: visible; }
  .hz-transfer-recent .hz-recent > .hz-tile, .hz-transfer-recent .hz-recent { }
}
.hz-toast { display: flex; align-items: center; gap: 14px; }
.hz-toast-action { flex: none; min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--hz-r-pill); background: color-mix(in srgb, var(--hz-on-ink) 14%, transparent); color: var(--hz-on-ink); font: 600 14px var(--hz-font); cursor: pointer; }
.hz-sheet-sub { margin: 6px 0 0; font: var(--hz-heading); font-size: 16px; }
.hz-result-file { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border-radius: var(--hz-r-md); background: var(--hz-mist); }
.hz-result-file strong { display: block; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.hz-result-file span { font-size: 13px; color: var(--hz-slate); }
.hz-result-thumb { position: relative; width: 72px; height: 88px; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 8px, var(--hz-stripe-b) 8px 16px); background-size: cover; background-position: center; animation: hz-rise 600ms var(--hz-ease-out); }
.hz-result-thumb .hz-bubble-check { top: -8px; inset-inline-end: -8px; }

/* ------------------------------------------------------------ Boomerang (A6) */

.hz-boom { width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 32px 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; }
.hz-boom-head { text-align: center; display: flex; flex-direction: column; gap: 6px; }
.hz-boom-head h1 { margin: 0; font: var(--hz-title); font-size: 36px; letter-spacing: -0.02em; }
.hz-boom-head p { margin: 0 auto; max-width: 560px; color: var(--hz-slate-2); font-size: 17px; }
.hz-boom-pick { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--hz-r-stage); background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
.hz-boom-well { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 24px; border-radius: var(--hz-r-card); background: var(--hz-pool); text-align: center; }
.hz-boom-well strong { font-size: 19px; font-weight: 600; }
.hz-boom-well > span { color: var(--hz-slate-2); }
.hz-boom-well.is-drag { box-shadow: inset 0 0 0 3px var(--hz-coral); background: color-mix(in srgb, var(--hz-coral) 12%, var(--hz-pool)); }
.hz-boom-cols { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.hz-boom-file { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--hz-r-tile); background: var(--hz-cloud); }
.hz-boom-file strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.hz-boom-file > span { font-size: 13px; color: var(--hz-slate); }
.hz-boom-file .hz-link { align-self: flex-start; font-size: 14px; min-height: 36px; }
.hz-boom-thumb { height: 200px; border-radius: var(--hz-r-md); background: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 8px, var(--hz-stripe-b) 8px 16px); background-size: cover; background-position: center; overflow: hidden; }
.hz-boom-textpeek { display: block; padding: 12px; font-size: 13px; line-height: 1.5; color: var(--hz-slate-2); white-space: pre-wrap; }
.hz-boom-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hz-boom-flow { display: flex; flex-direction: column; gap: 14px; }
.hz-boom-flow .hz-tool { background: var(--hz-cloud); padding: 18px 22px; }
.hz-boom-foot { display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.hz-boom-foot:empty { display: none; }
@media (max-width: 759px) {
  .hz-boom { padding: 4px 20px 24px; gap: 16px; }
  .hz-boom-head h1 { font-size: 28px; }
  .hz-boom-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hz-boom-thumb { height: 120px; }
  .hz-boom-well { min-height: 200px; }
}

/* ------------------------------------------------------------ inputs */

.hz-input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 16px; border: 0; outline: none; border-radius: 16px; background: var(--hz-pool); color: var(--hz-ink); font: 400 16px var(--hz-font); }
.hz-input:focus { box-shadow: 0 0 0 3px var(--hz-coral); }
.hz-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--hz-slate-2); }

/* ------------------------------------------------------------ Team (A7) */

.hz-team { width: 100%; max-width: 1360px; margin: 0 auto; padding: 8px 32px 40px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.hz-team-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hz-team-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.hz-team-bubble { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hz-blush); color: var(--hz-team-text); font-size: 14px; font-weight: 600; }
.hz-team-bubble-lg { width: 104px; height: 104px; font-size: 18px; }
.hz-team-head h1 { margin: 0; font: 600 30px/1.15 var(--hz-font); overflow-wrap: anywhere; }
.hz-team-role { margin: 2px 0 0; color: var(--hz-team-text); font-size: 15px; }
.hz-team-shared { margin: 6px 0 0; font: var(--hz-heading); }
.hz-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.hz-people { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--hz-r-panel); background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
.hz-people-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hz-people-head h2 { margin: 0; font: var(--hz-heading); }
.hz-people-head span { font-size: 14px; color: var(--hz-slate); }
.hz-seats { display: flex; gap: 4px; }
.hz-seats span { flex: 1; height: 8px; border-radius: 4px; background: var(--hz-seat-free); }
.hz-seats span.is-used { background: var(--hz-clay); transform-origin: left center; animation: hz-fillx 260ms var(--hz-ease-out) both; }
[dir="rtl"] .hz-seats span.is-used { transform-origin: right center; }
.hz-people-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hz-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hz-person-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hz-pool); font-weight: 600; }
.hz-person-text { min-width: 0; }
.hz-person-text strong { display: block; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-person-text span { font-size: 13px; color: var(--hz-slate); }
.hz-person-x { font-size: 13px; font-weight: 500; color: var(--hz-slate-2); min-height: 44px; }
.hz-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.hz-people-note { margin: 0; font-size: 13px; color: var(--hz-slate); line-height: 1.45; }
.hz-people-manage { align-self: flex-start; font-size: 14px; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .hz-seats span.is-used { animation: none; } }
:root[data-motion="reduce"] .hz-seats span.is-used { animation: none; }

.hz-disc { width: 100%; max-width: 1080px; margin: 0 auto; padding: 8px 32px 24px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: center; flex: 1 0 auto; }
.hz-disc-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.hz-disc-title { margin: 0; font: 600 44px/1.08 var(--hz-font); letter-spacing: -0.025em; }
.hz-price-facts { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hz-price-fact { display: flex; gap: 10px; align-items: baseline; }
.hz-price-fact strong { color: var(--hz-clay); font-size: 20px; font-weight: 600; min-width: 64px; }
.hz-price-fact span { color: var(--hz-slate-2); }
.hz-disc-more { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.hz-disc-more summary { cursor: pointer; list-style: none; }
.hz-disc-card { padding: 28px; border-radius: var(--hz-r-stage); background: var(--hz-cloud); box-shadow: var(--hz-shadow-lifted); }
.hz-disc-preview { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--hz-slate-2); }
.hz-disc-extra { max-width: 1080px; margin: 0 auto; padding: 0 32px 24px; box-sizing: border-box; }
.hz-join { display: flex; flex-direction: column; gap: 12px; }
.hz-join h2 { margin: 0; font: var(--hz-title); font-size: 24px; }
.hz-join p { margin: 0; color: var(--hz-slate-2); font-size: 15px; }
.hz-join > .hz-link { align-self: center; font-weight: 400; min-height: 44px; }
@media (max-width: 899px) {
  .hz-team { grid-template-columns: minmax(0, 1fr); }
  .hz-disc { grid-template-columns: minmax(0, 1fr); min-height: 0; }
}
@media (max-width: 759px) {
  .hz-team { padding: 4px 20px 24px; gap: 18px; }
  .hz-team-head { grid-template-columns: 56px minmax(0, 1fr); }
  .hz-team-head .hz-btn-send { grid-column: 1 / -1; }
  .hz-team-bubble { width: 56px; height: 56px; }
  .hz-team-head h1 { font-size: 24px; }
  .hz-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hz-disc { padding: 4px 20px 24px; gap: 18px; }
  .hz-disc-title { font-size: 32px; }
  .hz-disc-card { padding: 20px; }
}
.hz-team-bubble.is-landing { animation: hz-ringpulse 560ms var(--hz-ease-out) 2; }
.hz-btn:disabled:not(.hz-btn-send) { opacity: .45; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .hz-team-bubble.is-landing { animation: none; } }
:root[data-motion="reduce"] .hz-team-bubble.is-landing { animation: none; }
.hz-people-manage { align-self: stretch; text-align: start; white-space: normal; }
@media (max-width: 759px) { .hz-team-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (max-width: 420px) { .hz-team-grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ Settings (B) */

.hz-settings { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 32px 64px; box-sizing: border-box; }
.hz-settings-top { position: sticky; top: var(--app-header-h, 76px); z-index: 20; display: flex; flex-direction: column; padding: 0 0 14px; background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(12px); }
.hz-chips-row { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hz-anchor-chip { flex: none; padding: 8px 14px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); color: var(--hz-ink); font: 400 15px var(--hz-font); text-decoration: none; white-space: nowrap; }
.hz-anchor-chip[aria-current] { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-settings-body { display: flex; flex-direction: column; gap: 72px; padding-top: 24px; }
.hz-set-section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 140px; }
.hz-set-section > h2 { margin: 0; font: 600 36px/1.15 var(--hz-font); letter-spacing: -0.02em; }
.hz-set-sub { margin: -6px 0 4px; font-size: 16px; color: var(--hz-slate-2); max-width: 680px; }
.hz-set-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--hz-r-panel); background: var(--hz-cloud); }
.hz-set-card p { margin: 0; }
.hz-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--hz-pool); }
.hz-set-row:last-child { border-bottom: 0; }
.hz-set-row.is-removing { animation: hz-shrink 900ms var(--hz-ease-std) both; overflow: hidden; }
.hz-set-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hz-set-row-main strong { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.hz-set-row-main span { font-size: 14px; color: var(--hz-slate); }
.hz-set-row-end { flex: none; }
.hz-set-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hz-set-inline .hz-input { flex: 1 1 220px; }
.hz-set-note { margin: 0; font-size: 14px; color: var(--hz-slate); line-height: 1.5; }
.hz-set-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hz-set-plan > strong { font-size: 22px; font-weight: 600; }
.hz-set-plan > span { font-size: 14px; color: var(--hz-slate); flex-basis: 100%; }
.hz-set-verified { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hz-badge-ok { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--hz-r-pill); background: var(--hz-success-bg); color: var(--hz-success-text); font: 600 13px var(--hz-font); align-self: flex-start; }
.hz-switch-row { cursor: pointer; }
.hz-switch-row input { width: 44px; height: 26px; accent-color: var(--hz-coral); }
.hz-check-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hz-slate-2); min-height: 44px; }
.hz-check-row input { width: 20px; height: 20px; accent-color: var(--hz-coral); }
.hz-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.hz-price-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--hz-r-panel); background: var(--hz-cloud); }
.hz-price-card h3 { margin: 0; font: var(--hz-heading); }
.hz-price { margin: 0; font: 600 34px/1 var(--hz-font); }
.hz-price span { font-size: 15px; font-weight: 400; color: var(--hz-slate); }
.hz-price-alt { margin: -6px 0 0; font-size: 14px; color: var(--hz-slate); }
.hz-price-card ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--hz-slate-2); font-size: 15px; }
.hz-price-card > .hz-btn, .hz-price-card > .hz-notice, .hz-price-card > .hz-badge-ok, .hz-price-card > .hz-price-actions { margin-top: auto; }
.hz-price-actions { display: flex; flex-direction: column; gap: 10px; }
.hz-price-signin { align-self: center; font-size: 14px; }
.hz-price-pro .hz-price-signin { color: color-mix(in srgb, var(--hz-on-ink) 85%, transparent); }
.hz-price-pro { background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-price-pro .hz-price span, .hz-price-pro .hz-price-alt, .hz-price-pro ul { color: color-mix(in srgb, var(--hz-on-ink) 75%, transparent); }
.hz-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.hz-fact-card { padding: 20px; border-radius: var(--hz-r-tile); background: var(--hz-cloud); }
.hz-fact-card strong { display: block; font: 600 26px var(--hz-font); margin-bottom: 6px; }
.hz-fact-card p { margin: 0; font-size: 14px; color: var(--hz-slate-2); line-height: 1.5; }
.hz-help-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; }
.hz-faq { display: flex; flex-direction: column; gap: 8px; }
/* The whole card opens it: the padding belongs to the summary, not the details. */
.hz-faq details { padding: 0; border-radius: var(--hz-r-md); background: var(--hz-cloud); }
.hz-faq summary { cursor: pointer; font-weight: 600; min-height: 28px; padding: 14px 18px; border-radius: inherit; }
.hz-faq p { margin: 0; padding: 0 18px 14px; color: var(--hz-slate-2); line-height: 1.55; font-size: 15px; }
.hz-legal-more { width: auto; min-height: 44px; }
.hz-legal { display: grid; grid-template-columns: 220px minmax(0, 640px); gap: 28px; align-items: start; }
.hz-legal-toc { position: sticky; top: calc(var(--app-header-h, 84px) + 110px); font-size: 14px; }
.hz-legal-toc ol { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.hz-legal-toc a { color: var(--hz-slate-2); text-decoration: none; }
.hz-legal-toc a:hover { color: var(--hz-clay); }
.hz-legal-article { padding: 24px; border-radius: var(--hz-r-panel); background: var(--hz-cloud); line-height: 1.6; }
.hz-legal-article h3 { margin: 0 0 12px; font: var(--hz-title); font-size: 24px; }
.hz-legal-article h4 { margin: 18px 0 6px; font: var(--hz-heading); font-size: 17px; scroll-margin-top: 160px; }
.hz-legal-article p { margin: 0 0 10px; color: var(--hz-slate-2); }
.hz-legal-article dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.hz-legal-article dt { font-weight: 600; }
.hz-legal-article dd { margin: 0; color: var(--hz-slate-2); }
.hz-settings-version { margin: 0; font: 400 12px var(--hz-font-mono); color: var(--hz-hint); }
@media (max-width: 899px) {
  .hz-help-grid, .hz-legal { grid-template-columns: minmax(0, 1fr); }
  .hz-legal-toc { position: static; }
}
@media (max-width: 759px) {
  .hz-settings { padding: 0 20px 40px; }
  .hz-settings-top { top: 0; }
  .hz-settings-body { gap: 48px; }
  .hz-set-section > h2 { font-size: 28px; }
  .hz-set-card, .hz-price-card { padding: 18px; }
  /* Long labels (pl, de) drop the button under its text instead of widening the page. */
  .hz-set-row { flex-wrap: wrap; }
  .hz-set-row-main { flex: 1 1 180px; }
  .hz-set-row-end { flex: 0 1 auto; max-width: 100%; }
  .hz-set-row-end .hz-btn { max-width: 100%; }
}
.hz-price-pro h3, .hz-price-pro .hz-price { color: var(--hz-on-ink); }
.hz-legal-toc ol { list-style: none; padding-inline-start: 0; }
.hz-camera-off { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--hz-r-md); background: var(--hz-blush); color: var(--hz-error-text); }
.hz-camera-off strong { font: var(--hz-heading); }
.hz-camera-off p { margin: 0; line-height: 1.5; }

/* ------------------------------------------------------------ mobile Transfer (C) */

.hz-mconn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 14px 16px; border-radius: var(--hz-r-card); background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
.hz-mconn-main { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.hz-mconn-disc { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hz-ink); color: var(--hz-on-ink); font-weight: 600; box-shadow: var(--hz-ring-selected); }
.hz-mconn-disc.is-team { background: var(--hz-blush); color: var(--hz-team-text); font-size: 12px; }
.hz-mconn-text { min-width: 0; }
.hz-mconn-text strong { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-mconn-text span { font-size: 13px; color: var(--hz-fern); font-weight: 500; }
.hz-mconn-add { width: 44px; height: 44px; border: 2px dashed var(--hz-dashed); border-radius: 50%; background: none; color: var(--hz-slate); font-size: 22px; cursor: pointer; }
.hz-mdock { position: fixed; z-index: 55; inset-inline: 0; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; padding: 10px 20px 10px; background: linear-gradient(to top, var(--canvas) 70%, transparent); }
.hz-mdock-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hz-mdock-q { min-height: 48px; border: 0; border-radius: 18px; background: var(--hz-cloud); color: var(--hz-ink); font: 500 15px var(--hz-font); cursor: pointer; }
.hz-mdock-pill { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; padding: 6px 6px 6px 18px; border-radius: var(--hz-r-card); background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
[dir="rtl"] .hz-mdock-pill { padding: 6px 18px 6px 6px; }
.hz-mdock-input { min-width: 0; min-height: 40px; border: 0; outline: none; background: none; color: var(--hz-ink); font: 400 16px var(--hz-font); }
.hz-mdock-send { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--hz-coral); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; }
.hz-mdock-send:disabled { background: var(--hz-mist); color: var(--hz-hint); cursor: default; }
.hz-mdock-files { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.hz-mdock-file { flex: none; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 6px 6px 6px 12px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); font-size: 13px; }
.hz-mdock-file > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-mdock-file > span:nth-child(2) { color: var(--hz-slate); }
.hz-mdock-file button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--hz-pool); color: var(--hz-slate-2); cursor: pointer; }
.hz-mdock-keep { margin: 4px 0 0; font-size: 12px; color: var(--hz-slate); }
.hz-mdock .hz-progress { padding: 8px 12px; border-radius: 16px; background: var(--hz-cloud); }
@media (max-width: 759px) { body.app:has(.hz-transfer.is-phone) .app-footer { display: none; } }
@media (max-width: 759px) { body:has(.hz-mdock) .hz-toasts { bottom: calc(76px + var(--hz-dock-h, 140px) + 8px + env(safe-area-inset-bottom, 0px)); } }
.hz-tile:not(:has(.hz-tile-thumb)) .hz-badge-new { position: static; align-self: flex-start; order: -1; margin: 4px 4px 0; }
/* Touch screens: every control is at least 44 px (02-screens: 44/48 hit target). */
@media (pointer: coarse) {
  .hz-ctl { height: 44px; min-width: 44px; }
  .hz-ctl-round { width: 44px; }
  .hz-tile-actions .hz-btn, .hz-transfer.is-phone .hz-tile-actions .hz-btn { min-height: 44px; }
  .hz-chip-x { width: 44px; height: 44px; top: 0; inset-inline-end: 0; }
  .hz-mdock-file button { width: 44px; height: 44px; }
  .hz-anchor-chip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
}
@media (pointer: coarse) {
  .hz-brand { min-height: 44px; }
  .hz-mdock-input { min-height: 44px; }
}

/* Q-018: white on the dark-theme coral is under 3:1, so send text is dark there. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hz-btn-send:not(:disabled) { color: var(--hz-on-ink); } }
:root[data-theme="dark"] .hz-btn-send:not(:disabled) { color: var(--hz-on-ink); }

/* An unpacked ZIP in the result view: one row per file. */
.hz-result-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; }
.hz-result-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hz-pool); }
.hz-result-list li:last-child { border-bottom: 0; }
.hz-result-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hz-result-list li > span:nth-child(2) { color: var(--hz-slate); font-size: 13px; }

/* Organise PDF pages: thumbnails in a grid; each page has its own buttons. */
.qa-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; margin: 8px 0 12px; padding: 0; list-style: none; }
.qa-page { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--hz-pool); cursor: grab; }
.qa-page.is-dragging { opacity: .5; }
.qa-page.is-over { box-shadow: 0 0 0 3px var(--hz-coral) inset; }
.qa-page.is-removed .qa-page-thumb { opacity: .3; }
.qa-page.is-removed .qa-page-name { text-decoration: line-through; color: var(--hz-slate); }
.qa-page-thumb { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; background: var(--hz-cloud); }
.qa-page-thumb img { max-width: 100%; max-height: 100%; transition: transform var(--hz-d-press) var(--hz-ease-out); }
.qa-page.is-blank .qa-page-thumb { border: 2px dashed var(--hz-dashed, #C9D6D2); }
.qa-page-name { font-size: 13px; font-weight: 500; text-align: center; }
.qa-page-tools { display: flex; justify-content: center; gap: 2px; }
.qa-page-tools .btn { min-width: 32px; font-size: 18px; line-height: 1; }
.qa-pages-empty { margin: 0 0 8px; color: var(--hz-error-text); }
@media (pointer: coarse) { .qa-page-tools .btn { min-width: 44px; min-height: 44px; } .qa-pages { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

/* Sign a PDF: the drawing pad, then the page with the signature on it. */
.qa-sign-pad { display: block; width: 100%; aspect-ratio: 3 / 1; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--hz-pool); touch-action: none; cursor: crosshair; }
.qa-sign-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 12px; }
/* The whole page fits on screen (signatures usually go at the bottom). */
.qa-sign-stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; touch-action: none; cursor: crosshair; }
.qa-sign-stage > img:first-child { display: block; width: auto; max-width: 100%; max-height: min(calc(52vh * var(--vz)), 560px); border-radius: 8px; box-shadow: 0 0 0 1px var(--hz-reed); background: #FFFFFF; }
.qa-sign-controls input[type="range"] { accent-color: var(--hz-ink); width: 100%; min-height: 44px; }
.qa-sign-mark { position: absolute; transform: translate(-50%, -50%); pointer-events: none; outline: 1px dashed var(--hz-coral); }
.qa-redact-layer { position: absolute; inset: 0; }
.qa-redact-box { position: absolute; background: #000000; outline: 2px solid var(--hz-coral); }
.qa-redact-box.is-draft { background: rgba(0, 0, 0, 0.55); }
.qa-redact-count { margin: 8px 0 0; color: var(--hz-slate); font-size: 14px; text-align: center; }

/* ------------------------------------------------------------ split panel (start pages v3) */
/* 02-screens "ENTRY PAGE and TEAM DISCOVERY", "Split panel fit rules",
   "Facts list + one accent action", "Seam path". Lengths are scaled px; the
   media queries below are real px: compact = scaled width < 1000 or scaled
   height < 700, i.e. (max-width: 999px) or, with the 0.75 scale, height < 525. */
.hz-split {
  --tone: #E46F55; --split-ink: #17211F; --lp: 56px; --pad-y: 40px;
  flex: 1 1 0; min-height: 0; position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: 36px; overflow: hidden;
}
.hz-split.is-boomerang { --tone: #5BB89B; }
.hz-split.is-team { --tone: #F0B4A3; }
@media (min-width: 860px) { .hz-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); } }
.hz-split-left, .hz-split-right { min-height: 0; display: flex; flex-direction: column; justify-content: safe center; box-sizing: border-box; padding-block: var(--pad-y); }
.hz-split-left { background: var(--split-ink); color: #F2F7F6; padding-inline: var(--lp); }
/* A half whose content outgrows it (an opened form on a phone) scrolls inside
   itself; the panel keeps its size. Centered content stays reachable. */
.hz-split-left, .hz-split-right { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.hz-split-left::-webkit-scrollbar, .hz-split-right::-webkit-scrollbar { display: none; }
.hz-split-left > .hz-split-text { margin-block: auto; }
.hz-split-right { background: var(--tone); align-items: center; gap: 20px; padding-inline: var(--lp); }
@media (min-width: 860px) {
  /* Each half's content sits in the middle of its half; the seam side keeps 132 clear. */
  .hz-split-left { padding-inline-start: max(var(--lp), calc(50% - 310px)); padding-inline-end: max(132px, calc(50% - 310px)); }
  .hz-split-right { padding-inline-start: max(132px, calc(50% - 210px)); padding-inline-end: max(var(--lp), calc(50% - 210px)); }
}
.hz-split-text { display: flex; flex-direction: column; gap: 20px; max-width: 620px; min-width: 0; }
.hz-split-h1 { margin: 0; color: #F2F7F6; font: 600 72px/1 var(--hz-font); letter-spacing: -0.04em; }
.hz-split-h1 > span { display: block; white-space: nowrap; }
.hz-split-slot { display: inline-grid; vertical-align: bottom; text-align: start; color: var(--tone); }
.hz-split-slot > span { grid-area: 1 / 1; justify-self: start; }
.hz-split-sizer { visibility: hidden; }
.hz-split-word { animation: hz-word 360ms var(--hz-ease-out) both; }
.hz-split-word.is-still { animation: none; }
.hz-split-body { margin: 0; max-width: 24em; font-size: 19px; line-height: 1.5; color: #B9CDC8; text-wrap: pretty; }
.hz-split-facts { display: flex; flex-direction: column; max-width: 460px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(242, 247, 246, 0.1); }
.hz-split-facts li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(242, 247, 246, 0.1); font-size: 16px; line-height: 1.4; color: #B9CDC8; }
.hz-split-facts b { color: #F2F7F6; font-weight: 600; }
.hz-split-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); transform: translateY(-2px); }
.hz-split-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; padding-top: 4px; }
.hz-split-pill { flex: none; white-space: nowrap; height: 56px; padding: 0 28px; border: 0; border-radius: var(--hz-r-pill); background: var(--tone); color: #17211F; font: 600 17px var(--hz-font); cursor: pointer; }
.hz-split-pill:active { transform: scale(0.97); }
.hz-split-link { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; border: 0; background: none; color: #F2F7F6; font: 600 17px var(--hz-font); white-space: nowrap; cursor: pointer; }
.hz-split-link:hover { color: var(--tone); }
.hz-split-pill:focus-visible, .hz-split-link:focus-visible { outline: 3px solid #F2F7F6; outline-offset: 3px; }
.hz-split-card { width: 100%; max-width: 380px; box-sizing: border-box; padding: 32px 20px; border-radius: 40px; background: #FFFFFF; color: #17211F; box-shadow: 0 40px 80px -40px rgba(20, 50, 45, 0.45); }
.hz-split.is-team .hz-split-card { max-width: 400px; }
.hz-split-card:empty { display: none; }
.hz-split-close { margin: 0; font: 600 40px/1.1 var(--hz-font); letter-spacing: -0.03em; color: #17211F; text-align: center; }
/* Compact: narrower than 1000 scaled px, or shorter than 700. */
@media (max-width: 999px), (min-width: 1000px) and (max-height: 524px) {
  .hz-split { --lp: 40px; --pad-y: 28px; }
  .hz-split-h1 { font-size: 52px; }
  .hz-split-body { font-size: 16px; }
  .hz-split-pill { height: 48px; padding: 0 22px; font-size: 15px; }
  .hz-split-link { font-size: 15px; }
  .hz-split-card { padding: 16px; }
  .hz-split-close { font-size: 28px; }
  .hz-split-text { gap: 14px; }
}
/* Short: under 700 scaled px tall. */
@media (min-width: 1000px) and (max-height: 524px), (max-width: 999px) and (max-height: 699px) {
  .hz-split { --lp: 32px; --pad-y: 20px; }
  .hz-split-h1 { font-size: 44px; }
  .hz-split-right { gap: 12px; }
}
/* Facts hide under 760 wide or 640 tall; body and closing line under 640 tall. */
@media (max-width: 759px), (min-width: 1000px) and (max-height: 479px), (max-width: 999px) and (max-height: 639px) {
  .hz-split-facts { display: none; }
}
@media (min-width: 1000px) and (max-height: 479px), (max-width: 999px) and (max-height: 639px) {
  .hz-split-body, .hz-split-close { display: none; }
}
:root[data-theme="dark"] .hz-split.is-transfer { --tone: #C4604A; }
:root[data-theme="dark"] .hz-split.is-boomerang { --tone: #3A8E75; }
:root[data-theme="dark"] .hz-split.is-team { --tone: #B8735F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hz-split.is-transfer { --tone: #C4604A; }
  :root:not([data-theme="light"]) .hz-split.is-boomerang { --tone: #3A8E75; }
  :root:not([data-theme="light"]) .hz-split.is-team { --tone: #B8735F; }
}

/* The seam: dashed paths with arrows; white file cards ride them. */
.hz-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; pointer-events: none; }
.hz-seam-svg { position: absolute; top: 0; max-width: none; overflow: visible; }
.hz-seam-path { fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-dasharray: 14 10; stroke-linecap: round; filter: drop-shadow(0 1px 1px rgba(23, 33, 31, 0.45)); }
.hz-seam-arrow { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hz-seam-ride { position: absolute; left: 0; offset-rotate: 0deg; offset-anchor: 50% 50%; }
.hz-seam-card { display: flex; align-items: center; gap: 10px; width: max-content; padding: 10px 14px 10px 10px; border-radius: 14px; background: #FFFFFF; color: #17211F; white-space: nowrap; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.5); }
.hz-seam-photo { width: 42px; height: 42px; border-radius: 8px; background: repeating-linear-gradient(135deg, #F7D9CF 0 6px, #FBE8E2 6px 12px); }
.hz-seam-badge { display: flex; align-items: flex-end; justify-content: center; width: 34px; height: 42px; padding-bottom: 5px; box-sizing: border-box; border-radius: 7px; background: #FDEBE6; color: #A9482F; font: 600 9px var(--hz-font-mono); }
.hz-seam-badge.is-result { background: #E7F4EF; color: #2D7A63; }
.hz-seam-text { display: flex; flex-direction: column; gap: 1px; }
.hz-seam-text strong { font-size: 14px; font-weight: 600; }
.hz-seam-text span { font-size: 12px; color: #5A6966; }
.hz-seam-text span.is-result { color: #2D7A63; }
@keyframes hz-ride { 0% { offset-distance: 0%; opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hz-bm-a { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 49.9% { offset-distance: 100%; opacity: 1; } 50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hz-bm-b { 0%, 49.9% { offset-distance: 100%; opacity: 0; } 50% { offset-distance: 100%; opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 0%; opacity: 0; } }
@keyframes hz-tm-stem { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 49.9% { offset-distance: 100%; opacity: 1; } 50%, 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hz-tm-br { 0%, 49.9% { offset-distance: 0%; opacity: 0; } 50% { offset-distance: 0%; opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hz-seam { display: none; } }
:root[data-motion="reduce"] .hz-seam { display: none; }
/* Phones (02-screens "Phones v3 · Start pages"): the same panel stacked in two
   equal halves; H1 38/600, one short line, 48 px pill, white card min 180,
   closing line 24/600. Footer links live in the person menu on phones. */
@media (max-width: 759px) {
  .hz-split { --lp: 20px; --pad-y: 18px; border-radius: 32px; }
  .hz-split-h1 { font-size: 38px; }
  .hz-split-text { gap: 12px; }
  .hz-split-body { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Button and link stay on one line: on narrower phones they get a little
     smaller with the screen instead of breaking onto two lines. */
  .hz-split-pill { height: 48px; padding: 0 clamp(12px, 3.6vw, 16px); font-size: clamp(13px, 3.75vw, 15px); }
  .hz-split-link { font-size: clamp(13px, 3.75vw, 15px); gap: 6px; }
  .hz-split-actions { gap: 10px clamp(10px, 3vw, 14px); }
  .hz-split-right { gap: 12px; }
  .hz-split-card { min-height: 180px; padding: 16px; border-radius: 28px; display: flex; flex-direction: column; justify-content: center; }
  .hz-split-close { font-size: 24px; }
  .hz-entry-phone-row .hz-btn { white-space: nowrap; padding: 0 10px; font-size: 15px; min-height: 48px; }
  body.app .app-footer { display: none; }
}
/* Boomerang start page: the start page fills the box like the entry panel. */
.hz-boom.is-start { flex: 1 1 0; min-height: 0; max-width: none; padding: 0; }
.hz-boom.is-start .hz-boom-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.hz-boom-start-tools { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 4px 8px; list-style: none; }
.hz-boom-start-tools li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
.hz-boom-start-ico { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #E9F3F0; color: #17211F; font: 700 15px var(--hz-font); }
.hz-boom-start-tools strong { display: block; font-size: 16px; font-weight: 600; }
.hz-boom-start-tools span span { display: block; font-size: 13px; color: #5A6966; }
@media (max-width: 999px), (min-width: 1000px) and (max-height: 524px) { .hz-boom-start-tools li.is-extra { display: none; } }
/* Team discovery v3: the panel fills the box like the entry page. */
.team:has(> .hz-disc-v3) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; max-width: none; padding: 0; }
.hz-disc-v3 { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.hz-split-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hz-split-extra .hz-notice { background: rgba(242, 247, 246, 0.08); color: #B9CDC8; }
.hz-split-link.is-quiet { min-height: 32px; font-size: 15px; font-weight: 500; color: #B9CDC8; }
.hz-split-link.is-quiet:hover { color: #F2F7F6; }
.hz-split-details > summary { list-style: none; cursor: pointer; }
.hz-split-details > summary::-webkit-details-marker { display: none; }
.hz-split-details[open] { padding: 12px; border-radius: 16px; background: rgba(242, 247, 246, 0.06); color: #F2F7F6; }
.hz-split-pill:disabled { cursor: not-allowed; opacity: 0.55; }
.hz-split-link:disabled { cursor: not-allowed; opacity: 0.55; }
/* The white Team card: You, "Open for 10 min", the Team with rings, five seats, two facts. */
.hz-split-card .hz-disc-card { padding: 0; background: none; box-shadow: none; }
.hz-team-scene { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hz-team-scene-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.hz-team-scene-you { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hz-team-scene-you > span { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #17211F; color: #F2F7F6; }
.hz-team-scene-you .icon { width: 16px; height: 16px; }
.hz-team-scene-open { padding: 5px 10px; border-radius: var(--hz-r-pill); background: #E7F4EF; color: #17211F; font-size: 12px; font-weight: 500; white-space: nowrap; }
.hz-team-scene-stage { position: relative; display: grid; place-items: center; width: 164px; height: 164px; }
.hz-team-scene-ring { position: absolute; width: 132px; height: 132px; border-radius: 50%; box-shadow: inset 0 0 0 1px #F2E2DC; }
.hz-team-scene-ring.is-outer { width: 164px; height: 164px; }
.hz-team-scene-team { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #FDEBE6; color: #A9482F; font: 600 17px var(--hz-font); }
.hz-team-scene-seats { display: flex; gap: 10px; }
.hz-team-scene-seats > span { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #E9F3F0; color: #17211F; font: 600 13px var(--hz-font); }
.hz-team-scene-seats > span.is-on { box-shadow: 0 0 0 3px #E46F55 inset; background: #FDEBE6; }
.hz-team-scene-seats > span.is-add { background: none; box-shadow: inset 0 0 0 1px #C9D6D2; color: #5A6966; }
.hz-team-scene-cap { margin: 0; font-size: 13px; color: #5A6966; }
.hz-team-scene-facts { display: flex; flex-direction: column; gap: 10px; width: 100%; margin: 4px 0 0; padding: 0; list-style: none; }
.hz-team-scene-facts li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; line-height: 1.4; color: #3F4B49; }
.hz-team-scene-facts li > span:first-child { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #E7F4EF; color: #2D7A63; font-size: 12px; }
.hz-team-scene-facts li:last-child > span:first-child { background: #FDEBE6; color: #A9482F; }
.hz-team-scene-facts b { color: #17211F; font-weight: 600; }
@media (max-width: 999px), (min-width: 1000px) and (max-height: 524px) {
  .hz-team-scene-stage { width: 120px; height: 120px; }
  .hz-team-scene-ring { width: 100px; height: 100px; }
  .hz-team-scene-ring.is-outer { width: 120px; height: 120px; }
  .hz-team-scene-team { width: 64px; height: 64px; font-size: 14px; }
  .hz-team-scene-seats { gap: 6px; }
  .hz-team-scene-seats > span { width: 34px; height: 34px; }
  .hz-team-scene-facts { display: none; }
}

/* ============================================================ R4: Transfer workspace v3
   "Transfer and Team: two fixed containers": the grid fills the same box as
   the entry split panel. Side by side from 1000 px (scaled ≥ 1100 + 64);
   below that one column and a normal flowing page. */
.hz-transfer:not(.is-phone) { flex: 1 1 auto; max-width: none; padding: 0; gap: 12px; }
.hz-transfer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.hz-transfer-grid > .hz-stage { flex: none; }
.hz-cont-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0 0; }
.hz-cont-head h2 { margin: 0; font: 600 19px/1.3 var(--hz-font); white-space: nowrap; }
.hz-cont-head > span { font-size: 14px; color: var(--hz-slate); white-space: nowrap; }
/* Desktop (75 % scale): small captions stay at about 11 px or more. */
@media (min-width: 1000px) {
  .hz-cont-head > span { font-size: 15px; }
  .hz-boom-start-tools span span { font-size: 15px; }
  .hz-team-scene-open { font-size: 15px; }
  .hz-team-scene-cap { font-size: 15px; }
  .hz-team-scene-facts li { font-size: 15px; }
  .hz-team-scene-you { font-size: 15px; }
}

/* Left container: the composer. */
.hz-stage { gap: 12px; padding: 16px 20px 20px; border-radius: 36px; box-sizing: border-box; min-height: 0; }
.hz-comp-head { display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--hz-pool); }
.hz-comp-dests .hz-dest-list { flex-wrap: wrap; gap: 18px; }
.hz-comp-dests .hz-bubble-name { display: block; max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
.hz-comp-dests .hz-bubble-sub { margin-top: -8px; max-width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-stage .hz-well {
  flex: 1 1 0; min-height: 200px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
  padding: 0; border-radius: 28px; background: var(--hz-mist); color: var(--hz-ink); overflow: hidden;
}
.hz-stage .hz-well.is-drag { box-shadow: none; background: var(--hz-mist); }
.hz-stage .hz-composer-text { flex: 1 1 0; min-height: 90px; padding: 22px 24px; box-sizing: border-box; font-size: 24px; line-height: 1.4; }
.hz-well-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 16px 24px; color: var(--hz-slate); font-size: 15px; }
.hz-well-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-well-choose { flex: none; white-space: nowrap; padding: 11px 18px; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-cloud); color: var(--hz-ink); font: 600 15px var(--hz-font); cursor: pointer; }
.hz-well-choose:hover { background: var(--hz-pool); }
.hz-well-drop {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 28px;
  background: rgba(228, 111, 85, 0.12); box-shadow: inset 0 0 0 3px var(--hz-coral); color: var(--hz-clay, #b4513a); font: 600 20px var(--hz-font); pointer-events: none;
}
.hz-well-drop[hidden] { display: none; }
.hz-tray { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.hz-tray-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; font-size: 13px; color: var(--hz-slate); }
.hz-tray-sum > span { flex: none; white-space: nowrap; }
.hz-tray-sum b { color: var(--hz-ink); font-weight: 600; }
.hz-tray-clear { border: 0; background: none; padding: 4px 0; color: var(--hz-slate-2); font: 600 13px var(--hz-font); cursor: pointer; }
.hz-tray-strip {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; padding-inline-end: 40px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
[dir="rtl"] .hz-tray-strip { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 40px), transparent); }
.hz-tray-strip::-webkit-scrollbar { display: none; }
.hz-tray .hz-chip-file {
  flex: none; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 210px;
  padding: 8px; border-radius: 16px; background: var(--hz-cloud); animation: hz-rise 240ms var(--hz-ease-out);
}
.hz-tray-thumb {
  width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 3px; box-sizing: border-box;
  background: repeating-linear-gradient(135deg, var(--hz-stripe-a) 0 5px, var(--hz-stripe-b) 5px 10px); background-size: cover; background-position: center;
  font: 600 8px var(--hz-font-mono); color: var(--hz-slate);
}
.hz-tray-text { display: flex; flex-direction: column; min-width: 0; }
.hz-tray .hz-chip-name { font-weight: 600; }
.hz-tray .hz-chip-x { position: static; width: 28px; height: 28px; background: none; color: var(--hz-slate); }
.hz-tray .hz-chip-x:hover { background: var(--hz-pool); }
.hz-tray-add { flex: none; width: 60px; border: 1.5px dashed var(--hz-reed); border-radius: 16px; background: none; color: var(--hz-slate-2); font-size: 22px; cursor: pointer; }
.hz-comp-foot { display: flex; justify-content: flex-end; }
.hz-comp-foot .hz-btn-send { min-height: 0; padding: 15px 24px; font-size: 16px; font-weight: 600; white-space: nowrap; }

/* Right container: the list scrolls inside, with soft fades and "↓ n more". */
.hz-list-panel {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  padding: 16px 12px 12px; border-radius: 32px; background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised);
}
.hz-list-panel > .hz-cont-head { padding: 4px 4px 0; }
.hz-list-scroll { display: flex; flex-direction: column; gap: 10px; padding: 0 2px 8px; outline: none; }
.hz-list-more {
  position: absolute; left: 50%; bottom: 16px; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px; padding: 9px 16px; border: 0; border-radius: var(--hz-r-pill);
  background: var(--hz-ink); color: var(--hz-on-ink); font: 600 13px var(--hz-font); white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(20, 50, 45, 0.5); animation: hz-rise 220ms var(--hz-ease-out);
}
.hz-list-more[hidden] { display: none; }
.hz-list-panel .hz-empty { border-radius: 28px; padding: 32px 24px; text-align: center; font-size: 15px; line-height: 1.45; }

/* Tiles on mist inside the white container. */
.hz-list-panel .hz-tile { flex: none; background: var(--hz-mist); border-radius: 22px; }
.hz-tile-thumb { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 18px; }
.hz-tile-row { padding: 2px 6px; }
.hz-tile-text { display: flex; flex-direction: column; min-width: 0; }
.hz-tile-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hz-tile-title { min-width: 0; border: 0; background: none; padding: 0; color: inherit; text-align: start; font: 500 15px/1.35 var(--hz-font); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
span.hz-tile-title { cursor: default; }
.hz-tile-title:is(button):hover { text-decoration: underline; }
.hz-tile .hz-badge-new, .hz-tile:not(:has(.hz-tile-thumb)) .hz-badge-new { position: static; flex: none; order: 0; margin: 0; padding: 3px 8px; }
.hz-tile-meta { min-width: 0; }
.hz-tile-meta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-tile-note { margin-top: 4px; align-self: flex-start; max-width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 10px; background: var(--hz-cloud); color: var(--hz-ink); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.hz-tile-note-by { color: var(--hz-slate); }
.hz-tile-actions .hz-tile-main { flex: 1; min-height: 0; padding: 10px; font-size: 14px; font-weight: 500; }
.hz-tile-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px 6px; }
.hz-tile-chip, .hz-tile-alltools {
  flex: none; white-space: nowrap; padding: 10px 14px; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-pool);
  color: var(--hz-ink); font: 500 14px var(--hz-font); cursor: pointer;
}
.hz-tile-chip:hover { background: var(--hz-reed); }
.hz-tile-alltools { background: none; font-weight: 600; color: var(--hz-slate-2); }
.hz-tile-alltools:hover { background: var(--hz-pool); }
/* Desktop (75 % scale): the item's line, tools and main button at about 11 px or more. */
@media (min-width: 1000px) {
  .hz-tile-meta { font-size: 15px; }
  .hz-tile-chip, .hz-tile-alltools, .hz-tile-actions .hz-tile-main { font-size: 15px; }
  .hz-tile-title.hz-link, .hz-tile-title { font-size: 17px; }
}
/* Touch screens at desktop width (tablets in landscape) get thumb-sized targets. */
@media (min-width: 1000px) and (pointer: coarse) {
  .hz-well-choose, .hz-set-link { min-height: 44px; }
}
.hz-tile-tools-gap { flex: 1 1 0; }
.hz-tile-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; }
.hz-tile-ico .icon { width: 18px; height: 18px; }
.hz-tile-ico.is-team { background: var(--hz-blush); color: var(--hz-team-text); }
.hz-tile-ico.is-team:hover { background: #f9d9cf; }
.hz-tile-ico.is-remove { background: var(--hz-cloud); color: var(--hz-slate); }
.hz-tile-ico.is-remove:hover { background: var(--hz-blush); color: var(--hz-team-text); }
.hz-sheet-note-label { font-size: 13px; font-weight: 600; color: var(--hz-slate); }

@media (min-width: 1000px) {
  .hz-transfer:not(.is-phone) { flex: 1 1 0; min-height: 0; }
  .hz-transfer:not(.is-phone) > .hz-transfer-grid {
    flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1.35fr) minmax(540px, 1fr); grid-template-rows: minmax(0, 1fr); align-items: stretch;
  }
  .hz-transfer-grid > .hz-stage { height: 100%; }
  .hz-transfer-grid .hz-list-scroll {
    flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    --fade-top: #000 0; --fade-bot: #000 100%;
    -webkit-mask-image: linear-gradient(var(--fade-top), var(--fade-bot)); mask-image: linear-gradient(var(--fade-top), var(--fade-bot));
  }
  .hz-transfer-grid .hz-list-scroll::-webkit-scrollbar { display: none; }
  .hz-list-scroll.is-top-fade { --fade-top: #0000 0, #000 18px; }
  .hz-list-scroll.is-bottom-fade { --fade-bot: #000 calc(100% - 36px), #0000 100%; }
  /* The tool row fits one line in English at 540 px; longer languages wrap rather than clip. */
}
@media (max-width: 999px) { .hz-list-more { display: none; } }
/* Short windows (scaled < 700 px tall). */
@media (min-width: 1000px) and (max-height: 524px), (max-width: 999px) and (max-height: 699px) {
  .hz-stage { padding: 14px 18px 18px; gap: 10px; }
  .hz-comp-head { padding-bottom: 12px; }
  .hz-stage .hz-well { min-height: 110px; }
  .hz-stage .hz-composer-text { min-height: 52px; padding: 12px 18px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hz-list-more, .hz-tray .hz-chip-file { animation: none; } }
.hz-sheet .hz-preview-note { background: var(--hz-mist); margin: 0; }
@media (pointer: coarse) {
  .hz-tile-ico { width: 44px; height: 44px; }
  .hz-tile-chip, .hz-tile-alltools { min-height: 44px; box-sizing: border-box; }
  .hz-tray .hz-chip-x { width: 44px; height: 44px; }
  .hz-tile-actions .hz-tile-main { min-height: 44px; }
}
.hz-tile-title.hz-link { display: block; min-height: 0; padding: 0; color: inherit; font: 500 15px/1.35 var(--hz-font); text-decoration: none; }
.hz-tile-title.hz-link:hover { text-decoration: underline; }
/* Touch: a taller hit area for the title (it opens the preview), same look. */
@media (pointer: coarse) { .hz-tile-title.hz-link { padding-block: 9px; margin-block: -9px; } }

/* ============================================================ R5: Team workspace v3
   The same two containers as Transfer ("Team workspace layout"). */
.team:has(> .hz-team-ws) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; max-width: none; padding: 0; }
@media (min-width: 1000px) { .team:has(> .hz-team-ws) { flex: 1 1 0; } }
.hz-stage.is-team .hz-comp-foot {
  flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--hz-pool);
}
.hz-comp-foot-start { min-width: 0; flex: 1 1 auto; }
.hz-stage.is-team .hz-btn-send { height: 56px; padding: 0 28px; font-size: 17px; }
.hz-people-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.hz-person-b { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; text-align: center; }
.hz-person-b-disc {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--hz-reed); color: var(--hz-ink); font: 600 15px var(--hz-font);
}
.hz-person-b-disc.is-sm { flex: none; width: 32px; height: 32px; font-size: 12px; }
.hz-person-b-name { max-width: 72px; font-size: 12px; font-weight: 500; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-person-b-btn { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.hz-person-b.is-invite .hz-person-b-disc { width: 52px; height: 52px; margin: 2px; background: none; border: 2px dashed var(--hz-clay); color: var(--hz-clay); font-size: 22px; font-weight: 400; box-sizing: border-box; }
.hz-person-b.is-invite .hz-person-b-name { color: var(--hz-slate); font-weight: 400; }
.hz-person-b-btn[aria-expanded="true"] .hz-person-b-disc { background: var(--hz-blush); }
.hz-people-seats { align-self: center; font-size: 13px; color: var(--hz-slate); white-space: nowrap; }
.hz-people-opts { align-self: center; border: 0; background: none; padding: 6px 10px; border-radius: var(--hz-r-pill); color: var(--hz-slate-2); font: 600 13px var(--hz-font); white-space: nowrap; cursor: pointer; }
.hz-people-opts:hover, .hz-people-opts[aria-expanded="true"] { background: var(--hz-mist); }
.hz-team-opts { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 22px; background: var(--hz-mist); animation: hz-rise 220ms var(--hz-ease-out); overflow: auto; max-height: 45%; flex: none; }
.hz-team-opts[hidden] { display: none; }
.hz-stage.has-opts .hz-well { min-height: 110px; }
.hz-team-opts-title { font-size: 15px; font-weight: 600; }
.hz-team-opts-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--hz-slate); }
.hz-team-opts .hz-invite { display: flex; gap: 8px; }
.hz-team-opts .hz-input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--hz-pool); color: var(--hz-ink); font: 400 15px var(--hz-font); outline: none; }
.hz-team-opts .hz-input:focus { box-shadow: 0 0 0 3px var(--hz-coral); }
.hz-team-opts-members { display: flex; flex-direction: column; gap: 6px; }
.hz-team-opts-members ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.hz-team-opts-members li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.hz-team-opts-person { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hz-team-opts-person strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-team-opts-person span { font-size: 12px; color: var(--hz-slate); }
.hz-team-opts-remove { border: 0; background: none; padding: 6px 10px; border-radius: var(--hz-r-pill); color: var(--hz-clay); font: 600 13px var(--hz-font); cursor: pointer; }
.hz-team-opts-remove:hover { background: var(--hz-blush); }
.hz-team-opts-manage { align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--hz-slate-2); }
.hz-team-opts-leave { align-self: flex-start; background: var(--hz-cloud); color: var(--hz-clay); }
.hz-team-opts hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--hz-pool); }
.hz-list-panel.is-team .hz-empty { border-color: var(--hz-blush-stripe, #f2d2c9); }
.hz-tile-ico.is-mine { background: var(--hz-cloud); color: var(--hz-slate-2); }
.hz-tile-ico.is-mine:hover { background: var(--hz-pool); color: var(--hz-ink); }
.hz-list-panel.is-landing { animation: hz-ringpulse 560ms var(--hz-ease-out) 2; }
@media (min-width: 1000px) and (max-height: 524px), (max-width: 999px) and (max-height: 699px) {
  .hz-stage.is-team .hz-comp-foot { padding-top: 12px; }
  .hz-person-b { width: 44px; }
  .hz-person-b-disc { width: 40px; height: 40px; font-size: 13px; }
  .hz-person-b.is-invite .hz-person-b-disc { width: 38px; height: 38px; margin: 1px; }
  .hz-person-b-name { display: none; }
  .hz-stage.is-team .hz-btn-send { height: 48px; }
}
@media (max-width: 759px) {
  .hz-team-ws .hz-comp-foot { flex-direction: column; align-items: stretch; }
  .hz-team-ws .hz-send-wrap .hz-btn-send { flex: 1; }
}
@media (pointer: coarse) { .hz-people-opts { min-height: 44px; } .hz-team-opts-remove { min-height: 44px; } }
@media (max-width: 759px) { .hz-cont-head { flex-wrap: wrap; row-gap: 2px; } .hz-cont-head h2 { white-space: normal; } }

/* ============================================================ R6: Boomerang workspace (FINAL)
   The same two containers: "Process on" composer | "Your files". */
.hz-boom:has(.hz-boom-ws) { flex: 1 1 auto; min-height: 0; max-width: none; padding: 0; display: flex; flex-direction: column; }
.hz-boom:has(.hz-boom-ws) .hz-boom-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
@media (min-width: 1000px) {
  .hz-boom:has(.hz-boom-ws), .hz-boom:has(.hz-boom-ws) .hz-boom-main { flex: 1 1 0; }
}
.hz-boom-self { display: flex; align-items: center; gap: 18px; }
.hz-boom-self p { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.45; color: var(--hz-slate); }
.hz-bubble.is-boom { cursor: default; width: 92px; }
.hz-bubble.is-boom .hz-bubble-disc {
  width: 72px; height: 72px; margin: 0; background: #E7F4EF; color: #2D7A63; font-size: 26px; font-weight: 600;
  box-shadow: 0 0 0 4px var(--hz-cloud), 0 0 0 7px var(--hz-fern);
}
.hz-stage.is-boom .hz-btn-send:not(:disabled) { background: #2D7A63; color: #fff; }
.hz-stage.is-boom .hz-btn-send:not(:disabled):hover { background: #256852; }
.hz-tile-badge { flex: none; padding: 3px 8px; border-radius: var(--hz-r-pill); font: 700 11px/1.1 var(--hz-font); }
.hz-tile-badge.is-result { background: #2D7A63; color: #fff; }
.hz-tile-badge.is-type { background: #E7F4EF; color: #2D7A63; font-family: var(--hz-font-mono); }
.hz-tile.is-result .hz-tile-meta { color: #2D7A63; }
.hz-list-panel.is-boom .hz-empty { text-align: center; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hz-tile.is-result .hz-tile-meta, :root:not([data-theme="light"]) .hz-tile-badge.is-type { color: #7FD3B8; }
  :root:not([data-theme="light"]) .hz-tile-badge.is-type, :root:not([data-theme="light"]) .hz-bubble.is-boom .hz-bubble-disc { background: #1E3A32; }
}
:root[data-theme="dark"] .hz-tile.is-result .hz-tile-meta, :root[data-theme="dark"] .hz-tile-badge.is-type { color: #7FD3B8; }
:root[data-theme="dark"] .hz-tile-badge.is-type, :root[data-theme="dark"] .hz-bubble.is-boom .hz-bubble-disc { background: #1E3A32; color: #7FD3B8; }
@media (max-width: 759px) { .hz-boom-self p { display: none; } }
@media (min-width: 1000px) { .hz-sheet { width: var(--hz-sheet-w, min(480px, calc(100vw - 32px))); } }
/* R7: Action sheet Back — a 40 px round ← at the start of the header. */
.hz-sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.hz-sheet-head > div { flex: 1 1 auto; min-width: 0; }
.hz-sheet-close { flex: none; }
.hz-sheet-back { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--hz-mist); color: var(--hz-ink); font-size: 18px; cursor: pointer; }
.hz-sheet-back:hover { background: var(--hz-pool); }
.hz-sheet-back[hidden] { display: none; }
@media (pointer: coarse) { .hz-sheet-back { width: 44px; height: 44px; } }
.hz-tools-group { margin: 6px 4px -4px; font: 600 13px var(--hz-font); color: var(--hz-slate); letter-spacing: .01em; }

/* ============================================================ R9: Settings v3
   Header: the section switcher replaces Transfer · Boomerang · Team. */
.hz-setnav { display: none; }
:root[data-settings] .hz-header .hz-setnav { display: inline-flex; align-items: center; gap: 0; }
:root[data-settings] .hz-back-pill { display: none; }
.hz-setnav a { padding: 0 12px; gap: 8px; }
.hz-setnav .hz-setnav-back { color: var(--hz-slate-2); }
.hz-setnav-back > .hz-flip { font-size: 18px; line-height: 1; }
.hz-setnav-sep { width: 1px; height: 24px; margin: 0 6px; background: var(--hz-reed); }
@media (max-width: 1169px) { .hz-setnav a:not(.hz-setnav-back) .hz-setnav-label { display: none; } }
@media (max-width: 999px) { .hz-setnav .hz-setnav-back .hz-setnav-label { display: none; } .hz-setnav a { padding: 0 12px; } }
@media (min-width: 1275px) { .hz-setnav a { padding: 0 16px; } }
@media (max-width: 759px) { :root[data-settings] .hz-header .hz-setnav { display: none; } }

/* The person-icon menu card (300 px). */
.hz-menu-card { width: 300px; display: flex; flex-direction: column; gap: 2px; }
.hz-menu-who { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hz-pool); }
.hz-menu-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.hz-menu-who strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-menu-who strong + span { font-size: 13px; color: var(--hz-slate); }
.hz-menu-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hz-ink); color: var(--hz-on-ink); }
.hz-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--hz-ink); text-decoration: none; font-size: 15px; }
.hz-menu-item:hover, .hz-menu-item:focus-visible { background: var(--hz-pool); }
button.hz-menu-item { width: 100%; border: 0; background: none; font: inherit; font-size: 15px; text-align: start; cursor: pointer; }
.hz-menu-item .icon { width: 18px; height: 18px; color: var(--hz-slate-2); }

/* The page: two blocks, filling the same box as the start pages. */
.hz-settings.is-v3 { max-width: none; padding: 0; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.hz-settings.is-v3 .hz-settings-top { display: none; position: static; padding: 0; background: none; }
.hz-set3-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.hz-set3 { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.hz-set3-dark {
  display: flex; flex-direction: column; gap: 18px; min-height: 0; box-sizing: border-box; padding: 32px; border-radius: 36px;
  background: #17211F; color: #F2F7F6;
  /* Long languages on short screens: the text scrolls inside the block
     instead of running past its edge. */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.hz-set3-dark::-webkit-scrollbar { display: none; }
/* With the document list (Privacy and legal) the description does not fit
   beside it on narrower or lower desktop screens; the list says enough. */
@media (min-width: 1000px) and (max-width: 1279px), (min-width: 1000px) and (max-height: 820px) {
  .hz-set3-dark:has(.hz-set3-index) .hz-set3-desc { display: none; }
}
.hz-set3-dark h1 { margin: 0; color: #F2F7F6; font: 600 36px/1.15 var(--hz-font); letter-spacing: -0.02em; }
.hz-set3-desc { margin: auto 0 0; font-size: 16px; line-height: 1.55; color: #C2D0CC; }
.hz-set3-version { margin: 0; font: 400 12px var(--hz-font-mono); color: #8A9A96; }
.hz-set3-index ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.hz-set3-index a { display: block; padding: 8px 12px; border-radius: 14px; color: #E5EFEC; font: 500 15px var(--hz-font); text-decoration: none; }
.hz-set3-index a:hover, .hz-set3-index a:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; }
.hz-set3-light .hz-legal-head { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 4px; }
.hz-set3-light .hz-legal-article.hz-set-card { flex: none; scroll-margin-top: 8px; max-width: none; padding: 24px 28px; background: var(--hz-mist); border-radius: 28px; }
.hz-set3-light .hz-legal-article.hz-set-card > * { max-width: 760px; }
.hz-set3-light .hz-legal-article.hz-set-card > section > h3 { margin-top: 20px; }
.hz-set3-switch { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 24px; background: #E5EFEC; }
.hz-set3-switch button { width: 100%; text-align: start; padding: 10px 12px; border: 0; border-radius: 18px; background: none; color: #17211F; font: 500 15px var(--hz-font); cursor: pointer; }
.hz-set3-switch button:hover { background: rgba(255, 255, 255, 0.5); }
.hz-set3-switch button[aria-selected="true"] { background: #fff; font-weight: 600; }
.hz-set3-switch .hz-legal-more { margin-top: 4px; width: 100%; background: #fff; }
.hz-set3-light {
  display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; box-sizing: border-box; padding: 24px; border-radius: 36px;
  background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); overflow: auto; overscroll-behavior: contain;
}
.hz-set3-light .hz-set-card { background: var(--hz-mist); border-radius: 28px; padding: 20px; }
/* Settings is for reading (legal texts, help, notes): under the 75 % desktop
   scale its 13-16 px text rendered at 10-12 px. From 1000 px the contents of
   both blocks render at 25 % more, i.e. about 94 % of their design size.
   Zoom (not font-size) keeps every proportion and the fluid layout. */
@media (min-width: 1000px) {
  .hz-set3-light > *, .hz-set3-desc, .hz-set3-switch, .hz-set3-index, .hz-set3-version { zoom: 1.25; }
}
.hz-set3-light .hz-fact-card { background: var(--hz-mist); }
.hz-set3-light .hz-price-card:not(.hz-price-pro) { background: var(--hz-mist); }
.hz-set3-light .hz-faq details { background: var(--hz-mist); }
.hz-fact-grid.is-five { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; flex: none; }
.hz-set3-light .hz-fact-card { padding: 14px 16px; border-radius: 22px; }
.hz-set3-light .hz-fact-card strong { font-size: 19px; }
.hz-set3-light .hz-fact-card p { font-size: 13px; line-height: 1.45; margin: 4px 0 0; }
.hz-set3-light .hz-legal { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.hz-set3-light .hz-legal-toc { position: sticky; top: 0; }
.hz-set3-light .hz-legal-article { background: none; padding: 0; max-width: 680px; }
.hz-set3-light .hz-legal-article h2 { margin: 0 0 4px; font: 600 22px var(--hz-font); }
.hz-set3-light .hz-legal-article h3 { margin: 18px 0 6px; font: 600 16px var(--hz-font); scroll-margin-top: 12px; }

/* Devices: one row per device with Rename and Remove. */
.hz-set-dev { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--hz-pool); }
.hz-set-dev:first-child { padding-top: 0; }
.hz-set-dev-ava { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--hz-reed); font: 600 14px var(--hz-font); }
.hz-set-dev-ava.is-add { background: none; border: 2px dashed var(--hz-dashed); box-sizing: border-box; color: var(--hz-slate); font-size: 20px; font-weight: 400; }
.hz-set-dev-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hz-set-dev-text strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hz-set-dev-text > span { font-size: 14px; color: var(--hz-slate); }
.hz-set-dev-end { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.hz-set-link { border: 0; background: none; padding: 8px 10px; border-radius: var(--hz-r-pill); color: var(--hz-ink); font: 600 14px var(--hz-font); cursor: pointer; }
.hz-set-link:hover { background: var(--hz-pool); }
.hz-set-rename { max-width: 320px; }
.hz-set-dev.is-removing { animation: hz-shrink 900ms var(--hz-ease-std) both; overflow: hidden; }

@media (min-width: 1000px) {
  .hz-settings.is-v3, .hz-set3-wrap, .hz-set3 { flex: 1 1 0; }
  .hz-set3 { grid-template-columns: minmax(240px, .42fr) 2fr; grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 999px) {
  .hz-set3-desc { margin-top: 0; }
  .hz-set3-light { overflow: visible; }
  .hz-set3-light .hz-legal { grid-template-columns: minmax(0, 1fr); }
  .hz-set3-light .hz-legal-toc { display: none; }
  .hz-set3-index { display: none; }
}
@media (max-width: 759px) {
  .hz-settings.is-v3 { padding: 0 16px 24px; }
  .hz-settings.is-v3 .hz-settings-top { display: flex; flex-direction: row; }
  .hz-anchor-chip { display: inline-flex; align-items: center; gap: 6px; }
  .hz-anchor-chip .icon { width: 16px; height: 16px; }
  .hz-set3-dark { padding: 24px; border-radius: 28px; }
  .hz-set3-dark h1 { font-size: 28px; }
  .hz-set3-light { padding: 16px; border-radius: 28px; }
  .hz-set-dev { flex-wrap: wrap; }
  .hz-set-dev-end { width: 100%; justify-content: flex-start; }
  /* Personal / Shared computer: the whole row, each word on one line. */
  .hz-set-dev-end .hz-seg { flex: 1 1 100%; }
  .hz-set-dev-end .hz-seg button { flex: 1 1 0; overflow-wrap: normal; word-break: normal; }
}
.hz-pop .hz-menu-item { justify-content: flex-start; text-align: start; }

/* ============================================================ v1.5 / v1.6: start pages
   Desktop and phone variants of the same node. */
.hz-phone-only { display: none; }
@media (max-width: 759px) {
  .hz-phone-only { display: revert; }
  div.hz-phone-only { display: block; }
  .hz-desk-only { display: none !important; }
}
/* Transfer start (desktop): "Try it", then "Go Boomerang →" and "About Team →"
   as one group that wraps under the pill as a whole. */
.hz-split-links { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 22px; }
/* Phones (v1.5 §1): the screen is a fixed-height column — header, the panel
   down to the bottom nav with a 12 px gap, the nav. Uses the visible height
   (dvh, falling back to svh and vh), so Safari's toolbars never clip it. */
@media (max-width: 759px) {
  body.app:has(.hz-split) { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
  body.app:has(.hz-split) > .app-main { flex: 1 1 0; min-height: 0; padding: 8px 16px 12px; }
  body.app:has(.hz-split) .app-main > .view { flex: 1 1 0; min-height: 0; }
  /* Two equal halves unless a half's content needs more; the card never shrinks. */
  .hz-split { display: flex; flex-direction: column; }
  .hz-split-left, .hz-split-right { flex: 1 1 0; min-height: auto; overflow: visible; }
  .hz-split-card { flex: none; }
  .hz-split-extra .hz-notice { display: none; }
  .hz-split-extra .hz-split-link.is-quiet { white-space: normal; text-align: start; }
  /* v1.5 §2: the explanation is never cut. */
  .hz-split-body { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: 320px; font-size: 16px; line-height: 1.45; }
  .hz-split.no-close .hz-split-close { display: none; }
  .hz-split-card { min-height: 0; }
}
/* Small phones (under 700 px tall): headline 32, text 14/1.35, gap 8. */
@media (max-width: 759px) and (max-height: 699px) {
  .hz-split-h1 { font-size: 32px; }
  .hz-split-text { gap: 8px; }
  .hz-split-body { display: block; font-size: 14px; line-height: 1.35; }
  .hz-split-close { display: block; font-size: 20px; }
}
/* The colored action pill always uses the tab color with ink text (v1.5 §4). */
.hz-split-pill { color: #17211F; }
/* Team, phones: five seat circles inside the white card. */
.hz-team-seats-phone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; text-align: center; }
.hz-team-seats-row { display: flex; gap: 8px; }
.hz-team-seats-row > span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 2px dashed #F2B9AA; }
.hz-team-seats-row > span.is-you { border: 0; background: #FDEBE6; color: #A9482F; font: 600 12px var(--hz-font); }
.hz-team-seats-phone strong { font-size: 16px; font-weight: 600; color: #17211F; }
.hz-team-seats-phone p { margin: 0; font-size: 13px; color: #5A6966; }
.hz-boom-start-ico svg { width: 20px; height: 20px; }
@media (max-width: 759px) and (max-height: 699px) {
  .hz-boom-start-tools { gap: 6px; padding: 0 4px; }
  .hz-boom-start-tools li { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .hz-boom-start-ico { width: 32px; height: 32px; }
  .hz-boom-start-tools strong { font-size: 15px; }
  .hz-boom-start-tools span span { font-size: 12px; }
  .hz-split-card { padding: 12px; }
  .hz-team-seats-row > span { width: 34px; height: 34px; }
}
@media (max-width: 759px) and (max-height: 699px) { .hz-split { --pad-y: 14px; } .hz-team-seats-phone { gap: 6px; padding: 4px 0; } }

/* ============================================================ R10: Phones v3 workspaces
   Three parts, one screen: the "Send to" / "Process on" card, the list card
   (fills the rest, scrolls inside) and the dock. The page never scrolls. */
.hz-tile-chips { display: contents; }
.hz-tile-kind { display: none; }
@media (max-width: 759px) {
  body.app:has(.hz-pws) { height: 100vh; height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
  body.app:has(.hz-pws) > .app-main { flex: 1 1 0; min-height: 0; padding: 8px 12px 10px; }
  body.app:has(.hz-pws) .app-main > .view { flex: 1 1 0; min-height: 0; }
  body.app:has(.hz-pws) .hz-boom, body.app:has(.hz-pws) .hz-boom-main,
  body.app:has(.hz-pws) .team:has(> .hz-team-ws) { flex: 1 1 0; min-height: 0; }
  .hz-transfer.is-phone { flex: 1 1 0; min-height: 0; max-width: none; padding: 0; gap: 8px; display: flex; flex-direction: column; }
  .hz-pws { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

  /* 1. The top card. */
  .hz-pcard { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 28px; background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
  .hz-pcard .hz-cont-head { padding: 0; flex-wrap: nowrap; }
  .hz-pcard .hz-cont-head h2 { font-size: 17px; white-space: nowrap; }
  .hz-pcard .hz-cont-head > span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
  .hz-pcard-dests .hz-dest-list { flex-wrap: nowrap; overflow-x: auto; gap: 10px; scrollbar-width: none; padding: 4px 2px 2px; }
  .hz-pcard-dests .hz-dest-list::-webkit-scrollbar { display: none; }
  .hz-pcard .hz-bubble { flex: none; width: 72px; gap: 6px; }
  .hz-pcard .hz-bubble-disc { width: 46px; height: 46px; margin: 3px; font-size: 15px; }
  .hz-pcard .hz-bubble[aria-pressed="true"] .hz-bubble-disc { width: 52px; height: 52px; margin: 0; box-shadow: 0 0 0 3px var(--hz-cloud), 0 0 0 5px var(--hz-coral); }
  .hz-pcard .hz-bubble-name { max-width: 72px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; }
  .hz-pcard .hz-bubble-sub { font-size: 11px; margin-top: -4px; }
  .hz-pcard .hz-bubble-badge { display: none; }
  .hz-pcard .hz-boom-self { gap: 12px; }
  .hz-pcard .hz-boom-self p { display: block; font-size: 13px; }
  .hz-pcard .hz-bubble.is-boom .hz-bubble-disc { width: 52px; height: 52px; font-size: 20px; box-shadow: 0 0 0 3px var(--hz-cloud), 0 0 0 5px var(--hz-fern); }
  .hz-pcard-below { padding-top: 8px; border-top: 1px solid var(--hz-pool); }
  .hz-pcard-below[hidden] { display: none; }
  .hz-ppeople { display: flex; align-items: center; gap: 10px; }
  .hz-ppeople-stack { display: flex; }
  .hz-ppeople-stack > span { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-inline-start: -6px; border-radius: 50%; background: var(--hz-reed); box-shadow: 0 0 0 2px var(--hz-cloud); font: 600 11px var(--hz-font); }
  .hz-ppeople-stack > span:first-child { margin-inline-start: 0; }
  .hz-ppeople .hz-people-seats { flex: 1; font-size: 13px; white-space: nowrap; }
  .hz-ppeople-btn { flex: none; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-mist); color: var(--hz-ink); font: 600 14px var(--hz-font); white-space: nowrap; cursor: pointer; }

  /* 2. The list card. */
  .hz-pws .hz-list-panel { flex: 1 1 0; min-height: 0; padding: 12px 10px 10px; border-radius: 28px; gap: 8px; }
  .hz-pws .hz-list-panel > .hz-cont-head { flex-wrap: nowrap; padding: 2px 6px 0; }
  .hz-pws .hz-list-panel > .hz-cont-head h2 { font-size: 17px; white-space: nowrap; }
  .hz-pws .hz-list-panel > .hz-cont-head > span { font-size: 13px; }
  .hz-pws .hz-list-scroll {
    flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; gap: 8px; padding: 0 0 8px;
    --fade-top: #000 0; --fade-bot: #000 100%;
    -webkit-mask-image: linear-gradient(var(--fade-top), var(--fade-bot)); mask-image: linear-gradient(var(--fade-top), var(--fade-bot));
  }
  .hz-pws .hz-list-scroll::-webkit-scrollbar { display: none; }
  .hz-pws .hz-list-scroll.is-top-fade { --fade-top: #0000 0, #000 18px; }
  .hz-pws .hz-list-scroll.is-bottom-fade { --fade-bot: #000 calc(100% - 54px), #0000 100%; }
  .hz-pws .hz-list-more { display: flex; bottom: 12px; }
  .hz-pws .hz-list-more[hidden] { display: none; }
  .hz-pws .hz-empty { padding: 20px 16px; font-size: 14px; }

  /* Phone tile: 52 px thumbnail or type badge beside the text. */
  .hz-pws .hz-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; padding: 10px; border-radius: 22px; }
  .hz-pws .hz-tile > .hz-tile-thumb, .hz-pws .hz-tile > .hz-tile-kind { grid-column: 1; grid-row: 1; width: 52px; height: 52px; border-radius: 12px; }
  .hz-pws .hz-tile > .hz-tile-kind { display: flex; align-items: center; justify-content: center; background: var(--hz-cloud); color: var(--hz-clay); font: 600 11px var(--hz-font-mono); }
  .hz-pws .hz-tile.is-result > .hz-tile-kind { color: #2D7A63; }
  .hz-pws .hz-tile > .hz-tile-row { grid-column: 2; grid-row: 1; padding: 0; align-self: center; }
  .hz-pws .hz-tile > .hz-tile-actions, .hz-pws .hz-tile > .hz-tile-tools { grid-column: 1 / -1; padding: 0; }
  /* Only the newest item shows the dark main button; the others open their preview. */
  .hz-pws .hz-list-scroll > .hz-tile:not(:first-child) > .hz-tile-actions { display: none; }
  .hz-pws .hz-tile-actions .hz-tile-main { min-height: 40px; }
  .hz-pws .hz-tile-tools { flex-wrap: nowrap; gap: 6px; padding: 0; }
  .hz-pws .hz-tile-chips {
    display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }
  .hz-pws .hz-tile-chips::-webkit-scrollbar { display: none; }
  .hz-pws .hz-tile-chip { padding: 8px 12px; font-size: 13px; background: var(--hz-cloud); }
  .hz-pws .hz-tile-alltools { flex: none; padding: 8px 12px; font-size: 13px; background: var(--hz-ink); color: var(--hz-on-ink); }
  .hz-pws .hz-tile-tools-gap { display: none; }
  .hz-pws .hz-tile-tools:not(:has(.hz-tile-chips)) .hz-tile-tools-gap { display: block; }
  .hz-pws .hz-tile-ico { width: 36px; height: 36px; }
  .hz-pws .hz-tile-note { font-size: 12px; }
  .hz-pws .hz-badge-new, .hz-pws .hz-tile-badge { font-size: 10px; }

  /* 3. The dock. */
  .hz-mdock { position: static; flex: none; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 28px; background: var(--hz-cloud); box-shadow: var(--hz-shadow-raised); }
  .hz-mdock-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  /* Small phones (360 px): Paste, Kamera, Einfügen still fit on their buttons. */
  @media (max-width: 374px) { .hz-mdock-q { gap: 3px; padding-inline: 3px; font-size: 13px; } .hz-mdock-q .icon { width: 14px; height: 14px; } }
  .hz-mdock-quick[hidden] { display: none; }
  .hz-mdock-q { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 6px; border-radius: 14px; background: var(--hz-mist); font: 600 13px var(--hz-font); white-space: nowrap; overflow: hidden; }
  .hz-mdock-q .icon { flex: none; width: 15px; height: 15px; }
  .hz-mdock-row { display: flex; align-items: center; gap: 8px; }
  .hz-mdock-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--hz-mist); }
  .hz-mdock-input { width: 100%; min-height: 40px; font-size: 16px; text-overflow: ellipsis; }
  .hz-mdock-plus { display: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--hz-mist); color: var(--hz-ink); font-size: 22px; cursor: pointer; }
  .hz-mdock-send { flex: none; display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-coral); color: #fff; font: 700 18px var(--hz-font); cursor: pointer; }
  .hz-mdock-send.is-fern { background: #2D7A63; padding: 0 18px; font: 600 15px var(--hz-font); }
  .hz-mdock-send:disabled { background: color-mix(in srgb, var(--hz-coral) 45%, var(--hz-cloud)); color: #fff; cursor: default; }
  .hz-mdock-send.is-fern:disabled { background: color-mix(in srgb, #2D7A63 40%, var(--hz-cloud)); }
  .hz-mdock-send[hidden], .hz-mdock-cancel[hidden], .hz-mdock-wide[hidden], .hz-mdock-plus[hidden] { display: none; }
  .hz-mdock-wide { min-height: 48px; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-coral); color: #fff; font: 600 16px var(--hz-font); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 16px; }
  .hz-mdock-wide.is-fern { background: #2D7A63; }
  .hz-mdock-wide:disabled { opacity: .5; }
  .hz-mdock-cancel { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--hz-r-pill); background: var(--hz-mist); color: var(--hz-ink); font: 600 15px var(--hz-font); cursor: pointer; }
  .hz-mdock-files { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hz-mdock-files[hidden] { display: none; }
  .hz-mdock-file { flex: none; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 190px; max-width: none; padding: 6px; border-radius: 14px; background: var(--hz-mist); }
  .hz-mdock-file .hz-tray-thumb { width: 36px; height: 36px; border-radius: 8px; }
  .hz-mdock-file button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--hz-slate); font-size: 16px; cursor: pointer; }
  .hz-mdock .hz-tray-add { width: 48px; border-radius: 14px; }
  .hz-mdock-progress { display: flex; flex-direction: column; gap: 6px; }
  .hz-mdock-progress[hidden] { display: none; }
  .hz-mdock-progress-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .hz-mdock-progress-line > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .hz-mdock-progress-n { flex: none; color: var(--hz-slate); font-weight: 500; }
  .hz-mdock .hz-progress-bar { height: 6px; }
  body:has(.hz-pws) .hz-toasts { bottom: calc(76px + max(150px, var(--hz-dock-h, 0px) + 22px) + env(safe-area-inset-bottom, 0px)); }
  /* Small sources sheet ("+" on small phones). */
  .hz-psources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hz-psource { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 88px; border: 0; border-radius: 20px; background: var(--hz-mist); color: var(--hz-ink); font: 600 15px var(--hz-font); cursor: pointer; }
  .hz-psource .icon { width: 22px; height: 22px; }

  /* Sheets: one size everywhere, 76 % of the screen; the body fills, actions pinned. */
  .hz-sheet, .hz-sheet.is-medium { height: calc(76dvh * var(--vz)); max-height: none; }
}
/* Small phones (under 700 px tall). */
@media (max-width: 759px) and (max-height: 699px) {
  body.app:has(.hz-pws) > .app-main { padding: 6px 10px 8px; }
  .hz-pws { gap: 8px; }
  .hz-pcard { padding: 10px 12px; gap: 6px; }
  .hz-pcard .hz-bubble-sub { display: none; }
  .hz-pcard .hz-bubble-disc { width: 40px; height: 40px; }
  .hz-pcard .hz-bubble[aria-pressed="true"] .hz-bubble-disc, .hz-pcard .hz-bubble.is-boom .hz-bubble-disc { width: 44px; height: 44px; }
  .hz-pcard .hz-boom-self p { font-size: 12px; }
  .hz-mdock-quick { display: none; }
  .hz-mdock-plus { display: flex; align-items: center; justify-content: center; }
  .hz-pws .hz-tile { grid-template-columns: 44px minmax(0, 1fr); }
  .hz-pws .hz-tile > .hz-tile-thumb, .hz-pws .hz-tile > .hz-tile-kind { width: 44px; height: 44px; }
  .hz-mdock { padding: 8px; }
}
@media (max-width: 759px) and (pointer: coarse) {
  .hz-pws .hz-tile-ico { width: 44px; height: 44px; }
  .hz-pws .hz-tile-chip, .hz-pws .hz-tile-alltools { min-height: 44px; }
  .hz-mdock-file button { width: 44px; height: 44px; }
  .hz-mdock-q { min-height: 44px; }
}
@media (max-width: 759px) { .hz-mdock-send.is-fern { width: auto; } .hz-mdock-send:not(.is-fern) { width: 44px; } }
@media (max-width: 759px) {
  .hz-settings.is-v3 .hz-settings-top { padding: 4px; border-radius: var(--hz-r-pill); background: var(--hz-cloud); align-items: center; gap: 2px; }
  .hz-settings.is-v3 .hz-anchor-chip { background: none; padding: 8px 12px; }
  .hz-settings.is-v3 .hz-anchor-chip[aria-current] { background: var(--hz-ink); color: var(--hz-on-ink); }
  .hz-anchor-chip.is-back { color: var(--hz-slate-2); }
  .hz-chips-sep { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--hz-reed); }
}
@media (max-width: 759px) and (pointer: coarse) { .hz-mdock-input { min-height: 44px; } .hz-mdock-field { padding-block: 0; } }
@media (max-width: 759px) {
  .hz-pws .hz-tile > * { min-width: 0; }
  .hz-pws .hz-tile-tools { overflow: hidden; }
  .hz-pws .hz-tile-chips { overflow: hidden; -webkit-mask-image: none; mask-image: none; }
  .hz-pws .hz-tile-chip[hidden] { display: none; }
}
/* R11: header controls never shrink or wrap; a crowded switcher shows icons only. */
.hz-tools-right > * { flex: none; }
.hz-ctl { white-space: nowrap; }
.hz-setnav.is-icons a:not(.hz-setnav-back) .hz-setnav-label { display: none; }