/* ============================================================
   Surveyz — App Styles
   ============================================================ */

/* ---- Feature flags ---- */
/* Applied to any element with data-feature="key" when the user's plan
   does not include that feature, and to plan-card feature list items. */
.feature-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ---- Language Switcher ---- */
.sr-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.sr-lang-label {
    font-size: 1rem;
    line-height: 1;
    user-select: none;
}
.sr-lang-select {
    font-size: 0.8rem;
    font-family: var(--sr-font);
    color: var(--sr-text-secondary);
    background: transparent;
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-sm);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.sr-lang-select:hover, .sr-lang-select:focus {
    border-color: var(--sr-primary);
    color: var(--sr-text);
    outline: none;
}
/* Container injected into take-survey.html footer */
.sr-survey-lang-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent iOS text inflation in landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--sr-font);
    color: var(--sr-text);
    background: var(--sr-surface);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: clip;
    touch-action: pan-y;
}

/* ── Authenticated app pages get the glassmorphism gradient background ── */
body.sr-app-page {
    background: var(--sr-page-bg);
    background-attachment: fixed;
}

/* ---- Layout ---- */

.sr-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sr-header {
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border-bottom: 1px solid var(--sr-glass-border, var(--sr-border));
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
    padding-bottom: 0;
    min-height: calc(60px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow-sm));
}


.sr-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sr-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.02em;
}
[data-theme="dark"] .sr-logo {
    background: #fff;
    border-radius: 10px;
    padding: 5px 12px;
    display: inline-flex;
}

.sr-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--sr-radius-sm);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    flex-shrink: 0;
}
.sr-logo-icon .fq1 { background: #007749; }
.sr-logo-icon .fq2 { background: #FFB81C; }
.sr-logo-icon .fq3 { background: #002395; }
.sr-logo-icon .fq4 { background: #DE3831; }

.sr-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* :not(...) excludes the Import CTA — it's an <a> button, not a text link, so it must
   keep its own white-on-gradient styling instead of the muted nav-link colour. */
.sr-nav a:not(.sr-nav-create__btn--import) {
    color: var(--sr-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--sr-radius-sm);
    transition: color var(--sr-transition), background var(--sr-transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sr-nav a:not(.sr-nav-create__btn--import):hover, .sr-nav a:not(.sr-nav-create__btn--import).active {
    color: var(--sr-primary);
    background: var(--sr-primary-light);
}

/* On mobile (<768px) hide text nav links — navigation available via user dropdown.
   On very small screens (<400px) also hide the Create dropdown; page-level CTA
   buttons (+ Start from scratch, Use a template) provide the same action. */
@media (max-width: 767px) {
    .sr-nav > a { display: none; }
}
@media (max-width: 399px) {
    .sr-nav-create { display: none; }
}

/* ── Nav "Create" dropdown ───────────────────────────────────── */
.sr-nav-create {
    position: relative;
}
.sr-nav-create__btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sr-text-secondary);
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: var(--sr-radius-sm);
    cursor: pointer;
    transition: color var(--sr-transition), background var(--sr-transition);
    font-family: var(--sr-font);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sr-nav-create__btn:hover,
.sr-nav-create.open .sr-nav-create__btn {
    color: var(--sr-primary);
    background: var(--sr-primary-light);
}
/* Primary CTA variant for the Create button */
.sr-nav-create__btn--cta {
    color: #fff;
    background: var(--sr-primary);
    border: 1px solid var(--sr-primary);
    padding: 0.4rem 0.875rem;
    border-radius: var(--sr-radius);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,119,73,.25);
    gap: 0.4rem;
}
.sr-nav-create__btn--cta:hover,
.sr-nav-create.open .sr-nav-create__btn--cta {
    color: #fff;
    background: var(--sr-primary-hover);
    border-color: var(--sr-primary-hover);
    box-shadow: 0 3px 10px rgba(0,119,73,.35);
}
.sr-nav-create__btn--cta .sr-nav-create__chevron {
    opacity: 0.75;
}
/* Premium "Import surveys & forms" entry point — violet gradient so it reads as
   a distinct action from the green "New" create CTAs. Free on every plan. */
.sr-btn--import,
.sr-nav-create__btn--import {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #fff;
    /* Follow the user's theme primary so the Import CTA matches their branding (e.g.
       "Executive blue") instead of a fixed violet. White text on a primary→hover
       gradient stays legible across themes. */
    background: linear-gradient(135deg, var(--sr-primary) 0%, var(--sr-primary-hover) 100%);
    border: 1px solid transparent;
    padding: 0.4rem 0.95rem;
    border-radius: var(--sr-radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    font-family: var(--sr-font);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sr-primary) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.18);
    transition: background var(--sr-transition), box-shadow var(--sr-transition), transform var(--sr-transition);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sr-btn--import:hover,
.sr-nav-create__btn--import:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--sr-primary-hover) 0%, var(--sr-primary) 100%);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--sr-primary) 42%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
    transform: translateY(-1px);
}
.sr-btn--import:active,
.sr-nav-create__btn--import:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--sr-primary) 30%, transparent);
}
.sr-btn--import svg,
.sr-nav-create__btn--import svg { flex-shrink: 0; }
.sr-nav-create__chevron {
    transition: transform 0.18s var(--ease-out);
}
.sr-nav-create.open .sr-nav-create__chevron {
    transform: rotate(180deg);
}
.sr-nav-create__menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    min-width: 190px;
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border: 1px solid var(--sr-glass-border, var(--sr-border));
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow-lg));
    padding: 0.375rem;
    z-index: 200;
    opacity: 0;
    transform: scale(0.95) translateY(-4px);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out), transform 0.2s var(--ease-spring);
}
.sr-nav-create.open .sr-nav-create__menu {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.sr-nav-create__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: var(--sr-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sr-text);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--sr-font);
    transition: background 0.12s;
    text-align: left;
}
.sr-nav-create__item:hover {
    background: var(--sr-surface);
    color: var(--sr-primary);
}
.sr-nav-create__item svg {
    flex-shrink: 0;
    color: var(--sr-text-muted);
}
.sr-nav-create__item:hover svg {
    color: var(--sr-primary);
}

/* ── User avatar chip + dropdown ─────────────────────────────── */
.sr-user-menu {
    position: relative;
}

.sr-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sr-primary);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
    flex-shrink: 0;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sr-user-avatar:hover,
.sr-user-menu.open .sr-user-avatar {
    border-color: var(--sr-primary);
    box-shadow: 0 0 0 3px var(--sr-primary-light);
}

.sr-user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 260px;
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border: 1px solid var(--sr-glass-border, var(--sr-border));
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow-lg));
    padding: 0.375rem;
    z-index: 200;
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out), transform 0.2s var(--ease-spring);
}
.sr-user-menu.open .sr-user-dropdown {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

/* ── Dropdown header: avatar + name/email + plan badge ─── */
.sr-user-dropdown__header {
    padding: 0.75rem 0.75rem 0.625rem;
    border-bottom: 1px solid var(--sr-border);
    margin-bottom: 0.25rem;
}
.sr-user-dropdown__avatar-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}
.sr-user-dropdown__avatar-lg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sr-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sr-user-dropdown__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sr-user-dropdown__email {
    font-size: 0.75rem;
    color: var(--sr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sr-user-dropdown__plan {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid currentColor;
    margin-top: 0.25rem;
    width: fit-content;
}
.sr-user-dropdown__plan--active  { color: #166534; background: #dcfce7; }
.sr-user-dropdown__plan--trial   { color: #92400e; background: #fef3c7; }
.sr-user-dropdown__plan--warning { color: #991b1b; background: #fef2f2; }
[data-theme="dark"] .sr-user-dropdown__plan--active  { color: #86efac; background: rgba(5,46,22,.7); }
[data-theme="dark"] .sr-user-dropdown__plan--trial   { color: #fde68a; background: rgba(66,32,6,.7); }
[data-theme="dark"] .sr-user-dropdown__plan--warning { color: #fca5a5; background: rgba(69,10,10,.7); }
.sr-user-dropdown__plan-sub {
    font-size: 0.7rem;
    color: var(--sr-text-muted);
    margin-top: 0.2rem;
    line-height: 1.3;
}

/* ── Default survey theme indicator (read-only) ──────────
   Shows which custom theme is the account default as a name + colour swatch.
   Purely informational — it never applies branding to the app chrome
   (survey themes are decoupled from the workspace UI). Links to manage. */
.sr-user-dropdown__theme {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.25rem 0.4rem;
    border-radius: var(--sr-radius-sm);
    font-size: 0.75rem;
    color: var(--sr-text-muted);
    text-decoration: none;
    transition: background var(--sr-transition);
}
.sr-user-dropdown__theme:hover { background: var(--sr-surface); }
.sr-user-dropdown__theme-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--sr-border);
    background: var(--sr-primary);
    flex-shrink: 0;
}
.sr-user-dropdown__theme-name {
    font-weight: 600;
    color: var(--sr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Section label ─────────────────────────────────────── */
.sr-user-dropdown__section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-text-muted);
    padding: 0.35rem 0.75rem 0.2rem;
}

/* ── Items ─────────────────────────────────────────────── */
.sr-user-dropdown__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sr-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sr-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--sr-transition), color var(--sr-transition);
    font-family: var(--sr-font);
    text-align: left;
}
.sr-user-dropdown__item svg {
    flex-shrink: 0;
    color: var(--sr-text-muted);
    transition: color var(--sr-transition);
}
.sr-user-dropdown__item:hover {
    background: var(--sr-surface);
    color: var(--sr-text);
}
.sr-user-dropdown__item:hover svg {
    color: var(--sr-primary);
}
.sr-user-dropdown__item--danger {
    color: var(--sr-danger);
}
.sr-user-dropdown__item--danger svg {
    color: var(--sr-danger);
}
.sr-user-dropdown__item--danger:hover {
    background: var(--sr-danger-light);
    color: var(--sr-danger);
}
.sr-user-dropdown__item--danger:hover svg {
    color: var(--sr-danger);
}

/* Coming-soon / disabled item */
.sr-user-dropdown__item--muted {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}
.sr-user-dropdown__soon {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sr-text-muted);
    background: var(--sr-surface);
    border: 1px solid var(--sr-border);
    border-radius: 9999px;
    padding: 0.1rem 0.45rem;
}
/* Right-aligned value chip on a dropdown item (e.g. active theme name next to "Themes") */
.sr-user-dropdown__value {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--sr-text-muted);
}

.sr-user-dropdown__sep {
    height: 1px;
    background: var(--sr-border);
    margin: 0.375rem 0;
}

.sr-main {
    flex: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

.sr-main--narrow {
    max-width: 560px;
}

.sr-main--survey {
    max-width: 720px;
}

/* ── Breadcrumb bar — sticky strip below the site header ────────── */
.sr-breadcrumb-bar {
    position: sticky;
    top: var(--sr-header-h, 60px);
    z-index: 90;
    height: var(--sr-breadcrumb-bar-h, 36px);
    display: flex;
    align-items: center;
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border-bottom: 1px solid var(--sr-border);
    padding: 0 max(1.5rem, env(safe-area-inset-right)) 0 max(1.5rem, env(safe-area-inset-left));
}

/* ── Breadcrumb navigation ──────────────────────────────────────── */
.sr-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}
.sr-breadcrumb__item {
    display: flex;
    align-items: center;
}
.sr-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--sr-text-muted);
    text-decoration: none;
    font-weight: 500;
    padding: 0.2rem 0.4rem;
    border-radius: var(--sr-radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.sr-breadcrumb__link:hover {
    color: var(--sr-primary);
    background: var(--sr-primary-light, rgba(0,119,73,.07));
}
.sr-breadcrumb__sep {
    color: var(--sr-text-muted);
    opacity: 0.35;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.1rem;
}
.sr-breadcrumb__current {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--sr-text);
    font-weight: 600;
    padding: 0.2rem 0.4rem;
    white-space: nowrap;
}

/* ---- Cards ---- */

.sr-card {
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border: 1px solid var(--sr-glass-border, var(--sr-border));
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow));
    padding: 2rem;
}

.sr-card--flush {
    padding: 0;
}

.sr-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--sr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sr-card-body {
    padding: 1.5rem;
}

/* ---- Typography ---- */

h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
h4 { font-size: 1rem; font-weight: 600; }

.sr-subtitle {
    color: var(--sr-text-secondary);
    font-size: 0.9375rem;
    margin-top: 0.35rem;
}

/* ---- Forms ---- */

.sr-form-group {
    margin-bottom: 1.25rem;
}

.sr-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sr-text);
    margin-bottom: 0.375rem;
}

.sr-label-required::after {
    content: ' *';
    color: var(--sr-danger);
}

.sr-input, .sr-select, .sr-textarea {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: var(--sr-font);
    /* 16px minimum — prevents iOS Safari auto-zoom on input focus */
    font-size: 1rem;
    color: var(--sr-text);
    background: var(--sr-bg);
    border: 1.5px solid var(--sr-border);
    border-radius: var(--sr-radius);
    transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
    outline: none;
}

.sr-input:focus, .sr-select:focus, .sr-textarea:focus {
    border-color: var(--sr-border-focus);
    box-shadow: 0 0 0 3px rgba(0, 119, 73, 0.12);
}

.sr-input::placeholder, .sr-textarea::placeholder {
    color: var(--sr-text-muted);
}

.sr-input.error, .sr-select.error, .sr-textarea.error {
    border-color: var(--sr-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08);
}

.sr-textarea {
    min-height: 100px;
    resize: vertical;
}

.sr-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.sr-error-text {
    font-size: 0.8125rem;
    color: var(--sr-danger);
    margin-top: 0.25rem;
}

.sr-help-text {
    font-size: 0.8125rem;
    color: var(--sr-text-muted);
    margin-top: 0.25rem;
}

/* Checkbox / Radio */

.sr-check-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sr-check-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1.5px solid var(--sr-border);
    border-radius: var(--sr-radius);
    cursor: pointer;
    transition: border-color var(--sr-transition), background var(--sr-transition);
    /* Ensure each answer option is easily tappable on touch devices */
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sr-check-item:hover {
    border-color: var(--sr-primary);
    background: var(--sr-primary-light);
}

.sr-check-item input[type="checkbox"],
.sr-check-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sr-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sr-check-item label {
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.4;
}

/* Rating stars */

.sr-rating {
    display: flex;
    gap: 0.25rem;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.sr-rating input { display: none; }

.sr-rating label {
    cursor: pointer;
    font-size: 2rem;
    color: var(--sr-border);
    transition: color var(--sr-transition);
    line-height: 1;
    /* 44px touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sr-rating label::before { content: '\2605'; }

.sr-rating input:checked ~ label,
.sr-rating label:hover,
.sr-rating label:hover ~ label {
    color: #F59E0B;
}

/* On mobile: increase star size even further */
@media (max-width: 480px) {
    .sr-rating label { font-size: 2.25rem; min-width: 48px; }
}

/* Scale slider */

.sr-scale {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sr-scale input[type="range"] {
    width: 100%;
    accent-color: var(--sr-primary);
    height: 6px;
    /* Ensure the slider thumb is big enough to grab on mobile */
    cursor: pointer;
    touch-action: pan-x;
}
/* Webkit: explicit 44×44 thumb */
.sr-scale input[type="range"]::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    -webkit-appearance: none;
    background: var(--sr-primary);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
/* Moz: same */
.sr-scale input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--sr-primary);
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
}

.sr-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--sr-text-muted);
}

.sr-scale-value {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sr-primary);
}

/* ---- Buttons ---- */

.sr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--sr-font);
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: var(--sr-radius);
    cursor: pointer;
    transition: background var(--sr-transition), color var(--sr-transition),
                border-color var(--sr-transition), box-shadow var(--sr-transition),
                opacity var(--sr-transition), transform 0.15s var(--ease-out);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    /* 44px touch target — WCAG 2.5.5 */
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.sr-btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 100ms;
}

.sr-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.sr-btn--primary {
    background: var(--sr-primary);
    color: var(--sr-on-primary);
    box-shadow: var(--sr-shadow-sm);
}

.sr-btn--primary:hover:not(:disabled) {
    background: var(--sr-primary-hover);
    box-shadow: var(--sr-shadow);
}
@media (hover: hover) and (pointer: fine) {
    .sr-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
}

.sr-btn--secondary {
    background: var(--sr-bg);
    color: var(--sr-text);
    border: 1.5px solid var(--sr-border);
}

.sr-btn--secondary:hover:not(:disabled) {
    border-color: var(--sr-primary);
    color: var(--sr-primary);
    background: var(--sr-primary-light);
}

.sr-btn--danger {
    background: var(--sr-danger);
    color: #fff;
}

.sr-btn--danger:hover:not(:disabled) {
    background: #B91C1C;
}

.sr-btn--ghost {
    background: transparent;
    color: var(--sr-text-secondary);
    padding: 0.5rem 0.75rem;
}

.sr-btn--ghost:hover {
    background: var(--sr-surface);
    color: var(--sr-text);
}

/* ── AI action button — distinct "magical" variant ───────────── */
.sr-btn--ai {
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 1px 6px rgba(124, 58, 237, 0.25);
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s var(--ease-out);
}
.sr-btn--ai:hover:not(:disabled) {
    background: linear-gradient(135deg, #6D28D9 0%, #9333EA 100%);
    box-shadow: 0 2px 14px rgba(124, 58, 237, 0.45);
    border-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .sr-btn--ai:hover:not(:disabled) { transform: translateY(-1px); }
}
.sr-btn--ai:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ── Sparkle icon animation ──────────────────────────────────── */
@keyframes ai-sparkle {
    0%, 100% { transform: rotate(0deg) scale(1);   opacity: 1;   }
    30%       { transform: rotate(-12deg) scale(1.2); opacity: 0.85; }
    70%       { transform: rotate(12deg) scale(1.2);  opacity: 0.85; }
}
.ai-sparkle-icon {
    animation: ai-sparkle 2.8s ease-in-out infinite;
    transform-origin: center;
    flex-shrink: 0;
}

.sr-btn--sm {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    /* Slightly relaxed target for de-emphasised secondary actions */
    min-height: 36px;
}

.sr-btn--lg {
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

.sr-btn--block {
    width: 100%;
}

/* OAuth buttons */

.sr-btn--google {
    background: #fff;
    color: #3c4043;
    border: 1.5px solid #dadce0;
    font-weight: 500;
}

.sr-btn--google:hover {
    background: #f7f8f8;
    box-shadow: var(--sr-shadow);
}

.sr-btn--microsoft {
    background: #2f2f2f;
    color: #fff;
    font-weight: 500;
}

.sr-btn--microsoft:hover {
    background: #1a1a1a;
}

/* ---- Badges / Status ---- */

.sr-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    letter-spacing: 0.01em;
}

.sr-badge--draft { background: var(--sr-surface); color: var(--sr-text-secondary); }
.sr-badge--active { background: var(--sr-success-light); color: var(--sr-success); }
.sr-badge--closed { background: var(--sr-warning-light); color: var(--sr-warning); }
.sr-badge--archived { background: var(--sr-surface); color: var(--sr-text-muted); }

/* ── Tab bar ──────────────────────────────────────────────── */
.sr-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 2px solid var(--sr-border);
    padding-bottom: 0;
}
.sr-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: .5rem .875rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--sr-text-secondary);
    cursor: pointer;
    font-family: var(--sr-font);
    border-radius: var(--sr-radius) var(--sr-radius) 0 0;
    transition: color .15s, border-color .15s, background .15s;
}
.sr-tab:hover:not(:disabled) { color: var(--sr-text); background: var(--sr-surface); }
.sr-tab--active { color: var(--sr-primary); border-bottom-color: var(--sr-primary); font-weight: 600; }
.sr-tab:disabled { cursor: not-allowed; }

/* ---- Table ---- */

.sr-table {
    width: 100%;
    border-collapse: collapse;
}

.sr-table th, .sr-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.875rem;
}

.sr-table th {
    font-weight: 600;
    color: var(--sr-text-secondary);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--sr-border);
}

.sr-table td {
    border-bottom: 1px solid var(--sr-border);
}

.sr-table tr:hover td {
    background: rgba(255, 255, 255, 0.45);
}
[data-theme="dark"] .sr-table tr:hover td {
    background: rgba(255, 255, 255, 0.04);
}

/* ---- Sortable column headers ---- */
.sr-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.sr-th-sortable:hover { color: var(--sr-text); }
.sr-th-sortable.is-sorted { color: var(--sr-primary); }
.sr-th-sortable:focus-visible {
    outline: 2px solid var(--sr-primary);
    outline-offset: -2px;
    border-radius: var(--sr-radius-sm);
}
.sr-th-arrow { font-size: 0.7em; margin-left: 0.25rem; }

/* ---- Recently published/edited row highlight ----
   Two clear flashes that fade out, plus a left accent bar that lingers for the
   whole highlight window so the just-updated row is unmistakable. Colours come
   from tokens, so it adapts to light / dark / system automatically. */
@keyframes sr-row-highlight-pulse {
    0%   { background-color: var(--sr-row-highlight-bg); }
    100% { background-color: transparent; }
}
.sr-table tr.sr-row-highlight td {
    /* Start bright and fade, twice — reads as a deliberate "look here" flash. */
    animation: sr-row-highlight-pulse 1.1s var(--ease-out, ease) 2;
    background-color: transparent;
}
.sr-table tr.sr-row-highlight td:first-child {
    box-shadow: inset 4px 0 0 0 var(--sr-primary);
}
.sr-table tr.sr-row-highlight td:last-child {
    box-shadow: inset -4px 0 0 0 var(--sr-primary);
}
/* Honour reduced-motion: hold a steady highlight instead of flashing. */
@media (prefers-reduced-motion: reduce) {
    .sr-table tr.sr-row-highlight td {
        animation: none;
        background-color: var(--sr-row-highlight-bg);
    }
}

/* ---- Divider ---- */

.sr-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--sr-text-muted);
    font-size: 0.8125rem;
}

.sr-divider::before, .sr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sr-border);
}

/* ---- Alerts ---- */

.sr-alert {
    padding: 0.875rem 1.125rem;
    border-radius: var(--sr-radius);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.sr-alert--success { background: var(--sr-success-light); color: var(--sr-success); border: 1px solid #A7F3D0; }
.sr-alert--danger { background: var(--sr-danger-light); color: var(--sr-danger); border: 1px solid #FECACA; }
.sr-alert--warning { background: var(--sr-warning-light); color: var(--sr-warning); border: 1px solid #FDE68A; }
.sr-alert--info { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }

/* ---- Survey Progress ---- */

.sr-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sr-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--sr-border);
    border-radius: 3px;
    overflow: hidden;
}

.sr-progress-fill {
    height: 100%;
    background: var(--sr-primary);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.sr-progress-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sr-text-secondary);
    white-space: nowrap;
}

/* ---- Survey Question ---- */

.sr-question {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--sr-border);
}

.sr-question:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sr-question-number {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sr-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.375rem;
}

.sr-question-text {
    font-size: 1.0625rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Used by survey.js renderQuestion — label wrapping the question text */
.sr-question-label {
    display: block;
    font-size: 1.0625rem;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.5;
    color: var(--sr-text);
    cursor: default;
}
.sr-question-num {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sr-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 0.375rem;
}
/* Error message shown below a question */
.sr-error {
    font-size: 0.8125rem;
    color: var(--sr-danger);
    margin-top: 0.375rem;
    min-height: 1.2em;
}

/* ---- Dashboard Stats ---- */

.sr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.sr-stat {
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border: 1px solid var(--sr-glass-border, var(--sr-border));
    border-radius: var(--sr-radius-lg);
    padding: 1.375rem;
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow-sm));
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.sr-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--sr-shadow-md);
}

/* Stat card top row: label + gradient icon */
.sr-stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.sr-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Gradient icon box — glossy, dimensional "3D" tile */
.sr-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18),
                inset 0 1px 0 rgba(255,255,255,0.42),
                inset 0 0 0 1px rgba(255,255,255,0.08);
}
/* top-light sheen for a premium, real depth */
.sr-stat-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%);
    pointer-events: none;
}
.sr-stat-icon svg {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.18));
}

.sr-stat--1 .sr-stat-icon { background: var(--sr-grad-1); }
.sr-stat--2 .sr-stat-icon { background: var(--sr-grad-2); }
.sr-stat--3 .sr-stat-icon { background: var(--sr-grad-3); }
.sr-stat--4 .sr-stat-icon { background: var(--sr-grad-4); }

.sr-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--sr-text);
    letter-spacing: -0.03em;
    line-height: 1;
}

.sr-stat-sub {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--sr-text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ---- Dashboard: responses bar chart ---- */
.sr-chart-card { margin-bottom: 1.5rem; }
.sr-chart-total {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sr-text-muted);
    font-variant-numeric: tabular-nums;
}
.sr-chart-host { width: 100%; }

.sr-chart-plot {
    position: relative;
    --plot-h: 240px;
    padding: 0 0 0 2.75rem;
}
.sr-chart-gridlines {
    position: absolute;
    top: 1.6rem;
    left: 2.75rem;
    right: 0;
    height: var(--plot-h);
    pointer-events: none;
}
.sr-chart-gridline {
    position: absolute;
    left: 0; right: 0;
    border-top: 1px dashed var(--sr-border);
}
.sr-chart-gridline span {
    position: absolute;
    left: -2.6rem;
    top: -0.62em;
    width: 2.2rem;
    text-align: right;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: var(--sr-text-muted);
}
.sr-chart-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 1.6rem;
    padding-bottom: 0.25rem;
}
.sr-chart-cols {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.5rem, 2vw, 1.5rem);
    min-width: min-content;
}
.sr-chart-col {
    flex: 1 0 56px;
    max-width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sr-chart-barbox {
    height: var(--plot-h);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
.sr-chart-bar {
    position: relative;
    width: 62%;
    max-width: 44px;
    min-height: 3px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #8aa0ff 0%, #5b6fe0 100%);
    box-shadow: 0 6px 14px rgba(91,111,224,0.30),
                inset 0 1px 0 rgba(255,255,255,0.45);
    transition: height 0.9s var(--ease-out, cubic-bezier(0.23,1,0.32,1)),
                filter 0.18s ease;
}
.sr-chart-col:hover .sr-chart-bar { filter: brightness(1.07) saturate(1.05); }
.sr-chart-barval {
    position: absolute;
    top: -1.45em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sr-text);
    font-variant-numeric: tabular-nums;
}
.sr-chart-xlabel {
    margin-top: 0.6rem;
    max-width: 100%;
    font-size: 0.72rem;
    color: var(--sr-text-secondary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .sr-chart-bar {
    background: linear-gradient(180deg, #9db0ff 0%, #6678e8 100%);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35),
                inset 0 1px 0 rgba(255,255,255,0.30);
}
@media (max-width: 560px) {
    .sr-chart-plot { --plot-h: 180px; }
}

/* ---- Empty State ---- */

.sr-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--sr-text-muted);
}

.sr-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.sr-empty h3 {
    color: var(--sr-text-secondary);
    margin-bottom: 0.5rem;
}

/* ---- Audit / history tables (team audit, survey activity) ---- */
.sr-audit-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius);
}
.sr-audit-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.sr-audit-table thead th {
    text-align: left;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sr-text-muted);
    padding: 0.6rem 0.85rem;
    background: var(--sr-surface);
    border-bottom: 1px solid var(--sr-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.sr-audit-table tbody td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--sr-border);
    vertical-align: top;
}
.sr-audit-table tbody tr:last-child td { border-bottom: none; }
.sr-audit-table tbody tr:hover { background: rgba(148, 163, 184, 0.09); }
.sr-audit-when { white-space: nowrap; color: var(--sr-text-secondary); font-variant-numeric: tabular-nums; }
.sr-audit-when .t { display: block; color: var(--sr-text-muted); font-size: 0.72rem; margin-top: 0.1rem; }
.sr-audit-event { color: var(--sr-text); line-height: 1.5; min-width: 15rem; }
.sr-audit-by { white-space: nowrap; color: var(--sr-text-secondary); }
.sr-audit-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
}
.sr-audit-sortable { cursor: pointer; user-select: none; }
.sr-audit-sortable:hover { color: var(--sr-text-secondary); background: rgba(148, 163, 184, 0.09); }
.sr-audit-arrow { font-size: 0.6rem; margin-left: 0.15rem; color: var(--sr-primary); }
@media (max-width: 560px) {
    .sr-audit-table thead th:last-child,
    .sr-audit-table tbody td.sr-audit-by { display: none; }
    .sr-audit-event { min-width: 0; }
}

/* ---- Access-permissions modal: current-access grants ---- */
#team-perm-existing { max-height: min(48vh, 26rem); overflow-y: auto; }
.perm-grant { padding: 0.8rem 0; border-bottom: 1px solid var(--sr-border); }
.perm-grant:first-child { padding-top: 0.25rem; }
.perm-grant:last-child { border-bottom: none; }
.perm-grant__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.perm-grant__title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; min-width: 0; }
.perm-grant__title strong { font-size: 0.925rem; }
.perm-grant__badges { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }
.perm-grant__pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.perm-pill { display: inline-block; font-size: 0.68rem; font-weight: 600; color: var(--sr-text-secondary); background: var(--sr-surface); border: 1px solid var(--sr-border); border-radius: 999px; padding: 0.12rem 0.55rem; }

/* ---- Honeypot (hidden from real users) ---- */

.sr-hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
}

/* ---- Survey Footer ---- */

.sr-survey-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    margin-top: 1rem;
    border-top: 1px solid var(--sr-border);
}

/* ---- Powered-by Surveyz branding footer ---- */

.sr-powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 1.25rem;
    font-size: 0.72rem;
    color: var(--sr-text-muted);
    opacity: 0.75;
}
.sr-powered-by__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--sr-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.72rem;
}
.sr-powered-by__link:hover { opacity: 0.8; }
.sr-powered-by__link svg { flex-shrink: 0; }

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .sr-main {
        padding: 1.25rem max(1rem, env(safe-area-inset-right)) 1.25rem max(1rem, env(safe-area-inset-left));
    }
    .sr-card { padding: 1.25rem; }
    h1 { font-size: 1.375rem; }
    /* sr-header padding now managed by the main rule (with safe-area) */
    .sr-stats { grid-template-columns: 1fr 1fr; }
    .sr-survey-footer { flex-direction: column; gap: 0.75rem; }
    .sr-survey-footer .sr-btn { width: 100%; }
    .sr-table { font-size: 0.8125rem; }
    .sr-table th, .sr-table td { padding: 0.5rem 0.625rem; }

    /* ── Avatar menu: bottom sheet on mobile ─────────────────── */
    .sr-user-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: unset;
        max-height: 78dvh;
        overflow-y: auto;
        overscroll-behavior: contain;   /* keep touch-scroll inside the sheet, don't chain to the page */
        -webkit-overflow-scrolling: touch;
        border-radius: var(--sr-radius-lg) var(--sr-radius-lg) 0 0;
        border-bottom: none;
        transform-origin: bottom center;
        transform: translateY(105%);
        z-index: 300;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
    .sr-user-menu.open .sr-user-dropdown {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }
    /* Scrim behind the bottom sheet */
    .sr-user-menu.open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 299;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    /* Drag handle visual cue */
    .sr-user-dropdown::before {
        content: '';
        display: block;
        width: 2.5rem;
        height: 4px;
        background: var(--sr-border);
        border-radius: 9999px;
        margin: 0.625rem auto 0.25rem;
    }
    /* Lock the page behind the avatar bottom-sheet so a touch-drag scrolls the
       sheet, not the dashboard. Class-based (not inline) so it never clashes
       with the modals' inline overflow lock. */
    body.sr-user-menu-open { overflow: hidden; }

    /* ROOT CAUSE of "sheet won't scroll": .sr-header's backdrop-filter makes the
       header the containing block for position:fixed descendants, so the
       bottom-sheet (and its inset:0 scrim) get pinned/sized to the ~60px header
       instead of the viewport — the sheet's scroll area ends up off-screen and
       touches fall through to the page. Dropping the filter while the sheet is
       open lets both resolve against the viewport. The scrim covers the header,
       so there's no visible change. */
    body.sr-user-menu-open .sr-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ── Very narrow (320px) adjustments ── */
@media (max-width: 360px) {
    .sr-main {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
    .sr-card { padding: 1rem; }
    .sr-stat { padding: 1rem; }
    .sr-stat-value { font-size: 1.5rem; }
}

/* ---- Auth page centered layout ---- */

.sr-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sr-surface);
    padding: 1.5rem;
}

.sr-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--sr-bg);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    box-shadow: var(--sr-shadow-lg);
    padding: 2.5rem 2rem;
}

.sr-auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.sr-auth-header h1 {
    margin-top: 0.75rem;
}

/* ---- Utility ---- */

.sr-flex { display: flex; }
.sr-flex-col { flex-direction: column; }
.sr-items-center { align-items: center; }
.sr-justify-between { justify-content: space-between; }
.sr-gap-1 { gap: 0.5rem; }
.sr-gap-2 { gap: 1rem; }
.sr-mt-1 { margin-top: 0.5rem; }
.sr-mt-2 { margin-top: 1rem; }
.sr-mt-3 { margin-top: 1.5rem; }
.sr-mb-2 { margin-bottom: 1rem; }
.sr-text-center { text-align: center; }
.sr-text-sm { font-size: 0.875rem; }
.sr-text-muted { color: var(--sr-text-muted); }
.sr-link { color: var(--sr-primary); text-decoration: none; font-weight: 500; }
.sr-link:hover { text-decoration: underline; }
.sr-hidden { display: none !important; }

/* ---- Theme toggle buttons ---- */
.sr-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    border: none;
    border-radius: calc(var(--sr-radius-sm) - 2px);
    background: transparent;
    color: var(--sr-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--sr-font);
}
.sr-theme-btn:hover { color: var(--sr-text); background: var(--sr-bg); }
.sr-theme-btn.active { color: var(--sr-primary); background: var(--sr-bg); box-shadow: var(--sr-shadow-sm); }

/* ---- Smooth theme transitions ---- */
body, .sr-app, .sr-header, .sr-card, .sr-stat, .sr-auth-card,
.sr-input, .sr-select, .sr-textarea, .sr-check-item, .sr-btn,
.sr-table th, .sr-table td, .sr-badge, .sr-alert {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ============================================================
   Password Strength Meter
   ============================================================ */

.sr-pwd-strength {
    margin-top: 0.5rem;
}

/* 4-segment coloured bar */
.sr-pwd-strength-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 0.45rem;
}
.sr-pwd-strength-seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--sr-border);
    transition: background 0.25s ease;
}
.sr-pwd-strength-seg.weak    { background: #EF4444; }
.sr-pwd-strength-seg.fair    { background: #F59E0B; }
.sr-pwd-strength-seg.good    { background: #3B82F6; }
.sr-pwd-strength-seg.strong  { background: #10B981; }

/* Requirement checklist */
.sr-pwd-strength-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.85rem;
    margin-bottom: 0.25rem;
}
.sr-pwd-strength-checks span {
    font-size: 0.75rem;
    color: var(--sr-text-muted);
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.sr-pwd-strength-checks span::before {
    content: '✗';
    font-size: 0.7rem;
    font-weight: 700;
    color: #EF4444;
}
.sr-pwd-strength-checks span.pass {
    color: #10B981;
}
.sr-pwd-strength-checks span.pass::before {
    content: '✓';
    color: #10B981;
}

/* ============================================================
   Beta Version Display + Issue Report System
   ============================================================ */

/* ---- Floating "Report Issue" FAB (fixed bottom-right, all pages) ---- */
.sr-beta-fab {
    position: fixed;
    /* Safe area: home indicator on iPhone and notch in landscape */
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
    right: max(1.5rem, calc(env(safe-area-inset-right) + 0.75rem));
    z-index: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--sr-primary);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-family: var(--sr-font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 119, 73, 0.35);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    user-select: none;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
}
.sr-beta-fab:hover {
    background: #005c38;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 119, 73, 0.4);
}
.sr-beta-fab:active  { transform: translateY(0); }
.sr-beta-fab:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* Spinner shown during submit */
.sr-beta-fab__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sr-spin 0.7s linear infinite;
    display: none;
    flex-shrink: 0;
}
.sr-beta-fab--loading .sr-beta-fab__spinner { display: block; }
.sr-beta-fab--loading .sr-beta-fab__icon    { display: none; }
.sr-beta-fab--loading .sr-beta-fab__label   { opacity: 0.75; }

@keyframes sr-spin { to { transform: rotate(360deg); } }

/* Generic busy state for buttons running async work (e.g. Save draft).
   Prepends an inline spinner to whatever label the button currently shows and
   dims the control so the user can clearly see the system is working. */
.sr-btn--loading {
    pointer-events: none;
    opacity: 0.85;
}
.sr-btn--loading::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 0.5rem;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: sr-spin 0.7s linear infinite;
}

/* Dark-mode adjustment */
[data-theme="dark"] .sr-beta-fab {
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.25);
}
[data-theme="dark"] .sr-beta-fab:hover {
    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35);
}

/* ---- Minimal app footer (injected on app pages that lack one) ---- */
.sr-app-footer {
    padding: 0.75rem max(1.5rem, env(safe-area-inset-right)) max(0.75rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));
    border-top: 1px solid var(--sr-border);
    background: var(--sr-bg);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}
.sr-app-footer__copy {
    font-size: 0.8rem;
    color: var(--sr-text-muted);
}
.sr-app-footer__copy a {
    color: var(--sr-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.sr-app-footer__copy a:hover { color: var(--sr-primary); }

/* Version link appended inside the landing-page dark footer */
.sr-beta-version-link {
    color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.15s;
}
.sr-beta-version-link:hover { color: rgba(255, 255, 255, 0.65); }

/* ---- Issue Report Modal ---- */
.sr-issue-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Safe area padding + minimum 1rem breathing room */
    padding: max(env(safe-area-inset-top, 0px), 1rem)
             max(env(safe-area-inset-right, 0px), 1rem)
             max(env(safe-area-inset-bottom, 0px), 1rem)
             max(env(safe-area-inset-left, 0px), 1rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 600px) {
    .sr-issue-modal-overlay { align-items: center; }
}
.sr-issue-modal {
    background: var(--sr-bg);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-lg);
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.sr-issue-modal__header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--sr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.sr-issue-modal__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sr-text);
    margin: 0;
}
.sr-issue-modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--sr-text-muted);
    cursor: pointer;
    padding: 0.5rem;
    line-height: 1;
    font-family: var(--sr-font);
    flex-shrink: 0;
    /* 44px touch target */
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.sr-issue-modal__close:hover { color: var(--sr-text); }
.sr-issue-modal__body { padding: 1.5rem; }

/* Success state shown after submission */
.sr-issue-modal__success {
    text-align: center;
    padding: 2rem 1rem;
}
.sr-issue-modal__success-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}
.sr-issue-modal__success h4 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sr-text);
    margin-bottom: 0.5rem;
}
.sr-issue-modal__success p {
    font-size: 0.875rem;
    color: var(--sr-text-muted);
}

/* ── Stat card hover (dashboard) ───────────────────────────────── */
.sr-stat {
    transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .sr-stat:hover {
        transform: translateY(-2px);
        box-shadow: var(--sr-shadow-md);
    }
    [data-theme="dark"] .sr-stat:hover,
    [data-theme="dark"] .sr-card:hover {
        /* Intensify the neumorphic lift on hover */
        box-shadow:
            10px 10px 24px rgba(9, 14, 30, 0.95),
            -8px -8px 20px rgba(45, 62, 90, 0.65),
            0 0 0 1px rgba(255, 255, 255, 0.11);
    }
}

/* ── prefers-reduced-motion: keep colour/opacity, remove movement ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Keep opacity-based feedback for states that need it */
    .sr-btn:active:not(:disabled) { transform: none; opacity: 0.75; }
    .sr-nav-create__menu,
    .sr-user-dropdown { transition: none; }
}

/* ---- Fixed version badge (fallback for pages with no .sr-app or .ft-copy) ---- */
.sr-beta-badge-fixed {
    position: fixed;
    bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 0.75rem));
    left: max(1.5rem, calc(env(safe-area-inset-left) + 0.75rem));
    z-index: 399;
    font-size: 0.75rem;
    color: var(--sr-text-muted);
    background: var(--sr-bg);
    border: 1px solid var(--sr-border);
    border-radius: 9999px;
    padding: 0.3rem 0.75rem;
    pointer-events: none;
    font-family: var(--sr-font);
}

/* ---- Subscription plan card (shared across all authenticated pages) ---- */
.sub-card { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.25rem; border-radius: var(--sr-radius); margin-bottom: 1.25rem; border: 1px solid var(--sr-border); background: var(--sr-surface); flex-wrap: wrap; }
.sub-card-icon { font-size: 1.5rem; flex-shrink: 0; }
.sub-card-body { flex: 1; min-width: 0; }
.sub-card-title { font-weight: 700; font-size: 0.9375rem; color: var(--sr-text); }
.sub-card-meta  { font-size: 0.8125rem; color: var(--sr-text-muted); margin-top: 0.15rem; }
.sub-card-limits { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.sub-card-limits span { font-size: 0.75rem; background: var(--sr-bg); border: 1px solid var(--sr-border); border-radius: 9999px; padding: 0.1rem 0.55rem; color: var(--sr-text-secondary); }
.sub-status-pill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; padding: 0.15rem 0.6rem; }
.sub-status-pill--active  { background: #dcfce7; color: #166534; }
.sub-status-pill--trial   { background: #fef9c3; color: #854d0e; }
.sub-status-pill--warning { background: #fef2f2; color: #991b1b; }
[data-theme="dark"] .sub-status-pill--active  { background: #052e16; color: #86efac; }
[data-theme="dark"] .sub-status-pill--trial   { background: #422006; color: #fde68a; }
[data-theme="dark"] .sub-status-pill--warning { background: #450a0a; color: #fca5a5; }


/* ---- Toggle switch (sr-toggle) ---- */
.sr-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.sr-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sr-toggle__slider { position: absolute; inset: 0; background: var(--sr-border); border-radius: 9999px; cursor: pointer; transition: background 0.2s; }
.sr-toggle__slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.sr-toggle input:checked + .sr-toggle__slider { background: var(--sr-primary, #4f46e5); }
.sr-toggle input:checked + .sr-toggle__slider::before { transform: translateX(20px); }
[data-theme="dark"] .sr-toggle__slider { background: #374151; }
[data-theme="dark"] .sr-toggle input:checked + .sr-toggle__slider { background: var(--sr-primary, #6366f1); }

/* ---- Auto-expanding textarea (question text in create-survey) ---- */
textarea.sr-autoexpand { resize:none;overflow:hidden;min-height:2.375rem;line-height:1.5;padding-top:.4375rem;padding-bottom:.4375rem; }

/* ---- Dashboard language translation indicator pills ---- */
.sr-lang-pill { display:inline-flex;align-items:center;justify-content:center;padding:.1rem .3rem;border-radius:.2rem;font-size:.6rem;font-weight:700;border:1px solid;letter-spacing:.03em;vertical-align:middle;line-height:1.2; }
.sr-lang-pill--af { background:#ecfdf5;color:#059669;border-color:#6ee7b7; }
.sr-lang-pill--xh { background:#fff7ed;color:#c2410c;border-color:#fdba74; }
.sr-lang-pill--zu { background:#f5f3ff;color:#7c3aed;border-color:#c4b5fd; }
[data-theme="dark"] .sr-lang-pill--af { background:#052e16;color:#6ee7b7;border-color:#065f46; }
[data-theme="dark"] .sr-lang-pill--xh { background:#431407;color:#fdba74;border-color:#9a3412; }
[data-theme="dark"] .sr-lang-pill--zu { background:#2e1065;color:#c4b5fd;border-color:#5b21b6; }

/* ---- Yes / No question type ---- */
.sr-yesno { display:flex;gap:.75rem;margin-top:.25rem;flex-wrap:wrap; }
.sr-yesno-option { display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem 1.5rem;border:2px solid var(--sr-border);border-radius:.5rem;font-weight:600;font-size:.9375rem;transition:border-color .15s,background .15s,color .15s;user-select:none; }
.sr-yesno-option:has(input:checked) { border-color:var(--sr-primary,#4f46e5);background:rgba(99,102,241,.08);color:var(--sr-primary,#4f46e5); }
.sr-yesno-option input { display:none; }

/* ---- Likert scale question type ---- */
.sr-likert { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem; }
.sr-likert-option { display:flex;flex-direction:column;align-items:center;gap:.35rem;cursor:pointer;flex:1;min-width:80px;padding:.6rem .4rem;border:2px solid var(--sr-border);border-radius:.5rem;font-size:.75rem;font-weight:500;text-align:center;transition:border-color .15s,background .15s,color .15s;user-select:none; }
.sr-likert-option:has(input:checked) { border-color:var(--sr-primary,#4f46e5);background:rgba(99,102,241,.08);color:var(--sr-primary,#4f46e5);font-weight:700; }
.sr-likert-option input { display:none; }

/* ---- Distribution modal: contact rows with per-contact link selector ---- */
.dist-contact-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.625rem;
    border-bottom: 1px solid var(--sr-border);
    transition: background 0.12s;
}
.dist-contact-row:last-child { border-bottom: none; }
.dist-contact-row:hover { background: var(--sr-surface); }
.dist-contact-chk-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
    min-width: 0;
    font-size: 0.8375rem;
    overflow: hidden;
}
.dist-contact-chk-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dist-link-select {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-family: var(--sr-font);
    color: var(--sr-text);
    background: var(--sr-bg);
    border: 1px solid var(--sr-border);
    border-radius: var(--sr-radius-sm, 4px);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    max-width: 195px;
    min-width: 155px;
    transition: border-color 0.15s;
}
.dist-link-select:focus { outline: none; border-color: var(--sr-primary); }
.dist-link-select:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Analytics: chart lock overlay ---- */
.chart-section { position: relative; margin-top: 0.75rem; }
.analytics-lock-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(255,255,255,0.58);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 6px;
    gap: 0.375rem;
    text-align: center;
    padding: 1rem;
}
.dark .analytics-lock-overlay,
[data-theme="dark"] .analytics-lock-overlay {
    background: rgba(17,24,39,0.62);
}
.analytics-lock-icon { font-size: 1.5rem; line-height: 1; }
.analytics-lock-title { font-weight: 700; font-size: 0.875rem; color: var(--sr-text); }
.analytics-lock-sub { font-size: 0.78rem; color: var(--sr-text-muted); max-width: 230px; line-height: 1.4; }

/* ---- Analytics: text percentage breakdown (basic analytics) ---- */
.pct-breakdown { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; margin-bottom: 0.5rem; }
.pct-row { display: flex; align-items: center; gap: 0.625rem; }
.pct-label { flex: 0 0 160px; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sr-text); }
.pct-bar-track { flex: 1; height: 8px; background: var(--sr-border); border-radius: 4px; overflow: hidden; min-width: 60px; }
.pct-bar-fill { display: block; height: 100%; background: var(--sr-primary); border-radius: 4px; transition: width 0.35s ease; }
.pct-count { flex: 0 0 90px; font-size: 0.8rem; text-align: right; white-space: nowrap; }

/* ---- Pricing: highlighted features ---- */
.feat-highlighted {
    position: relative;
}
.feat-hi-text {
    font-weight: 600;
    background: linear-gradient(90deg, var(--sr-primary, #4f46e5), #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.feat-star-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3rem;
    font-size: 0.65rem;
    color: #f59e0b;
    line-height: 1;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px rgba(245,158,11,0.5));
}

/* ── Plan badge (shared: dashboard header, breadcrumbs) ── */
.dash-plan-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
    padding: .2rem .6rem; border-radius: 9999px;
    border: 1.5px solid currentColor; line-height: 1.4;
}
.dash-plan-badge--free       { color: #64748b; border-color: #cbd5e1; background: #f8fafc; }
.dash-plan-badge--trial      { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.dash-plan-badge--pro        { color: #007749; border-color: #6ee7b7; background: #ecfdf5; }
.dash-plan-badge--business   { color: #4338ca; border-color: #a5b4fc; background: #eef2ff; }
.dash-plan-badge--enterprise { color: #9333ea; border-color: #d8b4fe; background: #faf5ff; }
.dash-plan-badge--admin      { color: #fff;    border-color: #007749; background: #007749; }
[data-theme="dark"] .dash-plan-badge--free       { color: #94a3b8; border-color: #475569; background: rgba(30,41,59,.6); }
[data-theme="dark"] .dash-plan-badge--trial      { color: #fde68a; border-color: #b45309; background: rgba(120,53,15,.25); }
[data-theme="dark"] .dash-plan-badge--pro        { color: #6ee7b7; border-color: #059669; background: rgba(6,78,59,.25); }
[data-theme="dark"] .dash-plan-badge--business   { color: #a5b4fc; border-color: #4f46e5; background: rgba(49,46,129,.25); }
[data-theme="dark"] .dash-plan-badge--enterprise { color: #d8b4fe; border-color: #9333ea; background: rgba(88,28,135,.25); }
[data-theme="dark"] .dash-plan-badge--admin      { color: #fff;    border-color: #059669; background: #059669; }

/* =====================================================================
   Dashboard plan-usage indicator
   "X of Y surveys/forms used" cards on the dashboard — mirrors the My
   Plan page figures. Built from the same glass-card design language as
   the stat cards so it reads as native to the dashboard.
   ===================================================================== */
.plan-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.plan-usage__item {
    background: var(--sr-glass-bg, var(--sr-bg));
    backdrop-filter: var(--sr-glass-blur, none);
    -webkit-backdrop-filter: var(--sr-glass-blur, none);
    border: 1px solid var(--sr-glass-border, var(--sr-border));
    border-radius: var(--sr-radius-lg);
    padding: 1rem 1.125rem;
    box-shadow: var(--sr-glass-shadow, var(--sr-shadow-sm));
}
.plan-usage__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}
.plan-usage__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.plan-usage__count {
    font-size: 0.8125rem;
    color: var(--sr-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.plan-usage__count strong { color: var(--sr-text); font-weight: 700; }
.plan-usage__bar {
    height: 7px;
    border-radius: 9999px;
    background: var(--sr-border);
    overflow: hidden;
}
.plan-usage__fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.5s var(--ease-out, ease);
}
.plan-usage__fill--ok     { background: var(--sr-primary); }
.plan-usage__fill--warn   { background: var(--sr-warning); }
.plan-usage__fill--danger { background: var(--sr-danger); }
.plan-usage__note {
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--sr-text-muted);
}

/* =====================================================================
   MOBILE UX FIXES (dashboard + onboarding)
   ===================================================================== */

/* ── Task 1: Survey/Forms table — horizontal scroll on narrow screens ──
   The list containers already have overflow-x:auto (set inline in
   dashboard.html). On small screens some columns are hidden to keep the
   table readable, but STATUS + RESPONSES must always stay reachable —
   so the inner table is given a min-width and the container scrolls. */
@media (max-width: 640px) {
    #survey-list, #forms-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* subtle edge fade hint that there's more to scroll */
        scrollbar-width: thin;
    }
    #survey-list .sr-table,
    #forms-list  .sr-table {
        min-width: 540px;   /* keeps Status + Responses + Actions on-canvas, scroll to reach */
    }
}

/* ── Tasks 2 & 3: Dashboard header + card-header action buttons ──
   Portrait: stack/wrap so the "+ New survey / + New form" CTAs are never
   clipped off the right edge. Landscape: lay the action buttons out in a
   clean wrapping row with consistent spacing instead of a cramped strip. */
@media (max-width: 640px) {
    /* Surveys/Forms card header: title on its own line, actions wrap below
       and stay fully visible + tappable. */
    .sr-card--flush > .sr-card-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .sr-card--flush > .sr-card-header > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }
    /* Let the primary create CTA and import button grow to fill the row
       rather than overflow it; refresh icon stays compact. */
    .sr-card--flush > .sr-card-header .sr-btn--primary,
    .sr-card--flush > .sr-card-header .sr-btn--import,
    .sr-card--flush > .sr-card-header .sr-nav-create,
    .sr-card--flush > .sr-card-header .sr-nav-create__btn--cta {
        flex: 1 1 auto;
        min-height: 44px;       /* touch target */
        justify-content: center;
    }
    .sr-card--flush > .sr-card-header .sr-icon-btn {
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
    }
    /* The "New form" create dropdown inside the Forms card header must fill
       and align its trigger to the row. */
    #forms-tab-create-form { display: flex; }
    #forms-tab-create-form .sr-nav-create__btn--cta { width: 100%; }
}

/* ── Task 2 (portrait): top-nav create/import CTAs must never clip ──
   Between ~400–640px portrait the nav still shows the create dropdowns +
   Import button alongside the avatar. Without wrapping they run off the
   right edge. Allow a tidy wrap and shrink the import label so every
   action stays on-screen and tappable. The header grows by one row only
   when it actually needs to. */
@media (max-width: 640px) and (orientation: portrait) {
    .sr-header { flex-wrap: wrap; row-gap: 0.4rem; padding-bottom: 0.4rem; }
    .sr-nav { flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
    .sr-nav-create__btn--cta,
    .sr-btn--import,
    .sr-nav-create__btn--import {
        padding: 0.4rem 0.7rem;
        font-size: 0.8125rem;
        min-height: 40px;
    }
}

/* ── Task 3: Landscape on mobile — header nav buttons lay out cleanly ──
   Short landscape viewports get extra-cramped. Allow the top nav to wrap
   to a tidy row with even gaps, and keep the create CTAs visible (the
   default <400px rule hides the create dropdown — re-show it in landscape
   where there's horizontal room). */
@media (max-height: 500px) and (orientation: landscape) {
    .sr-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        row-gap: 0.4rem;
        justify-content: flex-end;
    }
    .sr-nav-create { display: block; }   /* re-show create CTA in landscape */
    .sr-nav-create__btn--cta,
    .sr-nav-create__btn--import {
        padding: 0.35rem 0.7rem;
        font-size: 0.8125rem;
    }
    /* Dashboard header row: keep title + any actions on one tidy wrapping row */
    .sr-dash-header { flex-wrap: wrap; gap: 0.75rem; }
}

/* ── Task 4: Onboarding wizard step tabs — responsive labels ──
   Desktop keeps the full "2. Company Details" labels. On mobile the pills
   would overlap/squash, so we condense them: hide the long text, show a
   compact "Step N" token via the data-short attribute, and let the strip
   scroll if needed. Desktop appearance is untouched. */
@media (max-width: 560px) {
    .ob-progress { gap: 0; }
    .ob-step-pill {
        min-width: 0;
        flex: 1 1 0;
        padding: 0.7rem 0.35rem;
        font-size: 0.7rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Replace the verbose label with the short token so labels never collide. */
    .ob-step-pill[data-short] { font-size: 0; }            /* hide long text */
    .ob-step-pill[data-short]::after {
        content: attr(data-short);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        display: block;
    }
}