/* receptionOS portal — mobile-first, fluid. Desktop is min-width enhancement. */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue: #2563eb; --blue-h: #1d4ed8; --z900: #18181b; --z700: #3f3f46;
  --z500: #71717a; --z400: #a1a1aa; --z300: #d4d4d8; --z200: #e4e4e7;
  --z100: #f4f4f5; --z50: #fafafa; --emerald: #10b981; --emerald-t: #059669;
  --amber-bg: #fef3c7; --amber-t: #b45309; --orange-t: #c2410c;
  --ros: #EA660E; --ros-h: #d45508;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  /* Produkcyjny dokument nie renderuje demobara; wszystkie sticky offsety zaczynają się od 0. */
  --demobar-h: 0px; --topbar-h: 52px;
}
html { -webkit-text-size-adjust: 100%; }
html, body {
  background: #fff; color: var(--z900);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; line-height: 1.5;
  max-width: 100%;
}
body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; height: auto; }
#app { width: 100%; min-width: 0; max-width: 100%; }

/* pasek kontekstu */
#demobar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center;
  height: var(--demobar-h);
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--z50); border-bottom: 1px solid var(--z200); font-size: 11.5px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#demobar::-webkit-scrollbar { display: none; }
#demobar nav { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; white-space: nowrap; }
#demobar a { color: var(--z400); text-decoration: none; flex-shrink: 0; }
#demobar a:hover { color: var(--z700); }
#demobar a.active { color: var(--z900); font-weight: 500; }
#demobar .sep { color: var(--z300); flex-shrink: 0; }
#demobar button { margin-left: 4px; padding: 0 0 0 6px; background: none; border: none; color: var(--z300); cursor: pointer; font-size: 12px; font-family: inherit; line-height: 1; flex-shrink: 0; }
#demobar button:hover { color: var(--z700); }

.topbar {
  position: sticky; top: var(--demobar-h); z-index: 40;
  display: flex; height: var(--topbar-h); align-items: center; gap: 12px;
  border-bottom: 1px solid var(--z100);
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  background: #fff; min-width: 0; overflow: hidden;
}
.topbar .logo {
  display: flex; align-items: center; flex: 0 0 auto;
  color: var(--z900); text-decoration: none;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1;
}
.topbar .logo span { font-weight: 400; }
.topbar .logo img,
.topbar .logo svg { display: block; width: 92px; height: 21px; max-width: none; }
.topbar .meta {
  flex: 1 1 auto; min-width: 0; margin-left: auto;
  font-size: 12px; color: var(--z400); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.topbar .meta a:hover { color: var(--z700); }
.topbar .meta-long {
  display: none; flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--z400);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .help {
  flex: 0 0 auto; margin-left: auto;
  font-size: 13px; color: var(--z500); text-decoration: none;
  padding: 8px 4px; white-space: nowrap;
}
.topbar .help:hover { color: var(--z900); }

.wrap {
  width: 100%; max-width: 1024px; margin: 0 auto;
  padding: 20px max(16px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  min-width: 0;
}
.wrap.narrow { max-width: 720px; }
.split { display: flex; flex-direction: column; gap: 20px; align-items: stretch; min-width: 0; width: 100%; }

h1 { font-size: clamp(22px, 4vw, 28px); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.h-step { font-size: clamp(18px, 3.4vw, 22px); font-weight: 700; letter-spacing: -.01em; }
.h-q { font-size: clamp(20px, 4.2vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; }
.lead { margin-top: var(--space-2); color: var(--z500); font-size: 14.5px; }
.sec-label { font-size: 15px; font-weight: 600; }
.hint { font-size: 13.5px; color: var(--z500); }
.small { font-size: 12.5px; color: var(--z500); }
.xsmall { font-size: 11.5px; color: var(--z400); }
.lead, .hint, .okline, .cs { overflow-wrap: anywhere; }

/* stepper — default: compact horizontal (narrow viewports) */
.stepnav {
  width: calc(100% + 32px); max-width: none;
  margin: 0 -16px; padding: 8px 16px 10px;
  position: sticky; top: calc(var(--demobar-h) + var(--topbar-h)); z-index: 30;
  background: #fff; border-bottom: 1px solid var(--z100);
  min-width: 0;
}
.stepnav .sn-label { display: none; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--z400); }
.stepnav ol {
  list-style: none; margin: 0; display: flex; flex-direction: row; gap: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.stepnav ol::-webkit-scrollbar { display: none; }
.stepnav li { flex: 0 0 auto; min-width: 58px; }
.stepnav ol button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: auto; min-height: 52px; padding: 6px 8px;
  border: none; background: none; border-radius: 8px;
  text-align: center; cursor: pointer; font-family: inherit;
}
.stepnav ol button.current { background: var(--z50); }
.stepnav ol button:not(.locked):hover { background: var(--z50); }
.stepnav ol button.locked { opacity: .4; cursor: default; }
.stepnav .dot {
  margin-top: 0; display: flex; height: 20px; width: 20px; flex-shrink: 0;
  align-items: center; justify-content: center; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--z100); color: var(--z500);
}
.stepnav .dot.current { background: var(--blue); color: #fff; }
.stepnav .dot.done { background: var(--emerald); color: #fff; }
.stepnav .st-copy { min-width: 0; }
.stepnav .st-title {
  display: block; font-size: 10px; line-height: 1.2; text-align: center;
  max-width: 64px; font-weight: 500; color: var(--z700);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stepnav ol button.current .st-title { font-weight: 600; color: var(--z900); }
.stepnav .st-cap { display: none; font-size: 11px; color: var(--z400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stepnav-extra { display: none; }
.stepnav-now { display: none; }

.beat-rail { display: flex; align-items: center; gap: 8px; margin-top: 10px; min-width: 0; }
.step-arrow {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 99px; padding: 0;
  border: 1px solid var(--z200); background: #fff; color: var(--z700);
  font-size: 16px; line-height: 1; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.step-arrow:hover:not(:disabled) { border-color: var(--z400); background: var(--z50); }
.step-arrow:disabled { opacity: .35; cursor: default; }
.beat-now { flex: 1; min-width: 0; text-align: center; }
.beat-now-act { display: block; font-size: 11px; color: var(--z400); }
.beat-now strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--z900); line-height: 1.3; overflow-wrap: anywhere; }
.beat-now-n { display: block; font-size: 11px; color: var(--z400); margin-top: 2px; }
.beat-pips { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pip {
  width: 28px; height: 28px; padding: 0; border: none; border-radius: 99px;
  background: transparent; cursor: pointer; position: relative;
}
.pip::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 99px; background: var(--z200);
  transform: translate(-50%, -50%);
}
.pip.on::before { background: var(--blue); width: 10px; height: 10px; }
.pip.ok::before { background: var(--emerald); }
.pip:disabled { cursor: default; opacity: .45; }
.act-progress { height: 3px; background: var(--z100); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.act-progress span { display: block; height: 100%; background: var(--blue); transition: width .3s ease; }
.act-dots { display: flex; gap: 6px; margin-top: 8px; padding: 0 4px; }
.act-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--z200); display: block; }
.act-dots i.on { background: var(--blue); }
.act-dots i.ok { background: var(--emerald); }

.stepbody { flex: 1; min-width: 0; width: 100%; padding-bottom: 8px; }
.beat-panel { width: 100%; min-width: 0; max-width: 100%; }
.beat-stack {
  display: flex; flex-direction: column; gap: var(--space-4);
  margin-top: var(--space-5); min-width: 0;
}
.beat-panel > .beat-stack:first-child { margin-top: 0; }
.beat-stack > .lead,
.beat-stack > .h-q { margin-top: 0; }
.beat-stack > .slug-line,
.beat-stack > label.f,
.beat-stack > .btn-row,
.beat-stack > .okline,
.beat-stack > .hint,
.beat-stack > .note-warn,
.beat-stack > .small,
.beat-stack > .site-scan,
.beat-stack > .btn.ghost,
.beat-stack > .card + .card { margin-top: 0; }
.beat-stack > .btn,
.beat-stack > .btn.ghost,
.beat-stack > a.btn { align-self: flex-start; }
.cluster { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cluster > [class] { margin-top: 0; }
.cluster > .btn,
.cluster > .btn.ghost { align-self: flex-start; }

.card { background: #fff; border: 1px solid var(--z200); border-radius: 16px; padding: 16px; min-width: 0; }
.card.cluster { overflow: visible; }
.card + .card { margin-top: var(--space-4); }
.card > .sec-label + .hint,
.card > .hint + .hint,
.card > p + .hint,
.card > p + p { margin-top: var(--space-2); }
.card > .okline { margin-top: var(--space-2); }
.card > .num-meta + .btn,
.card > .hint + .btn,
.card > p + .btn { margin-top: var(--space-3); }
.tile {
  display: block; width: 100%; max-width: 100%;
  background: #fff; border: 1px solid var(--z200); border-radius: 16px;
  padding: 14px 16px; text-align: left; cursor: pointer; font-family: inherit; font-size: 14px;
  transition: border-color .12s, box-shadow .12s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.tile:hover { border-color: var(--z300); }
.tile.selected { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.tile .t-label { font-size: 14px; font-weight: 500; color: var(--z900); display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.tile.selected .t-label { color: #1d4ed8; }
.tile .t-desc { display: block; margin-top: 4px; font-size: 12px; color: var(--z500); }

.suggest { position: relative; }
.suggest-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 25;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--z200); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24, 24, 27, .08);
  max-height: 260px; overflow-y: auto;
}
.suggest-item {
  display: block; width: 100%; text-align: left;
  border: 0; background: none; padding: 10px 12px; border-radius: 8px;
  font: inherit; font-size: 15px; color: var(--z900); cursor: pointer;
}
.suggest-item:hover, .suggest-item:focus, .suggest-item.is-active { background: var(--z50); }
label.f, label.field {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-4); min-width: 0;
}
label.f:first-child, label.field:first-child { margin-top: 0; }
label.f.row { flex-direction: row; align-items: flex-start; gap: 10px; }
label.f > span, label.field > span { font-size: 14px; font-weight: 500; color: var(--z900); }
label.f input, label.f select, label.f textarea,
label.field input, label.field select, label.field textarea { margin-top: 0; }
input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=number], select {
  margin-top: 8px; display: block; width: 100%; max-width: 100%;
  height: 52px; min-height: 52px; min-width: 0;
  border: 1px solid var(--z200); border-radius: 12px; padding: 0 16px;
  font-size: 16px; line-height: 1.25; font-family: inherit; color: var(--z900); background: #fff; outline: none;
  appearance: none; -webkit-appearance: none;
}
select { -webkit-appearance: menulist; appearance: auto; }
input:focus, select:focus { border-color: var(--blue); }
input::placeholder { color: var(--z400); }
textarea {
  margin-top: 8px; display: block; width: 100%; max-width: 100%; min-width: 0;
  border: 1px solid var(--z200); border-radius: 12px; padding: 10px 14px;
  font-size: 16px; font-family: inherit; color: var(--z900); outline: none; min-height: 72px; resize: vertical;
}
textarea:focus { border-color: var(--blue); }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 28px; max-width: 100%;
  border: none; border-radius: 999px; background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn:hover:not(:disabled) { background: var(--blue-h); }
a.btn { text-decoration: none; }
.btn:disabled { background: var(--z300); color: #fff; cursor: not-allowed; pointer-events: none; }
.btn.sm { height: 36px; padding: 0 18px; font-size: 13.5px; }
.btn.sec { background: #fff; color: var(--z700); border: 1px solid var(--z300); font-weight: 500; }
.btn.sec:hover:not(:disabled) { background: #fff; border-color: var(--z400); }
.btn.sec:disabled {
  background: var(--z50); color: var(--z400); border-color: var(--z200);
}
.btn.ghost { background: none; color: var(--blue); padding: 0 10px; height: 36px; font-size: 13.5px; }
.btn.ghost:hover { background: #eff6ff; }

.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 500; background: var(--z100); color: var(--z500); }
.chip.ok { background: #ecfdf5; color: var(--emerald-t); }
.chip.warn { background: var(--amber-bg); color: var(--amber-t); }
.chip.todo { background: #eff6ff; color: var(--blue); }
.okline { color: var(--emerald-t); font-size: 12.5px; font-weight: 500; }

.mail-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mail-row input { margin-top: 0; flex: 1 1 12rem; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.label-with-i { display: flex; align-items: center; gap: 8px; }
.tip { position: relative; display: inline-flex; }
.info-i {
  width: 22px; height: 22px; padding: 0; border-radius: 99px;
  border: 1px solid var(--z300); background: #fff; color: var(--z500);
  font-size: 12px; font-weight: 600; font-family: inherit; font-style: italic;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-i:hover, .tip.open .info-i, .tip:focus-within .info-i { border-color: var(--blue); color: var(--blue); }
.tip-pop {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 8;
  width: min(280px, calc(100% + 80px)); max-width: min(280px, 100vw - 32px);
  padding: 10px 12px; border-radius: 10px;
  background: var(--z900); color: #fff; font-size: 13px; font-weight: 400; line-height: 1.4;
  font-style: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s;
}
.tip.open .tip-pop, .tip:focus-within .tip-pop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}
.dimmed { opacity: .45; pointer-events: none; }
.num-meta { margin-top: 8px; font-size: 13px; color: var(--z500); }
.num-meta.ok { color: var(--emerald-t); }
.num-meta.geo { color: var(--blue); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; min-width: 0; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.offer-pay { flex-wrap: wrap; gap: 4px 12px; }
.field-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: stretch; min-width: 0; }
.field-row input, .field-row select { margin-top: 0; flex: 1 1 12rem; min-width: 0; width: auto; }
.field-row .btn { flex: 1 1 8rem; margin-top: 0 !important; }
.field-row .date-pick { flex: 1 1 14rem; min-width: 0; position: relative; }

.date-pick-face {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 52px; min-height: 52px; margin: 0; padding: 0 16px;
  border: 1px solid var(--z200); border-radius: 12px; background: #fff;
  color: var(--z900); font: inherit; font-size: 16px; text-align: left;
  cursor: pointer;
}
.date-pick-face:focus { outline: none; border-color: var(--blue); }
.date-pick-ico { display: flex; color: var(--z500); flex-shrink: 0; }
.date-pick-face:focus .date-pick-ico { color: var(--blue); }
#go-live-face-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#go-live-face-text.is-placeholder { color: var(--z400); }
.date-pick input[type=date] {
  margin: 0; height: 52px; min-height: 52px; flex: none;
}
.date-pick.is-native input[type=date] {
  position: absolute; inset: 0; z-index: 2; opacity: 0.02;
  width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
}
.date-pick.is-native .date-pick-face { pointer-events: none; }
.date-pick.is-custom input[type=date] {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  overflow: hidden; clip: rect(0 0 0 0);
}
.date-cal {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: min(100%, 320px); padding: 14px;
  background: #fff; border: 1px solid var(--z200); border-radius: 16px;
  box-shadow: 0 16px 40px rgba(24, 24, 27, .12);
  animation: beat-in .18s ease;
}
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-label { flex: 1; text-align: center; font-size: 14px; font-weight: 600; text-transform: capitalize; }
.cal-nav {
  width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--z50);
  color: var(--z700); font-size: 18px; line-height: 1; cursor: pointer; font-family: inherit;
}
.cal-nav:hover:not(:disabled) { background: var(--z100); }
.cal-nav:disabled { opacity: .35; cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-week span {
  text-align: center; font-size: 11px; font-weight: 600; color: var(--z400);
  text-transform: uppercase; padding: 4px 0 8px;
}
.cal-day {
  aspect-ratio: 1; border: 0; border-radius: 999px; background: transparent;
  color: var(--z900); font: inherit; font-size: 13.5px; cursor: pointer;
}
.cal-day.is-pad { visibility: hidden; pointer-events: none; }
.cal-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ros); }
.cal-day.is-selected { background: var(--blue); color: #fff; box-shadow: none; }
.cal-day:hover:not(:disabled):not(.is-selected) { background: var(--z100); }
.cal-day.is-blocked, .cal-day:disabled { color: var(--z300); cursor: default; background: transparent; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-row .btn, .btn-row a.btn { flex: 1 1 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; max-width: 100%; width: 100%; }
.table-scroll table { min-width: min(520px, 100%); }
.slug-line { overflow-wrap: anywhere; word-break: break-word; font-size: 22px; }
.team-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: end; }
.team-card label.f { margin-top: 0; }
.sdr-deal .sdr-head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sdr-deal .sdr-meta { display: grid; gap: 10px; margin-top: 14px; }
.sdr-deal .sdr-meta p { font-size: 13.5px; color: var(--z700); }
.mail-frame { width: 100%; height: 70vh; min-height: 360px; border: 1px solid var(--z200); border-radius: 16px; margin-top: 16px; background: #fff; }
.grid2, .grid3, .num-pick {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; min-width: 0;
}
.grid2 > label.f, .grid3 > label.f { margin-top: 0; }
.num-pick .skel + .skel { margin-top: 0; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 12px; color: var(--z500); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--z200); }
td { padding: 9px 10px; border-bottom: 1px solid var(--z100); vertical-align: middle; }
td code, .mailbox pre { word-break: break-word; overflow-wrap: anywhere; }
code { background: var(--z100); padding: 2px 6px; border-radius: 6px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.copybtn { border: none; background: none; cursor: pointer; color: var(--z400); font-size: 12px; font-family: inherit; min-height: 44px; min-width: 44px; }
.copybtn:hover { color: var(--blue); }
.note-warn { margin-top: 8px; font-size: 12.5px; font-weight: 500; color: var(--orange-t); }

.orderbox { border: 1px solid var(--z200); border-radius: 16px; padding: 20px; width: 100%; min-width: 0; }
.orderbox h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.orderbox .line, .line {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 3px 0; font-size: 13.5px; color: var(--z700);
}
.orderbox .sep, .card .sep { border-top: 1px solid var(--z200); margin: 10px 0; }
.orderbox .big, .big { font-size: clamp(22px, 5vw, 28px); font-weight: 700; letter-spacing: -.02em; }

.contract { border: 1px solid var(--z200); border-radius: 16px; padding: 16px; max-height: 300px; overflow-y: auto; font-size: 13px; background: #fff; }
.contract h4 { text-align: center; margin-bottom: 12px; font-size: 13.5px; }
.contract p { margin-bottom: 8px; }
.contract .filled, .filled { background: #dbeafe; border-radius: 3px; padding: 0 3px; }

.mailbox { border: 1px solid var(--z200); border-radius: 16px; padding: 16px 18px; font-size: 13.5px; background: #fff; min-width: 0; }
.mailbox .mb-head { font-size: 12px; color: var(--z400); margin-bottom: 8px; }
.mailbox pre { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; margin: 6px 0; overflow-wrap: anywhere; }

.success { position: fixed; inset: 0; z-index: 40; background: #fff; overflow-y: auto; }
.success .inner {
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 20px calc(40px + env(safe-area-inset-bottom));
}
.success .ico { display: flex; width: 96px; height: 96px; align-items: center; justify-content: center; border-radius: 999px; background: #ecfdf5; color: var(--emerald); font-size: 42px; margin-bottom: 22px; }

.check-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--z100); }
.check-row:last-child { border-bottom: none; }
.check-row .ci { margin-top: 1px; display: flex; width: 20px; height: 20px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 999px; font-size: 11px; font-weight: 700; }
.check-row .ci.done { background: var(--emerald); color: #fff; }
.check-row .ci.wait { background: var(--z100); color: var(--z400); }
.check-row .ct { font-size: 14px; font-weight: 500; }
.check-row .cs { font-size: 12.5px; color: var(--z500); }

.station { border: 1px solid var(--z200); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }

.ctx { border: 1px solid var(--z200); border-radius: 16px; padding: 16px; min-width: 0; }
.ctx.confirmed { border-color: #a7f3d0; background: #ecfdf5; }
.ctx.attn { border-color: #fcd34d; }
.ctx + .ctx { margin-top: 10px; }
.ctx textarea {
  min-height: 220px; max-height: 640px; margin-top: 0;
  overflow: auto;
}
.ctx.locked { cursor: pointer; }
.ctx.locked textarea,
.ctx.locked .ctx-table input {
  background: var(--z50); cursor: pointer; resize: none; color: var(--z700);
}
.ctx-lock-hint { margin-top: var(--space-3); }
.ctx-table-label { margin: var(--space-4) 0 var(--space-2); font-size: 13px; color: var(--z700); }
.ctx-table-wrap { margin-top: 0; max-height: min(360px, 50vh); overflow: auto; }
.ctx-table { width: 100%; }
.ctx-table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--z500);
  padding: 0 8px 8px 0; border: 0;
}
.ctx-table td { padding: 4px 8px 4px 0; vertical-align: middle; border: 0; }
.ctx-table td:last-child { width: 40px; padding-right: 0; }
.ctx-table input[type=text] {
  height: 40px; min-height: 40px; margin-top: 0; padding: 0 12px;
  font-size: 14px; border-radius: 10px;
}
.ctx-nav {
  display: grid; gap: var(--space-3); margin-top: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "confirm confirm" "prev next";
}
.ctx-nav > :first-child { grid-area: prev; width: 100%; }
.ctx-nav > :nth-child(2) { grid-area: confirm; width: 100%; }
.ctx-nav > :last-child { grid-area: next; width: 100%; }
.btn.ctx-confirm { min-width: 0; width: 100%; }
.btn.ctx-confirm.done { background: var(--emerald-t); }
.btn.ctx-confirm.done:hover { background: #047857; }
.ctx-turn { animation: beat-in .25s ease; }

pre.json, pre.plan {
  background: #18181b; color: #e4e4e7; border-radius: 12px; padding: 16px 18px;
  font-size: 12.5px; overflow-x: auto; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; max-width: 100%;
}
pre.plan .ok { color: #34d399; } pre.plan .create { color: #93c5fd; } pre.plan .blocked { color: #fbbf24; } pre.plan .skip { color: #71717a; }

.synclog { list-style: none; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.synclog li { padding: 5px 0; border-bottom: 1px dashed var(--z200); }
.synclog .t { color: var(--z400); margin-right: 8px; }

.footer-nav { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: var(--space-6); }
.footer-nav .fn-hint { order: -1; text-align: left; font-size: 12.5px; color: var(--z400); }
.footer-nav .btn { width: 100%; }

.dns-list { display: grid; gap: 10px; }
.dns-card { border: 1px solid var(--z200); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.dns-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dns-card-top code { font-size: 12px; }
.dns-val { display: block; margin-top: 8px; word-break: break-all; font-size: 12px; line-height: 1.45; }

.time-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.time-chip {
  height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--z200);
  background: #fff; color: var(--z900); font: inherit; font-size: 14px; cursor: pointer;
}
.time-chip:hover { border-color: var(--z400); }
.time-chip.is-on { background: var(--blue); color: #fff; border-color: var(--blue); }
.golive-done { text-align: center; padding: 28px 20px 24px; animation: beat-in .28s ease; }
.golive-done .check-draw { margin: 0 auto 16px; }
.golive-done h3 { font-size: 22px; letter-spacing: -.02em; margin: 0; }
.golive-when { margin: 8px 0 0; font-size: 16px; font-weight: 600; color: var(--emerald-t); }
.golive-done > .hint { margin-top: var(--space-3); }
.golive-next {
  list-style: none; text-align: left; margin: var(--space-5) auto 0; max-width: 36rem;
  display: grid; gap: 10px;
}
.golive-next li {
  position: relative; padding: 10px 12px 10px 36px; border: 1px solid var(--z200);
  border-radius: 12px; font-size: 13.5px; color: var(--z700); line-height: 1.45;
}
.golive-next li::before {
  content: "→"; position: absolute; left: 12px; top: 10px; color: var(--ros); font-weight: 700;
}
.golive-done .btn { margin-top: var(--space-5); }
.check-draw { width: 96px; height: 96px; }
.check-draw circle { fill: #ecfdf5; stroke: var(--emerald); stroke-width: 3; }
.check-draw path { fill: none; stroke: var(--emerald); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw-check .55s .18s ease forwards; }

.skel {
  height: 14px; width: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--z100) 40%, var(--z200) 50%, var(--z100) 60%);
  background-size: 200% 100%; animation: skel 1.1s ease infinite;
}
.skel + .skel { margin-top: 10px; }
.skel.lg { height: 56px; border-radius: 16px; }

.site-scan { margin-top: 0; }
.site-scan-browser {
  border: 1px solid var(--z200); border-radius: 16px; overflow: hidden; background: #fff;
}
.site-scan-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--z50); border-bottom: 1px solid var(--z200);
}
.site-scan-live {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 99px; background: var(--ros);
  box-shadow: 0 0 0 4px rgba(234, 102, 14, .12);
  animation: scan-live 1.2s ease infinite;
}
.site-scan-chrome code {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--z500);
  background: #fff; border: 1px solid var(--z200); border-radius: 8px;
  padding: 6px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-scan-page { position: relative; height: 118px; padding: 18px 16px; overflow: hidden; background: #fff; }
.site-scan-beam {
  position: absolute; left: 12px; right: 12px; height: 36px;
  background: linear-gradient(180deg, transparent, rgba(234, 102, 14, .16), transparent);
  animation: scan-beam 2.4s ease-in-out infinite;
  pointer-events: none;
}
.site-scan-lines i {
  display: block; height: 8px; border-radius: 99px; background: var(--z100);
  animation: scan-line 2.4s ease-in-out infinite;
}
.site-scan-lines i + i { margin-top: 12px; }
.site-scan-lines i:nth-child(1) { width: 38%; animation-delay: 0s; }
.site-scan-lines i:nth-child(2) { width: 92%; animation-delay: .15s; }
.site-scan-lines i:nth-child(3) { width: 74%; animation-delay: .3s; }
.site-scan-lines i:nth-child(4) { width: 86%; animation-delay: .45s; }
.site-scan-lines i:nth-child(5) { width: 52%; animation-delay: .6s; }
.site-scan-status { margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--z900); }
.site-scan .hint { margin-top: 6px; }

.phone-mock { width: min(220px, 100%); margin: 0 auto; border: 1px solid var(--z200); border-radius: 28px; padding: 18px 16px 22px; text-align: center; background: var(--z50); }
.phone-mock .notch { width: 72px; height: 8px; border-radius: 99px; background: var(--z300); margin: 0 auto 22px; }
.phone-mock .code { font-family: ui-monospace, Menlo, monospace; font-size: clamp(14px, 4vw, 18px); letter-spacing: .04em; font-weight: 600; overflow-wrap: anywhere; }
.phone-mock .btn { margin-top: var(--space-3); }

.film { border: 1px solid var(--z200); border-radius: 16px; overflow: hidden; background: var(--z50); }
.film .poster { display: flex; align-items: center; justify-content: center; height: 180px; cursor: pointer; position: relative; }
.film .play { width: 56px; height: 56px; border-radius: 99px; background: var(--ros); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; animation: pulse-ring 1.6s ease infinite; }
.film .caption { padding: 14px 16px; font-size: 13.5px; color: var(--z500); }

.qr-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; justify-content: center; }
.qr-card { width: min(168px, calc(50% - 10px)); min-width: 0; flex: 1 1 140px; max-width: 168px; }
.qrbox { width: 100%; height: auto; aspect-ratio: 1; border: 1px solid var(--z200); border-radius: 12px; padding: 8px; background: #fff; }
.qrbox svg, .qrbox img { width: 100%; height: 100%; display: block; }

.toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 60; background: var(--z900); color: #fff; text-align: center;
  border-radius: 999px; padding: 10px 18px; font-size: 13.5px; animation: fade-up .2s ease;
}
.toast.warn { background: #7c2d12; }
.micro { font-size: 12px; color: var(--z400); margin-top: 6px; }
details.sip { margin-top: 12px; border: 1px solid var(--z200); border-radius: 12px; padding: 10px 14px; }
details.sip summary { cursor: pointer; font-size: 13.5px; color: var(--z700); }

@keyframes beat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
@keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes pulse-ring { 0% { transform: scale(.92); opacity: .7; } 70% { transform: scale(1); opacity: 1; } }
@keyframes scan-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } }
@keyframes scan-beam { 0% { top: -36px; } 100% { top: 100%; } }
@keyframes scan-line {
  0%, 100% { background: var(--z100); }
  45%, 60% { background: color-mix(in srgb, var(--ros) 22%, var(--z100)); }
}

@media (hover: hover) and (pointer: fine) {
  .tip:hover .tip-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .tile:hover { border-color: var(--z300); }
  .toast { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); }
}

@media (min-width: 640px) {
  .grid2, .num-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row .btn { flex: 0 0 auto; width: auto; }
  .btn-row .btn, .btn-row a.btn { flex: 1 1 auto; }
  .film .poster { height: 220px; }
  .station { flex-direction: row; }
  .sdr-deal .sdr-head { flex-direction: row; }
  .mail-frame { height: 640px; }
  input[type=text], input[type=email], input[type=tel], input[type=url], input[type=date], input[type=number], select {
    height: 48px; min-height: 48px;
  }
  .date-pick-face, .date-pick input[type=date] {
    height: 48px; min-height: 48px;
  }
  .ctx-table input[type=text] {
    height: 40px; min-height: 40px;
  }
}

@media (min-width: 720px) {
  .ctx-nav {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: none;
    align-items: center;
    gap: var(--space-4);
  }
  .ctx-nav > :first-child, .ctx-nav > :nth-child(2), .ctx-nav > :last-child {
    grid-area: auto; width: auto;
  }
  .ctx-nav > :first-child { justify-self: start; }
  .ctx-nav > :nth-child(2) { justify-self: center; }
  .ctx-nav > :last-child { justify-self: end; }
  .btn.ctx-confirm { min-width: 168px; width: auto; }
  .footer-nav { flex-direction: row; align-items: center; justify-content: flex-end; }
  .footer-nav .fn-hint { order: 0; }
  .footer-nav .btn { width: auto; }
  .card { padding: 20px; }
  .contract { padding: 24px 28px; }
}

@media (min-width: 960px) {
  :root { --topbar-h: 56px; }
  .topbar { padding: 0 24px; }
  .topbar .logo img,
  .topbar .logo svg { width: 104px; height: 24px; }
  .topbar .meta-long { display: block; }
  .wrap { padding: 40px 24px 64px; }
  .split { flex-direction: row; gap: 40px; align-items: flex-start; }
  .stepnav {
    width: 240px; flex-shrink: 0; margin: 0; padding: 0;
    position: sticky; top: calc(var(--demobar-h) + var(--topbar-h) + 12px);
    border-bottom: none; background: transparent;
  }
  .stepnav .sn-label { display: block; }
  .stepnav ol { flex-direction: column; overflow: visible; margin-top: 12px; gap: 4px; }
  .stepnav li { min-width: 0; width: 100%; }
  .stepnav ol button {
    flex-direction: row; align-items: flex-start; gap: 12px;
    width: 100%; min-height: 0; padding: 8px 12px; text-align: left;
  }
  .stepnav .dot { margin-top: 2px; }
  .stepnav .st-title { font-size: 14px; max-width: none; text-align: left; white-space: normal; }
  .stepnav .st-cap { display: block; max-width: 160px; }
  .stepnav-extra { display: block; }
  .step-arrow { width: 36px; height: 36px; }
  .stepbody { padding-bottom: 40px; }
  .orderbox { width: 280px; flex-shrink: 0; position: sticky; top: calc(var(--demobar-h) + var(--topbar-h) + 12px); }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-card { grid-template-columns: 1fr 1fr minmax(140px, auto); }
  .qr-row { justify-content: flex-start; }
  .qr-card { flex: 0 0 168px; width: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .act-progress span, .toast, .dns-row, .film .play, .site-scan-live, .site-scan-beam, .site-scan-lines i, .ctx-turn, .date-cal, .golive-done { animation: none; transition: none; }
  .site-scan-beam { display: none; }
  .check-draw path { animation: none; stroke-dashoffset: 0; }
}