/*
 * Upskilling with Prashant - Custom App Styles
 */

/* General */
body {
    min-height: 100vh;
}

/* Lucide SVG sprite icons */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
}

.icon-primary { color: var(--primary); }
.icon-muted { color: var(--muted-foreground); }

/* Large decorative icon (expired page, empty states) */
.expired-icon {
    color: var(--danger);
    margin-bottom: var(--space-4);
}

.expired-icon .icon {
    width: 4rem;
    height: 4rem;
}

.container-narrow {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-6);
}

.container-medium {
    max-width: 768px;
    margin: 0 auto;
    padding: var(--space-6);
}

/* Page centering for auth pages */
.page-center {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Logo */
.sidebar-logo {
    height: 10rem;
    width: auto;
    border-radius: 4px;
    vertical-align: middle;
}

.login-logo {
    height: 20rem;
    width: auto;
    margin: 0 auto var(--space-3);
    display: block;
}

.login-logo-wrapper {
    text-align: center;
    margin-bottom: var(--space-6);
}

.onboarding-logo {
    height: 20rem;
    width: auto;
    margin-bottom: var(--space-4);
}

/* Sidebar header/footer */
.sidebar-header {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
}

.sidebar-footer {
    padding: var(--space-3);
    border-top: 1px solid var(--border);
}

.sidebar-footer .button {
    width: 100%;
}

/* Sidebar nav link icons */
[data-sidebar] nav a svg,
[data-sidebar] nav a .icon {
    vertical-align: -3px;
    margin-inline-end: var(--space-2);
}

.sidebar-footer .button svg {
    vertical-align: -2px;
    margin-inline-end: var(--space-1);
}

/* Sidebar toggle button */
[data-sidebar-toggle] {
    font-size: 1.25rem;
}

/* Main content padding (replaces inline style) */
[data-sidebar-layout] > main {
    padding: var(--space-4);
}

/* Onboarding */
.onboarding {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6);
}

.onboarding-slides {
    display: flex;
    overflow-x: hidden;
    scroll-snap-type: x mandatory;
    width: 100%;
    max-width: 400px;
    -webkit-overflow-scrolling: touch;
}

.onboarding-slide {
    min-width: 100%;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;
}

.onboarding-slide .icon-large {
    font-size: 4rem;
    margin-bottom: var(--space-4);
}

.onboarding-slide .slide-content {
    max-width: 320px;
    width: 100%;
}

.onboarding-dots {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.onboarding-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    transition: background 0.3s;
}

.onboarding-dots .dot.active {
    background: var(--primary);
}

/* Dashboard cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.stat-card {
    padding: var(--space-4);
}

.stat-card h3 {
    font-size: var(--text-7);
    color: var(--muted-foreground);
    margin-bottom: var(--space-1);
}

.stat-card .value {
    font-size: var(--text-4);
    font-weight: 700;
}

/* Stat value colors */
.stat-value-success { color: var(--success); }
.stat-value-warning { color: var(--warning); }
.stat-value-danger { color: var(--danger); }
.stat-value-primary { color: var(--primary); }

/* Text color utilities */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }

/* Quick action cards */
.quick-action {
    text-decoration: none;
    text-align: center;
    padding: var(--space-4);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-action:hover,
.quick-action:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quick-action .icon {
    font-size: 1.5rem;
    color: var(--primary);
}

.quick-action .icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

/* Job cards */
.job-card {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.job-card:hover,
.job-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Expired card opacity */
.expired-card {
    opacity: 0.75;
}

/* Auto-fill grid */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

/* Content cards */
.content-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.content-card .content-card-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.content-card .icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: var(--primary);
}

.content-card .icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.content-card .button {
    align-self: flex-end;
    margin-top: auto;
}

.content-card .content-card-head > div:last-child {
    min-width: 0;
}

/* Video embed */
.video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Expiry badge */
.badge-expired {
    background: var(--danger);
    color: var(--danger-foreground);
}

.badge-active {
    background: var(--success);
    color: var(--success-foreground);
}

.badge-expiring {
    background: var(--warning);
    color: var(--warning-foreground);
}

/* Sidebar layout */
[data-sidebar-layout] {
    min-height: 100vh;
}

/* Sidebar links: icon + label + (optional) unread badge on one row */
[data-sidebar] nav li a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-badge {
    margin-left: auto;
    font-size: 0.72em;
}

/* Student notices list */
.notice-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: var(--space-3);
}

.notice-item.unread {
    border-color: var(--primary);
}

.notice-item summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    cursor: pointer;
    list-style: none;
}

.notice-item summary::-webkit-details-marker {
    display: none;
}

.notice-item summary::before {
    content: "\203A";
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.15s ease;
    color: var(--muted-foreground);
}

.notice-item[open] summary::before {
    transform: rotate(90deg);
}

.notice-title {
    font-weight: 600;
    flex: 1;
    min-width: 0;
}

.notice-date {
    font-size: 0.85em;
}

.notice-body {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

/* Error pages */
.error-icon {
    color: var(--primary);
}

.error-icon .icon {
    width: 5rem;
    height: 5rem;
}

/* Post-signup success (onboarding.php?done=1) */
.success-icon {
    color: var(--primary);
    display: flex;
    justify-content: center;
}

.success-icon svg {
    width: 5rem;
    height: 5rem;
}

/* Skeleton loaders (shimmer on muted background) */
.skeleton {
    position: relative;
    overflow: hidden;
    background: var(--muted);
    border-radius: var(--radius-medium, 8px);
    min-height: 1rem;
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: translateX(-100%);
    animation: skeleton-shimmer 1.4s infinite;
}

@keyframes skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Soft shadows on interactive cards */
.quick-action,
.job-card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Focus ring polish */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Smooth transitions for toggles / interactive elements */
button,
.button {
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

/* Form card widths */
.form-card {
    max-width: 600px;
    margin-inline: auto;
}

.form-card-narrow {
    max-width: 400px;
    margin-inline: auto;
}

/* Checkbox row */
.checkbox-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

/* Inline form helper */
.inline-form {
    display: inline;
}

/* Tables */
.table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table sort headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 1.5em;
}

th.sortable::after {
    content: " \2195";
    opacity: 0.3;
    font-size: 0.8em;
}

th.sort-asc::after {
    content: " \2191";
    opacity: 0.8;
}

th.sort-desc::after {
    content: " \2193";
    opacity: 0.8;
}

/* Drag-and-drop reorder */
.drag-handle {
    cursor: grab;
    color: var(--muted-foreground);
    text-align: center;
    width: 40px;
}

.drag-handle:active {
    cursor: grabbing;
}

tr.dragging {
    opacity: 0.4;
}

tr.drag-over {
    border-top: 2px solid var(--primary);
}

/* Forms */
form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Alert link spacing */
[role="alert"] a {
    text-decoration: underline;
    font-weight: 600;
}

/* Back / breadcrumb navigation links */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--muted-foreground);
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Skip link (visually hidden until focused) */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: var(--space-2) var(--space-4);
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 0 0 var(--radius-medium) 0;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Tab labels always visible (mobile + desktop) */
ot-tabs > div[role="tablist"] {
    overflow-x: auto;
    scrollbar-width: thin;
}

/* Student content tabs: stacked icon + label + count badge */
ot-tabs [role="tab"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

ot-tabs [role="tab"] .tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

ot-tabs [role="tab"] .tab-icon {
    line-height: 1;
}

ot-tabs [role="tab"] .tab-label {
    display: block;
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

ot-tabs [role="tab"] .tab-count.badge {
    font-size: 0.72em;
    padding: 1px 8px;
}

/* Mobile: fit all tabs across the viewport, no horizontal scroll */
@media (max-width: 640px) {
    ot-tabs > div[role="tablist"] {
        display: flex;
        gap: 2px;
        width: 100%;
        overflow-x: visible;
    }

    ot-tabs [role="tab"] {
        flex: 1 1 0;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        padding: 8px 2px;
    }

    ot-tabs [role="tab"] .tab-inner {
        min-width: 0;
        gap: 2px;
    }

    ot-tabs [role="tab"] .tab-label {
        font-size: 0.68em;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    ot-tabs [role="tab"] .tab-count.badge {
        padding: 0 7px;
    }
}

/* Auto-capitalise titles (display-only; stored as entered) */
.cap-title {
    text-transform: capitalize;
}

/* "Read more / Read less" for content group descriptions */
.desc-clamp {
    max-height: 4.5em;
    overflow: hidden;
    margin-top: 2px;
}

.desc-clamp + .desc-btn {
    margin-top: var(--space-1);
}

.desc-clamp.open {
    max-height: none;
}

.desc-toggle .desc-btn {
    background: none;
    border: 0;
    padding: 0;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    text-decoration: underline;
}

/* How-to dialog on the student job page */
.howto-dialog {
    width: min(92vw, 520px);
    border: 0;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    background: var(--card);
    color: var(--foreground);
}

.howto-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.howto-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.howto-header strong {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.howto-body {
    padding: var(--space-3);
}

.howto-body ul {
    padding-left: var(--space-4);
    margin: var(--space-2) 0;
}

/* Rich text editor (admin) */
.rich-editor-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-medium, 8px);
    overflow: hidden;
    background: var(--background);
}

.rich-editor-wrap:focus-within {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.rich-toolbar {
    display: flex;
    gap: 2px;
    padding: var(--space-1);
    border-bottom: 1px solid var(--border);
    background: var(--faint);
}

.rich-toolbar button {
    border: 0;
    background: transparent;
    color: var(--foreground);
    font-size: 0.9em;
    line-height: 1;
    padding: 6px 9px;
    border-radius: 6px;
    cursor: pointer;
}

.rich-toolbar button:hover {
    background: color-mix(in srgb, var(--foreground) 8%, transparent);
}

.rich-editor {
    min-height: 90px;
    padding: var(--space-2) var(--space-3);
    outline: none;
    line-height: var(--leading-normal);
}

.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted-foreground);
    opacity: 0.7;
    pointer-events: none;
}

/* Content group cards (title holds a list of files/links) */
.content-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
}

.content-group-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.content-group-head .icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    color: var(--primary);
}

.content-group-head .icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.content-group-head > div:last-child {
    min-width: 0;
    flex: 1;
}

.group-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--border);
    padding-top: var(--space-2);
}

.group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2);
    background: color-mix(in srgb, var(--card), var(--foreground) 4%);
    border-radius: 8px;
}

.group-item .group-item-title {
    min-width: 0;
    word-break: break-word;
}

.group-item .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.video-item {
    flex-direction: column;
    align-items: stretch;
}

/* Optional attachment row (question paper / answer sheet) */
.attachment-item {
    border: 1px dashed var(--border);
    background: color-mix(in srgb, var(--card), var(--primary) 3%);
}

.attachment-item .group-item-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.attachment-item .group-item-title svg {
    flex-shrink: 0;
    color: var(--primary);
}

/* PDF viewer dialog */
.pdf-viewer-dialog {
    width: min(95vw, 1000px);
    height: min(90vh, 90vh);
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
    color: var(--foreground);
}

.pdf-viewer-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
}

.pdf-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
}

.pdf-viewer-header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-viewer-dialog .pdf-pages {
    width: 100%;
    height: calc(100% - 53px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: #525659;
    -webkit-overflow-scrolling: touch;
}

.pdf-viewer-dialog .pdf-page {
    max-width: 100%;
    height: auto;
    display: block;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.pdf-viewer-dialog .pdf-status {
    margin: auto;
    padding: var(--space-4);
    text-align: center;
    color: #f2f2f2;
    font-size: var(--text-7);
}

.pdf-viewer-dialog .pdf-status p {
    margin-bottom: var(--space-2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-sidebar-layout] > main {
        padding: var(--space-3);
    }

    .onboarding {
        padding: var(--space-3);
    }

    .onboarding-slide {
        padding: var(--space-3);
    }

    .container-narrow {
        padding: var(--space-3);
    }

    .login-logo {
        height: 15rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card .value {
        font-size: var(--text-5);
    }
}

/* Dashboard Notification Banner */
.dashboard-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

.dashboard-notice-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-large);
    padding: var(--space-3);
    max-width: 480px;
    margin: 0 auto;
    pointer-events: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dashboard-notice-icon {
    flex-shrink: 0;
    color: var(--primary);
    margin-top: 1px;
}

.dashboard-notice-text {
    flex: 1;
    min-width: 0;
}

.dashboard-notice-text strong {
    display: block;
    font-size: var(--text-6);
    line-height: 1.3;
    color: var(--foreground);
    margin-bottom: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-notice-text p {
    margin: 0;
    font-size: var(--text-7);
    line-height: 1.35;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-notice-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

.dashboard-notice-actions .button {
    font-size: var(--text-8);
    padding: 3px 8px;
}

@media (min-width: 768px) {
    .dashboard-notice {
        bottom: var(--space-4);
        right: var(--space-4);
        left: auto;
        padding: 0;
    }

    .dashboard-notice-content {
        max-width: 380px;
        margin: 0;
        border-radius: var(--radius-large);
    }
}

/* Password visibility toggle */
.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-inline-end: 2.75rem;
}

.password-toggle {
    position: absolute;
    inset-inline-end: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-medium);
}

.password-toggle:hover {
    color: var(--foreground);
}

.password-toggle .icon {
    pointer-events: none;
}


/* Results showcase (student app) */
:root {
    --res-navy-deep: #0a2138;
    --res-navy-mid: #10304f;
    --res-gold: #b9821f;
    --res-gold-strong: #96742b;
    --res-gold-soft: #e6c87d;
}

.poster-carousel {
    --poster-h: min(64vh, 540px);
    margin-bottom: var(--space-2);
}

.poster-track {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-2) var(--space-3);
}

.poster-track::-webkit-scrollbar {
    display: none;
}

.poster-slide {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    scroll-snap-align: center;
    margin: 0;
}

.poster-slide img {
    display: block;
    max-height: var(--poster-h);
    max-width: min(92vw, 560px);
    width: auto;
    height: auto;
    border-radius: var(--radius-card, 14px);
    border: 1px solid color-mix(in srgb, var(--res-gold-soft) 35%, transparent);
    box-shadow: 0 18px 40px -24px rgb(10 33 56 / 0.55);
}

.poster-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.poster-dot {
    appearance: none;
    -webkit-appearance: none;
    width: 0.5rem;
    height: 0.5rem;
    min-width: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted-foreground, #888) 40%, transparent);
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}

.poster-dot.is-active {
    width: 1.4rem;
    background: var(--res-gold);
}

@media (prefers-reduced-motion: reduce) {
    .poster-track {
        scroll-behavior: auto;
    }

    .poster-dot {
        transition: none;
    }
}


.result-cta {
    margin-top: var(--space-4);
    text-align: center;
    padding: var(--space-5);
}

.result-cta h3 {
    margin-bottom: var(--space-1);
}

.result-cta p {
    margin: 0;
}

.result-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.results-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-card, 14px);
    background:
        radial-gradient(40rem 18rem at 110% -4rem, rgb(26 82 118 / 0.55), transparent 70%),
        linear-gradient(90deg, var(--res-navy-deep, #0a2138), var(--res-navy-mid, #10304f));
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.results-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -20px rgb(10 33 56 / 0.6);
    color: #fff;
}

.results-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--res-gold-soft, #e6c87d);
    color: var(--res-navy-deep, #0a2138);
}

.results-banner-text {
    flex: 1;
    min-width: 0;
}

.results-banner-text b {
    display: block;
    font-weight: 800;
    line-height: 1.35;
}

.results-banner-text span {
    display: block;
    color: rgb(255 255 255 / 0.7);
    font-size: 0.875rem;
    margin-top: 2px;
}

.results-banner-arrow {
    flex-shrink: 0;
    color: var(--res-gold-soft, #e6c87d);
}

@media (max-width: 640px) {
    .results-banner {
        flex-wrap: wrap;
    }

    .results-banner-text {
        flex-basis: calc(100% - 3rem);
    }
}

/* Dashboard install-CTA banner (data-install-cta, driven by initInstallCtas) */
.install-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    border-radius: var(--radius-card, 14px);
    background:
        radial-gradient(40rem 18rem at 110% -4rem, rgb(26 82 118 / 0.55), transparent 70%),
        linear-gradient(90deg, var(--res-navy-deep, #0a2138), var(--res-navy-mid, #10304f));
    color: #fff;
}

.install-banner-text {
    flex: 1;
    min-width: 0;
}

.install-banner-text b {
    display: block;
    font-weight: 800;
    line-height: 1.35;
}

.install-banner-text span {
    display: block;
    color: rgb(255 255 255 / 0.7);
    font-size: 0.875rem;
    margin-top: 2px;
}

.install-banner [data-install-btn] {
    flex-shrink: 0;
    background: var(--res-gold-soft, #e6c87d);
    color: var(--res-navy-deep, #0a2138);
    border: none;
    font-weight: 700;
}

.install-banner [data-install-btn]:hover {
    filter: brightness(1.05);
}

@media (max-width: 640px) {
    .install-banner {
        flex-wrap: wrap;
    }

    .install-banner-text {
        flex-basis: 100%;
    }

    .install-banner [data-install-btn] {
        width: 100%;
    }
}