/* Dimensional product illustrations and state-led motion. No payment simulations. */
.retell-dashboard { --studio-ease: cubic-bezier(.23,1,.32,1); }
.retell-dashboard .retell-page-body { padding-top: 28px; }
.retell-dashboard .page:not(#overviewPage) h2 { color: #202c43; }
.retell-dashboard #kaspiSetupPage #kaspiWizard.connection-layout { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr); max-width: 1240px; min-height: 570px; margin: 0; padding: 0; gap: 0; background: #fff; border: 0; border-radius: 0; overflow: visible; }
.retell-dashboard .connection-form { min-width: 0; padding: 25px 40px 30px 0; }
.retell-dashboard #kaspiWizard .wizard-step { border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0; background: transparent; }
.retell-dashboard #kaspiWizard .wizard-top { padding: 0 0 26px; border: 0; border-radius: 0; background: transparent; margin-bottom: 12px; gap: 12px; }
.retell-dashboard #kaspiWizard .wizard-top .link { margin: 0; padding: 0; font-size: 12px; flex: none; }
.retell-dashboard #kaspiWizard .wizard-progress { height: 3px; background: #edf0f7; }
.retell-dashboard #kaspiWizard .wizard-progress span { background: #315aff; transition: none; }
.retell-dashboard #kaspiWizard .wizard-step > h2 { font-size: 27px; line-height: 1.22; letter-spacing: -.8px; max-width: 440px; margin: 0 0 16px; }
.retell-dashboard #kaspiWizard .connection-intro > h2 { font-size: clamp(31px,3.1vw,46px); font-weight: 600; line-height: 1.1; letter-spacing: -1.8px; white-space: pre-line; margin: 32px 0 22px; }
.retell-dashboard #kaspiWizard .wizard-lead { font-size: 14px; line-height: 1.75; color: #7b8699; max-width: 390px; margin: 0 0 25px; }
.connection-eyebrow { display: inline-flex; gap: 9px; align-items: center; color: #5e759f; letter-spacing: .08em; font-size: 10px; font-weight: 550; }
.connection-eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #315aff; }
.retell-dashboard #kaspiWizard .connection-start { margin: 34px 0 30px; }
.retell-dashboard #kaspiWizard .wizard-main { width: auto; min-height: 42px; padding: 10px 20px; margin: 10px 0 0; border-radius: 8px; }
.retell-dashboard #kaspiWizard .connection-start .wizard-main { font-size: 14px; min-height: 46px; margin: 0; padding: 12px 20px; box-shadow: 0 4px 12px #315aff20; }
.connection-start > p { font-size: 12px; line-height: 1.7; color: #8792a4; margin: 14px 0 0; max-width: 310px; }
.retell-dashboard #kaspiWizard .connection-help { padding: 18px 0; border: 0; border-top: 1px solid #e7edf6; border-radius: 0; background: transparent; }
.connection-help summary { font-size: 12px; color: #53698d; cursor: pointer; }
.connection-help h3 { font-size: 13px; margin: 20px 0 10px; }
.connection-help p { font-size: 12px; line-height: 1.8; color: #7b8699; }
.retell-dashboard #kaspiWizard .guide-links { margin: 14px 0 0; gap: 12px; }
.retell-dashboard #kaspiWizard .guide-links a { font-size: 12px; font-weight: 450; color: #315aff; }
.retell-dashboard #kaspiWizard .check-card { position: relative; padding: 17px 0; border: 0; border-bottom: 1px solid #e7edf6; border-radius: 0; gap: 13px; background: transparent; }
.retell-dashboard #kaspiWizard .check-card > b { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 500; color: #7f91ae; background: #edf2fc; }
.retell-dashboard #kaspiWizard .check-card h3 { font-size: 14px; line-height: 1.5; margin: 0 0 5px; }
.retell-dashboard #kaspiWizard .check-card p { font-size: 12px; line-height: 1.7; margin: 0 0 11px; color: #8a96a8; }
.retell-dashboard #kaspiWizard .check-card:has(input:checked) > b { background: #315aff; color: #fff; }
.retell-dashboard #kaspiWizard .confirm-row { font-size: 12px; font-weight: 450; border: 0; padding: 0; background: transparent; line-height: 1.6; }
.retell-dashboard #kaspiWizard .check-count { color: #6e829f; font-size: 11px; margin: 20px 0 2px; }
.retell-dashboard #kaspiWizard .wizard-card { border: 0; background: transparent; padding: 18px 0; border-radius: 0; margin: 0; }
.retell-dashboard #kaspiWizard .wizard-card small, .retell-dashboard #kaspiWizard .wizard-card p { font-size: 12px; color: #8692a5; line-height: 1.7; }
.retell-dashboard #kaspiRoleCard h3 { font-size: 14px; font-weight: 550; margin-bottom: 8px; }
.retell-dashboard #kaspiRoleCard .role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.retell-dashboard #kaspiRoleCard .role-options label { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 12px; border: 1px solid #e2e8f2; border-radius: 8px; background: white; cursor: pointer; color: #74829b; }
.retell-dashboard #kaspiRoleCard .role-options label:has(input:checked) { background: #eef3ff; border-color: #7997f5; color: #315aff; }
.retell-dashboard #kaspiWizard .warning-box { padding: 18px; border: 1px solid #f1ddbc; border-radius: 10px; background: #fffbf3; margin: 18px 0; }
.retell-dashboard #kaspiWizard .warning-box strong { font-size: 14px; color: #7c582d; }
.retell-dashboard #kaspiWizard .warning-box p { font-size: 12px; line-height: 1.8; color: #9b8060; }
.retell-dashboard #kaspiWizard .phone-entry { border: 1px solid #dae3f1; border-radius: 8px; background: #fff; min-height: 46px; }
.retell-dashboard #kaspiOtp { font-size: 24px; letter-spacing: .4em; min-height: 54px; }
.connection-visual { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 24px 26px; border-radius: 22px; background: radial-gradient(ellipse at 45% 18%,#fff 0%,#eff4ff 35%,#e7efff 75%,#e1ebff 100%); overflow: hidden; isolation: isolate; }
.connection-scene { position: relative; height: 335px; perspective: 1000px; transform-style: preserve-3d; margin: 0 -24px; }
.connection-orbit { position: absolute; width: 350px; height: 350px; top: 12px; left: calc(50% - 175px); border: 1px solid #c9d9f480; border-radius: 50%; transform: rotateX(60deg); }
.connection-orbit.orbit-two { width: 470px; height: 470px; top: -48px; left: calc(50% - 235px); border-color: #c9d9f450; }
.connection-device { position: absolute; width: 172px; height: 275px; top: 22px; left: calc(50% - 78px); border-radius: 30px; padding: 7px; background: linear-gradient(125deg,#fbfdff,#d5e0f6 55%,#b6c8e9); border: 1px solid #b7c7e3; box-shadow: 2px 3px 0 #abc0e1,4px 6px 0 #aec3e4,6px 9px 0 #bdcee9,20px 35px 28px #547abf25,inset 1px 1px 0 #fff; transform: rotateX(8deg) rotateY(-17deg) rotateZ(9deg); transform-style: preserve-3d; transition: transform 650ms var(--studio-ease); }
.device-screen { background: linear-gradient(140deg,#fff,#f7faff); width: 100%; height: 100%; border: 1px solid #d8e2f2; border-radius: 24px; padding: 36px 13px 16px; text-align: center; overflow: hidden; }
.device-camera { position: absolute; top: 15px; left: calc(50% - 22px); width: 44px; height: 8px; background: #d1ddef; border-radius: 8px; z-index: 2; }
.device-kaspi { display: block; font-size: 19px; color: #ef4a42; font-weight: 650; letter-spacing: -.6px; }
.device-kaspi > span { margin-left: 4px; font-weight: 450; }
.device-role { display: block; color: #99a7bf; font-size: 8px; margin-top: 5px; }
.device-person { width: 53px; height: 53px; display: grid; place-items: center; margin: 25px auto 13px; border-radius: 17px; background: linear-gradient(145deg,#dce8ff,#edf3ff); border: 1px solid #cfddf8; box-shadow: 0 6px 13px #7899d51a; }
.device-person svg { width: 27px; height: 27px; stroke: #6d92dd; stroke-width: 1.4; }
.device-screen strong { color: #627897; font-size: 10px; font-weight: 550; }
.device-screen-lines { display: grid; gap: 6px; justify-items: center; margin-top: 16px; }
.device-screen-lines i { height: 4px; width: 72px; background: #e3eaf7; border-radius: 3px; }
.device-screen-lines i:last-child { width: 44px; }
.device-code { display: none; justify-content: center; gap: 5px; margin-top: 16px; }
.device-code span { width: 11px; height: 15px; border: 1px solid #d0dcf0; border-radius: 3px; background: #f2f6fe; }
.device-code span.filled { background: #527ce2; border-color: #527ce2; }
.connection-fastpay { display: flex; align-items: center; gap: 11px; position: absolute; top: 207px; left: calc(50% - 163px); width: 192px; height: 67px; padding: 16px; border: 1px solid #fcfdff; border-radius: 15px; background: linear-gradient(135deg,#fff,#f7faff); box-shadow: 0 3px 0 #d3dff5,0 6px 0 #dde7f8,0 24px 30px #406ac92b; transform: rotateX(8deg) rotateY(10deg) rotateZ(-9deg) translateZ(36px); transition: transform 650ms var(--studio-ease); }
.connection-fastpay > img { width: 30px; height: 30px; }
.connection-fastpay > span:not(.connection-signal) { font-size: 19px; font-weight: 600; color: #30466f; letter-spacing: -.8px; }
.connection-signal { display: flex; gap: 2px; align-items: end; margin-left: auto; }
.connection-signal i { width: 3px; height: 7px; border-radius: 2px; background: #83a1e5; }
.connection-signal i:nth-child(2) { height: 11px; }
.connection-signal i:nth-child(3) { height: 15px; }
.connection-visual-caption { position: relative; text-align: center; }
.connection-visual-caption > span { display: block; font-size: 9px; color: #819bc2; margin-bottom: 11px; letter-spacing: .06em; }
.connection-visual-caption h3 { color: #355384; font-size: 19px; font-weight: 550; letter-spacing: -.5px; margin: 0 0 10px; }
.connection-visual-caption p { font-size: 11px; line-height: 1.8; color: #7c95bb; margin: 0 auto; max-width: 300px; }
.connection-steps { list-style: none; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 24px 0 0; margin: 20px 0 0; border-top: 1px solid #c8d8f280; }
.connection-steps li { color: #94a6c2; font-size: 9px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.connection-steps b { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #cbdaf0; border-radius: 50%; background: #ffffff70; font-size: 10px; font-weight: 500; }
.connection-steps li.current { color: #315aff; }
.connection-steps li.current b { color: white; background: #315aff; border-color: #315aff; box-shadow: 0 3px 9px #315aff25; }
.connection-steps li.complete b { background: #cadbfb; border-color: #bfd0f1; color: #517ed3; }
#kaspiWizard[data-stage="1"] .connection-device { transform: rotateX(5deg) rotateY(-9deg) rotateZ(3deg); }
#kaspiWizard[data-stage="2"] .connection-device { transform: rotateX(0) rotateY(0) rotateZ(0); }
#kaspiWizard[data-stage="3"] .connection-device { transform: rotateX(4deg) rotateY(12deg) rotateZ(-4deg); }
#kaspiWizard[data-stage="4"] .connection-device { transform: rotateX(0) rotateY(0) rotateZ(0) scale(1.04); }
#kaspiWizard[data-stage="4"] .device-person { margin-top: 18px; }
#kaspiWizard[data-stage="4"] .device-code { display: flex; }
#kaspiWizard[data-stage="4"] .device-screen-lines { display: none; }
#kaspiWizard:not([data-stage="0"]) .connection-fastpay { transform: rotateX(0) rotateY(0) rotateZ(-4deg) translateZ(36px) translate(-15px,12px); }
.dimensional-art { position: relative; width: 150px; height: 132px; margin: 0 auto; flex: none; perspective: 650px; transform-style: preserve-3d; }
.art-halo { position: absolute; inset: 14px 0 0; border-radius: 50%; background: radial-gradient(ellipse,#dbe7ff80,transparent 68%); }
.art-sheet { position: absolute; width: 70px; height: 83px; border: 1px solid #d2def3; border-radius: 13px; left: 40px; top: 20px; transform: rotateX(18deg) rotateY(-20deg) rotateZ(12deg); box-shadow: 2px 3px 0 #c2d2ee,4px 6px 0 #d2dff5,10px 17px 20px #668dce23; background: linear-gradient(135deg,#fff,#eef4ff); transition: transform 450ms var(--studio-ease); }
.art-sheet-back { transform: rotateX(18deg) rotateY(-20deg) rotateZ(-9deg) translate(-13px,-3px); background: linear-gradient(145deg,#b7d0ff,#e4eeff); border-color: #c1d5f9; }
.art-sheet-front { padding: 13px; display: flex; align-items: center; flex-direction: column; gap: 6px; }
.art-sheet-front svg { width: 32px; height: 32px; stroke: #7195dd; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.art-line { width: 31px; height: 3px; background: #d5e1f5; border-radius: 3px; }
.art-line.short { width: 19px; align-self: start; margin-left: 5px; }
.art-token { position: absolute; left: 98px; top: 71px; width: 27px; height: 27px; border-radius: 9px; background: linear-gradient(135deg,#769cff,#315aff); border: 1px solid #6488f9; box-shadow: 1px 2px 0 #234ad3,2px 4px 0 #466cec,4px 10px 10px #537acf2a; transform: rotateZ(-12deg); }
.art-token > span { display: block; width: 8px; height: 8px; border: 1px solid #cad8ff; border-radius: 50%; margin: 8px; }
.art-refunds .art-token { border-radius: 50%; }
.art-recurring .art-sheet-front { border-top: 10px solid #6088ed; padding-top: 7px; }
.art-team .art-sheet-front, .art-integrations .art-sheet-front, .art-plan .art-sheet-front { width: 89px; height: 68px; left: 29px; top: 26px; }
.art-guides .art-sheet-front { border-left: 8px solid #7297e7; }
.retell-dashboard .workspace-empty { min-height: 305px; padding: 25px; }
.retell-dashboard .workspace-empty > .dimensional-art { margin-bottom: 8px; }
.retell-dashboard .workspace-empty h3 { font-size: 17px; font-weight: 500; color: #3d5071; margin-bottom: 10px; }
.retell-dashboard .workspace-empty p { max-width: 360px; color: #8a99b0; font-size: 12px; }
.studio-visual { pointer-events: none; }
.retell-dashboard .team-invite > .studio-visual { margin: -9px 0 7px; }
.retell-dashboard .team-invite .dimensional-art { margin-left: 0; }
.retell-dashboard #kaspiConnectedPanel > .studio-visual { margin: -12px 0 8px; }
.retell-dashboard #kaspiConnectedPanel > .studio-visual .dimensional-art { margin-left: 0; }
.retell-dashboard #planPage .plan-current.studio-illustrated { position: relative; display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 24px; background: linear-gradient(115deg,#f3f7ff,#fff); border: 1px solid #e4ecfb; border-radius: 15px; }
.retell-dashboard #planPage .plan-current .studio-visual { margin: -12px; }
.retell-dashboard #planPage .plan-price strong { font-size: 26px; color: #456295; }
.retell-dashboard #recurringPage .panel-head.studio-illustrated { display: grid; grid-template-columns: 110px minmax(0,1fr) auto; gap: 20px; padding: 20px 24px; border-radius: 15px; background: linear-gradient(110deg,#eff5ff,#fff); border: 1px solid #e6edf9; }
.retell-dashboard #recurringPage .panel-head .studio-visual { margin: -12px -20px; }
.retell-dashboard #printQrCard { background: radial-gradient(ellipse at 50% 35%,#fff,#edf3ff); border-radius: 16px; border: 1px solid #e4ecf9; }
.retell-dashboard #printQrEmpty > span { display: none; }
.retell-dashboard #printQrEmpty .dimensional-art { transform: scale(1.5); margin: 25px auto 45px; }
.retell-dashboard #printQrEmpty p { color: #7e93b7; font-size: 13px; }
.retell-dashboard .team-invite, .retell-dashboard #settingsPage .settings-side .panel { background: linear-gradient(135deg,#f3f7ff,#fff); border-radius: 15px; }
.retell-dashboard .invoice-preview-pane { perspective: 1100px; background: radial-gradient(ellipse at 50% 30%,#fff,#edf3ff); border-radius: 16px; padding: 28px; }
.retell-dashboard .invoice-paper { transform: rotateY(-4deg) rotateX(2deg); border: 1px solid #e2e9f5; border-radius: 12px; box-shadow: 3px 4px 0 #d9e4f7,5px 7px 0 #e8eef9,0 24px 32px #5673a80e; transition: transform 450ms var(--studio-ease); }
.retell-dashboard .invoice-composer:focus-within .invoice-paper { transform: rotateY(0) rotateX(0); }
.retell-dashboard .guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.retell-dashboard .guide-card { display: flex; align-items: center; padding: 20px; border: 1px solid #e4ebf7; border-radius: 14px; background: linear-gradient(130deg,#f6f9ff,#fff); }
.retell-dashboard .guide-card > .guide-art { width: 100px; height: 110px; background: transparent; flex: none; }
.guide-art .dimensional-art { transform: scale(.8); transform-origin: left center; }
.retell-dashboard .partner-hero.studio-illustrated { display: grid; grid-template-columns: 120px minmax(0,1fr) auto; gap: 22px; border-bottom: 1px solid #e6edf7; padding: 10px 0 28px; }
.retell-dashboard .primary { transition: transform 140ms var(--studio-ease), background-color 140ms ease; }
.retell-dashboard:not([data-keyboard="true"]) .primary:active:not(:disabled) { transform: scale(.98); }
.retell-dashboard .retell-page-body :is(.form-control,.form-select):focus-visible { outline: 2px solid #7096ed; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .connection-visual:hover .connection-device { transform: rotateX(0) rotateY(-5deg) rotateZ(3deg) translateY(-5px); }
  .connection-visual:hover .connection-fastpay { transform: rotateZ(-3deg) translateZ(36px) translateY(4px); }
  .studio-illustrated:hover .art-sheet-front, .workspace-empty:hover .art-sheet-front, .guide-card:hover .art-sheet-front { transform: rotateX(8deg) rotateY(-7deg) rotateZ(5deg) translateY(-5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .retell-dashboard:not([data-keyboard="true"]) #kaspiIntro:not([hidden]) ~ * { animation: none; }
  .retell-dashboard:not([data-keyboard="true"]) .page:not([hidden]) .connection-scene { animation: studio-arrive 700ms var(--studio-ease) both; }
  .retell-dashboard:not([data-keyboard="true"]) #kaspiWizard .wizard-step:not([hidden]) { animation: studio-step 220ms var(--studio-ease); }
  .retell-dashboard:not([data-keyboard="true"]) .workspace-empty .dimensional-art { animation: studio-arrive 600ms var(--studio-ease) both; }
  .retell-dashboard:not([data-keyboard="true"]) .connection-signal i { animation: studio-signal 1300ms ease-in-out 3; }
  .retell-dashboard:not([data-keyboard="true"]) .connection-signal i:nth-child(2) { animation-delay: 140ms; }
  .retell-dashboard:not([data-keyboard="true"]) .connection-signal i:nth-child(3) { animation-delay: 280ms; }
}
@keyframes studio-step { from { opacity: .4; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes studio-arrive { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes studio-signal { 0%,100% { opacity: .45; transform: scaleY(.8); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 1150px) {
  .retell-dashboard #kaspiSetupPage #kaspiWizard.connection-layout { grid-template-columns: minmax(0,1fr) 330px; }
  .retell-dashboard .connection-form { padding-right: 28px; }
  .retell-dashboard .connection-visual { padding: 18px; }
  .retell-dashboard #planPage .plan-current.studio-illustrated { grid-template-columns: 92px minmax(0,1fr); }
  .retell-dashboard #planPage .plan-current .plan-price { grid-column: 2; }
  .retell-dashboard .guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .retell-dashboard #kaspiSetupPage #kaspiWizard.connection-layout { grid-template-columns: 1fr; }
  .retell-dashboard .connection-form { padding: 8px 0 24px; }
  .connection-visual { max-width: 600px; width: 100%; margin-top: 8px; }
  .connection-scene { height: 300px; }
  .connection-visual-caption { padding-top: 12px; }
  .retell-dashboard .partner-hero.studio-illustrated { grid-template-columns: 90px minmax(0,1fr); }
  .retell-dashboard .partner-hero.studio-illustrated > a { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) {
  .retell-dashboard #kaspiWizard .connection-intro > h2 { font-size: 36px; margin-top: 22px; }
  .retell-dashboard #kaspiWizard .wizard-step > h2 { font-size: 25px; }
  .retell-dashboard #kaspiWizard .connection-start { margin: 26px 0; }
  .connection-visual { border-radius: 16px; }
  .connection-scene { height: 290px; }
  .connection-visual-caption h3 { font-size: 18px; }
  .retell-dashboard #kaspiWizard:not([data-stage="0"]) .connection-scene, .retell-dashboard #kaspiWizard:not([data-stage="0"]) .connection-visual-caption { display: none; }
  .retell-dashboard #kaspiWizard:not([data-stage="0"]) .connection-steps { margin: 0; border: 0; padding: 0; }
  .retell-dashboard #recurringPage .panel-head.studio-illustrated { grid-template-columns: minmax(0,1fr) auto; padding: 18px; }
  .retell-dashboard #recurringPage .panel-head > .studio-visual { display: none; }
  .retell-dashboard #recurringPage .panel-head > button { grid-column: 1 / -1; justify-self: start; }
  .retell-dashboard .guide-card { gap: 4px; padding: 16px; }
  .retell-dashboard .guide-card > .guide-art { width: 83px; }
  .retell-dashboard .guide-card h2 { font-size: 15px; }
  .retell-dashboard .guide-card p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .retell-dashboard *, .retell-dashboard *::before, .retell-dashboard *::after { animation: none !important; transition: none !important; }
}
.retell-dashboard[data-keyboard="true"] :is(.connection-device,.connection-fastpay,.invoice-paper,.art-sheet) { transition: none; }