:root {
  --background: #f4f7f9;
  --foreground: #142433;
  --card: #ffffff;
  --card-foreground: #142433;
  --popover: #ffffff;
  --popover-foreground: #142433;
  --primary: #087e82;
  --primary-foreground: #ffffff;
  --secondary: #edf4f5;
  --secondary-foreground: #0c6267;
  --muted: #eef2f4;
  --muted-foreground: #667987;
  --accent: #e5f3f3;
  --accent-foreground: #075f64;
  --destructive: #d94747;
  --border: #dfe7eb;
  --input: #d7e2e7;
  --ring: #4fb3b6;
  --radius: 0.75rem;
  --navy: #0c2638;
  --navy-2: #112f43;
  --teal: #087e82;
  --teal-dark: #04666b;
  --teal-soft: #e5f4f4;
  --blue: #3777c7;
  --blue-soft: #eaf2fc;
  --green: #21825b;
  --green-soft: #e8f5ef;
  --amber: #a96a14;
  --amber-soft: #fff5e3;
  --red: #c94148;
  --red-soft: #fff0f0;
  --ink: #142433;
  --ink-2: #425867;
  --ink-3: #72838e;
  --line: #dfe7eb;
  --surface: #f4f7f9;
  --shadow-sm: 0 1px 2px rgba(15, 39, 55, 0.04), 0 7px 22px rgba(15, 39, 55, 0.035);
  --shadow-md: 0 14px 45px rgba(13, 42, 60, 0.09);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--surface);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: "Aptos", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: max-content;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: var(--teal);
  color: #fff;
  box-shadow: 0 7px 18px rgba(8, 126, 130, 0.23);
}

.brand-mark::after {
  position: absolute;
  inset: 10px 8px 7px;
  border-radius: 3px 3px 5px 5px;
  background: #fff;
  content: "";
}

.brand-roof {
  position: absolute;
  z-index: 1;
  top: 7px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  border-radius: 4px 2px 3px 2px;
  background: #fff;
}

.brand-mark svg {
  position: relative;
  z-index: 2;
  width: 15px;
  height: 15px;
  margin-top: 7px;
  color: var(--teal);
  stroke-width: 3;
}

.brand > div:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand strong {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.brand > div:last-child span {
  margin-top: 4px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.025em;
}

.brand-dark {
  color: #fff;
}

.brand-dark > div:last-child span {
  color: #7cd3d1;
}

.brand-compact {
  min-width: auto;
}

.brand-compact .brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.status-pill {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #f3f6f7;
  color: #536975;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill svg {
  width: 14px;
  height: 14px;
}

.status-pill.success {
  border-color: #c9e9da;
  background: var(--green-soft);
  color: #1b714f;
}

.status-pill.warning {
  border-color: #f2dbad;
  background: var(--amber-soft);
  color: #8b5913;
}

.status-pill.danger {
  border-color: #f2c9cc;
  background: var(--red-soft);
  color: #b9343b;
}

.status-pill.info {
  border-color: #cfe0f5;
  background: var(--blue-soft);
  color: #3068ad;
}

.pulse-dot,
.live-dot {
  position: relative;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pulse-dot::after {
  position: absolute;
  inset: -4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.25;
}

.admin-app {
  display: flex;
  min-height: 100vh;
  background: var(--surface);
}

.admin-sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: 250px;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 20%, rgba(35, 143, 147, 0.18), transparent 30%),
    linear-gradient(180deg, #102e42 0%, #0a2233 100%);
  color: #b9c9d2;
  box-shadow: 8px 0 28px rgba(10, 34, 51, 0.06);
}

.sidebar-brand-wrap {
  position: relative;
  display: flex;
  height: 77px;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.sidebar-collapse {
  position: absolute;
  right: -13px;
  display: none;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
}

.sidebar-collapse svg {
  width: 14px;
  height: 14px;
}

.sidebar-section-label {
  padding: 26px 24px 10px;
  color: #6f8a9a;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.045em;
}

.sidebar-secondary-label {
  padding-top: 23px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 13px;
}

.admin-nav button {
  position: relative;
  display: grid;
  min-height: 45px;
  grid-template-columns: 23px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #b9c9d2;
  text-align: left;
  transition: .16s ease;
}

.admin-nav button:hover {
  background: rgba(255,255,255,.055);
  color: #fff;
}

.admin-nav button.active {
  background: linear-gradient(90deg, rgba(45, 161, 164, .25), rgba(45, 161, 164, .12));
  color: #fff;
  box-shadow: inset 3px 0 #62d0cd;
}

.admin-nav button svg {
  width: 18px;
  height: 18px;
  color: #90a8b5;
}

.admin-nav button.active svg {
  color: #75d7d4;
}

.admin-nav button span {
  font-size: 14px;
  font-weight: 600;
}

.admin-nav button em {
  min-width: 23px;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.09);
  color: #dce7ec;
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.admin-nav .live-dot {
  right: 12px;
  background: #ff656a;
  box-shadow: 0 0 0 4px rgba(255, 101, 106, .12);
}

.admin-nav-secondary button {
  min-height: 41px;
}

.sidebar-bottom {
  margin-top: auto;
}

.storage-mini {
  margin: 12px 15px 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.storage-mini > div {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 8px;
}

.storage-mini svg {
  width: 14px;
  height: 14px;
  color: #6ed0cd;
}

.storage-mini div span,
.storage-mini div strong {
  color: #dbe6eb;
  font-size: 12px;
  font-weight: 650;
}

.storage-mini > span {
  display: block;
  height: 4px;
  margin: 11px 0 8px;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255,255,255,.1);
}

.storage-mini > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #61ccc9;
}

.storage-mini small {
  color: #7892a1;
  font-size: 12px;
}

.user-menu {
  display: grid;
  width: 100%;
  min-height: 70px;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 0;
  border-top: 1px solid rgba(255,255,255,.075);
  background: rgba(0,0,0,.08);
  color: #fff;
  text-align: left;
}

.avatar,
.large-avatar,
.advisor-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #2ea8aa, #09777c);
  color: #fff;
  font-weight: 750;
}

.avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.user-menu > span:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.user-menu strong {
  font-size: 12.5px;
}

.user-menu small {
  margin-top: 2px;
  color: #7892a1;
  font-size: 12px;
}

.user-menu > svg {
  width: 16px;
  color: #7892a1;
}

.admin-main {
  width: calc(100% - 250px);
  min-width: 0;
  margin-left: 250px;
}

.admin-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  height: 65px;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
}

.mobile-menu {
  display: none;
}

.admin-search {
  display: flex;
  width: min(410px, 42vw);
  height: 37px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid #e1e8eb;
  border-radius: 9px;
  background: #f7f9fa;
  color: #7b8c96;
}

.admin-search svg {
  width: 16px;
}

.admin-search span {
  flex: 1;
  font-size: 13px;
}

.admin-search kbd {
  padding: 2px 6px;
  border: 1px solid #dae2e6;
  border-radius: 5px;
  background: #fff;
  color: #82919a;
  font-size: 12px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-switch,
.icon-button,
.support-button,
.back-to-admin {
  display: inline-flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #4f6471;
  font-size: 12.5px;
  font-weight: 650;
}

.view-switch:hover,
.back-to-admin:hover {
  border-color: #a8d2d3;
  background: var(--teal-soft);
  color: var(--teal-dark);
}

.view-switch svg {
  width: 15px;
}

.icon-button,
.support-button {
  position: relative;
  width: 36px;
  padding: 0;
}

.icon-button i {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #dd4a51;
}

.admin-content {
  width: 100%;
  max-width: 1740px;
  margin: 0 auto;
  padding: 26px 30px 34px;
}

.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  color: #71838e;
  font-size: 12px;
  font-weight: 600;
}

.breadcrumb svg {
  width: 13px;
  height: 13px;
}

.title-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.title-line h1,
.customer-welcome h1,
.lobby-heading h1 {
  margin: 0;
  color: #132b3c;
  font-size: clamp(25px, 2vw, 32px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.page-heading > div:first-child > p {
  margin: 7px 0 0;
  color: #607481;
  font-size: 13.5px;
}

.eyebrow {
  display: block;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .035em;
}

.mini-callbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.call-quality {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  padding: 0 7px;
  color: #607581;
  font-size: 12px;
  font-weight: 650;
}

.call-quality i {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: #3b9b76;
}

.call-quality i:nth-child(1) { height: 4px; }
.call-quality i:nth-child(2) { height: 7px; }
.call-quality i:nth-child(3) { height: 10px; }
.call-quality i:nth-child(4) { height: 13px; margin-right: 4px; }

.call-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(480px, .88fr);
  gap: 18px;
  align-items: stretch;
}

.video-stage-card,
.questionnaire-panel,
.panel,
.summary-card,
.customer-panel {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.video-stage-card {
  display: flex;
  min-height: 690px;
  flex-direction: column;
  overflow: hidden;
}

.video-stage {
  position: relative;
  flex: 1;
  min-height: 600px;
  overflow: hidden;
  background: #101a21;
}

.video-main-media,
.lobby-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 14, 23, .02), rgba(3, 14, 23, .34)),
    linear-gradient(145deg, #607984 0%, #324a55 45%, #172832 100%);
}

.customer-video {
  background-image:
    linear-gradient(180deg, rgba(3, 14, 23, .02), rgba(3, 14, 23, .34)),
    url("/video-call-customer-male-hu.png");
  background-position: center;
  background-size: cover;
}

.video-room-glow {
  position: absolute;
  z-index: 1;
  right: -100px;
  bottom: -160px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: rgba(77, 178, 177, .09);
  filter: blur(30px);
}

.video-placeholder-person {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: none;
  width: 360px;
  height: 470px;
  transform: translateX(-50%);
}

.video-placeholder-person .person-head {
  position: absolute;
  z-index: 2;
  top: 35px;
  left: 50%;
  width: 145px;
  height: 180px;
  transform: translateX(-50%);
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(145deg, #c99476, #936551);
  box-shadow: 0 -22px 0 -4px #3a2a27;
}

.video-placeholder-person .person-body {
  position: absolute;
  bottom: -70px;
  left: 50%;
  width: 350px;
  height: 310px;
  transform: translateX(-50%);
  border-radius: 48% 48% 0 0;
  background: linear-gradient(145deg, #547082, #283f4e);
}

.advisor-person .person-head {
  width: 68px;
  height: 82px;
  background: linear-gradient(145deg, #d9a584, #a97059);
  box-shadow: 0 -12px 0 -1px #4a312b;
}

.advisor-person .person-body {
  bottom: -34px;
  width: 170px;
  height: 145px;
  background: linear-gradient(145deg, #5a8291, #2a4e5e);
}

.video-name,
.preview-name {
  position: absolute;
  z-index: 5;
  bottom: 88px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(7, 18, 25, .7);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.video-name svg,
.preview-name svg {
  width: 13px;
  height: 13px;
}

.self-view {
  position: absolute;
  z-index: 5;
  top: 17px;
  right: 17px;
  width: 176px;
  height: 116px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.68);
  border-radius: 11px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.18)),
    url("/video-call-loan-officer-female-hu.png") center/cover;
  box-shadow: 0 10px 25px rgba(0,0,0,.24);
}

.self-view .video-placeholder-person {
  width: 160px;
  height: 170px;
}

.self-view > span {
  position: absolute;
  z-index: 3;
  right: 7px;
  bottom: 6px;
  left: 7px;
  padding: 4px 6px;
  border-radius: 5px;
  background: rgba(4, 18, 25, .58);
  color: #fff;
  font-size: 12px;
}

.video-controls,
.lobby-video-controls {
  position: absolute;
  z-index: 6;
  bottom: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(8, 19, 27, .76);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
}

.video-controls button,
.lobby-video-controls button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 11px;
  background: rgba(255,255,255,.1);
  color: #fff;
}

.video-controls button:hover {
  background: rgba(255,255,255,.18);
}

.video-controls button.hangup {
  width: 54px;
  background: #d94b50;
}

.video-controls button i {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ec5a60;
}

.call-note-row {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
}

.call-note-row > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-note-row > div > svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 9px;
  background: var(--teal-soft);
  color: var(--teal);
}

.call-note-row > div span,
.questionnaire-head > div {
  display: flex;
  flex-direction: column;
}

.call-note-row strong {
  font-size: 12.5px;
}

.call-note-row small {
  margin-top: 2px;
  color: #7c8b94;
  font-size: 12px;
}

.questionnaire-panel {
  display: flex;
  min-width: 0;
  height: 690px;
  flex-direction: column;
  overflow: hidden;
}

.questionnaire-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 19px 13px;
}

.questionnaire-head h2,
.panel-heading h2,
.customer-panel-head h2,
.canvas-heading h2 {
  margin: 3px 0 0;
  color: #173042;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.018em;
}

.questionnaire-head > button,
.panel-heading > button,
.preview-top > button,
.customer-summary > button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: #74858e;
}

.question-progress {
  padding: 0 19px 15px;
}

.question-progress > div,
.checklist-progress > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  color: #647985;
  font-size: 12px;
}

.question-progress > div strong,
.checklist-progress > div strong {
  color: var(--teal);
}

.question-progress [data-slot="progress"],
.checklist-progress [data-slot="progress"],
.preview-device [data-slot="progress"] {
  height: 5px;
  background: #dcebea;
}

.section-tabs {
  display: flex;
  gap: 3px;
  padding: 0 13px;
  border-bottom: 1px solid var(--line);
  border-top: 1px solid #edf1f3;
}

.section-tabs button {
  position: relative;
  display: flex;
  min-height: 43px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 5px;
  border: 0;
  background: transparent;
  color: #7a8a93;
  font-size: 12px;
  font-weight: 680;
}

.section-tabs button.active {
  color: var(--teal-dark);
}

.section-tabs button.active::after {
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--teal);
  content: "";
}

.section-tabs button.done {
  color: #3e8067;
}

.section-tabs button svg {
  width: 13px;
  height: 13px;
}

.question-scroll {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 15px;
  overflow: auto;
  padding: 17px 19px 13px;
}

.form-grid {
  display: grid;
  gap: 13px;
}

.two-columns {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field-label {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  color: #405663;
  font-size: 12px;
  font-weight: 700;
}

.field-label > span {
  color: #d14047;
}

.field-label small {
  margin-left: auto;
  color: #8b99a1;
  font-size: 12px;
  font-weight: 500;
}

.question-scroll input,
.question-editor input {
  height: 40px;
  border-color: #dbe4e8;
  border-radius: 8px;
  background: #fff;
  color: #253b49;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

.select-like {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border: 1px solid #dbe4e8;
  border-radius: 8px;
  background: #fff;
  color: #253b49;
  font-size: 13px;
  font-weight: 600;
}

.select-like svg {
  width: 15px;
  color: #84949d;
}

.currency-input {
  position: relative;
}

.currency-input input {
  padding-right: 42px;
}

.currency-input > span {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: #768993;
  font-size: 12px;
  font-weight: 650;
}

.inline-checks {
  display: flex;
  align-items: center;
  gap: 22px;
}

.inline-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5a6f7b;
  font-size: 12px;
}

.inline-checks [data-slot="checkbox"],
.admin-checklist [data-slot="checkbox"],
.editor-options [data-slot="checkbox"],
.consent-check [data-slot="checkbox"] {
  width: 17px;
  height: 17px;
  border-color: #bfccd2;
}

.question-divider {
  height: 1px;
  background: #e8edef;
}

.toggle-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.toggle-question > div {
  display: flex;
  flex-direction: column;
}

.toggle-question strong {
  color: #334a58;
  font-size: 12.5px;
}

.toggle-question small {
  margin-top: 2px;
  color: #7d8d96;
  font-size: 12px;
}

.switch {
  width: 38px;
  height: 22px;
  padding: 3px;
  border: 0;
  border-radius: 20px;
  background: #c9d3d7;
}

.switch span {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.18);
  transition: .18s ease;
}

.switch.on {
  background: var(--teal);
}

.switch.on span {
  transform: translateX(16px);
}

.soft-fields {
  margin-top: -3px;
  padding: 12px;
  border: 1px solid #dceceb;
  border-radius: 10px;
  background: #f6fbfb;
}

.question-scroll textarea,
.question-editor textarea {
  min-height: 61px;
  resize: none;
  border-color: #dbe4e8;
  border-radius: 8px;
  background: #fff;
  color: #425966;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: none;
}

.questionnaire-actions {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 17px;
  border-top: 1px solid var(--line);
  background: #fafcfc;
}

.questionnaire-actions > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5d766e;
  font-size: 12px;
  font-weight: 650;
}

.questionnaire-actions > span svg {
  width: 14px;
  height: 14px;
  color: var(--green);
}

.questionnaire-actions > div,
.heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

[data-slot="button"] {
  min-height: 38px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

[data-slot="button"][data-variant="default"] {
  background: var(--teal);
}

[data-slot="button"][data-variant="default"]:hover {
  background: var(--teal-dark);
}

[data-slot="button"][data-variant="outline"] {
  border-color: #d7e1e5;
  background: #fff;
  color: #405764;
}

.client-summary-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr .85fr;
  gap: 14px;
  margin-bottom: 16px;
}

.summary-card {
  display: flex;
  min-height: 105px;
  align-items: center;
  gap: 13px;
  padding: 17px;
}

.summary-card > div:nth-child(2) {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.summary-card > div:nth-child(2) > span,
.appointment-copy > span {
  margin-bottom: 3px;
  color: #7a8c96;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}

.summary-card > div:nth-child(2) > strong {
  color: #243c4b;
  font-size: 14.5px;
}

.summary-card > div:nth-child(2) > small {
  margin-top: 3px;
  overflow: hidden;
  color: #738690;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.large-avatar {
  width: 48px;
  height: 48px;
  font-size: 14px;
}

.summary-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
}

.summary-icon.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.summary-icon.teal {
  background: var(--teal-soft);
  color: var(--teal);
}

.summary-icon svg {
  width: 20px;
  height: 20px;
}

.ring-progress {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--teal) 0 72%, #e2eded 72% 100%);
}

.ring-progress::before {
  grid-area: 1/1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.ring-progress span {
  position: relative;
  z-index: 1;
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
}

.client-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .65fr);
  gap: 16px;
}

.panel {
  overflow: hidden;
}

.panel-heading {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border-bottom: 1px solid #e8edef;
}

.panel-heading.compact {
  min-height: 66px;
}

.segmented {
  display: flex;
  padding: 3px;
  border: 1px solid #e0e7ea;
  border-radius: 9px;
  background: #f4f7f8;
}

.segmented button {
  min-height: 29px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #70828c;
  font-size: 12px;
  font-weight: 650;
}

.segmented button.active {
  background: #fff;
  color: var(--teal-dark);
  box-shadow: 0 1px 4px rgba(18,45,60,.12);
}

.document-row {
  display: grid;
  min-height: 73px;
  grid-template-columns: 42px minmax(0, 1fr) auto 29px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f3;
}
.document-status-form { display: flex; align-items: center; gap: 6px; }
.document-status-form select { width: auto; min-height: 32px; padding: 0 26px 0 8px; font-size: 12px; }
@media (max-width: 760px) {
  .document-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .document-status-form { grid-column: 2/-1; }
}

.document-row:hover {
  background: #fbfcfd;
}

.document-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
}

.document-icon svg {
  width: 19px;
  height: 19px;
}

.document-icon.success {
  background: var(--green-soft);
  color: var(--green);
}

.document-icon.warning {
  background: var(--amber-soft);
  color: var(--amber);
}

.document-icon.danger {
  background: var(--red-soft);
  color: var(--red);
}

.document-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.document-copy strong {
  color: #324a58;
  font-size: 12.5px;
}

.document-copy small {
  margin-top: 3px;
  color: #80909a;
  font-size: 12px;
}

.document-row > button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #84949d;
}

.document-footer {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fafcfc;
}

.document-footer > span {
  color: #82919a;
  font-size: 12px;
}

.client-side-panels {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checklist-progress {
  padding: 15px 18px 6px;
}

.admin-checklist {
  display: flex;
  flex-direction: column;
  padding: 4px 18px 10px;
}

.admin-checklist label,
.editor-options label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f3;
}

.admin-checklist label:last-child {
  border-bottom: 0;
}

.admin-checklist label > span,
.editor-options label > span {
  display: flex;
  flex-direction: column;
}

.admin-checklist strong,
.editor-options strong {
  color: #3a505e;
  font-size: 12px;
}

.admin-checklist small,
.editor-options small {
  margin-top: 2px;
  color: #83939b;
  font-size: 12px;
}

.full-button {
  width: 100%;
}

.checklist-panel > [data-slot="button"] {
  width: calc(100% - 36px);
  margin: 0 18px 17px;
}

.activity-panel {
  padding-bottom: 9px;
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 18px;
}

.timeline-item > i {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px currentColor;
}

.timeline-item > i.teal { color: var(--teal); background: var(--teal); }
.timeline-item > i.blue { color: var(--blue); background: var(--blue); }
.timeline-item > i.amber { color: var(--amber); background: var(--amber); }

.timeline-item > div {
  display: flex;
  flex-direction: column;
}

.timeline-item strong {
  color: #405663;
  font-size: 12px;
}

.timeline-item small {
  margin-top: 2px;
  color: #84949d;
  font-size: 12px;
}

.builder-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 270px;
  gap: 15px;
  align-items: start;
}

.builder-sections {
  padding-bottom: 15px;
}

.builder-section-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.builder-section-list > button {
  display: grid;
  min-height: 53px;
  grid-template-columns: 17px minmax(0,1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #83939c;
  text-align: left;
}

.builder-section-list > button:hover {
  background: #f7f9fa;
}

.builder-section-list > button.active {
  border-color: #bfe2e1;
  background: #edf8f7;
  color: var(--teal);
}

.builder-section-list > button > svg:first-child {
  width: 14px;
  height: 14px;
  color: #a3b0b7;
}

.builder-section-list > button > span {
  display: flex;
  flex-direction: column;
}

.builder-section-list strong {
  color: #3f5664;
  font-size: 12px;
}

.builder-section-list button.active strong {
  color: var(--teal-dark);
}

.builder-section-list small {
  margin-top: 2px;
  color: #8898a0;
  font-size: 12px;
}

.builder-sections > [data-slot="button"] {
  width: calc(100% - 20px);
  margin: 0 10px;
}

.version-card {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 10px 0;
  padding: 11px;
  border-radius: 9px;
  background: #f4f7f8;
}

.version-card > svg {
  width: 17px;
  color: #6d828e;
}

.version-card > div {
  display: flex;
  flex-direction: column;
}

.version-card strong {
  font-size: 12px;
}

.version-card small {
  margin-top: 2px;
  color: #7d8d96;
  font-size: 12px;
}

.builder-canvas {
  padding: 17px;
}

.canvas-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 15px;
}

.canvas-heading > div > span {
  color: var(--teal);
  font-size: 12px;
  font-weight: 750;
}

.canvas-heading h2 {
  font-size: 20px;
}

.canvas-heading p {
  margin: 3px 0 0;
  color: #7c8c95;
  font-size: 12px;
}

.question-card {
  margin-top: 9px;
  border: 1px solid #e0e7ea;
  border-radius: 10px;
  background: #fff;
}

.question-card.collapsed,
.question-card-head {
  display: grid;
  min-height: 62px;
  grid-template-columns: 16px 30px minmax(0,1fr) auto 17px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
}

.question-card > svg:first-child,
.question-card-head > svg:first-child {
  width: 14px;
  color: #a2afb6;
}

.question-number {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 8px;
  background: #f1f5f6;
  color: #6e818c;
  font-size: 12px;
  font-weight: 800;
}

.question-card.collapsed > div,
.question-card-head > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.question-card strong {
  color: #364d5b;
  font-size: 12px;
}

.question-card small {
  margin-top: 2px;
  color: #83939c;
  font-size: 12px;
}

.question-card.expanded {
  border-color: #95d1cf;
  box-shadow: 0 0 0 2px rgba(8,126,130,.055);
}

.question-card-head {
  border-bottom: 1px solid #e2ebed;
  background: #f4fbfa;
}

.question-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.editor-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.editor-options label {
  padding: 1px 0;
  border-bottom: 0;
}

.condition-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid #dfe8ea;
  border-radius: 9px;
  background: #f8fafb;
}

.condition-row > svg {
  width: 17px;
  color: var(--teal);
}

.condition-row > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.condition-row strong {
  font-size: 12px;
}

.condition-row small {
  font-size: 12px;
}

.condition-row > button,
.danger-text {
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
}

.editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 3px;
}

.editor-footer > div {
  display: flex;
  gap: 7px;
}

.danger-text {
  color: #c54249;
}

.builder-preview {
  padding: 14px;
}

.preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.preview-top > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #617580;
  font-size: 12px;
  font-weight: 750;
}

.preview-top > span svg {
  width: 13px;
  color: #db4b51;
}

.preview-device {
  min-height: 520px;
  padding: 23px 15px;
  border: 6px solid #183141;
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(14,40,57,.13);
}

.preview-logo {
  margin-bottom: 31px;
}

.preview-kicker {
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
}

.preview-device h3 {
  margin: 4px 0 1px;
  color: #1e3747;
  font-size: 18px;
}

.preview-device > p {
  margin: 0 0 10px;
  color: #7a8b95;
  font-size: 12px;
}

.preview-field {
  margin: 24px 0 18px;
}

.preview-field label {
  display: block;
  margin-bottom: 6px;
  color: #425865;
  font-size: 12px;
  font-weight: 700;
}

.preview-field > div {
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid #b8d9d8;
  border-radius: 8px;
  color: #263f4e;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(8,126,130,.06);
}

.preview-field > div span {
  color: #758892;
  font-size: 12px;
}

.preview-field small {
  display: block;
  margin-top: 6px;
  color: #84949d;
  font-size: 12px;
}

.preview-device [data-slot="button"] {
  margin-top: 8px;
}

.preview-safe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
  color: #84949d;
  font-size: 12px;
}

.preview-safe svg {
  width: 11px;
  height: 11px;
}

.customer-app {
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 8%, rgba(81, 177, 178, .07), transparent 24%),
    #f6f9fa;
}

.customer-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  height: 72px;
  grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr);
  align-items: center;
  padding: 0 max(26px, calc((100vw - 1370px) / 2));
  border-bottom: 1px solid #dde6e9;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
}

.customer-header > nav {
  display: flex;
  height: 100%;
  align-items: stretch;
  gap: 22px;
}

.customer-header > nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #5c717e;
  font-size: 13px;
  font-weight: 650;
}

.customer-header > nav button.active {
  color: var(--teal-dark);
}

.customer-header > nav button.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--teal);
  content: "";
}

.customer-header > nav button span {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 99px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 12px;
}

.customer-header > nav button i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #df4c52;
}

.customer-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
}

.customer-help,
.customer-profile,
.customer-mobile-menu {
  display: flex;
  height: 39px;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #566c79;
  font-size: 12px;
  font-weight: 650;
}

.customer-help svg {
  width: 17px;
  color: var(--teal);
}

.customer-profile {
  padding-left: 11px;
  border-left: 1px solid #e1e7ea;
}

.customer-profile > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #dcefee;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
}

.customer-profile > svg {
  width: 14px;
}

.customer-mobile-menu {
  display: none;
}

.customer-main,
.lobby-main {
  width: min(1370px, calc(100% - 52px));
  margin: 0 auto;
  padding: 28px 0 42px;
}

.customer-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 21px;
}

.customer-welcome h1 {
  margin-top: 4px;
  font-size: 29px;
}

.customer-welcome p {
  margin: 6px 0 0;
  color: #657985;
  font-size: 13.5px;
}

.back-to-admin {
  height: 34px;
  border-style: dashed;
  background: rgba(255,255,255,.65);
  color: #74868f;
  font-size: 12px;
}

.back-to-admin svg {
  width: 13px;
}

.appointment-hero {
  display: grid;
  min-height: 135px;
  grid-template-columns: 94px minmax(300px,1.4fr) minmax(215px,.7fr) auto;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid #163d51;
  border-radius: 17px;
  background:
    radial-gradient(circle at 78% 0%, rgba(71,171,172,.24), transparent 35%),
    linear-gradient(115deg, #0b2c41 0%, #124157 60%, #0e3448 100%);
  color: #fff;
  box-shadow: 0 15px 35px rgba(12, 46, 66, .13);
}

.appointment-date {
  display: flex;
  width: 84px;
  height: 94px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 13px;
  background: rgba(255,255,255,.085);
  box-shadow: inset 0 1px rgba(255,255,255,.08);
}

.appointment-date span {
  color: #85d4d2;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
}

.appointment-date strong {
  margin: -2px 0 -1px;
  font-size: 35px;
  line-height: 1.15;
}

.appointment-date small {
  color: #b7cbd5;
  font-size: 12px;
}

.appointment-copy > span {
  color: #85d4d2;
}

.appointment-copy h2 {
  margin: 5px 0 9px;
  font-size: 22px;
  letter-spacing: -.025em;
}

.appointment-copy > div {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c6d7de;
  font-size: 12px;
}

.appointment-copy > div svg {
  width: 14px;
  color: #84cecc;
}

.appointment-copy > div i {
  width: 3px;
  height: 3px;
  margin: 0 4px;
  border-radius: 50%;
  background: #668391;
}

.advisor-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.12);
}

.advisor-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.18);
  font-size: 12px;
}

.advisor-chip > span {
  display: flex;
  flex-direction: column;
}

.advisor-chip small {
  color: #9ab4c0;
  font-size: 12px;
}

.advisor-chip strong {
  margin-top: 2px;
  font-size: 12.5px;
}

.appointment-actions {
  display: flex;
  min-width: 180px;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
}

.appointment-actions .status-pill {
  align-self: center;
  border-color: rgba(104,204,163,.22);
  background: rgba(44,134,95,.22);
  color: #9aebc5;
}

.appointment-actions [data-slot="button"] {
  background: #25a4a5;
}

.appointment-actions > button:last-child {
  border: 0;
  background: transparent;
  color: #a8c2cc;
  font-size: 12px;
  font-weight: 650;
}

.readiness-strip {
  display: grid;
  min-height: 120px;
  grid-template-columns: 78px minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 16px 0;
  padding: 16px 22px;
  border: 1px solid #dce8e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.readiness-ring {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--teal) 0 var(--progress), #e3eeee var(--progress) 360deg);
}

.readiness-ring::before {
  grid-area: 1/1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.readiness-ring > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.readiness-ring strong {
  color: var(--teal-dark);
  font-size: 15px;
}

.readiness-ring span {
  margin-top: 3px;
  color: #7f9098;
  font-size: 12px;
}

.readiness-copy h2 {
  margin: 0;
  color: #29414f;
  font-size: 15px;
}

.readiness-copy p {
  margin: 4px 0 10px;
  color: #70828c;
  font-size: 12px;
}

.readiness-steps {
  display: flex;
  max-width: 690px;
  align-items: center;
  gap: 8px;
}

.readiness-steps > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #93a0a6;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.readiness-steps > span svg {
  width: 13px;
  height: 13px;
}

.readiness-steps > span.done {
  color: #3b8063;
}

.readiness-steps > span.current {
  color: var(--teal-dark);
}

.readiness-steps > i {
  flex: 1;
  height: 1px;
  background: #dce5e8;
}

.customer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.42fr) minmax(320px,.58fr);
  gap: 16px;
}

.customer-panel {
  overflow: hidden;
}

.customer-panel-head {
  display: flex;
  min-height: 69px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #e8eef0;
}

.customer-task {
  display: grid;
  min-height: 114px;
  grid-template-columns: 43px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border-bottom: 1px solid #ebf0f2;
}

.customer-task.urgent {
  background: linear-gradient(90deg, #fffbf4, #fff 45%);
  box-shadow: inset 3px 0 #dda346;
}

.customer-task.complete {
  background: #fcfefd;
}

.task-status {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber);
}

.task-status.blue {
  background: var(--blue-soft);
  color: var(--blue);
}

.task-status.green {
  background: var(--green-soft);
  color: var(--green);
}

.task-status svg {
  width: 19px;
}

.customer-task > div:nth-child(2) > strong {
  color: #354c5a;
  font-size: 12.5px;
}

.customer-task > div:nth-child(2) > p {
  max-width: 630px;
  margin: 4px 0 7px;
  color: #73858f;
  font-size: 12px;
}

.customer-task > div:nth-child(2) > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-task > div:nth-child(2) > div > span:last-child {
  color: #8a989f;
  font-size: 12px;
}

.link-button,
.all-documents {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 700;
}

.all-documents {
  width: 100%;
  min-height: 54px;
  justify-content: center;
  color: #46606f;
}

.all-documents svg,
.link-button svg {
  width: 13px;
}

.customer-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message-panel {
  padding: 17px;
}

.message-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-head .advisor-avatar {
  width: 39px;
  height: 39px;
}

.message-head > div:last-child {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.message-head small {
  color: #536975;
  font-size: 12px;
  font-weight: 700;
}

.message-head strong {
  margin-top: 2px;
  color: #87969d;
  font-size: 12px;
  font-weight: 550;
}

.message-panel > p {
  margin: 13px 0;
  padding: 12px;
  border-radius: 10px;
  background: #f5f8f9;
  color: #4f6471;
  font-size: 12px;
  line-height: 1.55;
}

.message-panel > button,
.security-panel button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 750;
}

.message-panel > button svg {
  width: 13px;
}

.security-panel,
.quick-contact {
  display: flex;
  gap: 12px;
  padding: 17px;
}

.security-panel > svg,
.quick-contact > svg {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 10px;
  background: var(--green-soft);
  color: var(--green);
}

.security-panel h3,
.quick-contact h3 {
  margin: 1px 0 4px;
  color: #36505e;
  font-size: 12px;
}

.security-panel p,
.quick-contact p {
  margin: 0 0 7px;
  color: #71838e;
  font-size: 12px;
  line-height: 1.45;
}

.quick-contact {
  align-items: center;
}

.quick-contact > svg {
  background: var(--blue-soft);
  color: var(--blue);
}

.quick-contact > div {
  flex: 1;
}

.quick-contact button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #526874;
  font-size: 12px;
  font-weight: 700;
}

.customer-footer {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 max(26px, calc((100vw - 1370px) / 2));
  border-top: 1px solid #dde6e9;
  background: #fff;
  color: #87969e;
  font-size: 12px;
}

.customer-footer nav {
  display: flex;
  gap: 18px;
}

.customer-footer button {
  border: 0;
  background: transparent;
  color: #71838d;
  font-size: 12px;
}

.customer-footer > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #56806f;
}

.customer-footer svg {
  width: 12px;
}

.lobby-app {
  background:
    radial-gradient(circle at 50% 20%, rgba(61,167,167,.1), transparent 34%),
    #f3f7f8;
}

.lobby-main {
  width: min(1220px, calc(100% - 52px));
  padding-top: 22px;
}

.lobby-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #647984;
  font-size: 12px;
  font-weight: 650;
}

.lobby-back svg {
  width: 15px;
}

.lobby-heading {
  margin-bottom: 19px;
  text-align: center;
}

.lobby-heading h1 {
  margin-top: 4px;
  font-size: 29px;
}

.lobby-heading p {
  max-width: 680px;
  margin: 7px auto 0;
  color: #667b87;
  font-size: 12.5px;
}

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(390px,.75fr);
  gap: 17px;
  align-items: start;
}

.lobby-preview-card,
.advisor-waiting-card,
.consent-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.lobby-preview-card {
  overflow: hidden;
}

.lobby-video {
  position: relative;
  width: 100%;
  height: 484px;
  background-image:
    linear-gradient(180deg, rgba(3, 14, 23, .02), rgba(3, 14, 23, .23)),
    url("/video-call-customer-male-hu.png");
  background-position: center;
  background-size: cover;
}

.lobby-person {
  display: none;
}

.lobby-video > .status-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  border-color: rgba(146,231,193,.25);
  background: rgba(15,55,48,.7);
  color: #a5edc8;
  backdrop-filter: blur(8px);
}

.preview-name {
  bottom: 19px;
}

.lobby-video-controls {
  right: 17px;
  bottom: 16px;
  left: auto;
  transform: none;
}

.lobby-video-controls button {
  width: 38px;
  height: 38px;
}

.device-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
}

.device-check {
  display: grid;
  min-height: 73px;
  grid-template-columns: 31px minmax(0,1fr) 15px;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  background: #fff;
}

.device-check > div {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 8px;
  background: var(--green-soft);
  color: var(--green);
}

.device-check > div svg {
  width: 15px;
}

.device-check > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.device-check small {
  color: #88979f;
  font-size: 12px;
}

.device-check strong {
  margin-top: 2px;
  overflow: hidden;
  color: #445b68;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-check > svg {
  width: 13px;
  color: #96a4ab;
}

.lobby-side {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.advisor-waiting-card {
  display: grid;
  min-height: 108px;
  grid-template-columns: 55px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px;
}

.advisor-large {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg,#5eb4b6,#08777b);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.advisor-large i {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #36a56f;
}

.advisor-waiting-card > div:nth-child(2) {
  min-width: 0;
}

.advisor-waiting-card small {
  color: #758995;
  font-size: 12px;
}

.advisor-waiting-card h2 {
  margin: 2px 0 0;
  color: #2c4655;
  font-size: 15px;
}

.advisor-waiting-card p {
  margin: 1px 0 0;
  color: #85959d;
  font-size: 12px;
}

.consent-card {
  padding: 19px;
}

.consent-title {
  display: flex;
  align-items: center;
  gap: 11px;
}

.consent-title > div {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: var(--red-soft);
  color: var(--red);
}

.consent-title > div svg {
  width: 18px;
}

.consent-title > span {
  display: flex;
  flex-direction: column;
}

.consent-title small {
  color: #b34349;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .025em;
}

.consent-title h2 {
  margin: 2px 0 0;
  color: #2c4655;
  font-size: 17px;
}

.consent-card > p {
  margin: 13px 0;
  color: #647986;
  font-size: 12px;
  line-height: 1.55;
}

.consent-facts {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
  margin-bottom: 13px;
}

.consent-facts span {
  display: flex;
  min-height: 54px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid #e2e9ec;
  border-radius: 8px;
  background: #f8fafb;
  color: #658074;
  text-align: center;
}

.consent-facts svg {
  width: 15px;
  height: 15px;
}

.consent-facts strong {
  font-size: 12px;
  font-weight: 700;
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce5e8;
  border-radius: 9px;
  background: #fafcfc;
}

.consent-check.checked {
  border-color: #a9d9d7;
  background: #f2faf9;
}

.consent-check > span {
  display: flex;
  flex-direction: column;
}

.consent-check strong {
  color: #405864;
  font-size: 12px;
}

.consent-check small {
  margin-top: 3px;
  color: #7a8b94;
  font-size: 12px;
}

.consent-check small button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: inherit;
  text-decoration: underline;
}

.join-button {
  width: 100%;
  margin-top: 12px;
}

.join-button:disabled {
  background: #9bb6b7 !important;
  color: rgba(255,255,255,.8);
}

.consent-help {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 11px;
  color: #87969d;
  font-size: 12px;
  line-height: 1.4;
}

.consent-help svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  margin-top: 1px;
}

@media (max-width: 1280px) {
  .admin-sidebar {
    width: 220px;
  }

  .admin-main {
    width: calc(100% - 220px);
    margin-left: 220px;
  }

  .sidebar-brand-wrap {
    padding: 0 16px;
  }

  .admin-content {
    padding-right: 20px;
    padding-left: 20px;
  }

  .call-workspace {
    grid-template-columns: minmax(0,1fr) 465px;
  }

  .builder-layout {
    grid-template-columns: 225px minmax(470px,1fr);
  }

  .builder-preview {
    display: none;
  }

  .customer-header {
    grid-template-columns: auto 1fr auto;
    padding: 0 25px;
  }

  .customer-header > nav {
    justify-content: center;
  }
}

@media (max-width: 1020px) {
  .admin-sidebar {
    width: 76px;
  }

  .admin-main {
    width: calc(100% - 76px);
    margin-left: 76px;
  }

  .sidebar-brand-wrap {
    justify-content: center;
    padding: 0;
  }

  .admin-sidebar .brand > div:last-child,
  .sidebar-section-label,
  .admin-nav button span,
  .admin-nav button em,
  .storage-mini,
  .user-menu > span:nth-child(2),
  .user-menu > svg {
    display: none;
  }

  .admin-nav button {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
  }

  .admin-nav .live-dot {
    position: absolute;
    top: 9px;
    right: 10px;
  }

  .user-menu {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 13px 0;
  }

  .call-workspace,
  .client-layout {
    grid-template-columns: 1fr;
  }

  .video-stage-card {
    min-height: 560px;
  }

  .video-stage {
    min-height: 490px;
  }

  .questionnaire-panel {
    height: auto;
    min-height: 650px;
  }

  .client-summary-grid {
    grid-template-columns: 1fr 1fr;
  }

  .completion-summary {
    grid-column: 1/-1;
  }

  .builder-layout {
    grid-template-columns: 215px minmax(430px,1fr);
  }

  .customer-header > nav {
    gap: 12px;
  }

  .customer-help span,
  .customer-profile strong {
    display: none;
  }

  .appointment-hero {
    grid-template-columns: 82px 1fr auto;
  }

  .advisor-chip {
    display: none;
  }

  .customer-grid,
  .lobby-layout {
    grid-template-columns: 1fr;
  }

  .lobby-side {
    display: grid;
    grid-template-columns: .65fr 1.35fr;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .admin-sidebar {
    display: none;
  }

  .admin-main {
    width: 100%;
    margin-left: 0;
  }

  .admin-topbar {
    height: 58px;
    padding: 0 15px;
  }

  .mobile-menu {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  .admin-search {
    display: none;
  }

  .admin-content {
    padding: 18px 14px 28px;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .mini-callbar {
    width: 100%;
    overflow-x: auto;
  }

  .call-workspace,
  .client-summary-grid,
  .client-layout,
  .builder-layout {
    grid-template-columns: 1fr;
  }

  .video-stage-card {
    min-height: 410px;
  }

  .video-stage {
    min-height: 350px;
  }

  .self-view {
    width: 115px;
    height: 78px;
  }

  .call-note-row {
    flex-direction: column;
    align-items: stretch;
  }

  .two-columns,
  .editor-options {
    grid-template-columns: 1fr;
  }

  .builder-sections,
  .builder-preview {
    display: none;
  }

  .customer-header {
    height: 64px;
    grid-template-columns: 1fr auto;
    padding: 0 16px;
  }

  .customer-header .brand-mark {
    width: 34px;
    height: 34px;
  }

  .customer-header .brand strong {
    font-size: 14px;
  }

  .customer-header .brand > div:last-child span {
    font-size: 12px;
  }

  .customer-header > nav,
  .customer-help,
  .customer-profile {
    display: none;
  }

  .customer-mobile-menu {
    display: grid;
    width: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
  }

  .customer-main,
  .lobby-main {
    width: calc(100% - 28px);
    padding-top: 19px;
  }

  .customer-welcome {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-welcome h1,
  .lobby-heading h1 {
    font-size: 24px;
  }

  .back-to-admin {
    display: none;
  }

  .appointment-hero {
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 16px;
  }

  .appointment-date {
    width: 70px;
    height: 82px;
  }

  .appointment-copy h2 {
    font-size: 17px;
  }

  .appointment-actions {
    grid-column: 1/-1;
    min-width: 0;
  }

  .appointment-actions .status-pill {
    display: none;
  }

  .readiness-strip {
    grid-template-columns: 63px 1fr;
    gap: 12px;
    padding: 15px;
  }

  .readiness-ring {
    width: 58px;
    height: 58px;
  }

  .readiness-ring::before {
    width: 47px;
    height: 47px;
  }

  .readiness-strip > [data-slot="button"] {
    grid-column: 1/-1;
  }

  .readiness-steps {
    display: none;
  }

  .customer-task {
    grid-template-columns: 39px minmax(0,1fr);
    padding: 14px;
  }

  .customer-task > [data-slot="button"],
  .customer-task > .link-button {
    grid-column: 1/-1;
    width: 100%;
  }

  .customer-task > div:nth-child(2) > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .customer-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px;
  }

  .customer-footer nav {
    order: 3;
  }

  .lobby-heading {
    text-align: left;
  }

  .lobby-heading p {
    margin-left: 0;
  }

  .lobby-video {
    height: 330px;
  }

  .device-grid,
  .lobby-side {
    grid-template-columns: 1fr;
  }

  .advisor-waiting-card {
    grid-template-columns: 55px 1fr;
  }

  .advisor-waiting-card > .status-pill {
    grid-column: 1/-1;
  }

  .consent-facts {
    grid-template-columns: 1fr;
  }

  .consent-facts span {
    min-height: 42px;
    flex-direction: row;
  }
}

/* PHP alkalmazás komponensei */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
input, select, textarea {
  width: 100%;
  border: 1px solid #d7e2e7;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  outline: 0;
}
input, select { min-height: 42px; padding: 0 12px; }
textarea { min-height: 92px; padding: 11px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #58afb1; box-shadow: 0 0 0 3px rgba(8,126,130,.1); }
input[type="checkbox"] { width: 17px; height: 17px; min-height: auto; accent-color: var(--teal); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(8,126,130,.25); outline-offset: 2px; }
.block-muted, .muted { color: var(--ink-3); }
.block-muted { display: block; margin-top: 3px; font-size: 12px; }
.pad { padding: 0 18px 18px; }

.brand { text-decoration: none; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-size: 16px; font-weight: 750; letter-spacing: -.015em; }
.brand-copy > span { margin-top: 4px; color: var(--teal); font-size: 12px; font-weight: 750; letter-spacing: .025em; }
.brand-dark .brand-copy > span { color: #7cd3d1; }

.btn {
  display: inline-flex;
  min-height: 40px;
  width: auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition: .16s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { border-color: var(--teal); background: var(--teal); color: #fff; box-shadow: 0 5px 13px rgba(8,126,130,.14); }
.btn-primary:hover { border-color: var(--teal-dark); background: var(--teal-dark); transform: translateY(-1px); }
.btn-secondary { border-color: #d7e1e5; background: #fff; color: #405764; }
.btn-secondary:hover { border-color: #b9d2d5; background: #f8fbfb; color: var(--teal-dark); }
.btn-ghost { min-height: 34px; border-color: transparent; background: transparent; color: #607581; }
.btn-ghost:hover { background: #eef4f5; color: var(--teal-dark); }
.btn-small { min-height: 34px; padding: 0 10px; font-size: 12px; }
.btn-wide { width: 100%; }
.text-link, .person-link { color: var(--teal-dark); font-size: 12px; font-weight: 750; }
.text-link { display: inline-flex; align-items: center; gap: 5px; }
.text-link svg { width: 13px; }

.notification { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.notification > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; }
.notification svg { width: 15px; }
.notification p { flex: 1; margin: 0; font-size: 12px; font-weight: 650; }
.notification button { width: 28px; height: 28px; border: 0; background: transparent; color: inherit; font-size: 18px; }
.notification.success { border-color: #c9e9da; color: #1b714f; }
.notification.success > span { background: var(--green-soft); }
.notification.error { border-color: #f2c9cc; color: #a7353b; }
.notification.error > span { background: var(--red-soft); }
.flash-layer { position: fixed; z-index: 70; top: 83px; right: 24px; width: min(440px,calc(100% - 32px)); }
.flash-layer .notification + .notification, .customer-flash .notification + .notification { margin-top: 8px; }
.customer-flash { position: fixed; z-index: 70; top: 83px; right: 24px; width: min(440px,calc(100% - 32px)); }

.auth-body { background: #eff5f6; }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(390px,.9fr) minmax(520px,1.1fr); }
.auth-visual { position: relative; display: flex; min-height: 100vh; flex-direction: column; overflow: hidden; padding: 36px clamp(34px,5vw,76px); background: radial-gradient(circle at 15% 25%,rgba(52,166,166,.25),transparent 31%), radial-gradient(circle at 88% 80%,rgba(61,145,169,.18),transparent 29%), linear-gradient(145deg,#102e42,#092333 75%); color:#fff; }
.auth-visual::after { position:absolute; right:-170px; bottom:-180px; width:470px; height:470px; border:1px solid rgba(255,255,255,.07); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); content:""; }
.auth-visual-copy { position:relative; z-index:1; max-width:540px; margin:auto 0; }
.eyebrow.light { color:#7cd3d1; }
.auth-visual-copy h1 { margin:14px 0 18px; font-size:clamp(36px,4.4vw,62px); font-weight:760; letter-spacing:-.05em; line-height:1.02; }
.auth-visual-copy > p { max-width:490px; margin:0; color:#bed0d8; font-size:15px; line-height:1.65; }
.auth-trust-list { display:grid; max-width:500px; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:34px; }
.auth-trust-list span { display:flex; min-height:92px; flex-direction:column; justify-content:center; gap:9px; padding:14px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.045); color:#dce8ed; font-size:12px; }
.auth-trust-list svg { color:#71cfcd; }
.auth-security-note { position:relative; z-index:1; display:flex; align-items:center; gap:8px; color:#8ca5b1; font-size:12px; }
.auth-security-note svg { width:14px; color:#65c2c0; }
.auth-content { display:flex; min-height:100vh; flex-direction:column; align-items:center; justify-content:center; padding:44px 28px 20px; }
.auth-card-wrap { width:min(475px,100%); }
.auth-card-wrap > .notification { margin-bottom:12px; }
.auth-card { padding:34px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 20px 65px rgba(13,42,60,.1); }
.auth-card-heading h1, .auth-card > h1 { margin:6px 0 9px; color:#173246; font-size:28px; letter-spacing:-.035em; }
.auth-card-heading p, .auth-card > p { margin:0 0 24px; color:#687d89; font-size:12.5px; line-height:1.6; }
.stack-form { display:flex; flex-direction:column; gap:15px; }
.form-grid { display:grid; gap:14px; }
.form-grid.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-field { display:flex; min-width:0; flex-direction:column; gap:6px; color:#405764; font-size:12px; font-weight:750; }
.form-field small { color:#82929a; font-size:12px; font-weight:500; }
.input-with-icon { position:relative; }
.input-with-icon > svg { position:absolute; top:12px; left:12px; width:16px; color:#7d919b; }
.input-with-icon input { padding-left:38px; }
.check-field { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid #dce5e8; border-radius:10px; background:#fafcfc; }
.check-field > span { display:flex; flex-direction:column; color:#405864; font-size:12px; }
.check-field small { margin-top:3px; color:#7a8b94; font-size:12px; }
.auth-separator { display:flex; align-items:center; gap:11px; margin:20px 0 14px; color:#8a9aa2; font-size:12px; text-transform:uppercase; }
.auth-separator::before,.auth-separator::after { height:1px; flex:1; background:#e7edef; content:""; }
.auth-meta-row,.form-security-note { display:flex; align-items:flex-start; gap:8px; color:#758892; font-size:12px; line-height:1.5; }
.auth-meta-row svg,.form-security-note svg { width:14px; flex:0 0 auto; color:var(--teal); }
.auth-switch { margin:21px 0 0 !important; text-align:center; }
.auth-switch a { color:var(--teal-dark); font-weight:750; }
.auth-footer { margin-top:auto; padding-top:35px; color:#83949c; font-size:12px; }
.auth-footer a { text-decoration:underline; }
.auth-mobile-brand { display:none; }
.auth-icon { display:grid; width:48px; height:48px; margin-bottom:16px; place-items:center; border-radius:12px; background:var(--teal-soft); color:var(--teal); }
.auth-icon.danger { background:var(--red-soft); color:var(--red); }
.inline-alert { display:flex; align-items:flex-start; gap:9px; padding:11px 12px; border:1px solid; border-radius:9px; font-size:12px; line-height:1.5; }
.inline-alert svg { width:15px; flex:0 0 auto; }
.inline-alert.error { margin-bottom:16px; border-color:#f0c6c8; background:var(--red-soft); color:#a4373c; }
.inline-alert.info { border-color:#cfe0f5; background:var(--blue-soft); color:#3068ad; }
.invite-summary { margin:0 0 18px; padding:13px; border:1px solid #dce8e9; border-radius:11px; background:#f7fbfb; }
.invite-summary > div,.invite-summary > p { display:flex; align-items:center; gap:10px; margin:0; }
.invite-summary > p { margin-top:12px; padding-top:12px; border-top:1px solid #e0e9eb; }
.invite-summary > div > span:last-child,.invite-summary > p > span { display:flex; flex-direction:column; }
.invite-summary small { color:#7b8e97; font-size:12px; }
.invite-summary strong { color:#304b59; font-size:12px; }
.invite-summary em { color:#71858f; font-size:12px; font-style:normal; }
.setup-steps { display:flex; flex-direction:column; gap:13px; margin:22px 0 0; padding:0; list-style:none; }
.setup-steps li { display:flex; align-items:flex-start; gap:11px; }
.setup-steps li > span { display:grid; width:27px; height:27px; flex:0 0 auto; place-items:center; border-radius:8px; background:var(--teal-soft); color:var(--teal-dark); font-size:12px; font-weight:800; }
.setup-steps p { display:flex; flex-direction:column; margin:0; }
.setup-steps strong { font-size:12px; }.setup-steps small { margin-top:2px; color:#758892; font-size:12px; }

.admin-nav a { position:relative; display:grid; min-height:45px; grid-template-columns:23px 1fr auto; align-items:center; gap:9px; padding:0 12px; border-radius:10px; color:#b9c9d2; transition:.16s ease; }
.admin-nav a:hover { background:rgba(255,255,255,.055); color:#fff; }
.admin-nav a.active { background:linear-gradient(90deg,rgba(45,161,164,.25),rgba(45,161,164,.12)); color:#fff; box-shadow:inset 3px 0 #62d0cd; }
.admin-nav a svg { width:18px; color:#90a8b5; }.admin-nav a.active svg { color:#75d7d4; }
.admin-nav a span { font-size:14px; font-weight:600; }
.admin-nav a .live-dot { background:#ff656a; box-shadow:0 0 0 4px rgba(255,101,106,.12); }
.sidebar-close,.sidebar-backdrop { display:none; }
.user-menu form { margin-left:auto; }
.user-menu form button { display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:8px; background:transparent; color:#849ba8; }
.user-menu form button:hover { background:rgba(255,255,255,.07); color:#fff; }
.topbar-profile { display:none; align-items:center; gap:8px; }
.topbar-profile > span { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); font-size:12px; font-weight:800; }
.admin-search input { min-height:auto; padding:0; border:0; background:transparent; box-shadow:none; }
.admin-search input:focus { box-shadow:none; }
.view-switch { display:inline-flex; align-items:center; gap:7px; }
.page-heading > div:first-child > h1,.page-heading > div:first-child > .title-line h1 { margin:0; color:#132b3c; font-size:clamp(25px,2vw,32px); font-weight:760; letter-spacing:-.035em; line-height:1.12; }
.heading-actions form { margin:0; }
.ring-progress { background:conic-gradient(var(--teal) 0 var(--progress),#e2eded var(--progress) 360deg); }
.summary-icon.amber { background:var(--amber-soft); color:var(--amber); }

.dashboard-heading { align-items:flex-end; }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.stat-card { display:flex; min-height:126px; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }
.stat-card > div { display:flex; flex:1; flex-direction:column; }.stat-card small { color:#768b96; font-size:12px; font-weight:750; }.stat-card strong { color:#213d4d; font-size:26px; line-height:1.1; }.stat-card p { margin:3px 0 0; color:#81919a; font-size:12px; }.stat-card > a { display:grid; width:31px; height:31px; place-items:center; border:1px solid #e0e7ea; border-radius:8px; color:#6b818c; }.stat-card > a svg { width:14px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr); gap:16px; }
.admin-list-row { display:grid; min-height:76px; grid-template-columns:54px minmax(0,1fr) auto auto; align-items:center; gap:13px; padding:11px 17px; border-bottom:1px solid #edf1f3; }
.time-tile { display:flex; width:50px; height:48px; flex-direction:column; align-items:center; justify-content:center; border-radius:9px; background:var(--teal-soft); color:var(--teal-dark); }.time-tile strong { font-size:13px; }.time-tile small { font-size:12px; }
.admin-list-row h3 { margin:0; color:#314a59; font-size:12.5px; }.admin-list-row p { margin:3px 0 0; color:#7a8d96; font-size:12px; }
.compact-document-list > a { display:grid; min-height:68px; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #edf1f3; }.compact-document-list > a:hover { background:#fbfcfd; }.compact-document-list > a > span:nth-child(2) { display:flex; min-width:0; flex-direction:column; }.compact-document-list strong { overflow:hidden; color:#354e5c; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.compact-document-list small { margin-top:2px; color:#7e9099; font-size:12px; }
.empty-state { display:flex; min-height:190px; align-items:center; justify-content:center; flex-direction:column; gap:7px; padding:24px; color:#7a8f99; text-align:center; }.empty-state > svg { width:27px; height:27px; color:#75aaa9; }.empty-state h3 { margin:0; color:#3e5866; font-size:13px; }.empty-state p { max-width:330px; margin:0; font-size:12px; }.empty-state.small { min-height:90px; }.empty-state.small > svg { width:20px; }

.admin-two-column { display:grid; grid-template-columns:minmax(440px,.8fr) minmax(540px,1.2fr); gap:16px; align-items:start; }
.invite-result { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; padding:14px 16px; border-color:#bfe3d3; background:#f5fbf8; }.invite-result > div { display:flex; min-width:0; align-items:center; gap:10px; }.invite-result > div > svg { color:var(--green); }.invite-result > div > span { display:flex; min-width:0; flex-direction:column; }.invite-result small { color:#628075; font-size:12px; }.invite-result strong { overflow:hidden; color:#1c5b43; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.invite-form-panel { padding-bottom:18px; }.invite-form-panel > form { padding:18px; }
.document-type-picker { margin:0; padding:13px; border:1px solid #dfe7eb; border-radius:11px; }.document-type-picker legend { padding:0 5px; color:#405764; font-size:12px; font-weight:800; }.document-type-picker > p { margin:0 0 10px; color:#7a8c96; font-size:12px; }.document-type-picker > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.document-type-picker label { display:flex; align-items:flex-start; gap:8px; padding:9px; border:1px solid #e5ebed; border-radius:8px; background:#fbfcfc; }.document-type-picker label > span { display:flex; flex-direction:column; }.document-type-picker strong { color:#425966; font-size:12px; }.document-type-picker small { margin-top:2px; color:#85949b; font-size:12px; line-height:1.3; }
.invitation-list { max-height:720px; overflow:auto; }.invitation-list article { display:grid; min-height:78px; grid-template-columns:38px minmax(0,1fr) auto auto; align-items:center; gap:10px; padding:11px 15px; border-bottom:1px solid #edf1f3; }.invitation-list article > div { display:flex; min-width:0; flex-direction:column; }.invitation-list strong { color:#344d5b; font-size:12px; }.invitation-list small,.invitation-list em { overflow:hidden; color:#798c95; font-size:12px; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }.invitation-list em { margin-top:3px; color:#99a5aa; font-size:12px; }

.table-panel { overflow:hidden; }.table-toolbar { display:flex; min-height:70px; align-items:center; justify-content:space-between; gap:18px; padding:14px 18px; border-bottom:1px solid #e8edef; }.table-toolbar h2 { margin:0; font-size:15px; }.table-toolbar p { margin:3px 0 0; color:#7e9099; font-size:12px; }.table-toolbar > span { color:#7c8d96; font-size:12px; }.table-search { display:flex; width:min(570px,100%); align-items:center; gap:8px; }.table-search > svg { width:16px; color:#80929b; }.table-search input { flex:1; }.responsive-table { width:100%; overflow-x:auto; }.responsive-table table { width:100%; border-collapse:collapse; }.responsive-table th { height:43px; padding:0 14px; border-bottom:1px solid #e7edef; background:#f8fafb; color:#7a8d97; font-size:12px; font-weight:800; letter-spacing:.025em; text-align:left; white-space:nowrap; }.responsive-table td { min-width:105px; padding:12px 14px; border-bottom:1px solid #edf1f3; color:#506773; font-size:12px; vertical-align:middle; }.responsive-table tbody tr:hover { background:#fbfcfd; }.person-cell,.file-cell { display:flex; min-width:200px; align-items:center; gap:10px; }.person-cell > span:last-child,.file-cell > span:last-child { display:flex; min-width:0; flex-direction:column; }.person-cell strong,.file-cell strong { color:#314b59; font-size:12px; }.person-cell small,.file-cell small { max-width:280px; overflow:hidden; color:#7c8e97; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }.table-actions { display:flex; align-items:center; gap:6px; }.table-actions form { display:flex; align-items:center; gap:5px; }.table-actions select { width:auto; min-height:34px; padding:0 28px 0 8px; font-size:12px; }
.filter-pills { display:flex; flex-wrap:wrap; gap:5px; }.filter-pills a { padding:7px 10px; border-radius:8px; color:#6c818c; font-size:12px; font-weight:700; }.filter-pills a.active { background:var(--teal-soft); color:var(--teal-dark); }
.file-cell .document-icon { width:37px; height:37px; }.document-icon.info { background:var(--blue-soft); color:var(--blue); }.document-icon.neutral { background:#eef2f4; color:#71838e; }

.secure-view-label { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px dashed #cddbdd; border-radius:9px; background:rgba(255,255,255,.6); color:#70848e; font-size:12px; font-weight:650; }.secure-view-label svg { width:13px; color:var(--teal); }
.icon-link { display:grid; width:29px; height:29px; place-items:center; border-radius:7px; color:#68808b; }.icon-link:hover { background:var(--teal-soft); color:var(--teal-dark); }
.checklist-progress .progress,.progress { display:block; height:5px; overflow:hidden; border-radius:99px; background:#e4edef; }.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#53b8b8); transition:width .2s ease; }

.modal[hidden] { display:none; }.modal { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:20px; background:rgba(6,25,36,.58); backdrop-filter:blur(4px); }.modal-card { position:relative; width:min(510px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:27px; border:1px solid rgba(255,255,255,.25); border-radius:16px; background:#fff; box-shadow:0 25px 80px rgba(5,24,35,.3); }.modal-card.wide { width:min(720px,100%); }.modal-card h2 { margin:5px 0 18px; color:#25404f; font-size:21px; }.modal-close { position:absolute; top:14px; right:14px; display:grid; width:31px; height:31px; place-items:center; border:0; border-radius:8px; background:#f0f4f5; color:#667a85; font-size:20px; }

.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.template-card { padding:19px; }.template-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }.template-card h2 { margin:7px 0 5px; color:#284453; font-size:16px; }.template-card > p { margin:0 0 18px; color:#748893; font-size:12px; }.template-card > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; border-top:1px solid #e8edef; }.template-card > div:last-child small { color:#8a989f; font-size:12px; }
.builder-section-list a { display:grid; min-height:54px; grid-template-columns:18px 1fr auto; align-items:center; gap:7px; padding:7px 9px; border-radius:8px; color:#5f747f; }.builder-section-list a:hover { background:#f3f7f8; }.builder-section-list a.active { background:var(--teal-soft); color:var(--teal-dark); }.builder-section-list a > span:nth-child(2) { display:flex; flex-direction:column; }.builder-section-list a strong { font-size:12px; }.builder-section-list a small { color:#87969e; font-size:12px; }.drag-icon { color:#9baaaf; font-size:12px; letter-spacing:-3px; }
.builder-sections > .btn { width:calc(100% - 26px); margin:12px 13px; }.builder-question-list { padding:13px; }.question-card { padding:0; }.question-card + .question-card { margin-top:9px; }.question-card > summary { display:grid; min-height:63px; grid-template-columns:18px 27px minmax(0,1fr) auto 18px; align-items:center; gap:9px; padding:10px 12px; cursor:pointer; list-style:none; }.question-card > summary::-webkit-details-marker { display:none; }.question-card > summary > span:nth-child(3) { display:flex; flex-direction:column; }.question-card > summary strong { color:#3b5260; font-size:12px; }.question-card > summary small { margin-top:2px; color:#84939b; font-size:12px; }.question-card[open] > summary { border-bottom:1px solid #e5ecee; }.question-card[open] > summary > svg:last-child { transform:rotate(180deg); }.question-editor { display:flex; flex-direction:column; gap:13px; padding:15px; background:#fbfcfd; }
.editor-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.editor-options label { display:flex; align-items:flex-start; gap:8px; padding:9px; border:1px solid #e3eaec; border-radius:8px; background:#fff; }.editor-options label > span { display:flex; flex-direction:column; }.editor-options strong { color:#465d69; font-size:12px; }.editor-options small { color:#87969d; font-size:12px; }.editor-footer { display:flex; align-items:center; justify-content:space-between; }

.call-workspace > .video-stage-card { min-width:0; }.video-stage video,.lobby-video video,.self-view video { position:absolute; z-index:2; inset:0; width:100%; height:100%; object-fit:cover; background:transparent; }.video-fallback { position:absolute; z-index:1; inset:0; background-position:center; background-size:cover; }.customer-person-photo { background-image:linear-gradient(180deg,rgba(3,14,23,.02),rgba(3,14,23,.34)),url("../img/customer.png"); }.advisor-person-photo { background-image:linear-gradient(180deg,rgba(3,14,23,.02),rgba(3,14,23,.34)),url("../img/advisor.png"); }.video-stage > .video-fallback { opacity:.9; }.self-view .video-fallback { opacity:.75; }.call-connection-state { position:absolute; z-index:5; top:15px; right:15px; padding:6px 9px; border:1px solid rgba(255,255,255,.17); border-radius:99px; background:rgba(8,31,43,.6); color:#cfe0e6; font-size:12px; backdrop-filter:blur(8px); }.video-controls a { display:grid; width:42px; height:42px; place-items:center; border:0; border-radius:50%; background:rgba(20,33,42,.72); color:#fff; }.video-controls button.muted,.video-controls button.off { background:#c94148; }.record-control { color:#ff6b70 !important; }.record-control.recording { background:#c94148 !important; color:#fff !important; animation:recordPulse 1.3s infinite; }.record-control.disabled { opacity:.45; }.call-documents-menu { position:relative; }.call-documents-menu summary { list-style:none; }.call-documents-menu summary::-webkit-details-marker { display:none; }.call-documents-menu > div { position:absolute; z-index:20; right:0; bottom:43px; width:310px; max-height:300px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-md); }.call-documents-menu > div > span { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px; border-bottom:1px solid #edf1f3; }.call-documents-menu strong { color:#405865; font-size:12px; }.call-documents-menu a { color:var(--teal-dark); font-size:12px; font-weight:750; }.call-documents-menu small { color:#87959c; font-size:12px; }
.question-section[hidden] { display:none; }.question-section-intro { margin-bottom:15px; padding-bottom:12px; border-bottom:1px solid #e8edef; }.question-section-intro > span { color:var(--teal); font-size:12px; font-weight:800; }.question-section-intro h3 { margin:3px 0; color:#314b59; font-size:15px; }.question-section-intro p { margin:0; color:#7b8d96; font-size:12px; }.call-field { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }.call-field > span:first-child { color:#405764; font-size:12px; font-weight:750; }.call-field > span em { margin-left:3px; color:var(--red); font-style:normal; }.call-field > span small { float:right; color:#96a2a8; font-size:12px; font-weight:500; }.call-field input,.call-field select { min-height:39px; font-size:12px; }.call-field textarea { font-size:12px; }.call-input-wrap { position:relative; }.call-input-wrap i { position:absolute; top:12px; right:11px; color:#71848e; font-size:12px; font-style:normal; }.call-input-wrap:has(i) input { padding-right:65px; }.field-help { margin-top:-2px; color:#87979e; font-size:12px; }.save-state.saving { color:var(--amber); }.save-state.error { color:var(--red); }
@keyframes recordPulse { 50% { box-shadow:0 0 0 7px rgba(201,65,72,.15); } }

.customer-header > nav a { position:relative; display:flex; align-items:center; gap:6px; padding:0 3px; color:#5c717e; font-size:13px; font-weight:650; }.customer-header > nav a.active { color:var(--teal-dark); }.customer-header > nav a.active::after { position:absolute; right:0; bottom:0; left:0; height:3px; border-radius:3px 3px 0 0; background:var(--teal); content:""; }.customer-header > nav a i { width:6px; height:6px; border-radius:50%; background:#df4c52; }
.customer-help { text-decoration:none; }.customer-profile { cursor:default; }.customer-profile form button { display:grid; width:29px; height:29px; place-items:center; border:0; border-radius:7px; background:transparent; color:#81929a; }.customer-profile form button:hover { background:#eef4f5; color:var(--teal-dark); }.customer-mobile-logout { display:none; }
.appointment-actions > a:last-child { color:#a8c2cc; font-size:12px; font-weight:650; text-align:center; }.appointment-actions .btn-primary { background:#25a4a5; color:#fff; }.readiness-strip > .btn { align-self:center; }.customer-task > .btn { align-self:center; }.customer-task .task-status.info { background:var(--blue-soft); color:var(--blue); }.customer-task .task-status.warning { background:var(--amber-soft); color:var(--amber); }.customer-task .task-status.danger { background:var(--red-soft); color:var(--red); }.customer-task .task-status.success { background:var(--green-soft); color:var(--green); }.all-documents { display:flex; align-items:center; justify-content:center; gap:6px; }.message-panel > a { display:flex; align-items:center; gap:5px; color:var(--teal-dark); font-size:12px; font-weight:750; }.message-panel > a svg { width:13px; }.security-panel a,.quick-contact a { color:var(--teal-dark); font-size:12px; font-weight:750; text-decoration:underline; }.customer-footer a { color:inherit; }
.empty-appointment { display:flex; min-height:110px; align-items:center; gap:16px; padding:18px 22px; }.empty-appointment > div:nth-child(2) { flex:1; }.empty-appointment h2 { margin:3px 0; color:#304b5a; font-size:16px; }.empty-appointment p { margin:0; color:#738792; font-size:12px; }
.customer-subpage { min-height:calc(100vh - 150px); }.customer-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px; }.customer-page-heading h1 { margin:4px 0; color:#183447; font-size:29px; letter-spacing:-.035em; }.customer-page-heading p { margin:0; color:#6e828d; font-size:12px; }.compact-readiness { display:flex; align-items:baseline; gap:5px; padding:10px 14px; border:1px solid #cce1e1; border-radius:11px; background:#fff; }.compact-readiness strong { color:var(--teal-dark); font-size:20px; }.compact-readiness span { color:#7c8d95; font-size:12px; }
.document-page-toolbar { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:15px; padding:14px 18px; border-bottom:1px solid #e8edef; }.document-page-toolbar h2 { margin:0; font-size:15px; }.document-page-toolbar p { margin:2px 0 0; color:#7f9199; font-size:12px; }.customer-document-item { display:grid; min-height:116px; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:14px; padding:17px 19px; border-bottom:1px solid #edf1f3; scroll-margin-top:90px; }.customer-document-item:target { background:#f3fafa; }.customer-document-item .document-copy h2 { margin:5px 0 3px; color:#334d5b; font-size:13px; }.customer-document-item .document-copy p { margin:0 0 4px; color:#71858f; font-size:12px; }.customer-document-item .document-copy small { color:#87969d; font-size:12px; }.document-item-actions { display:flex; align-items:center; gap:8px; }.upload-inline-form { display:flex; align-items:center; gap:6px; }.upload-inline-form label input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.appointments-customer-panel { padding:0 18px; }.appointment-list-item { display:grid; min-height:120px; grid-template-columns:78px minmax(0,1fr) auto; align-items:center; gap:18px; padding:18px 5px; border-bottom:1px solid #e8edef; }.appointment-list-date { display:flex; width:68px; height:68px; flex-direction:column; align-items:center; justify-content:center; border-radius:13px; background:var(--teal-soft); color:var(--teal-dark); }.appointment-list-date strong { font-size:24px; line-height:1; }.appointment-list-date span { margin-top:4px; font-size:12px; }.appointment-list-item h2 { margin:5px 0 4px; color:#304a59; font-size:14px; }.appointment-list-item p { display:flex; align-items:center; gap:5px; margin:0; color:#667d89; font-size:12px; }.appointment-list-item p svg { width:13px; }.appointment-list-item small { color:#84949c; font-size:12px; }
.message-workspace { width:min(900px,100%); margin:0 auto; }.message-thread { display:flex; min-height:360px; max-height:580px; flex-direction:column; gap:16px; overflow:auto; padding:24px; background:#f9fbfb; }.message-bubble { display:flex; max-width:78%; align-items:flex-end; gap:8px; }.message-bubble.own { align-self:flex-end; flex-direction:row-reverse; }.message-avatar { display:grid; width:32px; height:32px; flex:0 0 auto; place-items:center; border-radius:50%; background:var(--teal-soft); color:var(--teal-dark); font-size:12px; font-weight:800; }.message-bubble > div:last-child { padding:11px 13px; border:1px solid #dfe7eb; border-radius:13px 13px 13px 3px; background:#fff; }.message-bubble.own > div:last-child { border-color:#0b8488; border-radius:13px 13px 3px 13px; background:var(--teal); color:#fff; }.message-bubble header { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:5px; }.message-bubble header strong { font-size:12px; }.message-bubble header time { color:#8a999f; font-size:12px; }.message-bubble.own header time { color:rgba(255,255,255,.7); }.message-bubble p { margin:0; font-size:12px; line-height:1.55; }.message-compose { padding:18px; border-top:1px solid #e3eaec; }.message-compose > label { display:block; margin-bottom:6px; color:#405764; font-size:12px; font-weight:750; }.message-compose textarea { min-height:95px; }.message-compose > div { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:9px; }.message-compose small { color:#84959d; font-size:12px; }
.lobby-video { background-image:none; }.lobby-video .video-fallback { opacity:1; }.consent-check a { color:var(--teal-dark); text-decoration:underline; }.consent-check input { margin-top:2px; flex:0 0 auto; }.consent-card form { margin:0; }
.customer-call-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:16px; }.customer-call-heading h1 { margin:3px 0 0; color:#173346; font-size:24px; }.customer-call-room { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; }.customer-call-stage { min-height:680px; border-radius:16px; box-shadow:var(--shadow-md); }.call-info-panel { padding:20px; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:var(--shadow-sm); }.call-info-panel h2 { margin:7px 0 4px; color:#2f4958; font-size:15px; }.call-info-panel > p { margin:0 0 20px; color:#748792; font-size:12px; }.privacy-call-note { display:flex; align-items:flex-start; gap:9px; margin:0 0 17px; padding:11px; border-radius:9px; background:var(--green-soft); color:var(--green); }.privacy-call-note > span { display:flex; flex-direction:column; }.privacy-call-note strong { font-size:12px; }.privacy-call-note small { margin-top:2px; color:#628073; font-size:12px; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.settings-panel { padding-bottom:18px; }.settings-panel > .stack-form { padding:18px; }.settings-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; }.settings-actions > span { display:flex; align-items:center; gap:7px; color:#768994; font-size:12px; }.settings-actions > span svg { width:13px; color:var(--teal); }
.event-code { padding:4px 6px; border-radius:6px; background:#eef4f5; color:#32515f; font-size:12px; }.metadata-details summary { color:var(--teal-dark); font-size:12px; font-weight:750; }.metadata-details pre { max-width:360px; overflow:auto; padding:8px; border-radius:7px; background:#102c3e; color:#d4e4e9; font-size:12px; }

@media (max-width: 1180px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .dashboard-grid,.admin-two-column { grid-template-columns:1fr; }
  .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .customer-call-room { grid-template-columns:1fr; }.call-info-panel { display:none; }
}

@media (max-width: 1020px) {
  .topbar-profile { display:flex; }.view-switch,.icon-button { display:none; }
  .customer-header > nav a { font-size:12px; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-actions { grid-column:auto; }
}

@media (max-width: 760px) {
  .auth-shell { display:block; }.auth-visual { display:none; }.auth-content { min-height:100vh; justify-content:flex-start; padding:22px 16px; }.auth-mobile-brand { display:block; width:100%; margin-bottom:26px; }.auth-card { padding:23px 18px; }.auth-footer { text-align:center; }.auth-trust-list { grid-template-columns:1fr; }.form-grid.two-columns,.document-type-picker > div { grid-template-columns:1fr; }
  .admin-sidebar { z-index:90; display:flex; width:265px; transform:translateX(-105%); transition:transform .2s ease; }.admin-body.sidebar-open .admin-sidebar { transform:translateX(0); }.sidebar-close { position:absolute; top:21px; right:10px; display:grid; width:32px; height:32px; place-items:center; border:0; border-radius:8px; background:rgba(255,255,255,.06); color:#fff; font-size:22px; }.sidebar-backdrop { position:fixed; z-index:80; inset:0; border:0; background:rgba(4,21,31,.55); }.admin-body.sidebar-open .sidebar-backdrop { display:block; }.admin-main { width:100%; margin-left:0; }.topbar-profile strong { display:none; }.admin-topbar { padding:0 14px; }.flash-layer,.customer-flash { top:72px; right:16px; }
  .page-heading,.dashboard-heading { align-items:flex-start; flex-direction:column; }.page-heading .heading-actions { width:100%; }.page-heading .heading-actions .btn,.page-heading > .btn { flex:1; }
  .stats-grid { grid-template-columns:1fr; }.stat-card { min-height:100px; }.dashboard-grid { grid-template-columns:1fr; }.admin-list-row { grid-template-columns:50px minmax(0,1fr) auto; }.admin-list-row > .status-pill { display:none; }.admin-list-row > .btn { grid-column:2/-1; }
  .admin-two-column,.template-grid { grid-template-columns:1fr; }.invite-result { align-items:stretch; flex-direction:column; }.invitation-list article { grid-template-columns:38px 1fr auto; }.invitation-list article form { grid-column:2/-1; }.responsive-table { overflow-x:auto; }.responsive-table table { min-width:820px; }.table-toolbar { align-items:flex-start; flex-direction:column; }.table-search { width:100%; }
  .client-summary-grid { grid-template-columns:1fr; }.client-layout { grid-template-columns:1fr; }.builder-layout { grid-template-columns:1fr; }.builder-sections { display:block; }.builder-preview { display:none; }.editor-options { grid-template-columns:1fr; }
  .call-workspace { grid-template-columns:1fr; }.video-stage-card { min-height:410px; }.video-stage { min-height:380px; }.questionnaire-panel { min-height:650px; }.section-tabs { overflow-x:auto; }.questionnaire-actions { align-items:stretch; flex-direction:column; }.questionnaire-actions > div { display:grid; grid-template-columns:1fr 1fr; }.call-documents-menu > div { right:auto; left:0; }
  .customer-header > nav { position:fixed; z-index:80; top:64px; right:0; left:0; display:none; height:auto; flex-direction:column; gap:0; padding:10px 16px 15px; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 15px 30px rgba(13,42,60,.12); }.customer-body.customer-nav-open .customer-header > nav { display:flex; }.customer-header > nav a { min-height:43px; padding:0 8px; border-bottom:1px solid #eef2f3; }.customer-header > nav a.active::after { top:9px; right:auto; bottom:9px; left:0; width:3px; height:auto; }.customer-mobile-logout { display:block; }.customer-mobile-logout button { width:100%; min-height:43px; border:0; background:transparent; color:var(--red); text-align:left; }
  .customer-head-actions .customer-profile { display:none; }.customer-head-actions .customer-help { display:none; }.customer-main,.lobby-main { width:calc(100% - 28px); }.customer-welcome { align-items:flex-start; flex-direction:column; }.appointment-hero { grid-template-columns:72px 1fr; }.advisor-chip { grid-column:1/-1; padding:12px 0 0; border-top:1px solid rgba(255,255,255,.12); border-left:0; }.appointment-actions { grid-column:1/-1; }.readiness-strip { grid-template-columns:63px 1fr; }.readiness-strip > .btn { grid-column:1/-1; }.customer-grid { grid-template-columns:1fr; }.customer-page-heading { align-items:flex-start; flex-direction:column; }.customer-document-item { grid-template-columns:40px 1fr; }.document-item-actions { grid-column:1/-1; justify-content:flex-end; }.appointment-list-item { grid-template-columns:65px 1fr; }.appointment-list-item > .btn { grid-column:1/-1; }.message-bubble { max-width:94%; }.message-compose > div { align-items:stretch; flex-direction:column; }.customer-call-stage { min-height:520px; }
  .customer-footer { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 430px) {
  .brand-copy strong { font-size:14px; }.brand-copy > span { font-size:12px; }
  .admin-content { padding:17px 12px 28px; }.page-heading > div:first-child > h1,.page-heading > div:first-child > .title-line h1 { font-size:24px; }
  .heading-actions { width:100%; flex-direction:column; }.heading-actions .btn,.heading-actions form,.heading-actions form .btn { width:100%; }
  .title-line { align-items:flex-start; flex-direction:column; }
  .mini-callbar .status-pill:nth-child(2) { display:none; }.call-heading { gap:12px; }.call-workspace { gap:12px; }.video-stage { min-height:330px; }.video-controls { gap:7px; }.video-controls button,.video-controls a { width:38px; height:38px; }.self-view { width:105px; height:72px; }.call-note-row { padding:11px; }
  .customer-welcome h1,.customer-page-heading h1,.lobby-heading h1 { font-size:23px; }.appointment-copy > div { flex-wrap:wrap; }.readiness-copy p { margin-bottom:0; }.customer-task { grid-template-columns:37px 1fr; }.customer-task > .btn,.customer-task > .link-button { grid-column:1/-1; width:100%; }.lobby-video { height:310px; }.device-grid { grid-template-columns:1fr; }.consent-facts { grid-template-columns:1fr; }.consent-facts span { min-height:40px; flex-direction:row; }.customer-call-stage { min-height:430px; }.customer-call-heading { align-items:flex-start; flex-direction:column; }
}

/* ---------- Publikus marketing oldalak ---------- */
.btn-large { min-height: 50px; padding: 0 22px; font-size: 14px; }

.public-body { background: var(--surface); }
.public-app { display: flex; min-height: 100vh; flex-direction: column; }

.public-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 clamp(18px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}

.public-nav { display: flex; align-items: center; gap: 4px; }
.public-nav a { padding: 9px 12px; border-radius: 9px; color: #4f6471; font-size: 13px; font-weight: 650; }
.public-nav a:hover { background: var(--teal-soft); color: var(--teal-dark); }
.public-nav a.active { background: var(--teal-soft); color: var(--teal-dark); }
.public-nav-mobile-actions { display: none; }

.public-header-actions { display: flex; align-items: center; gap: 10px; }
.public-mobile-menu { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #4f6471; }
.public-nav-backdrop { position: fixed; inset: 0; z-index: 24; display: none; border: 0; background: rgba(9, 25, 36, .45); }

.public-flash { max-width: 1180px; margin: 18px auto 0; padding: 0 clamp(18px, 4vw, 48px); }
.public-flash:empty { display: none; }

.public-main { display: flex; flex-direction: column; gap: 0; }

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) clamp(18px, 4vw, 48px);
}

.hero-copy .eyebrow { display: block; margin-bottom: 14px; }
.hero-copy h1 { margin: 0 0 18px; color: #132b3c; font-size: clamp(30px, 4vw, 46px); font-weight: 780; letter-spacing: -0.035em; line-height: 1.1; }
.hero-copy > p { max-width: 560px; margin: 0 0 26px; color: #57707d; font-size: 15.5px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 18px; }
.hero-trust-row span { display: inline-flex; align-items: center; gap: 7px; color: #4f6471; font-size: 12px; font-weight: 650; }
.hero-trust-row svg { width: 16px; color: var(--teal); }

.hero-visual { position: relative; display: flex; flex-direction: column; gap: 16px; }
.hero-stat-card {
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0c2638, #103449);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.hero-stat-number { display: block; font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #7cd3d1; }
.hero-stat-label { display: block; margin-top: 6px; color: #cfe0e6; font-size: 12.5px; line-height: 1.5; }
.hero-photo-card { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.hero-photo-card img { display: block; width: 100%; height: 260px; object-fit: cover; }
.hero-photo-caption { display: flex; align-items: center; gap: 8px; padding: 12px 14px; color: #405764; font-size: 12px; font-weight: 650; }
.hero-photo-caption .pulse-dot { color: var(--teal); }

.logic-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
  padding: 20px clamp(18px, 4vw, 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.logic-strip span { display: inline-flex; align-items: center; gap: 8px; color: #4f6471; font-size: 12.5px; font-weight: 700; }
.logic-strip svg { width: 16px; color: var(--teal); }

.section-block { max-width: 1180px; margin: 0 auto; padding: clamp(48px, 7vw, 92px) clamp(18px, 4vw, 48px); }
.section-block.muted { max-width: none; background: var(--secondary); }
.section-block.muted > * { max-width: 1180px; margin-left: auto; margin-right: auto; }

.section-heading { max-width: 640px; margin-bottom: 34px; }
.section-heading.centered { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.section-heading h2 { margin: 10px 0 12px; color: #132b3c; font-size: clamp(24px, 3vw, 32px); font-weight: 760; letter-spacing: -0.03em; }
.section-heading p { margin: 0; color: #5c7480; font-size: 14px; line-height: 1.6; }
.section-cta { display: flex; justify-content: center; margin-top: 30px; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feature-card { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.feature-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 16px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.feature-card h3 { margin: 0 0 8px; color: #17303f; font-size: 16.5px; font-weight: 720; letter-spacing: -0.015em; }
.feature-card p { margin: 0; color: #5c7480; font-size: 13px; line-height: 1.6; }

.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.step-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.step-number { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--teal); color: #fff; font-weight: 750; font-size: 13px; }
.step-card h3 { margin: 0 0 8px; color: #17303f; font-size: 14.5px; font-weight: 720; }
.step-card p { margin: 0; color: #5c7480; font-size: 12.5px; line-height: 1.6; }

.quote-section { max-width: 900px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px) clamp(48px, 7vw, 92px); }
.quote-card { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-md); }
.quote-card img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 8px 20px rgba(13, 42, 60, .16); }
.quote-card blockquote { margin: 0 0 10px; color: #253b49; font-size: 15px; font-style: italic; line-height: 1.6; }
.quote-card span { color: var(--teal-dark); font-size: 12px; font-weight: 700; }

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto clamp(48px, 7vw, 92px);
  padding: clamp(30px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border-radius: 22px;
  background: linear-gradient(135deg, #0c2638, #103449);
  color: #fff;
}
.cta-band h2 { margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 760; letter-spacing: -0.02em; }
.cta-band p { margin: 0; max-width: 460px; color: #cfe0e6; font-size: 13.5px; line-height: 1.6; }

.page-hero { max-width: 780px; margin: 0 auto; padding: clamp(44px, 6vw, 72px) clamp(18px, 4vw, 48px) clamp(20px, 3vw, 32px); text-align: center; }
.page-hero.narrow { max-width: 620px; }
.page-hero h1 { margin: 12px 0 14px; color: #132b3c; font-size: clamp(28px, 3.6vw, 40px); font-weight: 770; letter-spacing: -0.03em; line-height: 1.12; }
.page-hero p { margin: 0; color: #5c7480; font-size: 14.5px; line-height: 1.65; }

.timeline { display: flex; flex-direction: column; gap: 20px; max-width: 820px; margin: 0 auto; }
.timeline-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.timeline-item h3 { margin: 0 0 8px; color: #17303f; font-size: 16px; font-weight: 730; }
.timeline-item p { margin: 0; color: #5c7480; font-size: 13.5px; line-height: 1.65; }

.faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
.faq-item { padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.faq-item summary { cursor: pointer; color: #17303f; font-size: 13.5px; font-weight: 720; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 10px 0 0; color: #5c7480; font-size: 12.5px; line-height: 1.6; }
.faq-item[open] summary { color: var(--teal-dark); }

.detail-row { display: grid; grid-template-columns: 60px 1fr; gap: 20px; max-width: 900px; margin: 0 auto 34px; }
.detail-row:last-child { margin-bottom: 0; }
.detail-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 15px; background: var(--teal-soft); color: var(--teal); }
.detail-row h2 { margin: 6px 0 10px; color: #17303f; font-size: 19px; font-weight: 740; letter-spacing: -0.02em; }
.detail-row p { margin: 0; color: #5c7480; font-size: 13.5px; line-height: 1.7; }

.stats-band { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 4vw, 50px); max-width: 1180px; margin: 0 auto clamp(48px, 7vw, 92px); padding: 0 clamp(18px, 4vw, 48px); text-align: center; }
.stats-band > div { max-width: 260px; }
.stats-band strong { display: block; color: var(--teal-dark); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.stats-band span { display: block; margin-top: 8px; color: #5c7480; font-size: 12px; line-height: 1.5; }

.split-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 48px); max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 48px) clamp(48px, 7vw, 92px); align-items: start; }

.contact-info-card { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.contact-info-card h2 { margin: 0 0 18px; color: #17303f; font-size: 18px; font-weight: 740; }
.contact-info-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf1f3; color: #405764; }
.contact-info-row:last-of-type { border-bottom: 0; }
.contact-info-row svg { width: 18px; color: var(--teal); }
.contact-info-row span { display: flex; flex-direction: column; }
.contact-info-row small { color: #8b99a1; font-size: 12px; }
.contact-info-row strong { font-size: 12.5px; font-weight: 700; }
.contact-info-note { margin: 16px 0 0; color: #7c8e97; font-size: 12px; line-height: 1.6; }
.contact-info-note a { color: var(--teal-dark); font-weight: 650; }

.contact-form, .lead-form { display: flex; flex-direction: column; gap: 15px; padding: 30px; }
.contact-form textarea, .lead-form textarea { resize: vertical; }

.lead-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.lead-copy .eyebrow { display: block; margin-bottom: 12px; }
.lead-copy h1 { margin: 0 0 16px; color: #132b3c; font-size: clamp(26px, 3.2vw, 34px); font-weight: 760; letter-spacing: -0.03em; line-height: 1.15; }
.lead-copy > p { margin: 0 0 20px; color: #5c7480; font-size: 14px; line-height: 1.65; }
.lead-benefit-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.lead-benefit-list li { display: flex; align-items: center; gap: 10px; color: #405764; font-size: 13px; font-weight: 650; }
.lead-benefit-list svg { width: 17px; color: var(--teal); }
.lead-existing-note { margin: 0; color: #7c8e97; font-size: 12.5px; }
.lead-existing-note a { color: var(--teal-dark); font-weight: 650; }

.lead-message { color: #405764; }

.public-footer { margin-top: auto; border-top: 1px solid var(--line); background: #0c2638; color: #b9c9d2; }
.public-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 30px; max-width: 1180px; margin: 0 auto; padding: 48px clamp(18px, 4vw, 48px) 30px; }
.public-footer-brand p { margin: 14px 0 0; max-width: 320px; color: #93aab5; font-size: 12.5px; line-height: 1.65; }
.public-footer-links { display: flex; flex-direction: column; gap: 10px; }
.public-footer-links span { margin-bottom: 4px; color: #6f8a9a; font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.public-footer-links a { color: #cfe0e6; font-size: 12.5px; font-weight: 600; }
.public-footer-links a:hover { color: #7cd3d1; }
.public-footer-contact { display: flex; flex-direction: column; gap: 10px; }
.public-footer-contact span { margin-bottom: 4px; color: #6f8a9a; font-size: 12px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.public-footer-contact a { display: inline-flex; align-items: center; gap: 8px; color: #cfe0e6; font-size: 12.5px; font-weight: 600; }
.public-footer-security { display: inline-flex; align-items: center; gap: 8px; color: #93aab5; font-size: 12px; }
.public-footer-top svg { width: 15px; }
.public-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 18px clamp(18px, 4vw, 48px); border-top: 1px solid rgba(255,255,255,.08); color: #7892a1; font-size: 12px; }
.public-footer-bottom a { color: #93aab5; }

@media (max-width: 980px) {
  .public-nav { display: none; }
  .public-mobile-menu { display: flex; }
  .public-header-actions > .btn { display: none; }
  .public-nav-open .public-nav {
    position: fixed;
    z-index: 26;
    inset: 74px 16px auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-md);
  }
  .public-nav-open .public-nav-mobile-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; margin-top: 6px; border-top: 1px solid #edf1f3; }
  .public-nav-open .public-nav-backdrop { display: block; }
  .hero-section { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: 1fr; }
  .split-layout,.lead-layout { grid-template-columns: 1fr; }
  .detail-row { grid-template-columns: 1fr; }
  .detail-icon { margin-bottom: 6px; }
  .public-footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .quote-card { grid-template-columns: 1fr; text-align: center; }
  .quote-card img { margin: 0 auto; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .steps-grid { grid-template-columns: 1fr; }
  .public-footer-top { grid-template-columns: 1fr; }
  .public-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---------- Időpontok oldal: lenyítható részletek, token, dokumentumállapot ---------- */
.flash-panel { margin-bottom: 16px; padding: 16px; border: 1px solid #cce7e7; border-radius: 12px; background: #f2fbfa; }
.call-link-preview { display: flex; flex-direction: column; gap: 8px; }
.call-link-preview p { margin: 0; color: #4a6b6f; font-size: 12px; }
.call-link-preview code { word-break: break-all; padding: 10px; border: 1px dashed #a3cfcc; border-radius: 8px; background: #fff; color: #0f5c5e; font-size: 12px; }

.appointment-group + .appointment-group { border-top: 1px solid #edf1f3; }
.appointment-summary td { vertical-align: middle; }
.appointment-detail td { padding: 0; border-bottom: 1px solid #e8edef; background: #fbfcfd; }
.appointment-detail-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); gap: 20px; padding: 18px 20px; }
.appointment-detail-section { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid #e5edef; border-radius: 12px; background: #fff; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-section-head h3 { margin: 0; color: #2a4552; font-size: 14px; }
.document-mini-list { display: flex; flex-direction: column; gap: 8px; }
.document-mini-item { display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #edf1f3; border-radius: 8px; background: #f9fbfc; }
.document-mini-item.done { border-color: #c8e9d6; background: #f1fbf6; }
.document-mini-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; }
.document-mini-icon.success { background: #e0f6eb; color: #1a8c55; }
.document-mini-icon.info { background: #e6f4fb; color: #1d6fa8; }
.document-mini-icon.warning { background: #fdf3e2; color: #9c6b16; }
.document-mini-icon.danger { background: #fde9e8; color: #b23b3b; }
.document-mini-icon.neutral { background: #eef2f4; color: #6a7c85; }
.document-mini-item strong { color: #354d5a; font-size: 12px; }
.document-mini-item small { color: #7e9099; font-size: 12px; }
.readiness-mini { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: #5f7782; font-size: 12px; }
.readiness-mini strong { color: var(--teal-dark); font-size: 16px; }
.readiness-mini .progress { flex: 1; height: 6px; }
.token-section p { margin: 0; }
.token-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #5c7480; font-size: 12px; }

@media (max-width: 1020px) {
  .appointment-detail-panel { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .table-actions { flex-wrap: wrap; }
  .appointment-detail-panel { padding: 14px; }
}

/* ---------- Előre kitölthető kérdések (admin + ügyfél) ---------- */
.prefill-panel { margin-top: 16px; }
.prefill-answers { display: flex; flex-direction: column; gap: 14px; }
.prefill-section { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e7edef; border-radius: 10px; background: #f9fbfc; }
.prefill-section > strong { color: #2a4552; font-size: 13px; }
.prefill-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 11px; border-radius: 7px; background: #fff; }
.prefill-row > span { color: #4f6470; font-size: 12px; }
.prefill-row > strong { color: #2a4552; font-size: 12px; font-weight: 700; }
.prefill-row em { color: #9aaab2; font-style: normal; }

.customer-prefill-panel .prefill-sections { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.customer-prefill-panel .prefill-section { background: #fff; }
.prefill-field { display: flex; flex-direction: column; gap: 6px; }
.prefill-field > span { color: #405764; font-size: 12px; font-weight: 750; }
.prefill-field > span em { margin-left: 3px; color: var(--red); font-style: normal; }
.prefill-field input,.prefill-field select,.prefill-field textarea { font-size: 12px; }
.prefill-field small { color: #87979e; font-size: 12px; }
.prefill-preview-panel p { margin: 0 0 14px; color: #6e828d; font-size: 12px; }

/* ---------- Admin ügyfélmappa: teljes kérdőív kitöltés ---------- */
.customer-questionnaire-panel .customer-questionnaire-wrap { display: flex; flex-direction: column; gap: 18px; padding: 18px; }
.customer-questionnaire-section { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #e5edef; border-radius: 12px; background: #fff; }
.customer-questionnaire-footer { display: flex; align-items: center; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid #e8edef; background: #fbfcfd; }
.customer-questionnaire-panel .save-state { display: flex; align-items: center; gap: 6px; }
.customer-questionnaire-panel .save-state svg { width: 14px; height: 14px; }

/* ---------- Dokumentumtípus-kezelõ ---------- */
.document-admin-layout { align-items: flex-start; }
.document-category { margin-bottom: 10px; }
.category-heading { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; background: #f4f7f8; color: #2a4552; font-size: 14px; font-weight: 750; cursor: pointer; }
.document-type-grid { margin-top: 10px; }
.document-type-grid .template-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.document-type-actions { display: flex; align-items: center; gap: 6px; }
.document-type-actions form { display: inline; }
.document-type-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }


.document-type-picker > div { display:flex; flex-direction:column; gap:12px; }
.document-type-group { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.document-type-group-title { grid-column:1/-1; color:#405764; font-size:12px; font-weight:800; }
@media (max-width: 760px) { .document-type-group { grid-template-columns:1fr; } }