:root{--bg:#09090b;--surface:#111113;--surface-2:#18181b;--card:rgba(24,24,27,0.76);--text:#fafafa;--muted:#a1a1aa;--soft:#d4d4d8;--border:rgba(255,255,255,.11);--border-strong:rgba(255,255,255,.18);--orange:#f28c12;--orange-dark:#e8551a;--navy:#fafafa;--shadow:0 24px 70px rgba(0,0,0,.35)}html[data-theme="light"]{--bg:#ffffff;--surface:#f7f7f8;--surface-2:#ffffff;--card:rgba(255,255,255,.86);--text:#09090b;--muted:#52525b;--soft:#27272a;--border:rgba(9,9,11,.11);--border-strong:rgba(9,9,11,.18);--shadow:0 24px 70px rgba(10,10,10,.10);--navy:#09090b}*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{min-height:100vh;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -180px,rgba(242,140,18,.18),transparent 480px),radial-gradient(circle at 12% 20%,rgba(232,85,26,.08),transparent 380px),var(--bg);color:var(--text)}body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 65%);opacity:.26}button,input,select,textarea{font:inherit}button{font-family:inherit}img{max-width:100%;display:block}.hidden{display:none !important}a{color:inherit;text-decoration:none}.wrap{width:min(1120px,calc(100vw - 32px));margin:0 auto;padding:0 0 28px;position:relative;z-index:1}.card,.inner-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 88%,transparent),color-mix(in srgb,var(--surface) 80%,transparent));border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}.brand-header{margin-top:18px;padding:28px 24px;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;text-align:center;gap:12px}.eyebrow{margin:0 0 8px;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;text-align:center}.brand-copy h1{margin:0;font-size:clamp(30px,4vw,34px);line-height:1.04;letter-spacing:-.04em;font-weight:850}.subtitle{margin:8px 0 0;color:var(--muted);font-size:15px}.seo-blurb{display:none}.brand-copy{width:100%}.step-progress{margin-top:16px;padding:12px;display:grid;grid-template-columns:repeat(7,minmax(98px,1fr));gap:10px}.step-pill{border-radius:18px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:12px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);min-width:0;width:100%;text-align:center;cursor:pointer;transition:border-color 0.18s ease,background 0.18s ease,transform 0.18s ease,opacity 0.18s ease,color .18s ease}.step-pill span{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--surface);color:var(--text);font-weight:800;flex:0 0 auto}.step-pill strong{font-size:12px;line-height:1.28;white-space:normal;overflow:visible;text-overflow:clip;text-align:center;display:block;min-height:2.6em}.step-pill.is-active{border-color:rgba(242,140,18,0.45);background:rgba(242,140,18,0.12);color:var(--text)}.step-pill.is-active span,.step-pill.is-complete span{background:linear-gradient(135deg,var(--orange),var(--orange-dark));border-color:transparent;color:#09090b}.step-pill.is-complete{color:var(--text);background:color-mix(in srgb,var(--surface-2) 82%,rgba(242,140,18,.12))}.step-pill:not(:disabled):hover{transform:translateY(-1px);border-color:var(--border-strong);color:var(--text)}.step-pill:disabled{cursor:not-allowed;opacity:0.66}.step-pill.is-clickable strong{text-decoration:underline;text-underline-offset:3px}.app-shell{margin-top:18px}.step-page{padding:22px}.page-copy h2{margin:0;font-size:clamp(24px,3vw,22px);letter-spacing:-.03em}.page-copy p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.6}.page-kicker{color:var(--orange);font-weight:800;font-size:13px;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px}.center-copy{text-align:center}.narrow-copy{max-width:760px;margin:0 auto}.center-upload{max-width:560px;margin:20px auto 0;display:grid;gap:12px;justify-items:center;width:100%}.editor-copy{text-align:center}.upload-dropzone{width:100%;border:1px dashed var(--border-strong);border-radius:22px;background:color-mix(in srgb,var(--surface) 84%,transparent);padding:28px 22px;display:grid;gap:12px;justify-items:center;text-align:center;transition:border-color 0.18s ease,background 0.18s ease,transform 0.18s ease}.upload-dropzone.is-dragover{border-color:rgba(242,140,18,0.55);background:rgba(242,140,18,0.08);transform:translateY(-1px)}.dropzone-icon{width:88px;height:88px;border:1px dashed var(--border-strong);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:42px;line-height:1;background:color-mix(in srgb,var(--surface-2) 84%,transparent)}.dropzone-title{margin:0;font-size:18px;font-weight:800;color:var(--text)}.dropzone-text{margin:0;color:var(--muted);font-size:15px;line-height:1.5}.upload-trigger{min-width:250px;justify-content:center;display:inline-flex;align-items:center;text-align:center}.mobile-upload-actions{display:grid;gap:12px;justify-items:center}.mobile-only{display:none}.upload-help{margin:0;color:var(--muted);font-size:14px;text-align:center}.file-chip{display:inline-flex;align-items:center;gap:10px;min-width:0;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:999px;padding:10px 14px}.file-side-label{font-size:12px;font-weight:800;color:var(--orange);text-transform:uppercase;letter-spacing:0.08em}.file-name{font-weight:700;color:var(--text);word-break:break-all}.file-remove{width:28px;height:28px;border:none;border-radius:999px;background:color-mix(in srgb,var(--surface-2) 88%,transparent);color:var(--text);cursor:pointer;font-size:18px;line-height:1}.page-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}.center-actions{justify-content:center}.editor-actions,.result-actions{justify-content:space-between;align-items:center}.download-actions,.result-nav-actions{display:flex;flex-wrap:wrap;gap:12px}.btn{appearance:none;-webkit-tap-highlight-color:transparent;min-height:48px;border:1px solid transparent;border-radius:12px;padding:0 18px;background:linear-gradient(135deg,var(--orange),var(--orange-dark));color:#09090b;font-weight:800;cursor:pointer;box-shadow:0 16px 36px rgba(232,85,26,.22);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:none}.btn.secondary:hover:not(:disabled){border-color:var(--border-strong)}.btn:focus:not(:focus-visible){outline:none}.inner-card{box-shadow:none}.editor-stage{margin:16px auto 0;padding:10px;max-width:520px}.editor-main-layout{margin-top:16px;display:grid;grid-template-columns:minmax(0,520px) minmax(220px,300px);justify-content:center;align-items:start;gap:18px}.editor-stage{margin:0}.editor-side-column{display:grid;gap:14px;align-content:start}.canvas-wrap{padding:8px;display:flex;justify-content:center;align-items:center;background:transparent}canvas{width:min(100%,460px);height:auto;max-width:100%;border-radius:18px;touch-action:none;background:transparent}.guide-insights{margin-top:0;display:grid;gap:12px}.live-centering-panel{width:100%;border-radius:22px;padding:10px 10px 12px;background:#f4f5f7}.live-grades-panel{width:100%;border-radius:22px;padding:12px 14px;background:#f4f5f7}.align-preview-panel{width:100%;border-radius:22px;background:#f4f5f7}.align-preview-wrap{display:flex;justify-content:center;align-items:center;padding:8px 0 6px}#alignPreviewCanvas{width:min(100%,210px);height:auto;aspect-ratio:63 / 88;display:block;background:#fff;border:1px solid var(--border);border-radius:0}.align-preview-note{margin:8px 0 0;text-align:center;font-size:12px;color:var(--muted);line-height:1.4}.align-preview-controls{margin-top:14px;display:grid;gap:12px}.preview-control-row{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:10px;align-items:end}.preview-slider-group,.preview-input-group{display:grid;gap:6px}.preview-slider-group span,.preview-input-group span{min-height:14px;font-size:12px;font-weight:700;color:var(--muted)}.preview-input-group span{visibility:hidden}.preview-input-reset-group{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:6px;align-items:center}.preview-slider{width:100%;accent-color:var(--orange-dark);cursor:pointer}.preview-number-input{width:100%;min-height:38px;padding:8px 8px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);text-align:center}.preview-mini-reset-btn{width:32px;min-width:32px;height:38px;border:none;border-radius:10px;background:transparent;color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;line-height:1;box-shadow:none}.preview-mini-reset-btn:hover{border:none;background:transparent;color:var(--text)}.preview-number-input:focus{outline:none;border-color:var(--orange-dark);box-shadow:0 0 0 2px rgba(242,140,18,0.16)}html[data-theme="dark"] .preview-slider-group span,html[data-theme="dark"] .preview-input-group span{color:var(--soft)}@media (max-width:640px){.preview-control-row{grid-template-columns:1fr}}.live-grades-side{display:flex;align-items:center;justify-content:center;min-height:100%}.live-grades-list{margin-top:0;text-align:center;justify-items:center;gap:8px;font-size:14px;font-weight:800;line-height:1.15}.guide-fine-tip{margin-top:12px;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}.panel-block{padding:16px 18px}.panel-block h3{margin:0 0 18px;text-align:center;font-size:16px;font-weight:800;color:#000}.guide-insights .panel-block h3,.centering-mini-title{font-size:14px}.centering-cross{position:relative;min-height:205px;width:min(100%,250px);margin:0 auto}.cross-line{position:absolute;background:#111;border-radius:999px}.cross-line-vertical{width:2px;height:68%;left:50%;top:16%;transform:translateX(-50%)}.cross-line-horizontal{height:2px;width:68%;left:16%;top:50%;transform:translateY(-50%)}.centering-quadrant{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.quadrant-left{top:9%;left:10%;width:34%}.quadrant-right{top:9%;right:10%;width:34%}.quadrant-top{bottom:13%;left:10%;width:34%}.quadrant-bottom{bottom:13%;right:10%;width:34%}.quadrant-label{font-size:16px;line-height:1;font-weight:800}.quadrant-mm,.quadrant-pct{font-size:15px;line-height:1;font-weight:800;letter-spacing:-0.02em}.axis-row{display:flex;justify-content:center;gap:10px;align-items:center}.axis-left{color:#ef4444}.axis-right{color:#22c55e}.axis-top{color:#0ea5e9}.axis-bottom{color:#8b5cf6}.axis-sep,.pair-sep{color:var(--muted);margin:0 4px}.grades-title{text-align:center;color:var(--orange-dark);font-size:14px;font-weight:800;margin-bottom:10px}.grades-list{display:grid;gap:8px;font-weight:700;color:var(--navy)}.live-grades-list div{white-space:nowrap}.decision-card{max-width:560px;margin:26px auto 0;padding:18px;display:grid;gap:12px}.decision-btn{justify-content:center}.current-grades-panel .grades-title,.current-grades-panel .grades-list{text-align:center;justify-items:center}.current-grades-panel .grades-title{width:100%}.result-side-meta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,0.8fr);gap:14px;align-items:center;min-height:160px}.result-grades-list{text-align:center;justify-items:center;align-self:center}.centering-mini{border:1px solid var(--border);border-radius:18px;background:#fbfcfe;padding:10px 12px 12px}.centering-mini-title{font-size:13px;font-weight:800;color:#000;text-align:center;margin-bottom:8px}.centering-mini-cross{position:relative;min-height:165px;width:min(100%,220px);margin:0 auto}.mini-cross-line{position:absolute;background:#1f2937}.mini-cross-line-vertical{width:1.5px;height:66%;left:50%;top:17%;transform:translateX(-50%)}.mini-cross-line-horizontal{height:1.5px;width:66%;left:17%;top:50%;transform:translateY(-50%)}.mini-centering-quadrant{position:absolute;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px}.mini-quadrant-left{top:10%;left:9%;width:35%}.mini-quadrant-right{top:10%;right:9%;width:35%}.mini-quadrant-top{bottom:13%;left:9%;width:35%}.mini-quadrant-bottom{bottom:13%;right:9%;width:35%}.mini-quadrant-label{font-size:12px;font-weight:800;line-height:1}.mini-quadrant-mm,.mini-quadrant-pct{font-size:12px;font-weight:800;line-height:1.05}.result-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}.preview-card{padding:18px}.preview-card-head{display:flex;gap:12px;justify-content:space-between;align-items:baseline;margin-bottom:12px}.preview-card h3{margin:0;font-size:18px}.preview-file{color:var(--muted);font-size:13px;word-break:break-all;text-align:right}.result-preview-image{width:100%;aspect-ratio:63 / 88;object-fit:contain;background:#f8fafc;border-radius:18px;border:1px solid var(--border);margin-bottom:14px}.result-box,#combinedSummaryBox,#backEmptyGradesBox{margin-top:14px}.muted-grades{color:var(--muted)}.result-box{min-height:0;height:auto}.result-copy{color:var(--text);line-height:1.6;font-size:15px}.result-copy p{margin:0 0 12px}.result-copy p:last-child{margin-bottom:0}.result-side-section + .result-side-section{margin-top:18px;padding-top:18px;border-top:1px solid var(--border)}.result-side-section h4{margin:0 0 12px;font-size:16px;color:var(--orange-dark)}.site-footer{width:100%;min-height:112px;margin:20px auto 36px;padding:34px 0 42px;border:none;border-radius:0;background:transparent;box-shadow:none;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;z-index:1;backdrop-filter:none}.footer-copy{color:var(--muted)}.footer-links{display:flex;gap:12px;flex-wrap:wrap}.footer-link{background:transparent;border:none;color:var(--muted);font-weight:700;cursor:pointer}.footer-link:hover{color:var(--text)}.policy-dialog{border:none;padding:0;background:transparent}.policy-dialog::backdrop{background:rgba(15,23,42,0.58)}.policy-dialog-card{width:min(560px,calc(100vw - 32px));background:var(--surface-2);border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow);overflow:hidden}.policy-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--border)}.policy-header h2{margin:0;font-size:22px}.policy-close{border:1px solid var(--border);background:var(--surface);color:var(--text);width:36px;height:36px;border-radius:999px;font-size:20px;cursor:pointer}.policy-body{padding:18px 20px 22px;color:var(--text);line-height:1.6}.access-form{display:grid;gap:12px}.access-note{margin:0;color:var(--muted)}.access-label{font-weight:700}.access-input{border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text)}.access-error{min-height:18px;margin:0;color:#dc2626}.access-actions{display:flex;justify-content:flex-end}@media (max-width:900px){.seo-blurb{font-size:13px}.editor-main-layout{grid-template-columns:1fr;justify-items:center;gap:14px}.editor-side-column{width:100%;justify-items:center}.guide-insights,.result-preview-grid{grid-template-columns:1fr}.guide-insights{width:100%}.live-grades-list{text-align:center;justify-items:center;font-size:16px}.align-preview-panel{width:min(100%,300px)}.centering-cross{min-height:205px;width:min(100%,250px)}.quadrant-label{font-size:16px}.quadrant-mm,.quadrant-pct{font-size:15px}.cross-line-vertical{width:2px}.cross-line-horizontal{height:2px}.result-side-meta{grid-template-columns:1fr}.editor-actions,.result-actions{flex-direction:column;align-items:stretch}.download-actions,.result-nav-actions{width:100%;justify-content:center}.brand-header{grid-template-columns:1fr;justify-items:center;text-align:center}}@media (max-width:720px){.desktop-dropzone{padding:18px 16px}.dropzone-icon{width:72px;height:72px;font-size:34px}.dropzone-title{font-size:16px}.dropzone-text{font-size:14px}.wrap,.site-footer{width:min(100vw - 20px,720px)}.mobile-only{display:inline-flex !important}.mobile-only.hidden{display:none !important}.step-page{padding:20px 16px}.brand-header{padding:22px 16px}.page-copy p{font-size:15px}.upload-trigger,.btn{width:100%}.mobile-upload-actions{width:100%}.center-upload{max-width:none}.file-chip{width:100%;justify-content:center;flex-wrap:wrap;border-radius:20px}.page-actions,.download-actions,.result-nav-actions{flex-direction:column}.page-actions .btn,.download-actions .btn,.result-nav-actions .btn{width:100%}#confirmAlignBtn{order:1}#editorBackBtn{order:2}.canvas-wrap{padding:8px}.editor-stage{max-width:100%;padding:8px}canvas{width:100%;max-width:420px}.step-progress{display:flex;grid-template-columns:none;overflow-x:auto;gap:8px;padding:10px;scrollbar-width:none}.step-progress::-webkit-scrollbar{display:none}.step-pill{flex:0 0 auto;flex-direction:row;gap:8px;padding:9px 12px;min-width:max-content;width:auto;justify-content:flex-start;border-radius:16px}.step-pill span{width:24px;height:24px;font-size:12px}.step-pill strong{min-height:0;font-size:11px;white-space:nowrap;line-height:1.1}.guide-insights .panel-block h3,.centering-mini-title{font-size:16px}}.brand-header,.step-progress,.step-page,.site-footer{backdrop-filter:blur(10px)}.preview-file,.upload-help,.access-note,.result-copy,.policy-body{color:var(--muted)}.result-preview-image,#alignPreviewCanvas{background:color-mix(in srgb,var(--surface) 88%,transparent)}.step-page .card,.result-box,#combinedSummaryBox,#backEmptyGradesBox,.preview-card,.align-preview-panel,.live-centering-panel,.live-grades-panel,.editor-stage,.canvas-wrap{border-color:var(--border)}@media (max-width:720px){.wrap,.site-footer{width:min(100vw - 20px,720px)}}.topbar{min-height:72px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;padding:0 2px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.brand{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:750;letter-spacing:-.03em}.nav{justify-self:center;display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px;font-weight:600}.nav a,.theme-toggle,.menu-button{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}.nav a:hover{color:var(--text)}.theme-toggle,.menu-button{border:1px solid var(--border);background:var(--surface);border-radius:999px;min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.theme-toggle:hover,.menu-button:hover{border-color:var(--border-strong);transform:translateY(-1px)}.theme-toggle .sun{display:none}html[data-theme="light"] .theme-toggle .sun{display:inline}html[data-theme="light"] .theme-toggle .moon{display:none}.menu-button{display:none}.brand-logo{width:38px;height:38px;object-fit:contain;border-radius:999px;display:block}.logo-for-light{display:none}.logo-for-dark{display:block}html[data-theme="light"] .logo-for-light{display:block}html[data-theme="light"] .logo-for-dark{display:none}@media (max-width:900px){.topbar{grid-template-columns:auto auto auto}.menu-button{display:inline-flex;justify-self:end}.menu-button span{font-size:0}.menu-button i,.menu-button i::before,.menu-button i::after{content:"";display:block;width:14px;height:2px;background:currentColor;border-radius:999px;position:relative}.menu-button i::before{transform:translateY(-6px)}.menu-button i::after{transform:translateY(4px)}.nav{position:absolute;left:0;right:0;top:72px;display:none;flex-direction:column;align-items:stretch;gap:6px;padding:12px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(20px)}.nav.open{display:flex}.nav a{padding:13px 12px;border-radius:12px}.nav a:hover{background:var(--surface)}}html[data-theme="dark"] .live-centering-panel,html[data-theme="dark"] .live-grades-panel{background:color-mix(in srgb,var(--surface-2) 92%,transparent);border:1px solid var(--border)}html[data-theme="dark"] .live-centering-panel .cross-line,html[data-theme="dark"] .centering-mini .mini-cross-line{background:rgba(255,255,255,.82)}html[data-theme="dark"] .panel-block h3,html[data-theme="dark"] .live-grades-list,html[data-theme="dark"] .grades-list,html[data-theme="dark"] .current-side-label{color:var(--text)}html[data-theme="dark"] .align-preview-note{color:var(--muted)}html[data-theme="dark"] .align-preview-panel,html[data-theme="dark"] .centering-mini{background:color-mix(in srgb,var(--surface-2) 92%,transparent);border:1px solid var(--border)}html[data-theme="dark"] .centering-mini-title{color:var(--text)}html[data-theme="dark"] .theme-toggle .moon{color:#ffffff}#alignPreviewCanvas{cursor:zoom-in}.preview-zoom-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:28px;background:rgba(0,0,0,0.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.preview-zoom-modal.hidden{display:none !important}.preview-zoom-frame{width:min(96vw,920px);max-height:94vh;padding:18px;border:1px solid var(--border-strong);border-radius:22px;background:color-mix(in srgb,var(--surface-2) 94%,transparent);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}.preview-zoom-frame img{width:auto;max-width:min(88vw,840px);max-height:calc(94vh - 36px);object-fit:contain;border-radius:0;background:#fff}.preview-zoom-close{position:fixed;top:22px;right:22px;width:42px;height:42px;border-radius:999px;border:1px solid var(--border-strong);background:color-mix(in srgb,var(--surface-2) 92%,transparent);color:var(--text);font-size:26px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.preview-zoom-close:hover{transform:translateY(-1px)}.site-footer.card{background:transparent;border:none;border-radius:0;box-shadow:none}.metrics-panel,.estimates-panel,.summary-metrics-panel,.result-grades-list{border:1px solid rgba(15,23,42,0.10);border-radius:22px;background:#f7f8fa;box-shadow:0 6px 18px rgba(15,23,42,0.06)}.live-centering-panel,.live-grades-panel{padding:22px 24px;background:#f7f8fa}.metrics-panel-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.metrics-panel-head h3{margin:0;font-size:19px;line-height:1.2}.metrics-panel-icon{color:#e8551a;font-size:26px;line-height:1;flex:0 0 auto}.grade-panel-subtitle{margin:6px 0 0;font-size:12px;color:var(--muted)}.centering-results-list{display:grid;gap:16px}.centering-result-row{display:grid;grid-template-columns:minmax(120px,1fr) auto;align-items:center;gap:16px}.centering-result-label{font-size:15px;font-weight:700;color:#334155}.centering-result-values{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px}.centering-result-value{font-size:15px;font-weight:900;color:#13294b}.centering-result-sep{color:#64748b;font-weight:700}.hidden-values{display:none}.grade-pill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:12px}.grade-pill-card{display:grid;gap:8px;justify-items:center;text-align:center}.grade-pill-label{font-size:13px;font-weight:700;color:#475569}.grade-pill-value{min-width:100%;min-height:48px;padding:10px 12px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,#d7f2e6 0%,#bde9d2 100%);border:1px solid #9adab5;box-shadow:0 3px 10px rgba(34,197,94,0.18);color:#065f46;font-size:16px;font-weight:900}.grade-pill-card.is-empty .grade-pill-value{background:#eef2f7;border-color:#d9e1ea;box-shadow:none;color:#64748b}.edge-adjustments-wrap{margin-top:20px;display:grid;gap:14px}.edge-adjustment-card{border-radius:18px;padding:16px 16px 14px}.inner-edge-card{background:#eef4f9}.outer-edge-card{background:#f4efe0}.edge-adjustment-card h4{margin:0 0 10px;font-size:14px;color:#0f4f82}.outer-edge-card h4{color:#a45700}.edge-adjustments-grid{display:grid;gap:10px}.edge-adjust-row{display:grid;grid-template-columns:70px minmax(0,1fr) 110px;align-items:center;gap:12px}.edge-adjust-row label{font-weight:700;color:#111827}.edge-adjust-slider{width:100%;accent-color:#111827}.inner-edge-card .edge-adjust-slider{accent-color:#111827}.outer-edge-card .edge-adjust-slider{accent-color:#c4b89a}.edge-adjust-input-wrap{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:6px;align-items:center}.edge-adjust-input{width:100%;min-height:34px;padding:6px 8px;border:1px solid var(--border);border-radius:10px;text-align:center;background:rgba(255,255,255,0.92);color:var(--text)}.edge-adjust-reset{width:30px;height:34px;border:none;background:transparent;color:#111827;font-size:24px;line-height:1;cursor:pointer}.result-side-meta{grid-template-columns:1fr;gap:14px;align-items:stretch}.centering-mini{border:none;border-radius:0;background:transparent;padding:0}.summary-metrics-panel{padding:18px 18px 16px}.summary-centering-results-list .centering-result-row{grid-template-columns:minmax(120px,1fr) auto}.result-grades-list{padding:18px 18px 16px}.result-grades-list .grade-pill-grid{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.result-grades-list>div:not(.grade-pill-grid){display:none}@media (max-width:760px){.edge-adjust-row{grid-template-columns:58px minmax(0,1fr) 96px;gap:8px}.live-centering-panel,.live-grades-panel,.summary-metrics-panel,.result-grades-list{padding:18px}.centering-result-row{grid-template-columns:1fr;justify-items:start;gap:6px}}html[data-theme="dark"] .live-centering-panel,html[data-theme="dark"] .live-grades-panel,html[data-theme="dark"] .summary-metrics-panel,html[data-theme="dark"] .result-grades-list{background:#101318;border-color:rgba(255,255,255,0.08);box-shadow:0 8px 20px rgba(0,0,0,0.24)}html[data-theme="dark"] .grade-panel-subtitle,html[data-theme="dark"] .centering-result-label,html[data-theme="dark"] .grade-pill-label{color:#cbd5e1}html[data-theme="dark"] .centering-result-value,html[data-theme="dark"] .metrics-panel-head h3{color:#f8fafc}html[data-theme="dark"] .grade-pill-card.is-empty .grade-pill-value{background:#1e2631;border-color:#334155;color:#cbd5e1}html[data-theme="dark"] .inner-edge-card{background:#111a22}html[data-theme="dark"] .outer-edge-card{background:#211a10}html[data-theme="dark"] .edge-adjust-row label,html[data-theme="dark"] .edge-adjust-reset{color:#f8fafc}html[data-theme="dark"] .edge-adjust-input{background:rgba(15,23,42,0.8);border-color:rgba(255,255,255,0.08);color:#f8fafc}.live-centering-panel.metrics-panel{border:none;box-shadow:none}.live-centering-panel{border:1px solid var(--border);box-shadow:none;padding:10px 10px 12px;background:#f4f5f7}.live-centering-panel h3{text-align:center;margin:0 0 18px}.result-side-meta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,0.8fr);gap:14px;align-items:center;min-height:160px}.centering-mini{border:1px solid var(--border);border-radius:18px;background:#fbfcfe;padding:10px 12px 12px}.result-grades-list{padding:14px}html[data-theme="dark"] .live-centering-panel,html[data-theme="dark"] .centering-mini{background:#101318}html[data-theme="dark"] .live-centering-panel .cross-line,html[data-theme="dark"] .centering-mini .mini-cross-line{background:#f8fafc}.live-grades-panel{padding:16px 16px 18px}.live-grades-list,.result-grades-list{text-align:initial;justify-items:stretch}.grade-pill-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.grade-pill-card{gap:6px}.grade-pill-label{font-size:11px;line-height:1}.grade-pill-value{min-height:38px;padding:7px 8px;font-size:13px;border-radius:8px}.current-grades-list .grade-pill-value{min-height:36px}@media (max-width:640px){.grade-pill-grid{grid-template-columns:repeat(auto-fit,minmax(60px,1fr))}.result-side-meta{grid-template-columns:1fr}}.edge-adjustments-wrap{margin-top:16px;gap:12px}.edge-adjustment-card{border-radius:16px;padding:14px 14px 12px}.edge-adjustments-grid{display:grid;gap:12px}.edge-adjust-row{display:grid;grid-template-columns:minmax(0,1fr) 98px;grid-template-rows:auto auto;gap:6px 12px;align-items:end}.edge-adjust-row label{grid-column:1;grid-row:1;font-size:13px;font-weight:700;color:#4b5563;line-height:1.1}.edge-adjust-slider{grid-column:1;grid-row:2;width:100%;accent-color:var(--orange-dark);cursor:pointer}.edge-adjust-input-wrap{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px;align-items:center;align-self:end}.edge-adjust-input{width:100%;min-height:38px;padding:8px 8px;border:1px solid var(--border);border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);text-align:center}.edge-adjust-input:focus{outline:none;border-color:var(--orange-dark);box-shadow:0 0 0 2px rgba(242,140,18,0.16)}.edge-adjust-reset{width:28px;min-width:28px;height:38px;border:none;background:transparent;color:var(--text);font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.edge-adjust-reset:hover{background:transparent;border:none}html[data-theme="dark"] .edge-adjust-row label{color:#cbd5e1}html[data-theme="dark"] .edge-adjust-input{background:rgba(15,23,42,0.8);border-color:rgba(255,255,255,0.08);color:#f8fafc}.edge-adjustments-wrap{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.edge-adjustment-card{padding:10px 12px 10px;border-radius:14px}.edge-adjustment-card h4{margin:0 0 8px;font-size:13px;line-height:1.2}.edge-adjustments-grid{gap:8px}.edge-adjust-row{grid-template-columns:minmax(0,1fr) 88px;gap:5px 10px}.edge-adjust-row label{font-size:12px}.edge-adjust-input-wrap{grid-template-columns:minmax(0,1fr) 24px;gap:4px}.edge-adjust-input{min-height:34px;padding:6px 6px;border-radius:12px;font-size:13px}.edge-adjust-reset{width:24px;min-width:24px;height:34px;font-size:20px}.estimates-panel .metrics-panel-head{margin-bottom:12px}@media (max-width:980px){.edge-adjustments-wrap{grid-template-columns:1fr}}.edge-adjustments-wrap{grid-template-columns:1fr !important;gap:8px !important;align-items:start}.edge-adjustment-card{display:block;width:100%;padding:10px 12px 10px !important}.edge-adjustment-card h4{margin:0 0 6px !important}.edge-adjustments-grid{gap:6px !important}.edge-adjust-row{grid-template-columns:minmax(0,1fr) 84px !important;gap:3px 8px !important}.edge-adjust-row label{line-height:1 !important}.edge-adjust-input-wrap{grid-template-columns:minmax(0,1fr) 22px !important;gap:4px !important}.edge-adjust-input{min-height:32px !important;padding:5px 6px !important}.edge-adjust-reset{width:22px !important;min-width:22px !important;height:32px !important;font-size:18px !important}.edge-adjustments-wrap{grid-template-columns:1fr !important;gap:10px !important;align-items:stretch}.edge-adjustment-card{display:block;width:100%;border:1px solid rgba(15,23,42,0.10);border-radius:16px !important;box-shadow:0 4px 12px rgba(15,23,42,0.05);padding:10px 12px !important}.inner-edge-card{background:#eef4f9}.outer-edge-card{background:#f4efe0}.edge-adjustment-card h4{margin:0 0 5px !important;font-size:13px}.edge-adjustments-grid{gap:4px !important}.edge-adjust-row{grid-template-columns:minmax(0,1fr) 82px !important;gap:2px 8px !important;align-items:end}.edge-adjust-row label{font-size:12px !important;line-height:1 !important;margin:0}.edge-adjust-input-wrap{grid-template-columns:minmax(0,1fr) 20px !important;gap:4px !important}.edge-adjust-input{min-height:30px !important;padding:4px 6px !important;font-size:12px !important}.edge-adjust-reset{width:20px !important;min-width:20px !important;height:30px !important;font-size:16px !important}.live-centering-panel{padding:8px 8px 9px !important}.live-centering-panel h3{margin:0 0 10px !important}.centering-cross{min-height:170px !important;width:min(100%,220px) !important}.centering-quadrant{gap:5px !important}.quadrant-mm,.quadrant-pct{font-size:13px}.quadrant-label{font-size:13px}html[data-theme="dark"] .edge-adjustment-card{border-color:rgba(255,255,255,0.08);box-shadow:0 6px 16px rgba(0,0,0,0.24)}.preview-number-input,.edge-adjust-input{appearance:auto;-webkit-appearance:auto}.preview-number-input::-webkit-inner-spin-button,.preview-number-input::-webkit-outer-spin-button,.edge-adjust-input::-webkit-inner-spin-button,.edge-adjust-input::-webkit-outer-spin-button{opacity:1;cursor:pointer}.editor-main-layout{align-items:stretch}.editor-stage,.editor-side-column{height:100%}.editor-side-column{grid-template-rows:minmax(0,1fr);align-content:stretch}.guide-insights{height:100%;grid-template-rows:auto minmax(0,1fr);align-content:stretch}.live-grades-panel{height:100%;display:flex;flex-direction:column}.edge-adjustments-wrap{flex:1 1 auto;align-content:start}@media (max-width:900px){.editor-main-layout{align-items:start}.editor-stage,.editor-side-column,.guide-insights,.live-grades-panel{height:auto}}.editor-measurement-hint{margin:8px 6px 0;font-size:12px;line-height:1.35;color:var(--muted);text-align:left}html[data-theme="dark"] .editor-measurement-hint{color:#94a3b8}.live-adjustments-panel{padding:10px 12px 12px;background:#f7f8fa}.live-adjustments-panel .edge-adjustments-wrap{margin-top:0}html[data-theme="dark"] .live-adjustments-panel{background:#101318;border-color:rgba(255,255,255,0.08);box-shadow:0 8px 20px rgba(0,0,0,0.24)}.guide-insights{grid-template-rows:auto auto auto}.live-grades-panel{height:auto}.live-grades-panel .metrics-panel-icon{display:none !important}.live-grades-panel .metrics-panel-head{justify-content:center}.live-grades-panel .metrics-panel-head>div:last-child{text-align:center}.editor-measurement-hint{margin:10px 8px 0 !important;font-size:14px !important;font-weight:600;line-height:1.45;text-align:center !important}html[data-theme="dark"] .editor-measurement-hint{color:#cbd5e1}.edge-by-side-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.edge-side-card{padding:10px 12px}.edge-side-card h4{margin:0 0 6px !important;font-size:13px;line-height:1.2}.edge-side-grid{display:grid;gap:6px !important}.edge-side-card .edge-adjust-row{grid-template-columns:minmax(0,1fr) 82px !important;gap:2px 8px !important}.edge-side-card .edge-adjust-row label{font-size:12px !important}.top-side-card,.left-side-card{background:#eef4f9}.bottom-side-card,.right-side-card{background:#f4efe0}.top-side-card h4,.left-side-card h4{color:#0f4f82}.bottom-side-card h4,.right-side-card h4{color:#a45700}@media (max-width:980px){.edge-by-side-wrap{grid-template-columns:1fr}}html[data-theme="dark"] .top-side-card,html[data-theme="dark"] .left-side-card{background:#111a22}html[data-theme="dark"] .bottom-side-card,html[data-theme="dark"] .right-side-card{background:#211a10}.guide-insights{gap:8px !important}.live-adjustments-panel{padding:8px 10px 9px !important}.edge-by-side-wrap{gap:8px !important}.edge-side-card{padding:8px 10px !important;border-radius:14px}.edge-side-card h4{margin:0 0 4px !important;font-size:12px;line-height:1.1}.edge-side-grid{gap:4px !important}.edge-side-card .edge-adjust-row{grid-template-columns:minmax(0,1fr) 76px !important;gap:1px 6px !important}.edge-side-card .edge-adjust-row label{font-size:11px !important;line-height:1.05 !important;margin:0}.edge-side-card .edge-adjust-slider{height:10px}.edge-side-card .edge-adjust-input-wrap{grid-template-columns:minmax(0,1fr) 18px !important;gap:3px !important}.edge-side-card .edge-adjust-input{min-height:28px !important;height:28px;padding:3px 5px !important;border-radius:10px;font-size:11px !important;line-height:1.1}.edge-side-card .edge-adjust-reset{width:18px !important;min-width:18px !important;height:28px !important;font-size:15px !important}.edge-side-card .edge-adjust-input::-webkit-inner-spin-button,.edge-side-card .edge-adjust-input::-webkit-outer-spin-button{height:24px}@media (max-width:980px){.guide-insights{gap:7px !important}.edge-by-side-wrap{gap:7px !important}}.top-side-card{background:#eef6ff !important}.bottom-side-card{background:#f5efff !important}.left-side-card{background:#fff1f1 !important}.right-side-card{background:#eefaf0 !important}html[data-theme="dark"] .top-side-card{background:#142030 !important}html[data-theme="dark"] .bottom-side-card{background:#22182f !important}html[data-theme="dark"] .left-side-card{background:#2a1618 !important}html[data-theme="dark"] .right-side-card{background:#142218 !important}.skip-link{position:fixed;left:16px;top:12px;z-index:9999;transform:translateY(-140%);padding:10px 14px;border-radius:999px;background:var(--orange,#e8551a);color:#111827;font-weight:800;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.18)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid color-mix(in srgb,var(--orange,#e8551a) 70%,white);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}}.guide-insights{gap:8px !important}.live-adjustments-panel{padding:8px 10px 9px !important}.edge-by-side-wrap{gap:8px !important}.edge-side-card{padding:8px 10px !important;border-radius:14px}.edge-side-card h4{margin:0 0 4px !important;font-size:12px;line-height:1.1}.edge-side-grid{gap:4px !important}.edge-side-card .edge-adjust-row{grid-template-columns:minmax(0,1fr) 76px !important;gap:1px 6px !important}.edge-side-card .edge-adjust-row label{font-size:11px !important;line-height:1.05 !important;margin:0}.edge-side-card .edge-adjust-slider{height:10px}.edge-side-card .edge-adjust-input-wrap{grid-template-columns:minmax(0,1fr) 18px !important;gap:3px !important}.edge-side-card .edge-adjust-input{min-height:28px !important;height:28px;padding:3px 5px !important;border-radius:10px;font-size:11px !important;line-height:1.1}.edge-side-card .edge-adjust-reset{width:18px !important;min-width:18px !important;height:28px !important;font-size:15px !important}.top-side-card{background:#eef6ff !important}.bottom-side-card{background:#f5efff !important}.left-side-card{background:#fff1f1 !important}.right-side-card{background:#eefaf0 !important}html[data-theme="dark"] .top-side-card{background:#142030 !important}html[data-theme="dark"] .bottom-side-card{background:#22182f !important}html[data-theme="dark"] .left-side-card{background:#2a1618 !important}html[data-theme="dark"] .right-side-card{background:#142218 !important}

.site-footer{justify-content:center !important;gap:14px !important;padding:34px 24px 42px !important}.footer-copy{flex:0 0 auto}.footer-links{flex:0 0 auto;gap:10px !important}.site-footer .footer-link{padding:0}.site-footer .footer-copy,.site-footer .footer-links{justify-content:center}.site-footer{flex-wrap:wrap}@media (max-width:720px){.site-footer{gap:8px !important;padding:28px 16px 36px !important}.footer-links{width:auto;justify-content:center}}

.page-actions.editor-actions{justify-content:center !important;align-items:center;gap:12px !important}.page-actions.editor-actions .btn{flex:0 0 auto !important;min-width:132px}.page-actions.editor-actions .btn:only-child{min-width:160px}@media (max-width:720px){.page-actions.editor-actions{justify-content:center !important}.page-actions.editor-actions .btn{min-width:120px}}


/* Mobile layout: keep preview below controls/sliders on Single Card Analysis */
@media (max-width: 900px) {
  .editor-side-column {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .editor-side-column .guide-insights {
    order: 1;
    width: 100%;
  }
  .editor-side-column .align-preview-panel {
    order: 2;
    width: min(100%, 360px);
    margin-top: 2px;
  }
}

@media (max-width: 720px) {
  .editor-main-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .editor-stage {
    order: 1;
    width: 100%;
    max-width: 100%;
  }
  .editor-side-column {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
  }
  .editor-side-column .guide-insights {
    order: 1;
    width: 100%;
  }
  .editor-side-column .align-preview-panel {
    order: 2;
    width: 100%;
    max-width: 360px;
    margin-top: 2px;
  }
  .align-preview-panel {
    padding-bottom: 14px;
  }
}

/* Hamburger icon contrast */
.menu-button {
  color: #0f172a;
}
.menu-button:hover,
.menu-button:focus-visible {
  color: #0f172a;
}
html[data-theme="dark"] .menu-button {
  color: #ffffff !important;
}
html[data-theme="dark"] .menu-button:hover,
html[data-theme="dark"] .menu-button:focus-visible {
  color: #ffffff !important;
}


/* Mobile: hide Preview section and its sliders; hide Border Measurement sliders */
@media (max-width: 720px) {
  #alignPreviewPanel,
  .align-preview-panel {
    display: none !important;
  }

  .edge-adjust-row {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    align-items: center;
  }

  .edge-adjust-row .edge-adjust-slider {
    display: none !important;
  }

  .edge-adjust-row label {
    grid-column: 1;
  }

  .edge-adjust-row .edge-adjust-input-wrap {
    grid-column: 2;
  }
}


/* Mobile: hide the complete Top/Left/Bottom/Right adjustment section */
@media (max-width: 720px) {
  .live-adjustments-panel,
  .edge-by-side-wrap,
  .edge-side-card,
  .inner-edge-card,
  .outer-edge-card {
    display: none !important;
  }
}


/* Mobile: hide border measurement hint text */
@media (max-width: 720px) {
  .editor-measurement-hint {
    display: none !important;
  }
}

/* Production safety and touch-device polish */
html, body {
  overflow-x: hidden !important;
  max-width: 100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--orange-dark, #e8551a) 70%, white);
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .preview-zoom-modal,
  .loupe-cursor {
    cursor: auto !important;
  }
}


/* Reliable fixed navigation bar */
:root {
  --topbar-height: 72px;
}

body {
  padding-top: var(--topbar-height);
}

.topbar {
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1120px, calc(100% - 32px));
  min-height: var(--topbar-height);
  z-index: 9999;
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .topbar {
  background: color-mix(in srgb, #ffffff 88%, transparent) !important;
}

.nav {
  z-index: 10000;
}

@media (max-width: 900px) {
  .nav {
    top: calc(var(--topbar-height) + 8px) !important;
  }
}

@supports not (background: color-mix(in srgb, white, transparent)) {
  .topbar {
    background: rgba(9, 9, 11, 0.92) !important;
  }

  html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}

/* Summary report download dropdown */
.download-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}

.download-menu {
  position: relative;
  display: inline-flex;
  z-index: 20;
}

.download-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.download-menu-trigger span {
  font-size: 14px;
  line-height: 1;
  transition: transform 160ms ease;
}

.download-menu.is-open .download-menu-trigger span {
  transform: rotate(180deg);
}

.download-menu-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  min-width: 210px;
  transform: translateX(-50%) translateY(-4px);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.download-menu.is-open .download-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.download-menu-panel button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
}

.download-menu-panel button:hover,
.download-menu-panel button:focus-visible {
  background: color-mix(in srgb, var(--orange-dark, #f28c12) 12%, transparent);
  outline: none;
}

@media (max-width: 720px) {
  .download-menu,
  .download-menu-trigger {
    width: 100%;
  }

  .download-menu-panel {
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    transform: translateY(-4px);
  }

  .download-menu.is-open .download-menu-panel {
    transform: translateY(0);
  }
}

/* Premium compact report download menu */
.download-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.download-menu {
  position: relative;
  display: inline-flex;
  width: auto;
  z-index: 50;
}

.download-menu-trigger {
  min-height: 44px;
  padding: 0 16px 0 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(242, 140, 18, 0.18);
}

.download-trigger-label {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.download-chevron {
  flex: 0 0 auto;
  transition: transform 180ms ease;
}

.download-menu.is-open .download-chevron {
  transform: rotate(180deg);
}

.download-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: 100%;
  min-width: 210px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    visibility 160ms ease;
}

.download-menu.is-open .download-menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.download-menu-panel button {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.download-menu-panel button + button {
  margin-top: 2px;
}

.download-menu-panel button:hover,
.download-menu-panel button:focus-visible {
  background: color-mix(in srgb, var(--orange-dark, #f28c12) 13%, transparent);
  color: var(--text);
  outline: none;
}

.download-menu-panel button:active {
  transform: translateY(1px);
}

.download-option-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--orange-dark, #f28c12) 15%, transparent);
  color: var(--orange-dark, #f28c12);
  font-size: 14px;
  line-height: 1;
}

html[data-theme="dark"] .download-menu-panel {
  background: color-mix(in srgb, #0f172a 94%, transparent);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .download-menu-panel button:hover,
html[data-theme="dark"] .download-menu-panel button:focus-visible {
  background: rgba(242, 140, 18, 0.16);
}

html[data-theme="light"] .download-menu-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.13);
}

@media (max-width: 720px) {
  .download-actions {
    width: 100%;
  }

  .download-menu {
    width: min(100%, 300px);
  }

  .download-menu-trigger {
    width: 100%;
    min-height: 46px;
  }

  .download-menu-panel {
    width: 100%;
    min-width: 0;
  }

  .download-menu-panel button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .download-chevron,
  .download-menu-panel,
  .download-menu-panel button {
    transition: none !important;
  }
}

/* Download menu fix: no spinning/rotation and full menu visibility */
.download-menu,
.download-actions,
.result-actions,
.page-actions {
  overflow: visible !important;
}

.download-menu {
  z-index: 5000;
}

.download-menu-trigger,
.download-menu-trigger:hover,
.download-menu-trigger:focus-visible {
  transform: none !important;
}

.download-chevron,
.download-menu.is-open .download-chevron {
  transform: none !important;
  transition: none !important;
}

.download-menu-panel {
  width: max-content !important;
  min-width: 230px !important;
  max-width: min(280px, calc(100vw - 32px));
  overflow: visible !important;
  z-index: 5001;
}

.download-menu-panel button {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap;
}

.download-menu-panel button + button {
  margin-top: 4px !important;
}

@media (max-width: 720px) {
  .download-menu {
    width: min(100%, 300px);
  }

  .download-menu-panel {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100%;
  }

  .download-menu-panel button {
    white-space: normal;
  }
}

/* Final Download Report menu reset/fix */
.download-actions,
.result-actions,
.page-actions,
#pageResult {
  overflow: visible !important;
}

.download-menu {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  z-index: 99999 !important;
  overflow: visible !important;
  transform: none !important;
}

.download-report-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  direction: ltr !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #e8551a, #f28c12) !important;
  color: #111827 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 14px 30px rgba(242, 140, 18, 0.22) !important;
}

.download-report-trigger *,
.download-report-trigger:hover,
.download-report-trigger:focus,
.download-report-trigger:active {
  transform: none !important;
  rotate: 0deg !important;
}

.download-report-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, #f28c12 55%, white) !important;
  outline-offset: 3px !important;
}

.download-caret {
  display: inline-flex !important;
  transform: none !important;
  rotate: 0deg !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transition: none !important;
}

.download-menu.is-open .download-caret {
  transform: none !important;
  rotate: 0deg !important;
}

.download-menu-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  right: auto !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: min(250px, calc(100vw - 32px)) !important;
  min-height: 102px !important;
  height: auto !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  background: #0f172a !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-6px) !important;
  overflow: visible !important;
  z-index: 100000 !important;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease !important;
}

.download-menu.is-open .download-menu-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.download-menu-panel button {
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #f8fafc !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.download-menu-panel button + button {
  margin-top: 4px !important;
}

.download-menu-panel button:hover,
.download-menu-panel button:focus-visible {
  background: rgba(242, 140, 18, 0.16) !important;
  outline: none !important;
}

.download-option-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: rgba(242, 140, 18, 0.18) !important;
  color: #f59a2e !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
  font-size: 13px !important;
}

html[data-theme="light"] .download-menu-panel {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.16) !important;
}

html[data-theme="light"] .download-menu-panel button {
  color: #111827 !important;
}

html[data-theme="light"] .download-menu-panel button:hover,
html[data-theme="light"] .download-menu-panel button:focus-visible {
  background: rgba(242, 140, 18, 0.12) !important;
}

@media (max-width: 720px) {
  .download-actions {
    width: 100% !important;
    justify-content: center !important;
  }

  .download-menu {
    width: min(100%, 300px) !important;
  }

  .download-report-trigger {
    width: 100% !important;
  }

  .download-menu-panel {
    left: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    transform: translateY(-6px) !important;
  }

  .download-menu.is-open .download-menu-panel {
    transform: translateY(0) !important;
  }
}

/* Final premium report download popover */
.download-actions-final {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  isolation: isolate;
}

.report-download,
.report-download *,
.report-download *::before,
.report-download *::after {
  box-sizing: border-box;
}

.report-download {
  position: relative !important;
  display: inline-block !important;
  width: auto !important;
  z-index: 9999 !important;
  overflow: visible !important;
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
}

.report-download__trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: auto !important;
  min-width: 196px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 16px 0 18px !important;
  border: 1px solid rgba(242, 140, 18, 0.38) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #e8551a 0%, #f28c12 100%) !important;
  color: #111827 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 12px 26px rgba(242, 140, 18, 0.22), inset 0 1px 0 rgba(255,255,255,0.28) !important;
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
  transition: box-shadow 160ms ease, filter 160ms ease !important;
}

.report-download__trigger:hover {
  filter: brightness(1.02);
  box-shadow: 0 14px 30px rgba(242, 140, 18, 0.28), inset 0 1px 0 rgba(255,255,255,0.32) !important;
}

.report-download__trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, #f28c12 55%, white) !important;
  outline-offset: 3px !important;
}

.report-download__label,
.report-download__chevron {
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.report-download__chevron {
  flex: 0 0 auto !important;
  transition: transform 180ms ease !important;
}

.report-download.is-open .report-download__chevron {
  transform: rotate(180deg) !important;
}

.report-download__menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  width: 222px !important;
  min-width: 222px !important;
  min-height: 98px !important;
  padding: 7px !important;
  border: 1px solid rgba(148, 163, 184, 0.20) !important;
  border-radius: 16px !important;
  background: #0f172a !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-6px) !important;
  transform-origin: top center !important;
  overflow: visible !important;
  z-index: 10000 !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease !important;
}

.report-download.is-open .report-download__menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.report-download__item {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 11px !important;
  background: transparent !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  rotate: 0deg !important;
  writing-mode: horizontal-tb !important;
  transition: background 140ms ease, transform 140ms ease !important;
}

.report-download__item + .report-download__item {
  margin-top: 4px !important;
}

.report-download__item:hover,
.report-download__item:focus-visible {
  background: rgba(242, 140, 18, 0.16) !important;
  outline: none !important;
}

.report-download__item:active {
  transform: translateY(1px) !important;
}

.report-download__icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: rgba(242, 140, 18, 0.16) !important;
  color: #f59a2e !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 24px !important;
}

html[data-theme="light"] .report-download__menu {
  background: rgba(255, 255, 255, 0.98) !important;
  color: #111827 !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

html[data-theme="light"] .report-download__item:hover,
html[data-theme="light"] .report-download__item:focus-visible {
  background: rgba(242, 140, 18, 0.12) !important;
}

@media (max-width: 720px) {
  .download-actions-final {
    width: 100% !important;
  }

  .report-download {
    width: min(100%, 300px) !important;
  }

  .report-download__trigger {
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
  }

  .report-download__menu {
    width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    transform: translateY(-6px) !important;
  }

  .report-download.is-open .report-download__menu {
    transform: translateY(0) !important;
  }

  .report-download__item {
    height: 44px !important;
    min-height: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-download__trigger,
  .report-download__chevron,
  .report-download__menu,
  .report-download__item {
    transition: none !important;
  }
}


/* Production cleanup: prevent horizontal overflow */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Summary page action bar */
#pageResult .page-actions.result-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 20px !important;
  overflow: visible !important;
}

#pageResult .download-actions-final {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 1 220px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

#pageResult .summary-action-secondary {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: auto !important;
  margin-left: auto !important;
  gap: 12px !important;
  column-gap: 12px !important;
}

#pageResult .report-download,
#pageResult .report-download__trigger {
  width: 210px !important;
  min-width: 0 !important;
}

#pageResult .report-download__trigger,
#pageResult .summary-action-secondary .btn {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 16px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#pageResult .report-download__trigger {
  padding: 0 16px !important;
}

#pageResult .summary-action-secondary .btn {
  width: auto !important;
  padding: 0 18px !important;
}

#pageResult #backResultBtn {
  min-width: 82px !important;
}

#pageResult #redoBtn {
  min-width: 126px !important;
  margin-left: 0 !important;
}

@media (max-width: 720px) {
  #pageResult .page-actions.result-actions {
    gap: 10px !important;
  }

  #pageResult .download-actions-final {
    flex: 1 1 auto !important;
  }

  #pageResult .report-download,
  #pageResult .report-download__trigger {
    width: 100% !important;
  }

  #pageResult .summary-action-secondary {
    flex: 0 0 auto !important;
    gap: 12px !important;
    column-gap: 12px !important;
  }

  #pageResult .report-download__trigger,
  #pageResult .summary-action-secondary .btn {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }

  #pageResult .report-download__trigger {
    padding: 0 12px !important;
  }

  #pageResult .summary-action-secondary .btn {
    padding: 0 12px !important;
  }

  #pageResult #backResultBtn {
    min-width: 64px !important;
  }

  #pageResult #redoBtn {
    min-width: 104px !important;
  }
}

@media (max-width: 390px) {
  #pageResult .page-actions.result-actions {
    gap: 8px !important;
  }

  #pageResult .summary-action-secondary {
    gap: 10px !important;
    column-gap: 10px !important;
  }

  #pageResult .report-download__trigger,
  #pageResult .summary-action-secondary .btn {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 13px !important;
  }

  #pageResult #backResultBtn {
    min-width: 58px !important;
  }

  #pageResult #redoBtn {
    min-width: 94px !important;
  }
}

/* Fix Summary download dropdown clipping near bottom of page */
#pageResult,
#pageResult .result-actions,
#pageResult .download-actions-final,
#pageResult .report-download {
  overflow: visible !important;
}

#pageResult .report-download__menu {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  min-height: 108px !important;
  height: auto !important;
  padding: 8px !important;
  z-index: 999999 !important;
}

#pageResult .report-download__item {
  display: flex !important;
  height: 42px !important;
  min-height: 42px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#pageResult .report-download__item + .report-download__item {
  margin-top: 6px !important;
}

#pageResult .report-download.is-open .report-download__menu {
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 720px) {
  #pageResult .report-download__menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 108px !important;
    transform: translateY(6px) !important;
  }

  #pageResult .report-download.is-open .report-download__menu {
    transform: translateY(0) !important;
  }

  #pageResult .report-download__item {
    height: 44px !important;
    min-height: 44px !important;
  }
}


/* Grade estimate tones */
.grade-pill-card.grade-green .grade-pill-value{
  background:linear-gradient(180deg,#d7f2e6 0%,#bde9d2 100%) !important;
  border:1px solid #9adab5 !important;
  box-shadow:0 3px 10px rgba(34,197,94,0.18) !important;
  color:#065f46 !important;
}
.grade-pill-card.grade-yellow .grade-pill-value{
  background:linear-gradient(180deg,#ffe4c8 0%,#ffcf9e 100%) !important;
  border:1px solid #f3c94d !important;
  box-shadow:0 3px 10px rgba(232,85,26,0.18) !important;
  color:#7c5200 !important;
}
.grade-pill-card.grade-red .grade-pill-value{
  background:linear-gradient(180deg,#ffd9d9 0%,#ffc0c0 100%) !important;
  border:1px solid #f1a0a0 !important;
  box-shadow:0 3px 10px rgba(239,68,68,0.16) !important;
  color:#991b1b !important;
}
.grade-pill-card.is-empty .grade-pill-value{
  background:#eef2f7 !important;
  border-color:#d9e1ea !important;
  box-shadow:none !important;
  color:#64748b !important;
}

/* Top / Left / Bottom / Right labels follow theme, not axis color */
html[data-theme="light"] .quadrant-label,
html[data-theme="light"] .mini-quadrant-label{
  color:#111827 !important;
}
html[data-theme="dark"] .quadrant-label,
html[data-theme="dark"] .mini-quadrant-label{
  color:#f8fafc !important;
}

/* Cache-busted final grade color rules */
.grade-pill-value.grade-green,
.grade-pill-card.grade-green .grade-pill-value {
  background: linear-gradient(180deg, #d7f2e6 0%, #bde9d2 100%) !important;
  border-color: #9adab5 !important;
  color: #065f46 !important;
  box-shadow: 0 3px 10px rgba(34,197,94,0.18) !important;
}

.grade-pill-value.grade-yellow,
.grade-pill-card.grade-yellow .grade-pill-value {
  background: linear-gradient(180deg, #ffe4c8 0%, #ffcf9e 100%) !important;
  border-color: #f3c94d !important;
  color: #7c5200 !important;
  box-shadow: 0 3px 10px rgba(232,85,26,0.18) !important;
}

.grade-pill-value.grade-red,
.grade-pill-card.grade-red .grade-pill-value {
  background: linear-gradient(180deg, #ffd9d9 0%, #ffc0c0 100%) !important;
  border-color: #f1a0a0 !important;
  color: #991b1b !important;
  box-shadow: 0 3px 10px rgba(239,68,68,0.16) !important;
}

/* Final theme-based axis labels */
html[data-theme="light"] .quadrant-label,
html[data-theme="light"] .mini-quadrant-label,
html[data-theme="light"] .edge-side-card h4 {
  color: #111827 !important;
}

html[data-theme="dark"] .quadrant-label,
html[data-theme="dark"] .mini-quadrant-label,
html[data-theme="dark"] .edge-side-card h4 {
  color: #f8fafc !important;
}

/* Clickable Summary previews and reusable zoom modal behavior */
.result-preview-image { cursor: zoom-in; }
.preview-zoom-frame { overflow: hidden; touch-action: none; }
.preview-zoom-frame img { transform-origin: center center; will-change: transform; transition: transform 120ms ease; cursor: grab; }
.preview-zoom-frame img:active { cursor: grabbing; }

/* Zoom modal pan support */
.preview-zoom-frame {
  overflow: hidden;
  touch-action: none;
}

.preview-zoom-frame img {
  transform-origin: center center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}


/* Compact responsive workspace: keep the Precision Card Centering Analysis tool in view on desktop/laptop */
@media (min-width: 901px) {
  .wrap {
    width: min(100vw - 32px, 1320px);
  }

  .step-progress {
    margin: 10px auto 10px;
    padding: 8px;
    gap: 8px;
  }

  .step-pill {
    min-height: 46px;
    padding: 8px 10px;
    border-radius: 16px;
  }

  .step-pill span {
    width: 26px;
    height: 26px;
    font-size: 12px;
  }

  .step-pill strong {
    min-height: 0;
    font-size: 11px;
    line-height: 1.1;
  }

  #pageEditor.step-page {
    min-height: calc(100svh - 150px);
    padding: clamp(10px, 1.2vh, 16px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: clamp(6px, 1vh, 10px);
  }

  #pageEditor .page-copy {
    margin: 0 auto;
    max-width: 720px;
  }

  #pageEditor .page-kicker {
    margin-bottom: 3px;
    font-size: 11px;
  }

  #pageEditor h2 {
    margin: 0;
    font-size: clamp(20px, 2.4vh, 28px);
    line-height: 1.05;
  }

  #pageEditor .page-copy p {
    margin: 4px auto 0;
    max-width: 680px;
    font-size: clamp(12px, 1.35vh, 14px);
    line-height: 1.3;
  }

  #pageEditor .editor-main-layout {
    margin-top: 0 !important;
    width: 100%;
    max-width: 1120px;
    justify-self: center;
    grid-template-columns: minmax(0, min(55vw, 620px)) minmax(300px, 390px);
    gap: clamp(10px, 1.5vw, 16px);
    align-items: stretch;
    min-height: 0;
    max-height: calc(100svh - 245px);
  }

  #pageEditor .editor-stage,
  #pageEditor .editor-side-column {
    min-height: 0;
    height: auto;
  }

  #pageEditor .editor-stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 6px;
    align-self: stretch;
  }

  #pageEditor .canvas-wrap {
    min-height: 0;
    height: 100%;
    padding: 6px;
    overflow: hidden;
  }

  #pageEditor #canvas {
    height: min(70vh, calc(100svh - 310px), 690px);
    width: auto;
    max-width: 100%;
    border-radius: 14px;
  }

  #pageEditor .editor-measurement-hint {
    margin: 6px 4px 0 !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 600;
  }

  #pageEditor .editor-side-column {
    display: grid;
    grid-auto-rows: max-content;
    gap: 8px;
    align-content: start;
    max-height: calc(100svh - 245px);
    overflow: visible;
  }

  #pageEditor .panel-block,
  #pageEditor .align-preview-panel,
  #pageEditor .live-centering-panel,
  #pageEditor .live-grades-panel,
  #pageEditor .live-adjustments-panel {
    border-radius: 16px;
    padding: 8px 10px !important;
  }

  #pageEditor .panel-block h3,
  #pageEditor .metrics-panel-head h3,
  #pageEditor .centering-mini-title {
    margin-bottom: 6px !important;
    font-size: 13px !important;
    line-height: 1.15;
  }

  #pageEditor .metrics-panel-head {
    gap: 6px;
    margin-bottom: 4px;
  }

  #pageEditor .grade-panel-subtitle {
    margin: 2px 0 0;
    font-size: 10.5px;
    line-height: 1.15;
  }

  #pageEditor .align-preview-wrap {
    padding: 4px 0;
  }

  #pageEditor #alignPreviewCanvas {
    width: min(100%, 145px);
  }

  #pageEditor .align-preview-note {
    display: none;
  }

  #pageEditor .align-preview-controls {
    margin-top: 8px;
    gap: 7px;
  }

  #pageEditor .preview-control-row {
    grid-template-columns: minmax(0, 1fr) 78px;
    gap: 7px;
  }

  #pageEditor .preview-slider-group span,
  #pageEditor .preview-input-group span {
    min-height: 10px;
    font-size: 10px;
    line-height: 1;
  }

  #pageEditor .preview-number-input {
    min-height: 30px;
    height: 30px;
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 9px;
  }

  #pageEditor .preview-input-reset-group {
    grid-template-columns: minmax(0, 1fr) 24px;
    gap: 4px;
  }

  #pageEditor .preview-mini-reset-btn {
    width: 24px;
    min-width: 24px;
    height: 30px;
    font-size: 16px;
  }

  #pageEditor .guide-insights {
    gap: 7px !important;
    align-content: start;
  }

  #pageEditor .edge-by-side-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  #pageEditor .edge-side-card {
    padding: 6px 8px !important;
    border-radius: 12px;
  }

  #pageEditor .edge-side-card h4 {
    margin: 0 0 3px !important;
    font-size: 11px !important;
  }

  #pageEditor .edge-side-grid {
    gap: 3px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-row {
    grid-template-columns: minmax(0, 1fr) 68px !important;
    gap: 0 5px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-row label {
    font-size: 10px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-slider {
    height: 8px;
  }

  #pageEditor .edge-side-card .edge-adjust-input-wrap {
    grid-template-columns: minmax(0, 1fr) 16px !important;
    gap: 2px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-input {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    border-radius: 8px;
  }

  #pageEditor .edge-side-card .edge-adjust-reset {
    width: 16px !important;
    min-width: 16px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  #pageEditor .centering-cross {
    min-height: 148px;
    width: min(100%, 210px);
    margin: 0 auto;
  }

  #pageEditor .quadrant-label {
    font-size: 12px !important;
  }

  #pageEditor .quadrant-mm,
  #pageEditor .quadrant-pct {
    font-size: 11px !important;
  }

  #pageEditor .centering-quadrant {
    gap: 4px;
  }

  #pageEditor .live-grades-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    font-size: 11px;
  }

  #pageEditor .live-grades-list div {
    padding: 6px 5px;
    min-width: 0;
    text-align: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid var(--border);
  }

  #pageEditor .editor-actions {
    margin-top: 0;
    align-self: end;
    position: sticky;
    bottom: 8px;
    z-index: 5;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #pageEditor .editor-actions .btn {
    min-height: 38px;
    padding: 0 18px;
    border-radius: 10px;
  }
}

/* Slightly tighter canvas on short laptop screens */
@media (min-width: 901px) and (max-height: 760px) {
  #pageEditor.step-page {
    min-height: calc(100svh - 138px);
    padding: 8px 10px;
  }

  #pageEditor .editor-main-layout {
    max-height: calc(100svh - 222px);
  }

  #pageEditor #canvas {
    height: min(66vh, calc(100svh - 286px), 580px);
  }

  #pageEditor .centering-cross {
    min-height: 124px;
    width: min(100%, 184px);
  }

  #pageEditor #alignPreviewCanvas {
    width: min(100%, 120px);
  }

  #pageEditor .align-preview-controls {
    gap: 5px;
  }

  #pageEditor .live-grades-list {
    font-size: 10px;
  }

  #pageEditor .edge-side-card {
    padding: 5px 7px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-input {
    min-height: 22px !important;
    height: 22px !important;
  }

  #pageEditor .edge-side-card .edge-adjust-reset {
    height: 22px !important;
  }
}

@media (min-width: 901px) and (max-height: 680px) {
  #pageEditor .page-copy p,
  #pageEditor .editor-measurement-hint,
  #pageEditor .grade-panel-subtitle {
    display: none !important;
  }

  #pageEditor #canvas {
    height: min(64vh, calc(100svh - 240px), 500px);
  }

  #pageEditor .editor-main-layout {
    max-height: calc(100svh - 188px);
  }
}

/* Tablet keeps the same content but uses a cleaner single-column workspace */
@media (min-width: 721px) and (max-width: 900px) {
  #pageEditor .editor-main-layout {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  #pageEditor .editor-side-column,
  #pageEditor .guide-insights {
    width: min(100%, 640px);
  }
}


/* Border Measurement: put border controls on the left and Centering / Grade Estimates on the right */
@media (min-width: 901px) {
  /* Give the right-side Border Measurement panel enough room for two internal columns. */
  #pageEditor .editor-main-layout {
    max-width: 1260px;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 560px);
  }

  #pageEditor .editor-side-column {
    min-width: 0;
  }

  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(285px, 1.08fr) minmax(185px, 0.72fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "controls centering"
      "controls grades";
    gap: 8px !important;
    align-items: start;
    align-content: start;
    width: 100%;
  }

  #pageEditor .guide-insights .live-adjustments-panel {
    grid-area: controls;
    height: 100%;
    align-self: stretch;
  }

  #pageEditor .guide-insights .live-centering-panel {
    grid-area: centering;
    align-self: start;
  }

  #pageEditor .guide-insights .live-grades-panel {
    grid-area: grades;
    align-self: start;
  }

  #pageEditor .guide-insights .panel-block,
  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    padding: 7px 8px !important;
    border-radius: 15px;
  }

  /* Border controls stay compact and scan as Top / Left / Bottom / Right. */
  #pageEditor .guide-insights .edge-by-side-wrap {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  #pageEditor .guide-insights .edge-side-card {
    padding: 6px 8px !important;
    border-radius: 12px;
  }

  #pageEditor .guide-insights .edge-side-card h4 {
    margin: 0 0 3px !important;
    font-size: 11px !important;
    line-height: 1.05;
  }

  #pageEditor .guide-insights .edge-side-grid {
    gap: 3px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 34px minmax(0, 1fr) 66px !important;
    gap: 0 5px !important;
    align-items: center;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row label {
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
    height: 8px;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    grid-template-columns: minmax(0, 1fr) 16px !important;
    gap: 2px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    min-height: 24px !important;
    height: 24px !important;
    padding: 2px 4px !important;
    font-size: 10px !important;
    border-radius: 8px;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 16px !important;
    min-width: 16px !important;
    height: 24px !important;
    font-size: 13px !important;
  }

  /* Make Centering a compact right-side summary card instead of a tall stack. */
  #pageEditor .guide-insights .live-centering-panel h3,
  #pageEditor .guide-insights .live-grades-panel h3 {
    margin: 0 0 5px !important;
    font-size: 12px !important;
    line-height: 1.05;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 118px !important;
    width: 100% !important;
    max-width: 178px;
  }

  #pageEditor .guide-insights .cross-line-vertical {
    width: 1px;
    height: 62%;
    top: 19%;
  }

  #pageEditor .guide-insights .cross-line-horizontal {
    height: 1px;
    width: 62%;
    left: 19%;
  }

  #pageEditor .guide-insights .centering-quadrant {
    gap: 3px;
  }

  #pageEditor .guide-insights .quadrant-label {
    font-size: 10px !important;
    line-height: 1 !important;
  }

  #pageEditor .guide-insights .quadrant-mm,
  #pageEditor .guide-insights .quadrant-pct {
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em;
  }

  #pageEditor .guide-insights .quadrant-left,
  #pageEditor .guide-insights .quadrant-right {
    top: 8%;
  }

  #pageEditor .guide-insights .quadrant-top,
  #pageEditor .guide-insights .quadrant-bottom {
    bottom: 12%;
  }

  /* Grade boxes sit directly under Centering on the right side. */
  #pageEditor .guide-insights .live-grades-panel .metrics-panel-head {
    margin-bottom: 4px;
  }

  #pageEditor .guide-insights .grade-panel-subtitle {
    display: none;
  }

  #pageEditor .guide-insights .live-grades-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    font-size: 9.5px;
    line-height: 1.05;
    width: 100%;
  }

  #pageEditor .guide-insights .live-grades-list div {
    min-width: 0;
    padding: 5px 3px;
    border-radius: 9px;
    text-align: center;
    white-space: nowrap;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid var(--border);
  }
}

/* On medium-width laptops/tablets, keep the workflow stable and stack within the side panel if needed. */
@media (min-width: 901px) and (max-width: 1120px) {
  #pageEditor .editor-main-layout {
    grid-template-columns: minmax(0, 1fr) minmax(440px, 500px);
    gap: 10px;
  }

  #pageEditor .guide-insights:not(.hidden) {
    grid-template-columns: minmax(250px, 1fr) minmax(160px, 0.65fr);
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 32px minmax(0, 1fr) 60px !important;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 108px !important;
    max-width: 160px;
  }

  #pageEditor .guide-insights .live-grades-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile/tablet remains cleanly stacked: controls, Centering, then Grades. */
@media (max-width: 900px) {
  #pageEditor .guide-insights {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-areas:
      "controls"
      "centering"
      "grades";
  }

  #pageEditor .guide-insights .live-adjustments-panel { grid-area: controls; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades; }
}


/* KantoCorp 4-step connected premium workflow stepper */
.step-progress.kc-stepper,
.step-progress {
  position: relative;
  margin: 14px auto 10px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0;
  align-items: center;
  overflow: visible;
  isolation: isolate;
}

.step-progress.kc-stepper::before,
.step-progress::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(242,140,18,.45), rgba(242,140,18,.22), rgba(148,163,184,.22));
  z-index: 0;
}

.step-progress .step-pill {
  position: relative;
  z-index: 1;
  width: min(100%, 178px);
  min-height: 42px;
  justify-self: center;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--muted);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.step-progress .step-pill span {
  width: 25px;
  height: 25px;
  min-width: 25px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.step-progress .step-pill strong {
  min-height: 0 !important;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: -0.015em;
}

.step-progress .step-pill.is-active {
  border-color: rgba(242,140,18,.55);
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #09090b;
  box-shadow: 0 18px 38px rgba(242,140,18,.22);
}

.step-progress .step-pill.is-active span {
  background: rgba(255,255,255,.92);
  color: #09090b;
  border-color: rgba(255,255,255,.6);
}

.step-progress .step-pill.is-complete {
  color: var(--text);
  border-color: rgba(242,140,18,.34);
  background: color-mix(in srgb, var(--surface) 72%, rgba(242,140,18,.16));
}

.step-progress .step-pill.is-complete span {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  border-color: transparent;
  color: #09090b;
}

.step-progress .step-pill:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
}

.step-progress .step-pill:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(242,140,18,.52);
}

.side-step-tabs {
  width: max-content;
  max-width: 100%;
  margin: 0 auto 12px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.side-step-tab {
  border: 0;
  min-height: 32px;
  min-width: 88px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}

.side-step-tab.is-active {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: #09090b;
  box-shadow: 0 10px 22px rgba(242,140,18,.20);
}

.side-step-tab:not(:disabled):hover {
  color: var(--text);
  transform: translateY(-1px);
}

.side-step-tab:disabled {
  opacity: .45;
  cursor: not-allowed;
}

html[data-theme="dark"] .step-progress .step-pill {
  background: rgba(15, 18, 24, .88);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

html[data-theme="dark"] .step-progress .step-pill.is-complete {
  background: rgba(242,140,18,.12);
}

html[data-theme="dark"] .side-step-tabs {
  background: rgba(15, 18, 24, .88);
}

@media (max-width: 720px) {
  .step-progress.kc-stepper,
  .step-progress {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(76px, 1fr)) !important;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .step-progress::-webkit-scrollbar {
    display: none;
  }

  .step-progress.kc-stepper::before,
  .step-progress::before {
    display: none;
  }

  .step-progress .step-pill {
    width: 100%;
    min-width: 76px;
    min-height: 38px;
    padding: 7px 8px;
    gap: 5px;
  }

  .step-progress .step-pill span {
    width: 22px;
    height: 22px;
    min-width: 22px;
    font-size: 11px;
  }

  .step-progress .step-pill strong {
    font-size: 11px;
  }

  .side-step-tabs {
    width: min(100%, 280px);
  }

  .side-step-tab {
    min-width: 0;
    flex: 1;
  }
}


/* 4-step refactor: clearer side tabs with status dots */
.side-step-tab {
  position: relative;
}

.side-step-tab::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: middle;
  background: rgba(148,163,184,.65);
}

.side-step-tabs[data-phase="upload"] #sideTabFront::after,
.side-step-tabs[data-phase="upload"] #sideTabBack::after {
  background: rgba(148,163,184,.65);
}

.side-step-tab.is-active::after {
  background: #09090b;
}

.side-step-tab:not(:disabled)::after {
  box-shadow: 0 0 0 3px rgba(242,140,18,.13);
}

#pageEditor .btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none !important;
}

/* Helper empty-state canvas remains premium and compact */
#pageEditor .editor-main-layout {
  transition: grid-template-columns .18s ease;
}

.side-step-tab.has-upload::after { background: #f28c12; }
.side-step-tab.has-corners::after { background: #28b8ff; }
.side-step-tab.has-guides::after { background: #36db78; }
.side-step-tab.is-active::after { background: #09090b; }


/* UI cleanup: remove the old hero gap and keep the app compact after header */
.app-shell {
  margin-top: 8px;
}

.step-progress.kc-stepper,
.step-progress {
  margin-top: 10px;
  margin-bottom: 8px;
}

/* Stepper connectors: show only in gaps, never through the buttons */
.step-progress.kc-stepper::before,
.step-progress::before {
  display: none !important;
}

.step-progress .step-pill::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  width: clamp(24px, 5vw, 72px);
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(242,140,18,.45), rgba(242,140,18,.22));
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
}

.step-progress .step-pill:first-child::before {
  display: none;
}

.step-progress .step-pill.is-active::before,
.step-progress .step-pill.is-complete::before {
  background: linear-gradient(90deg, rgba(242,140,18,.72), rgba(242,140,18,.48));
}

@media (max-width: 720px) {
  .step-progress .step-pill::before {
    display: none;
  }
}

/* Bigger canvas: about 2/3 of workspace; right panel about 1/3 */
@media (min-width: 901px) {
  #pageEditor .editor-main-layout {
    max-width: 1380px !important;
    grid-template-columns: minmax(640px, 2fr) minmax(340px, 1fr) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: stretch;
  }

  #pageEditor .editor-stage {
    max-width: none !important;
    width: 100%;
    padding: 8px !important;
  }

  #pageEditor .canvas-wrap {
    min-height: 0;
    width: 100%;
    padding: 8px !important;
  }

  #pageEditor #canvas {
    width: min(100%, 760px) !important;
    height: auto !important;
    max-height: calc(100svh - 260px);
  }

  #pageEditor .editor-side-column {
    max-height: calc(100svh - 210px);
    overflow: visible;
    align-content: start;
  }
}

/* Border Measurement / Guides right panel redesign */
@media (min-width: 901px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "controls"
      "centering"
      "grades";
    gap: 10px !important;
    width: 100%;
  }

  #pageEditor .guide-insights .live-adjustments-panel { grid-area: controls; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades; }

  #pageEditor .guide-insights .panel-block,
  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  #pageEditor .guide-insights .edge-by-side-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  #pageEditor .guide-insights .edge-side-card {
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  #pageEditor .guide-insights .edge-side-card h4 {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
  }

  #pageEditor .guide-insights .edge-side-grid {
    display: grid !important;
    gap: 8px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    display: grid !important;
    grid-template-columns: 44px minmax(120px, 1fr) 78px 24px !important;
    gap: 8px !important;
    align-items: center !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row label {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 78px !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    text-align: center;
    font-size: 12px !important;
    font-weight: 800;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 24px !important;
    min-width: 24px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
    width: 100% !important;
    height: 16px !important;
    accent-color: var(--orange);
    cursor: pointer;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-runnable-track {
    height: 9px;
    border-radius: 999px;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -6px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(242,140,18,.28);
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-track {
    height: 9px;
    border-radius: 999px;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(242,140,18,.28);
  }

  /* Centering card: compact, clean, aligned */
  #pageEditor .guide-insights .live-centering-panel h3,
  #pageEditor .guide-insights .live-grades-panel h3 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 900;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 165px !important;
    width: min(100%, 230px) !important;
    max-width: 230px !important;
  }

  #pageEditor .guide-insights .quadrant-label {
    font-size: 13px !important;
    line-height: 1 !important;
  }

  #pageEditor .guide-insights .quadrant-mm,
  #pageEditor .guide-insights .quadrant-pct {
    font-size: 12px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
  }

  #pageEditor .guide-insights .centering-quadrant {
    gap: 5px !important;
  }

  /* Grade Estimates card: fixed alignment, equal cells */
  #pageEditor .guide-insights .live-grades-panel {
    overflow: hidden;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-head {
    display: block !important;
    text-align: center;
    margin-bottom: 8px !important;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-icon {
    display: none !important;
  }

  #pageEditor .guide-insights .grade-panel-subtitle {
    display: block !important;
    margin: 4px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: var(--muted);
    text-align: center;
  }

  #pageEditor .guide-insights .live-grades-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch;
    justify-items: stretch;
  }

  #pageEditor .guide-insights .live-grades-list > div {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 5px !important;
    border-radius: 12px !important;
    text-align: center !important;
    display: grid !important;
    gap: 4px !important;
    place-items: center !important;
    line-height: 1.05 !important;
    white-space: normal !important;
    overflow: hidden;
  }
}

/* Turn grade "PSA: 10" markup into a clean two-row cell even if JS emits text. */
#pageEditor .live-grades-list > div {
  font-variant-numeric: tabular-nums;
}

/* Better upload front next button spacing */
#pageUploadFront .center-actions,
#pageUploadBack .center-actions {
  margin-top: 18px;
}

/* Remove extra gap after deleting brand header */
.main-shell .brand-header + .step-progress {
  margin-top: 0;
}

/* Mobile keeps controls tap-friendly */
@media (max-width: 900px) {
  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 48px minmax(130px, 1fr) 76px 24px !important;
    gap: 8px !important;
    align-items: center;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 76px !important;
  }

  #pageEditor .guide-insights .live-grades-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

#pageEditor .guide-insights .live-grades-list .grade-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  min-width: 0 !important;
  padding: 8px 5px !important;
  border-radius: 12px !important;
  display: grid !important;
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

#pageEditor .guide-insights .live-grades-list .grade-pill-label {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .01em;
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
}

#pageEditor .guide-insights .live-grades-list .grade-pill-value {
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em;
}


/* 50/50 editor workspace: balanced columns without stretching the canvas */
@media (min-width: 901px) {
  #pageEditor .editor-main-layout {
    width: min(100%, 1240px) !important;
    max-width: 1240px !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(16px, 2vw, 24px) !important;
    align-items: start !important;
    justify-content: center !important;
  }

  #pageEditor .editor-stage {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    justify-items: center !important;
    padding: 10px !important;
  }

  #pageEditor .canvas-wrap {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    overflow: hidden !important;
  }

  /*
    Keep the canvas proportional. Do not force both width and height.
    The canvas element has intrinsic dimensions from JS; CSS should only fit it
    inside the left column while preserving that intrinsic aspect ratio.
  */
  #pageEditor #canvas {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 560px) !important;
    max-height: calc(100svh - 285px) !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  #pageEditor .editor-side-column {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    max-height: calc(100svh - 210px);
    overflow: visible;
  }

  /* Right panel remains efficient in the 50% column */
  #pageEditor .guide-insights:not(.hidden) {
    width: 100% !important;
    max-width: none !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 48px minmax(150px, 1fr) 80px 26px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 80px !important;
  }

  #pageEditor .align-preview-panel,
  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    width: 100% !important;
  }
}

/* On smaller laptops, keep 50/50 but reduce canvas max size to avoid vertical overflow */
@media (min-width: 901px) and (max-height: 760px) {
  #pageEditor #canvas {
    max-width: min(100%, 510px) !important;
    max-height: calc(100svh - 255px) !important;
  }

  #pageEditor .editor-main-layout {
    max-width: 1160px !important;
  }
}

/* Tablet can keep two columns if there is enough width; otherwise stack cleanly */
@media (min-width: 721px) and (max-width: 900px) {
  #pageEditor .editor-main-layout {
    grid-template-columns: 1fr !important;
    max-width: 720px !important;
  }

  #pageEditor #canvas {
    width: auto !important;
    height: auto !important;
    max-width: min(100%, 560px) !important;
    object-fit: contain !important;
  }
}

/* Mobile stacks and preserves the canvas ratio */
@media (max-width: 720px) {
  #pageEditor #canvas {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
}

/* Guides / Border Measurement: compact two-column right panel inside the 50/50 layout */
@media (min-width: 901px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "controls centering"
      "controls grades" !important;
    gap: 10px !important;
    align-items: start !important;
    align-content: start !important;
    width: 100% !important;
    max-height: calc(100svh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
  }

  #pageEditor .guide-insights .live-adjustments-panel {
    grid-area: controls !important;
    align-self: stretch !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-centering-panel {
    grid-area: centering !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-panel {
    grid-area: grades !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .panel-block,
  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    padding: 8px 9px !important;
    border-radius: 16px !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-by-side-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card {
    padding: 8px 9px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card h4 {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
  }

  #pageEditor .guide-insights .edge-side-grid {
    display: grid !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    display: grid !important;
    grid-template-columns: 38px minmax(95px, 1fr) 64px 22px !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row label {
    margin: 0 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
    width: 100% !important;
    min-width: 92px !important;
    height: 14px !important;
    accent-color: var(--orange);
    cursor: pointer;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-runnable-track {
    height: 8px !important;
    border-radius: 999px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-top: -6px !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 12px rgba(242,140,18,.28) !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-track {
    height: 8px !important;
    border-radius: 999px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 12px rgba(242,140,18,.28) !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 64px !important;
    max-width: 64px !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 6px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 22px !important;
    min-width: 22px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pageEditor .guide-insights .live-centering-panel h3,
  #pageEditor .guide-insights .live-grades-panel h3 {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 132px !important;
    width: min(100%, 188px) !important;
    max-width: 188px !important;
    margin: 0 auto !important;
  }

  #pageEditor .guide-insights .cross-line-vertical {
    width: 1.5px !important;
    height: 62% !important;
    top: 19% !important;
  }

  #pageEditor .guide-insights .cross-line-horizontal {
    height: 1.5px !important;
    width: 62% !important;
    left: 19% !important;
  }

  #pageEditor .guide-insights .centering-quadrant {
    gap: 3px !important;
  }

  #pageEditor .guide-insights .quadrant-left,
  #pageEditor .guide-insights .quadrant-right {
    top: 8% !important;
  }

  #pageEditor .guide-insights .quadrant-top,
  #pageEditor .guide-insights .quadrant-bottom {
    bottom: 11% !important;
  }

  #pageEditor .guide-insights .quadrant-label {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #pageEditor .guide-insights .quadrant-mm,
  #pageEditor .guide-insights .quadrant-pct {
    font-size: 10px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  #pageEditor .guide-insights .live-grades-panel {
    overflow: hidden !important;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-head {
    display: block !important;
    text-align: center !important;
    margin: 0 0 7px !important;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-icon {
    display: none !important;
  }

  #pageEditor .guide-insights .grade-panel-subtitle {
    display: block !important;
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
    text-align: center !important;
  }

  #pageEditor .guide-insights .live-grades-list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 3px !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-rows: 12px 18px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

/* If the right 50% column gets narrower, keep a two-column feel but make grade cells smaller */
@media (min-width: 901px) and (max-width: 1160px) {
  #pageEditor .guide-insights:not(.hidden) {
    grid-template-columns: minmax(0, 1fr) minmax(0, .84fr) !important;
    gap: 8px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 34px minmax(82px, 1fr) 58px 20px !important;
    gap: 5px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 58px !important;
    max-width: 58px !important;
    font-size: 10px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 20px !important;
    min-width: 20px !important;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 118px !important;
    max-width: 168px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    gap: 4px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    padding: 5px 2px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 8.5px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 12px !important;
  }
}

/* Tablet: stack controls then place Centering / Grades side-by-side */
@media (min-width: 721px) and (max-width: 900px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "controls controls"
      "centering grades" !important;
    gap: 10px !important;
  }

  #pageEditor .guide-insights .live-adjustments-panel { grid-area: controls !important; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering !important; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades !important; }
}

/* Mobile: natural stack order */
@media (max-width: 720px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "controls"
      "centering"
      "grades" !important;
    gap: 10px !important;
  }

  #pageEditor .guide-insights .live-adjustments-panel { grid-area: controls !important; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering !important; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades !important; }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 42px minmax(100px, 1fr) 64px 22px !important;
  }
}

/* Guides right-side panel: 2-column / 3-row reference layout
   Row 1: Top | Bottom
   Row 2: Left | Right
   Row 3: Centering | Grade Estimates
*/
@media (min-width: 901px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "top bottom"
      "left right"
      "centering grades" !important;
    gap: 10px !important;
    align-items: stretch !important;
    align-content: start !important;
    width: 100% !important;
    max-height: calc(100svh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
  }

  #pageEditor .guide-insights .live-adjustments-panel {
    display: contents !important;
  }

  #pageEditor .guide-insights .edge-by-side-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .top-side-card {
    grid-area: top !important;
  }

  #pageEditor .guide-insights .bottom-side-card {
    grid-area: bottom !important;
  }

  #pageEditor .guide-insights .left-side-card {
    grid-area: left !important;
  }

  #pageEditor .guide-insights .right-side-card {
    grid-area: right !important;
  }

  #pageEditor .guide-insights .live-centering-panel {
    grid-area: centering !important;
  }

  #pageEditor .guide-insights .live-grades-panel {
    grid-area: grades !important;
  }

  #pageEditor .guide-insights .edge-side-card,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    min-width: 0 !important;
    height: 100% !important;
    padding: 9px 10px !important;
    border-radius: 16px !important;
  }

  #pageEditor .guide-insights .edge-side-card h4 {
    margin: 0 0 7px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
  }

  #pageEditor .guide-insights .edge-side-grid {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    display: grid !important;
    grid-template-columns: 38px minmax(84px, 1fr) 58px 22px !important;
    gap: 6px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row label {
    margin: 0 !important;
    min-width: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
    width: 100% !important;
    min-width: 78px !important;
    height: 14px !important;
    accent-color: var(--orange);
    cursor: pointer;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 58px !important;
    max-width: 58px !important;
    min-width: 0 !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 3px 5px !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 22px !important;
    min-width: 22px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-runnable-track {
    height: 8px !important;
    border-radius: 999px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-thumb {
    width: 20px !important;
    height: 20px !important;
    margin-top: -6px !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 12px rgba(242,140,18,.28) !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-track {
    height: 8px !important;
    border-radius: 999px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 12px rgba(242,140,18,.28) !important;
  }

  /* Bottom row result cards */
  #pageEditor .guide-insights .live-centering-panel h3,
  #pageEditor .guide-insights .live-grades-panel h3 {
    margin: 0 0 6px !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 128px !important;
    width: min(100%, 184px) !important;
    max-width: 184px !important;
    margin: 0 auto !important;
  }

  #pageEditor .guide-insights .cross-line-vertical {
    width: 1.5px !important;
    height: 62% !important;
    top: 19% !important;
  }

  #pageEditor .guide-insights .cross-line-horizontal {
    height: 1.5px !important;
    width: 62% !important;
    left: 19% !important;
  }

  #pageEditor .guide-insights .centering-quadrant {
    gap: 3px !important;
  }

  #pageEditor .guide-insights .quadrant-left,
  #pageEditor .guide-insights .quadrant-right {
    top: 8% !important;
  }

  #pageEditor .guide-insights .quadrant-top,
  #pageEditor .guide-insights .quadrant-bottom {
    bottom: 11% !important;
  }

  #pageEditor .guide-insights .quadrant-label {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #pageEditor .guide-insights .quadrant-mm,
  #pageEditor .guide-insights .quadrant-pct {
    font-size: 10px !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
  }

  #pageEditor .guide-insights .live-grades-panel {
    overflow: hidden !important;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-head {
    display: block !important;
    text-align: center !important;
    margin: 0 0 7px !important;
  }

  #pageEditor .guide-insights .live-grades-panel .metrics-panel-icon {
    display: none !important;
  }

  #pageEditor .guide-insights .grade-panel-subtitle {
    display: block !important;
    margin: 3px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
    text-align: center !important;
  }

  #pageEditor .guide-insights .live-grades-list {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    min-width: 0 !important;
    width: 100% !important;
    padding: 6px 3px !important;
    border-radius: 10px !important;
    display: grid !important;
    grid-template-rows: 12px 18px !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 3px !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 9px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    letter-spacing: -0.035em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }
}

/* Narrow desktop: keep same 2-column / 3-row structure, shrink controls slightly */
@media (min-width: 901px) and (max-width: 1160px) {
  #pageEditor .guide-insights:not(.hidden) {
    gap: 8px !important;
  }

  #pageEditor .guide-insights .edge-side-card,
  #pageEditor .guide-insights .live-centering-panel,
  #pageEditor .guide-insights .live-grades-panel {
    padding: 8px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 34px minmax(70px, 1fr) 52px 20px !important;
    gap: 5px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 52px !important;
    max-width: 52px !important;
    font-size: 10px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 20px !important;
    min-width: 20px !important;
  }

  #pageEditor .guide-insights .centering-cross {
    min-height: 116px !important;
    max-width: 164px !important;
  }
}

/* Tablet can keep the same reference grid if space allows */
@media (min-width: 721px) and (max-width: 900px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "top bottom"
      "left right"
      "centering grades" !important;
    gap: 10px !important;
  }

  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .edge-by-side-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .top-side-card { grid-area: top !important; }
  #pageEditor .guide-insights .bottom-side-card { grid-area: bottom !important; }
  #pageEditor .guide-insights .left-side-card { grid-area: left !important; }
  #pageEditor .guide-insights .right-side-card { grid-area: right !important; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering !important; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades !important; }
}

/* Mobile stacks cards in the intended reading order */
@media (max-width: 720px) {
  #pageEditor .guide-insights:not(.hidden) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "top"
      "bottom"
      "left"
      "right"
      "centering"
      "grades" !important;
    gap: 10px !important;
  }

  #pageEditor .guide-insights .live-adjustments-panel,
  #pageEditor .guide-insights .edge-by-side-wrap {
    display: contents !important;
  }

  #pageEditor .guide-insights .top-side-card { grid-area: top !important; }
  #pageEditor .guide-insights .bottom-side-card { grid-area: bottom !important; }
  #pageEditor .guide-insights .left-side-card { grid-area: left !important; }
  #pageEditor .guide-insights .right-side-card { grid-area: right !important; }
  #pageEditor .guide-insights .live-centering-panel { grid-area: centering !important; }
  #pageEditor .guide-insights .live-grades-panel { grid-area: grades !important; }
}

/* Corners page: larger live Preview while keeping card aspect ratio */
@media (min-width: 901px) {
  #pageEditor .align-preview-panel {
    padding: 12px 14px !important;
  }

  #pageEditor .align-preview-wrap {
    padding: 10px 0 8px !important;
  }

  #pageEditor #alignPreviewCanvas {
    width: min(100%, 285px) !important;
    height: auto !important;
    aspect-ratio: 63 / 88 !important;
    object-fit: contain !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  #pageEditor #alignPreviewCanvas {
    width: min(100%, 245px) !important;
  }
}

/* Guides panel refinements: consistent headings, equal slider rows, aligned grades */
@media (min-width: 901px) {
  #pageEditor .guide-insights .live-centering-panel h3,
  #pageEditor .guide-insights .live-grades-panel h3 {
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
  }

  #pageEditor .guide-insights .edge-side-card h4 {
    font-size: 13px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-row {
    grid-template-columns: 44px minmax(120px, 1fr) 56px 28px !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input {
    width: 56px !important;
    max-width: 56px !important;
    text-align: center !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
    width: 28px !important;
    min-width: 28px !important;
  }

  #pageEditor .guide-insights .live-grades-list,
  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    min-width: 0 !important;
    height: 48px !important;
    padding: 6px 3px !important;
    display: grid !important;
    grid-template-rows: 12px 18px !important;
    place-items: center !important;
    overflow: hidden !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 9px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* Back upload Skip/Next row */
#pageUploadBack .center-actions {
  gap: 12px;
}

/* Final UI polish: actions placement, compact preview, full-row sliders, grade spacing, centering fill, smaller result images */

/* 1. Keep action rows directly under each step card/content, not floating/sticky */
.page-actions,
.editor-actions,
.center-actions,
.result-actions {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  width: auto !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#pageEditor .editor-actions {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: auto;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 12px !important;
}

#pageEditor.step-page {
  padding-bottom: 16px !important;
}

/* 2. Corners Preview: smaller and balanced, still useful and proportional */
#pageEditor .align-preview-panel {
  padding: 10px 12px !important;
}

#pageEditor .align-preview-wrap {
  padding: 6px 0 4px !important;
}

#pageEditor #alignPreviewCanvas {
  width: min(100%, 188px) !important;
  height: auto !important;
  aspect-ratio: 63 / 88 !important;
  object-fit: contain !important;
}

#pageEditor .align-preview-note {
  margin-top: 6px !important;
  font-size: 11px !important;
}

#pageEditor .align-preview-controls {
  margin-top: 10px !important;
  gap: 9px !important;
}

@media (min-width: 901px) and (max-height: 760px) {
  #pageEditor #alignPreviewCanvas {
    width: min(100%, 160px) !important;
  }
}

/* 3. Guides controls: label/input/reset on first row, full-width slider on second row */
#pageEditor .guide-insights .edge-side-card .edge-adjust-row {
  display: grid !important;
  grid-template-columns: minmax(42px, auto) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "label input"
    "slider slider" !important;
  gap: 7px 8px !important;
  align-items: center !important;
  min-width: 0 !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-row > label {
  grid-area: label !important;
  margin: 0 !important;
  align-self: center !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
  grid-area: slider !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 16px !important;
  margin: 0 !important;
  align-self: center !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
  grid-area: input !important;
  display: grid !important;
  grid-template-columns: 58px 26px !important;
  gap: 5px !important;
  justify-content: end !important;
  justify-self: end !important;
  align-items: center !important;
  min-width: 0 !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-input {
  width: 58px !important;
  max-width: 58px !important;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 3px 6px !important;
  border-radius: 10px !important;
  text-align: center !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  font-variant-numeric: tabular-nums;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-reset {
  width: 26px !important;
  min-width: 26px !important;
  height: 30px !important;
  border-radius: 9px !important;
  font-size: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-runnable-track {
  height: 8px !important;
  border-radius: 999px !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  margin-top: -6px !important;
  border-radius: 999px !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-track {
  height: 8px !important;
  border-radius: 999px !important;
}

#pageEditor .guide-insights .edge-side-card .edge-adjust-slider::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
}

/* 4. Grade Estimates: clearer vertical spacing between label and value */
#pageEditor .guide-insights .live-grades-list .grade-pill-grid,
.result-grades-list .grade-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-card,
.result-grades-list .grade-pill-card {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
  padding: 7px 4px !important;
  overflow: hidden !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-label,
.result-grades-list .grade-pill-label {
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-value,
.result-grades-list .grade-pill-value {
  margin-top: 2px !important;
  min-height: 26px !important;
  padding: 5px 6px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-value.grade-red,
.result-grades-list .grade-pill-value.grade-red {
  margin-top: 3px !important;
}

/* 5. Live Centering panel fills its card and balances with Grade Estimates */
#pageEditor .guide-insights .live-centering-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: stretch !important;
  justify-items: center !important;
  min-height: 180px !important;
}

#pageEditor .guide-insights .live-centering-panel h3 {
  width: 100%;
  margin-bottom: 6px !important;
}

#pageEditor .guide-insights .centering-cross {
  align-self: stretch !important;
  min-height: 150px !important;
  height: 100% !important;
  width: min(100%, 200px) !important;
  max-width: 200px !important;
  margin: 0 auto !important;
}

#pageEditor .guide-insights .live-grades-panel {
  min-height: 180px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  align-items: start !important;
}

/* 6. Result page: make visual card previews about 50% smaller without changing export canvas generation */
.result-preview-grid {
  justify-items: center !important;
  align-items: start !important;
}

.preview-card {
  width: 100% !important;
}

.result-preview-image {
  width: 50% !important;
  max-width: 260px !important;
  min-width: 140px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 14px !important;
  aspect-ratio: 63 / 88 !important;
  object-fit: contain !important;
  cursor: zoom-in;
}

@media (max-width: 720px) {
  .result-preview-image {
    width: 58% !important;
    max-width: 220px !important;
  }

  #pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
    grid-template-columns: 60px 28px !important;
  }
}

/* Result/Summary: grades belong under centering-mini */
.result-side-meta {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-height: 0 !important;
}

.result-grades-list {
  width: 100% !important;
  margin-top: 0 !important;
  text-align: center !important;
  justify-items: stretch !important;
  align-self: stretch !important;
}

/* Grade pills: taller, equal, no overlap */
.grade-pill-grid,
.result-grades-list .grade-pill-grid,
#pageEditor .guide-insights .live-grades-list .grade-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
}

.grade-pill-card,
.result-grades-list .grade-pill-card,
#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  min-height: 66px !important;
  height: 66px !important;
  display: grid !important;
  grid-template-rows: 16px 34px !important;
  gap: 8px !important;
  place-items: center !important;
  padding: 8px 5px !important;
  overflow: hidden !important;
}

.grade-pill-label,
.result-grades-list .grade-pill-label,
#pageEditor .guide-insights .live-grades-list .grade-pill-label {
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.grade-pill-value,
.result-grades-list .grade-pill-value,
#pageEditor .guide-insights .live-grades-list .grade-pill-value {
  min-height: 32px !important;
  height: 32px !important;
  padding: 6px 6px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.grade-pill-value.grade-red,
.result-grades-list .grade-pill-value.grade-red,
#pageEditor .guide-insights .live-grades-list .grade-pill-value.grade-red {
  margin-top: 2px !important;
}

/* More gap above editor Back / Next buttons */
#pageEditor .editor-actions {
  margin-top: 22px !important;
}

#pageEditor .editor-stage {
  margin-bottom: 4px !important;
}

/* Slider limits are controlled by JS; keep disabled/limited edge rows visibly stable */
.edge-adjust-slider:disabled,
.edge-adjust-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Requested polish: editor action gap, taller grades, larger centering text, dark active step, compact stepper */
#pageEditor .editor-actions {
  margin-top: 30px !important;
}

#pageEditor .editor-stage {
  margin-bottom: 8px !important;
}

/* Taller grade cards everywhere they are used */
.grade-pill-card,
.result-grades-list .grade-pill-card,
#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  min-height: 76px !important;
  height: 76px !important;
  grid-template-rows: 18px 40px !important;
  gap: 10px !important;
  padding: 10px 6px !important;
  align-items: center !important;
  justify-items: center !important;
}

.grade-pill-label,
.result-grades-list .grade-pill-label,
#pageEditor .guide-insights .live-grades-list .grade-pill-label {
  font-size: 10.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.grade-pill-value,
.result-grades-list .grade-pill-value,
#pageEditor .guide-insights .live-grades-list .grade-pill-value {
  min-height: 36px !important;
  height: 36px !important;
  padding: 7px 7px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.grade-pill-value.grade-red,
.result-grades-list .grade-pill-value.grade-red,
#pageEditor .guide-insights .live-grades-list .grade-pill-value.grade-red {
  margin-top: 3px !important;
}

/* Slightly larger, easier-to-read live Centering panel */
#pageEditor .guide-insights .live-centering-panel h3 {
  font-size: 15px !important;
}

#pageEditor .guide-insights .quadrant-label {
  font-size: 12px !important;
}

#pageEditor .guide-insights .quadrant-mm,
#pageEditor .guide-insights .quadrant-pct {
  font-size: 11.5px !important;
}

#pageEditor .guide-insights .centering-cross {
  min-height: 158px !important;
  max-width: 205px !important;
}

/* Dark mode active step: orange with readable text */
html[data-theme="dark"] .step-progress .step-pill.is-active {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  border-color: rgba(245,154,46, .72) !important;
  color: #fffaf0 !important;
  box-shadow: 0 18px 38px rgba(242, 140, 18, .25) !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active strong {
  color: #fffaf0 !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active span {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fffaf0 !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-complete {
  color: #f8fafc !important;
}

html[data-theme="dark"] .step-progress .step-pill:not(.is-active):not(.is-complete) {
  color: #cbd5e1 !important;
}

/* Stepper compactness without connector overlap */
.step-progress.kc-stepper,
.step-progress {
  gap: 4px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.step-progress .step-pill {
  max-width: 150px !important;
  min-height: 40px !important;
  padding-left: 11px !important;
  padding-right: 11px !important;
}

.step-progress .step-pill::before {
  right: calc(100% + 4px) !important;
  width: clamp(14px, 3.5vw, 42px) !important;
}

/* Guide sliders: keep safe clamped UI stable */
.edge-adjust-slider {
  min-width: 0 !important;
}

.edge-adjust-input {
  font-variant-numeric: tabular-nums;
}

/* Targeted polish: compact centered stepper */
.step-progress.kc-stepper,
.step-progress {
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: repeat(4, minmax(0, 138px)) !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 8px 10px !important;
}

.step-progress .step-pill {
  width: 136px !important;
  max-width: 136px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  gap: 7px !important;
}

.step-progress .step-pill::before {
  right: calc(100% + 3px) !important;
  width: 22px !important;
}

.step-progress .step-pill strong {
  font-size: 12px !important;
}

.step-progress .step-pill span {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

@media (max-width: 720px) {
  .step-progress.kc-stepper,
  .step-progress {
    width: min(100%, 390px) !important;
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    gap: 5px !important;
    justify-content: center !important;
  }

  .step-progress .step-pill {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 7px 7px !important;
  }

  .step-progress .step-pill::before {
    display: none !important;
  }
}

/* Stable slider visuals: thumb position is based only on its own value */
#pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
  width: 100% !important;
  min-width: 0 !important;
}

/* Increase grade-pill-grid size/spacing while keeping it compact and aligned */
.grade-pill-grid,
.result-grades-list .grade-pill-grid,
#pageEditor .guide-insights .live-grades-list .grade-pill-grid {
  gap: 10px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.grade-pill-card,
.result-grades-list .grade-pill-card,
#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  min-height: 84px !important;
  height: 84px !important;
  padding: 11px 7px !important;
  grid-template-rows: 20px 42px !important;
  gap: 11px !important;
  border-radius: 13px !important;
}

.grade-pill-label,
.result-grades-list .grade-pill-label,
#pageEditor .guide-insights .live-grades-list .grade-pill-label {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

.grade-pill-value,
.result-grades-list .grade-pill-value,
#pageEditor .guide-insights .live-grades-list .grade-pill-value {
  min-height: 38px !important;
  height: 38px !important;
  padding: 8px 8px !important;
  font-size: 15.5px !important;
  line-height: 1 !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  min-height: 78px !important;
  height: 78px !important;
  padding: 9px 5px !important;
  gap: 9px !important;
}

#pageEditor .guide-insights .live-grades-list .grade-pill-grid {
  gap: 7px !important;
}

@media (max-width: 1160px) and (min-width: 901px) {
  #pageEditor .guide-insights .live-grades-list .grade-pill-grid {
    gap: 5px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    min-height: 72px !important;
    height: 72px !important;
    padding: 8px 4px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 9.5px !important;
  }

  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 13.5px !important;
    min-height: 34px !important;
    height: 34px !important;
  }
}

/* Final 4-step visual stepper: button - button - button - button */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 132px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

.step-progress.card.kc-stepper::before,
.step-progress.kc-stepper::before,
.step-progress::before {
  display: none !important;
}

.step-progress .step-pill {
  position: relative !important;
  width: 132px !important;
  max-width: 132px !important;
  min-width: 132px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 7px !important;
  border-radius: 999px !important;
  z-index: 2 !important;
}

.step-progress .step-pill::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 3px) !important;
  width: 12px !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(242,140,18,.60), rgba(242,140,18,.35)) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.step-progress .step-pill:first-child::before {
  display: none !important;
}

.step-progress .step-pill span {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 11px !important;
}

.step-progress .step-pill strong {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Dark mode readable active step */
html[data-theme="dark"] .step-progress .step-pill.is-active {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  border-color: rgba(245,154,46, .75) !important;
  color: #fffaf0 !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active strong,
html[data-theme="dark"] .step-progress .step-pill.is-active span {
  color: #fffaf0 !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active span {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.28) !important;
}

html[data-theme="dark"] .step-progress .step-pill:not(.is-active) {
  color: #e2e8f0 !important;
}

/* Positive user-facing guide inputs: keep them compact and hide browser spin clutter */
.edge-adjust-input {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.edge-adjust-input::-webkit-outer-spin-button,
.edge-adjust-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edge-adjust-input[type="number"] {
  -moz-appearance: textfield;
}

@media (max-width: 720px) {
  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress {
    width: min(100%, 390px) !important;
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .step-progress .step-pill {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 7px 6px !important;
    gap: 5px !important;
  }

  .step-progress .step-pill::before {
    display: none !important;
  }

  .step-progress .step-pill strong {
    font-size: 11px !important;
  }
}

/* Stable 4-button stepper: Upload - Corners - Guides - Result */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 132px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

.step-progress.card.kc-stepper::before,
.step-progress.kc-stepper::before,
.step-progress::before {
  display: none !important;
}

.step-progress .step-pill {
  position: relative !important;
  width: 132px !important;
  max-width: 132px !important;
  min-width: 132px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  gap: 7px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  border-radius: 999px !important;
  z-index: 2 !important;
  transform: none;
}

.step-progress .step-pill::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 3px) !important;
  width: 12px !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(242,140,18,.60), rgba(242,140,18,.35)) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.step-progress .step-pill:first-child::before {
  display: none !important;
}

.step-progress .step-pill span {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 11px !important;
}

.step-progress .step-pill strong {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  color: #fffaf0 !important;
  border-color: rgba(245,154,46,.75) !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active span,
html[data-theme="dark"] .step-progress .step-pill.is-active strong {
  color: #fffaf0 !important;
}

/* HQ rendering defaults */
canvas,
.result-preview-image,
.preview-zoom-frame img,
#alignPreviewCanvas {
  image-rendering: auto;
}

/* Theme-aware Summary/preview zoom */
.preview-zoom-modal {
  background: color-mix(in srgb, var(--bg) 82%, rgba(0,0,0,.72)) !important;
}

.preview-zoom-frame {
  background: color-mix(in srgb, var(--surface-2) 94%, transparent) !important;
}

.preview-zoom-frame img {
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
}

html[data-theme="dark"] .preview-zoom-modal {
  background: rgba(2,6,23,.84) !important;
}

html[data-theme="dark"] .preview-zoom-frame {
  background: rgba(15,18,24,.94) !important;
}

html[data-theme="dark"] .preview-zoom-frame img {
  background: rgba(15,18,24,.92) !important;
}

/* Positive center-based slider scale: 50 is default/neutral */
#pageEditor .guide-insights .edge-side-card .edge-adjust-slider {
  accent-color: var(--orange) !important;
}

.edge-adjust-input {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.edge-adjust-input::-webkit-outer-spin-button,
.edge-adjust-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edge-adjust-input[type="number"] {
  -moz-appearance: textfield;
}

@media (max-width: 720px) {
  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress {
    width: min(100%, 390px) !important;
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .step-progress .step-pill {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 7px 6px !important;
  }

  .step-progress .step-pill::before {
    display: none !important;
  }

  .step-progress .step-pill strong {
    font-size: 11px !important;
  }
}

/* Card Alignment intro + corner placement example */
#editorIntro {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
}

.editor-example-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--orange);
  font: inherit;
  font-weight: 700;
  padding: 0 0 0 4px;
  cursor: pointer;
  text-decoration: none;
}

.editor-example-link:hover,
.editor-example-link:focus-visible {
  text-decoration: underline;
  outline: none;
}

.corner-example-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 38px);
  background: rgba(2, 6, 23, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.corner-example-modal.hidden {
  display: none !important;
}

.corner-example-panel {
  width: min(96vw, 1160px);
  max-height: 94vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid color-mix(in srgb, var(--orange) 28%, var(--border));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}

.corner-example-copy {
  text-align: center;
}

.corner-example-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.corner-example-help {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.corner-example-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(94vh - 128px);
  margin: 0 auto;
  object-fit: contain;
  border-radius: 16px;
  image-rendering: auto;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
}

.corner-example-close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 1201;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--orange) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.corner-example-close:hover,
.corner-example-close:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid color-mix(in srgb, var(--orange) 58%, transparent);
  outline-offset: 2px;
}

html[data-theme="dark"] .corner-example-modal {
  background: rgba(2, 6, 23, 0.90);
}

html[data-theme="dark"] .corner-example-panel,
html[data-theme="dark"] .corner-example-close {
  background: rgba(15, 18, 24, 0.94);
}

/* Stable compact 4-button stepper: no underline/dot artifacts, no connector overlap */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 132px) !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 8px 10px !important;
  overflow: visible !important;
}

.step-progress.card.kc-stepper::before,
.step-progress.kc-stepper::before,
.step-progress::before {
  display: none !important;
}

.step-progress .step-pill,
.step-progress .step-pill:focus,
.step-progress .step-pill:active,
.step-progress .step-pill:hover {
  position: relative !important;
  width: 132px !important;
  max-width: 132px !important;
  min-width: 132px !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transform: none !important;
  z-index: 2 !important;
  outline-offset: 3px !important;
}

.step-progress .step-pill::after {
  display: none !important;
  content: none !important;
}

.step-progress .step-pill::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 3px) !important;
  width: 12px !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(242,140,18,.60), rgba(242,140,18,.35)) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.step-progress .step-pill:first-child::before {
  display: none !important;
}

.step-progress .step-pill span {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  font-size: 11px !important;
  text-decoration: none !important;
}

.step-progress .step-pill strong {
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  color: #fffaf0 !important;
  border-color: rgba(245,154,46,.75) !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active span,
html[data-theme="dark"] .step-progress .step-pill.is-active strong {
  color: #fffaf0 !important;
}

/* Border Measurement input controls: premium custom +/- around positive 0-200 field */
#pageEditor .guide-insights .edge-side-card .edge-adjust-input-wrap {
  grid-template-columns: 24px 58px 24px 26px !important;
  gap: 4px !important;
}

.edge-adjust-step {
  width: 24px;
  min-width: 24px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.edge-adjust-step:hover,
.edge-adjust-step:focus-visible {
  border-color: rgba(242,140,18,.55);
  color: var(--orange);
  outline: none;
}

.edge-adjust-input {
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}

.edge-adjust-input::-webkit-outer-spin-button,
.edge-adjust-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edge-adjust-input[type="number"] {
  -moz-appearance: textfield;
}

@media (max-width: 720px) {
  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress {
    width: min(100%, 390px) !important;
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .step-progress .step-pill,
  .step-progress .step-pill:focus,
  .step-progress .step-pill:active,
  .step-progress .step-pill:hover {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 7px 6px !important;
  }

  .step-progress .step-pill::before {
    display: none !important;
  }

  .step-progress .step-pill strong {
    font-size: 11px !important;
  }
}

/* Alignment grid toggle */
.align-grid-toggle {
  justify-self: center;
  margin: 10px auto 0;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}

.align-grid-toggle:hover,
.align-grid-toggle:focus-visible,
.align-grid-toggle[aria-pressed="true"] {
  border-color: rgba(242,140,18,.62);
  background: color-mix(in srgb, var(--orange) 18%, var(--surface));
}

/* Front/Back status dots: green = completed/ready, gray = incomplete. Active state is pill styling only. */
.side-step-tab::after {
  background: #94a3b8 !important;
  box-shadow: none !important;
}

.side-step-tab.has-upload::after,
.side-step-tab.has-corners::after,
.side-step-tab.has-guides::after {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.14) !important;
}

.side-step-tab.is-active::after {
  /* Do not use active state to recolor the status dot. */
  background: #94a3b8 !important;
}

.side-step-tab.is-active.has-upload::after,
.side-step-tab.is-active.has-corners::after,
.side-step-tab.is-active.has-guides::after {
  background: #22c55e !important;
}

/* Hint update spacing */
.editor-measurement-hint {
  line-height: 1.45;
}

/* Border Measurement custom +/- buttons step 0.5 with 0-200 UI */
.edge-adjust-step {
  user-select: none;
}

/* Final requested UI adjustments */
#alignGridToggle,
.align-grid-toggle {
  display: none !important;
}

.editor-example-link {
  padding-left: 4px !important;
  color: var(--orange) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.editor-example-link:hover,
.editor-example-link:focus-visible {
  text-decoration: underline !important;
}

/* Result page: Centering beside Grading Estimates for each side */
.result-side-meta {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.result-side-meta .centering-mini,
.result-side-meta .result-grades-list {
  min-width: 0 !important;
  align-self: stretch !important;
}

.result-grades-list {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 8px !important;
  margin-top: 0 !important;
}

.result-grades-title {
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 2px;
}

.result-grades-list .grade-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}

.result-grades-list .grade-pill-card {
  min-height: 68px !important;
  height: 68px !important;
  padding: 8px 4px !important;
}

.result-grades-list .grade-pill-label {
  font-size: 9.5px !important;
}

.result-grades-list .grade-pill-value {
  font-size: 13px !important;
  min-height: 32px !important;
  height: 32px !important;
}

@media (max-width: 760px) {
  .result-side-meta {
    grid-template-columns: 1fr !important;
  }
}

/* Summary grading results: exact 2-row / 3-column layout
   Row 1: PSA | BGS | CGC
   Row 2: TAG | SGC | AGS */
#frontGrades,
#backGrades,
.result-grades-list {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-content: start !important;
  overflow: visible !important;
}

#frontGrades .summary-grades-grid,
#backGrades .summary-grades-grid,
#frontGrades .grade-pill-grid-summary,
#backGrades .grade-pill-grid-summary,
.result-grades-list .grade-pill-grid-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(58px, auto)) !important;
  grid-auto-flow: row !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  flex-wrap: nowrap !important;
}

#frontGrades .grade-pill-grid-summary .grade-pill-card,
#backGrades .grade-pill-grid-summary .grade-pill-card,
.result-grades-list .grade-pill-grid-summary .grade-pill-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  place-items: center !important;
  padding: 7px 4px !important;
  overflow: hidden !important;
}

#frontGrades .grade-pill-grid-summary .grade-pill-label,
#backGrades .grade-pill-grid-summary .grade-pill-label,
.result-grades-list .grade-pill-grid-summary .grade-pill-label {
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#frontGrades .grade-pill-grid-summary .grade-pill-value,
#backGrades .grade-pill-grid-summary .grade-pill-value,
.result-grades-list .grade-pill-grid-summary .grade-pill-value {
  font-size: 13px !important;
  line-height: 1 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 5px 6px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums !important;
}

@media (max-width: 760px) {
  #frontGrades .grade-pill-grid-summary,
  #backGrades .grade-pill-grid-summary,
  .result-grades-list .grade-pill-grid-summary {
    gap: 6px !important;
    grid-template-rows: repeat(2, minmax(54px, auto)) !important;
  }

  #frontGrades .grade-pill-grid-summary .grade-pill-card,
  #backGrades .grade-pill-grid-summary .grade-pill-card,
  .result-grades-list .grade-pill-grid-summary .grade-pill-card {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 3px !important;
  }

  #frontGrades .grade-pill-grid-summary .grade-pill-label,
  #backGrades .grade-pill-grid-summary .grade-pill-label,
  .result-grades-list .grade-pill-grid-summary .grade-pill-label {
    font-size: 8.5px !important;
  }

  #frontGrades .grade-pill-grid-summary .grade-pill-value,
  #backGrades .grade-pill-grid-summary .grade-pill-value,
  .result-grades-list .grade-pill-grid-summary .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
  }
}

/* Summary mini title */
#frontGrades .result-grades-title,
#backGrades .result-grades-title,
.result-grades-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--text) !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

/* Summary + live Guides grade layouts: exact 2 rows / 3 columns
   Row 1: PSA | BGS | CGC
   Row 2: TAG | SGC | AGS */
#frontGrades .summary-grades-grid,
#backGrades .summary-grades-grid,
#frontGrades .grade-pill-grid-summary,
#backGrades .grade-pill-grid-summary,
.result-grades-list .grade-pill-grid-summary,
#pageEditor .guide-insights .live-grades-list .grade-pill-grid,
#pageEditor .guide-insights .live-grades-list .live-grades-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(56px, auto)) !important;
  grid-auto-flow: row !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  flex-wrap: nowrap !important;
}

#frontGrades .grade-pill-card,
#backGrades .grade-pill-card,
.result-grades-list .grade-pill-card,
#pageEditor .guide-insights .live-grades-list .grade-pill-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  place-items: center !important;
  padding: 7px 4px !important;
  overflow: hidden !important;
}

#frontGrades .grade-pill-label,
#backGrades .grade-pill-label,
.result-grades-list .grade-pill-label,
#pageEditor .guide-insights .live-grades-list .grade-pill-label {
  font-size: 9.5px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

#frontGrades .grade-pill-value,
#backGrades .grade-pill-value,
.result-grades-list .grade-pill-value,
#pageEditor .guide-insights .live-grades-list .grade-pill-value {
  font-size: 13px !important;
  line-height: 1 !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 5px 6px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums !important;
}

/* Status dots: green completed, blue available, gray locked */
.side-step-tab::after {
  background: #94a3b8 !important;
  box-shadow: none !important;
}
.side-step-tab.status-completed::after,
.side-step-tab.is-active.status-completed::after {
  background: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.14) !important;
}
.side-step-tab.status-available::after,
.side-step-tab.is-active.status-available::after {
  background: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,.14) !important;
}
.side-step-tab.status-locked::after,
.side-step-tab.is-active.status-locked::after,
.side-step-tab:disabled::after {
  background: #94a3b8 !important;
  box-shadow: none !important;
}

/* Warning modal */
.workflow-warning-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.workflow-warning-modal.hidden {
  display: none !important;
}
.workflow-warning-card {
  position: relative;
  width: min(94vw, 520px);
  padding: 28px;
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--orange) 32%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
  text-align: center;
}
.workflow-warning-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 950;
}
.workflow-warning-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.workflow-warning-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.workflow-warning-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 760px) {
  #frontGrades .grade-pill-card,
  #backGrades .grade-pill-card,
  .result-grades-list .grade-pill-card,
  #pageEditor .guide-insights .live-grades-list .grade-pill-card {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 3px !important;
  }
  #frontGrades .grade-pill-label,
  #backGrades .grade-pill-label,
  .result-grades-list .grade-pill-label,
  #pageEditor .guide-insights .live-grades-list .grade-pill-label {
    font-size: 8.5px !important;
  }
  #frontGrades .grade-pill-value,
  #backGrades .grade-pill-value,
  .result-grades-list .grade-pill-value,
  #pageEditor .guide-insights .live-grades-list .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
  }
}

/* Page kicker typography */
.page-kicker { font-size: 13px !important; }

/* Result page has no Front/Back switcher */
body:has(#pageResult:not(.hidden)) #sideStepTabs {
  display: none !important;
}

/* Stable stepper stacking: always visible, always above connector lines/page content/theme transitions */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  position: relative !important;
  z-index: 500 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  pointer-events: auto !important;
}

.step-progress.card.kc-stepper::before,
.step-progress.kc-stepper::before,
.step-progress::before {
  z-index: 0 !important;
  pointer-events: none !important;
}

.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:active {
  position: relative !important;
  z-index: 10 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  background-clip: padding-box !important;
  text-decoration: none !important;
}

.step-progress .step-pill::before {
  z-index: -1 !important;
  pointer-events: none !important;
}

.step-progress .step-pill span,
.step-progress .step-pill strong {
  position: relative !important;
  z-index: 11 !important;
}

/* Result page: no Front/Back switcher */
body:has(#pageResult:not(.hidden)) #sideStepTabs,
#pageResult:not(.hidden) ~ #sideStepTabs {
  display: none !important;
}

/* Summary Back / Start Over centered like editor actions */
.result-actions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 22px !important;
  text-align: center !important;
}

.summary-action-buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 auto !important;
}

.summary-action-buttons .btn,
#backResultBtn,
#redoBtn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 !important;
}

/* Page kicker typography across app */
.page-kicker {
  font-size: 13px !important;
}

/* Editor intro typography */
#editorIntro,
.editorIntro,
.editor-intro,
.step-page .page-copy > p,
.editor-stage .editor-intro {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Hard-fix stepper visibility and stacking across Result/Inspect and theme changes */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  position: relative !important;
  z-index: 999 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
  transition-property: background-color, border-color, box-shadow, color !important;
  transition-duration: .18s !important;
}

.step-progress.card.kc-stepper *,
.step-progress.kc-stepper *,
.step-progress * {
  opacity: 1 !important;
  visibility: visible !important;
}

.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:focus-visible,
.step-progress .step-pill:active,
.step-progress .step-pill:disabled {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  transform: none !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  background-clip: padding-box !important;
}

.step-progress .step-pill::before {
  z-index: -1 !important;
  pointer-events: none !important;
}

.step-progress .step-pill::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

.step-progress .step-pill span,
.step-progress .step-pill strong {
  position: relative !important;
  z-index: 25 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
}

/* Result/Inspect page fallback: stepper remains on top even when content/card creates stacking contexts */
body:has(#pageResult:not(.hidden)) .step-progress.card.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress {
  z-index: 1200 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Final hard-fix: stepper buttons must never disappear or hide behind Summary content */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  position: relative !important;
  z-index: 2147483000 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
  will-change: auto !important;
  transition-property: background-color, border-color, box-shadow, color !important;
  transition-duration: .16s !important;
}

.step-progress.card.kc-stepper::before,
.step-progress.kc-stepper::before,
.step-progress::before {
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:focus-visible,
.step-progress .step-pill:active,
.step-progress .step-pill:disabled,
.kc-stepper button,
.kc-stepper a {
  position: relative !important;
  z-index: 2147483001 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-flex !important;
  transform: none !important;
  filter: none !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  background-clip: padding-box !important;
  color: var(--text) !important;
  transition-property: background-color, border-color, box-shadow, color !important;
  transition-duration: .16s !important;
}

.step-progress .step-pill::before {
  z-index: -1 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.step-progress .step-pill::after {
  z-index: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.step-progress .step-pill span,
.step-progress .step-pill strong,
.kc-stepper button span,
.kc-stepper button strong {
  position: relative !important;
  z-index: 2147483002 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  color: inherit !important;
}

.step-progress .step-pill.is-active,
.step-progress .step-pill.active,
.step-progress .step-pill[aria-current="step"] {
  opacity: 1 !important;
  visibility: visible !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active,
html[data-theme="dark"] .step-progress .step-pill.active,
html[data-theme="dark"] .step-progress .step-pill[aria-current="step"] {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
  border-color: rgba(245,154,46, .78) !important;
  color: #fffaf0 !important;
}

html[data-theme="dark"] .step-progress .step-pill.is-active span,
html[data-theme="dark"] .step-progress .step-pill.is-active strong,
html[data-theme="dark"] .step-progress .step-pill.active span,
html[data-theme="dark"] .step-progress .step-pill.active strong,
html[data-theme="dark"] .step-progress .step-pill[aria-current="step"] span,
html[data-theme="dark"] .step-progress .step-pill[aria-current="step"] strong {
  color: #fffaf0 !important;
}

/* Summary/Inspect page stacking fallback */
body:has(#pageResult:not(.hidden)) .step-progress.card.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress,
#pageResult:not(.hidden) ~ .step-progress,
#pageResult:not(.hidden) .step-progress {
  z-index: 2147483000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

/* Prevent any parent/theme transition from visually fading stepper */
body,
.wrap,
.app-shell,
.step-page,
.card {
  --kc-stepper-opacity: 1;
}

.step-progress,
.step-progress * {
  opacity: 1 !important;
}

/* Requested final typography adjustments */
#editorIntro,
.editorIntro,
.editor-intro,
.step-page .page-copy > p,
.editor-stage .editor-intro {
  font-size: 14px !important;
  line-height: 1.5 !important;
}

.centering-cross,
.centering-cross * {
  font-size: 14px !important;
}

.card.panel-block.compact-panel.live-grades-panel.estimates-panel h3,
.live-grades-panel.estimates-panel h3,
.estimates-panel h3 {
  font-size: 15px !important;
}


/* Header children stay above header background and remain clickable */
.topbar *,
header.topbar *,
.site-header *,
.navbar *,
.app-header *,
#sharedNavbar *,
#sharedNavbar .topbar * {
  position: relative;
  z-index: 1;
}

/* Stepper sits below navbar layer */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress,
.kc-stepper {
  position: relative !important;
  z-index: 10 !important;
  isolation: auto !important;
  transform: none !important;
  filter: none !important;
}

/* Remove any previously assigned ultra-high z-index from stepper buttons */
.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:focus-visible,
.step-progress .step-pill:active,
.step-progress .step-pill:disabled,
.kc-stepper button,
.kc-stepper a {
  position: relative !important;
  z-index: 11 !important;
}

/* Connector lines stay behind the stepper buttons, and the whole stepper stays behind navbar */
.step-progress::before,
.step-progress::after,
.step-progress .step-pill::before,
.step-progress .step-pill::after,
.kc-stepper::before,
.kc-stepper::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Avoid parent wrappers creating a stacking context above the navbar */
.wrap,
.app-shell,
.step-page,
.card,
.inner-card,
.editor-stage,
.canvas-wrap {
  transform: none !important;
  filter: none !important;
}


/* Keep navbar content clickable and above navbar background */
.topbar > *,
header.topbar > *,
.site-header > *,
.navbar > *,
.app-header > *,
#sharedNavbar > *,
#sharedNavbar .topbar > * {
  position: relative;
  z-index: 2;
}

/* Stepper remains in its normal centered layout, only below navbar in stacking order */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress,
.kc-stepper {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Stepper buttons stay above connector lines, but the whole stepper stays below navbar */
.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:focus-visible,
.step-progress .step-pill:active,
.step-progress .step-pill:disabled,
.kc-stepper button,
.kc-stepper a {
  position: relative !important;
  z-index: 2 !important;
}

/* Connector lines stay behind buttons */
.step-progress::before,
.step-progress::after,
.step-progress .step-pill::before,
.step-progress .step-pill::after,
.kc-stepper::before,
.kc-stepper::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Single Card navbar: landing page exact navbar styling */
.wrap > .topbar,
header.topbar {
  min-height: 72px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 20px !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 2px !important;
  margin: 0 !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  width: auto !important;
  transform: none !important;
  z-index: 100 !important;
  background: color-mix(in srgb,var(--bg) 86%,transparent) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  isolation: auto !important;
}

.wrap > .topbar .brand,
header.topbar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 16px !important;
  font-weight: 750 !important;
  letter-spacing: -.03em !important;
}

.wrap > .topbar .brand-logo,
header.topbar .brand-logo {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  display: block !important;
}

.wrap > .topbar .logo-for-light,
header.topbar .logo-for-light {
  display: none !important;
}

.wrap > .topbar .logo-for-dark,
header.topbar .logo-for-dark {
  display: block !important;
}

html[data-theme="light"] .wrap > .topbar .logo-for-light,
html[data-theme="light"] header.topbar .logo-for-light {
  display: block !important;
}

html[data-theme="light"] .wrap > .topbar .logo-for-dark,
html[data-theme="light"] header.topbar .logo-for-dark {
  display: none !important;
}

.wrap > .topbar .nav,
header.topbar .nav {
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.wrap > .topbar .nav a,
header.topbar .nav a {
  color: inherit !important;
  text-decoration: none !important;
}

.wrap > .topbar .nav a:hover,
header.topbar .nav a:hover {
  color: var(--text) !important;
}

.wrap > .topbar .theme-toggle,
.wrap > .topbar .menu-button,
header.topbar .theme-toggle,
header.topbar .menu-button {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  border-radius: 999px !important;
  min-width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: var(--text) !important;
}

.wrap > .topbar .theme-toggle:hover,
.wrap > .topbar .menu-button:hover,
header.topbar .theme-toggle:hover,
header.topbar .menu-button:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-1px) !important;
}

.wrap > .topbar .theme-toggle .sun,
header.topbar .theme-toggle .sun {
  display: none !important;
}

html[data-theme="light"] .wrap > .topbar .theme-toggle .sun,
html[data-theme="light"] header.topbar .theme-toggle .sun {
  display: inline !important;
}

html[data-theme="light"] .wrap > .topbar .theme-toggle .moon,
html[data-theme="light"] header.topbar .theme-toggle .moon {
  display: none !important;
}

.wrap > .topbar .menu-button,
header.topbar .menu-button {
  display: none !important;
}

.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress {
  position: relative !important;
  z-index: 10 !important;
}

@media (max-width:900px) {
  .wrap > .topbar,
  header.topbar {
    grid-template-columns: auto auto auto !important;
  }

  .wrap > .topbar .menu-button,
  header.topbar .menu-button {
    display: inline-flex !important;
    justify-self: end !important;
  }

  .wrap > .topbar .menu-button span,
  header.topbar .menu-button span {
    font-size: 0 !important;
  }

  .wrap > .topbar .menu-button i,
  .wrap > .topbar .menu-button i::before,
  .wrap > .topbar .menu-button i::after,
  header.topbar .menu-button i,
  header.topbar .menu-button i::before,
  header.topbar .menu-button i::after {
    content: "" !important;
    display: block !important;
    width: 14px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 999px !important;
    position: relative !important;
  }

  .wrap > .topbar .menu-button i::before,
  header.topbar .menu-button i::before {
    transform: translateY(-6px) !important;
  }

  .wrap > .topbar .menu-button i::after,
  header.topbar .menu-button i::after {
    transform: translateY(4px) !important;
  }

  .wrap > .topbar .nav,
  header.topbar .nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 72px !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 12px !important;
    border: 1px solid var(--border) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb,var(--bg) 94%,transparent) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
  }

  .wrap > .topbar .nav.open,
  header.topbar .nav.open {
    display: flex !important;
  }

  .wrap > .topbar .nav a,
  header.topbar .nav a {
    padding: 13px 12px !important;
    border-radius: 12px !important;
  }

  .wrap > .topbar .nav a:hover,
  header.topbar .nav a:hover {
    background: var(--surface) !important;
  }
}

/* Single Card navbar: flush to top border and sticky/fixed on screen */
html,
body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body > .skip-link + .wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Pin the actual header to the very top of the viewport */
body > .skip-link + .wrap > header.topbar,
.wrap > header.topbar,
header.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1120px, calc(100% - 32px)) !important;
  min-height: 72px !important;
  height: 72px !important;
  z-index: 10000 !important;
  margin: 0 !important;
  padding: 0 2px !important;
  background: color-mix(in srgb, var(--bg) 86%, transparent) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Because the header is fixed, the content below needs its top spacing once only */
body > .skip-link + .wrap > header.topbar + .step-progress,
.wrap > header.topbar + .step-progress,
header.topbar + .step-progress {
  margin-top: 88px !important;
}

/* Keep the mobile nav attached to the fixed navbar */
body > .skip-link + .wrap > header.topbar .nav,
.wrap > header.topbar .nav,
header.topbar .nav {
  z-index: 10001 !important;
}

@media (max-width: 900px) {
  body > .skip-link + .wrap > header.topbar,
  .wrap > header.topbar,
  header.topbar {
    width: min(1120px, calc(100% - 32px)) !important;
  }

  body > .skip-link + .wrap > header.topbar .nav,
  .wrap > header.topbar .nav,
  header.topbar .nav {
    top: 72px !important;
  }
}

@media (max-width: 720px) {
  body > .skip-link + .wrap > header.topbar,
  .wrap > header.topbar,
  header.topbar {
    width: min(100vw - 20px, 720px) !important;
  }
}


/* Mobile export/editor fixes */
.canvas-wrap,
#canvasWrap,
canvas {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .wrap,
  .app-shell,
  .step-page,
  .editor-main-layout,
  .editor-side-column,
  .editor-stage,
  .canvas-wrap {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  .step-progress::-webkit-scrollbar {
    display: none !important;
  }

  .step-progress .step-pill,
  .step-progress .step-pill:link,
  .step-progress .step-pill:visited,
  .step-progress .step-pill:hover,
  .step-progress .step-pill:focus,
  .step-progress .step-pill:active {
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
    color: var(--text) !important;
  }

  .step-progress .step-pill.is-active,
  .step-progress .step-pill.active {
    color: #fffaf0 !important;
  }

  .editor-main-layout {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
  }

  .editor-stage {
    width: 100% !important;
  }

  canvas {
    width: 100% !important;
    max-width: min(100%, 460px) !important;
    touch-action: none !important;
  }

  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .grade-pill-grid,
  .summary-grades-grid,
  .result-grades-list .grade-pill-grid-summary {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(56px, auto)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #pageEditor.is-guides-mode .live-grades-list .grade-pill-card,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-card,
  .summary-grades-grid .grade-pill-card,
  .result-grades-list .grade-pill-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 6px 4px !important;
    display: grid !important;
    place-items: center !important;
    gap: 6px !important;
  }

  .grade-pill-label,
  .grade-pill-value {
    text-align: center !important;
    white-space: nowrap !important;
  }

  .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .page-actions,
  .editor-actions,
  .result-actions,
  .summary-action-buttons {
    width: 100% !important;
    gap: 10px !important;
  }

  .btn,
  .report-download__trigger,
  .report-download__item {
    min-height: 44px !important;
  }

  .edge-adjustments-wrap,
  .guide-insights {
    width: 100% !important;
    grid-template-columns: 1fr !important;
  }
}


/* Final mobile stepper, navbar layering, Corners mobile, and Grade Estimates layout fixes */
.topbar,
header.topbar,
.site-header,
.navbar,
.app-header {
  z-index: 10000 !important;
  isolation: isolate !important;
}

.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress,
.kc-stepper {
  position: relative !important;
  z-index: 10 !important;
}

/* Guides / Border Measurement Grade Estimates: full-width 2-row grid on all viewports */
#pageEditor.is-guides-mode .live-grades-list,
#pageEditor.is-guides-mode .current-grades-list,
#pageEditor.is-guides-mode .live-grades-panel {
  width: 100% !important;
  min-width: 0 !important;
}

#pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
#pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
#pageEditor.is-guides-mode .grade-pill-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(56px, auto)) !important;
  gap: 0.5rem !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  flex-wrap: nowrap !important;
}

#pageEditor.is-guides-mode .live-grades-list .grade-pill-card,
#pageEditor.is-guides-mode .current-grades-list .grade-pill-card,
#pageEditor.is-guides-mode .grade-pill-grid .grade-pill-card {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 56px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* Keep the navbar above the mobile stepper and prevent overlap */
  .topbar,
  header.topbar,
  .site-header,
  .navbar,
  .app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    isolation: isolate !important;
  }

  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress,
  .kc-stepper {
    position: relative !important;
    z-index: 10 !important;
    margin-top: 12px !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
    overflow: visible !important;
    border-radius: 22px !important;
  }

  /* Mobile stepper: Summary/action-button style pills */
  .step-progress .step-pill,
  .step-progress .step-pill:link,
  .step-progress .step-pill:visited,
  .step-progress .step-pill:hover,
  .step-progress .step-pill:focus,
  .step-progress .step-pill:active,
  .step-progress .step-pill:disabled {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 8px 6px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .step-progress .step-pill span {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
  }

  .step-progress .step-pill strong {
    display: inline !important;
    min-height: 0 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .step-progress .step-pill.is-active,
  .step-progress .step-pill.active,
  .step-progress .step-pill[aria-current="step"] {
    color: #fffaf0 !important;
    background: linear-gradient(135deg, var(--orange), var(--orange-dark)) !important;
    border-color: rgba(245,154,46, .75) !important;
    box-shadow: 0 12px 26px rgba(242, 140, 18, .22) !important;
  }

  .step-progress .step-pill.is-active span,
  .step-progress .step-pill.is-active strong,
  .step-progress .step-pill.active span,
  .step-progress .step-pill.active strong,
  .step-progress .step-pill[aria-current="step"] span,
  .step-progress .step-pill[aria-current="step"] strong {
    color: #fffaf0 !important;
  }

  .step-progress .step-pill:disabled {
    opacity: .58 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
  }

  /* Connector lines remain behind buttons */
  .step-progress::before,
  .step-progress::after,
  .step-progress .step-pill::before,
  .step-progress .step-pill::after {
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Corners / Calibrate mobile: show Centering and Grade Estimates again */
  #pageEditor.is-align-mode .guide-insights,
  #pageEditor.is-align-mode .live-centering-panel,
  #pageEditor.is-align-mode .live-grades-panel {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor.is-align-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-align-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-align-mode .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(56px, auto)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #pageEditor.is-align-mode .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    box-sizing: border-box !important;
  }

  #pageEditor.is-align-mode .centering-cross {
    width: min(100%, 280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .editor-side-column,
  .guide-insights,
  .live-centering-panel,
  .live-grades-panel {
    max-width: 100% !important;
    overflow: visible !important;
  }
}

@media (max-width: 420px) {
  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress,
  .kc-stepper {
    gap: 6px !important;
    padding: 8px !important;
  }

  .step-progress .step-pill,
  .step-progress .step-pill:link,
  .step-progress .step-pill:visited,
  .step-progress .step-pill:hover,
  .step-progress .step-pill:focus,
  .step-progress .step-pill:active,
  .step-progress .step-pill:disabled {
    min-height: 44px !important;
    height: 44px !important;
    padding: 7px 4px !important;
    gap: 4px !important;
  }

  .step-progress .step-pill span {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 10px !important;
  }

  .step-progress .step-pill strong {
    font-size: 10px !important;
  }
}


/* Mobile Corners / Calibrate: hide Centering and Grade Estimates panels */
@media (max-width: 768px) {
  #pageEditor.is-align-mode .live-centering-panel,
  #pageEditor.is-align-mode .live-grades-panel {
    display: none !important;
  }

  /* Hide the whole guide/metrics side panel on Corners only when it only contains those metrics. */
  #pageEditor.is-align-mode #guideInsights,
  #pageEditor.is-align-mode .guideInsights,
  #pageEditor.is-align-mode .guide-insights {
    display: none !important;
  }

  /* Keep preview and corner controls visible if they are separate from guideInsights. */
  #pageEditor.is-align-mode #alignPreviewPanel,
  #pageEditor.is-align-mode .align-preview-panel {
    display: grid !important;
  }
}

/* Actual mobile Corners hide fix: mode classes are added by updateUI */
@media (max-width: 768px) {
  body.is-mobile-corners-step #pageEditor #guideInsights,
  body.is-mobile-corners-step #pageEditor .guideInsights,
  body.is-mobile-corners-step #pageEditor .guide-insights,
  #pageEditor.is-align-mode #guideInsights,
  #pageEditor.is-align-mode .guideInsights,
  #pageEditor.is-align-mode .guide-insights {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-mobile-corners-step #pageEditor .live-centering-panel,
  body.is-mobile-corners-step #pageEditor .live-grades-panel,
  #pageEditor.is-align-mode .live-centering-panel,
  #pageEditor.is-align-mode .live-grades-panel {
    display: none !important;
    visibility: hidden !important;
  }

  
}


/* Mobile Corners: hide Preview and preview sliders/controls */
@media (max-width: 768px) {
  body.is-mobile-corners-step #pageEditor #alignPreviewPanel,
  body.is-mobile-corners-step #pageEditor .align-preview-panel,
  #pageEditor.is-align-mode #alignPreviewPanel,
  #pageEditor.is-align-mode .align-preview-panel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-mobile-corners-step #pageEditor .align-preview-controls,
  body.is-mobile-corners-step #pageEditor .preview-control-row,
  body.is-mobile-corners-step #pageEditor #alignPreviewCanvas,
  body.is-mobile-corners-step #pageEditor .align-preview-wrap,
  body.is-mobile-corners-step #pageEditor .align-preview-note,
  #pageEditor.is-align-mode .align-preview-controls,
  #pageEditor.is-align-mode .preview-control-row,
  #pageEditor.is-align-mode #alignPreviewCanvas,
  #pageEditor.is-align-mode .align-preview-wrap,
  #pageEditor.is-align-mode .align-preview-note {
    display: none !important;
  }

  /* Mobile Guides Grade Estimates should visually match Summary grade cards */
  body.is-mobile-guides-step #pageEditor .live-grades-panel,
  #pageEditor.is-guides-mode .live-grades-panel {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.10) !important;
  }

  body.is-mobile-guides-step #pageEditor .metrics-panel-head,
  #pageEditor.is-guides-mode .metrics-panel-head {
    margin-bottom: 10px !important;
    align-items: center !important;
  }

  body.is-mobile-guides-step #pageEditor .metrics-panel-head h3,
  #pageEditor.is-guides-mode .metrics-panel-head h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    margin: 0 !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-panel-subtitle,
  #pageEditor.is-guides-mode .grade-panel-subtitle {
    font-size: 11px !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
    color: var(--muted) !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-list,
  body.is-mobile-guides-step #pageEditor .current-grades-list,
  #pageEditor.is-guides-mode .live-grades-list,
  #pageEditor.is-guides-mode .current-grades-list {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-list .grade-pill-grid,
  body.is-mobile-guides-step #pageEditor .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(58px, auto)) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    max-height: 58px !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    gap: 6px !important;
    place-items: center !important;
    padding: 7px 4px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-label,
  #pageEditor.is-guides-mode .grade-pill-label {
    font-size: 9.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    font-size: 13px !important;
    line-height: 1 !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-variant-numeric: tabular-nums !important;
    text-align: center !important;
  }
}

@media (max-width: 420px) {
  body.is-mobile-guides-step #pageEditor .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    min-height: 54px !important;
    height: 54px !important;
    max-height: 54px !important;
    padding: 6px 3px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-label,
  #pageEditor.is-guides-mode .grade-pill-label {
    font-size: 8.5px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
  }
}

/* Report/app grade tone colors: 10 green, 9 yellow, 1-8 red */
.grade-pill-card.grade-green .grade-pill-value,
.grade-pill-value.grade-green {
  background: linear-gradient(180deg,#d7f2e6 0%,#bde9d2 100%) !important;
  border-color: #9adab5 !important;
  color: #065f46 !important;
  box-shadow: 0 3px 10px rgba(34,197,94,0.18) !important;
}

.grade-pill-card.grade-yellow .grade-pill-value,
.grade-pill-value.grade-yellow {
  background: linear-gradient(180deg,#fef3c7 0%,#fde68a 100%) !important;
  border-color: #f28c12 !important;
  color: #92400e !important;
  box-shadow: 0 3px 10px rgba(234,179,8,0.18) !important;
}

.grade-pill-card.grade-red .grade-pill-value,
.grade-pill-value.grade-red {
  background: linear-gradient(180deg,#ffe4e6 0%,#fecdd3 100%) !important;
  border-color: #fda4af !important;
  color: #be123c !important;
  box-shadow: 0 3px 10px rgba(244,63,94,0.16) !important;
}

/* Borders page: keep mobile Grade Estimates visible, full-width, and readable */
@media (max-width: 768px) {
  body.is-mobile-guides-step #pageEditor .editor-main-layout,
  #pageEditor.is-guides-mode .editor-main-layout {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    justify-items: stretch !important;
  }

  body.is-mobile-guides-step #pageEditor .editor-side-column,
  body.is-mobile-guides-step #pageEditor #guideInsights,
  body.is-mobile-guides-step #pageEditor .guideInsights,
  body.is-mobile-guides-step #pageEditor .guide-insights,
  body.is-mobile-guides-step #pageEditor .live-grades-panel,
  body.is-mobile-guides-step #pageEditor .live-grades-list,
  #pageEditor.is-guides-mode .editor-side-column,
  #pageEditor.is-guides-mode #guideInsights,
  #pageEditor.is-guides-mode .guideInsights,
  #pageEditor.is-guides-mode .guide-insights,
  #pageEditor.is-guides-mode .live-grades-panel,
  #pageEditor.is-guides-mode .live-grades-list {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-panel,
  #pageEditor.is-guides-mode .live-grades-panel {
    padding: 12px !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-list .grade-pill-grid,
  body.is-mobile-guides-step #pageEditor .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(54px, auto)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 6px 3px !important;
    box-sizing: border-box !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-label,
  #pageEditor.is-guides-mode .grade-pill-label {
    font-size: 9px !important;
    white-space: nowrap !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
    padding: 4px 5px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  body.is-mobile-guides-step #pageEditor .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .grade-pill-grid {
    gap: 6px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    font-size: 11px !important;
    padding: 3px 4px !important;
  }
}


/* Mobile Borders page: Grade Estimates card full-width, not clipped */
@media (max-width: 768px) {
  body.is-mobile-guides-step #pageEditor .live-grades-panel,
  #pageEditor.is-guides-mode .live-grades-panel,
  body.is-mobile-guides-step #pageEditor .estimates-panel,
  #pageEditor.is-guides-mode .estimates-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding: 14px !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-panel .metrics-panel-head,
  #pageEditor.is-guides-mode .live-grades-panel .metrics-panel-head,
  body.is-mobile-guides-step #pageEditor .estimates-panel .metrics-panel-head,
  #pageEditor.is-guides-mode .estimates-panel .metrics-panel-head {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 12px !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-panel .current-grades-list,
  body.is-mobile-guides-step #pageEditor .live-grades-panel .live-grades-list,
  body.is-mobile-guides-step #pageEditor .estimates-panel .current-grades-list,
  body.is-mobile-guides-step #pageEditor .estimates-panel .live-grades-list,
  #pageEditor.is-guides-mode .live-grades-panel .current-grades-list,
  #pageEditor.is-guides-mode .live-grades-panel .live-grades-list,
  #pageEditor.is-guides-mode .estimates-panel .current-grades-list,
  #pageEditor.is-guides-mode .estimates-panel .live-grades-list {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.is-mobile-guides-step #pageEditor .live-grades-grid,
  body.is-mobile-guides-step #pageEditor .grade-pill-grid,
  body.is-mobile-guides-step #pageEditor .current-grades-list .grade-pill-grid,
  body.is-mobile-guides-step #pageEditor .live-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-grid,
  #pageEditor.is-guides-mode .grade-pill-grid,
  #pageEditor.is-guides-mode .current-grades-list .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-list .grade-pill-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-template-rows: repeat(2, minmax(58px, auto)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    transform: none !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-rows: auto auto !important;
    place-items: center !important;
    gap: 6px !important;
    padding: 7px 4px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-label,
  #pageEditor.is-guides-mode .grade-pill-label {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 9.5px !important;
    line-height: 1 !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  body.is-mobile-guides-step #pageEditor .live-grades-grid,
  body.is-mobile-guides-step #pageEditor .grade-pill-grid,
  #pageEditor.is-guides-mode .live-grades-grid,
  #pageEditor.is-guides-mode .grade-pill-grid {
    gap: 6px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-card,
  #pageEditor.is-guides-mode .grade-pill-card {
    min-height: 54px !important;
    padding: 6px 3px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-label,
  #pageEditor.is-guides-mode .grade-pill-label {
    font-size: 8.5px !important;
  }

  body.is-mobile-guides-step #pageEditor .grade-pill-value,
  #pageEditor.is-guides-mode .grade-pill-value {
    font-size: 12px !important;
    min-height: 26px !important;
    height: 26px !important;
  }
}

/* Final fix: Result stepper must never overlay navbar */
.topbar,
header.topbar,
.site-header,
.navbar,
.app-header,
#sharedNavbar,
#sharedNavbar .topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20000 !important;
  isolation: isolate !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.topbar > *,
header.topbar > *,
.site-header > *,
.navbar > *,
.app-header > *,
#sharedNavbar > *,
#sharedNavbar .topbar > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Lower the whole workflow stepper layer, including Result/Inspect page-specific overrides */
.step-progress.card.kc-stepper,
.step-progress.kc-stepper,
.step-progress,
.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress.card.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress.kc-stepper,
body:has(#pageResult:not(.hidden)) .step-progress,
#pageResult:not(.hidden) ~ .step-progress,
#pageResult:not(.hidden) .step-progress {
  position: relative !important;
  z-index: 20 !important;
  isolation: isolate !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Stepper buttons stay above connector lines, but below the navbar */
.step-progress .step-pill,
.step-progress .step-pill:link,
.step-progress .step-pill:visited,
.step-progress .step-pill:hover,
.step-progress .step-pill:focus,
.step-progress .step-pill:focus-visible,
.step-progress .step-pill:active,
.step-progress .step-pill:disabled,
.kc-stepper button,
.kc-stepper a,
body:has(#pageResult:not(.hidden)) .step-progress .step-pill,
body:has(#pageResult:not(.hidden)) .kc-stepper button,
body:has(#pageResult:not(.hidden)) .kc-stepper a {
  position: relative !important;
  z-index: 21 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Connectors remain behind buttons */
.step-progress::before,
.step-progress::after,
.step-progress .step-pill::before,
.step-progress .step-pill::after,
.kc-stepper::before,
.kc-stepper::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Mobile spacing: stepper starts under navbar, never at the same top layer */
@media (max-width: 768px) {
  .step-progress.card.kc-stepper,
  .step-progress.kc-stepper,
  .step-progress,
  .kc-stepper {
    position: relative !important;
    z-index: 20 !important;
    margin-top: 12px !important;
  }

  .topbar,
  header.topbar,
  .site-header,
  .navbar,
  .app-header,
  #sharedNavbar,
  #sharedNavbar .topbar {
    z-index: 20000 !important;
  }
}

/* Full Card Summary gradability table */
.overall-grade-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.overall-grade-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 13px;
}

.overall-grade-table th,
.overall-grade-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.overall-grade-table th {
  font-weight: 900;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-2) 82%, transparent);
}

.overall-grade-table td {
  color: var(--muted);
  font-weight: 750;
}

.overall-grade-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .overall-grade-table {
    min-width: 520px;
    font-size: 12px;
  }

  .overall-grade-table th,
  .overall-grade-table td {
    padding: 9px 10px;
  }
}

/* Overall gradability table: 4 columns after removing Limiting */
.overall-grade-table {
  min-width: 460px;
}

@media (max-width: 768px) {
  .overall-grade-table {
    min-width: 430px;
  }
}

/* Start Over confirmation modal */
.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.confirm-modal.hidden {
  display: none !important;
}

.confirm-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.confirm-modal__card {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  box-shadow: var(--shadow);
  padding: 24px;
  text-align: center;
}

.confirm-modal__card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text);
}

.confirm-modal__card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.confirm-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.btn.danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  border-color: rgba(248, 113, 113, 0.75);
  box-shadow: 0 12px 28px rgba(239, 68, 68, 0.22);
}

.btn.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(239, 68, 68, 0.28);
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .confirm-modal__card {
    padding: 20px;
  }

  .confirm-modal__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .confirm-modal__actions .btn {
    width: 100%;
  }
}


/* Start Over confirm button: KantoCorp yellow/orange theme */
.btn.confirm-yellow {
  background: linear-gradient(135deg, #f59a2e, var(--orange)) !important;
  color: #201205 !important;
  border-color: rgba(245,154,46, 0.82) !important;
  box-shadow: 0 12px 28px rgba(242, 140, 18, 0.24) !important;
  font-weight: 900 !important;
}

.btn.confirm-yellow:hover,
.btn.confirm-yellow:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #fcd34d, var(--orange)) !important;
  border-color: rgba(245,154,46, 0.95) !important;
  box-shadow: 0 16px 34px rgba(242, 140, 18, 0.30) !important;
}

html[data-theme="dark"] .btn.confirm-yellow {
  color: #1f1302 !important;
}


/* Footer legal/feedback controls */
.footer-links {
  flex-wrap: wrap;
}

.feedback-dialog-card {
  max-width: 560px;
}

.feedback-intro {
  margin-top: 0;
}

.feedback-field {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: var(--text);
  font-weight: 800;
}

.feedback-field span {
  font-size: 13px;
}

.feedback-field em {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.feedback-field textarea,
.feedback-field input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  box-sizing: border-box;
  outline: none;
}

.feedback-field textarea {
  resize: vertical;
  min-height: 140px;
}

.feedback-field textarea:focus,
.feedback-field input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(242, 140, 18, 0.14);
}

.feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.feedback-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.feedback-status.is-success {
  color: #087647;
}

.feedback-status.is-error {
  color: #be123c;
}

@media (max-width: 560px) {
  .feedback-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .feedback-actions .btn {
    width: 100%;
  }
}

/* Feedback footer/dialog dark mode text polish */
html[data-theme="dark"] .footer-link[data-dialog-open="feedbackDialog"] {
  color: #ffffff !important;
}

html[data-theme="dark"] .feedback-dialog .policy-header h2,
html[data-theme="dark"] .feedback-dialog .feedback-field,
html[data-theme="dark"] .feedback-dialog .feedback-field span {
  color: #ffffff !important;
}

html[data-theme="dark"] .feedback-dialog .feedback-field textarea,
html[data-theme="dark"] .feedback-dialog .feedback-field input {
  color: #ffffff !important;
}

html[data-theme="dark"] .feedback-dialog .feedback-field textarea::placeholder,
html[data-theme="dark"] .feedback-dialog .feedback-field input::placeholder {
  color: rgba(255,255,255,.54) !important;
}


/* Feedback is now a direct Google Forms link */
.footer-link[href] {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.footer-link[href]:hover,
.footer-link[href]:focus-visible {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}

html[data-theme="dark"] .footer-link[href*="forms.gle"] {
  color: #ffffff !important;
}


/* Single Card Analysis: policy/legal modal titles are white in dark mode */
html[data-theme="dark"] .policy-dialog .policy-header h2,
html[data-theme="dark"] #termsDialog .policy-header h2,
html[data-theme="dark"] #privacyDialog .policy-header h2,
html[data-theme="dark"] #legalDisclaimerDialog .policy-header h2 {
  color: #ffffff !important;
}

html[data-theme="dark"] .policy-dialog .policy-close {
  color: #ffffff !important;
}


/* Final mobile fixes: active step number, Upload Back order, footer layout, canvas touch performance */
@media (max-width: 768px) {
  /* Active step number must be visible in light mode */
  html[data-theme="light"] .step-progress .step-pill.is-active span,
  html[data-theme="light"] .step-progress .step-pill.active span,
  html[data-theme="light"] .step-progress .step-pill[aria-current="step"] span {
    color: #201205 !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.82) !important;
  }

  html[data-theme="light"] .step-progress .step-pill.is-active strong,
  html[data-theme="light"] .step-progress .step-pill.active strong,
  html[data-theme="light"] .step-progress .step-pill[aria-current="step"] strong {
    color: #201205 !important;
  }

  /* Upload Back action order and spacing */
  .upload-back-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .upload-back-actions #backUploadBackBtn {
    order: 1 !important;
  }

  .upload-back-actions #skipBackBtn {
    order: 2 !important;
  }

  /* Single Card footer should behave like landing footer and remain fully visible */
  .site-footer.card,
  .site-footer {
    width: 100% !important;
    min-height: auto !important;
    margin: 18px auto 24px !important;
    padding: 22px 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--surface) 72%, transparent) !important;
    box-shadow: var(--shadow-soft) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .footer-copy {
    width: 100% !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  .footer-links {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    text-align: center !important;
  }

  .footer-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    white-space: nowrap !important;
  }

  .app-shell {
    padding-bottom: 10px !important;
  }
}

/* Smoother canvas touch interaction on mobile */
.canvas-wrap,
#canvasWrap,
canvas {
  touch-action: none !important;
  overscroll-behavior: contain !important;
}

canvas {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  will-change: transform;
}

canvas.is-touching-canvas {
  cursor: grabbing !important;
}

@media (max-width: 480px) {
  .footer-links {
    gap: 8px 12px !important;
  }

  .footer-link {
    font-size: 13px !important;
  }
}

/* Final visibility fixes for Back skip and Border point editing */
#skipBackBtn.hidden,
#pageUploadBack #skipBackBtn.hidden {
  display: none !important;
}

/* Mobile Corners performance + larger lens support */
@media (max-width: 768px) {
  #pageEditor.is-align-mode canvas {
    image-rendering: auto;
    will-change: transform;
  }
}

/* Mobile Calibrate canvas: prevent clipped tilted image/handles */
@media (max-width: 768px) {
  #pageEditor.is-align-mode .canvas-wrap,
  body.is-mobile-corners-step #pageEditor .canvas-wrap {
    overflow: visible !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #pageEditor.is-align-mode canvas,
  body.is-mobile-corners-step #pageEditor canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Footer Instagram link - production-safe embedded icon */
.footer-links .instagram-link,
.footer-social-link.instagram-link,
a.instagram-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}

.instagram-footer-icon,
.footer-links .instagram-link .instagram-footer-icon,
a.instagram-link img.instagram-footer-icon {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
  flex: 0 0 20px !important;
  object-fit: contain !important;
  overflow: visible !important;
  filter: none !important;
  transform: none !important;
}

.instagram-link span {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.footer-links .instagram-link:hover,
.footer-links .instagram-link:focus-visible {
  color: var(--orange) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

html[data-theme="dark"] .footer-links .instagram-link,
[data-theme="dark"] .footer-links .instagram-link,
body.dark .footer-links .instagram-link {
  color: #ffffff !important;
}

/* Corners calibration controls now adjust corner geometry, not viewport pan/zoom */
.align-preview-controls .preview-slider-group span {
  white-space: nowrap;
}
.align-preview-note {
  line-height: 1.45;
}


/* =====================================================================
   KantoCorp refresh — matches the landing page (ember orange, glass)
   Appended last so it wins over earlier layers.
   ===================================================================== */
:root{
  --orange:#f28c12;--orange-dark:#e2471b;
  --kc-accent:#f28c12;--kc-accent-2:#e2471b;--kc-glow:rgba(242,110,18,.32);
  --bg:#07070a;--surface:#110f12;--surface-2:#171418;
  --card:rgba(20,17,20,.72);--text:#f6f4f2;--muted:#b4aeaa;--soft:#dcd6d2;
  --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.18);
  --kc-glass:rgba(18,15,18,.66);--kc-glass-strong:rgba(20,16,19,.86);
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --topbar-height:68px;
}
html[data-theme="light"]{
  --orange:#d9700a;--orange-dark:#c2370f;
  --kc-accent:#d9700a;--kc-accent-2:#c2370f;--kc-glow:rgba(217,112,10,.24);
  --bg:#f6f3f0;--surface:#fbf9f7;--surface-2:#ffffff;
  --card:rgba(255,252,249,.84);--text:#16110e;--muted:#5b524c;--soft:#2c2420;
  --border:rgba(22,17,14,.10);--border-strong:rgba(22,17,14,.2);
  --kc-glass:rgba(255,252,249,.82);--kc-glass-strong:rgba(255,253,251,.94);
  --shadow:0 24px 60px rgba(40,20,10,.12);
}

/* Page backdrop: ember glow instead of video */
html body:not(#kc){
  background:
    radial-gradient(900px 520px at 85% -8%,rgba(226,71,27,.22),transparent 65%),
    radial-gradient(700px 480px at -5% 18%,rgba(242,140,18,.13),transparent 62%),
    radial-gradient(900px 600px at 50% 115%,rgba(160,30,20,.18),transparent 65%),
    var(--bg) !important;
  background-attachment:fixed !important;
  color:var(--text) !important;
  -webkit-font-smoothing:antialiased;
}
html[data-theme="light"] body:not(#kc){
  background:
    radial-gradient(900px 520px at 85% -8%,rgba(242,140,18,.16),transparent 65%),
    radial-gradient(700px 480px at -5% 18%,rgba(226,71,27,.07),transparent 62%),
    var(--bg) !important;
  background-attachment:fixed !important;
}
html body:not(#kc)::before{
  opacity:.18 !important;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%) !important;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 70%) !important;
}
html body:not(#kc)::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Top bar (same look as landing, always solid glass) ---------- */
html body:not(#kc) .topbar{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  width:100% !important;max-width:none !important;transform:none !important;margin:0 !important;
  min-height:var(--topbar-height) !important;height:var(--topbar-height) !important;
  padding:0 max(20px,calc((100vw - 1160px)/2)) !important;
  display:flex !important;align-items:center !important;gap:24px !important;
  background:color-mix(in srgb,var(--bg) 74%,transparent) !important;
  border:0 !important;border-bottom:1px solid var(--border) !important;border-radius:0 !important;
  box-shadow:none !important;
  backdrop-filter:blur(16px) saturate(140%) !important;-webkit-backdrop-filter:blur(16px) saturate(140%) !important;
  z-index:1000 !important;
}
html body:not(#kc) .topbar .brand{display:inline-flex !important;align-items:center !important;gap:10px !important;font-weight:800 !important;letter-spacing:-.03em !important;font-size:16px !important;color:var(--text) !important}
html body:not(#kc) .topbar .brand-logo{width:36px !important;height:36px !important}
html body:not(#kc) .topbar .nav{margin-left:auto !important;justify-self:auto !important;display:flex !important;align-items:center !important;gap:6px !important;font-size:14px !important;font-weight:650 !important}
html body:not(#kc) .topbar .nav a{padding:9px 14px !important;border-radius:999px !important;color:var(--muted) !important;background:transparent !important;transition:color .18s,background .18s !important}
html body:not(#kc) .topbar .nav a:hover{color:var(--text) !important;background:color-mix(in srgb,var(--text) 7%,transparent) !important}
html body:not(#kc) .topbar .nav a.nav-cta{color:#fff !important;margin-left:6px !important;background:linear-gradient(135deg,var(--kc-accent),var(--kc-accent-2)) !important;box-shadow:0 8px 24px var(--kc-glow) !important}
html body:not(#kc) .topbar .theme-toggle,html body:not(#kc) .topbar .menu-button{width:40px !important;height:40px !important;min-width:40px !important;border-radius:999px !important;border:1px solid var(--border-strong) !important;background:color-mix(in srgb,var(--surface) 70%,transparent) !important;color:var(--text) !important}
html body:not(#kc) .topbar .menu-button{display:none !important}
@media (max-width:860px){
  html body:not(#kc) .topbar .menu-button{display:inline-grid !important;place-items:center !important;order:3 !important}
  html body:not(#kc) .topbar .theme-toggle{margin-left:auto !important;order:2 !important}
  html body:not(#kc) .topbar .nav{position:absolute !important;top:calc(var(--topbar-height) + 6px) !important;left:16px !important;right:16px !important;display:none !important;flex-direction:column !important;align-items:stretch !important;gap:2px !important;padding:10px !important;border-radius:18px !important;background:var(--kc-glass-strong) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important}
  html body:not(#kc) .topbar .nav.open{display:flex !important}
  html body:not(#kc) .topbar .nav a{color:var(--text) !important;padding:13px 14px !important}
  html body:not(#kc) .topbar .nav a.nav-cta{margin:6px 0 0 !important;text-align:center !important}
}

/* ---------- Surfaces ---------- */
html body:not(#kc) .card,html body:not(#kc) .step-page.card{
  background:var(--kc-glass) !important;
  border:1px solid var(--border) !important;
  box-shadow:var(--shadow) !important;
  backdrop-filter:blur(18px) saturate(130%) !important;-webkit-backdrop-filter:blur(18px) saturate(130%) !important;
}
html body:not(#kc) .step-page.card{border-radius:26px !important;position:relative;overflow:visible}
html body:not(#kc) .step-page.card::before{
  content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--kc-accent) 70%,transparent),transparent);
}
html body:not(#kc) .card .card,html body:not(#kc) .inner-card,html body:not(#kc) .panel-block{
  background:color-mix(in srgb,var(--surface) 72%,transparent) !important;
  border-color:var(--border) !important;box-shadow:none !important;
}
html[data-theme="light"] body:not(#kc) .card .card,html[data-theme="light"] body:not(#kc) .inner-card,html[data-theme="light"] body:not(#kc) .panel-block{background:rgba(255,255,255,.72) !important}

/* Headings */
html body:not(#kc) .page-kicker,html body:not(#kc) .eyebrow{color:var(--kc-accent) !important;letter-spacing:.14em !important}
html body:not(#kc) .page-copy h2{letter-spacing:-.04em !important;font-weight:850 !important;font-size:clamp(26px,3.2vw,36px) !important;line-height:1.08 !important}
html body:not(#kc) .page-copy p{color:var(--muted) !important}

/* ---------- Stepper ---------- */
html body:not(#kc) .step-progress.kc-stepper{
  background:var(--kc-glass) !important;border:1px solid var(--border) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.25) !important;
}
html body:not(#kc) .kc-stepper .step-pill{
  background:transparent !important;border-color:var(--border) !important;color:var(--muted) !important;
  transition:background .2s,border-color .2s,color .2s,transform .2s !important;
}
html body:not(#kc) .kc-stepper .step-pill:hover{color:var(--text) !important;border-color:var(--border-strong) !important}
html body:not(#kc) .kc-stepper .step-pill span{background:color-mix(in srgb,var(--text) 8%,transparent) !important;border-color:var(--border-strong) !important;color:var(--text) !important}
html body:not(#kc) .kc-stepper .step-pill.is-complete{color:var(--text) !important;border-color:color-mix(in srgb,var(--kc-accent) 35%,transparent) !important;background:color-mix(in srgb,var(--kc-accent) 8%,transparent) !important}
html body:not(#kc) .kc-stepper .step-pill.is-complete span{background:color-mix(in srgb,var(--kc-accent) 22%,transparent) !important;border-color:transparent !important;color:var(--kc-accent) !important}
html body:not(#kc) .kc-stepper .step-pill.is-active{
  color:#fff !important;border-color:transparent !important;
  background:linear-gradient(135deg,var(--kc-accent),var(--kc-accent-2)) !important;
  box-shadow:0 10px 30px var(--kc-glow) !important;
}
html body:not(#kc) .kc-stepper .step-pill.is-active span{background:rgba(255,255,255,.22) !important;border-color:rgba(255,255,255,.35) !important;color:#fff !important}
html body:not(#kc) .kc-stepper .step-pill.is-active strong{color:#fff !important}

/* Front / Back tabs */
html body:not(#kc) .side-step-tabs{background:var(--kc-glass) !important;border:1px solid var(--border) !important}
html body:not(#kc) .side-step-tab{color:var(--muted) !important;background:transparent !important}
html body:not(#kc) .side-step-tab:hover{color:var(--text) !important}
html body:not(#kc) .side-step-tab.is-active,html body:not(#kc) .side-step-tab[aria-selected="true"],html body:not(#kc) .side-step-tab.active{
  color:#fff !important;background:linear-gradient(135deg,var(--kc-accent),var(--kc-accent-2)) !important;box-shadow:0 8px 22px var(--kc-glow) !important;
}

/* ---------- Buttons ---------- */
html body:not(#kc) .btn:not(.secondary),html body:not(#kc) .report-download__trigger{
  color:#fff !important;
  background:linear-gradient(135deg,var(--kc-accent),var(--kc-accent-2)) !important;
  border:1px solid transparent !important;
  box-shadow:0 12px 30px var(--kc-glow),inset 0 1px 0 rgba(255,255,255,.22) !important;
  border-radius:14px !important;
  transition:transform .18s,box-shadow .18s,filter .18s,opacity .18s !important;
}
html body:not(#kc) .btn:not(.secondary):hover,html body:not(#kc) .report-download__trigger:hover{transform:translateY(-2px) !important;filter:brightness(1.06) !important;box-shadow:0 16px 38px var(--kc-glow),inset 0 1px 0 rgba(255,255,255,.22) !important}
html body:not(#kc) .btn:not(.secondary) *,html body:not(#kc) .report-download__trigger *{color:#fff !important}
html body:not(#kc) .btn:disabled,html body:not(#kc) .btn[disabled],html body:not(#kc) .btn[aria-disabled="true"]{opacity:.45 !important;filter:saturate(.6) !important;transform:none !important;box-shadow:none !important;cursor:not-allowed !important}
html body:not(#kc) .btn.secondary{
  color:var(--text) !important;background:color-mix(in srgb,var(--text) 5%,transparent) !important;
  border:1px solid var(--border-strong) !important;box-shadow:none !important;border-radius:14px !important;
}
html body:not(#kc) .btn.secondary:hover{border-color:color-mix(in srgb,var(--kc-accent) 55%,transparent) !important;background:color-mix(in srgb,var(--kc-accent) 8%,transparent) !important}

/* ---------- Upload ---------- */
html body:not(#kc) .upload-dropzone{
  border:1.5px dashed color-mix(in srgb,var(--kc-accent) 38%,var(--border)) !important;
  border-radius:22px !important;
  background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--kc-accent) 10%,transparent),transparent 70%),color-mix(in srgb,var(--surface) 55%,transparent) !important;
  transition:border-color .2s,background .2s,transform .2s !important;
}
html body:not(#kc) .upload-dropzone:hover,html body:not(#kc) .upload-dropzone.is-dragover{border-color:var(--kc-accent) !important;background:radial-gradient(circle at 50% 0%,color-mix(in srgb,var(--kc-accent) 18%,transparent),transparent 75%),color-mix(in srgb,var(--surface) 60%,transparent) !important}
html body:not(#kc) .dropzone-icon{
  color:var(--kc-accent) !important;border-radius:18px !important;
  background:color-mix(in srgb,var(--kc-accent) 12%,transparent) !important;
  border:1px solid color-mix(in srgb,var(--kc-accent) 32%,transparent) !important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--kc-accent) 18%,transparent) !important;
}
html body:not(#kc) .file-chip{background:color-mix(in srgb,var(--surface) 70%,transparent) !important;border-color:color-mix(in srgb,var(--kc-accent) 35%,transparent) !important}
html body:not(#kc) .file-side-label{color:var(--kc-accent) !important}

/* ---------- Editor controls ---------- */
html body:not(#kc) .preview-slider,html body:not(#kc) .edge-adjust-slider{accent-color:var(--kc-accent) !important}
html body:not(#kc) .preview-number-input,html body:not(#kc) .edge-adjust-input{background:color-mix(in srgb,var(--bg) 55%,transparent) !important;border-color:var(--border-strong) !important;color:var(--text) !important}
html body:not(#kc) .preview-number-input:focus,html body:not(#kc) .edge-adjust-input:focus{border-color:var(--kc-accent) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--kc-accent) 22%,transparent) !important}
html body:not(#kc) .edge-adjust-step,html body:not(#kc) .edge-adjust-reset,html body:not(#kc) .preview-mini-reset-btn{border-color:var(--border-strong) !important;color:var(--text) !important;background:color-mix(in srgb,var(--text) 5%,transparent) !important}
html body:not(#kc) .edge-adjust-step:hover,html body:not(#kc) .edge-adjust-reset:hover,html body:not(#kc) .preview-mini-reset-btn:hover{border-color:var(--kc-accent) !important;color:var(--kc-accent) !important}
html body:not(#kc) .edge-adjustment-card h4,html body:not(#kc) .grades-title,html body:not(#kc) .result-side-section h4,html body:not(#kc) .result-grades-title{color:var(--kc-accent) !important}
html body:not(#kc) .canvas-wrap{background:color-mix(in srgb,var(--bg) 70%,transparent) !important}
html body:not(#kc) .editor-measurement-hint{color:var(--muted) !important}

/* ---------- Results ---------- */
html body:not(#kc) .result-box{background:color-mix(in srgb,var(--surface) 70%,transparent) !important;border-color:var(--border) !important}
html body:not(#kc) .grade-pill-card{border-radius:14px !important}
html body:not(#kc) .report-download__menu{background:var(--kc-glass-strong) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow) !important;backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important}
html body:not(#kc) .report-download__item:hover{background:color-mix(in srgb,var(--kc-accent) 12%,transparent) !important}

/* ---------- Modals ---------- */
html body:not(#kc) .policy-dialog::backdrop{background:rgba(5,4,6,.65) !important;backdrop-filter:blur(4px)}
html body:not(#kc) .policy-dialog-card,html body:not(#kc) .workflow-warning-card{background:var(--kc-glass-strong) !important;border:1px solid var(--border) !important;box-shadow:var(--shadow) !important}
html[data-theme="dark"] body:not(#kc) .policy-dialog-card,html[data-theme="dark"] body:not(#kc) .workflow-warning-card{background:#141114 !important}

/* ---------- Footer ---------- */
html body:not(#kc) .site-footer{background:transparent !important;border:0 !important;border-top:1px solid var(--border) !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;font-size:14px !important}
html body:not(#kc) .site-footer .footer-link{font-size:14px !important;font-weight:650 !important;color:var(--muted) !important}
html body:not(#kc) .site-footer .footer-link:hover{color:var(--text) !important}
html body:not(#kc) .footer-copy{font-size:14px !important;color:var(--muted) !important}

/* ---------- Misc ---------- */
html body:not(#kc) .skip-link{background:var(--kc-accent) !important;color:#fff !important}
html body:not(#kc) :focus-visible{outline:3px solid color-mix(in srgb,var(--kc-accent) 75%,white) !important;outline-offset:3px}
::selection{background:color-mix(in srgb,var(--kc-accent) 40%,transparent)}
html body:not(#kc) .skip-link:not(:focus-visible){transform:translateY(-200%) !important}
@media (max-width:860px){
  html[data-theme="dark"] body:not(#kc) header.topbar .nav,html body:not(#kc) header.topbar .nav{background:#141114 !important}
  html[data-theme="light"] body:not(#kc) header.topbar .nav{background:#ffffff !important}
}