@media(min-width:901px){.panel-right{position:relative}}
.panel-right>.panel-scroll{height:100%}
.feedback-launch{display:block;margin:12px auto;padding:9px 16px;border:1px solid var(--border);border-radius:20px;background:transparent;color:var(--text);font:inherit;font-size:12px;cursor:pointer}
.feedback-sheet{position:absolute;inset:0;z-index:5;overflow:auto;padding:24px;background:var(--bg-elev-1);color:var(--text);animation:feedback-slide .22s cubic-bezier(.2,.7,.3,1)}
.feedback-sheet[hidden]{display:none}
.feedback-open>.panel-scroll{visibility:hidden}
.feedback-back{border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;padding:0;cursor:pointer}
.feedback-eyebrow{margin:35px 0 12px;color:var(--text-dim);font-size:9px;letter-spacing:1.5px}
.feedback-sheet h2{font-size:30px;line-height:1.15;margin:0 0 16px;font-weight:500;letter-spacing:-1px}
.feedback-description{font-size:13px;line-height:1.6;color:var(--text-dim);margin-bottom:28px}
.feedback-sheet fieldset{border:0;margin:0 0 24px;padding:0}
.feedback-sheet legend,.feedback-label{font-size:12px;margin-bottom:12px}
.feedback-sheet fieldset label{display:block;border:1px solid var(--border);padding:12px;margin-top:8px;border-radius:9px;font-size:13px;cursor:pointer}
.feedback-sheet input[type=radio]{accent-color:var(--accent);margin-right:8px}
.feedback-label{display:block;margin-bottom:20px}
.feedback-label span{color:var(--text-dim);margin-left:5px}
.feedback-label textarea,.feedback-label input{display:block;box-sizing:border-box;width:100%;margin-top:9px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--text);font:inherit;font-size:13px;resize:vertical}
.feedback-preview-note{font-size:11px;line-height:1.6;color:var(--text-dim)}
.feedback-submit{width:100%;border:0;border-radius:9px;padding:13px;background:var(--accent,#7c5cff);color:white;font:inherit;font-size:13px;cursor:pointer}
.feedback-status{font-size:12px;color:var(--text-dim)}
@keyframes feedback-slide{0%{transform:translateX(18px);opacity:0}80%{transform:translateX(-1px);opacity:1}100%{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.feedback-sheet{animation:none}}

/* A soft colour thread connects each toolbar control with its panel. */
#toggleLeftPanel{color:#79b8da;border-color:rgba(87,160,203,.3);background:rgba(87,160,203,.07)}
#toggleRightPanel{color:#b2a0ed;border-color:rgba(154,125,232,.3);background:rgba(154,125,232,.07)}
#feedbackButton{color:#dc9db8;border-color:rgba(214,135,166,.3);background:rgba(214,135,166,.07)}
.panel-left{box-shadow:inset 0 0 0 1px rgba(87,160,203,.2)}
.panel-right{box-shadow:inset 0 0 0 1px rgba(154,125,232,.2)}
.feedback-sheet{box-shadow:inset 0 0 0 1px rgba(214,135,166,.25);border-top:2px solid rgba(214,135,166,.35)}
.panel-left>.panel-scroll{border-top:2px solid rgba(87,160,203,.3)}
.panel-right>.panel-scroll{border-top:2px solid rgba(154,125,232,.3)}
#feedbackButton[aria-expanded=true]{background:rgba(214,135,166,.14);border-color:rgba(214,135,166,.5)}
@media(max-width:900px){.panel{transition:transform .22s cubic-bezier(.2,.7,.3,1)}}
@media(prefers-reduced-motion:reduce){.panel{transition:none}}
@media(max-width:900px){.panel-left.open{animation:tools-panel-arrive .22s cubic-bezier(.2,.7,.3,1)}.panel-right.open{animation:feedback-slide .22s cubic-bezier(.2,.7,.3,1)}}
@keyframes tools-panel-arrive{0%{transform:translateX(-18px);opacity:0}80%{transform:translateX(1px);opacity:1}100%{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.panel-left.open,.panel-right.open{animation:none}}

/* Tutorial uses the same panel language, in warm amber. */
#tourBtn{color:#dcc18a;border-color:rgba(222,184,112,.3);background:rgba(222,184,112,.07)}
.tour-menu{background:transparent;pointer-events:none}
.tour-menu .tour-menu-card,.tutorial-active .tour-card{position:fixed;top:56px;bottom:0;right:0;left:auto;width:var(--panel-w);max-width:320px;height:auto;max-height:none;overflow-y:auto;border-radius:0;margin:0;padding:24px;background:var(--bg-elev-1);border:1px solid rgba(222,184,112,.25);border-top:2px solid rgba(222,184,112,.35);box-shadow:none;pointer-events:auto;animation:feedback-slide .22s cubic-bezier(.2,.7,.3,1)}
.tutorial-on-left .tour-card{left:0;right:auto}
.tutorial-on-left #leftPanel>.panel-scroll,.tutorial-on-right #rightPanel>.panel-scroll{visibility:hidden}
.tutorial-active .tour-card h4{font-size:24px;margin:24px 0 16px}
.tutorial-active .tour-card p{line-height:1.8}
.tutorial-active .tour-foot{flex-direction:column;align-items:stretch;gap:20px;margin-top:28px}
.tutorial-active .tour-actions{justify-content:space-between;flex-wrap:wrap}
.tutorial-active .tour-badge{color:#dcc18a}
.tutorial-active .tour-arrow{display:none}
@media(max-width:900px){.tutorial-active .tour-card{top:auto;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:42vh}.tutorial-active .panel.open{bottom:42vh}.tutorial-on-left #leftPanel>.panel-scroll,.tutorial-on-right #rightPanel>.panel-scroll{visibility:visible}}
@media(prefers-reduced-motion:reduce){.tour-menu .tour-menu-card,.tutorial-active .tour-card{animation:none}}
.tutorial-menu-active #rightPanel>.panel-scroll{visibility:hidden}
/* Keep panel-switching icons available during the guided tutorial. */
.tutorial-active .topbar,.tutorial-menu-active .topbar{z-index:100001}
#aboutBtn{color:#ce86da;border-color:rgba(194,83,211,.3);background:rgba(194,83,211,.07)}
#aboutOverlay{top:56px;left:auto;right:0;bottom:0;width:var(--panel-w);background:transparent;backdrop-filter:none;align-items:stretch;justify-content:stretch;padding:0;pointer-events:none}
#aboutOverlay .about-card{width:100%;height:100%;max-height:none;margin:0;border-radius:0;overflow-y:auto;pointer-events:auto;border:1px solid rgba(194,83,211,.25);border-top:2px solid rgba(194,83,211,.35);background:var(--bg-elev-1);box-shadow:none}
#aboutOverlay.open .about-card{animation:feedback-slide .22s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){#aboutOverlay.open .about-card{animation:none}}
#aboutOverlay .about-card{scrollbar-width:none;-ms-overflow-style:none}#aboutOverlay .about-card::-webkit-scrollbar{display:none}

/* One type scale for Feedback, Tutorial and Info. */
:root{--aux-heading-size:24px;--aux-body-size:13px;--aux-label-size:12px;--aux-caption-size:11px}
.feedback-sheet,.tour-menu-card,.tour-card,#aboutOverlay .about-card{font-family:inherit;color:var(--text);font-size:var(--aux-body-size);line-height:1.65}
.feedback-sheet h2,.tour-menu .tour-menu-card h4,.tutorial-active .tour-card h4,#aboutOverlay .result-header h2{font-family:inherit;font-size:var(--aux-heading-size);font-weight:600;line-height:1.25;letter-spacing:-.5px;color:var(--text);margin:0 0 16px}
.feedback-sheet .feedback-description,.tour-menu-card>p,.tutorial-active .tour-card p,#aboutOverlay .about-body p{font-size:var(--aux-body-size);font-weight:400;line-height:1.65;color:var(--text-dim);margin:0 0 24px}
.feedback-eyebrow,.tutorial-active .tour-badge,#aboutOverlay .about-notes-head{font-size:var(--aux-caption-size);font-weight:600;line-height:1.4;letter-spacing:1px;text-transform:uppercase;margin:0 0 16px}
.feedback-sheet legend,.feedback-label,.tour-chapter .t{font-size:var(--aux-label-size);font-weight:600;line-height:1.5;letter-spacing:0;color:var(--text)}
.feedback-label span,.feedback-preview-note,.feedback-status,.tour-chapter .s{font-size:var(--aux-caption-size);font-weight:400;line-height:1.5;color:var(--text-dim)}
.feedback-sheet fieldset label,.feedback-label textarea,.feedback-label input,.feedback-submit,.tour-btn,#aboutOverlay .linkedin-link{font-size:var(--aux-body-size);line-height:1.5}
.tutorial-active .tour-card h4{margin-top:24px}
#aboutOverlay .about-card{padding:24px}
#aboutOverlay .result-header{padding:0;border-bottom:0;align-items:flex-start}
#aboutOverlay .result-header h2{flex:1}
#aboutOverlay .about-body{padding:0;overflow:visible;gap:0}
#aboutOverlay .about-body .about-notes-head{margin-top:24px}
/* Keep tutorial fireflies above the toolbar, while its buttons remain usable. */
.tutorial-active #tour{z-index:100002;pointer-events:none}
.tutorial-active #tour .tour-block{top:56px;pointer-events:auto}
.tutorial-active #tour .tour-card{pointer-events:auto}

.feedback-sheet .feedback-stars{display:flex;gap:5px;margin-top:10px}
.feedback-sheet .feedback-stars label{position:relative;margin:0;padding:5px;border:0;color:var(--text-dim);font-size:27px;line-height:1;cursor:pointer}
.feedback-stars input{position:absolute;opacity:0;width:1px;height:1px}
.feedback-sheet .feedback-stars label:nth-child(1){--star-colour:#ff8b45}
.feedback-sheet .feedback-stars label:nth-child(2){--star-colour:#ff638d}
.feedback-sheet .feedback-stars label:nth-child(3){--star-colour:#d653d9}
.feedback-sheet .feedback-stars label:nth-child(4){--star-colour:#8b45e8}
.feedback-sheet .feedback-stars label:nth-child(5){--star-colour:#389ed1}
.feedback-sheet .feedback-stars label.rated{color:var(--star-colour);text-shadow:0 0 9px color-mix(in srgb,var(--star-colour) 30%,transparent)}
.feedback-stars label:focus-within{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.feedback-rating-note{display:block;margin-top:8px;font-size:11px;color:var(--text-dim)}
.admin-tabs{display:flex;gap:8px;margin-bottom:20px}
.admin-tabs button,#refreshFeedback{padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-elev-1);color:var(--text);cursor:pointer}
.admin-tabs button[aria-selected=true]{background:rgba(124,92,255,.15);border-color:var(--accent)}
.feedback-admin-header{display:flex;align-items:center;justify-content:space-between}
.admin-feedback-item{border:1px solid var(--border);border-radius:10px;padding:16px;margin-top:12px}
.admin-feedback-item h4{margin:0 0 6px;font-size:14px}
.admin-feedback-meta{color:var(--text-dim);font-size:12px;margin:5px 0;overflow-wrap:anywhere}
.admin-feedback-message{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-feedback-rating{color:#f3bf74;font-size:16px;margin:10px 0}

#aboutOverlay .about-body .about-legal,#aboutOverlay .about-body .about-notes{margin-top:24px}
/* Tutorial controls follow the selected studio appearance. */
.tour-chapter{background:var(--bg-elev-2,var(--bg-elev-1));color:var(--text);border-color:var(--border)}
.tour-chapter .s{color:var(--text-dim)}
.tour-skip{color:var(--text-dim)}
.tour-skip:hover{color:var(--text)}
.tour-back{background:var(--bg-elev-2,var(--bg-elev-1));color:var(--text);border:1px solid var(--border)}
html[data-theme="paper"] #tourBtn,html[data-theme="paper"] .tutorial-active .tour-badge{color:#88601f}
html[data-theme="paper"] .tour-chapter.done .t{color:#357346}

.tutorial-active .tour-card p b{color:var(--text)}
.tutorial-active .tour-dot{background:var(--border)}
.tutorial-active .tour-dot.on{background:var(--accent)}

/* Icon reference follows the selected appearance. */
.tour-icon-guide{margin:0}
.tour-icon-row{padding:16px 0;border-bottom:1px solid var(--border)}
.tour-icon-row dt{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--text)}
.tour-icon-symbol{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;color:var(--text)}
.tour-icon-symbol svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tour-icon-row dd{margin:8px 0 0 44px;font-size:var(--aux-body-size);line-height:1.65;color:var(--text-dim)}
#iconGuideBack{margin-bottom:20px;cursor:pointer}
#iconGuideBack:focus-visible,#tourIconsBtn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Hide feedback prompts while their fields are focused. */
.feedback-label textarea:focus::placeholder,.feedback-label input[name=email]:focus::placeholder{color:transparent;opacity:0}

.feedback-sheet .feedback-rating legend{margin-bottom:2px}
.feedback-sheet .feedback-rating .feedback-stars{margin-top:0}

/* Consistent label-to-control spacing across feedback fields. */
.feedback-sheet .feedback-label textarea,.feedback-sheet .feedback-label input[name=email]{margin-top:9px}
.feedback-sheet fieldset:not(.feedback-rating) legend{margin-bottom:0}
.feedback-sheet fieldset:not(.feedback-rating) legend + label{margin-top:9px}
#analyticsVouchers>p{color:var(--text-dim);font-size:13px;line-height:1.6}
.voucher-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.voucher-form label,#voucherResults label{display:flex;flex-direction:column;gap:8px;font-size:13px}
.voucher-form input,#voucherCodes{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-elev-1);color:var(--text);font:inherit}
#voucherSummary{grid-column:1/-1;font-size:13px;color:var(--text-dim);margin:0;line-height:1.6}
#analyticsVouchers button{padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--bg-elev-1);color:var(--text);cursor:pointer}
#analyticsVouchers button:disabled{opacity:.5;cursor:wait}
#voucherCodes{display:block;font-family:monospace;margin:8px 0;resize:vertical}
#voucherResults{margin-bottom:24px}
.voucher-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.voucher-row button{font-family:monospace;white-space:nowrap}
.voucher-row span{font-size:12px;color:var(--text-dim);overflow-wrap:anywhere}
@media(max-width:540px){.voucher-form{grid-template-columns:1fr}.voucher-row{align-items:flex-start;flex-direction:column}}