/*
 * WINCO PRODUCT FOCUS THEME V1
 * Visual layer inspired by the product-focus video: dark studio shell,
 * crisp white product surfaces, subtle blue/teal accents and deeper shadows.
 */

:root {
    --winco-studio-bg: #22252b;
    --winco-studio-bg-2: #171b22;
    --winco-studio-ink: #0f172a;
    --winco-studio-muted: #64748b;
    --winco-studio-line: #dbe4ef;
    --winco-studio-line-strong: #cbd7e6;
    --winco-studio-surface: #ffffff;
    --winco-studio-surface-soft: #f6f8fb;
    --winco-studio-blue: #2563eb;
    --winco-studio-blue-strong: #1d4ed8;
    --winco-studio-teal: #0f766e;
    --winco-studio-green: #16a34a;
    --winco-studio-orange: #b7791f;
    --winco-studio-danger: #dc2626;
    --winco-studio-radius: 18px;
    --winco-studio-radius-lg: 22px;
    --winco-studio-shadow: 0 28px 78px rgba(0, 0, 0, .26);
    --winco-studio-shadow-soft: 0 18px 48px rgba(15, 23, 42, .12);
}

body.winco-v3-root,
body.winco-v2 {
    background:
        radial-gradient(circle at 8% -8%, rgba(37, 99, 235, .18), transparent 30%),
        radial-gradient(circle at 88% 6%, rgba(15, 118, 110, .16), transparent 28%),
        linear-gradient(180deg, #2a2d33 0%, #20242b 46%, #171b22 100%) !important;
    color: var(--winco-studio-ink) !important;
}

body.winco-v3-root::before,
body.winco-v2::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 82%);
    opacity: .38;
    z-index: 0;
}

body.winco-v3-root > *,
body.winco-v2 > * {
    position: relative;
    z-index: 1;
}

body.winco-v3-root {
    --winco-bg: var(--winco-studio-bg);
    --winco-surface: var(--winco-studio-surface);
    --winco-surface-soft: var(--winco-studio-surface-soft);
    --winco-surface-green: #f0fdfa;
    --winco-text: var(--winco-studio-ink);
    --winco-text-soft: #475569;
    --winco-muted: var(--winco-studio-muted);
    --winco-line: var(--winco-studio-line);
    --winco-line-strong: var(--winco-studio-line-strong);
    --winco-primary: var(--winco-studio-blue);
    --winco-primary-hover: var(--winco-studio-blue-strong);
    --winco-primary-dark: var(--winco-studio-blue-strong);
    --winco-primary-soft: #eaf1ff;
    --winco-shadow: var(--winco-studio-shadow-soft);
    --winco-shadow-hover: var(--winco-studio-shadow);
}

body.winco-v2 {
    --v2-bg: var(--winco-studio-bg);
    --v2-panel: rgba(255, 255, 255, .98);
    --v2-line: var(--winco-studio-line);
    --v2-text: var(--winco-studio-ink);
    --v2-muted: var(--winco-studio-muted);
    --v2-blue: var(--winco-studio-blue);
    --v2-blue-soft: #eaf1ff;
    --v2-green: var(--winco-studio-green);
    --v2-shadow: var(--winco-studio-shadow-soft);
    --v2-radius: var(--winco-studio-radius-lg);
}

.winco-v3-header {
    padding-top: 18px !important;
}

.winco-v3-header-inner,
.v2-sidebar,
.v2-topbar {
    border: 1px solid rgba(226, 232, 240, .82) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--winco-studio-shadow) !important;
    backdrop-filter: blur(22px) saturate(1.04) !important;
}

.winco-v3-header-inner {
    width: min(1440px, calc(100% - 28px)) !important;
    min-height: 72px !important;
    padding: 10px 14px !important;
    border-radius: 20px !important;
}

.winco-v3-page {
    width: min(1440px, calc(100% - 36px)) !important;
    padding-top: 30px !important;
}

.winco-v3-logo,
.v2-logo,
.v2-mini-icon,
.v2-op-icon,
.v2-avatar,
.v2-mobile-brand > span {
    background: #0f172a !important;
    color: #ffffff !important;
    border-color: rgba(15, 23, 42, .15) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .18) !important;
}

.winco-v3-brand-copy strong,
.v2-brand strong,
.v2-page-heading h1 {
    color: var(--winco-studio-ink) !important;
}

.winco-v3-brand-copy small,
.v2-brand span,
.v2-page-heading p,
.v2-user span,
.v2-plan-card span,
.v2-plan-card small {
    color: var(--winco-studio-muted) !important;
}

.winco-v3-nav a,
.v2-nav a,
.v2-nav-muted {
    color: #334155 !important;
}

.winco-v3-nav a:hover,
.winco-v3-nav a.active,
.v2-nav a:hover,
.v2-nav a.active {
    background: #eaf1ff !important;
    color: var(--winco-studio-blue-strong) !important;
}

.v2-shell {
    background: transparent !important;
}

.v2-main {
    padding: 28px 32px 46px !important;
}

.winco-v3-content :where(.v3-hero, [class$="-hero"]),
.winco-v3-content :where(.v3-card, [class$="-panel"], [class$="-summary"], [class$="-current"], [class$="-section"]),
.winco-v3-content [class$="-card"],
.v2-kpi,
.v2-card,
.v2-operation-card,
.v2-empty,
.v2-console-hero,
.v2-module-card,
.v2-plan-card,
.v2-list-row,
.v2-steps div,
.v2-health-list div,
.v2-actions-list a {
    border-color: var(--winco-studio-line) !important;
    background: var(--winco-studio-surface) !important;
    color: var(--winco-studio-ink) !important;
    box-shadow: var(--winco-studio-shadow-soft) !important;
}

.winco-v3-content :where(.v3-hero, [class$="-hero"]),
.v2-console-hero {
    background:
        radial-gradient(circle at 92% 12%, rgba(37, 99, 235, .10), transparent 32%),
        linear-gradient(145deg, #ffffff, #f7f9fc) !important;
}

.winco-v3-content :where(h1, h2, h3, h4),
.v2-main :where(h1, h2, h3, h4),
.v2-main strong {
    color: var(--winco-studio-ink) !important;
    letter-spacing: 0 !important;
}

.winco-v3-content :where(p, small, label, span),
.v2-main :where(p, small, label, span),
.v2-topbar p {
    color: var(--winco-studio-muted);
}

.winco-v3-content :where(.v3-eyebrow, .v3-section-number, [class$="-eyebrow"]),
.winco-v3-content :where([class$="-header"] > span, [class$="-header"] span:first-child),
.v2-nav p {
    color: var(--winco-studio-blue-strong) !important;
    letter-spacing: .12em !important;
}

.winco-v3-content :where(input, select, textarea),
.v2-main :where(input, select, textarea),
.v2-search {
    border-color: var(--winco-studio-line-strong) !important;
    background: #ffffff !important;
    color: var(--winco-studio-ink) !important;
    box-shadow: none !important;
}

.winco-v3-content :where(input, select, textarea):focus,
.v2-main :where(input, select, textarea):focus {
    border-color: rgba(37, 99, 235, .56) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .11) !important;
}

.winco-v3-content :where(button[type="submit"], .v3-button.primary, .primary, .is-primary, [class$="-submit"], [class$="-save"]):not([class*="delete"]):not([class*="danger"]),
.v2-main :where(button[type="submit"], .v2-primary, .primary, .is-primary, [class$="-submit"], [class$="-save"]):not([class*="delete"]):not([class*="danger"]) {
    border-color: var(--winco-studio-blue) !important;
    background: var(--winco-studio-blue) !important;
    color: #ffffff !important;
    box-shadow: 0 18px 42px rgba(37, 99, 235, .24) !important;
}

.winco-v3-content :where(button, .v3-button, a[class*="button"], a[class*="btn"]),
.v2-main :where(button, a[class*="button"], a[class*="btn"]) {
    border-radius: 12px !important;
}

.winco-v3-content :where(.v3-plan, [class*="-badge"], .v3-list-item em, .v2-pill, .v2-status),
.v2-main :where(.v2-pill, .v2-status, .v2-list-row em) {
    background: #eaf1ff !important;
    color: var(--winco-studio-blue-strong) !important;
}

.winco-v3-content :where(.success, .is-success, [class*="active"], [class*="connected"]) {
    --winco-primary: var(--winco-studio-green);
}

.winco-v3-content :where(.v3-alert.success, [class*="-alert"].is-success) {
    border-color: rgba(22, 163, 74, .22) !important;
    background: #ecfdf5 !important;
    color: #166534 !important;
}

.winco-v3-content :where(.v3-alert.error, [class*="-alert"].is-error, [class*="danger"]) {
    border-color: rgba(220, 38, 38, .22) !important;
    background: #fef2f2 !important;
    color: #991b1b !important;
}

.winco-v3-content :where(table, .v3-calendar, [class*="table"], [class*="list"], [class*="grid"]),
.v2-main :where(table, [class*="list"], [class*="grid"]) {
    color: var(--winco-studio-ink);
}

.winco-v3-content :where(.v3-calendar-day, .v3-metrics div, .v3-list-item, [class$="-row"], [class$="-item"]),
.v2-main :where([class$="-row"], [class$="-item"]) {
    border-color: var(--winco-studio-line) !important;
    background: #f8fafc !important;
}

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing {
    background: #f4f7fb !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero {
    min-height: 820px !important;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 77% 38%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 18% 18%, rgba(15, 118, 110, .14), transparent 28%),
        linear-gradient(180deg, #2a2d33 0%, #20242b 48%, #171b22 100%) !important;
    background-color: #20242b !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), transparent 88%);
    opacity: .46;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-inner {
    width: min(1540px, calc(100% - 56px)) !important;
    display: grid !important;
    grid-template-columns: minmax(380px, 500px) minmax(620px, 1fr) !important;
    align-items: center !important;
    gap: clamp(28px, 5vw, 76px) !important;
    margin: 0 auto !important;
    padding: 68px 0 88px !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-copy {
    max-width: 500px !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-product {
    margin: 0 !important;
    position: relative !important;
    isolation: isolate !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-product::before {
    content: "";
    position: absolute;
    inset: 9% 2% -3%;
    border-radius: 28px;
    background: rgba(0, 0, 0, .28);
    filter: blur(34px);
    z-index: -1;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-product img {
    display: block;
    width: min(100%, 1060px);
    border: 1px solid rgba(226, 232, 240, .40);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 34px 92px rgba(0, 0, 0, .36);
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .nav,
body.winco-public-landing .metric,
body.winco-public-landing .card,
body.winco-public-landing .panel,
body.winco-public-landing .cta {
    border-color: rgba(226, 232, 240, .18) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: var(--winco-studio-ink) !important;
    box-shadow: var(--winco-studio-shadow) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .nav {
    min-height: 74px;
    border-radius: 20px;
    padding: 10px 14px;
    margin-top: 18px;
    backdrop-filter: blur(22px);
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero .hero-copy > h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .nav .brand,
body.winco-public-landing .nav .nav-links,
body.winco-public-landing .nav .nav-links a {
    color: var(--winco-studio-ink) !important;
    -webkit-text-fill-color: var(--winco-studio-ink) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .brand-mark {
    background: #0f172a !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .eyebrow {
    border-color: rgba(37, 99, 235, .28) !important;
    background: rgba(37, 99, 235, .14) !important;
    color: #dbeafe !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-copy p {
    color: #dbe4ef !important;
    -webkit-text-fill-color: #dbe4ef !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .metric strong {
    color: var(--winco-studio-ink) !important;
    -webkit-text-fill-color: var(--winco-studio-ink) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .metric span {
    color: var(--winco-studio-muted) !important;
    -webkit-text-fill-color: var(--winco-studio-muted) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-metrics {
    max-width: 100% !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .btn.primary,
body.winco-public-landing .cta .btn.primary {
    background: var(--winco-studio-blue) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--winco-studio-blue) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .btn {
    background: rgba(255, 255, 255, .94) !important;
    color: var(--winco-studio-ink) !important;
    -webkit-text-fill-color: var(--winco-studio-ink) !important;
    border-color: rgba(226, 232, 240, .65) !important;
}
*/

/* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .btn.primary,
body.winco-public-landing .cta .btn.primary {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
*/

@media (max-width: 900px) {
    .winco-v3-header-inner,
    .winco-v3-page {
        width: min(100% - 18px, 1440px) !important;
    }

    .v2-main {
        padding: 18px 14px 34px !important;
    }

    /* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .nav {
        border-radius: 16px;
    }
*/

    /* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero {
        min-height: auto !important;
    }
*/

    /* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-inner {
        width: min(100% - 28px, 760px) !important;
        grid-template-columns: 1fr !important;
        padding: 46px 0 64px !important;
    }
*/

    /* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-product {
        order: -1;
    }
*/

    /* WINCO_PUBLIC_LANDING_PRODUCT_FOCUS_DISABLED_V1
body.winco-public-landing .hero-product img {
        border-radius: 14px;
    }
*/
}

/* WINCO_APP_LIGHT_FINISH_V1
   The product-focus video skin belongs to sales surfaces. The operational app
   needs a calm, bright SaaS shell for repeated daily work. */

body.winco-v3-root,
body.winco-v2 {
    background:
        radial-gradient(circle at 50% -220px, rgba(37, 99, 235, .08), transparent 440px),
        linear-gradient(180deg, #f8fafc 0%, #f3f6fb 46%, #eef3f8 100%) !important;
    color: #0f172a !important;
}

body.winco-v3-root::before,
body.winco-v2::before,
body.winco-v3-root::after,
body.winco-v2::after {
    content: none !important;
    display: none !important;
}

body.winco-v3-root {
    --winco-bg: #f4f7fb;
    --winco-surface: #ffffff;
    --winco-surface-soft: #f8fafc;
    --winco-surface-green: #eefcf5;
    --winco-text: #0f172a;
    --winco-text-soft: #475569;
    --winco-muted: #64748b;
    --winco-line: #dbe4ef;
    --winco-line-strong: #c7d3e0;
    --winco-primary: #2563eb;
    --winco-primary-hover: #1d4ed8;
    --winco-primary-dark: #1e40af;
    --winco-primary-soft: #eaf1ff;
    --winco-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    --winco-shadow-hover: 0 20px 48px rgba(15, 23, 42, .10);
}

body.winco-v2 {
    --v2-bg: #f4f7fb;
    --v2-panel: #ffffff;
    --v2-line: #dbe4ef;
    --v2-text: #0f172a;
    --v2-muted: #64748b;
    --v2-blue: #2563eb;
    --v2-blue-soft: #eaf1ff;
    --v2-green: #16a34a;
    --v2-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    --v2-radius: 18px;
}

body.winco-v3-root .winco-v3-header {
    padding-top: 12px !important;
}

body.winco-v3-root .winco-v3-header-inner,
body.winco-v2 .v2-sidebar,
body.winco-v2 .v2-topbar {
    border-color: rgba(203, 213, 225, .80) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
    backdrop-filter: blur(18px) saturate(1.02) !important;
}

body.winco-v3-root .winco-v3-header-inner {
    width: min(1320px, calc(100% - 28px)) !important;
    min-height: 68px !important;
    border-radius: 16px !important;
}

body.winco-v3-root .winco-v3-page {
    width: min(1320px, calc(100% - 32px)) !important;
    padding-top: 24px !important;
}

body.winco-v3-root .winco-v3-content :where(.v3-hero, [class$="-hero"]) {
    background:
        radial-gradient(circle at 94% 10%, rgba(37, 99, 235, .08), transparent 30%),
        linear-gradient(145deg, #ffffff, #f8fafc) !important;
}

body.winco-v3-root .winco-v3-content :where(.v3-card, [class$="-panel"], [class$="-summary"], [class$="-current"], [class$="-section"]),
body.winco-v3-root .winco-v3-content [class$="-card"],
body.winco-v2 :where(.v2-kpi, .v2-card, .v2-operation-card, .v2-empty, .v2-console-hero, .v2-module-card, .v2-plan-card, .v2-list-row, .v2-steps div, .v2-health-list div, .v2-actions-list a) {
    border-color: #dbe4ef !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06) !important;
}

body.winco-v3-root .winco-v3-content :where(h1, h2, h3, h4),
body.winco-v2 .v2-main :where(h1, h2, h3, h4),
body.winco-v2 .v2-main strong {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
}

body.winco-v3-root .winco-v3-content :where(p, small, label, span),
body.winco-v2 .v2-main :where(p, small, label, span),
body.winco-v2 .v2-topbar p {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}

body.winco-v3-root .winco-v3-nav a,
body.winco-v2 .v2-nav a,
body.winco-v2 .v2-nav-muted {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

body.winco-v3-root .winco-v3-nav a:hover,
body.winco-v3-root .winco-v3-nav a.active,
body.winco-v2 .v2-nav a:hover,
body.winco-v2 .v2-nav a.active {
    background: #eaf1ff !important;
    color: #1d4ed8 !important;
    -webkit-text-fill-color: #1d4ed8 !important;
}