#open-crm-guide{background:#3b82f6;border-color:#3b82f6;color:#fff;padding:12px 20px;border-radius:10px;font-weight:600;transition:background .2s}
#open-crm-guide:hover{background:#2563eb;border-color:#2563eb}
.crm-topic-guide{display:inline-flex;align-items:center;gap:10px;padding:10px 15px;border:1px solid #d7e6fc;border-radius:9px;background:#f4f8ff;color:#2563eb;font-size:14px;font-weight:600;margin:18px 0 0}
.guide-camera{width:min(1280px,calc(100vw - 40px));height:min(950px,94dvh);max-height:94dvh;max-width:none;overflow:hidden;padding:0;border:1px solid #363b44;border-radius:20px;background:#14171c;color:#f2f4f7;box-shadow:0 30px 100px #0008;overscroll-behavior:contain}
.guide-camera[open]{display:flex;flex-direction:column}
.guide-camera::backdrop{background:#07090dbc;backdrop-filter:blur(5px)}
.guide-camera.is-opening{animation:guide-enter .48s cubic-bezier(.16,1,.3,1) both}.guide-camera.is-opening::backdrop{animation:guide-fade-in .4s ease both}
.guide-camera.is-closing{animation:guide-exit .22s ease both;pointer-events:none}.guide-camera.is-closing::backdrop{animation:guide-fade-out .22s ease both}
.guide-camera .guide-modal-header{position:relative;flex:none;z-index:2;padding:16px 25px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#171a20;border:0}
.guide-camera .guide-modal-header h2{font-size:20px;line-height:1.4;margin:0;color:#f4f5f7}
.guide-camera .guide-kicker{font-size:9px;letter-spacing:1.7px;color:#949ca9;display:block;margin-bottom:4px}
.guide-camera .guide-modal-close{display:grid;place-items:center;width:36px;height:36px;background:#2c313b;border:0;border-radius:50%;font-size:26px;line-height:1;color:#d1d6df;flex:none}
.guide-camera .guide-modal-close:hover{background:#3d4654;color:#fff}
.c3-topics{display:flex;gap:5px;background:#171a20;border-bottom:1px solid #30353e;padding:0 23px 12px;flex:none;overflow-x:auto;scrollbar-width:none}
.c3-topics button{white-space:nowrap;border:0;border-radius:7px;padding:8px 13px;background:transparent;color:#adb4c0;font-size:12px;font-weight:600}
.c3-topics button[aria-current]{background:#343b47;color:white}
.c3-scroller{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scroll-behavior:auto;scrollbar-width:thin;scrollbar-color:#485260 transparent;overflow-anchor:none;background:#101318}
.c3-scroller::-webkit-scrollbar{width:5px}.c3-scroller::-webkit-scrollbar-thumb{background:#485260;border-radius:3px}
.c3-scroller:focus-visible{outline:2px solid #3b82f6;outline-offset:-3px}
.c3-rail{position:relative;overflow-anchor:none}
.c3-stage{position:sticky;top:0;height:var(--camera-stage-height,600px);display:flex;flex-direction:column;padding:19px 24px 18px;gap:14px;overflow:hidden;overflow-anchor:none}
.c3-heading{display:flex;align-items:center;gap:13px;flex:none;min-width:0;min-height:26px}
.c3-step{color:#91a1b8;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.c3-title{margin:0;flex:1;font-size:20px;font-weight:650;color:#f4f6f9;line-height:1.4;min-width:0}
.c3-heading>small{color:#98a1af;font-size:10px;white-space:nowrap}
.c3-viewer{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;width:100%;overflow:hidden}
.c3-viewer .c3-viewport{flex:none;min-width:0;min-height:0;max-width:100%;max-height:100%}
.c3-viewport{position:relative;isolation:isolate;flex:1;min-height:140px;overflow:hidden;border:1px solid #3b424e;border-radius:13px;background:radial-gradient(ellipse at 50% 42%,#303a4a,#10151e 78%)}
.c3-plane{position:absolute;left:0;top:0;width:var(--c3-source-width,1909px);height:var(--c3-source-height,900px);transform-origin:0 0;will-change:transform}
.c3-surface{position:relative;width:100%;height:100%;box-shadow:0 20px 70px #0008;background:#f8f9fb}
.c3-background,.c3-window-images{position:absolute;left:0;top:0;width:var(--c3-source-width,1909px);height:var(--c3-source-height,900px);overflow:hidden}
.c3-background{filter:grayscale(1) brightness(.37)}
.c3-image{position:absolute;inset:0;width:var(--c3-source-width,1909px);height:var(--c3-source-height,900px);max-width:none;object-fit:contain;display:block;opacity:0;pointer-events:none;user-select:none}
.c3-image[data-image="shuffle-form"]{clip-path:inset(1.4451% 1.1407% 1.4451% .7605% round 3.8023% / 5.7803%)}
.c3-window{position:absolute;overflow:hidden;outline:2px solid #6ca9ff;outline-offset:1px;background:#f8f9fb;box-shadow:0 0 35px #3b82f619}
.c3-window-images{transform-origin:0 0}
.c3-cursor{position:absolute;width:26px;height:36px;transform-origin:0 0;z-index:3;pointer-events:none;filter:drop-shadow(0 2px 3px #0007)}
.c3-cursor svg{position:relative;display:block;width:26px;height:36px;z-index:2}
.c3-ripple{position:absolute;left:-18px;top:-18px;width:39px;height:39px;border:2px solid #3b82f6;background:#78b0ff38;border-radius:50%;opacity:0}
.c3-cursor.is-clicking .c3-ripple{animation:camera-click .55s ease-out both}
.c3-cursor.is-clicking svg{animation:camera-press .55s ease-out both}
.c3-zoom-label{position:absolute;right:12px;bottom:10px;z-index:4;background:#111827c9;color:#bccce0;padding:3px 8px;border:1px solid #546176;border-radius:5px;font-size:10px;font-variant-numeric:tabular-nums;pointer-events:none}
.c3-bubble{position:relative;display:flex;align-items:flex-start;gap:13px;flex:none;max-width:880px;width:calc(100% - 36px);align-self:center;background:#29313d;border:1px solid #465369;border-radius:12px;padding:15px 19px;color:#eef4fe}
.c3-bubble::before{content:"";position:absolute;left:calc(50% - 7px);top:-8px;width:14px;height:14px;background:#29313d;border-left:1px solid #465369;border-top:1px solid #465369;transform:rotate(45deg);border-radius:2px}
.c3-bubble-number{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#3b82f62b;color:#9cc5ff;font-size:11px;font-weight:600}
.c3-bubble-title{font-size:16px;color:white;display:block;font-weight:650;line-height:1.5;margin-bottom:3px}
.c3-description{font-size:13px;line-height:1.7;color:#d8e1ef;margin:0;overflow-wrap:anywhere}
.c3-note{display:block;font-size:10px;color:#acb8cc;margin-top:7px;line-height:1.5}.c3-note[hidden]{display:none}
.c3-note.is-required{color:#ff8c8c;font-size:13px;font-weight:700}
.c3-footer{display:grid;grid-template-columns:83px minmax(0,1fr) 83px;align-items:center;gap:25px;background:#191d24;border-top:1px solid #343c48;padding:11px 25px;flex:none}
.c3-footer button{padding:9px 11px;border:0;border-radius:7px;background:#333c4b;color:#eef3fc;font-size:12px;font-weight:600}
.c3-footer button[data-direction="1"]{background:#3b82f6;color:white}.c3-footer button:disabled{background:#272e38;color:#818d9e;cursor:default}
.c3-current{display:block;text-align:center;color:#c4cede;font-size:11px;margin-bottom:5px;font-variant-numeric:tabular-nums}
.c3-progress{height:3px;max-width:400px;margin:auto;background:#363f4e;border-radius:4px;overflow:hidden}.c3-progress>span{display:block;height:100%;width:0;background:#5399ff}
.c3-footer small{display:block;font-size:10px;text-align:center;color:#a1adbf;margin-top:5px}
@keyframes guide-enter{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes guide-exit{to{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes guide-fade-in{from{opacity:0}to{opacity:1}}@keyframes guide-fade-out{to{opacity:0}}
@keyframes camera-click{0%{opacity:.95;transform:scale(.3)}85%,100%{opacity:0;transform:scale(1.55)}}
@keyframes camera-press{0%,100%{transform:scale(1)}20%{transform:scale(.88)}}
@media(max-width:650px){.guide-camera{width:calc(100vw - 12px);height:95dvh;max-height:95dvh;border-radius:13px}.guide-camera .guide-modal-header{padding:12px 14px 9px}.guide-camera .guide-modal-header h2{font-size:18px}.guide-camera .guide-kicker{font-size:8px}.c3-topics{padding:0 11px 9px;gap:1px}.c3-topics button{padding:7px 9px;font-size:10px}.c3-stage{padding:13px 10px;gap:13px}.c3-heading{gap:8px;min-height:32px}.c3-title{font-size:17px}.c3-step{font-size:9px}.c3-heading>small{display:none}.c3-viewport{border-radius:9px;min-height:130px}.c3-bubble{width:100%;padding:13px 12px;gap:9px;border-radius:10px}.c3-bubble-title{font-size:14px}.c3-description{font-size:12px;line-height:1.65}.c3-bubble-number{width:23px;height:23px;font-size:9px}.c3-note{font-size:9px;margin-top:5px}.c3-footer{padding:10px 12px;grid-template-columns:65px minmax(0,1fr) 65px;gap:10px}.c3-footer button{font-size:11px;padding:8px}.c3-footer small{font-size:9px}.c3-current{font-size:10px}}
@media(max-height:650px){.guide-camera .guide-kicker,.c3-footer small{display:none}.guide-camera .guide-modal-header{padding-top:9px;padding-bottom:7px}.c3-topics{padding-bottom:6px}.c3-stage{padding-top:9px;padding-bottom:9px;gap:10px}.c3-title{font-size:16px}.c3-heading{min-height:22px}.c3-bubble{padding:10px 12px}.c3-description{font-size:11px;line-height:1.5}.c3-bubble-title{font-size:13px}.c3-note{font-size:9px;margin-top:3px}.c3-viewport{min-height:85px}.c3-footer{padding-top:8px;padding-bottom:8px}}
@media(max-height:470px){.c3-topics{display:none}.c3-heading{display:none}.c3-bubble-title{display:none}.c3-bubble{padding:8px 10px}.c3-stage{gap:8px}.c3-footer{padding:6px 12px}.guide-camera .guide-modal-header h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.guide-camera,.guide-camera::backdrop,.guide-camera *{animation:none!important;transition:none!important}}

/* Full-window dialog; the camera fits the complete screenshot until a menu click. */
.guide-camera{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;border:0;border-radius:0}
.c3-stage{padding:12px 14px;gap:12px}
.c3-viewport{border-radius:6px}
@media(max-width:650px){.guide-camera{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.c3-stage{padding:10px 8px;gap:10px}.c3-viewport{border-radius:4px}}