/* ClutchMX scoped-core - sync-hosted-scoped-css.ps1 */
/* _content/AppBasquet.Web.Client.Shared/Components/Analytics/UtmShareLinksPanel.razor.rz.scp.css */

.utm-share-panel {

    margin-top: 12px;

    padding: 14px 16px;

    border: 1px solid rgba(145, 71, 255, 0.35);

    border-radius: 12px;

    background: rgba(8, 8, 16, 0.55);

}



.utm-share-panel__title {

    margin: 0 0 6px;

    font-size: 0.92rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    color: #e8e0ff;

}



.utm-share-panel__desc {

    margin: 0 0 10px;

    font-size: 0.78rem;

    color: #9a9ab0;

    line-height: 1.45;

}



.utm-share-panel__base,

.utm-share-panel__campaign {

    margin: 0 0 8px;

    font-size: 0.72rem;

    color: #8a8aa0;

}



.utm-share-panel__base-label {

    display: block;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin-bottom: 4px;

}



.utm-share-panel__base-url {

    display: block;

    word-break: break-all;

    font-size: 0.7rem;

    color: #c4b8ff;

}



.utm-share-panel__grid {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.utm-share-panel__row {

    display: grid;

    grid-template-columns: minmax(96px, 120px) 1fr auto;

    gap: 8px;

    align-items: center;

}



.utm-share-panel__channel {

    font-size: 0.75rem;

    font-weight: 700;

    color: #ddd;

    white-space: nowrap;

}



.utm-share-panel__input {

    width: 100%;

    min-width: 0;

    padding: 6px 8px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(0, 0, 0, 0.35);

    color: #bbb;

    font-size: 0.68rem;

}



.utm-share-panel__copy {

    min-height: 32px;

    padding: 0 12px;

    border-radius: 8px;

    border: 1px solid rgba(145, 71, 255, 0.5);

    background: rgba(145, 71, 255, 0.15);

    color: #e8dcff;

    font-size: 0.72rem;

    font-weight: 700;

    cursor: pointer;

    white-space: nowrap;

}



.utm-share-panel__copy--ok {

    border-color: rgba(72, 199, 142, 0.6);

    background: rgba(72, 199, 142, 0.15);

    color: #b8f5d8;

}



@media (max-width: 640px) {

    .utm-share-panel__row {

        grid-template-columns: 1fr;

    }

}


/* _content/AppBasquet.Web.Client.Shared/Components/ApiEnvironmentSelector.razor.rz.scp.css */

.api-env-toolbar {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-left: 8px;

}



.api-env-badge {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.06em;

    padding: 2px 8px;

    border-radius: 4px;

    color: #fff;

}



.api-env-badge--local {

    background: #2e7d32;

}



.api-env-badge--prod {

    background: #c62828;

}



.api-env-badge--staging {

    background: #ef6c00;

}



.api-env-select {

    font-size: 12px;

    padding: 4px 8px;

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.25);

    background: rgba(0, 0, 0, 0.35);

    color: #fff;

    max-width: 220px;

}



.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    border: 0;

}


/* _content/AppBasquet.Web.Client.Shared/Components/GlobalSearchBar.razor.rz.scp.css */

/* ── Global Search Bar ── */



.gsearch-wrap {

    position: relative;

    width: 100%;

    max-width: 380px;

}



/* Input row */

.gsearch-input-row {

    display: flex;

    align-items: center;

    gap: 8px;

    background: rgba(255,255,255,0.06);

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 12px;

    padding: 8px 12px;

    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;

}



.gsearch-wrap--active .gsearch-input-row,

.gsearch-input-row:focus-within {

    border-color: rgba(130,71,229,0.5);

    background: rgba(255,255,255,0.08);

    box-shadow: 0 0 0 3px rgba(130,71,229,0.12);

}



.gsearch-icon {

    font-size: 0.85rem;

    flex-shrink: 0;

    opacity: 0.55;

}



.gsearch-input {

    flex: 1;

    background: transparent;

    border: none;

    outline: none;

    color: #e0e0e0;

    font-size: 0.85rem;

    font-weight: 500;

    font-family: inherit;

    min-width: 0;

}



.gsearch-input::placeholder { color: #555; }



/* Clear button */

.gsearch-clear {

    background: none;

    border: none;

    color: #555;

    cursor: pointer;

    font-size: 0.75rem;

    padding: 2px 4px;

    border-radius: 4px;

    flex-shrink: 0;

    line-height: 1;

    transition: color 0.15s;

}

.gsearch-clear:hover { color: #aaa; }



/* Backdrop */

.gsearch-backdrop {

    position: fixed;

    inset: 0;

    z-index: 900;

}



/* Dropdown */

.gsearch-dropdown {

    position: absolute;

    top: calc(100% + 8px);

    left: 0; right: 0;

    background: linear-gradient(158deg, #18182a 0%, #0e0e1a 100%);

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(130,71,229,0.1);

    z-index: 901;

    overflow: hidden;

    animation: gsearch-drop-b-a3zc38jvv6 0.18s cubic-bezier(0.4, 0, 0.2, 1);

    max-height: 70dvh;

    overflow-y: auto;

}



@keyframes gsearch-drop-b-a3zc38jvv6 {

    from { opacity: 0; transform: translateY(-6px); }

    to   { opacity: 1; transform: translateY(0); }

}



/* States */

.gsearch-state {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 22px 16px;

    font-size: 0.82rem;

    color: #555;

}



.gsearch-state--empty { color: #555; }



/* Spinner */

.gsearch-spinner {

    width: 18px; height: 18px;

    border: 2px solid rgba(130,71,229,0.2);

    border-top-color: var(--accent, var(--clutch-green-soft));

    border-radius: 50%;

    animation: gspin-b-a3zc38jvv6 0.7s linear infinite;

}

@keyframes gspin-b-a3zc38jvv6 { to { transform: rotate(360deg); } }



/* Section */

.gsearch-section { padding: 6px 0; }

.gsearch-section + .gsearch-section {

    border-top: 1px solid rgba(255,255,255,0.05);

}



.gsearch-section-head {

    padding: 8px 16px 4px;

    font-size: 0.58rem;

    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #444;

}



/* Item */

.gsearch-item {

    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    padding: 9px 16px;

    background: transparent;

    border: none;

    color: #ddd;

    cursor: pointer;

    text-align: left;

    transition: background 0.12s;

}

.gsearch-item:hover, .gsearch-item:focus-visible {

    background: rgba(130,71,229,0.1);

    outline: none;

}



.gsearch-item-logo {

    width: 28px; height: 28px;

    border-radius: 6px;

    object-fit: contain;

    background: #fff;

    padding: 2px;

    flex-shrink: 0;

}



.gsearch-item-icon {

    font-size: 1rem;

    flex-shrink: 0;

    width: 28px;

    text-align: center;

}



.gsearch-item-text {

    flex: 1;

    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 1px;

}



.gsearch-item-title {

    font-size: 0.85rem;

    font-weight: 700;

    color: #e0e0e0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.gsearch-item-sub {

    font-size: 0.72rem;

    color: #555;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.gsearch-item-arrow {

    font-size: 1rem;

    color: #333;

    flex-shrink: 0;

    transition: color 0.12s, transform 0.12s;

}

.gsearch-item:hover .gsearch-item-arrow { color: var(--clutch-green-soft); transform: translateX(2px); }



/* Footer */

.gsearch-footer {

    padding: 6px 10px 10px;

    border-top: 1px solid rgba(255,255,255,0.05);

}



.gsearch-footer-btn {

    width: 100%;

    padding: 10px;

    background: rgba(130,71,229,0.08);

    border: 1px solid rgba(130,71,229,0.2);

    border-radius: 10px;

    color: var(--clutch-green);

    font-size: 0.8rem;

    font-weight: 800;

    cursor: pointer;

    text-align: center;

    transition: background 0.15s;

}

.gsearch-footer-btn:hover { background: rgba(130,71,229,0.15); }



/* ── Responsive ── */

@media (max-width: 900px) {

    .gsearch-wrap {

        max-width: 100%;

    }

}


/* _content/AppBasquet.Web.Client.Shared/Components/MaintenanceGate.razor.rz.scp.css */

.maint-gate-loading {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050508;

    color: rgba(255, 255, 255, 0.7);

    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

}



.maint-gate-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #050508;

    color: #fff;

    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;

    padding: 24px;

}



.maint-gate-card {

    text-align: center;

    max-width: 420px;

    padding: 40px 32px;

    background: #12121e;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 20px;

    box-shadow: 0 0 60px rgba(124, 58, 237, 0.12);

}



.maint-gate-brand {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.25em;

    color: rgba(255, 255, 255, 0.35);

    text-transform: uppercase;

    margin: 0 0 24px;

}



.maint-gate-chip {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 0.65rem;

    font-weight: 800;

    letter-spacing: 0.16em;

    padding: 6px 14px;

    border-radius: 999px;

    background: rgba(245, 177, 0, 0.12);

    border: 1px solid rgba(245, 177, 0, 0.35);

    color: #f5b100;

    margin: 0 0 20px;

}



.maint-gate-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #f5b100;

    animation: maint-gate-blink-b-cfze0kguk7 1.2s step-start infinite;

}



@keyframes maint-gate-blink-b-cfze0kguk7 {

    50% {

        opacity: 0.25;

    }

}



.maint-gate-title {

    font-size: 1.5rem;

    font-weight: 900;

    letter-spacing: -0.02em;

    margin: 0 0 12px;

    line-height: 1.2;

}



.maint-gate-sub {

    margin: 0;

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.55);

    line-height: 1.5;

}


/* _content/AppBasquet.Web.Client.Shared/Components/News/FeaturedNewsSection.razor.rz.scp.css */

.fnw-root {

    padding: 20px 0 8px;

    color: #f0f0f8;

}



.fnw-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;

    padding: 0 4px;

}



.fnw-title {

    margin: 0;

    font-size: 1rem;

    font-weight: 900;

    letter-spacing: -.02em;

    color: #fff;

}



.fnw-sub {

    margin: 4px 0 0;

    font-size: .78rem;

    color: #5a5a7a;

}



.fnw-all-link {

    flex-shrink: 0;

    font-size: .72rem;

    font-weight: 700;

    color: var(--clutch-green);

    text-decoration: none;

    white-space: nowrap;

}

.fnw-all-link:hover { color: var(--clutch-green-light); }



.fnw-scroll {

    display: flex;

    gap: 12px;

    overflow-x: auto;

    padding-bottom: 8px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;

}

.fnw-scroll::-webkit-scrollbar { display: none; }



.fnw-card {

    flex: 0 0 min(280px, 78vw);

    background: #111118;

    border: 1px solid #1e1e2e;

    border-radius: 14px;

    overflow: hidden;

    text-decoration: none;

    color: inherit;

    transition: border-color .18s, transform .18s;

}

.fnw-card:hover {

    border-color: #3b3b58;

    transform: translateY(-2px);

}



.fnw-card-img-wrap {

    position: relative;

    background: #1a1a2e;

}

.fnw-card-img {

    width: 100%;

    height: 140px;

    object-fit: cover;

    display: block;

}



.fnw-tag {

    position: absolute;

    top: 10px;

    left: 10px;

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: .1em;

    padding: 4px 8px;

    border-radius: 4px;

    text-transform: uppercase;

}

.fnw-tag--destacado { background: var(--clutch-green-soft); color: #fff; }

.fnw-tag--resultado { background: #16a34a; color: #fff; }

.fnw-tag--playoffs  { background: #f97316; color: #fff; }

.fnw-tag--noticia   { background: #374151; color: #d1d5db; }

.fnw-tag--en-vivo    { background: #dc2626; color: #fff; }

.fnw-tag--proximo    { background: #f97316; color: #fff; }

.fnw-tag--jornada    { background: #6366f1; color: #fff; }

.fnw-tag--campeon    { background: #fbbf24; color: #111; }

.fnw-tag--final      { background: var(--clutch-gold); color: #fff; }

.fnw-tag--liga       { background: #1e3a5f; color: #93c5fd; }

.fnw-tag--lider      { background: #f5b100; color: #111; }



.fnw-live {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: .56rem;

    font-weight: 900;

    color: #ef4444;

}



.fnw-card-body { padding: 12px 14px 14px; }

.fnw-card-title {

    margin: 0 0 6px;

    font-size: .84rem;

    font-weight: 800;

    line-height: 1.35;

    color: #e8e8f4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.fnw-card-resumen {

    margin: 0 0 8px;

    font-size: .72rem;

    color: #5a5a7a;

    line-height: 1.45;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.fnw-card-meta {

    font-size: .62rem;

    color: #3a3a58;

}

.fnw-card-cta {

    display: block;

    margin-top: 8px;

    font-size: .66rem;

    font-weight: 800;

    color: var(--clutch-green);

}



.fnw-skel {

    flex: 0 0 260px;

    height: 220px;

    border-radius: 14px;

    background: linear-gradient(90deg, #1a1a28 25%, #24243a 50%, #1a1a28 75%);

    background-size: 200% 100%;

    animation: fnw-shimmer-b-1290r9ij2o 1.2s ease-in-out infinite;

}

@keyframes fnw-shimmer-b-1290r9ij2o {

    0% { background-position: 100% 0; }

    100% { background-position: -100% 0; }

}



.fnw-empty {

    font-size: .82rem;

    color: #5a5a7a;

    padding: 12px 4px;

    margin: 0;

}


/* _content/AppBasquet.Web.Client.Shared/Components/NotificationBell.razor.rz.scp.css */

.notification-bell-container {

    position: relative;

    display: inline-block;

    cursor: pointer;

}



.bell-icon {

    position: relative;

    padding: 8px;

    color: var(--bs-body-color, #ffffff);

    transition: color 0.2s ease;

}



.bell-icon:hover {

    color: var(--bs-primary, #0d6efd);

}



.badge {

    position: absolute;

    top: 4px;

    right: 4px;

    background-color: #dc3545;

    color: white;

    border-radius: 50%;

    padding: 2px 6px;

    font-size: 0.7rem;

    font-weight: bold;

    line-height: 1;

}



.notification-dropdown {

    position: absolute;

    top: 100%;

    right: 0;

    width: 320px;

    background: var(--bs-body-bg, #1a1a1a);

    border: 1px solid var(--bs-border-color, #333);

    border-radius: 8px;

    box-shadow: 0 8px 16px rgba(0,0,0,0.3);

    z-index: 1050;

    margin-top: 8px;

    overflow: hidden;

}



.dropdown-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 16px;

    border-bottom: 1px solid var(--bs-border-color, #333);

    background: rgba(255, 255, 255, 0.05);

}



.dropdown-header h6 {

    margin: 0;

    font-size: 1rem;

    font-weight: 600;

}



.btn-clear {

    background: none;

    border: none;

    color: var(--bs-primary, #0d6efd);

    font-size: 0.8rem;

    cursor: pointer;

    padding: 0;

}



.btn-clear:hover {

    text-decoration: underline;

}



.dropdown-body {

    max-height: 400px;

    overflow-y: auto;

}



.notification-list {

    list-style: none;

    margin: 0;

    padding: 0;

}



.notification-item {

    display: flex;

    padding: 12px 16px;

    border-bottom: 1px solid var(--bs-border-color, #333);

    cursor: pointer;

    transition: background 0.2s ease;

}



.notification-item:last-child {

    border-bottom: none;

}



.notification-item:hover {

    background: rgba(255, 255, 255, 0.08);

}



.notification-item.unread {

    background: rgba(255, 255, 255, 0.05);

    border-left: 3px solid var(--bs-primary, #0d6efd);

}



.notif-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.1);

    margin-right: 12px;

    flex-shrink: 0;

}



.notif-content {

    display: flex;

    flex-direction: column;

    flex-grow: 1;

}



.notif-title {

    font-size: 0.9rem;

    font-weight: 600;

    margin-bottom: 2px;

}



.notif-message {

    font-size: 0.85rem;

    color: var(--bs-secondary-color, #aaa);

    margin-bottom: 4px;

    line-height: 1.3;

}



.notif-time {

    font-size: 0.75rem;

    color: var(--bs-tertiary-color, #777);

}


/* _content/AppBasquet.Web.Client.Shared/Components/ShareButton.razor.rz.scp.css */

.share-container {

    display: inline-block;

}



.share-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    color: white;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}



.share-btn:hover {

    background: rgba(255, 255, 255, 0.1);

    transform: translateY(-2px);

    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    border-color: rgba(59, 130, 246, 0.5);

}



.share-btn:active {

    transform: translateY(0);

}



.share-btn.success {

    background: rgba(34, 197, 94, 0.2);

    border-color: rgba(34, 197, 94, 0.5);

    color: #4ade80;

}



.share-btn .icon {

    display: flex;

    align-items: center;

    justify-content: center;

    transition: transform 0.3s ease;

}



.share-btn:hover .icon {

    transform: scale(1.1);

}



.share-btn .text {

    font-size: 0.9rem;

}



@media (max-width: 640px) {

    .share-btn {

        padding: 8px 16px;

    }

    .share-btn .text {

        display: none;

    }

}


/* _content/AppBasquet.Web.Client.Shared/Components/Ui/ClutchEmptyState.razor.rz.scp.css */

.clutch-empty {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    padding: 1.5rem 1.1rem;

    border-radius: 16px;

    border: 1px dashed var(--color-border, rgba(255, 255, 255, 0.1));

    background: var(--color-surface-soft, rgba(255, 255, 255, 0.02));

    text-align: center;

}



.clutch-empty--compact {

    padding: 1.1rem 0.9rem;

}



.clutch-empty__icon {

    font-size: 1.75rem !important;

    color: var(--color-text-dim, #52525b);

    opacity: 0.9;

}



.clutch-empty__body {

    max-width: 28rem;

}



.clutch-empty__title {

    margin: 0;

    font-size: 0.88rem;

    font-weight: 800;

    color: var(--color-text, #f4f4f5);

    line-height: 1.35;

}



.clutch-empty__desc {

    margin: 6px 0 0;

    font-size: 0.78rem;

    font-weight: 600;

    color: var(--color-text-muted, #a1a1aa);

    line-height: 1.45;

}



.clutch-empty__action {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 4px;

    padding: 8px 14px;

    border-radius: 10px;

    border: 1px solid var(--color-primary-border, rgba(100, 255, 154, 0.35));

    background: var(--color-primary-soft, rgba(100, 255, 154, 0.1));

    color: var(--color-primary-hover, #8ae8b0);

    font-size: 0.76rem;

    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    font-family: inherit;

    transition: background 0.15s, border-color 0.15s, color 0.15s;

}



.clutch-empty__action:hover {

    border-color: var(--color-primary, #64ff9a);

    color: var(--color-primary, #64ff9a);

    background: rgba(100, 255, 154, 0.16);

}


/* _content/AppBasquet.Web.Client.Shared/Components/VideoEmbedPreview.razor.rz.scp.css */

.vep-wrap--compact {

    padding: 0;

    border: none;

    background: transparent;

    margin-top: 0;

}



.vep-tiktok-play {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: 100%;

    min-height: 220px;

    border: 0;

    border-radius: 12px;

    cursor: pointer;

    color: #fff;

    background: linear-gradient(160deg, #111 0%, #1a1a2e 100%);

}



.vep-tiktok-play-icon {

    display: grid;

    place-items: center;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

    color: #000;

    font-size: 1.2rem;

    padding-left: 3px;

}



.vep-tiktok-play-label {

    font-size: 0.78rem;

    font-weight: 700;

    color: #cbd5e1;

}



.vep-wrap {

    width: 100%;

    max-width: 100%;

    margin-top: 12px;

    padding: 14px;

    border-radius: 12px;

    border: 1px solid rgba(148, 163, 184, 0.25);

    background: rgba(15, 23, 42, 0.75);

    box-sizing: border-box;

    overflow: hidden;

}



.vep-head {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-bottom: 10px;

}



.vep-provider {

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    padding: 4px 10px;

    border-radius: 999px;

    color: #fff;

    background: #475569;

}



.vep-provider--yt { background: #dc2626; }

.vep-provider--fb { background: #2563eb; }

.vep-provider--ig { background: linear-gradient(135deg, #f97316, #db2777, #7c3aed); }

.vep-provider--tt { background: #0f172a; border: 1px solid #334155; }

.vep-provider--tw { background: #7c3aed; }



.vep-badge,

.vep-kind {

    font-size: 0.68rem;

    color: #94a3b8;

    padding: 2px 8px;

    border-radius: 6px;

    background: rgba(51, 65, 85, 0.5);

}



.vep-embed {

    position: relative;

    width: 100%;

    max-width: 100%;

    overflow: hidden;

    border-radius: 10px;

    background: #000;

}



.vep-embed--video {

    aspect-ratio: 16 / 9;

}



.vep-embed--tiktok {

    aspect-ratio: 9 / 16;

    max-height: min(72vh, 640px);

    margin-inline: auto;

    max-width: 360px;

}



.vep-frame {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    border: 0;

}



.vep-hint {

    margin: 8px 0 0;

    font-size: 0.78rem;

    color: #94a3b8;

    line-height: 1.4;

}



.vep-fallback {

    padding: 16px;

    border-radius: 10px;

    background: rgba(30, 41, 59, 0.6);

    border: 1px dashed rgba(148, 163, 184, 0.35);

    text-align: center;

}



.vep-fallback-msg {

    margin: 0 0 12px;

    font-size: 0.85rem;

    color: #cbd5e1;

    line-height: 1.45;

}



.vep-thumb {

    display: block;

    width: 100%;

    max-width: 480px;

    margin: 0 auto 12px;

    border-radius: 8px;

    aspect-ratio: 16 / 9;

    object-fit: cover;

}



.vep-actions {

    margin-top: 10px;

}



.vep-open-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding: 0 16px;

    border-radius: 10px;

    font-size: 0.82rem;

    font-weight: 700;

    color: #e9d5ff;

    background: rgba(124, 58, 237, 0.2);

    border: 1px solid rgba(167, 139, 250, 0.45);

    text-decoration: none;

}



.vep-open-btn:hover {

    background: rgba(124, 58, 237, 0.35);

}



.vep-meta {

    margin-top: 10px;

    font-size: 0.75rem;

    color: #64748b;

}



.vep-meta summary {

    cursor: pointer;

    color: #94a3b8;

}



.vep-dl {

    margin: 8px 0 0;

}



.vep-dl dt {

    font-weight: 700;

    margin-top: 6px;

}



.vep-dl dd {

    margin: 2px 0 0;

}



.vep-url {

    word-break: break-all;

    overflow-wrap: anywhere;

}



.vep-dev {

    margin-top: 12px;

    padding: 10px 12px;

    border-radius: 8px;

    background: rgba(234, 179, 8, 0.08);

    border: 1px solid rgba(234, 179, 8, 0.35);

    font-size: 0.72rem;

    color: #fde68a;

}



.vep-dev-title {

    font-weight: 800;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}



.vep-dev-list {

    margin: 0;

    padding-left: 18px;

}



.vep-dev-list li {

    margin-bottom: 4px;

}



@media (max-width: 480px) {

    .vep-wrap {

        padding: 10px;

    }



    .vep-embed--tiktok {

        max-width: 100%;

        max-height: min(70vh, 560px);

    }



    .vep-embed--video {

        min-height: 0;

    }

}