/* ============================================================
           TITAN 2026 - Download hub (acelasi limbaj vizual ca site-ul)
           ============================================================ */
        :root {
            --primary-color: #00aaff;
            --secondary-color: #00cc66;
            --danger-color: #ff4444;
            --background-color: #070a12;
            --surface-color: rgba(21, 27, 39, 0.72);
            --surface-glass: rgba(18, 23, 34, 0.7);
            --surface-elevated: rgba(14, 18, 26, 0.88);
            --text-color: #e6edf6;
            --text-muted: #94a6bd;
            --border-color: rgba(255, 255, 255, 0.08);
            --border-strong: rgba(255, 255, 255, 0.16);

            --accent-cyan: #22d3ee;
            --accent-violet: #7c5cff;
            --radius-lg: 20px;
            --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.45);
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

            /* accentul aplicatiei selectate (setat din JS) */
            --app-accent: #00aaff;
            --app-soft: rgba(0, 170, 255, 0.12);
            --app-line: rgba(0, 170, 255, 0.42);
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 100px;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.65;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }
        body.no-scroll { overflow: hidden; }

        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: #05070d; }
        ::-webkit-scrollbar-thumb { background: #2a3446; border-radius: 5px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

        /* --- Fundal animat --- */
        .site-bg {
            position: fixed;
            inset: -60px;
            z-index: -2;
            overflow: hidden;
            pointer-events: none;
            background:
                radial-gradient(1200px 700px at 50% 0%, #101a2e 0%, transparent 60%),
                linear-gradient(180deg, #080c15 0%, #070a12 55%, #05070d 100%);
            transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
            transition: transform 0.7s var(--ease-out);
        }
        .site-bg-grid {
            position: absolute;
            inset: -50%;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
            background-size: 64px 64px;
            -webkit-mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 60%);
            mask-image: radial-gradient(circle at 50% 26%, #000 0%, transparent 60%);
            opacity: 0.55;
            animation: gridDrift 38s linear infinite;
        }
        @keyframes gridDrift {
            from { transform: translate3d(0, 0, 0); }
            to   { transform: translate3d(64px, 64px, 0); }
        }
        .site-bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(110px);
            opacity: 0.3;
            will-change: transform;
        }
        .site-bg-orb.orb-1 { width: 520px; height: 520px; top: -120px; left: -110px; background: #0a6cff; animation: orbFloat1 26s ease-in-out infinite; }
        .site-bg-orb.orb-2 { width: 460px; height: 460px; top: 34%; right: -170px; background: #7c5cff; animation: orbFloat2 32s ease-in-out infinite; }
        .site-bg-orb.orb-3 { width: 540px; height: 540px; bottom: -200px; left: 26%; background: #00cc66; opacity: 0.16; animation: orbFloat3 36s ease-in-out infinite; }
        @keyframes orbFloat1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, 80px) scale(1.15); } }
        @keyframes orbFloat2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-140px, 60px) scale(1.1); } }
        @keyframes orbFloat3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(90px, -95px) scale(1.2); } }

        /* --- Scroll progress --- */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            z-index: 1200;
            background: rgba(255, 255, 255, 0.05);
            pointer-events: none;
        }
        .scroll-progress span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--accent-cyan), var(--primary-color) 45%, var(--accent-violet));
            box-shadow: 0 0 14px rgba(0, 170, 255, 0.7);
        }

        /* --- Navbar --- */
        .main-header {
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 0;
            background: rgba(15, 15, 15, 0.85);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--border-color);
        }

        .container {
            max-width: 1440px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 75px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5em;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: #fff;
            text-decoration: none;
            white-space: nowrap;
        }
        .logo i {
            color: var(--primary-color);
            text-shadow: 0 0 20px rgba(0, 170, 255, 0.5);
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .main-nav a {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            font-size: 14px;
            padding: 8px 16px;
            border-radius: 8px;
            transition: color 0.25s ease, background 0.25s ease;
        }
        .main-nav a:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
        }
        .main-nav a.active {
            color: var(--secondary-color);
            font-weight: 700;
            background: rgba(0, 204, 102, 0.1);
        }

        /* --- Main --- */
        main {
            flex: 1;
            padding-top: 118px;
            padding-bottom: 90px;
            position: relative;
        }

        .ambient-glow { display: none; }

        /* --- Layout principal --- */
        .download-wrapper {
            display: grid;
            grid-template-columns: minmax(330px, 0.88fr) minmax(430px, 1.12fr);
            gap: 22px;
            align-items: start;
        }

        .download-info {
            min-width: 0;
            display: flex;
            flex-direction: column;
            padding: 28px 26px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background:
                radial-gradient(700px 420px at 0% 0%, var(--app-soft), transparent 60%),
                var(--surface-glass);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-card);
            transition: background 0.5s ease;
        }

        .badge-trial {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            align-self: flex-start;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 0.7em;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--secondary-color);
            background: rgba(0, 204, 102, 0.12);
            border: 1px solid rgba(0, 204, 102, 0.34);
        }
        .badge-trial::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--secondary-color);
            box-shadow: 0 0 10px var(--secondary-color);
        }

        h1 {
            margin: 16px 0 11px;
            font-size: clamp(1.6em, 2.4vw, 2.15em);
            line-height: 1.14;
            font-weight: 800;
            letter-spacing: -0.8px;
            background: linear-gradient(100deg, #ffffff 0%, var(--app-accent) 34%, #a78bfa 62%, #ffffff 86%);
            background-size: 250% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
            animation: heroShine 9s linear infinite;
        }
        @keyframes heroShine { to { background-position: 250% center; } }

        .description {
            margin: 0 0 18px;
            color: var(--text-muted);
            font-size: 0.92em;
            line-height: 1.65;
        }

        .hero-highlights {
            list-style: none;
            margin: 0 0 20px;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 9px;
        }
        .hero-highlights li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #cfdcea;
            font-size: 0.87em;
            line-height: 1.5;
        }
        .hero-highlights i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            flex-shrink: 0;
            margin-top: 2px;
            border-radius: 50%;
            font-size: 0.62em;
            color: #04140b;
            background: var(--secondary-color);
        }

        /* --- Specs --- */
        .specs-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
            margin-bottom: 18px;
        }

        /* Marcaj "update nou" pe build-ul lifetime */
        .build-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .build-new {
            display: inline-flex; align-items: center; gap: 5px;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 9.5px; font-weight: 800;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #7ef0b0;
            background: rgba(0, 204, 102, 0.14);
            border: 1px solid rgba(0, 204, 102, 0.40);
            white-space: nowrap;
            animation: buildNewPulse 2.4s ease-in-out infinite;
        }
        .build-new i { font-size: 9px; }
        /* `display` de mai sus batea atributul `hidden`: chipul aparea si la build-uri vechi. */
        .build-new[hidden] { display: none; }
        .build-date { display: block; margin-top: 3px; font-size: 10.5px; color: #7c8794; }
        @keyframes buildNewPulse {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0, 204, 102, 0.0); }
            50%      { box-shadow: 0 0 0 4px rgba(0, 204, 102, 0.10); }
        }
        /* Bara de aplicatii: care sunt gata pentru editia curenta (2027) si care nu. */
        .app-switch-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px 18px;
            margin: 0 2px 10px;
        }
        .app-switch-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.82em;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #dbe6f2;
        }
        .app-switch-title i { color: #38bdf8; }
        .app-switch-legend {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 14px;
            font-size: 0.74em;
            color: var(--text-muted);
        }
        .app-switch-legend > span { display: inline-flex; align-items: center; gap: 6px; }
        .app-tab-year,
        .app-tab-soon {
            display: inline-block;
            padding: 1px 7px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.06em;
            white-space: nowrap;
            line-height: 1.4;
        }
        /* In tab, insigna sta pe randul mic, langa tagline: numele ramane intreg. */
        .app-tab-text small .app-tab-year,
        .app-tab-text small .app-tab-soon {
            margin-right: 5px;
            padding: 0 6px;
            font-size: 9.5px;
            line-height: 15px;
            vertical-align: 1px;
        }
        .app-tab-year {
            color: #e0f2fe;
            background: rgba(56, 189, 248, 0.20);
            border: 1px solid rgba(56, 189, 248, 0.55);
        }
        .app-tab-soon {
            color: #c7ced8;
            background: rgba(255, 255, 255, 0.05);
            border: 1px dashed rgba(255, 255, 255, 0.26);
            text-transform: uppercase;
        }
        .app-tab.is-soon .app-tab-icon { filter: grayscale(0.85); opacity: 0.55; }
        .app-tab.is-soon .app-tab-text strong { color: #aeb8c4; }
        .app-tab.is-soon.active .app-tab-text strong { color: #fff; }
        .app-tab-new {
            margin-left: auto;
            align-self: flex-start;
            padding: 2px 7px;
            border-radius: 999px;
            font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
            color: #7ef0b0;
            background: rgba(0, 204, 102, 0.14);
            border: 1px solid rgba(0, 204, 102, 0.40);
            white-space: nowrap;
        }
        @media (prefers-reduced-motion: reduce) {
            .build-new { animation: none; }
        }

        .spec-item {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 12px 13px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.03);
            transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease-out);
        }
        .spec-item:hover {
            border-color: var(--app-line);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-3px);
        }

        .spec-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            border-radius: 11px;
            font-size: 0.85em;
            color: var(--app-accent);
            background: var(--app-soft);
            border: 1px solid var(--app-line);
        }

        .spec-item small {
            display: block;
            color: var(--text-muted);
            font-size: 0.66em;
            font-weight: 700;
            letter-spacing: 0.9px;
            text-transform: uppercase;
        }
        .spec-item strong {
            display: block;
            color: #fff;
            font-size: 0.93em;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- Buton download --- */
        .btn-download {
            position: relative;
            width: 100%;
            min-height: 56px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 14px;
            border: 0;
            border-radius: 14px;
            background: linear-gradient(135deg, #00cc66, #00b894 55%, #00aaff);
            color: #04140b;
            font: inherit;
            font-size: 1.02em;
            font-weight: 800;
            letter-spacing: 0.3px;
            cursor: pointer;
            overflow: hidden;
            isolation: isolate;
            box-shadow: 0 16px 38px rgba(0, 204, 102, 0.28);
            transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
            animation: pulse-green 3.2s ease-in-out infinite;
        }
        .btn-download::after {
            content: "";
            position: absolute;
            top: 0;
            left: -130%;
            width: 60%;
            height: 100%;
            background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transform: skewX(-20deg);
            transition: left 0.7s var(--ease-out);
            z-index: -1;
        }
        .btn-download:hover::after { left: 140%; }
        .btn-download:hover {
            transform: translateY(-3px);
            box-shadow: 0 22px 50px rgba(0, 204, 102, 0.42);
        }
        .btn-download:active { transform: translateY(0); }
        .btn-download span { font-weight: 800; }
        .btn-download i { transition: transform 0.35s var(--ease-out); }
        .btn-download:hover i { transform: translateY(3px); }

        @keyframes pulse-green {
            0%, 100% { box-shadow: 0 16px 38px rgba(0, 204, 102, 0.28); }
            50%      { box-shadow: 0 16px 44px rgba(0, 204, 102, 0.45); }
        }

        /* --- Chip-uri de siguranta --- */
        .download-assurance {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
            margin-top: auto;
            margin-bottom: 0;
        }
        .download-assurance span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 11px;
            border-radius: 11px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.025);
            color: #cfdcea;
            font-size: 0.78em;
            font-weight: 600;
            transition: border-color 0.3s ease, color 0.3s ease;
        }
        .download-assurance span:hover {
            border-color: var(--app-line);
            color: #fff;
        }
        .download-assurance i { color: var(--app-accent); }

        /* --- Randuri de linkuri --- */
        .btn-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
        }

        .btn-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            border: 1px solid transparent;
            border-radius: 999px;
            background: transparent;
            color: var(--text-muted);
            font: inherit;
            font-size: 0.85em;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.3s var(--ease-out);
        }
        .btn-link:hover {
            color: #fff;
            border-color: var(--border-color);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-2px);
        }
        .btn-link i { color: var(--app-accent); }

        /* --- Bara de selectie aplicatii --- */
        .app-switch-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

        .app-tab {
            --tab-accent: var(--primary-color);
            position: relative;
            flex: 1 1 200px;
            display: flex;
            align-items: center;
            gap: 11px;
            min-width: 0;
            padding: 11px 13px;
            border: 1px solid var(--border-color);
            border-radius: 14px;
            background: var(--surface-glass);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #dbe6f2;
            font: inherit;
            text-align: left;
            cursor: pointer;
            overflow: hidden;
            transition: border-color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease-out);
        }
        .app-tab::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--tab-accent);
            transform: scaleY(0);
            transform-origin: center;
            transition: transform 0.35s var(--ease-out);
        }
        .app-tab:hover {
            border-color: var(--border-strong);
            background: rgba(255, 255, 255, 0.05);
            transform: translateY(-3px);
        }
        .app-tab:hover::before { transform: scaleY(0.55); }
        .app-tab.active {
            border-color: var(--tab-accent);
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
        }
        .app-tab.active::before { transform: scaleY(1); }

        .app-tab-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            border-radius: 11px;
            font-size: 0.88em;
            color: var(--tab-accent);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            transition: transform 0.35s var(--ease-out);
        }
        .app-tab:hover .app-tab-icon,
        .app-tab.active .app-tab-icon { transform: rotate(-8deg) scale(1.06); }

        .app-tab-text {
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 0;
        }
        .app-tab-text strong {
            font-size: 0.84em;
            font-weight: 700;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .app-tab-text small {
            font-size: 0.7em;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .app-tab[data-app="titan-editor"]      { --tab-accent: #00aaff; }
        .app-tab[data-app="titan-backup"]      { --tab-accent: #00cc66; }
        .app-tab[data-app="titan-discord-bot"] { --tab-accent: #8b95ff; }
        .app-tab[data-app="titan-shop-editor"] { --tab-accent: #22c55e; }
        .app-tab[data-app="titan-startup"]     { --tab-accent: #f59e0b; }

        /* --- Card cu toate build-urile free --- */
        .quick-downloads {
            margin-top: 22px;
            padding: 18px 22px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            background: var(--surface-glass);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-card);
        }

        .quick-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px 18px;
            flex-wrap: wrap;
            margin-bottom: 13px;
        }
        .quick-head-left {
            display: flex;
            align-items: center;
            gap: 8px 14px;
            flex-wrap: wrap;
            min-width: 0;
        }
        .quick-title {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: #fff;
            font-size: 0.78em;
            font-weight: 800;
            letter-spacing: 1.2px;
            text-transform: uppercase;
        }
        .quick-title i { color: var(--app-accent); }
        .quick-note {
            color: var(--text-muted);
            font-size: 0.8em;
        }

        .quick-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .quick-item {
            --q-accent: var(--primary-color);
            flex: 1 1 200px;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.025);
            color: #cfdcea;
            font-size: 0.83em;
            font-weight: 600;
            text-decoration: none;
            transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.35s var(--ease-out);
        }
        .quick-item .quick-item-ico {
            width: 17px;
            flex-shrink: 0;
            text-align: center;
            color: var(--q-accent);
        }
        .quick-item span {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .quick-item .quick-item-dl {
            color: var(--text-muted);
            font-size: 0.85em;
            transition: transform 0.3s var(--ease-out), color 0.3s ease;
        }
        .quick-item:hover {
            border-color: var(--q-accent);
            background: rgba(255, 255, 255, 0.055);
            color: #fff;
            transform: translateY(-2px);
        }
        .quick-item:hover .quick-item-dl {
            color: var(--q-accent);
            transform: translateY(2px);
        }

        .quick-item[data-app="titan-editor"]      { --q-accent: #00aaff; }
        .quick-item[data-app="titan-backup"]      { --q-accent: #00cc66; }
        .quick-item[data-app="titan-discord-bot"] { --q-accent: #8b95ff; }
        .quick-item[data-app="titan-shop-editor"] { --q-accent: #22c55e; }
        .quick-item[data-app="titan-startup"]     { --q-accent: #f59e0b; }

        .quick-foot.btn-links {
            margin-top: 0;
            justify-content: flex-end;
            gap: 6px;
        }
        .quick-foot .btn-link { padding: 7px 12px; font-size: 0.8em; }

        .timed-licenses {
            margin-top: 22px;
            padding: 20px 22px;
            border-radius: 20px;
            border: 1px solid rgba(0, 170, 255, 0.22);
            background:
                radial-gradient(700px 360px at 0% 0%, rgba(0, 170, 255, 0.10), transparent 62%),
                var(--surface-glass);
            box-shadow: var(--shadow-card);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }
        .timed-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 18px;
            margin-bottom: 16px;
        }
        .timed-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 7px;
            color: var(--primary-color);
            font-size: 0.72em;
            font-weight: 850;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .timed-kicker i { color: #8b95ff; }
        .timed-head h1 {
            margin: 0 0 7px;
            color: #fff;
            font-size: 1.2em;
            line-height: 1.22;
        }
        .timed-head p {
            max-width: 760px;
            margin: 0;
            color: var(--text-muted);
            font-size: 0.88em;
            line-height: 1.55;
        }
        .timed-live-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            padding: 8px 12px;
            border-radius: 999px;
            color: #9be7ff;
            background: rgba(0, 170, 255, 0.10);
            border: 1px solid rgba(0, 170, 255, 0.28);
            font-size: 0.74em;
            font-weight: 800;
            white-space: nowrap;
        }
        .timed-live-chip i { color: var(--primary-color); }

        /* Anul editiei, in coltul din dreapta. Planurile pe timp acopera DOAR aplicatiile
           2026; rebuildurile 2027 se vand exclusiv lifetime, de aia scrie si in chip, si
           in nota de sub titlu, si pe fiecare rand din lista de builduri. */
        .timed-head-chips {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 8px;
            flex-shrink: 0;
        }
        .timed-year-chip {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 7px 14px;
            border-radius: 999px;
            color: #ffd9a0;
            background: rgba(240, 180, 41, 0.12);
            border: 1px solid rgba(240, 180, 41, 0.34);
            font-size: 0.72em;
            font-weight: 800;
            letter-spacing: 1.1px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .timed-year-chip strong {
            font-size: 1.3em;
            font-weight: 900;
            letter-spacing: 0.5px;
            color: #ffc861;
        }
        .timed-edition-note {
            /* marginea de jos nu e optionala: fara ea nota se lipea de cardurile de plan */
            margin: 16px 0 22px;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid rgba(240, 180, 41, 0.22);
            background: rgba(240, 180, 41, 0.07);
            color: #e2d5ba;
            font-size: 0.86em;
            line-height: 1.6;
        }
        .timed-edition-note strong { color: #ffc861; }

        .timed-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(280px, 0.96fr);
            gap: 16px;
            align-items: start;
        }
        .timed-plans {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }
        .timed-plan {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(255, 255, 255, 0.035);
        }
        .timed-plan h3 {
            margin: 0;
            color: #fff;
            font-size: 0.98em;
            line-height: 1.25;
        }
        .timed-plan-price {
            color: #fff;
            font-size: 1.45em;
            font-weight: 850;
            line-height: 1;
        }
        .timed-plan small {
            color: var(--text-muted);
            font-size: 0.78em;
            line-height: 1.45;
        }
        .timed-buy,
        .timed-login {
            width: 100%;
            min-height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 11px;
            border: 0;
            color: #03110a;
            background: linear-gradient(135deg, #00cc66, #00aaff);
            font-weight: 850;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.28s var(--ease-out), box-shadow 0.28s ease;
        }
        .timed-buy:hover,
        .timed-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 26px rgba(0, 170, 255, 0.22);
        }
        .timed-apps {
            min-width: 0;
            padding: 14px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.10);
            background: rgba(0, 0, 0, 0.16);
        }
        .timed-apps-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
            color: #fff;
            font-size: 0.82em;
            font-weight: 850;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .timed-app-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 10px;
            align-items: center;
            padding: 8px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.07);
        }
        .timed-apps-title + .timed-app-row { border-top: 0; }
        .timed-app-name {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 9px;
            color: #dce7f3;
            font-weight: 750;
        }
        .timed-app-name i {
            width: 18px;
            text-align: center;
            color: var(--q-accent, var(--primary-color));
        }
        .timed-app-name span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .timed-app-version {
            color: #9fb2c7;
            font-size: 0.78em;
            font-weight: 800;
            white-space: nowrap;
        }
        .timed-version-note {
            margin: 12px 0 0;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid rgba(245, 158, 11, 0.28);
            background: rgba(245, 158, 11, 0.08);
            color: #f8d99a;
            font-size: 0.78em;
            line-height: 1.5;
        }
        .timed-version-note strong { color: #fff; }


        /* --- Stare "in asteptare" (free download oprit) --- */
        .badge-pending {
            color: #ff6b6b;
            background: rgba(255, 71, 87, 0.12);
            border-color: rgba(255, 71, 87, 0.38);
        }
        .badge-pending::before {
            background: #ff4757;
            box-shadow: 0 0 10px #ff4757;
            animation: pending-blink 1.9s ease-in-out infinite;
        }
        @keyframes pending-blink {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.22; }
        }

        .spec-item strong.spec-pending { color: #ff6b6b; }

        .btn-download.btn-pending {
            background: linear-gradient(135deg, #ff4757, #e0273c 55%, #a3101f);
            color: #fff;
            text-decoration: none;
            box-shadow: 0 16px 38px rgba(255, 71, 87, 0.26);
            animation: pulse-red 3.2s ease-in-out infinite;
        }
        .btn-download.btn-pending:hover {
            box-shadow: 0 22px 50px rgba(255, 71, 87, 0.44);
        }
        .btn-download.btn-pending:hover i { transform: none; }

        @keyframes pulse-red {
            0%, 100% { box-shadow: 0 16px 38px rgba(255, 71, 87, 0.26); }
            50%      { box-shadow: 0 16px 44px rgba(255, 71, 87, 0.46); }
        }

        .pending-note {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 0 14px;
            padding: 12px 14px;
            border: 1px solid rgba(255, 71, 87, 0.3);
            border-radius: 13px;
            background: rgba(255, 71, 87, 0.07);
            color: #ffc6cc;
            font-size: 0.8em;
            line-height: 1.55;
        }
        .pending-note i {
            margin-top: 3px;
            color: #ff6b6b;
            flex-shrink: 0;
        }
        .pending-note strong { color: #fff; }
        /* `display: flex` bate atributul `hidden` din UA stylesheet, deci nota ramanea
           vizibila chiar daca JS-ul o ascundea pentru aplicatiile disponibile. */
        .pending-note[hidden] { display: none; }

        .quick-title.quick-title-alert i { color: #ff4757; }

        .quick-item.quick-pending {
            --q-accent: #ff4757;
            border-color: rgba(255, 71, 87, 0.3);
            background: rgba(255, 71, 87, 0.05);
            color: #ffb6bd;
        }
        .quick-item.quick-pending:hover {
            border-color: #ff4757;
            background: rgba(255, 71, 87, 0.1);
            color: #fff;
        }
        .quick-item .quick-item-state {
            flex: 0 0 auto;
            padding: 3px 9px;
            border-radius: 999px;
            border: 1px solid rgba(255, 71, 87, 0.42);
            background: rgba(255, 71, 87, 0.13);
            color: #ff7b86;
            font-size: 0.8em;
            font-weight: 800;
            letter-spacing: 0.7px;
            text-transform: uppercase;
            white-space: nowrap;
        }


        /* --- Cos / comanda --- */
        .nav-account {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .nav-cart {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: 6px;
            padding: 8px 14px;
            border-radius: 10px;
            border: 1px solid var(--app-line, rgba(0, 170, 255, 0.34));
            background: rgba(0, 170, 255, 0.1);
            color: #cfefff;
            font: inherit;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
        }
        .nav-cart:hover {
            background: rgba(0, 170, 255, 0.2);
            color: #fff;
        }
        .nav-cart-count {
            min-width: 21px;
            height: 21px;
            padding: 0 6px;
            display: inline-grid;
            place-items: center;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            color: #cfdcea;
            font-size: 11px;
            font-weight: 800;
        }
        .nav-cart-count.has-items {
            background: var(--secondary-color);
            color: #04140b;
        }

        .order-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 12px;
            padding: 11px 14px;
            border: 1px solid var(--border-color);
            border-radius: 13px;
            background: rgba(255, 255, 255, 0.025);
        }
        .order-price-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--text-muted);
            font-size: 0.78em;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .order-price-label i { color: var(--app-accent); }
        .order-price-value {
            color: #fff;
            font-size: 1.15em;
            font-weight: 800;
            white-space: nowrap;
        }

        .hwid-lock-note {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            margin: 0 0 12px;
            padding: 12px 14px;
            border-radius: 13px;
            border: 1px solid rgba(0, 170, 255, 0.26);
            background: rgba(0, 170, 255, 0.06);
            color: #bdd7ec;
            font-size: 0.8em;
            line-height: 1.5;
        }
        .hwid-lock-note i {
            margin-top: 3px;
            color: var(--primary-color);
            flex-shrink: 0;
        }
        .hwid-lock-note strong { color: #fff; }

        .btn-download:disabled { cursor: not-allowed; }
        .btn-download:disabled:hover { transform: none; }

        .btn-download.btn-in-cart {
            background: linear-gradient(135deg, #00aaff, #0072ff 55%, #7c5cff);
            color: #fff;
            box-shadow: 0 16px 38px rgba(0, 120, 255, 0.28);
            animation: none;
        }

        .login-note {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin: 0 0 14px;
            padding: 12px 14px;
            border: 1px solid rgba(0, 170, 255, 0.28);
            border-radius: 13px;
            background: rgba(0, 170, 255, 0.06);
            color: #bcd9ef;
            font-size: 0.8em;
            line-height: 1.55;
        }
        .login-note i { margin-top: 3px; color: var(--primary-color); flex-shrink: 0; }
        .login-note strong { color: #fff; }
        .login-note a {
            color: var(--primary-color);
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }
        .login-note a:hover { text-decoration: underline; }

        /* --- Grila de aplicatii --- */
        .quick-item { cursor: pointer; }
        .quick-item .quick-item-price {
            flex: 0 0 auto;
            color: #fff;
            font-size: 0.92em;
            font-weight: 800;
            white-space: nowrap;
        }
        .quick-item.quick-pending .quick-item-price { color: #ff9aa3; }

        .quick-item.quick-ready {
            --q-accent: var(--secondary-color);
            border-color: rgba(0, 204, 102, 0.26);
        }
        .quick-item.in-cart {
            border-color: var(--primary-color);
            background: rgba(0, 170, 255, 0.08);
        }

        .quick-item-add {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: 999px;
            border: 1px solid rgba(0, 204, 102, 0.42);
            background: rgba(0, 204, 102, 0.13);
            color: var(--secondary-color);
            font: inherit;
            font-size: 0.88em;
            font-weight: 800;
            cursor: pointer;
            transition: background 0.25s ease, color 0.25s ease;
        }
        .quick-item-add:hover {
            background: var(--secondary-color);
            color: #04140b;
        }

        /* --- Sertarul cu cosul --- */
        .cart-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1400;
            background: rgba(3, 6, 12, 0.66);
            backdrop-filter: blur(3px);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .cart-backdrop.open { opacity: 1; visibility: visible; }

        .cart-drawer {
            position: fixed;
            top: 0;
            right: 0;
            z-index: 1401;
            width: min(420px, 100%);
            height: 100%;
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--border-color);
            background: linear-gradient(180deg, #0d131e 0%, #090d16 100%);
            box-shadow: -24px 0 70px rgba(0, 0, 0, 0.5);
            transform: translateX(105%);
            transition: transform 0.35s var(--ease-out);
        }
        .cart-drawer.open { transform: translateX(0); }

        .cart-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 20px 22px;
            border-bottom: 1px solid var(--border-color);
        }
        .cart-head h2 {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            font-size: 1.05em;
            font-weight: 800;
        }
        .cart-head h2 i { color: var(--primary-color); }
        .cart-close {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.04);
            color: #cfdcea;
            font-size: 20px;
            line-height: 1;
            cursor: pointer;
        }
        .cart-close:hover { color: #fff; border-color: var(--primary-color); }

        .cart-body {
            flex: 1;
            overflow-y: auto;
            padding: 18px 22px;
        }

        .cart-empty {
            display: grid;
            place-items: center;
            gap: 12px;
            min-height: 220px;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.88em;
            line-height: 1.6;
        }
        .cart-empty i { font-size: 30px; color: rgba(255, 255, 255, 0.16); }

        .cart-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 0;
            border-bottom: 1px solid var(--border-color);
        }
        .cart-row:last-child { border-bottom: 0; }
        .cart-row-ico {
            width: 38px;
            height: 38px;
            flex-shrink: 0;
            display: grid;
            place-items: center;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
        }
        .cart-row-main { flex: 1; min-width: 0; }
        .cart-row-name {
            display: block;
            color: #fff;
            font-size: 0.92em;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .cart-row-kind {
            display: block;
            color: var(--text-muted);
            font-size: 0.76em;
        }
        .cart-row-price {
            flex-shrink: 0;
            color: #fff;
            font-weight: 800;
            font-size: 0.92em;
        }
        .cart-row-del {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            display: grid;
            place-items: center;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            background: transparent;
            color: #8ea0b6;
            cursor: pointer;
            transition: color 0.25s ease, border-color 0.25s ease;
        }
        .cart-row-del:hover { color: #ff6b6b; border-color: rgba(255, 71, 87, 0.45); }

        .cart-foot {
            padding: 18px 22px 22px;
            border-top: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.015);
        }
        .cart-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
            color: var(--text-muted);
            font-size: 0.82em;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .cart-total strong {
            color: #fff;
            font-size: 1.5em;
            letter-spacing: 0;
        }
        .cart-checkout {
            width: 100%;
            min-height: 50px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00cc66, #00b894 55%, #00aaff);
            color: #04140b;
            font-weight: 800;
            text-decoration: none;
            transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
        }
        .cart-checkout:hover { transform: translateY(-2px); }
        .cart-checkout[aria-disabled="true"] {
            opacity: 0.4;
            pointer-events: none;
        }
        .cart-clear {
            width: 100%;
            margin-top: 9px;
            padding: 9px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: transparent;
            color: #8ea0b6;
            font: inherit;
            font-size: 0.82em;
            font-weight: 700;
            cursor: pointer;
        }
        .cart-clear:hover { color: #ff6b6b; border-color: rgba(255, 71, 87, 0.4); }
        .cart-hint {
            margin: 13px 0 0;
            color: var(--text-muted);
            font-size: 0.74em;
            line-height: 1.55;
            text-align: center;
        }
        .cart-lock-note {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin: 0 0 12px;
            padding: 11px 12px;
            border-radius: 11px;
            border: 1px solid rgba(0, 170, 255, 0.24);
            background: rgba(0, 170, 255, 0.055);
            color: #bdd7ec;
            font-size: 0.76em;
            line-height: 1.45;
        }
        .cart-lock-note i {
            margin-top: 3px;
            color: var(--primary-color);
            flex-shrink: 0;
        }
        .cart-lock-note strong { color: #fff; }

        /* --- Toast --- */
        .toast {
            position: fixed;
            left: 50%;
            bottom: 26px;
            z-index: 1500;
            transform: translate(-50%, 22px);
            max-width: min(460px, calc(100vw - 32px));
            padding: 13px 18px;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: rgba(13, 19, 30, 0.96);
            color: #e6edf6;
            font-size: 0.86em;
            font-weight: 600;
            box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease;
        }
        .toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
        .toast.ok { border-color: rgba(0, 204, 102, 0.45); }
        .toast.error { border-color: rgba(255, 71, 87, 0.45); }

        @media (max-width: 700px) {
            .nav-cart span:not(.nav-cart-count) { display: none; }
            .nav-account span { display: none; }
            .cart-drawer { width: 100%; }
        }

        /* --- Coloana media --- */
        .download-visual { position: relative; min-width: 0; }
        .download-visual::before { display: none; }

        .media-shell {
            width: 100%;
            min-width: 0;
            padding: 22px;
            border-radius: 24px;
            border: 1px solid var(--border-color);
            background:
                radial-gradient(circle at 12% 18%, var(--app-soft), transparent 46%),
                radial-gradient(circle at 88% 84%, rgba(124, 92, 255, 0.1), transparent 46%),
                var(--surface-elevated);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: var(--shadow-card);
            transition: background 0.5s ease;
        }

        .media-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .media-kicker {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 0.72em;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--app-accent);
        }
        .media-kicker::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--app-accent);
            box-shadow: 0 0 10px var(--app-accent);
        }

        .media-app-title {
            margin: 8px 0 0;
            color: #fff;
            font-size: 1.4em;
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1.2;
        }

        /* --- Stage --- */
        .media-frame {
            position: relative;
            aspect-ratio: 16 / 9;
            max-height: 520px;
            border-radius: 16px;
            border: 1px solid var(--border-color);
            overflow: hidden;
            background: linear-gradient(135deg, #0d121b, #090b11);
            touch-action: pan-y;
        }

        .media-stage {
            position: absolute;
            inset: 0;
        }

        .media-item {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: mediaIn 0.45s var(--ease-out);
        }
        @keyframes mediaIn {
            from { opacity: 0; transform: scale(1.015); }
            to   { opacity: 1; transform: none; }
        }

        .media-item.is-image::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--media-bg);
            background-size: cover;
            background-position: center;
            filter: blur(30px) saturate(1.15);
            opacity: 0.3;
            transform: scale(1.15);
        }

        .media-item.is-image img {
            position: relative;
            z-index: 1;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .media-item.is-image img.media-zoomable { cursor: zoom-in; }

        .media-item.is-video iframe {
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            background: #000;
        }

        .media-progress {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            z-index: 4;
            background: rgba(255, 255, 255, 0.08);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        .media-progress.is-running { opacity: 1; }
        .media-progress span {
            display: block;
            height: 100%;
            width: 100%;
            transform: scaleX(0);
            transform-origin: left center;
            background: linear-gradient(90deg, var(--app-accent), #7c5cff);
        }
        .media-progress.is-running span {
            animation: mediaProgress var(--rotate-ms, 6000ms) linear forwards;
        }
        @keyframes mediaProgress {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
        }

        .media-expand-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            z-index: 3;
            width: 38px;
            height: 38px;
            border-radius: 11px;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(6, 10, 16, 0.62);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.35s var(--ease-out), border-color 0.3s, background 0.3s;
        }
        .media-expand-btn:hover {
            border-color: var(--app-line);
            background: rgba(6, 10, 16, 0.85);
            transform: scale(1.06);
        }

        .media-empty {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 10px;
            padding: 24px;
            color: var(--text-muted);
        }
        .media-empty i { font-size: 2.4em; color: var(--app-accent); }
        .media-empty strong { color: #fff; font-size: 1.06em; }

        .media-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(6, 10, 16, 0.68);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #fff;
            cursor: pointer;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
        }
        .media-nav:hover {
            background: rgba(8, 13, 21, 0.92);
            border-color: var(--app-line);
            transform: translateY(-50%) scale(1.08);
        }
        .media-nav:disabled { opacity: 0.3; cursor: not-allowed; }
        .media-nav-prev { left: 14px; }
        .media-nav-next { right: 14px; }

        /* --- Meta --- */
        .media-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            font-size: 0.85em;
            margin-top: 14px;
        }
        .media-meta-left {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }
        .media-kind {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 0.85em;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--app-accent);
            background: var(--app-soft);
            border: 1px solid var(--app-line);
        }
        .media-counter {
            color: #fff;
            font-weight: 700;
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
        }
        .media-hint {
            color: var(--text-muted);
            text-align: right;
        }

        /* --- Thumbs ---
           26 de poze intr-o banda: miniaturile sunt patrate de imagine cu numarul in colt,
           nu carduri cu eticheta. Incap de doua ori mai multe pe acelasi rand si se vede
           din prima despre ce poza e vorba. Eticheta ramane in tooltip + in linia de sub stage. */
        .media-thumbs-wrap {
            position: relative;
            min-width: 0;
            margin-top: 14px;
        }

        .media-thumbs {
            min-width: 0;
            display: flex;
            gap: 9px;
            overflow-x: auto;
            padding: 3px 2px 8px;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        }
        .media-thumbs::-webkit-scrollbar { height: 6px; }
        .media-thumbs::-webkit-scrollbar-track { background: transparent; }
        .media-thumbs::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
            border-radius: 999px;
        }
        /* Estompam capetele benzii ca sa se vada ca mai sunt poze in afara cadrului.
           Masca lucreaza pe continut, deci nu trebuie potrivita cu fundalul cardului. */
        .media-thumbs.fade-left {
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px);
            mask-image: linear-gradient(90deg, transparent 0, #000 34px);
        }
        .media-thumbs.fade-right {
            -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent 100%);
        }
        .media-thumbs.fade-left.fade-right {
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
        }

        .media-thumbs-btn {
            position: absolute;
            top: calc(50% - 4px);
            z-index: 4;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid var(--border-strong);
            background: rgba(8, 12, 19, 0.92);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #fff;
            font-size: 0.8em;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-50%) scale(0.85);
            transition: opacity 0.25s ease, transform 0.3s var(--ease-out), border-color 0.25s;
        }
        .media-thumbs-btn:hover { border-color: var(--app-accent); }
        .media-thumbs-btn-prev { left: -6px; }
        .media-thumbs-btn-next { right: -6px; }
        /* Clasa se pune din JS (updateThumbsFade), nu printr-un selector de frati:
           asa e clar cine o aprinde si nu depinde de ordinea din DOM. */
        .media-thumbs-btn.is-on {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-50%) scale(1);
        }

        .media-thumb {
            position: relative;
            flex: 0 0 118px;
            height: 70px;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--border-color);
            border-radius: 11px;
            background: #070b12;
            color: var(--text-muted);
            cursor: pointer;
            transition: transform 0.35s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
        }
        .media-thumb:hover {
            border-color: var(--border-strong);
            transform: translateY(-3px);
        }
        .media-thumb:focus-visible {
            outline: 2px solid var(--app-accent);
            outline-offset: 2px;
        }
        .media-thumb.active {
            border-color: var(--app-accent);
            box-shadow: 0 0 0 1px var(--app-accent), 0 10px 24px rgba(0, 0, 0, 0.5);
        }
        .media-thumb img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #060a10;
            opacity: 0.66;
            transition: opacity 0.3s ease, transform 0.55s var(--ease-out);
        }
        .media-thumb:hover img { opacity: 1; transform: scale(1.07); }
        .media-thumb.active img { opacity: 1; }

        .thumb-icon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, rgba(255, 76, 76, 0.34), rgba(255, 0, 0, 0.12));
            color: #ff6464;
            font-size: 1.5em;
        }

        .media-thumb-no {
            position: absolute;
            left: 5px;
            bottom: 5px;
            min-width: 20px;
            padding: 2px 6px;
            border-radius: 6px;
            background: rgba(4, 7, 12, 0.82);
            color: #cfe2f2;
            font-size: 0.66em;
            font-weight: 800;
            line-height: 1.5;
            letter-spacing: 0.4px;
            font-variant-numeric: tabular-nums;
            pointer-events: none;
        }
        .media-thumb.active .media-thumb-no {
            background: var(--app-accent);
            color: #04070c;
        }

        /* --- Cele doua benzi: poze si video --- */
        .media-strip { margin-top: 16px; }
        .media-strip-head {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 9px;
        }
        .media-strip-head::after {
            content: "";
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, var(--border-strong), transparent);
        }
        .media-strip-title {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #cfdcea;
            font-size: 0.72em;
            font-weight: 800;
            letter-spacing: 1.3px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .media-strip-title i { color: var(--app-accent); }
        .media-strip-title.is-video i { color: #ff4d4d; }
        .media-strip-count {
            padding: 2px 9px;
            border-radius: 999px;
            border: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-muted);
            font-size: 0.68em;
            font-weight: 800;
            letter-spacing: 0.5px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        /* Cardurile de video: miniatura YouTube + titlul, ca sa se stie ce deschizi. */
        .media-video-list {
            display: flex;
            gap: 11px;
            overflow-x: auto;
            padding: 3px 2px 8px;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        }
        .media-video-list::-webkit-scrollbar { height: 6px; }
        .media-video-list::-webkit-scrollbar-track { background: transparent; }
        .media-video-list::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
            border-radius: 999px;
        }

        .media-video-card {
            flex: 0 0 236px;
            display: flex;
            flex-direction: column;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--border-color);
            border-radius: 13px;
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-muted);
            text-align: left;
            font: inherit;
            cursor: pointer;
            transition: transform 0.35s var(--ease-out), border-color 0.3s, background 0.3s, box-shadow 0.3s;
        }
        .media-video-card:hover {
            transform: translateY(-3px);
            border-color: rgba(255, 77, 77, 0.45);
            background: rgba(255, 77, 77, 0.06);
        }
        .media-video-card:focus-visible {
            outline: 2px solid #ff4d4d;
            outline-offset: 2px;
        }
        .media-video-card.active {
            border-color: #ff4d4d;
            background: rgba(255, 77, 77, 0.09);
            box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.45), 0 12px 26px rgba(0, 0, 0, 0.45);
        }

        .media-video-thumb {
            position: relative;
            display: block;
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: #060a10;
        }
        .media-video-thumb img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
            transition: opacity 0.3s ease, transform 0.55s var(--ease-out);
        }
        .media-video-card:hover .media-video-thumb img,
        .media-video-card.active .media-video-thumb img { opacity: 1; transform: scale(1.05); }
        .media-video-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .media-video-play i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding-left: 3px;
            border-radius: 50%;
            background: rgba(230, 0, 0, 0.9);
            color: #fff;
            font-size: 0.82em;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s var(--ease-out);
        }
        .media-video-card:hover .media-video-play i { transform: scale(1.12); }

        .media-video-body {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 10px 12px 12px;
        }
        .media-video-title {
            color: #fff;
            font-size: 0.82em;
            font-weight: 700;
            line-height: 1.35;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .media-video-sub {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--text-muted);
            font-size: 0.71em;
            font-weight: 700;
            letter-spacing: 0.4px;
        }
        .media-video-sub i { color: #ff4d4d; }
        .media-video-card.active .media-video-sub { color: #ffb3b3; }

        /* ------------------------------------------------------------------
           LISTE LUNGI CARE NU MAI IMPING PAGINA IN JOS
           (".clip" = orice bucata de continut care se pliaza)

           DE CE EXISTA: textul pentru highlights / bullets se scrie din admin,
           iar acolo se poate lipi un changelog intreg. Fara pliere, panoul de
           sus impingea pretul si butonul de comanda sub ecran, iar in grila de
           aplicatii o singura coloana o facea de zece ori mai inalta decat
           vecinele (grila intinde toate cardurile la inaltimea celei mai mari).

           CUM SE FOLOSESTE:
             <div class="clip" data-clip data-clip-label="points"
                  style="--clip-h: 210px; --clip-fade: #0f131d;">
               <div class="clip-body"> ...lista... </div>
               <button type="button" class="clip-toggle" aria-expanded="false">
                 <span class="clip-toggle-text">Show all</span>
                 <i class="fa-solid fa-chevron-down"></i>
               </button>
             </div>
           --clip-fade trebuie sa fie culoarea REALA de sub lista, altfel
           estomparea se vede ca o dunga. Panourile sunt semi-transparente peste
           fundalul inchis, de aia valorile de mai jos nu sunt cele din :root.

           Continutul NU se taie din PHP - ramane tot in pagina (deci si pentru
           Google), doar ca e ascuns cu max-height.
           ------------------------------------------------------------------ */
        .clip { position: relative; }

        /* Butonul "Show all N points" se lipea de cardul de dedesubt (grila de specs):
           parea ca il loveste. Spatiul se pune doar cand mai urmeaza ceva dupa clip -
           in cardurile din "apps-copy" pliul e ultimul element si nu trebuie margine. */
        .clip:not(:last-child) { margin-bottom: 22px; }

        .clip-body {
            position: relative;
            overflow: hidden;
            max-height: var(--clip-h, 236px);
            transition: max-height 0.5s var(--ease-out);
        }
        .clip.is-open .clip-body { max-height: var(--clip-full, 4000px); }

        /* Estomparea de jos. pointer-events: none, altfel ar inghiti clicurile. */
        .clip-body::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 64px;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--clip-fade, #0f131d));
            transition: opacity 0.3s ease;
        }
        .clip.is-open .clip-body::after,
        .clip.is-short .clip-body::after { opacity: 0; }

        .clip-toggle {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            padding: 7px 14px;
            border: 1px solid var(--border-strong);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            color: #cfdcea;
            font: inherit;
            font-size: 0.8em;
            font-weight: 700;
            letter-spacing: 0.2px;
            cursor: pointer;
            transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
        }
        .clip-toggle:hover {
            border-color: var(--primary-color);
            color: #fff;
            background: rgba(0, 170, 255, 0.10);
        }
        .clip-toggle:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
        }
        .clip-toggle i { font-size: 0.85em; transition: transform 0.35s var(--ease-out); }
        .clip.is-open .clip-toggle i { transform: rotate(180deg); }

        /* Lista scurta: nu are ce desface, deci nici buton nu trebuie. */
        .clip.is-short .clip-toggle { display: none; }

        /* Marginea de jos a listei ar lasa o gaura intre text si buton. */
        .clip-body > .hero-highlights { margin-bottom: 0; }

        @media (prefers-reduced-motion: reduce) {
            .clip-body, .clip-body::after, .clip-toggle i { transition: none; }
        }

        /* --- Carduri info --- */
        /* --- Back to top --- */
        .back-to-top {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 1100;
            width: 48px;
            height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            border: 1px solid var(--border-strong);
            background: rgba(16, 21, 31, 0.85);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: var(--text-color);
            font-size: 15px;
            cursor: pointer;
            opacity: 0;
            visibility: hidden;
            transform: translateY(14px);
            transition: opacity 0.35s ease, transform 0.35s var(--ease-out), visibility 0.35s, border-color 0.3s, color 0.3s;
        }
        .back-to-top.show { opacity: 1; visibility: visible; transform: none; }
        .back-to-top:hover {
            color: var(--primary-color);
            border-color: rgba(0, 170, 255, 0.5);
            box-shadow: 0 10px 26px rgba(0, 140, 255, 0.28);
        }

        /* --- Reveal --- */
        .reveal {
            opacity: 0;
            transform: translateY(28px);
            transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
        }
        .reveal.is-visible { opacity: 1; transform: none; }

        /* --- Footer --- */
        .main-footer {
            position: relative;
            padding: 34px 0;
            text-align: center;
            background: linear-gradient(180deg, rgba(6, 9, 15, 0.4), rgba(4, 6, 11, 0.95));
            border-top: 1px solid var(--border-color);
        }
        .main-footer p { margin: 0; color: var(--text-muted); font-size: 0.9em; }

        /* --- Modal acord download --- */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1500;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(4, 6, 11, 0.82);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .modal-content {
            width: min(560px, 100%);
            border-radius: 22px;
            border: 1px solid var(--border-strong);
            background: var(--surface-elevated);
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
            overflow: hidden;
            animation: modalIn 0.4s var(--ease-out);
        }
        @keyframes modalIn {
            from { opacity: 0; transform: translateY(24px) scale(0.98); }
            to   { opacity: 1; transform: none; }
        }

        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 20px 24px;
            border-bottom: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
        }
        .modal-header h2 {
            display: flex;
            align-items: center;
            gap: 11px;
            margin: 0;
            font-size: 1.15em;
            font-weight: 800;
            color: #fff;
        }
        .modal-header h2 i { color: var(--primary-color); }

        .close-modal {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--text-muted);
            font-size: 1.4em;
            line-height: 1;
            cursor: pointer;
            transition: color 0.25s, background 0.25s, transform 0.3s var(--ease-out);
        }
        .close-modal:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.07);
            transform: rotate(90deg);
        }

        .modal-body {
            padding: 24px;
            max-height: 60vh;
            overflow-y: auto;
            color: #c4d1e0;
            font-size: 0.93em;
        }
        .modal-body p { margin: 0 0 12px; }
        .modal-body strong { color: #fff; }

        .tos-box {
            margin: 14px 0;
            padding: 15px 16px;
            border-radius: 14px;
            border: 1px solid var(--border-color);
            border-left: 3px solid var(--primary-color);
            background: rgba(255, 255, 255, 0.03);
            font-size: 0.95em;
            line-height: 1.6;
        }
        .tos-title {
            display: block;
            margin-bottom: 6px;
            color: var(--primary-color);
            font-weight: 800;
            font-size: 0.92em;
            letter-spacing: 0.4px;
        }

        .modal-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            padding: 18px 24px;
            border-top: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
        }

        .checkbox-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #cfdcea;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
        }
        .checkbox-wrapper input {
            width: 18px;
            height: 18px;
            accent-color: var(--secondary-color);
            cursor: pointer;
        }

        .btn-modal-action {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 13px 24px;
            border: 0;
            border-radius: 12px;
            background: linear-gradient(135deg, #00cc66, #00b894);
            color: #04140b;
            font: inherit;
            font-size: 0.95em;
            font-weight: 800;
            cursor: pointer;
            opacity: 0.4;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
        }
        .btn-modal-action.active {
            opacity: 1;
            pointer-events: all;
            box-shadow: 0 12px 28px rgba(0, 204, 102, 0.3);
        }
        .btn-modal-action.active:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 36px rgba(0, 204, 102, 0.42);
        }

        /* --- Preview fullscreen --- */
        .image-preview-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 1600;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(4, 6, 11, 0.9);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .image-preview-modal.open { display: flex; }

        .image-preview-dialog {
            width: min(1180px, 96vw);
            max-height: 92vh;
            display: flex;
            flex-direction: column;
            border-radius: 20px;
            border: 1px solid var(--border-strong);
            background: var(--surface-elevated);
            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.65);
            overflow: hidden;
        }

        .image-preview-top {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
        }
        .image-preview-title {
            color: #fff;
            font-size: 0.98em;
            font-weight: 700;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .image-preview-meta {
            color: var(--text-muted);
            font-size: 0.84em;
            font-variant-numeric: tabular-nums;
        }
        .image-preview-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }
        .image-preview-save,
        .image-preview-close {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 15px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.04);
            color: #d7e8f3;
            font: inherit;
            font-size: 0.84em;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.25s, border-color 0.25s, background 0.25s;
        }
        .image-preview-save:hover,
        .image-preview-close:hover {
            color: #fff;
            border-color: var(--app-line);
            background: rgba(0, 170, 255, 0.1);
        }

        .image-preview-body {
            position: relative;
            flex: 1;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: #05070d;
            overflow: hidden;
        }

        .image-preview-canvas {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            touch-action: pan-y;
        }
        /* Cand poza e marita se trage cu mouse-ul - de aia nu mai folosim scroll pe canvas. */
        .image-preview-canvas.is-zoomed { cursor: grab; touch-action: none; }
        .image-preview-canvas.is-panning { cursor: grabbing; }

        .image-preview-media-image {
            max-width: 100%;
            /* lasa loc benzii de miniaturi si celor doua bare, pe ecrane mici si pe cele mari */
            max-height: max(200px, min(calc(92vh - 268px), 720px));
            object-fit: contain;
            border-radius: 10px;
            transform-origin: center center;
            will-change: transform;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        .image-preview-media-image.is-animated { transition: transform 0.18s ease; }

        .image-preview-media-video {
            width: 100%;
            height: max(200px, min(calc(92vh - 268px), 640px));
            border: 0;
            border-radius: 10px;
            background: #000;
        }

        .image-preview-broken {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            color: var(--text-muted);
            text-align: center;
        }
        .image-preview-broken i { font-size: 2.2em; color: #ff6b6b; }

        .image-preview-loader {
            position: absolute;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            z-index: 5;
        }
        .image-preview-loader.is-on { display: flex; }
        .image-preview-loader span {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.16);
            border-top-color: var(--app-accent);
            animation: previewSpin 0.7s linear infinite;
        }
        @keyframes previewSpin { to { transform: rotate(360deg); } }

        /* z-index: fara el, poza (care are transform) se deseneaza PESTE sageata din
           stanga, pentru ca in DOM vine dupa ea. Rezultatul: "Previous" nu mai raspundea
           la click pe pozele late, dar "Next" mergea. Bug raportat 2026-09-27. */
        .image-preview-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 6;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.22);
            background: rgba(6, 10, 16, 0.78);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s, border-color 0.3s, transform 0.35s var(--ease-out);
        }
        .image-preview-nav:hover {
            background: rgba(8, 13, 21, 0.95);
            border-color: var(--app-line);
            transform: translateY(-50%) scale(1.08);
        }
        .image-preview-nav:disabled { opacity: 0.3; cursor: not-allowed; }
        .image-preview-nav-prev { left: 16px; }
        .image-preview-nav-next { right: 16px; }

        /* --- Banda de miniaturi din lightbox: saritul direct la orice poza --- */
        .image-preview-film {
            position: relative;
            display: flex;
            gap: 8px;
            padding: 10px 14px;
            overflow-x: auto;
            border-top: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.015);
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
        }
        .image-preview-film::-webkit-scrollbar { height: 6px; }
        .image-preview-film::-webkit-scrollbar-track { background: transparent; }
        .image-preview-film::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
            border-radius: 999px;
        }
        .image-preview-film:empty { display: none; }

        .image-preview-film-item {
            position: relative;
            flex: 0 0 84px;
            height: 52px;
            padding: 0;
            overflow: hidden;
            border: 1px solid var(--border-color);
            border-radius: 9px;
            background: #070b12;
            cursor: pointer;
            transition: border-color 0.25s, transform 0.3s var(--ease-out), box-shadow 0.25s;
        }
        .image-preview-film-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.58;
            transition: opacity 0.25s ease;
        }
        .image-preview-film-item:hover { transform: translateY(-2px); border-color: var(--border-strong); }
        .image-preview-film-item:hover img { opacity: 0.9; }
        .image-preview-film-item.active {
            border-color: var(--app-accent);
            box-shadow: 0 0 0 1px var(--app-accent);
        }
        .image-preview-film-item.active img { opacity: 1; }
        .image-preview-film-item .thumb-icon { font-size: 1.1em; }
        .image-preview-film-no {
            position: absolute;
            left: 4px;
            bottom: 4px;
            padding: 1px 5px;
            border-radius: 5px;
            background: rgba(4, 7, 12, 0.85);
            color: #cfe2f2;
            font-size: 0.6em;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            pointer-events: none;
        }
        .image-preview-film-item.active .image-preview-film-no {
            background: var(--app-accent);
            color: #04070c;
        }

        .image-preview-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
            padding: 11px 20px;
            border-top: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.02);
            font-size: 0.82em;
        }
        .image-preview-zoombar {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.03);
        }
        .image-preview-zoombar button {
            min-width: 28px;
            height: 26px;
            padding: 0 8px;
            border: 0;
            border-radius: 7px;
            background: transparent;
            color: #d7e8f3;
            font: inherit;
            font-size: 0.95em;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s, color 0.2s;
        }
        .image-preview-zoombar button:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.08);
            color: #fff;
        }
        .image-preview-zoombar button:disabled { opacity: 0.35; cursor: not-allowed; }
        .image-preview-zoom {
            color: #fff;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            min-width: 58px;
        }
        .image-preview-hint { color: var(--text-muted); }
        .image-preview-hint kbd {
            display: inline-block;
            min-width: 18px;
            margin: 0 2px;
            padding: 1px 5px;
            border: 1px solid var(--border-strong);
            border-bottom-width: 2px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.05);
            color: #d7e8f3;
            font-family: inherit;
            font-size: 0.92em;
            font-weight: 700;
            line-height: 1.5;
            text-align: center;
        }

        /* Ecran scund (laptop 768p cu bara de taskuri, telefon pe orizontala):
           banda de miniaturi din lightbox ar manca toata poza, deci o ascundem. */
        @media (max-height: 640px) {
            .image-preview-film { display: none; }
            .image-preview-media-image { max-height: max(160px, calc(94vh - 170px)); }
            .image-preview-media-video { height: max(160px, calc(94vh - 170px)); }
        }

        /* --- Responsive --- */
        @media (max-width: 1100px) {
            .download-wrapper { grid-template-columns: 1fr; }
            .download-visual { order: -1; }
            .download-info { margin-top: 0; }
            .timed-layout { grid-template-columns: 1fr; }
        }

        @media (max-width: 560px) {
            .app-switch-bar { gap: 8px; }
            .app-tab { flex-basis: 140px; padding: 10px 11px; gap: 9px; }
            .app-tab-icon { width: 30px; height: 30px; border-radius: 9px; }
            .app-tab-text strong { font-size: 0.8em; }
        }

        @media (max-width: 900px) {
            main { padding-top: 100px; padding-bottom: 60px; }
            .header-content { height: 64px; }
            .logo { font-size: 1.25em; }
            .main-nav { gap: 0; }
            .main-nav a { padding: 6px 10px; font-size: 13px; }
            .download-info { padding: 24px 18px; border-radius: 20px; }
            .quick-downloads { padding: 16px; border-radius: 18px; }
            .quick-head { flex-direction: column; align-items: flex-start; }
            .quick-foot.btn-links { justify-content: flex-start; margin-left: -12px; }
            .timed-licenses { padding: 16px; border-radius: 18px; }
            .timed-head { flex-direction: column; }
            .timed-head-chips { flex-direction: row; align-items: center; flex-wrap: wrap; }
            .timed-plans { grid-template-columns: 1fr; }
            .media-shell { padding: 16px; border-radius: 20px; }
            .media-frame { max-height: none; }
            .media-nav { width: 38px; height: 38px; }
            .media-nav-prev { left: 8px; }
            .media-nav-next { right: 8px; }
            .media-thumb { flex-basis: 104px; height: 62px; }
            .media-thumbs-btn { display: none; }
            .media-video-card { flex-basis: 196px; }
            .media-meta { flex-direction: column; align-items: flex-start; }
            .media-hint { text-align: left; }
            .image-preview-dialog { width: 96vw; max-height: 94vh; }
            .image-preview-top { flex-wrap: wrap; }
            .image-preview-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
            .image-preview-nav { width: 38px; height: 38px; }
            .image-preview-nav-prev { left: 8px; }
            .image-preview-nav-next { right: 8px; }
            .image-preview-film-item { flex-basis: 70px; height: 44px; }
            .image-preview-bottom { flex-direction: column; align-items: flex-start; }
            .back-to-top { right: 14px; bottom: 14px; }
        }

        @media (max-width: 520px) {
            h1 { font-size: 1.75em; }
            .specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .download-assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .quick-item { flex-basis: 100%; }
            .timed-app-row { grid-template-columns: 1fr; gap: 4px; }
            .timed-app-version { padding-left: 27px; }
            .btn-download { min-height: 58px; font-size: 1em; }
            .modal-footer { flex-direction: column; align-items: stretch; }
            .btn-modal-action { justify-content: center; }
        }

        /* --- Reduced motion --- */
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
            }
            .reveal { opacity: 1 !important; transform: none !important; }
            .site-bg { transform: none !important; }
        }

        .timed-store .timed-licenses { margin-top: 0; }
        .header-content { gap: 16px; }
        .main-nav a { white-space: nowrap; }
        .app-tab { scroll-margin-top: 150px; }
        @media (max-width: 680px) {
            .header-content { height: auto; min-height: 104px; flex-direction: column; justify-content: center; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
            .main-nav { flex-wrap: wrap; justify-content: center; }
            .main-nav a { padding: 6px 8px; }
            main { padding-top: 144px; }
        }