/* Shared app accents layered on top of the ZOTAS layout system. */

[data-app="zotas"] {
    --app-accent: #38bdf8;
    --app-accent-strong: #0284c7;
    --app-accent-soft: rgba(56, 189, 248, 0.16);
    --app-accent-border: rgba(56, 189, 248, 0.36);
    --em-c1: #38bdf8;
    --em-c2: #60a5fa;
}

[data-app="daniotracker"] {
    --app-accent: #f97316;
    --app-accent-strong: #ea580c;
    --app-accent-soft: rgba(249, 115, 22, 0.16);
    --app-accent-border: rgba(249, 115, 22, 0.38);
    --em-c1: #fb923c;
    --em-c2: #ef4444;
    --brand-c1: #ffffff;
    --brand-c2: #fb923c;
    --brand-c3: #ef4444;
}

[data-theme="light"][data-app="daniotracker"] {
    --app-accent: #ea580c;
    --app-accent-strong: #c2410c;
    --app-accent-soft: rgba(234, 88, 12, 0.11);
    --app-accent-border: rgba(234, 88, 12, 0.3);
    --em-c1: #ea580c;
    --em-c2: #dc2626;
    --brand-c1: #0f172a;
    --brand-c2: #ea580c;
    --brand-c3: #dc2626;
}

[data-app="danioache"] {
    --app-accent: #f43f5e;
    --app-accent-strong: #e11d48;
    --app-accent-soft: rgba(244, 63, 94, 0.16);
    --app-accent-border: rgba(244, 63, 94, 0.38);
    --em-c1: #fb7185;
    --em-c2: #e11d48;
    --brand-c1: #ffffff;
    --brand-c2: #fb7185;
    --brand-c3: #e11d48;
}

[data-theme="light"][data-app="danioache"] {
    --app-accent: #e11d48;
    --app-accent-strong: #be123c;
    --app-accent-soft: rgba(225, 29, 72, 0.11);
    --app-accent-border: rgba(225, 29, 72, 0.3);
    --em-c1: #e11d48;
    --em-c2: #9f1239;
    --brand-c1: #0f172a;
    --brand-c2: #e11d48;
    --brand-c3: #9f1239;
}

/* Keep the shared aquatic background, but carry each app's accent into the lower ambient glow. */
[data-app="daniotracker"] .mesh-gradient::before {
    background:
        radial-gradient(ellipse 85% 65% at 55% -10%, rgba(37, 99, 235, 0.28) 0%, transparent 65%),
        radial-gradient(circle 800px at 85% 65%, rgba(249, 115, 22, 0.18) 0%, transparent 75%),
        radial-gradient(circle 850px at 15% 45%, rgba(15, 23, 42, 0.85) 0%, transparent 80%),
        linear-gradient(155deg, #0e2750 0%, #092c3a 55%, #24170f 100%);
}

[data-theme="light"][data-app="daniotracker"] .mesh-gradient::after {
    background:
        radial-gradient(ellipse 100% 70% at 50% -20%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
        radial-gradient(circle 900px at 85% 85%, rgba(249, 115, 22, 0.12) 0%, transparent 75%),
        linear-gradient(135deg, #ecf4fd 0%, #def2f4 50%, #fff1e6 100%);
}

[data-app="daniotracker"] .nav-brand-logo img,
[data-app="daniotracker"] .nav-brand-logo svg {
    filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.45));
}

[data-app="daniotracker"] .nav-brand:hover .nav-brand-logo img,
[data-app="daniotracker"] .nav-brand:hover .nav-brand-logo svg {
    filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.75));
}

[data-app="danioache"] .nav-brand-logo img,
[data-app="danioache"] .nav-brand-logo svg {
    filter: drop-shadow(0 0 12px rgba(244, 63, 94, 0.45));
}

[data-app="danioache"] .nav-brand:hover .nav-brand-logo img,
[data-app="danioache"] .nav-brand:hover .nav-brand-logo svg {
    filter: drop-shadow(0 0 18px rgba(244, 63, 94, 0.75));
}

/* DanioAChE keeps the shared blue atmosphere while replacing ZOTAS' green secondary glow. */
[data-app="danioache"] .mesh-gradient::before {
    background:
        radial-gradient(ellipse 85% 65% at 55% -10%, rgba(37, 99, 235, 0.28) 0%, transparent 65%),
        radial-gradient(circle 800px at 85% 65%, rgba(244, 63, 94, 0.18) 0%, transparent 75%),
        radial-gradient(circle 850px at 15% 45%, rgba(15, 23, 42, 0.85) 0%, transparent 80%),
        linear-gradient(155deg, #0e2750 0%, #092c3a 55%, #2a111b 100%);
}

[data-theme="light"][data-app="danioache"] .mesh-gradient::after {
    background:
        radial-gradient(ellipse 100% 70% at 50% -20%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
        radial-gradient(circle 900px at 85% 85%, rgba(244, 63, 94, 0.12) 0%, transparent 75%),
        linear-gradient(135deg, #ecf4fd 0%, #def2f4 50%, #fff0f3 100%);
}

[data-app="danioache"] #download-software .preview-controls {
    display: none;
}

[data-app="daniotracker"] #download-software .download-title-row .stream-heading {
    line-height: 1.05;
}

/* Re-tint shared interactive details while retaining the exact ZOTAS geometry. */
[data-app="daniotracker"] .nav-link::after,
[data-app="danioache"] .nav-link::after {
    background: linear-gradient(90deg, var(--em-c1), var(--em-c2));
    transition: background 0.8s ease-in-out,
                transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-app="daniotracker"] .nav-ellipsis-btn.is-open,
[data-app="danioache"] .nav-ellipsis-btn.is-open {
    color: var(--app-accent);
}

[data-app="daniotracker"] .conveyor-station,
[data-app="danioache"] .conveyor-station {
    border-color: var(--app-accent-border);
    border-top-color: var(--app-accent);
}

[data-app="daniotracker"] .conveyor-step-num,
[data-app="danioache"] .conveyor-step-num,
[data-app="daniotracker"] .download-badge,
[data-app="danioache"] .download-badge,
[data-app="daniotracker"] .req-col-title,
[data-app="danioache"] .req-col-title,
[data-app="daniotracker"] .tutorial-step-number,
[data-app="danioache"] .tutorial-step-number {
    color: var(--app-accent);
}

[data-app="daniotracker"] .req-list li::before,
[data-app="danioache"] .req-list li::before {
    color: var(--app-accent);
}

[data-app="daniotracker"] .conveyor-station:hover,
[data-app="danioache"] .conveyor-station:hover {
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
    border-top-color: var(--app-accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

[data-app="daniotracker"] .feature-tag,
[data-app="danioache"] .feature-tag {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
}

[data-app="daniotracker"] .feature-stream-row,
[data-app="danioache"] .feature-stream-row {
    border-color: var(--app-accent-border);
}

[data-app="daniotracker"] .feature-stream-row:hover,
[data-app="danioache"] .feature-stream-row:hover {
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--app-accent) 12%, transparent);
}

[data-app="daniotracker"] .feature-row-glow,
[data-app="danioache"] .feature-row-glow {
    background: radial-gradient(
        circle at 15% 50%,
        color-mix(in srgb, var(--app-accent) 15%, transparent) 0%,
        transparent 60%
    );
}

[data-app="daniotracker"] .feature-node-podium,
[data-app="danioache"] .feature-node-podium {
    color: var(--app-accent);
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

[data-app="daniotracker"] .feature-stream-row:hover .feature-node-podium,
[data-app="danioache"] .feature-stream-row:hover .feature-node-podium {
    background: color-mix(in srgb, var(--app-accent) 20%, transparent);
    border-color: var(--app-accent);
}

[data-app="daniotracker"] .conveyor-publications,
[data-app="danioache"] .conveyor-publications {
    border-top-color: var(--app-accent-border);
}

[data-app="daniotracker"] .publications-badge,
[data-app="danioache"] .publications-badge,
[data-app="daniotracker"] .publication-year,
[data-app="danioache"] .publication-year,
[data-app="daniotracker"] .publication-arrow,
[data-app="danioache"] .publication-arrow {
    color: var(--app-accent);
}

[data-app="daniotracker"] .publication-journal-badge,
[data-app="danioache"] .publication-journal-badge {
    background: var(--app-accent-soft);
    border-color: var(--app-accent-border);
    color: var(--app-accent);
}

[data-app="daniotracker"] .conveyor-publications-grid .publication-item,
[data-app="danioache"] .conveyor-publications-grid .publication-item {
    border-bottom-color: var(--app-accent-border) !important;
}

[data-app="daniotracker"] .conveyor-publications-grid .publication-item:hover,
[data-app="danioache"] .conveyor-publications-grid .publication-item:hover {
    background: color-mix(in srgb, var(--app-accent) 5%, transparent) !important;
    border-bottom-color: var(--app-accent) !important;
}

[data-app="daniotracker"] .download-title-row .icon-aura,
[data-app="danioache"] .download-title-row .icon-aura {
    background: var(--app-accent);
}

[data-app="daniotracker"] .btn-modern-primary,
[data-app="danioache"] .btn-modern-primary {
    background: var(--app-accent-strong);
    border-color: var(--app-accent-strong);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--app-accent) 25%, transparent);
}

[data-app="daniotracker"] .btn-modern-primary:hover,
[data-app="danioache"] .btn-modern-primary:hover {
    background: var(--app-accent);
    border-color: var(--app-accent);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--app-accent) 35%, transparent);
}

[data-app="daniotracker"] .btn-modern-ghost,
[data-app="danioache"] .btn-modern-ghost,
[data-app="daniotracker"] .btn-sample-download,
[data-app="danioache"] .btn-sample-download {
    border-color: var(--app-accent-border);
    color: var(--app-accent);
}

[data-app="daniotracker"] .btn-modern-ghost:hover,
[data-app="danioache"] .btn-modern-ghost:hover,
[data-app="daniotracker"] .btn-sample-download:hover,
[data-app="danioache"] .btn-sample-download:hover {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

[data-app="daniotracker"] .btn-sample-download:disabled,
[data-app="danioache"] .btn-sample-download:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
    box-shadow: none;
}

[data-app="daniotracker"] .tuto-tab-btn .tuto-tab-num,
[data-app="danioache"] .tuto-tab-btn .tuto-tab-num {
    color: var(--app-accent);
}

[data-app="daniotracker"] .auth-highlight,
[data-app="daniotracker"] .auth-label i,
[data-app="daniotracker"] .auth-forgot-link {
    color: var(--app-accent);
}

[data-app="danioache"] .auth-label i,
[data-app="danioache"] .auth-forgot-link {
    color: var(--app-accent);
}

[data-app="daniotracker"] .auth-highlight,
[data-app="danioache"] .auth-highlight {
    background: linear-gradient(120deg, var(--em-c1), var(--em-c2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Keep the sign-in/register tabs on the active application's palette.  The
   shared auth stylesheet provides the ZOTAS-blue defaults, so override those
   states with the accent variables used by each application. */
[data-app] .auth-tab-btn:hover {
    color: var(--app-accent);
}

[data-app] .auth-tab-btn.active {
    background: color-mix(in srgb, var(--app-accent) 18%, transparent);
    color: var(--app-accent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--app-accent) 14%, transparent);
}

[data-theme="light"][data-app] .auth-tab-btn.active {
    background: color-mix(in srgb, var(--app-accent) 11%, #ffffff);
    color: var(--app-accent-strong, var(--app-accent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* Small content primitives used by the migrated software pages. */
.modern-alert {
    width: min(100%, 960px);
    margin: 0 auto 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    text-align: center;
}

[data-theme="light"] .modern-alert {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.8);
}

.modern-media-frame {
    position: relative;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 16 / 10;
    margin: 0 auto 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: #020617;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3);
}

.modern-media-frame img,
.modern-media-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modern-media-frame img {
    object-fit: cover;
}

.modern-media-caption {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modern-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.2rem, 3vw, 2rem);
    margin-top: 2rem;
}

.modern-evidence-item {
    min-width: 0;
}

.modern-evidence-item h3 {
    margin: 0.9rem 0 0.35rem;
    color: var(--text-primary);
    font-family: var(--font-hero);
    font-size: 1.1rem;
}

.modern-evidence-item p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.modern-video-showcase {
    position: relative;
    aspect-ratio: 1005 / 682;
}

.modern-video-showcase .download-showcase-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 0.9s ease-in-out, transform 0.9s ease-in-out;
    background: #111827;
}

.modern-video-showcase .download-showcase-video.is-active {
    display: block;
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .modern-video-showcase .download-showcase-video {
        transition: none;
    }
}

.preview-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.preview-thumb-btn {
    min-width: 2.2rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--app-accent-border, rgba(56, 189, 248, 0.36));
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
}

.preview-thumb-btn.active,
.preview-thumb-btn:hover {
    border-color: var(--app-accent, #38bdf8);
    background: var(--app-accent-soft, rgba(56, 189, 248, 0.16));
    color: var(--app-accent, #38bdf8);
}

.modern-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 1.5rem;
}

.modern-stat {
    padding: 1rem;
    border: 1px solid var(--app-accent-border, rgba(56, 189, 248, 0.3));
    border-radius: 12px;
    background: var(--app-accent-soft, rgba(56, 189, 248, 0.08));
    text-align: center;
}

.modern-stat strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--app-accent, #38bdf8);
    font-family: var(--font-hero);
    font-size: 1.1rem;
}

.modern-stat span {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.modern-page-card {
    width: min(100%, 900px);
    margin: 2rem auto 4rem;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.025);
}

[data-theme="light"] .modern-page-card {
    border-color: rgba(15, 23, 42, 0.09);
    background: rgba(255, 255, 255, 0.65);
}

.modern-page-card h1,
.modern-page-card h2 {
    color: var(--text-primary);
}

.modern-page-card h1 {
    margin-bottom: 1.4rem;
    font-family: var(--font-hero);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.modern-page-card h2 {
    margin: 1.8rem 0 0.55rem;
    font-family: var(--font-hero);
    font-size: 1.25rem;
}

.modern-page-card p,
.modern-page-card li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

.modern-page-card ul {
    margin: 0.6rem 0 1rem 1.25rem;
}

.modern-download-status {
    min-height: 1.4rem;
    margin-top: 0.8rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.modern-hidden-link {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.modern-download-error {
    color: #fda4af;
}

[data-theme="light"] .modern-download-error {
    color: #be123c;
}

@media (max-width: 640px) {
    .modern-stat-grid {
        grid-template-columns: 1fr;
    }

    .modern-evidence-grid {
        grid-template-columns: 1fr;
    }

    .modern-page-card {
        margin-top: 1.25rem;
        margin-bottom: 3rem;
    }
}