/* 2025 Feedback App – Auto‑switching CSS Theme ------------------------------------------------- • Modern soft-neo-glass aesthetic with subtle depth • Auto light/dark via prefers-color-scheme, with optional manual override using [data-theme] • Variable fonts, fluid spacing, rounded geometry, micro-interactions • Accessible focus states, reduced motion support, high-contrast tweaks HOW TO OVERRIDE THEME MANUALLY (optional): or TIP: Include in for form controls. */ /* ------------------------------- 0) CSS Reset + Base ---------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[role='list'], ol[role='list'] { list-style: none; } img, picture { max-width: 100%; display: block; } input, button, textarea, select { font: inherit; } .is-hidden { display: none !important; } :where([hidden]) { display: none !important; } :root { /* Let UA know we support both schemes for builtin widgets */ color-scheme: light dark; /* Type scale */ --font-sans: "InterVariable", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-weight-normal: 450; --font-weight-strong: 700; --font-size-0: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem); --font-size-1: clamp(1.0rem, 0.98rem + 0.2vw, 1.125rem); --font-size-2: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem); --font-size-3: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); /* Radius + Elevation */ --radius-sm: 12px; --radius-md: 16px; --radius-lg: 24px; --shadow-1: 0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06); --shadow-2: 0 10px 30px rgba(0,0,0,0.14), 0 3px 10px rgba(0,0,0,0.1); /* Spacing (fluid) */ --space-1: clamp(6px, 0.4vw, 10px); --space-2: clamp(10px, 0.7vw, 14px); --space-3: clamp(14px, 1vw, 20px); --space-4: clamp(18px, 1.2vw, 26px); --space-5: clamp(24px, 1.6vw, 34px); /* Brand – luminous gradient */ --brand-1: #00e0ff; --brand-2: #ff4ecd; --brand-3: #ffaa00; --brand-gradient: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3)); /* Semantic color tokens will be defined in schemes below */ } /* ------------------------------- 1) Color Schemes (auto) Default: follow user's prefers-color-scheme ---------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0e0f12; /* canvas */ --bg-elev-1: rgba(255,255,255,0.04); --bg-elev-2: rgba(255,255,255,0.06); --surface: #14161b; /* solid surfaces */ --text-1: #e8e9ef; /* primary text */ --text-2: #b7bbc7; /* secondary */ --text-3: #8d93a3; /* tertiary */ --stroke-1: rgba(255,255,255,0.08); --focus-ring: rgba(0, 224, 255, 0.35); --accent: #5ae1ff; /* default accent */ --accent-contrast: #082027; --success: #4ade80; /* green 400 */ --warning: #fbbf24; /* amber 400 */ --danger: #fb7185; /* rose 400 */ --glass: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.10); --glass-sheen: rgba(255,255,255,0.06); } } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f6f7fb; --bg-elev-1: rgba(0,0,0,0.02); --bg-elev-2: rgba(0,0,0,0.04); --surface: #ffffff; --text-1: #1c1f26; --text-2: #3b4251; --text-3: #6b7280; --stroke-1: rgba(0,0,0,0.08); --focus-ring: rgba(0, 160, 200, 0.35); --accent: #007aff; /* iOS-ish blue */ --accent-contrast: #ffffff; --success: #16a34a; /* green 600 */ --warning: #d97706; /* amber 700 */ --danger: #e11d48; /* rose 700 */ --glass: rgba(255,255,255,0.6); --glass-border: rgba(0,0,0,0.08); --glass-sheen: rgba(255,255,255,0.5); } } /* Manual override via [data-theme] attribute */ :root[data-theme="dark"] { --bg: #0e0f12; --bg-elev-1: rgba(255,255,255,0.04); --bg-elev-2: rgba(255,255,255,0.06); --surface: #14161b; --text-1: #e8e9ef; --text-2: #b7bbc7; --text-3: #8d93a3; --stroke-1: rgba(255,255,255,0.08); --focus-ring: rgba(0, 224, 255, 0.35); --accent: #5ae1ff; --accent-contrast: #082027; --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --glass: rgba(255,255,255,0.07); --glass-border: rgba(255,255,255,0.10); --glass-sheen: rgba(255,255,255,0.06); } :root[data-theme="light"] { --bg: #f6f7fb; --bg-elev-1: rgba(0,0,0,0.02); --bg-elev-2: rgba(0,0,0,0.04); --surface: #ffffff; --text-1: #1c1f26; --text-2: #3b4251; --text-3: #6b7280; --stroke-1: rgba(0,0,0,0.08); --focus-ring: rgba(0, 160, 200, 0.35); --accent: #007aff; --accent-contrast: #ffffff; --success: #16a34a; --warning: #d97706; --danger: #e11d48; --glass: rgba(255,255,255,0.6); --glass-border: rgba(0,0,0,0.08); --glass-sheen: rgba(255,255,255,0.5); } /* ------------------------------- 2) App Base Styles ---------------------------------- */ html { font-family: var(--font-sans); } body { background: radial-gradient(1200px 800px at 10% -20%, rgba(255,78,205,0.08), transparent 60%), radial-gradient(900px 600px at 110% 10%, rgba(0,224,255,0.08), transparent 60%), var(--bg); color: var(--text-1); line-height: 1.45; font-weight: var(--font-weight-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: min(1100px, 92vw); margin: 0 auto; padding: var(--space-4) var(--space-2); } h1 { font-size: var(--font-size-3); letter-spacing: -0.02em; } h2 { font-size: var(--font-size-2); letter-spacing: -0.02em; color: var(--text-2); } h3 { font-size: 1.15rem; color: var(--text-2); } p { font-size: var(--font-size-1); color: var(--text-2); } small, .muted { color: var(--text-3); font-size: var(--font-size-0); } /* ------------------------------- 3) Utilities ---------------------------------- */ .u-gradient-text { background: var(--brand-gradient); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradMove 8s ease infinite; } @keyframes gradMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .u-glass { background: var(--glass); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border: 1px solid var(--glass-border); } .u-ring { box-shadow: 0 0 0 3px var(--focus-ring); } .u-center { display: grid; place-items: center; } .u-stack > * + * { margin-top: var(--space-3); } .u-grid { display: grid; gap: var(--space-3); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------- 4) Components ---------------------------------- */ /* Card */ .card { border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-elev-2), transparent), var(--surface); border: 1px solid var(--stroke-1); box-shadow: var(--shadow-1); } .card--glass { border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } .card__header { padding: var(--space-4); padding-bottom: 0; display: flex; align-items: center; } .card__header + .card__body { padding-top: var(--space-3); } .card__body { padding: var(--space-4); } .card__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--stroke-1); display: flex; gap: var(--space-2); justify-content: flex-end; } /* Buttons */ .button { --btn-bg: var(--bg-elev-1); --btn-fg: var(--text-1); --btn-border: var(--stroke-1); display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; will-change: transform; } .button:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 24px rgba(0,0,0,.12); } .button:active { transform: translateY(0) scale(.98); } .button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .button--primary { --btn-bg: radial-gradient(120% 120% at 30% 10%, rgba(255,255,255,.12), transparent), var(--brand-gradient); --btn-fg: var(--accent-contrast); border: none; } .button--ghost { background: transparent; border: 1px solid var(--stroke-1); } .button--danger { --btn-bg: linear-gradient(180deg, rgba(251,113,133,.2), transparent), var(--danger); color: #fff; border: none; } .button--icon { padding: 8px; border-radius: var(--radius-md); min-width: 0; justify-content: center; } .button--icon svg { width: 1.25rem; height: 1.25rem; } /* Inputs */ .input, .select, .textarea { width: 100%; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-1); transition: box-shadow .2s ease, background .2s ease, border-color .2s ease; } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .select:focus, .textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } /* Badges / Chips */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-2); font-size: 0.85rem; } .chip--accent { background: rgba(0,224,255,.12); color: var(--accent); border-color: transparent; } .chip--required { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent); border-color: transparent; } .chip--optional { background: var(--bg-elev-1); color: var(--text-3); border-color: var(--stroke-1); } /* Toast */ .toast { position: fixed; right: var(--space-4); bottom: var(--space-4); min-width: 260px; max-width: 420px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--stroke-1); box-shadow: var(--shadow-2); display: grid; gap: 6px; } .toast--success { border-color: color-mix(in oklab, var(--success) 40%, transparent); } .toast--warning { border-color: color-mix(in oklab, var(--warning) 40%, transparent); } .toast--danger { border-color: color-mix(in oklab, var(--danger) 40%, transparent); } /* Modal */ .modal { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-5); background: color-mix(in srgb, var(--bg) 40%, transparent); backdrop-filter: blur(6px); } .modal__panel { width: min(680px, 96vw); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--stroke-1); box-shadow: var(--shadow-2); overflow: clip; } .modal__header, .modal__footer { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--stroke-1); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .modal__footer { border-top: 1px solid var(--stroke-1); border-bottom: none; justify-content: flex-end; } .modal__body { padding: var(--space-4); } /* Nav / Toolbar */ .navbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--space-2); padding: 10px 14px; border-radius: 18px; margin: var(--space-3) auto; width: min(1100px, 94vw); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--glass-border); background: linear-gradient(180deg, var(--bg-elev-2), transparent); box-shadow: var(--shadow-1); } .navbar__branding { display: grid; gap: 2px; line-height: 1.1; } .navbar__title { font-weight: var(--font-weight-strong); letter-spacing: -0.02em; } .navbar__tagline { margin: 0; font-size: 0.75rem; font-weight: var(--font-weight-medium); color: var(--text-3); letter-spacing: 0.04em; } .navbar__links { display: flex; align-items: center; gap: var(--space-2); } .navbar__link { font-weight: var(--font-weight-medium); } .navbar__spacer { flex: 1; } /* Progress / Sentiment Bar (feedback-specific) */ .sentiment { height: 10px; border-radius: 999px; overflow: hidden; background: var(--bg-elev-1); border: 1px solid var(--stroke-1); } .sentiment__fill { height: 100%; background: var(--brand-gradient); background-size: 200% 200%; animation: gradMove 6s ease infinite; } /* Feedback item */ .feedback-item { display: grid; gap: 10px; padding: var(--space-3); border-radius: var(--radius-md); background: linear-gradient(180deg, var(--bg-elev-1), transparent); border: 1px solid var(--stroke-1); } .feedback-item__meta { display: flex; gap: 12px; align-items: center; color: var(--text-3); font-size: 0.9rem; } .feedback-item__title { font-weight: 600; color: var(--text-1); } .feedback-item__tags { display: flex; flex-wrap: wrap; gap: 8px; } /* ------------------------------- 5) States & Interactions ---------------------------------- */ :where(a, button, .button) { -webkit-tap-highlight-color: transparent; } :where(a, .link) { color: var(--accent); text-decoration: none; } :where(a, .link):hover { text-decoration: underline; } /* Tilt + float on hover (use sparingly) */ .floaty { transition: transform .3s ease, box-shadow .3s ease; will-change: transform; } .floaty:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } /* Focus visibility */ :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 8px; } /* ------------------------------- 6) Layout helpers ---------------------------------- */ .grid-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat( auto-fit, minmax(260px, 1fr) ); align-items: start; } .stack { display: grid; gap: var(--space-3); } .live-owner-controls__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .live-owner-controls__actions .button { min-width: 6rem; } .row { display: flex; gap: var(--space-2); align-items: center; } .welcome-card { position: relative; overflow: hidden; } .welcome-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 0% 0%, rgba(255, 78, 205, 0.15), transparent 60%), radial-gradient(100% 120% at 90% 20%, rgba(0, 224, 255, 0.18), transparent 65%); opacity: 0.85; pointer-events: none; } .welcome-card__body { position: relative; } .welcome-card__heading { font-size: var(--font-size-2); letter-spacing: -0.02em; color: var(--text-2); } .welcome-card__content p { color: var(--text-2); } .welcome-card__emphasis, .welcome-card__tagline { font-weight: var(--font-weight-strong); color: var(--text-1); } .welcome-card__dismiss { position: absolute; top: var(--space-3); right: var(--space-3); --btn-bg: transparent; border: none; color: var(--text-3); box-shadow: none; } .welcome-card__dismiss:hover { color: var(--text-1); } .welcome-card__dismiss span { font-size: 1.25rem; line-height: 1; } /* Container Query example: make cards denser in tight columns */ @container card (max-width: 340px) { .card__body { padding: var(--space-3); } } .card { container-type: inline-size; container-name: card; } /* ------------------------------- 7) Reduced Motion ---------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------- 8) High Contrast tweak (optional) ---------------------------------- */ @media (forced-colors: active) { .u-glass, .card, .modal__panel, .input, .button { border: 1px solid CanvasText; } } /* ------------------------------- 9) Example helper classes for error/success toasts, badges ---------------------------------- */ .badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-weight: 600; border: 1px solid var(--stroke-1); background: var(--bg-elev-1); color: var(--text-2); } .badge--success { background: color-mix(in oklab, var(--success) 20%, transparent); color: var(--success); border-color: transparent; } .badge--warning { background: color-mix(in oklab, var(--warning) 20%, transparent); color: var(--warning); border-color: transparent; } .badge--danger { background: color-mix(in oklab, var(--danger) 20%, transparent); color: var(--danger); border-color: transparent; } /* ------------------------------- 10) Table (lightweight, scrollable) ---------------------------------- */ .table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--stroke-1); border-radius: var(--radius-md); overflow: hidden; } .table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--stroke-1); text-align: left; } .table thead th { font-size: 0.9rem; color: var(--text-3); font-weight: 600; } .table tr:hover { background: var(--bg-elev-1); } .table__actions { text-align: right; white-space: nowrap; } .table-wrapper { width: 100%; overflow-x: auto; } .admin-panel__header { align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .admin-panel__title { margin: 0; } .admin-section { gap: var(--space-3); } .admin-section__header { align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; } .admin-statistics { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .admin-statistics__item { padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-elev-1); border: 1px solid var(--stroke-1); display: grid; gap: var(--space-1); } .admin-statistics__item dt { margin: 0; font-size: 0.85rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; } .admin-statistics__value { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2.1rem); font-weight: 700; color: var(--text-1); } .admin-statistics__value::after { content: attr(data-suffix); font-size: 0.8rem; margin-left: 0.25rem; color: var(--text-3); } .admin-section .button { align-self: flex-start; } .admin-section__header > h3 { margin: 0; } /* ------------------------------- 11) Tiny helpers for forms in feedback app ---------------------------------- */ .form { display: grid; gap: var(--space-3); } .label { font-size: 0.9rem; color: var(--text-2); } .help { font-size: 0.85rem; color: var(--text-3); } .form-switch { display: grid; gap: var(--space-2); } .switch { display: grid; position: relative; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); cursor: pointer; } .switch__input { position: absolute; opacity: 0; width: 0; height: 0; } .switch__track { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--stroke-2); box-shadow: inset 0 0 0 1px var(--stroke-1); transition: background 0.2s ease, box-shadow 0.2s ease; } .switch__thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elev-3); box-shadow: var(--shadow-1); transition: transform 0.2s ease, background 0.2s ease; } .switch__label { font-size: 0.95rem; color: var(--text-1); font-weight: 500; } .switch__input:checked + .switch__track { background: color-mix(in oklab, var(--accent) 65%, var(--bg-elev-2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 70%, transparent); } .switch__input:checked + .switch__track .switch__thumb { transform: translateX(20px); background: var(--accent); } .switch__input:focus-visible + .switch__track { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .switch__input:focus-visible + .switch__track .switch__thumb { box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus-ring) 40%, transparent); } .switch__input:disabled + .switch__track { opacity: 0.6; cursor: not-allowed; } .switch__input:disabled + .switch__track .switch__thumb { box-shadow: none; } .switch__input:disabled ~ .switch__label { color: var(--text-3); } /* Emoji-like rating row */ .rate { display: flex; gap: 8px; } .rate button { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--stroke-1); background: var(--bg-elev-1); transition: transform .12s ease, box-shadow .2s ease; } .rate button:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } .rate button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } /* ------------------------------- 12) Footer + subtle glow ---------------------------------- */ .footer { margin-top: var(--space-5); padding: var(--space-4) 0; color: var(--text-3); position: relative; } .footer::before { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: radial-gradient(50% 40% at 50% 100%, rgba(0,224,255,0.12), transparent 70%); pointer-events: none; } .footer__content { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; } .footer__meta { display: block; } /* ------------------------------- 13) Feedback App Layout & Components ---------------------------------- */ .app-shell { width: min(1100px, 92vw); margin: 0 auto; padding: var(--space-5) 0 var(--space-5); display: grid; gap: var(--space-4); } .page-main { width: 100%; display: grid; gap: var(--space-4); } .auth-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; } .auth-controls .chip { background: var(--bg-elev-1); border-color: var(--stroke-1); } .panel .card__body { display: grid; gap: var(--space-3); } .primary-action { font-weight: var(--font-weight-strong); } .code-form { width: 100%; display: grid; gap: var(--space-2); } .divider { display: flex; align-items: center; gap: var(--space-2); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--stroke-1); } .form-error, .form-success { border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-0); border: 1px solid transparent; } .form-error { color: color-mix(in oklab, var(--danger) 70%, black 5%); background: color-mix(in oklab, var(--danger) 15%, transparent); border-color: color-mix(in oklab, var(--danger) 45%, transparent); } .form-success { color: color-mix(in oklab, var(--success) 70%, black 5%); background: color-mix(in oklab, var(--success) 18%, transparent); border-color: color-mix(in oklab, var(--success) 45%, transparent); } .privacy-warning { border: 1px solid color-mix(in oklab, var(--warning) 50%, transparent); background: color-mix(in oklab, var(--warning) 14%, transparent); color: color-mix(in oklab, var(--warning) 75%, var(--text-1)); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-weight: 500; } /* Wizard */ .wizard { gap: var(--space-4); } .wizard-intro { gap: var(--space-2); } .wizard-intro p, .wizard-stage > .muted { font-size: var(--font-size-0); line-height: 1.5; } .wizard-stepper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); } .wizard-stepper__item { text-align: left; padding: var(--space-3); border: 1px solid var(--stroke-1); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 90%, transparent); display: flex; gap: var(--space-2); align-items: center; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .wizard-stepper__item:hover:not([disabled]) { transform: translateY(-2px); } .wizard-stepper__item.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); } .wizard-stepper__item.is-complete { border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .wizard-stepper__item[disabled] { opacity: 0.6; cursor: default; transform: none; } .wizard-stepper__badge { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-contrast); font-weight: var(--font-weight-strong); } .wizard-stepper__label { display: flex; flex-direction: column; gap: 0.25rem; } .wizard-stepper__label strong { font-size: var(--font-size-1); color: var(--text-1); } .wizard-stepper__label small { color: var(--text-3); font-size: var(--font-size-0); } .wizard-form { gap: var(--space-4); } .wizard-stepper + .wizard-form { margin-top: var(--space-4); } .wizard-stage { border: 1px solid var(--stroke-1); border-radius: var(--radius-lg); padding: var(--space-4); background: color-mix(in srgb, var(--surface) 92%, transparent); gap: var(--space-3); } .template-card-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .template-card { border: 1px solid var(--stroke-1); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface) 94%, transparent); padding: var(--space-4); text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease; } .template-card:hover, .template-card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); transform: translateY(-2px); } .template-card.is-selected { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface) 90%); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); transform: translateY(-1px); } .template-card__eyebrow { font-size: var(--font-size-0); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .template-card__title { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); color: var(--text-1); } .template-card__description { font-size: var(--font-size-0); color: var(--text-2); line-height: 1.5; } .wizard-stage h3 { margin-bottom: 0; } .wizard-stage[hidden] { display: none; } .wizard-review-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .wizard-review-item { border: 1px solid var(--stroke-1); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 0.25rem; background: color-mix(in srgb, var(--surface) 96%, transparent); } .wizard-review-item__label { font-weight: var(--font-weight-strong); color: var(--text-2); } .wizard-review-item__value { color: var(--text-1); } .wizard-actions { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; } .wizard-actions [data-action='create'] { display: none; } .wizard-actions[data-stage='final'] [data-action='create'] { display: inline-flex; } .wizard-actions[data-stage='final'] [data-action='next'], .wizard-actions[data-stage='completed'] [data-action='next'] { display: none; } .wizard-actions[data-stage='completed'] [data-action='create'] { display: none; } .wizard-actions__spacer { flex: 1; } .wizard-share { margin-top: var(--space-3); } @media (max-width: 48rem) { .wizard { gap: var(--space-3); } .wizard-stepper { display: grid; grid-template-columns: 1fr; gap: var(--space-2); overflow: visible; padding-bottom: var(--space-2); margin-inline: 0; padding-inline: 0; } .wizard-stepper__item { flex: none; width: 100%; min-width: 0; } .wizard-stage { padding: var(--space-3); } .template-card-grid { grid-template-columns: 1fr; } .wizard-actions { flex-direction: column; align-items: stretch; justify-content: center; } .wizard-actions .button { width: 100%; } } .question-answer-container { display: grid; gap: var(--space-4); } .answer-control { display: grid; gap: var(--space-2); } .nps-control { gap: var(--space-2); } .nps-control__hint { margin: 0; font-size: var(--font-size-0); color: var(--text-3); } .nps-control__layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(var(--space-1), calc(1vw + var(--space-1)), var(--space-2)); column-gap: clamp(var(--space-1), calc(1vw + var(--space-1)), var(--space-2)); border-radius: var(--radius-lg); padding: var(--space-2); background: color-mix(in oklab, var(--bg) 80%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--stroke-1) 60%, transparent); } .nps-control__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.75rem, 1fr)); gap: clamp(var(--space-1), calc(1vw + var(--space-1)), var(--space-2)); grid-column: 1 / -1; } .nps-option { position: relative; display: grid; place-items: center; min-height: clamp(56px, 16vw, 88px); border-radius: var(--radius-lg); border: 0; background: var(--nps-background, color-mix(in oklab, var(--text-3) 10%, transparent)); color: var(--nps-text, var(--text-1)); cursor: pointer; font-weight: var(--font-weight-strong); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.35rem); letter-spacing: 0.015em; transition: transform 0.18s ease, box-shadow 0.24s ease; box-shadow: 0 10px 24px var(--nps-shadow, rgba(0, 0, 0, 0.08)); } .nps-option__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .nps-option__value { color: inherit; transition: transform 0.2s ease, text-shadow 0.24s ease; } .nps-option[data-category='detractor'] { --nps-background: linear-gradient(180deg, #ff6a4d 0%, #f0472f 100%); --nps-text: #fff7f5; --nps-shadow: rgba(240, 71, 47, 0.28); } .ranking-control { gap: var(--space-2); } .ranking-control__hint { margin: 0; color: var(--text-3); font-size: var(--font-size-0); } .ranking-control__list { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(var(--space-2), calc(0.8vw + var(--space-1)), var(--space-3)); } .ranking-control__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: center; padding: clamp(var(--space-2), calc(0.6vw + var(--space-2)), var(--space-3)); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--glass) 80%, transparent); box-shadow: 0 18px 40px rgba(9, 12, 23, 0.18); border: 1px solid color-mix(in oklab, var(--glass-border) 70%, transparent); cursor: grab; transition: transform 0.22s ease, box-shadow 0.28s ease, border-color 0.24s ease; } .ranking-control__item:hover, .ranking-control__item:focus-within { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(15, 23, 42, 0.28); border-color: color-mix(in oklab, var(--accent) 30%, var(--glass-border)); } .ranking-control__item.is-dragging { opacity: 0.92; transform: rotate(-1.5deg) scale(1.02); box-shadow: 0 32px 72px rgba(10, 20, 45, 0.35); cursor: grabbing; } .ranking-control__position { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.85rem; min-width: 3rem; border-radius: 999px; font-weight: var(--font-weight-strong); font-size: var(--font-size-0); background: color-mix(in oklab, var(--brand-1) 40%, var(--brand-2) 30%, var(--surface)); color: var(--accent-contrast); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); letter-spacing: 0.04em; } .ranking-control__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); } .ranking-control__grip { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--surface) 70%, var(--bg-elev-1)); color: color-mix(in oklab, var(--text-3) 70%, transparent); font-size: 1.25rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .ranking-control__label { font-size: clamp(var(--font-size-1), 1rem + 0.2vw, var(--font-size-2)); font-weight: var(--font-weight-strong); color: var(--text-1); letter-spacing: 0.01em; } .ranking-control__actions { display: inline-flex; align-items: center; gap: var(--space-1); } .ranking-control__action { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); padding: calc(var(--space-1) * 0.85); min-width: 2.4rem; background: color-mix(in oklab, var(--surface) 75%, var(--bg-elev-2)); color: var(--text-2); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.18); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.24s ease, background 0.22s ease, color 0.22s ease; } .ranking-control__action:hover, .ranking-control__action:focus-visible { background: color-mix(in oklab, var(--accent) 45%, var(--surface)); color: var(--accent-contrast); transform: translateY(-2px); box-shadow: 0 20px 42px rgba(59, 130, 246, 0.35); } .ranking-control__action:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .ranking-control__action-icon { font-size: 1rem; line-height: 1; } @media (max-width: 720px) { .ranking-control__item { grid-template-columns: 1fr; gap: var(--space-2); } .ranking-control__position { justify-self: start; } .ranking-control__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } .ranking-control__actions { justify-content: flex-start; } } .nps-option[data-category='neutral'] { --nps-background: linear-gradient(180deg, #ffc857 0%, #ff9d2f 100%); --nps-text: #3f2f05; --nps-shadow: rgba(255, 158, 48, 0.26); } .nps-option[data-category='promoter'] { --nps-background: linear-gradient(180deg, #34d399 0%, #0fb981 100%); --nps-text: #03251a; --nps-shadow: rgba(34, 197, 94, 0.24); } .nps-option:has(input:hover) { transform: translateY(-2px); } .nps-option:has(input:checked) { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 32px var(--nps-shadow, rgba(0, 0, 0, 0.14)), 0 0 0 3px color-mix(in oklab, #ffffff 80%, transparent); } .nps-option:has(input:checked) .nps-option__value { transform: scale(1.1); text-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .nps-option:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; } .nps-control__legend { display: flex; flex-wrap: wrap; gap: clamp(var(--space-1), calc(1vw + var(--space-1)), var(--space-2)); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--text-3); grid-column: 1 / -1; } .nps-legend-item { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; justify-content: flex-start; text-align: center; color: var(--legend-color, var(--text-2)); flex: 1 1 160px; min-width: 0; } .nps-legend-item__label { font-weight: 600; } .nps-legend-item__icon { font-size: clamp(2.1rem, 1.9rem + 0.5vw, 2.75rem); } .nps-legend-item[data-category='detractor'] { --legend-color: #dc2626; } .nps-legend-item[data-category='neutral'] { --legend-color: #d97706; } .nps-legend-item[data-category='promoter'] { --legend-color: #047857; } @media (max-width: 720px) { .nps-control__layout { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); } .nps-control__legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; justify-items: center; } .nps-control__legend .nps-legend-item { grid-column: auto !important; } } @media (min-width: 720px) { .nps-control__layout { grid-template-columns: repeat(11, minmax(64px, 1fr)); } .nps-control__options { grid-template-columns: repeat(11, minmax(64px, 1fr)); } .nps-control__legend { display: grid; grid-template-columns: repeat(11, minmax(64px, 1fr)); } } .running-questionnaires-list, .questionnaire-list, .overview-question-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .running-questionnaires-link { text-decoration: none; color: inherit; display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-3); } .running-questionnaires-title { font-weight: var(--font-weight-strong); font-size: var(--font-size-1); } .running-questionnaires-code { justify-self: flex-start; } .running-questionnaires-qr { display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--surface) 80%, transparent 20%); border-radius: var(--radius-3); padding: var(--space-2); min-width: 108px; min-height: 108px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14); } .running-questionnaires-qr .qr-code-image { width: 96px; height: 96px; } @media (max-width: 640px) { .running-questionnaires-link { grid-template-columns: minmax(0, 1fr); } .running-questionnaires-qr { justify-self: flex-start; width: 100%; min-width: 0; } .running-questionnaires-qr .qr-code-image { width: 136px; height: 136px; } } .question-fields { gap: var(--space-2); } .question-field { padding: var(--space-3); border-radius: var(--radius-3); border: 1px solid color-mix(in oklab, var(--border-subtle) 60%, transparent); background: color-mix(in oklab, var(--surface) 80%, transparent 20%); gap: var(--space-2); } .question-input { min-height: 3.5rem; line-height: 1.4; resize: vertical; overflow-y: hidden; } .question-field .label { font-weight: var(--font-weight-medium); } .question-type-select { max-width: 260px; } .question-scale-hint { font-size: var(--font-size-0); margin: 0; } .question-scale-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-2); } .question-scale-input { width: 100%; } .question-answer-container { gap: var(--space-3); } .rating-control { gap: var(--space-2); } .rating-control__stars { display: inline-flex; align-items: center; gap: var(--space-1); } .rating-star { border: none; background: none; padding: var(--space-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-2); transition: transform 120ms ease, background-color 120ms ease; } .rating-star:focus-visible { outline: 2px solid color-mix(in oklab, var(--accent) 60%, transparent); outline-offset: 2px; } .rating-star__icon { font-size: 1.8rem; color: color-mix(in oklab, var(--text-4) 35%, transparent); opacity: 0.6; -webkit-text-stroke: 1px color-mix(in oklab, var(--text-4) 80%, transparent); text-stroke: 1px color-mix(in oklab, var(--text-4) 80%, transparent); transition: color 150ms ease, opacity 150ms ease, -webkit-text-stroke 150ms ease, text-stroke 150ms ease, transform 150ms ease; } .rating-star.is-filled .rating-star__icon { color: color-mix(in oklab, gold 70%, var(--accent) 30%); opacity: 1; -webkit-text-stroke: 1px color-mix(in oklab, gold 65%, var(--accent) 35%); text-stroke: 1px color-mix(in oklab, gold 65%, var(--accent) 35%); } .rating-control__stars:hover .rating-star__icon, .rating-control__stars:focus-within .rating-star__icon { color: color-mix(in oklab, var(--text-4) 55%, transparent); opacity: 0.85; -webkit-text-stroke: 1px color-mix(in oklab, var(--text-4) 65%, transparent); text-stroke: 1px color-mix(in oklab, var(--text-4) 65%, transparent); } .rating-control__stars:hover .rating-star.is-filled .rating-star__icon, .rating-control__stars:focus-within .rating-star.is-filled .rating-star__icon { color: color-mix(in oklab, gold 80%, var(--accent) 20%); } .rating-star:hover .rating-star__icon, .rating-star:focus .rating-star__icon { transform: scale(1.05); } .slider-control__value { font-weight: var(--font-weight-strong); } .slider-control__input { width: 100%; } .slider-control__range { justify-content: space-between; font-size: var(--font-size-0); color: var(--text-3); } .share-details { gap: var(--space-2); } .share-hint { font-size: var(--font-size-0); color: var(--text-3); } .questionnaire-list__item { list-style: none; } .questionnaire-item-button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer; } .questionnaire-item-button .card__body { gap: var(--space-2); align-items: flex-start; } .questionnaire-item-button .questionnaire-item-title { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); } .questionnaire-item-button.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .questionnaire-item-delete { margin-top: var(--space-2); width: fit-content; } .responses-container, .review-list { display: grid; gap: var(--space-3); } .review-item { cursor: pointer; } .review-heading-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .review-classification { margin-left: auto; cursor: default; } .review-classification[data-rationale] { cursor: help; } .response-meta { font-size: var(--font-size-0); } .response-answers { display: grid; gap: var(--space-2); margin: 0; } .response-answers__question { font-size: 0.9rem; color: var(--text-2); font-weight: var(--font-weight-strong); } .response-answers__answer { margin-left: 0; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-1); white-space: pre-wrap; } .answers-question-list { display: grid; gap: var(--space-3); } .answers-question__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .answers-question__title { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); color: var(--text-1); } .answers-question__count { font-size: var(--font-size-0); } .answers-question__prompt { font-size: var(--font-size-1); color: var(--text-2); font-weight: var(--font-weight-strong); } .answers-question__summary { border: 1px solid var(--stroke-1); border-radius: var(--radius-sm); background: var(--bg-elev-1); padding: var(--space-2); display: grid; gap: var(--space-1); } .answers-question__summary-label { font-size: var(--font-size-0); font-weight: var(--font-weight-strong); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; } .answers-question__summary-text { margin: 0; color: var(--text-1); white-space: pre-wrap; } .answers-question__summary--error { border-color: var(--stroke-2); background: var(--bg-elev-0); } .answers-question__summary--error .answers-question__summary-text { color: var(--text-3); font-style: italic; } .answers-question__empty { font-size: var(--font-size-0); color: var(--text-3); } .answers-nps-question { border: 1px solid var(--stroke-1); border-radius: var(--radius-sm); background: var(--bg-elev-1); padding: var(--space-3); display: grid; gap: var(--space-2); } .answers-nps-question__title { font-size: var(--font-size-0); font-weight: var(--font-weight-strong); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } .answers-nps-question__bar { display: flex; border-radius: var(--radius-sm); overflow: hidden; min-height: 2.5rem; border: 1px solid var(--stroke-1); background: var(--bg-elev-1); } .answers-nps-question__segment { position: relative; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-0); color: var(--text-1); font-weight: var(--font-weight-strong); padding-inline: var(--space-1); transition: flex-basis 200ms ease-in-out; } .answers-nps-question__segment--detractor { background: rgba(251, 113, 133, 0.32); background: color-mix(in srgb, var(--danger) 28%, transparent); } .answers-nps-question__segment--passive { background: rgba(234, 179, 8, 0.28); background: color-mix(in srgb, var(--warning) 24%, transparent); } .answers-nps-question__segment--promoter { background: rgba(34, 197, 94, 0.28); background: color-mix(in srgb, var(--success) 24%, transparent); } .answers-nps-question__segment-label { position: relative; z-index: 1; } .answers-nps-question__stats { display: grid; gap: var(--space-1); } .answers-nps-question__stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .answers-nps-question__stat dt { font-size: var(--font-size-0); color: var(--text-2); font-weight: var(--font-weight-strong); } .answers-nps-question__stat dd { margin: 0; font-size: var(--font-size-0); color: var(--text-1); font-variant-numeric: tabular-nums; } .answers-nps-question__empty { font-size: var(--font-size-0); } .answers-nps-question__note { font-size: var(--font-size-0); } .answers-chart { border: 1px solid var(--stroke-1); border-radius: var(--radius-sm); background: var(--bg-elev-0); padding: var(--space-2); display: grid; gap: var(--space-2); } .answers-chart__title { margin: 0; font-size: var(--font-size-0); font-weight: var(--font-weight-strong); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); } .answers-chart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .answers-chart__item { display: grid; gap: var(--space-1); } .answers-chart__label { color: var(--text-1); font-weight: var(--font-weight-medium); } .answers-chart__bar-row { display: flex; align-items: center; gap: var(--space-1); } .answers-chart__bar { position: relative; flex: 1 1 auto; height: 0.75rem; border-radius: var(--radius-sm); background: var(--bg-elev-1); overflow: hidden; } .answers-chart__bar-fill { --answers-chart-fill: 0%; width: var(--answers-chart-fill); height: 100%; background: color-mix(in oklab, var(--accent) 70%, transparent); border-radius: inherit; transition: width 0.2s ease; } .answers-chart__value { font-size: var(--font-size-0); color: var(--text-2); white-space: nowrap; } .answers-chart__average { margin: 0; font-size: var(--font-size-0); color: var(--text-2); } .answers-overview { gap: var(--space-2); } .answers-overview__summary { margin: 0; color: var(--text-1); white-space: pre-wrap; line-height: 1.5; } .answers-overview__group { gap: var(--space-1); } .answers-overview__subtitle { margin: 0; font-size: var(--font-size-0); font-weight: var(--font-weight-strong); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); } .answers-overview__list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); } .answers-overview__list li { color: var(--text-2); } .answers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .answers-list__item { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-1); display: grid; gap: var(--space-1); } .answers-list__badge { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg-elev-2); color: var(--text-1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .answers-list__badge--pending { background: linear-gradient(135deg, rgba(148, 163, 184, 0.35), rgba(100, 116, 139, 0.4)); color: var(--text-2); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.45); } .answers-list__badge--constructive { background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.95)); color: #f8fafc; box-shadow: 0 6px 16px rgba(59, 130, 246, 0.35); } .answers-list__badge--insightful { background: linear-gradient(135deg, rgba(168, 85, 247, 0.9), rgba(107, 33, 168, 0.95)); color: #fdf4ff; box-shadow: 0 6px 16px rgba(168, 85, 247, 0.35); } .answers-list__badge--supportive { background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(22, 163, 74, 0.95)); color: #ecfdf5; box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3); } .answers-list__badge--neutral-descriptive { background: linear-gradient(135deg, rgba(148, 163, 184, 0.85), rgba(100, 116, 139, 0.9)); color: #111827; box-shadow: 0 6px 16px rgba(148, 163, 184, 0.25); } .answers-list__badge--vague-low-value { background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(217, 119, 6, 0.95)); color: #18120b; box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35); } .answers-list__badge--hurtful-negative { background: linear-gradient(135deg, rgba(248, 113, 113, 0.9), rgba(225, 29, 72, 0.95)); color: #fff1f2; box-shadow: 0 6px 16px rgba(225, 29, 72, 0.35); } .answers-list__text { margin: 0; white-space: pre-wrap; } .answers-list__meta { font-size: var(--font-size-0); color: var(--text-3); } .review-heading { font-size: 1rem; color: var(--text-2); } .review-answer { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-1); white-space: pre-wrap; } .question-progress { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 var(--space-2); border-radius: 999px; background: var(--bg-elev-1); border: 1px solid var(--stroke-1); color: var(--text-2); font-size: var(--font-size-0); width: fit-content; } .question-prompt { font-size: var(--font-size-1); color: var(--text-1); font-weight: var(--font-weight-strong); } .button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; } .overview-meta { margin: 0; padding: 0; display: grid; gap: var(--space-3); } .overview-meta dt { font-size: 0.8rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; } .overview-meta dd { margin: 0; font-size: var(--font-size-1); font-weight: var(--font-weight-strong); color: var(--text-1); } .overview-share, .overview-questions { display: grid; gap: var(--space-2); } .overview-share-layout { display: grid; gap: var(--space-3); } @media (min-width: 720px) { .overview-share-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); align-items: stretch; } } .overview-share-details { gap: var(--space-2); } .overview-share-qr { display: flex; align-items: stretch; max-width: 100%; } .overview-share-qr[hidden] { display: none !important; } .overview-share-qr-body { align-items: center; text-align: center; width: 100%; } .overview-share-qr-image { display: flex; align-items: center; justify-content: center; width: 100%; } .overview-share-qr-image .qr-code-image { width: min(180px, 100%); aspect-ratio: 1; height: auto; } .overview-share-qr-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .overview-header { display: flex; align-items: center; gap: var(--space-3); justify-content: space-between; } .overview-title { margin: 0; flex: 1; min-width: 0; } .overview-delete-icon { display: block; } .overview-question-item .card__body { gap: var(--space-2); } .overview-question-prompt { font-size: var(--font-size-1); color: var(--text-2); } .link-button { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: var(--font-weight-strong); text-decoration: none; } .link-button:hover, .link-button:focus-visible { text-decoration: underline; } .textarea { min-height: 96px; resize: vertical; } .question-step, .review-step { display: grid; gap: var(--space-3); } .question-required-indicator { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; } .question-prompt .question-required-indicator { margin-left: var(--space-1); } .question-prompt--missing { border-left: 3px solid color-mix(in oklab, var(--danger) 55%, transparent); padding-left: calc(var(--space-2) - 3px); color: color-mix(in oklab, var(--danger) 55%, var(--text-1)); } .review-item--missing { border-color: color-mix(in oklab, var(--danger) 45%, transparent); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14); } .review-item--missing .review-heading { color: color-mix(in oklab, var(--danger) 60%, var(--text-1)); } .review-answer--missing { color: color-mix(in oklab, var(--danger) 65%, var(--text-1)); font-weight: var(--font-weight-strong); } .review-required-warning { margin: 0; } .review-step .review-help { color: var(--text-3); font-size: var(--font-size-0); } .nps-summary { display: grid; gap: var(--space-1); justify-items: center; padding: var(--space-3); border-radius: var(--radius-3); border: 2px solid transparent; background: var(--surface-2); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .nps-summary:not([hidden]) { transform: translateY(0); } .nps-summary__label { font-size: var(--font-size--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); margin: 0; } .nps-summary__score { font-size: clamp(2.25rem, 5vw, 3rem); font-weight: var(--font-weight-strong); margin: 0; } .nps-summary__mood { font-size: var(--font-size-1); font-weight: var(--font-weight-strong); margin: 0; } .answers-nps { gap: var(--space-3); } .answers-nps__breakdown { display: grid; gap: var(--space-2); margin: 0; padding: 0; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .answers-nps__item { display: grid; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-2); border: 1px solid var(--border-1); background: var(--surface-1); text-align: center; } .answers-nps__item dt { margin: 0; font-size: var(--font-size--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); } .answers-nps__item dd { margin: 0; font-size: var(--font-size-1); font-weight: var(--font-weight-strong); } .answers-nps__stat { display: inline-flex; gap: var(--space-1); align-items: baseline; justify-content: center; } .answers-nps__stat > span:first-child { font-size: var(--font-size-2); font-weight: var(--font-weight-strong); } .answers-nps__percentage { font-size: var(--font-size--1); color: var(--text-3); } .nps-summary--elite, .nps-summary--excellent { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #34d399; color: #047857; } .nps-summary--positive { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #6366f1; color: #312e81; } .nps-summary--balanced { background: linear-gradient(135deg, #fef9c3, #fef08a); border-color: #f59e0b; color: #92400e; } .nps-summary--caution { background: linear-gradient(135deg, #fee2e2, #fecaca); border-color: #f97316; color: #9a3412; } .nps-summary--serious { background: linear-gradient(135deg, #fee2e2, #fecdd3); border-color: #ef4444; color: #7f1d1d; } .nps-summary--critical { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #dc2626; color: #7f1d1d; }