.RopiFrontPreview {
    --ropi-red: #d72131;
    --ropi-red-dark: #a81220;
    --ropi-ink: #111827;
    --ropi-muted: #64748b;
    min-height: 100vh;
    background: #f4f6f9;
}

html.ropi-standalone-open, html.ropi-standalone-open body { background: #fff; overflow: hidden; }
.RopiFrontPreview.is-mobile-panel-open { background: #fff; }
.RopiFrontPreview.is-mobile-panel-open .RopiFrontPreview__workspace { visibility: hidden; }
.RopiFrontPreview.is-mobile-panel-open::before { content: ""; position: fixed; inset: 0; height: 100lvh; background: #fff; z-index: 100; pointer-events: none; }
.RopiFrontPreview.is-mobile-panel-open .RopiFrontPreview__panel.is-open { top: var(--ropi-visible-top, 0px); bottom: auto; height: var(--ropi-visible-height, 100dvh); }
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__panelFooter,
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__deviceBar { display: none; }
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__panelHeader { position: absolute; top: 2px; right: 4px; min-height: 0; padding: 0; border: 0; z-index: 4; }
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__identity,
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__panelActions > :not(button[aria-label="Închide Ropi"]),
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__conversationWrap { display: none; }
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__composer { margin: 2px 52px 2px 4px; padding: 0; }
.RopiFrontPreview.is-compact-viewport .RopiFrontPreview__composer textarea { max-height: 44px; overflow-y: auto; }

.RopiFrontPreview__loading { display: none; }
.RopiFrontPreview__workspace { min-height: 100vh; overflow: hidden; }
.RopiFrontPreview__topbar {
    position: relative;
    z-index: 2;
    display: flex;
    height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid #e5e7eb;
    background: rgba(255,255,255,.96);
    padding: 0 44px;
}
.RopiFrontPreview__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.RopiFrontPreview__brand img { width: 168px; height: auto; }
.RopiFrontPreview__brand span { border-left: 1px solid #d8dee8; padding-left: 10px; color: #64748b; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.RopiFrontPreview__previewBadge { display: inline-flex; align-items: center; gap: 8px; color: #475569; font-size: 12px; font-weight: 700; }
.RopiFrontPreview__previewDot { width: 8px; height: 8px; border-radius: 999px; background: #16a34a; box-shadow: 0 0 0 5px rgba(22,163,74,.1); }
.RopiFrontPreview__backLink { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-size: 13px; font-weight: 800; text-decoration: none; }
.RopiFrontPreview__backLink .material-symbols-rounded { font-size: 18px; }

.RopiFrontPreview__storefront {
    position: relative;
    display: grid;
    min-height: 500px;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    align-items: center;
    overflow: hidden;
    background: linear-gradient(112deg, #fff 0%, #fff 53%, #eef2f7 53%, #f8fafc 100%);
    padding: 64px max(44px, calc((100vw - 1380px) / 2));
}
.RopiFrontPreview__storefront::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 78% 42%, rgba(215,33,49,.07), transparent 34%); pointer-events: none; }
.RopiFrontPreview__heroCopy { position: relative; z-index: 1; max-width: 620px; }
.RopiFrontPreview__eyebrow { margin: 0 0 16px; color: var(--ropi-red); font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.RopiFrontPreview__heroCopy h1 { margin: 0; color: #0f172a; font-size: clamp(44px, 5vw, 72px); font-weight: 850; letter-spacing: -.055em; line-height: .98; }
.RopiFrontPreview__heroCopy > p:not(.RopiFrontPreview__eyebrow) { max-width: 560px; margin: 24px 0 0; color: #64748b; font-size: 18px; line-height: 1.65; }
.RopiFrontPreview__heroButton { display: inline-flex; height: 52px; align-items: center; gap: 10px; margin-top: 30px; border: 0; border-radius: 8px; background: var(--ropi-red); padding: 0 22px; color: #fff; font-weight: 850; cursor: pointer; box-shadow: 0 12px 28px rgba(215,33,49,.18); }
.RopiFrontPreview__heroButton:hover { background: var(--ropi-red-dark); }
.RopiFrontPreview__heroVisual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.RopiFrontPreview__heroVisual img { width: min(720px, 100%); max-height: 440px; object-fit: contain; filter: drop-shadow(0 32px 38px rgba(15,23,42,.18)); }

.RopiFrontPreview__categories { display: grid; max-width: 1380px; grid-template-columns: repeat(4, minmax(0,1fr)); margin: -26px auto 0; position: relative; z-index: 3; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 18px 48px rgba(15,23,42,.08); }
.RopiFrontPreview__category { display: flex; min-height: 106px; align-items: center; gap: 14px; padding: 20px 24px; border-right: 1px solid #e2e8f0; }
.RopiFrontPreview__category:last-child { border-right: 0; }
.RopiFrontPreview__category > span { color: var(--ropi-red); font-size: 28px; }
.RopiFrontPreview__category strong, .RopiFrontPreview__category small { display: block; }
.RopiFrontPreview__category strong { color: #1e293b; font-size: 14px; }
.RopiFrontPreview__category small { margin-top: 5px; color: #94a3b8; font-size: 11px; }

.RopiFrontPreview__launcher {
    position: fixed;
    left: 26px;
    bottom: 26px;
    z-index: 90;
    isolation: isolate;
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: var(--ropi-red);
    padding: 0;
    box-shadow: 0 16px 40px rgba(127,29,29,.24);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.RopiFrontPreview__launcher:hover { transform: scale(1.05); box-shadow: 0 18px 44px rgba(127,29,29,.3); }
.RopiFrontPreview__launcher:focus-visible { outline: 0; box-shadow: 0 0 0 4px #fecdd3, 0 18px 44px rgba(127,29,29,.3); }
.RopiFrontPreview__launcherSurface { position: absolute; inset: 3px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(215,33,49,.18); }
.RopiFrontPreview__launcher img { width: 42px; height: 42px; object-fit: contain; }
.RopiFrontPreview__scrim { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.22); opacity: 0; pointer-events: none; transition: opacity .25s ease; backdrop-filter: blur(2px); }
.RopiFrontPreview__scrim.is-visible { opacity: 1; pointer-events: auto; }

.RopiFrontPreview__panel { position: fixed; top: 92px; bottom: 24px; left: 24px; z-index: 110; display: flex; width: min(430px, calc(100vw - 40px)); flex-direction: column; overflow: hidden; border: 1px solid rgba(203,213,225,.9); border-radius: 14px; background: #fff; box-shadow: 0 28px 80px rgba(15,23,42,.25); opacity: 0; transform: translateX(calc(-100% - 40px)); transition: width .25s ease, opacity .25s ease, transform .32s cubic-bezier(.2,.85,.25,1); }
.RopiFrontPreview__panel.is-open { opacity: 1; transform: translateX(0); }
.RopiFrontPreview__panel.is-wide { width: min(560px, calc(100vw - 40px)); }
.RopiFrontPreview.is-embedded { min-height: 100dvh; background: #fff; }
.RopiFrontPreview.is-embedded .RopiFrontPreview__loading,
.RopiFrontPreview.is-embedded .RopiFrontPreview__workspace,
.RopiFrontPreview.is-embedded .RopiFrontPreview__scrim { display: none; }
.RopiFrontPreview.is-embedded .RopiFrontPreview__panel,
.RopiFrontPreview.is-embedded .RopiFrontPreview__panel.is-wide {
    inset: 0;
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    transform: none;
}
.RopiFrontPreview.is-embedded .RopiFrontPreview__panelActions .is-resize { display: none; }
.RopiFrontPreview__panelHeader { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #e5e7eb; padding: 12px 14px; }
.RopiFrontPreview__identity { display: flex; min-width: 0; align-items: center; gap: 11px; }
.RopiFrontPreview__avatar { position: relative; display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px; align-items: center; justify-content: center; border: 1px solid #ffe4e6; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 1px 3px rgba(15,23,42,.08); }
.RopiFrontPreview__avatar img { display: block; width: 100%; height: 100%; }
.RopiFrontPreview__nameLine { display: flex; align-items: center; gap: 7px; }
.RopiFrontPreview__nameLine strong { color: #111827; font-size: 15px; }
.RopiFrontPreview__nameLine span { border: 1px solid #fda4af; border-radius: 4px; padding: 1px 4px; color: var(--ropi-red); font-size: 9px; font-weight: 900; }
.RopiFrontPreview__identity p { max-width: 245px; overflow: hidden; margin: 3px 0 0; color: #64748b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__panelActions { display: flex; align-items: center; gap: 2px; }
.RopiFrontPreview__panelActions button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: #64748b; cursor: pointer; }
.RopiFrontPreview__panelActions button:hover { background: #f1f5f9; color: #0f172a; }
.RopiFrontPreview__panelActionButton { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 6px; background: transparent; color: #64748b; }
.RopiFrontPreview__panelActions [role="button"]:hover .RopiFrontPreview__panelActionButton { background: #f1f5f9; color: #0f172a; }
.RopiFrontPreview__panelActions .material-symbols-rounded { font-size: 19px; }
html.myropi-host-close .RopiFrontPreview__panelActions button[aria-label="Închide Ropi"] { visibility: hidden; }
.RopiFrontPreview__visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }

.RopiFrontPreview__deviceBar { display: flex; min-height: 58px; align-items: center; gap: 10px; border-bottom: 1px solid #dbeafe; background: #eff6ff; padding: 8px 14px; color: #1e3a8a; }
.RopiFrontPreview__deviceBar > span { font-size: 22px; }
.RopiFrontPreview__deviceBar div { min-width: 0; flex: 1; }
.RopiFrontPreview__deviceBar small, .RopiFrontPreview__deviceBar strong { display: block; }
.RopiFrontPreview__deviceBar small { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.RopiFrontPreview__deviceBar strong { overflow: hidden; margin-top: 2px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__deviceBar button { border: 0; background: transparent; color: #1d4ed8; font-size: 11px; font-weight: 850; cursor: pointer; }

.RopiFrontPreview__conversationWrap { position: relative; display: flex; min-height: 0; flex: 1; }
.RopiFrontPreview__conversation { width: 100%; min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 22px; scroll-behavior: smooth; }
.RopiFrontPreview__scrollToBottom { position: absolute; right: 14px; bottom: 10px; z-index: 3; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid #dbe3ec; border-radius: 50%; background: rgba(255,255,255,.94); color: #475569; box-shadow: 0 5px 14px rgba(15,23,42,.14); backdrop-filter: blur(5px); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.RopiFrontPreview__scrollToBottom:hover { border-color: #cbd5e1; background: #fff; color: #0f172a; transform: translateY(1px); }
.RopiFrontPreview__scrollToBottom:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.RopiFrontPreview__scrollToBottom .material-symbols-rounded { font-size: 18px; }
.RopiFrontPreview__date { margin: 0 0 14px; color: #94a3b8; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-align: center; text-transform: uppercase; }
.RopiFrontPreview__message { display: flex; align-items: flex-end; gap: 7px; margin-top: 9px; }
.RopiFrontPreview__message.is-user { justify-content: flex-end; }
.RopiFrontPreview__message.is-operator { justify-content: flex-start; }
.RopiFrontPreview__miniAvatar { width: 28px; height: 28px; flex: 0 0 28px; border: 1px solid #fee2e2; border-radius: 50%; background: #fff; padding: 3px; }
.RopiFrontPreview__miniAvatar img { width: 100%; height: 100%; }
.RopiFrontPreview__bubble { max-width: 84%; border: 1px solid #e2e8f0; border-radius: 12px 12px 12px 4px; background: #f8fafc; padding: 10px 12px; color: #334155; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.RopiFrontPreview__message.is-user .RopiFrontPreview__bubble { border-color: var(--ropi-red); border-radius: 12px 12px 4px 12px; background: var(--ropi-red); color: #fff; }
.RopiFrontPreview__message.is-operator .RopiFrontPreview__bubble { border-color: #bbf7d0; border-radius: 12px 12px 12px 4px; background: #f0fdf4; color: #14532d; }
.RopiFrontPreview__miniAvatar.is-operator { display: inline-flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; }
.RopiFrontPreview__miniAvatar.is-operator .material-symbols-rounded { font-size: 16px; }
.RopiFrontPreview__message.is-user .RopiFrontPreview__bubble.has-image { overflow: hidden; width: min(268px, 84%); border-color: #fecdd3; background: #fff; padding: 4px; color: #475569; box-shadow: 0 8px 22px rgba(15,23,42,.08); }
.RopiFrontPreview__messageImageFrame { position: relative; overflow: hidden; width: 100%; min-height: 118px; border-radius: 8px; background: #0f172a; }
.RopiFrontPreview__messageImage { display: block; width: 100%; max-height: 230px; object-fit: cover; }
.RopiFrontPreview__messageImageFrame.is-scanning .RopiFrontPreview__messageImage { filter: saturate(.9) contrast(1.04); }
.RopiFrontPreview__messageImageFrame.is-error .RopiFrontPreview__messageImage { opacity: .72; }
.RopiFrontPreview__scanShade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(239,68,68,.06), transparent 38%, rgba(15,23,42,.18)); pointer-events: none; }
.RopiFrontPreview__scanLine { position: absolute; z-index: 2; top: 5%; right: 7px; left: 7px; height: 2px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(239,68,68,.78), 0 0 13px 3px rgba(239,68,68,.9), 0 6px 18px rgba(255,255,255,.38); animation: RopiFrontScan 1.35s ease-in-out infinite alternate; pointer-events: none; }
.RopiFrontPreview__scanStatus { position: absolute; z-index: 3; right: 8px; bottom: 8px; display: inline-flex; min-height: 27px; align-items: center; gap: 5px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; background: rgba(15,23,42,.84); padding: 4px 8px; color: #fff; font-size: 9px; font-weight: 850; letter-spacing: .01em; backdrop-filter: blur(6px); }
.RopiFrontPreview__scanStatus .material-symbols-rounded { font-size: 14px; }
.RopiFrontPreview__scanStatus.is-error { background: rgba(153,27,27,.9); }
.RopiFrontPreview__messageText { display: block; }
.RopiFrontPreview__bubble.has-image .RopiFrontPreview__messageText { padding: 7px 7px 6px; font-size: 11px; line-height: 1.4; }
.RopiFrontPreview__messageFeedback { display: flex; align-items: center; gap: 5px; margin-top: 8px; border-top: 1px solid #e2e8f0; padding-top: 7px; color: #94a3b8; font-size: 9px; line-height: 1; white-space: normal; }
.RopiFrontPreview__messageFeedback > span:first-child { margin-right: auto; }
.RopiFrontPreview__messageFeedback button { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 0; border-radius: 5px; background: transparent; color: #94a3b8; cursor: pointer; }
.RopiFrontPreview__messageFeedback button:hover, .RopiFrontPreview__messageFeedback button.is-active { background: #eef2ff; color: #2563eb; }
.RopiFrontPreview__messageFeedback button:disabled { opacity: .5; cursor: wait; }
.RopiFrontPreview__messageFeedback .material-symbols-rounded { font-size: 15px; }
.RopiFrontPreview__typing { display: flex; align-items: center; gap: 4px; border: 1px solid #e2e8f0; border-radius: 12px 12px 12px 4px; padding: 11px 13px; }
.RopiFrontPreview__typing span { width: 5px; height: 5px; border-radius: 50%; background: #94a3b8; animation: RopiFrontTyping 1.05s infinite ease-in-out; }
.RopiFrontPreview__typing span:nth-child(2) { animation-delay: .15s; }
.RopiFrontPreview__typing span:nth-child(3) { animation-delay: .3s; }
.RopiFrontPreview__waitLabel { align-self: center; color: #64748b; font-size: 11px; line-height: 1.5; }
.RopiFrontPreview__requestStatus { margin: 12px 0; border-left: 2px solid #94a3b8; padding: 8px 12px; color: #475569; font-size: 12px; }
.RopiFrontPreview__requestStatus small { display: block; margin: 6px 0; color: #64748b; }
.RopiFrontPreview__accountAuthForm .RopiFrontPreview__accountOtherData { justify-self: center; border: 0; background: transparent; color: #64748b; font-size: 11px; font-weight: 400; }
@keyframes RopiFrontTyping { 0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1} }
@keyframes RopiFrontScan { from { top: 5%; } to { top: calc(100% - 8px); } }

.RopiFrontPreview__choices { margin: 18px 0 0 35px; border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__choices button, .RopiFrontPreview__choices a { display: grid; width: 100%; grid-template-columns: 36px minmax(0,1fr) 20px; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid #e2e8f0; background: #fff; padding: 12px 3px; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.RopiFrontPreview__choices button:hover, .RopiFrontPreview__choices a:hover { background: #f8fafc; }
.RopiFrontPreview__choiceIcon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 8px; font-size: 20px; }
.RopiFrontPreview__choiceIcon.is-red { background: #fff1f2; color: #e11d48; }
.RopiFrontPreview__choiceIcon.is-blue { background: #eff6ff; color: #2563eb; }
.RopiFrontPreview__choiceIcon.is-amber { background: #fff7ed; color: #ea580c; }
.RopiFrontPreview__choiceIcon.is-green { background: #ecfdf5; color: #059669; }
.RopiFrontPreview__choices strong, .RopiFrontPreview__choices small { display: block; }
.RopiFrontPreview__choices strong { color: #1e293b; font-size: 12px; }
.RopiFrontPreview__choices small { margin-top: 3px; color: #94a3b8; font-size: 10px; line-height: 1.4; }
.RopiFrontPreview__choices button > .material-symbols-rounded:last-child, .RopiFrontPreview__choices a > .material-symbols-rounded:last-child { color: #cbd5e1; font-size: 18px; }

.RopiFrontPreview__flow, .RopiFrontPreview__candidate, .RopiFrontPreview__result, .RopiFrontPreview__parts, .RopiFrontPreview__orderStatus, .RopiFrontPreview__analysis, .RopiFrontPreview__deviceResults { margin: 18px 0 0 35px; }
.RopiFrontPreview__searchHub { display: grid; gap: 10px; }
.RopiFrontPreview__searchBlock { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 4px 11px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 12px; }
.RopiFrontPreview__searchBlock > div strong, .RopiFrontPreview__searchBlock > div small { display: block; }
.RopiFrontPreview__searchBlock > div strong { color: #1e293b; font-size: 12px; }
.RopiFrontPreview__searchBlock > div small { margin-top: 3px; color: #64748b; font-size: 10px; line-height: 1.4; }
.RopiFrontPreview__searchBlock form { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-top: 8px; }
.RopiFrontPreview__searchBlock input, .RopiFrontPreview__inlineSearch input, .RopiFrontPreview__partsFilter input { min-width: 0; height: 40px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 0 10px; color: #0f172a; font-size: 11px; outline: 0; }
.RopiFrontPreview__searchBlock input:focus, .RopiFrontPreview__inlineSearch input:focus, .RopiFrontPreview__partsFilter input:focus { border-color: var(--ropi-red); box-shadow: 0 0 0 3px rgba(215,33,49,.08); }
.RopiFrontPreview__searchBlock form button, .RopiFrontPreview__partsFilter button { min-width: 74px; border: 0; border-radius: 6px; background: #111827; padding: 0 12px; color: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
.RopiFrontPreview__searchBlock form button:disabled, .RopiFrontPreview__partsFilter button:disabled { opacity: .45; cursor: not-allowed; }
.RopiFrontPreview__inlineSearch label { display: block; margin-bottom: 6px; color: #475569; font-size: 10px; font-weight: 850; }
.RopiFrontPreview__inlineSearch > div { display: grid; grid-template-columns: minmax(0,1fr) 42px; gap: 7px; }
.RopiFrontPreview__inlineSearch button { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: var(--ropi-red); color: #fff; cursor: pointer; }
.RopiFrontPreview__inlineSearch button:disabled { opacity: .45; cursor: not-allowed; }
.RopiFrontPreview__apiError { margin: 10px 0 0; border-left: 3px solid #e11d48; background: #fff1f2; padding: 9px 10px; color: #9f1239; font-size: 10px; line-height: 1.45; }
.RopiFrontPreview__upload { display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #fda4af; border-radius: 10px; background: #fff8f8; padding: 22px; text-align: center; cursor: pointer; }
.RopiFrontPreview__upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.RopiFrontPreview__upload > .material-symbols-rounded { color: var(--ropi-red); font-size: 34px; }
.RopiFrontPreview__upload strong { margin-top: 9px; color: #1e293b; font-size: 13px; }
.RopiFrontPreview__upload small { max-width: 300px; margin-top: 6px; color: #64748b; font-size: 10px; line-height: 1.5; }
.RopiFrontPreview__secondaryLink { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; padding: 12px; color: var(--ropi-red); font-size: 11px; font-weight: 850; cursor: pointer; }
.RopiFrontPreview__choices button.RopiFrontPreview__secondaryLink { display: flex; grid-template-columns: none; justify-content: center; padding-right: 12px; padding-left: 12px; text-align: center; }
.RopiFrontPreview__secondaryLink .material-symbols-rounded { font-size: 16px; }
.RopiFrontPreview__privacyNote { display: flex; align-items: flex-start; gap: 7px; border-top: 1px solid #e2e8f0; padding-top: 11px; color: #64748b; font-size: 10px; line-height: 1.5; }
.RopiFrontPreview__privacyNote .material-symbols-rounded { color: #16a34a; font-size: 16px; }
.RopiFrontPreview__guided { display: grid; gap: 12px; }
.RopiFrontPreview__guidedStep { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; }
.RopiFrontPreview__guidedStep > span { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: #111827; color: #fff; font-size: 10px; font-weight: 900; }
.RopiFrontPreview__guidedControl { min-width: 0; color: #475569; }
.RopiFrontPreview__guidedControl > strong { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 850; }
.RopiFrontPreview__guidedSelectTrigger { height: 42px !important; border-color: #cbd5e1 !important; border-radius: 7px !important; background: #fff !important; padding-left: 11px !important; color: #0f172a !important; font-size: 11px !important; box-shadow: none !important; }
.RopiFrontPreview__guidedSelectTrigger > span:first-child { color: #475569 !important; }
.RopiFrontPreview__guidedSelectTrigger:focus { border-color: var(--ropi-red) !important; box-shadow: 0 0 0 3px rgba(215,33,49,.08) !important; }
.RopiFrontPreview__guidedSelectMenu { border-color: #e2e8f0 !important; border-radius: 8px !important; background: #fff !important; color: #334155 !important; box-shadow: 0 14px 36px rgba(15,23,42,.18) !important; }
.RopiFrontPreview__guidedSelectMenu > div:first-child { border-color: #e2e8f0 !important; background: #f8fafc !important; }
.RopiFrontPreview__guidedSelectMenu input { border-color: #cbd5e1 !important; border-radius: 6px !important; background: #fff !important; color: #0f172a !important; font-size: 11px !important; }
.RopiFrontPreview__guidedSelectMenu ul { background: #fff !important; color: #334155 !important; }
.RopiFrontPreview__guidedSelectMenu li { min-height: 36px; background: #fff !important; padding: 8px 11px !important; color: #334155 !important; font-size: 11px !important; }
.RopiFrontPreview__guidedSelectMenu li > span:first-child > span:last-child > span + span { color: #64748b !important; }
.RopiFrontPreview__guidedSelectMenu li[data-active="true"] { background: #fff1f2 !important; color: #9f1239 !important; }
.RopiFrontPreview__guidedSelectMenu li[data-active="true"] > span:first-child > span:last-child > span:first-child { color: #9f1239 !important; }
.RopiFrontPreview__guidedSelectMenu li[aria-selected="true"] { color: #9f1239 !important; }
.RopiFrontPreview__guidedStep.is-disabled { opacity: .55; }
.RopiFrontPreview__extraction { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; border-left: 3px solid #2563eb; background: #eff6ff; padding: 10px; color: #1e3a8a; }
.RopiFrontPreview__extraction > span { font-size: 22px; }
.RopiFrontPreview__extraction small, .RopiFrontPreview__extraction strong { display: block; }
.RopiFrontPreview__extraction small { font-size: 8px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.RopiFrontPreview__extraction strong { margin-top: 2px; font-size: 11px; }
.RopiFrontPreview__recommendationHeading { display: flex; align-items: center; gap: 9px; border-top: 1px solid #bbf7d0; border-bottom: 1px solid #bbf7d0; background: #f0fdf4; padding: 10px; color: #166534; }
.RopiFrontPreview__recommendationHeading > span { font-size: 21px; }
.RopiFrontPreview__recommendationHeading small, .RopiFrontPreview__recommendationHeading strong { display: block; }
.RopiFrontPreview__recommendationHeading small { font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.RopiFrontPreview__recommendationHeading strong { margin-top: 2px; font-size: 10px; line-height: 1.35; }
.RopiFrontPreview__alternativeIntro { margin: 11px 0 8px; color: #475569; font-size: 9px; line-height: 1.5; }
.RopiFrontPreview__alternativeIntro.is-model-confirmed { border-left: 3px solid #22c55e; background: #f0fdf4; padding: 9px 10px; color: #166534; }
.RopiFrontPreview__alternativeIntro.is-neutral { border-left: 3px solid #f59e0b; background: #fffbeb; padding: 9px 10px; color: #92400e; }
.RopiFrontPreview__sectionTitle.is-alternatives { margin-top: 8px; }
.RopiFrontPreview__imageFallbackActions { display: grid; gap: 6px; margin-top: 8px; }
.RopiFrontPreview__imageFallbackActions button { display: flex; min-height: 38px; align-items: center; gap: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; padding: 0 10px; color: #475569; font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
.RopiFrontPreview__imageFallbackActions button:hover { border-color: #fda4af; background: #fff8f8; color: #9f1239; }
.RopiFrontPreview__imageFallbackActions .material-symbols-rounded { color: var(--ropi-red); font-size: 18px; }

.RopiFrontPreview__scanFrame { position: relative; height: 174px; overflow: hidden; border: 1px solid #cbd5e1; border-radius: 9px; background: #e2e8f0; }
.RopiFrontPreview__scanFrame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.RopiFrontPreview__scanFrame::after { content:""; position:absolute; inset:18px; border:1px solid rgba(255,255,255,.85); border-radius:5px; box-shadow:0 0 0 999px rgba(15,23,42,.3); }
.RopiFrontPreview__scanFrame > span { position: absolute; z-index: 2; left: 18px; right: 18px; top: 20%; height: 2px; background: #ef4444; box-shadow: 0 0 14px #ef4444; animation: RopiFrontScan 1.45s infinite alternate ease-in-out; }
@keyframes RopiFrontScan { to { top: 78%; } }
.RopiFrontPreview__analysisSteps { margin-top: 13px; border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__analysisSteps div { display: flex; align-items: center; gap: 9px; border-bottom: 1px solid #e2e8f0; padding: 10px 2px; color: #94a3b8; font-size: 11px; font-weight: 700; }
.RopiFrontPreview__analysisSteps span { width: 8px; height: 8px; border: 2px solid #cbd5e1; border-radius: 50%; }
.RopiFrontPreview__analysisSteps .is-done { color: #166534; }
.RopiFrontPreview__analysisSteps .is-done span { border-color: #22c55e; background: #22c55e; }

.RopiFrontPreview__candidate { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.RopiFrontPreview__candidateTop { display: grid; grid-template-columns: 54px minmax(0,1fr) 24px; align-items: center; gap: 11px; padding: 14px; }
.RopiFrontPreview__candidateLogo { display: flex; width: 54px; height: 54px; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; padding: 7px; }
.RopiFrontPreview__candidateLogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.RopiFrontPreview__candidateTop small, .RopiFrontPreview__candidateTop h3, .RopiFrontPreview__candidateTop p { margin: 0; }
.RopiFrontPreview__candidateTop small { color: #16a34a; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.RopiFrontPreview__candidateTop h3 { margin-top: 3px; color: #111827; font-size: 14px; }
.RopiFrontPreview__candidateTop p { margin-top: 2px; color: #64748b; font-size: 11px; }
.RopiFrontPreview__candidateTop > .material-symbols-rounded { color: #16a34a; }
.RopiFrontPreview__candidate dl { margin: 0; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.RopiFrontPreview__candidate dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #e2e8f0; padding: 8px 13px; font-size: 10px; }
.RopiFrontPreview__candidate dt { color: #64748b; }
.RopiFrontPreview__candidate dd { margin: 0; color: #1e293b; font-weight: 800; }
.RopiFrontPreview__candidateActions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
.RopiFrontPreview__candidateActions button { min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #334155; font-size: 10px; font-weight: 850; cursor: pointer; }
.RopiFrontPreview__candidateActions button.is-primary { border-color: var(--ropi-red); background: var(--ropi-red); color: #fff; }
.RopiFrontPreview__finePrint { margin: 0; padding: 0 13px 12px; color: #94a3b8; font-size: 9px; line-height: 1.45; text-align: center; }
.RopiFrontPreview__deviceResult { display: grid; width: 100%; grid-template-columns: 34px minmax(0,1fr) 22px; align-items: center; gap: 9px; border: 0; border-top: 1px solid #e2e8f0; background: #fff; padding: 11px 2px; text-align: left; cursor: pointer; }
.RopiFrontPreview__deviceResult:last-of-type { border-bottom: 1px solid #e2e8f0; }
.RopiFrontPreview__deviceResult:hover { background: #f8fafc; }
.RopiFrontPreview__deviceResult > .material-symbols-rounded:first-child { color: var(--ropi-red); font-size: 23px; }
.RopiFrontPreview__deviceResult > .material-symbols-rounded:last-child { color: #cbd5e1; font-size: 18px; }
.RopiFrontPreview__deviceResult strong, .RopiFrontPreview__deviceResult small { display: block; }
.RopiFrontPreview__deviceResult strong { color: #1e293b; font-size: 11px; }
.RopiFrontPreview__deviceResult small { margin-top: 3px; color: #64748b; font-size: 9px; line-height: 1.4; }
.RopiFrontPreview__deviceResult.is-ai-recommended { border-top-color: #bbf7d0; border-bottom: 1px solid #bbf7d0; background: #f0fdf4; padding-right: 8px; padding-left: 8px; }
.RopiFrontPreview__deviceResult.is-ai-recommended:hover { background: #dcfce7; }
.RopiFrontPreview__deviceResult.is-ai-recommended > .material-symbols-rounded:first-child,
.RopiFrontPreview__deviceResult.is-ai-recommended > .material-symbols-rounded:last-child { color: #16a34a; }
.RopiFrontPreview__deviceResult.is-ai-recommended strong { color: #14532d; }
.RopiFrontPreview__deviceResult.is-ai-recommended small { color: #3f6212; }
.RopiFrontPreview__finePrint.is-left { padding: 9px 0 0; text-align: left; }
.RopiFrontPreview__categoryList { border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__categoryList button { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-bottom: 1px solid #e2e8f0; background: #fff; padding: 0 3px; color: #334155; font-size: 10px; font-weight: 750; text-align: left; cursor: pointer; }
.RopiFrontPreview__categoryList button:hover { color: var(--ropi-red); }
.RopiFrontPreview__categoryList .material-symbols-rounded { color: #cbd5e1; font-size: 17px; }

.RopiFrontPreview__flowLabel { margin: 0 0 9px; color: #475569; font-size: 11px; font-weight: 750; }
.RopiFrontPreview__problemOptions { display: grid; gap: 7px; }
.RopiFrontPreview__problemOptions button { min-height: 42px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; padding: 0 12px; color: #334155; font-size: 11px; font-weight: 750; text-align: left; cursor: pointer; }
.RopiFrontPreview__problemOptions button:hover { border-color: #fda4af; background: #fff8f8; color: #9f1239; }

.RopiFrontPreview__result { border-top: 2px solid #f59e0b; }
.RopiFrontPreview__resultHeading { display: flex; align-items: center; gap: 10px; padding: 13px 2px; }
.RopiFrontPreview__resultHeading > span { color: #d97706; font-size: 26px; }
.RopiFrontPreview__resultHeading small, .RopiFrontPreview__resultHeading h3 { display: block; margin: 0; }
.RopiFrontPreview__resultHeading small { color: #d97706; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.RopiFrontPreview__resultHeading h3 { margin-top: 2px; color: #1e293b; font-size: 14px; }
.RopiFrontPreview__result ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__result li { display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid #e2e8f0; padding: 11px 2px; }
.RopiFrontPreview__result li > span { display: inline-flex; width: 22px; height: 22px; flex: 0 0 22px; align-items: center; justify-content: center; border-radius: 50%; background: #fff7ed; color: #c2410c; font-size: 9px; font-weight: 900; }
.RopiFrontPreview__result li p { margin: 0; }
.RopiFrontPreview__result li strong, .RopiFrontPreview__result li small { display: block; }
.RopiFrontPreview__result li strong { color: #334155; font-size: 11px; }
.RopiFrontPreview__result li small { margin-top: 3px; color: #64748b; font-size: 10px; line-height: 1.45; }
.RopiFrontPreview__resultAction { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 9px; border: 0; border-radius: 6px; background: #111827; color: #fff; font-size: 11px; font-weight: 850; cursor: pointer; }
.RopiFrontPreview__resultAction .material-symbols-rounded { font-size: 16px; }

.RopiFrontPreview__sectionTitle { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.RopiFrontPreview__sectionTitle small, .RopiFrontPreview__sectionTitle h3 { display: block; margin: 0; }
.RopiFrontPreview__sectionTitle small { color: #64748b; font-size: 9px; text-transform: uppercase; }
.RopiFrontPreview__sectionTitle h3 { margin-top: 2px; color: #1e293b; font-size: 14px; }
.RopiFrontPreview__sectionTitle > span { color: var(--ropi-red); font-size: 10px; font-weight: 850; }
.RopiFrontPreview__partsFilter { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; margin-bottom: 10px; }
.RopiFrontPreview__partRow { display: grid; width: 100%; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 0; border-top: 1px solid #e2e8f0; background: #fff; padding: 10px 1px; text-align: left; text-decoration: none; cursor: pointer; }
.RopiFrontPreview__partRow:last-of-type { border-bottom: 1px solid #e2e8f0; }
.RopiFrontPreview__partImage { display: inline-flex; width: 40px; height: 40px; overflow: hidden; align-items: center; justify-content: center; border-radius: 6px; background: #f1f5f9; color: #94a3b8; font-size: 21px; }
.RopiFrontPreview__partImage img { width: 100%; height: 100%; object-fit: contain; }
.RopiFrontPreview__partRow strong, .RopiFrontPreview__partRow small { display: block; }
.RopiFrontPreview__partRow strong { color: #334155; font-size: 10px; }
.RopiFrontPreview__partRow small { margin-top: 3px; color: #94a3b8; font-size: 9px; }
.RopiFrontPreview__partPrice { color: #111827; font-size: 11px; font-weight: 900; }
.RopiFrontPreview__emptyState { margin: 0; border-top: 1px solid #e2e8f0; padding: 18px 4px; color: #64748b; font-size: 11px; text-align: center; }
.RopiFrontPreview__allResults { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; border: 1px solid #fecdd3; border-radius: 6px; background: #fff7f8; padding: 9px 12px; color: var(--ropi-red); font-size: 11px; font-weight: 850; text-align: center; text-decoration: none; }
.RopiFrontPreview__allResults:hover { border-color: #fda4af; background: #fff1f2; }
.RopiFrontPreview__allResults .material-symbols-rounded { font-size: 16px; }

.RopiFrontPreview__orderForm { display: grid; gap: 12px; }
.RopiFrontPreview__orderForm label span { display: block; margin-bottom: 5px; color: #475569; font-size: 10px; font-weight: 800; }
.RopiFrontPreview__orderForm input { width: 100%; height: 42px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 0 11px; color: #0f172a; font-size: 12px; outline: 0; }
.RopiFrontPreview__orderForm input:focus { border-color: var(--ropi-red); box-shadow: 0 0 0 3px rgba(215,33,49,.08); }
.RopiFrontPreview__orderForm button { min-height: 42px; border: 0; border-radius: 6px; background: var(--ropi-red); color: #fff; font-size: 11px; font-weight: 850; cursor: pointer; }
.RopiFrontPreview__orderForm + .RopiFrontPreview__finePrint { padding: 10px 0 0; }
.RopiFrontPreview__orderStatus .RopiFrontPreview__resultHeading > span { color: #2563eb; }
.RopiFrontPreview__orderStatus .RopiFrontPreview__resultHeading small { color: #2563eb; }
.RopiFrontPreview__timeline { border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__timeline > div { position: relative; display: flex; gap: 11px; padding: 11px 2px; }
.RopiFrontPreview__timeline > div:not(:last-child)::after { content:""; position:absolute; left:6px; top:22px; bottom:-10px; width:2px; background:#e2e8f0; }
.RopiFrontPreview__timeline > div > span { position: relative; z-index: 1; width: 14px; height: 14px; flex: 0 0 14px; border: 3px solid #e2e8f0; border-radius: 50%; background: #fff; }
.RopiFrontPreview__timeline .is-done > span { border-color: #16a34a; background: #16a34a; }
.RopiFrontPreview__timeline .is-current > span { border-color: #2563eb; box-shadow: 0 0 0 4px #dbeafe; }
.RopiFrontPreview__timeline p { margin: 0; }
.RopiFrontPreview__timeline strong, .RopiFrontPreview__timeline small { display: block; }
.RopiFrontPreview__timeline strong { color: #334155; font-size: 11px; }
.RopiFrontPreview__timeline small { margin-top: 2px; color: #94a3b8; font-size: 9px; }

.RopiFrontPreview__verifiedInfo, .RopiFrontPreview__accountList { margin-top: 18px; border-top: 2px solid #16a34a; }
.RopiFrontPreview__verifiedInfoHeader { display: flex; align-items: center; gap: 10px; padding: 12px 2px; }
.RopiFrontPreview__verifiedInfoHeader > span { color: #16a34a; font-size: 24px; }
.RopiFrontPreview__verifiedInfoHeader small, .RopiFrontPreview__verifiedInfoHeader strong { display: block; }
.RopiFrontPreview__verifiedInfoHeader small { color: #15803d; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.RopiFrontPreview__verifiedInfoHeader strong { margin-top: 2px; color: #14532d; font-size: 12px; }
.RopiFrontPreview__verifiedInfoHeader p { margin: 4px 0 0; color: #64748b; font-size: 9px; line-height: 1.45; }
.RopiFrontPreview__knowledgeFollowup { border-top-color: #cbd5e1; }
.RopiFrontPreview__knowledgeFollowup .RopiFrontPreview__verifiedInfoHeader > span,
.RopiFrontPreview__knowledgeFollowup .RopiFrontPreview__verifiedInfoHeader small { color: #64748b; }
.RopiFrontPreview__knowledgeFollowup .RopiFrontPreview__verifiedInfoHeader strong { color: #334155; }
.RopiFrontPreview__knowledgeFollowup .RopiFrontPreview__verifiedLink { min-height: 42px; border-color: #e2e8f0; color: var(--ropi-red); font-weight: 850; }
.RopiFrontPreview__safetyStop { margin-top: 18px; border-top: 3px solid #dc2626; background: #fff7f7; padding: 15px 13px 13px; }
.RopiFrontPreview__safetyHeader { display: flex; align-items: flex-start; gap: 10px; }
.RopiFrontPreview__safetyHeader > span { color: #dc2626; font-size: 24px; }
.RopiFrontPreview__safetyHeader small, .RopiFrontPreview__safetyHeader strong { display: block; }
.RopiFrontPreview__safetyHeader small { color: #b91c1c; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.RopiFrontPreview__safetyHeader strong { margin-top: 3px; color: #7f1d1d; font-size: 13px; }
.RopiFrontPreview__safetyStop ol { margin: 12px 0; padding-left: 20px; color: #3f3f46; font-size: 10px; line-height: 1.55; }
.RopiFrontPreview__safetyStop li + li { margin-top: 6px; }
.RopiFrontPreview__safetyStop > p { margin: 10px 0 0; color: #71717a; font-size: 9px; line-height: 1.5; }
.RopiFrontPreview__safetyEmergency { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #fecaca; padding: 8px 10px; color: #b91c1c; font-size: 10px; font-weight: 900; text-decoration: none; }
.RopiFrontPreview__safetyEmergency .material-symbols-rounded { font-size: 17px; }
.RopiFrontPreview__verifiedLink, .RopiFrontPreview__accountRow { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e2e8f0; padding: 9px 2px; color: #334155; text-decoration: none; }
button.RopiFrontPreview__accountRow { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.RopiFrontPreview__verifiedLink:last-of-type, .RopiFrontPreview__accountRow:last-of-type { border-bottom: 1px solid #e2e8f0; }
.RopiFrontPreview__verifiedLink:hover, .RopiFrontPreview__accountRow:hover { color: var(--ropi-red); }
.RopiFrontPreview__verifiedLink > span:first-child { font-size: 11px; font-weight: 800; }
.RopiFrontPreview__verifiedLink .material-symbols-rounded, .RopiFrontPreview__accountRow > .material-symbols-rounded { color: #94a3b8; font-size: 18px; }
.RopiFrontPreview__accountState { display: flex; gap: 11px; margin-top: 18px; border-top: 2px solid #2563eb; padding-top: 15px; }
.RopiFrontPreview__accountStateIcon { color: #2563eb; font-size: 25px; }
.RopiFrontPreview__accountState > div { min-width: 0; }
.RopiFrontPreview__accountAuthBody { flex: 1 1 auto; }
.RopiFrontPreview__accountState small, .RopiFrontPreview__accountState strong { display: block; }
.RopiFrontPreview__accountState small { color: #2563eb; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.RopiFrontPreview__accountState strong { margin-top: 3px; color: #1e293b; font-size: 13px; }
.RopiFrontPreview__accountState p { margin: 6px 0 12px; color: #64748b; font-size: 10px; line-height: 1.5; }
.RopiFrontPreview__primaryAction { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 6px; background: #111827; padding: 8px 12px; color: #fff; font: inherit; font-size: 10px; font-weight: 850; text-decoration: none; cursor: pointer; }
.RopiFrontPreview__primaryAction:hover { background: var(--ropi-red); }
.RopiFrontPreview__primaryAction:disabled { background: #94a3b8; cursor: not-allowed; }
.RopiFrontPreview__primaryAction .material-symbols-rounded { font-size: 17px; }
.RopiFrontPreview__accountAuthForm { display: grid; gap: 8px; margin-top: 10px; }
.RopiFrontPreview__accountAuthActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.RopiFrontPreview__accountAuthActions > button { width: 100%; min-width: 0; min-height: 44px; padding: 6px; white-space: normal; }
.RopiFrontPreview__accountAuthForm > label { color: #475569; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.RopiFrontPreview__accountAuthInput { display: flex; min-height: 42px; align-items: center; gap: 7px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; padding: 0 10px; }
.RopiFrontPreview__accountAuthInput:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.RopiFrontPreview__accountAuthInput > span { color: #64748b; font-size: 18px; }
.RopiFrontPreview__accountAuthInput input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #1e293b; font: inherit; font-size: 11px; }
.RopiFrontPreview__accountAuthCode { width: 100%; height: 48px; border: 1px solid #cbd5e1; border-radius: 6px; outline: 0; background: #fff; color: #111827; font: inherit; font-size: 21px; font-weight: 850; letter-spacing: .28em; text-align: center; }
.RopiFrontPreview__accountAuthCode:focus { border: 2px solid #2563eb; box-shadow: none; }
.RopiFrontPreview__accountAuthPaste { justify-self: start; min-height: 44px; border-color: #cbd5e1; background: #fff; color: #475569; }
.RopiFrontPreview__accountAuthPaste:hover { background: #f8fafc; }
.RopiFrontPreview__accountAuthMeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #64748b; font-size: 9px; }
.RopiFrontPreview__accountAuthMeta button { border: 0; background: transparent; padding: 0; color: #2563eb; font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.RopiFrontPreview__accountAuthMeta button:disabled { color: #94a3b8; cursor: not-allowed; }
.RopiFrontPreview__accountState p.RopiFrontPreview__accountAuthNotice { margin: 0; color: #94a3b8; font-size: 8px; line-height: 1.45; }
.RopiFrontPreview__accountState p.RopiFrontPreview__accountAuthFeedback { margin: 8px 0 0; border-left: 2px solid currentColor; padding: 6px 8px; font-size: 12px; line-height: 1.45; }
.RopiFrontPreview__accountAuthFeedback.is-success { background: #f0fdf4; color: #15803d; }
.RopiFrontPreview__accountAuthFeedback.is-error { background: #fff1f2; color: #be123c; }
.RopiFrontPreview__accountState .RopiFrontPreview__secondaryLink { margin-top: 8px; }
.RopiFrontPreview__accountAuthForm .RopiFrontPreview__secondaryLink { margin-top: 0; }
.RopiFrontPreview__accountAuthForm .is-spinning { animation: RopiFrontPreviewSpin .8s linear infinite; }
@keyframes RopiFrontPreviewSpin { to { transform: rotate(360deg); } }
.RopiFrontPreview__accountRow > span:first-child { min-width: 0; }
.RopiFrontPreview__accountRow strong, .RopiFrontPreview__accountRow small { display: block; }
.RopiFrontPreview__accountRow strong { color: #334155; font-size: 11px; }
.RopiFrontPreview__accountRow small { margin-top: 3px; color: #64748b; font-size: 9px; line-height: 1.4; }
.RopiFrontPreview__accountRow.is-static:hover { color: #334155; }
.RopiFrontPreview__accountAmount { flex: 0 0 auto; color: #111827; font-size: 10px; font-weight: 900; }
.RopiFrontPreview__orderCloud { margin: 18px 0 0 35px; border: 1px solid #bbf7d0; border-radius: 11px 11px 11px 4px; background: #f8fffb; padding: 10px 11px; box-shadow: 0 5px 16px rgba(22,101,52,.06); }
.RopiFrontPreview__orderCloudHeader { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 8px; }
.RopiFrontPreview__orderCloudHeader > .material-symbols-rounded { color: #16a34a; font-size: 21px; }
.RopiFrontPreview__orderCloudHeader div { min-width: 0; }
.RopiFrontPreview__orderCloudHeader small, .RopiFrontPreview__orderCloudHeader strong { display: block; }
.RopiFrontPreview__orderCloudHeader small { color: #15803d; font-size: 8px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.RopiFrontPreview__orderCloudHeader strong { overflow: hidden; margin-top: 2px; color: #14532d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__orderCloudHeader > span:last-child { max-width: 118px; overflow: hidden; border-radius: 5px; background: #dcfce7; padding: 4px 6px; color: #166534; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__orderCloudMeta { display: flex; gap: 18px; margin-top: 8px; border-top: 1px solid #dcfce7; padding: 7px 0 0 32px; }
.RopiFrontPreview__orderCloudMeta span { min-width: 0; }
.RopiFrontPreview__orderCloudMeta small, .RopiFrontPreview__orderCloudMeta strong { display: block; }
.RopiFrontPreview__orderCloudMeta small { color: #65a30d; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.RopiFrontPreview__orderCloudMeta strong { margin-top: 1px; color: #334155; font-size: 9px; }
.RopiFrontPreview__orderCloudActions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-left: 32px; }
.RopiFrontPreview__orderCloudActions a { display: inline-flex; min-height: 27px; align-items: center; gap: 4px; border: 1px solid #d1fae5; border-radius: 5px; background: #fff; padding: 4px 7px; color: #166534; font-size: 8px; font-weight: 800; text-decoration: none; }
.RopiFrontPreview__orderCloudActions a:hover { border-color: #86efac; background: #f0fdf4; }
.RopiFrontPreview__orderCloudActions .material-symbols-rounded { font-size: 13px; }
.RopiFrontPreview__compatibilityCloud.is-consumable_advisory,
.RopiFrontPreview__compatibilityCloud.is-not_listed,
.RopiFrontPreview__compatibilityCloud.is-unavailable { border-color: #fed7aa; background: #fffaf5; }
.RopiFrontPreview__compatibilityCloud.is-consumable_advisory .RopiFrontPreview__orderCloudHeader > .material-symbols-rounded,
.RopiFrontPreview__compatibilityCloud.is-not_listed .RopiFrontPreview__orderCloudHeader > .material-symbols-rounded,
.RopiFrontPreview__compatibilityCloud.is-unavailable .RopiFrontPreview__orderCloudHeader > .material-symbols-rounded { color: #ea580c; }
.RopiFrontPreview__compatibilityCloud.is-consumable_advisory .RopiFrontPreview__orderCloudHeader small,
.RopiFrontPreview__compatibilityCloud.is-not_listed .RopiFrontPreview__orderCloudHeader small,
.RopiFrontPreview__compatibilityCloud.is-unavailable .RopiFrontPreview__orderCloudHeader small { color: #c2410c; }
.RopiFrontPreview__compatibilityCloud.is-consumable_advisory .RopiFrontPreview__orderCloudHeader > span:last-child,
.RopiFrontPreview__compatibilityCloud.is-not_listed .RopiFrontPreview__orderCloudHeader > span:last-child,
.RopiFrontPreview__compatibilityCloud.is-unavailable .RopiFrontPreview__orderCloudHeader > span:last-child { background: #ffedd5; color: #9a3412; }
.RopiFrontPreview__compatibilityNote { margin: 8px 0 0 32px; border-top: 1px solid #fed7aa; padding-top: 7px; color: #7c2d12; font-size: 8px; line-height: 1.45; }
.RopiFrontPreview__compatibilityContinue { min-height: 27px; border: 0; background: transparent; padding: 4px 7px; color: var(--ropi-red); font-size: 8px; font-weight: 850; cursor: pointer; }

.RopiFrontPreview__phoneTransfer { display: grid; justify-items: center; gap: 12px; padding: 12px 0; font-size: 14px; line-height: 1.5; }
.RopiFrontPreview__phoneTransfer img { width: 200px; max-width: 100%; height: auto; }
.RopiFrontPreview__phoneHelp { margin-top: 20px; border-top: 1px solid #e2e8f0; padding: 16px 0 0; font-size: 14px; line-height: 1.5; }
.RopiFrontPreview__phoneHelp p { margin: 6px 0 10px; color: #64748b; }
.RopiFrontPreview__returnGuide { margin-top: 18px; border-top: 2px solid #16a34a; }
.RopiFrontPreview__returnGuideHeader { display: flex; align-items: center; gap: 9px; padding: 12px 2px 10px; }
.RopiFrontPreview__returnGuideHeader > span { color: #16a34a; font-size: 23px; }
.RopiFrontPreview__returnGuideHeader small, .RopiFrontPreview__returnGuideHeader strong { display: block; }
.RopiFrontPreview__returnGuideHeader small { color: #15803d; font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.RopiFrontPreview__returnGuideHeader strong { margin-top: 2px; color: #14532d; font-size: 12px; }
.RopiFrontPreview__returnGuideHeader.is-empty > span, .RopiFrontPreview__returnGuideHeader.is-empty small { color: #b45309; }
.RopiFrontPreview__returnGuideHeader.is-empty strong { color: #78350f; }
.RopiFrontPreview__returnReason { margin: 0 0 10px; border-left: 2px solid #f59e0b; background: #fffbeb; padding: 8px 9px; color: #78350f; font-size: 10px; line-height: 1.5; }
.RopiFrontPreview__returnOrder { border-top: 1px solid #d1fae5; }
.RopiFrontPreview__returnOrderTitle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; }
.RopiFrontPreview__returnOrderTitle strong, .RopiFrontPreview__returnOrderTitle small { display: block; }
.RopiFrontPreview__returnOrderTitle strong { color: #166534; font-size: 10px; }
.RopiFrontPreview__returnOrderTitle small { margin-top: 2px; color: #64748b; font-size: 8px; }
.RopiFrontPreview__returnOrderTitle > span:last-child { flex: 0 0 auto; color: #15803d; font-size: 8px; font-weight: 850; }
.RopiFrontPreview__returnItem { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #f1f5f9; padding: 7px 2px 7px 24px; }
.RopiFrontPreview__returnItem > span:first-child { min-width: 0; }
.RopiFrontPreview__returnItem strong, .RopiFrontPreview__returnItem small { display: block; }
.RopiFrontPreview__returnItem strong { overflow: hidden; color: #334155; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__returnItem small { margin-top: 2px; color: #94a3b8; font-size: 7px; }
.RopiFrontPreview__returnItem > span:last-child { flex: 0 0 auto; color: #166534; font-size: 9px; font-weight: 850; }
.RopiFrontPreview__returnAction { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #d1fae5; padding: 9px 2px; color: #15803d; font-size: 9px; font-weight: 850; text-decoration: none; }
.RopiFrontPreview__returnAction:hover { color: var(--ropi-red); }
.RopiFrontPreview__returnAction .material-symbols-rounded { font-size: 16px; }
.RopiFrontPreview__returnSteps { border-top: 1px solid #e2e8f0; padding: 11px 2px; }
.RopiFrontPreview__returnSteps > small, .RopiFrontPreview__existingReturns > small { color: #475569; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.RopiFrontPreview__returnSteps ol { display: grid; gap: 6px; margin: 8px 0; padding: 0; list-style: none; }
.RopiFrontPreview__returnSteps li { display: flex; align-items: center; gap: 7px; }
.RopiFrontPreview__returnSteps li > span { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; border-radius: 50%; background: #dcfce7; color: #166534; font-size: 8px; font-weight: 900; }
.RopiFrontPreview__returnSteps li p, .RopiFrontPreview__returnSteps > p { margin: 0; color: #475569; font-size: 9px; line-height: 1.45; }
.RopiFrontPreview__returnSteps > p { color: #64748b; }
.RopiFrontPreview__existingReturns { border-top: 1px solid #e2e8f0; padding: 11px 2px 5px; }
.RopiFrontPreview__existingReturns > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #f1f5f9; padding: 7px 0; }
.RopiFrontPreview__existingReturns > div:first-of-type { margin-top: 7px; }
.RopiFrontPreview__existingReturns strong, .RopiFrontPreview__existingReturns small { display: block; }
.RopiFrontPreview__existingReturns strong { color: #334155; font-size: 9px; }
.RopiFrontPreview__existingReturns small { margin-top: 2px; color: #94a3b8; font-size: 7px; }
.RopiFrontPreview__existingReturns > div > span:last-child { max-width: 110px; color: #475569; font-size: 8px; text-align: right; }
.RopiFrontPreview__existingReturns > a, .RopiFrontPreview__returnPolicyLink { display: inline-flex; padding: 7px 0; color: var(--ropi-red); font-size: 8px; font-weight: 850; text-decoration: none; }
.RopiFrontPreview__returnPolicyLink { width: 100%; justify-content: center; border-top: 1px solid #e2e8f0; padding-top: 10px; }

.RopiFrontPreview__suggestions { display: flex; gap: 6px; overflow-x: auto; border-top: 1px solid #e5e7eb; padding: 8px 12px 0; scrollbar-width: none; }
.RopiFrontPreview__suggestions::-webkit-scrollbar { display: none; }
.RopiFrontPreview__suggestions button { flex: 0 0 auto; min-height: 28px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; padding: 0 10px; color: #475569; font-size: 9px; font-weight: 800; cursor: pointer; }
.RopiFrontPreview__suggestions button:hover { border-color: #fda4af; color: #be123c; }
.RopiFrontPreview__quickActions { display: flex; flex: 0 0 auto; gap: 6px; overflow-x: auto; margin: 8px 12px 0; padding: 1px 0 3px; scrollbar-width: none; }
.RopiFrontPreview__quickActions::-webkit-scrollbar { display: none; }
.RopiFrontPreview__quickActions a { display: inline-flex; min-height: 30px; flex: 0 0 auto; align-items: center; gap: 5px; border: 1px solid #dbe3ec; border-radius: 999px; background: #fff; padding: 5px 9px; color: #475569; font-size: 9px; font-weight: 800; line-height: 1; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.RopiFrontPreview__quickActions a:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.RopiFrontPreview__quickActions a:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.RopiFrontPreview__quickActions a.is-attention { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.RopiFrontPreview__quickActions a.is-attention:hover { border-color: #86efac; background: #dcfce7; }
.RopiFrontPreview__quickActions .material-symbols-rounded { font-size: 15px; }
.RopiFrontPreview__quickActions small { display: inline-flex; min-width: 15px; height: 15px; align-items: center; justify-content: center; border-radius: 999px; background: #16a34a; padding: 0 4px; color: #fff; font-size: 7px; font-weight: 900; }
.RopiFrontPreview__composer { display: block; margin: 8px 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; padding: 6px; box-shadow: 0 5px 18px rgba(15,23,42,.05); }
.RopiFrontPreview__quickActions + .RopiFrontPreview__composer { margin-top: 4px; }
.RopiFrontPreview__composer:focus-within { border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(15,23,42,.05), 0 8px 22px rgba(15,23,42,.07); }
.RopiFrontPreview__composerRow { display: grid; grid-template-columns: 38px minmax(0,1fr) 40px; align-items: end; gap: 5px; }
.RopiFrontPreview__fileInput { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.RopiFrontPreview__composer button { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: #64748b; cursor: pointer; }
.RopiFrontPreview__composer button.is-attach { width: 38px; height: 38px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #475569; }
.RopiFrontPreview__composer button.is-attach:hover { border-color: #cbd5e1; background: #f1f5f9; color: #111827; }
.RopiFrontPreview__composer textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 38px; max-height: 69px; overflow-x: hidden; overflow-y: hidden; resize: none; border: 0; background: transparent; padding: 9px 6px 7px; color: #1e293b; font: inherit; font-size: 12px; line-height: 1.45; outline: 0; }
.RopiFrontPreview__composer textarea::placeholder { overflow: hidden; color: #94a3b8; text-overflow: ellipsis; white-space: nowrap; }
.RopiFrontPreview__composer button.is-send { width: 40px; height: 40px; border-radius: 10px; background: #111827; color: #fff; box-shadow: 0 5px 14px rgba(15,23,42,.18); }
.RopiFrontPreview__composer button.is-send:hover:not(:disabled) { background: var(--ropi-red); }
.RopiFrontPreview__composer button.is-send:disabled { background: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: default; }
.RopiFrontPreview__composer .material-symbols-rounded { font-size: 19px; }
.RopiFrontPreview__panelFooter { display: flex; min-height: 38px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-top: 1px solid #f1f5f9; padding: 5px 12px; color: #94a3b8; font-size: 8px; font-weight: 700; line-height: 1.35; text-align: center; }
.RopiFrontPreview__panelFooter a { color: #64748b; text-decoration: underline; text-underline-offset: 2px; }
.RopiFrontPreview__panelFooter a:hover { color: #334155; }
.RopiFrontPreview__panelFooter .material-symbols-rounded { color: #16a34a; font-size: 12px; }
.RopiFrontPreview__operatorState { display: flex; gap: 10px; margin-top: 18px; border: 1px solid #bbf7d0; border-left: 3px solid #16a34a; border-radius: 8px; background: #f0fdf4; padding: 11px 12px; color: #14532d; }
.RopiFrontPreview__operatorState > .material-symbols-rounded { margin-top: 1px; font-size: 22px; }
.RopiFrontPreview__operatorState div { min-width: 0; }
.RopiFrontPreview__operatorState small { display: block; color: #15803d; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.RopiFrontPreview__operatorState strong { display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; }
.RopiFrontPreview__operatorState p { margin: 4px 0 0; color: #166534; font-size: 10px; line-height: 1.4; }
.RopiFrontPreview__whatsappHandoff { display: grid; gap: 8px; margin-top: 10px; border-top: 1px solid #bbf7d0; padding-top: 9px; }
.RopiFrontPreview__whatsappHandoff p { margin: 0; color: #14532d; font-size: 10px; line-height: 1.45; }
.RopiFrontPreview__whatsappHandoff label { display: flex; align-items: flex-start; gap: 7px; color: #14532d; font-size: 10px; line-height: 1.4; cursor: pointer; }
.RopiFrontPreview__whatsappHandoff input { width: 15px; height: 15px; margin: 0; accent-color: #16a34a; flex: 0 0 auto; }
.RopiFrontPreview__whatsappHandoff button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border: 0; border-radius: 6px; background: #15803d; padding: 7px 11px; color: #fff; font-size: 11px; font-weight: 800; cursor: pointer; }
.RopiFrontPreview__whatsappHandoff button:disabled { opacity: .48; cursor: not-allowed; }
.RopiFrontPreview__whatsappHandoff button .material-symbols-rounded { font-size: 17px; }
.RopiFrontPreview__whatsappConnected { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; border-top: 1px solid #bbf7d0; padding-top: 9px; color: #166534; font-size: 10px; font-weight: 700; line-height: 1.4; }
.RopiFrontPreview__whatsappConnected .material-symbols-rounded { color: #16a34a; font-size: 17px; }
.RopiFrontPreview__whatsappConnected button { margin-left: auto; border: 0; background: transparent; padding: 0; color: #b91c1c; font-size: 10px; font-weight: 800; cursor: pointer; }
.RopiFrontPreview__operatorHint { margin-top: 9px; border-top: 1px solid #e2e8f0; padding-top: 8px; color: #64748b; font-size: 10px; line-height: 1.45; }

/* The standalone assistant must remain full-screen on landscape phones too. */
@media (min-width: 641px) and (max-height: 639px) and (pointer: coarse) {
    .RopiFrontPreview__panel,
    .RopiFrontPreview__panel.is-wide { inset: 0; width: 100%; border: 0; border-radius: 0; }
    .RopiFrontPreview__panelActions .is-resize { display: none; }
    .RopiFrontPreview__scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .RopiFrontPreview__scanLine { top: 50%; animation: RopiFrontScanPulse 1.2s ease-in-out infinite; }
}

@keyframes RopiFrontScanPulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

@media (max-width: 900px) {
    .RopiFrontPreview__topbar { height: 64px; padding: 0 18px; }
    .RopiFrontPreview__brand img { width: 136px; }
    .RopiFrontPreview__previewBadge { display: none; }
    .RopiFrontPreview__storefront { min-height: 610px; grid-template-columns: 1fr; padding: 52px 24px; }
    .RopiFrontPreview__heroVisual { opacity: .45; }
    .RopiFrontPreview__categories { grid-template-columns: 1fr 1fr; margin: -34px 16px 0; }
    .RopiFrontPreview__category:nth-child(2) { border-right: 0; }
    .RopiFrontPreview__category:nth-child(-n+2) { border-bottom: 1px solid #e2e8f0; }
}

@media (max-width: 640px) {
    .RopiFrontPreview__backLink span:not(.material-symbols-rounded) { display: none; }
    .RopiFrontPreview__storefront { min-height: 560px; }
    .RopiFrontPreview__heroCopy h1 { font-size: 42px; }
    .RopiFrontPreview__heroCopy > p:not(.RopiFrontPreview__eyebrow) { font-size: 15px; }
    .RopiFrontPreview__categories { display: none; }
    .RopiFrontPreview__panel { inset: 0; width: 100%; border: 0; border-radius: 0; }
    .RopiFrontPreview__panel.is-wide { width: 100%; }
    .RopiFrontPreview__panelActions .is-resize { display: none; }
    .RopiFrontPreview__scrim { display: none; }
    .RopiFrontPreview__choices, .RopiFrontPreview__flow, .RopiFrontPreview__candidate, .RopiFrontPreview__result, .RopiFrontPreview__parts, .RopiFrontPreview__orderStatus, .RopiFrontPreview__analysis, .RopiFrontPreview__deviceResults, .RopiFrontPreview__orderCloud { margin-left: 0; }
    .RopiFrontPreview__panelHeader { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .RopiFrontPreview__panel, .RopiFrontPreview__scrim, .RopiFrontPreview__scrollToBottom { transition: none; }
    .RopiFrontPreview__scanFrame > span, .RopiFrontPreview__typing span { animation: none; }
}

/* Conversation ergonomics, shared by the standalone page and storefront iframe. */
.RopiFrontPreview__panelHeader { min-height: 64px; gap: 8px; padding: 8px 12px; flex-shrink: 0; }
.RopiFrontPreview__identity { min-width: 0; }
.RopiFrontPreview__identity > div:last-child { min-width: 0; }
.RopiFrontPreview__identity p { font-size: 12px; }
.RopiFrontPreview__panelActions button,
.RopiFrontPreview__panelActionButton { width: 44px; height: 44px; flex-shrink: 0; }
.RopiFrontPreview__deviceBar { min-height: 48px; padding: 2px 12px; background: #f8fafc; border-color: #e2e8f0; color: #334155; flex-shrink: 0; }
.RopiFrontPreview__deviceBar > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px; }
.RopiFrontPreview__deviceBar .ui-icon { font-size: 21px; }
.RopiFrontPreview__panelActions .ui-icon,
.RopiFrontPreview__composer .ui-icon { font-size: 22px; }
.RopiFrontPreview__messageFeedback .ui-icon,
.RopiFrontPreview__quickActions .ui-icon { font-size: 18px; }
.RopiFrontPreview__deviceBar button:disabled { opacity: .55; cursor: default; }
.RopiFrontPreview__deviceBar small { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.RopiFrontPreview__deviceBar strong { font-size: 13px; white-space: normal; overflow-wrap: anywhere; }
.RopiFrontPreview__deviceBar button { min-height: 44px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.RopiFrontPreview__conversation { padding: 16px 16px 24px; scroll-behavior: auto; }
.RopiFrontPreview__bubble { max-width: 88%; padding: 11px 13px; border-radius: 8px 8px 8px 3px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.RopiFrontPreview__message.is-user .RopiFrontPreview__bubble { border-radius: 8px 8px 3px 8px; }
.RopiFrontPreview__messageFeedback { font-size: 11px; }
.RopiFrontPreview__messageFeedback button { width: 36px; height: 36px; }
.RopiFrontPreview__choices strong { font-size: 14px; font-weight: 600; }
.RopiFrontPreview__choices small,
.RopiFrontPreview__upload small,
.RopiFrontPreview__deviceResult small { color: #64748b; font-size: 12px; }
.RopiFrontPreview__upload { min-height: 150px; border-radius: 6px; padding: 18px; }
.RopiFrontPreview__upload strong { font-size: 14px; }
.RopiFrontPreview__secondaryLink { min-height: 44px; font-size: 12px; font-weight: 600; }
.RopiFrontPreview__flowLabel,
.RopiFrontPreview__guidedControl > strong { font-size: 13px; font-weight: 600; }
.RopiFrontPreview__guidedSelectTrigger { min-height: 44px !important; font-size: 14px !important; }
.RopiFrontPreview__guidedSelectMenu input { font-size: 16px !important; }
.RopiFrontPreview__guidedSelectMenu li { min-height: 44px; font-size: 13px !important; }
.RopiFrontPreview__deviceResult { min-height: 52px; }
.RopiFrontPreview__deviceResult strong { font-size: 14px; }
.RopiFrontPreview__partRow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
.RopiFrontPreview__partImage { width: 48px; height: 48px; }
.RopiFrontPreview__partRow strong { font-size: 13px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.RopiFrontPreview__partRow small { font-size: 11px; color: #64748b; }
.RopiFrontPreview__partPrice { font-size: 13px; }
.RopiFrontPreview__finePrint,
.RopiFrontPreview__alternativeIntro { font-size: 11px; color: #64748b; }
.RopiFrontPreview__apiError { font-size: 13px; }
.RopiFrontPreview__returnGuide { font-size: 14px; line-height: 1.5; }
.RopiFrontPreview__returnGuideHeader small,
.RopiFrontPreview__returnSteps > small,
.RopiFrontPreview__existingReturns > small { color: #475569; font-size: 12px; }
.RopiFrontPreview__returnGuideHeader strong { font-size: 15px; }
.RopiFrontPreview__returnReason,
.RopiFrontPreview__returnOrderTitle strong,
.RopiFrontPreview__returnItem strong,
.RopiFrontPreview__returnItem > span:last-child,
.RopiFrontPreview__returnSteps li p,
.RopiFrontPreview__returnSteps > p,
.RopiFrontPreview__existingReturns strong { font-size: 14px; }
.RopiFrontPreview__returnOrderTitle small,
.RopiFrontPreview__returnOrderTitle > span:last-child,
.RopiFrontPreview__returnItem small,
.RopiFrontPreview__existingReturns small,
.RopiFrontPreview__existingReturns > div > span:last-child { color: #475569; font-size: 12px; }
.RopiFrontPreview__returnOrderTitle > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.RopiFrontPreview__returnItem strong { white-space: normal; overflow-wrap: anywhere; }
.RopiFrontPreview__returnSteps li > span { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
.RopiFrontPreview__existingReturns > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; }
.RopiFrontPreview__existingReturns > div > span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.RopiFrontPreview__existingReturns > div > span:last-child { max-width: 100%; text-align: left; }
.RopiFrontPreview__returnAction,
.RopiFrontPreview__existingReturns > a,
.RopiFrontPreview__returnPolicyLink { min-height: 44px; align-items: center; font-size: 14px; font-weight: 600; line-height: 1.5; }
.RopiFrontPreview__quickActions a { min-height: 44px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.RopiFrontPreview__quickActions small { min-width: 20px; height: 20px; font-size: 12px; }
.RopiFrontPreview__composer { border-radius: 8px; flex-shrink: 0; }
.RopiFrontPreview__composerRow { grid-template-columns: 44px minmax(0,1fr) 44px; }
.RopiFrontPreview__composer button.is-attach,
.RopiFrontPreview__composer button.is-send { width: 44px; height: 44px; border-radius: 6px; }
.RopiFrontPreview__composer textarea { min-height: 44px; max-height: 90px; font-size: 16px; line-height: 1.5; padding: 10px 4px; }
.RopiFrontPreview__panelFooter { min-height: 32px; flex-shrink: 0; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; padding: 5px 12px max(5px, env(safe-area-inset-bottom)); font-size: 10px; font-weight: 400; }
.RopiFrontPreview__scrollToBottom { width: auto; min-width: 44px; height: 44px; gap: 6px; border-radius: 6px; padding: 0 10px; font-size: 12px; }
.RopiFrontPreview__attachmentPreview { display: grid; gap: 10px; margin: 0; }
.RopiFrontPreview__attachmentPreview > img { width: 100%; max-height: 200px; object-fit: contain; border-radius: 6px; background: #f8fafc; }
.RopiFrontPreview__attachmentPreview figcaption { color: #475569; font-size: 13px; line-height: 1.5; }
.RopiFrontPreview__attachmentActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.RopiFrontPreview__attachmentActions button { background: #fff; color: #475569; border-color: #cbd5e1; }
.RopiFrontPreview__attachmentActions button:hover { background: #f8fafc; }
.RopiFrontPreview__attachmentPreview button { width: 100%; min-width: 0; height: 36px; min-height: 36px; padding: 0 8px; font-size: 12px; }
@media (pointer: coarse) {
    .RopiFrontPreview__attachmentPreview button { height: 40px; min-height: 40px; }
}
.RopiFrontPreview__panel button:focus-visible { outline: 2px solid #d72131; outline-offset: 2px; }
.RopiFrontPreview__panel a:focus-visible,
.RopiFrontPreview__panel input:focus-visible { outline: 2px solid #d72131; outline-offset: 2px; }
/* Authentication owns its focus border; do not layer the panel outline on it. */
.RopiFrontPreview__panel input.RopiFrontPreview__accountAuthCode:focus-visible,
.RopiFrontPreview__panel .RopiFrontPreview__accountAuthInput input:focus-visible { outline: none; }
/* Keep login readable and avoid iOS focusing/zooming a small text field. */
.RopiFrontPreview__accountAuthInput { min-height: 44px; }
.RopiFrontPreview__accountAuthInput input { font-size: 16px; }
.RopiFrontPreview__accountAuthForm > label,
.RopiFrontPreview__accountAuthMeta,
.RopiFrontPreview__accountAuthMeta button { font-size: 12px; }
.RopiFrontPreview__accountAuthMeta button,
.RopiFrontPreview__accountAuthForm .RopiFrontPreview__secondaryLink { min-height: 44px; }
.RopiFrontPreview__accountState p.RopiFrontPreview__accountAuthNotice { color: #64748b; font-size: 12px; }
@media (pointer: coarse) {
    .RopiFrontPreview__attachmentPreview button { height: 44px; min-height: 44px; }
    .RopiFrontPreview__quickActions a { min-height: 44px; }
}
@media (max-width: 360px) {
    .RopiFrontPreview__identity p { max-width: 165px; font-size: 11px; }
    .RopiFrontPreview__conversation { padding-right: 12px; padding-left: 12px; }
    .RopiFrontPreview__partRow { grid-template-columns: 40px minmax(0, 1fr); }
    .RopiFrontPreview__partImage { width: 40px; height: 40px; }
    .RopiFrontPreview__partPrice { grid-column: 2; }
}
/* A landscape phone keyboard can leave only one usable row above browser UI. */
@media (max-height: 180px) {
    .RopiFrontPreview.is-embedded .RopiFrontPreview__panelHeader { position: absolute; top: 4px; right: 4px; min-height: 0; padding: 0; border: 0; z-index: 4; }
    .RopiFrontPreview.is-embedded .RopiFrontPreview__identity,
    .RopiFrontPreview.is-embedded .RopiFrontPreview__panelActions > :not(button[aria-label="Închide Ropi"]),
    .RopiFrontPreview.is-embedded .RopiFrontPreview__deviceBar,
    .RopiFrontPreview.is-embedded .RopiFrontPreview__conversationWrap,
    .RopiFrontPreview.is-embedded .RopiFrontPreview__panelFooter { display: none; }
    .RopiFrontPreview.is-embedded .RopiFrontPreview__panelActions > button { width: 44px; height: 44px; }
    .RopiFrontPreview.is-embedded .RopiFrontPreview__composer { margin: 4px 52px 4px 4px; padding: 0; }
    .RopiFrontPreview.is-embedded .RopiFrontPreview__composer textarea { max-height: 44px; overflow-y: auto; }
}
.RopiFrontPreview__reorder { display: grid; gap: 12px; overflow-wrap: anywhere; }
.RopiFrontPreview__reorderList { display: grid; border-top: 1px solid #e2e8f0; }
.RopiFrontPreview__reorderRow { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(78px, auto); align-items: center; gap: 10px; min-height: 68px; padding: 8px 0; color: #0f172a; text-align: left; background: transparent; border: 0; border-bottom: 1px solid #e2e8f0; border-radius: 0; cursor: pointer; }
.RopiFrontPreview__reorderRow:hover, .RopiFrontPreview__reorderRow.is-selected { background: #f8fafc; }
.RopiFrontPreview__reorderRow:disabled { cursor: default; opacity: .72; }
.RopiFrontPreview__reorderImage { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; }
.RopiFrontPreview__reorderImage img { width: 100%; height: 100%; object-fit: contain; }
.RopiFrontPreview__reorderInfo { min-width: 0; display: grid; gap: 3px; }
.RopiFrontPreview__reorderInfo strong { display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.RopiFrontPreview__reorderInfo small { color: #64748b; font-size: 10px; }
.RopiFrontPreview__reorderPrice { display: grid; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; justify-items: end; gap: 2px; text-align: right; }
.RopiFrontPreview__reorderPrice strong { white-space: nowrap; color: #0f172a; font-size: 13px; }
.RopiFrontPreview__reorderPrice small { grid-column: 1 / -1; max-width: 92px; color: #64748b; font-size: 10px; line-height: 1.3; }
.RopiFrontPreview__reorderPrice .material-symbols-rounded { color: #94a3b8; font-size: 18px; }
.RopiFrontPreview__reorderSelection { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
@media (max-width: 360px) {
    .RopiFrontPreview__reorderRow { grid-template-columns: 44px minmax(0, 1fr) minmax(70px, auto); gap: 8px; }
    .RopiFrontPreview__reorderImage { width: 44px; height: 44px; }
}
.RopiFrontPreview__messageResult { padding: 0 0 12px; border-bottom: 1px solid #e2e8f0; }
.RopiFrontPreview__resultTime, .RopiFrontPreview__resultNote { margin: 8px 0; font-size: 11px; line-height: 1.5; color: #64748b; overflow-wrap: anywhere; }
.RopiFrontPreview__resultStatus { margin: 10px 0 6px; font-size: 12px; line-height: 1.5; font-weight: 600; color: #475569; }
.RopiFrontPreview__resultStatus.is-verified { color: #166534; }
.RopiFrontPreview__messageResult .RopiFrontPreview__partPrice small { display: block; font-weight: 400; }
.RopiFrontPreview__messageResult a:focus-visible { outline: 2px solid #dc2626; outline-offset: 2px; }