:root {
    --bg: #0f1010;
    --panel: #171919;
    --panel-2: #1e2020;
    --line: rgba(255,255,255,.10);
    --text: #f3efe4;
    --muted: #aaa79f;
    --accent: #cfb57a;
    --accent-2: #e7d6ad;
    --shadow: 0 18px 50px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 20% -10%, rgba(207,181,122,.12), transparent 34%),
        linear-gradient(180deg, #121313 0%, var(--bg) 42%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    min-height: 78px;
    padding: 0 32px;
    border-bottom: 1px solid var(--line);
    background: rgba(15,16,16,.88);
    backdrop-filter: blur(16px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand strong {
    display: block;
    letter-spacing: .17em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
}

.brand small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.brand-mark {
    position: relative;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(207,181,122,.38);
    border-radius: 50%;
}

.brand-mark i {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 16px rgba(207,181,122,.25);
}

.brand-mark i:nth-child(1) { transform: translate(-7px, 5px); opacity: .55; }
.brand-mark i:nth-child(2) { transform: translate(7px, 5px); opacity: .8; }
.brand-mark i:nth-child(3) { transform: translate(0, -7px); }

.main-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
}

.main-nav a,
.nav-disabled {
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text);
    background: rgba(255,255,255,.06);
}

.nav-disabled {
    opacity: .42;
    cursor: default;
}

.language-picker { position: relative; }

.language-button {
    min-width: 70px;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #171919;
    color: var(--text);
    cursor: pointer;
}

.language-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    width: 150px;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #181a1a;
    box-shadow: var(--shadow);
}

.language-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--muted);
    font-size: 13px;
}

.language-menu a:hover,
.language-menu a.selected {
    background: rgba(255,255,255,.06);
    color: var(--text);
}

.page-shell {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 54px 0 70px;
}

.hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 28px 0 34px;
}

.eyebrow {
    margin: 0 0 11px;
    color: var(--accent);
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero h1 {
    margin: 0;
    max-width: 780px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 500;
}

.hero-copy {
    max-width: 670px;
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.65;
}

.catalog-stat {
    flex: 0 0 auto;
    min-width: 165px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.025);
}

.catalog-stat strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 500;
}

.catalog-stat span {
    color: var(--muted);
    font-size: 12px;
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(170px, .35fr) minmax(160px, .3fr) auto auto;
    gap: 12px;
    align-items: end;
    margin: 10px 0 32px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(23,25,25,.8);
    box-shadow: var(--shadow);
}

.search-box {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #101111;
}

.search-box span {
    margin-right: 8px;
    color: var(--muted);
    font-size: 22px;
}

.search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
}

.filter {
    display: grid;
    gap: 6px;
}

.filter > span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.filter select {
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #101111;
    color: var(--text);
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.button-primary {
    border-color: #c4a665;
    background: var(--accent);
    color: #171510;
}

.button-ghost {
    background: transparent;
    color: var(--muted);
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.color-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    transition: transform .18s ease, border-color .18s ease;
}

.color-card:hover {
    transform: translateY(-3px);
    border-color: rgba(207,181,122,.36);
}

.card-visual {
    position: relative;
    height: 205px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,.035), transparent 55%),
        #111212;
}

.card-visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.color-swatch {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 8px solid rgba(255,255,255,.07);
    box-shadow:
        0 15px 35px rgba(0,0,0,.34),
        inset 0 0 0 1px rgba(255,255,255,.22);
}

.color-swatch-empty {
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    padding: 14px;
    border: 1px dashed rgba(255,255,255,.18);
    background: repeating-linear-gradient(45deg,#171919,#171919 8px,#1b1d1d 8px,#1b1d1d 16px);
    color: var(--muted);
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
}

.metal-badge {
    position: absolute;
    right: 11px;
    top: 11px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(12,13,13,.78);
    color: var(--accent-2);
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.card-body {
    min-height: 142px;
    padding: 17px;
}

.range-name {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.card-body h2 {
    min-height: 44px;
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    letter-spacing: .02em;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.empty-state {
    padding: 80px 20px;
    border: 1px dashed var(--line);
    border-radius: 18px;
    text-align: center;
}

.empty-swatch {
    width: 64px;
    height: 64px;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b56354, #d9ba65, #628d7b, #536b91);
    filter: saturate(.6);
}

.empty-state h2 { margin: 0 0 8px; }
.empty-state p { margin: 0; color: var(--muted); }

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
    padding: 26px 0 36px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(1px,1px,1px,1px) !important;
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    .site-header {
        grid-template-columns: 1fr auto;
        padding: 0 20px;
    }

    .main-nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 12px;
    }

    .catalog-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .search-box { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    .page-shell,
    .site-footer {
        width: min(100% - 28px, 1500px);
    }

    .site-header { gap: 12px; }

    .brand small { display: none; }

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

    .catalog-stat { min-width: 0; }

    .catalog-toolbar {
        grid-template-columns: 1fr;
    }

    .search-box { grid-column: auto; }

    .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .card-visual { height: 150px; }
    .card-body { min-height: 132px; padding: 13px; }
    .card-body h2 { font-size: 13px; }
    .color-swatch { width: 82px; height: 82px; }
    .site-footer { flex-direction: column; }
}

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


.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logout-link {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--muted);
    font-size: 12px;
    text-decoration: none;
}

.logout-link:hover {
    color: var(--text);
    border-color: rgba(207,181,122,.38);
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.login-shell {
    width: min(100%, 460px);
}

.login-card {
    padding: 38px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(23,25,25,.94);
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 38px;
}

.login-brand strong {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: .16em;
}

.login-brand small {
    display: block;
    margin-top: 4px;
    color: var(--accent);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.login-kicker {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.login-card h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1.03;
    font-weight: 500;
}

.login-copy {
    margin: 14px 0 28px;
    color: var(--muted);
    line-height: 1.6;
}

.login-form {
    display: grid;
    gap: 15px;
}

.login-form label {
    display: grid;
    gap: 7px;
}

.login-form label > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-form input {
    width: 100%;
    min-height: 50px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    outline: none;
    background: #101111;
    color: var(--text);
    font: inherit;
}

.login-form input:focus {
    border-color: rgba(207,181,122,.7);
    box-shadow: 0 0 0 3px rgba(207,181,122,.08);
}

.login-error {
    margin: 0 0 16px;
    padding: 11px 12px;
    border: 1px solid rgba(255,130,130,.24);
    border-radius: 10px;
    background: rgba(140,50,50,.15);
    font-size: 13px;
}

.login-note {
    margin: 24px 0 0;
    color: #77756f;
    text-align: center;
    font-size: 10px;
}

.ownership-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.ownership-chip{padding:8px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;text-decoration:none;background:rgba(255,255,255,.025)}
.ownership-chip.active,.ownership-chip:hover{color:#171510;background:var(--accent);border-color:var(--accent)}
.ownership-actions{display:flex;align-items:center;gap:7px;margin-top:14px}
.ownership-actions form{margin:0}
.state-button{min-height:32px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;cursor:pointer}
.state-button.own.active{background:rgba(111,155,117,.18);border-color:rgba(111,155,117,.55);color:#cce6cf}
.state-button.wish.active{background:rgba(207,181,122,.16);border-color:rgba(207,181,122,.55);color:var(--accent-2)}
.state-clear{width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:#777;cursor:pointer;font-size:18px}
.level-panel{display:none;margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.level-panel.open{display:block}
.level-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.level-slider{width:100%;accent-color:var(--accent)}
.save-level{width:100%;min-height:32px;margin-top:9px;border:1px solid rgba(207,181,122,.45);border-radius:9px;background:transparent;color:var(--accent-2);font-weight:700;cursor:pointer}


/* STEP: HEX FIRST
   - Se codice_esadecimale esiste: cerchio pieno del colore HEX.
   - Se codice_esadecimale è NULL: immagine della referenza ritagliata dentro il cerchio.
*/
.color-swatch-image {
    overflow: hidden;
    padding: 0;
    background: #111212;
}

.color-swatch-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    border-radius: 50%;
}


/* RECTANGULAR COLOR REFERENCES
   Same logic as before:
   - HEX present -> solid rectangular swatch using codice_esadecimale
   - HEX NULL -> url_foto shown inside the rectangular swatch
*/
.color-swatch {
    width: 100%;
    max-width: 170px;
    height: 92px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(255,255,255,.10);
}

.color-swatch-image {
    overflow: hidden;
    padding: 0;
    background: #111212;
}

.color-swatch-image img {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    border-radius: 11px;
}

.color-swatch-empty {
    width: 100%;
    max-width: 170px;
    height: 92px;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .color-swatch,
    .color-swatch-empty {
        max-width: 135px;
        height: 74px;
    }
}


/* CLEAN SWATCH: no light/white frame */
.color-swatch,
.color-swatch-empty {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
}

.color-swatch-image img {
    border: 0 !important;
    outline: 0 !important;
}


/* =========================================================
   FIX DEFINITIVO: NESSUNA CORNICE BIANCA SU IMAGE SWATCH
   HEX NULL -> immagine nel rettangolo senza bordo/alone.
   ========================================================= */
.card-visual .color-swatch.color-swatch-image,
.card-visual .color-swatch-image,
.color-swatch.color-swatch-image {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: hidden !important;
    -webkit-box-shadow: none !important;
}

.card-visual .color-swatch.color-swatch-image img,
.card-visual .color-swatch-image img,
.color-swatch.color-swatch-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    object-fit: cover !important;
    border-radius: inherit !important;
}

.card-visual .color-swatch-image::before,
.card-visual .color-swatch-image::after,
.color-swatch.color-swatch-image::before,
.color-swatch.color-swatch-image::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   FIX CORNICE BIANCA BAKED-IN NELLE IMMAGINI REFERENCE
   La riga bianca visibile non è un border CSS: è nei pixel
   dell'immagine. La eliminiamo ritagliando leggermente i bordi.
   ========================================================= */

.card-visual .color-swatch.color-swatch-image,
.card-visual .color-swatch-image {
    position: relative !important;
    overflow: hidden !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #111212 !important;
    padding: 0 !important;
}

/* L'immagine viene leggermente ingrandita per tagliare via
   i 2-4px esterni dove è presente la cornice bianca. */
.card-visual .color-swatch.color-swatch-image img,
.card-visual .color-swatch-image img {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 106% !important;
    height: 106% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    transform: translate(-50%, -50%) !important;
}

/* Il bordo arrotondato lo fa il contenitore, non l'immagine. */
.card-visual .color-swatch.color-swatch-image {
    border-radius: 12px !important;
}


/* =========================================================
   DIPPING INKS — ROBOT PREVIEW
   Il rettangolo resta il campione colore originale.
   Il robot è sovrapposto sul lato sinistro e viene ricolorato
   via canvas usando:
   - mezzotono = HEX medio
   - ombre = stesso tono più scuro
   - luci = stesso tono più chiaro
   ========================================================= */

.color-swatch.dipping-ink-swatch {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Se il swatch usa una reference, l'immagine resta lo sfondo. */
.color-swatch.dipping-ink-swatch.color-swatch-image > img {
    z-index: 0 !important;
}

.dipping-robot {
    position: absolute !important;
    z-index: 3 !important;
    left: 5px !important;
    bottom: -2px !important;

    width: auto !important;
    height: 94% !important;
    max-width: 42% !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;

    object-fit: contain !important;
    opacity: 0;
    pointer-events: none;
    transform: none !important;

    filter: drop-shadow(0 3px 5px rgba(0,0,0,.42));
    transition: opacity .18s ease;
}

.dipping-robot.ready {
    opacity: 1;
}

/* Un velo molto leggero dietro al robot lo rende leggibile anche
   sui Dipping Ink molto chiari senza creare una cornice. */
.color-swatch.dipping-ink-swatch::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    width: 42%;
    background: linear-gradient(90deg, rgba(0,0,0,.16), rgba(0,0,0,0));
    pointer-events: none;
}

@media (max-width: 640px) {
    .dipping-robot {
        left: 4px !important;
        height: 92% !important;
        max-width: 42% !important;
    }
}


/* =========================================================
   DIPPING INKS v5 — CLEAN + MATTE GLAZE
   ========================================================= */
.color-swatch.dipping-ink-swatch {
    position: relative !important;
    overflow: hidden !important;
}

.dipping-robot {
    left: 7px !important;
    bottom: 2px !important;
    height: 90% !important;
    max-width: 38% !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)) !important;
}

/* Elimina il precedente velo scuro: vogliamo una lettura da base bianca opaca. */
.color-swatch.dipping-ink-swatch::after {
    content: none !important;
    display: none !important;
}


/* DIPPING INKS v6 — robot pulito, opaco, leggibile */
.dipping-robot {
    left: 9px !important;
    bottom: 3px !important;
    height: 92% !important;
    width: auto !important;
    max-width: 40% !important;
    opacity: 0 !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)) !important;
}
.dipping-robot.ready {
    opacity: .96 !important;
}


/* =========================================================
   DIPPING INKS v7 — ROBOT ESATTO ALLEGATO DALL'UTENTE
   ========================================================= */
.dipping-robot {
    position: absolute !important;
    left: 8px !important;
    bottom: 2px !important;

    height: 94% !important;
    width: auto !important;
    max-width: 44% !important;

    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    filter: none !important;

    object-fit: contain !important;
    pointer-events: none !important;
    z-index: 3 !important;
}

.dipping-robot.ready {
    opacity: 1 !important;
}

.color-swatch.dipping-ink-swatch::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   DIPPING INKS v8 — SFUMATURA BIANCO -> COLORE
   Solo per i rettangoli DIPPING INKS con HEX.
   Sinistra: base bianca dietro al robot.
   Centro: transizione.
   Destra: colore HEX pieno del prodotto.
   ========================================================= */
.color-swatch.dipping-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 10%,
            rgba(255,255,255,.88) 24%,
            rgba(255,255,255,.58) 39%,
            rgba(255,255,255,.24) 51%,
            rgba(255,255,255,0) 64%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Il robot resta sopra la sfumatura. */
.color-swatch.dipping-ink-swatch .dipping-robot {
    z-index: 4 !important;
}


/* =========================================================
   CHROMARIUM v9 — CARD PIU' COMPATTE
   - niente badge METALLICO
   - niente HEX visibile
   - OWN / WISH centrati
   - slot più piccoli
   ========================================================= */

.metal-badge {
    display: none !important;
}

.color-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)) !important;
    gap: 12px !important;
}

.color-card {
    border-radius: 15px !important;
}

.card-visual {
    height: 158px !important;
}

.color-swatch {
    max-width: 150px !important;
    height: 78px !important;
    border-radius: 11px !important;
}

.card-body {
    min-height: 118px !important;
    padding: 13px 14px 14px !important;
}

.range-name {
    margin-bottom: 6px !important;
    font-size: 8px !important;
}

.card-body h2 {
    min-height: 34px !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.card-meta {
    justify-content: center !important;
    margin-top: 10px !important;
    padding-top: 9px !important;
    font-size: 10px !important;
}

.ownership-actions {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.ownership-actions form {
    display: flex !important;
    align-items: center !important;
}

.state-button {
    min-height: 29px !important;
    padding: 0 11px !important;
    font-size: 9px !important;
}

.state-clear {
    width: 27px !important;
    height: 27px !important;
    font-size: 16px !important;
}

.level-panel {
    margin-top: 9px !important;
    padding: 9px !important;
}

/* Robot proporzionato al nuovo rettangolo più compatto */
.dipping-robot {
    left: 7px !important;
    bottom: 2px !important;
    height: 93% !important;
    max-width: 43% !important;
}

@media (max-width: 760px) {
    .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    .card-visual {
        height: 132px !important;
    }

    .color-swatch {
        width: calc(100% - 20px) !important;
        max-width: 142px !important;
        height: 72px !important;
    }

    .card-body {
        min-height: 112px !important;
        padding: 11px !important;
    }

    .card-body h2 {
        font-size: 12px !important;
        min-height: 30px !important;
    }
}

/* AIR FORMULA: etichetta tono-su-tono sempre leggibile sul campione. */
.color-swatch.air-formula-swatch {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.air-formula-label {
    position: relative;
    z-index: 1;
    color: var(--air-label-color, #fff);
    font-family: "Brush Script MT", "Segoe Script", "URW Chancery L", cursive;
    font-size: 35px;
    font-weight: 600;
    font-style: italic;
    line-height: .9;
    letter-spacing: -.06em;
    opacity: .86;
    transform: rotate(-7deg) translateY(-1px);
    text-shadow: 0 1px 0 rgba(255,255,255,.06);
    user-select: none;
}

@media (max-width: 760px) {
    .air-formula-label {
        font-size: 32px;
    }
}

@media (max-width: 390px) {
    .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   CHROMARIUM v10 — DIPPING INKS
   Sinistra = versione chiara DELLO STESSO COLORE,
   non più bianco puro.
   Destra = colore HEX pieno.
   ========================================================= */
.color-swatch.dipping-ink-swatch:not(.color-swatch-image) {
    /*
      Il background-color sottostante è l'HEX reale.
      Sovrapponiamo un bianco parzialmente trasparente:
      così a sinistra otteniamo una tinta chiara dello stesso colore,
      non #FFFFFF.
    */
    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,.68) 0%,
            rgba(255,255,255,.62) 12%,
            rgba(255,255,255,.48) 28%,
            rgba(255,255,255,.30) 43%,
            rgba(255,255,255,.13) 56%,
            rgba(255,255,255,0) 68%
        ) !important;
}


/* =========================================================
   CHROMARIUM v11 — GSW STYLE
   Ispirazione: struttura bianco / nero / verde GSW.
   Mantiene tutte le funzioni Chromarium e i Dipping Inks.
   ========================================================= */

:root {
    --gsw-green: #96c11f;
    --gsw-green-dark: #7fa313;
    --gsw-black: #111111;
    --gsw-dark: #191919;
    --gsw-border: #dedede;
    --gsw-soft: #f4f4f4;
    --gsw-text: #171717;
    --gsw-muted: #6a6a6a;
}

/* ---------- pagina ---------- */
html,
body {
    background: #ededed !important;
    color: var(--gsw-text) !important;
}

body {
    min-height: 100vh;
}

.page-shell {
    width: min(1320px, calc(100% - 36px)) !important;
    margin: 0 auto 48px !important;
    padding: 26px 24px 36px !important;
    background: #ffffff !important;
    border-left: 1px solid #e2e2e2;
    border-right: 1px solid #e2e2e2;
}

/* ---------- header GSW ---------- */
.site-header {
    display: none !important;
}

.gsw-header {
    width: 100%;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.gsw-header-inner {
    width: min(1320px, calc(100% - 36px));
    margin: 0 auto;
}

.gsw-topline {
    background: #111;
    color: #fff;
    min-height: 32px;
    font-size: 11px;
}

.gsw-topline .gsw-header-inner {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.gsw-topline-note {
    color: #b8b8b8;
    font-weight: 700;
    letter-spacing: .06em;
}

.gsw-topline-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gsw-topline .logout-link {
    color: #fff !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

.gsw-topline .logout-link:hover {
    color: var(--gsw-green) !important;
}

.gsw-mainhead {
    background: #fff;
}

.gsw-mainhead .gsw-header-inner {
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.gsw-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    color: #111 !important;
}

.gsw-logo {
    width: 68px;
    height: 68px;
    display: block;
    object-fit: cover;
    border-radius: 2px;
}

.gsw-brand-copy {
    display: grid;
    gap: 2px;
}

.gsw-brand-copy strong {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(27px, 3vw, 40px) !important;
    line-height: .95 !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    color: #111 !important;
}

.gsw-brand-copy small {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gsw-green-dark) !important;
}

.gsw-head-accent {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gsw-head-accent span {
    width: 8px;
    height: 45px;
    display: block;
    background: #111;
    transform: skew(-8deg);
}

.gsw-head-accent span:first-child {
    background: var(--gsw-green);
}

.gsw-navstrip {
    background: #050505;
    border-bottom: 4px solid var(--gsw-green);
}

.gsw-navstrip .gsw-header-inner {
    min-height: 46px;
    display: flex;
    align-items: stretch;
}

.gsw-navstrip .main-nav {
    display: flex !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.gsw-navstrip .main-nav a {
    min-height: 46px;
    display: flex !important;
    align-items: center !important;
    padding: 0 20px !important;
    color: #fff !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .02em;
    text-decoration: none;
    border-right: 1px solid #292929;
    background: transparent !important;
}

.gsw-navstrip .main-nav a:hover,
.gsw-navstrip .main-nav a.active {
    background: var(--gsw-green) !important;
    color: #111 !important;
}

/* lingua */
.language-picker {
    position: relative;
}

.language-button {
    min-height: 26px !important;
    padding: 4px 9px !important;
    border: 1px solid #343434 !important;
    border-radius: 0 !important;
    background: #1b1b1b !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.language-menu {
    top: calc(100% + 5px) !important;
    right: 0 !important;
    min-width: 130px !important;
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
    z-index: 100 !important;
}

.language-menu a {
    color: #222 !important;
    background: #fff !important;
}

.language-menu a:hover,
.language-menu a.selected {
    background: var(--gsw-green) !important;
    color: #111 !important;
}

/* ---------- hero ---------- */
.hero {
    margin: 0 0 18px !important;
    padding: 7px 0 18px !important;
    border-bottom: 1px solid #dadada !important;
    background: #fff !important;
    color: var(--gsw-text) !important;
}

.hero .eyebrow {
    color: var(--gsw-green-dark) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
}

.hero h1 {
    margin-top: 5px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: clamp(30px, 4vw, 50px) !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
    color: #111 !important;
}

.hero-copy {
    max-width: 740px !important;
    color: #585858 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

.catalog-stat {
    min-width: 130px !important;
    padding: 13px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #111 !important;
    color: #fff !important;
}

.catalog-stat strong {
    color: var(--gsw-green) !important;
}

.catalog-stat span {
    color: #d5d5d5 !important;
}

/* ---------- filtri stato ---------- */
.ownership-filters {
    margin: 0 0 14px !important;
    gap: 7px !important;
}

.ownership-chip {
    padding: 8px 13px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    background: #f7f7f7 !important;
    color: #333 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}

.ownership-chip:hover,
.ownership-chip.active {
    border-color: var(--gsw-green) !important;
    background: var(--gsw-green) !important;
    color: #111 !important;
}

/* ---------- toolbar ---------- */
.catalog-toolbar {
    margin: 0 0 22px !important;
    padding: 14px !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 0 !important;
    background: #f5f5f5 !important;
    box-shadow: none !important;
}

.search-box,
.filter select {
    border: 1px solid #cecece !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #222 !important;
}

.search-box input {
    color: #222 !important;
}

.search-box input::placeholder {
    color: #909090 !important;
}

.filter > span {
    color: #555 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 900 !important;
}

.button {
    border-radius: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    font-size: 10px !important;
}

.button-primary {
    background: var(--gsw-green) !important;
    border-color: var(--gsw-green) !important;
    color: #111 !important;
}

.button-primary:hover {
    background: var(--gsw-green-dark) !important;
    border-color: var(--gsw-green-dark) !important;
}

.button-ghost {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

/* ---------- griglia e card ---------- */
.color-grid {
    gap: 12px !important;
}

.color-card {
    overflow: hidden !important;
    border: 1px solid #dedede !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
    color: #111 !important;
}

.color-card:hover {
    border-color: #b9b9b9 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.10) !important;
    transform: translateY(-1px);
}

.card-visual {
    background: #f4f4f4 !important;
    border-bottom: 1px solid #e2e2e2 !important;
}

.color-swatch {
    box-shadow: 0 7px 14px rgba(0,0,0,.09) !important;
}

.card-body {
    background: #fff !important;
    color: #111 !important;
}

.range-name {
    color: var(--gsw-green-dark) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: .045em !important;
}

.card-body h2 {
    color: #111 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.015em !important;
}

.card-meta {
    border-top: 1px solid #e3e3e3 !important;
    color: #777 !important;
}

/* ---------- OWN / WISH ---------- */
.ownership-actions {
    justify-content: center !important;
}

.state-button {
    border: 1px solid #cfcfcf !important;
    border-radius: 0 !important;
    background: #f6f6f6 !important;
    color: #333 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 900 !important;
}

.state-button:hover {
    border-color: var(--gsw-green) !important;
    background: #eff8d9 !important;
    color: #111 !important;
}

.state-button.active,
.state-button.wish.active {
    background: var(--gsw-green) !important;
    border-color: var(--gsw-green) !important;
    color: #111 !important;
}

.state-clear {
    border-radius: 0 !important;
}

/* ---------- owned level ---------- */
.level-panel {
    border-radius: 0 !important;
    border: 1px solid #ddd !important;
    background: #f6f6f6 !important;
}

input[type="range"] {
    accent-color: var(--gsw-green) !important;
}

/* ---------- footer ---------- */
.site-footer {
    width: min(1320px, calc(100% - 36px)) !important;
    margin: 0 auto !important;
    padding: 20px 24px !important;
    border-top: 4px solid var(--gsw-green) !important;
    background: #111 !important;
    color: #bdbdbd !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    text-transform: uppercase;
}

/* ---------- responsive ---------- */
@media (max-width: 760px) {
    .gsw-topline-note {
        display: none;
    }

    .gsw-mainhead .gsw-header-inner {
        min-height: 84px;
    }

    .gsw-logo {
        width: 54px;
        height: 54px;
    }

    .gsw-brand-copy strong {
        font-size: 28px !important;
    }

    .gsw-brand-copy small {
        font-size: 8px !important;
    }

    .gsw-head-accent {
        display: none;
    }

    .page-shell {
        width: 100% !important;
        padding: 18px 12px 30px !important;
        border-left: 0;
        border-right: 0;
    }

    .gsw-header-inner {
        width: calc(100% - 24px);
    }

    .hero {
        gap: 14px !important;
    }
}


/* =========================================================
   CHROMARIUM v12 — BRAND REFRESH
   Motto + font morbidi + logo trasparente + bandiere
   ========================================================= */

:root {
    --chromarium-font:
        "Trebuchet MS",
        "Avenir Next",
        Avenir,
        "Segoe UI",
        Arial,
        sans-serif;
}

/* Font generale più morbido */
body,
button,
input,
select,
textarea,
.hero,
.hero-copy,
.catalog-toolbar,
.ownership-chip,
.filter,
.card-body,
.card-meta,
.state-button,
.site-footer,
.gsw-header {
    font-family: var(--chromarium-font) !important;
}

/* Brand */
.gsw-brand {
    gap: 17px !important;
}

.gsw-logo {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
    background: transparent !important;
    border-radius: 0 !important;
    mix-blend-mode: multiply;
}

.gsw-brand-copy strong {
    font-family: var(--chromarium-font) !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
    line-height: .98 !important;
}

.gsw-brand-copy small {
    margin-top: 5px !important;
    font-family: var(--chromarium-font) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .075em !important;
    text-transform: none !important;
    color: var(--gsw-green-dark) !important;
}

/* Titoli meno rigidi */
.hero h1 {
    font-family: var(--chromarium-font) !important;
    font-weight: 800 !important;
    letter-spacing: -.045em !important;
}

.range-name,
.card-body h2,
.button,
.ownership-chip,
.state-button,
.filter > span,
.gsw-navstrip .main-nav a {
    font-family: var(--chromarium-font) !important;
}

.card-body h2 {
    font-weight: 800 !important;
}

/* Selettore lingua con bandiera */
.language-button {
    min-width: 47px !important;
    height: 30px !important;
    padding: 2px 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.language-flag {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif !important;
    font-size: 17px !important;
    line-height: 1 !important;
    display: inline-block;
}

.language-chevron {
    font-size: 10px;
    color: #cfcfcf;
}

.language-menu {
    min-width: 145px !important;
}

.language-menu a {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: var(--chromarium-font) !important;
    font-weight: 700 !important;
}

/* Top line meno "database" */
.gsw-topline-note {
    font-family: var(--chromarium-font) !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
}

/* Rimuove il vecchio Color Archive dalla barra superiore
   sostituendolo visivamente con il solo brand Chromarium. */
.gsw-topline-note {
    font-size: 0 !important;
}
.gsw-topline-note::after {
    content: "CHROMARIUM";
    font-size: 11px !important;
}

/* Responsive */
@media (max-width: 760px) {
    .gsw-logo {
        width: 58px !important;
        height: 58px !important;
    }

    .gsw-brand-copy small {
        font-size: 8px !important;
        letter-spacing: .04em !important;
    }
}


/* =========================================================
   CHROMARIUM v13 — HEADER / COUNT / ULTRA COMPACT
   ========================================================= */

.gsw-brand-copy strong {
    color: #000 !important;
}

.gsw-brand-copy {
    align-items: flex-start !important;
}

.gsw-brand-copy small {
    display: block !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
}

.gsw-head-accent {
    display: none !important;
}

.gsw-mainhead .gsw-header-inner {
    justify-content: flex-start !important;
}

.ownership-filters {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.catalog-count-inline {
    margin-left: auto !important;
    min-height: 31px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
}

.catalog-count-inline strong {
    color: var(--gsw-green) !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.catalog-count-inline span {
    color: #e7e7e7 !important;
}

/* Card ancora più compatte */
.color-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 9px !important;
}

.card-visual {
    height: 132px !important;
}

.color-swatch {
    max-width: 132px !important;
    height: 68px !important;
    border-radius: 9px !important;
}

.card-body {
    min-height: 104px !important;
    padding: 10px 11px 11px !important;
}

.range-name {
    margin-bottom: 4px !important;
    font-size: 7px !important;
}

.card-body h2 {
    min-height: 29px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.18 !important;
}

.card-meta {
    margin-top: 7px !important;
    padding-top: 7px !important;
    font-size: 9px !important;
}

.ownership-actions {
    margin-top: 7px !important;
    gap: 6px !important;
    justify-content: center !important;
}

.state-button {
    min-height: 27px !important;
    padding: 0 9px !important;
    font-size: 8px !important;
}

.dipping-robot {
    left: 5px !important;
    bottom: 1px !important;
    height: 93% !important;
    max-width: 43% !important;
}

@media (max-width: 760px) {
    .catalog-count-inline {
        margin-left: 0 !important;
    }
    .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* =========================================================
   v13.1 — FIX OWN / LIVELLO UTILIZZO
   ========================================================= */
.level-panel {
    display: none !important;
}

.level-panel.open {
    display: block !important;
}

.level-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.level-head output {
    font-weight: 900 !important;
    color: var(--gsw-green-dark) !important;
}

.level-slider {
    width: 100% !important;
    margin: 8px 0 !important;
    cursor: pointer !important;
}

.save-level {
    width: 100% !important;
    min-height: 28px !important;
    background: var(--gsw-green) !important;
    color: #111 !important;
    border: 0 !important;
    cursor: pointer !important;
}


/* =========================================================
   CHROMARIUM v14 — 3 FILTRI
   Gamma / Modalità di utilizzo / Finitura
   ========================================================= */
.catalog-toolbar {
    grid-template-columns:
        minmax(240px, 1.55fr)
        minmax(150px, .72fr)
        minmax(155px, .78fr)
        minmax(140px, .70fr)
        auto
        auto !important;
    gap: 10px !important;
    align-items: end !important;
}

@media (max-width: 1050px) {
    .catalog-toolbar {
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .search-box {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 680px) {
    .catalog-toolbar {
        grid-template-columns: 1fr !important;
    }
    .search-box {
        grid-column: auto !important;
    }
}


/* =========================================================
   CHROMARIUM v15 — SET CHECK
   ========================================================= */
.set-check-button{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 11px;
    background:var(--gsw-green);
    color:#111 !important;
    text-decoration:none;
    font-size:10px;
    font-weight:900;
    margin-left:6px;
}

.set-search{
    display:flex;
    gap:8px;
    margin:0 0 20px;
    padding:14px;
    background:#f4f4f4;
    border:1px solid #ddd;
}
.set-search input{
    flex:1;
    min-height:42px;
    padding:0 12px;
    border:1px solid #ccc;
}
.set-summary{
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:center;
    padding:18px;
    background:#111;
    color:#fff;
    border-bottom:4px solid var(--gsw-green);
}
.set-summary > div:first-child{
    display:grid;
    gap:3px;
}
.set-summary > div:first-child > span{
    color:var(--gsw-green);
    font-size:9px;
    font-weight:900;
}
.set-summary > div:first-child strong{
    font-size:22px;
}
.set-summary small{color:#aaa}
.set-stats{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.set-stats span{
    display:grid;
    text-align:center;
    color:#ccc;
    font-size:10px;
}
.set-stats strong{
    color:var(--gsw-green);
    font-size:20px;
}
.set-product-list{
    border:1px solid #ddd;
    border-top:0;
}
.set-product-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:11px 14px;
    border-bottom:1px solid #e5e5e5;
    background:#fff;
}
.set-product-row > div{display:grid;gap:2px}
.set-product-row small{color:#777}
.set-product-row > span{
    font-size:10px;
    font-weight:900;
    color:#9b2b2b;
}
.set-product-row.owned{background:#f5fadf}
.set-product-row.owned > span{color:#668800}
.set-add-form{
    display:flex;
    justify-content:flex-end;
    margin-top:14px;
}
.set-message.error{
    padding:12px 14px;
    background:#fff0f0;
    border:1px solid #e3b0b0;
    color:#8d2929;
}


/* =========================================================
   CHROMARIUM v16 — SET CATALOG
   ========================================================= */
.set-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:12px;
    margin-bottom:28px;
}
.set-search{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
}
.set-search input{
    width:min(520px,100%);
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid #bbb;
    background:#fff;
    color:#111;
    font:inherit;
}
.set-search input:focus{
    outline:3px solid rgba(149,200,0,.18);
    border-color:#95c800;
}
.set-search-empty{
    display:none;
    padding:16px;
    border:1px dashed #cfcfcf;
    background:#fafafa;
    color:#666;
    margin-bottom:20px;
}
.set-search-empty.show{display:block}
.set-card{
    display:block;
    background:#fff;
    border:1px solid #ddd;
    color:#111 !important;
    text-decoration:none;
    transition:.15s ease;
}
.set-card:hover{
    transform:translateY(-2px);
    border-color:#aaa;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.set-card-image{
    height:155px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px;
    background:#f4f4f4;
    border-bottom:1px solid #e1e1e1;
}
.set-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}
.set-card-placeholder{
    font-size:28px;
    font-weight:900;
    color:#bbb;
}
.set-card-body{
    padding:12px;
    display:grid;
    gap:5px;
}
.set-card-body>span{
    color:var(--gsw-green-dark);
    font-size:9px;
    font-weight:900;
}
.set-card-body>strong{
    font-size:15px;
}
.set-card-stats{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:5px;
}
.set-card-stats small{
    padding:4px 6px;
    background:#eee;
    color:#555;
    font-size:9px;
}
.set-card-stats .owned{
    background:#eef7cf;
    color:#5b7500;
}
.set-card-stats .missing{
    background:#f6e7e7;
    color:#8d3838;
}
.set-detail{
    margin-top:24px;
}


/* =========================================================
   CHROMARIUM v17 — FONT PIU MORBIDO + SLOT ULTRA COMPATTI
   ========================================================= */

:root{
    --chromarium-soft-font:
        "Arial Rounded MT Bold",
        "Trebuchet MS",
        "Avenir Next",
        "Segoe UI",
        Arial,
        sans-serif;
}

body,
button,
input,
select,
textarea,
.hero,
.hero-copy,
.catalog-toolbar,
.ownership-chip,
.filter,
.card-body,
.card-meta,
.state-button,
.site-footer,
.gsw-header,
.gsw-brand-copy strong,
.gsw-brand-copy small,
.range-name,
.card-body h2,
.button,
.gsw-navstrip .main-nav a {
    font-family: var(--chromarium-soft-font) !important;
}

/* Brand più morbido */
.gsw-brand-copy strong {
    font-weight: 800 !important;
    letter-spacing: -.055em !important;
}

.gsw-brand-copy small {
    font-weight: 700 !important;
    letter-spacing: .045em !important;
}

/* Titolo pagina meno rigido */
.hero h1 {
    font-family: var(--chromarium-soft-font) !important;
    font-weight: 800 !important;
    letter-spacing: -.05em !important;
}

/* SLOT ANCORA PIU COMPATTI */
.color-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)) !important;
    gap: 7px !important;
}

.color-card {
    min-width: 0 !important;
}

.card-visual {
    height: 108px !important;
}

.color-swatch {
    max-width: 112px !important;
    height: 58px !important;
    border-radius: 8px !important;
}

.card-body {
    min-height: 88px !important;
    padding: 8px 9px 9px !important;
}

.range-name {
    margin-bottom: 3px !important;
    font-size: 6px !important;
    line-height: 1.1 !important;
}

.card-body h2 {
    min-height: 25px !important;
    margin: 0 !important;
    font-size: 10.5px !important;
    line-height: 1.15 !important;
}

.card-meta {
    margin-top: 5px !important;
    padding-top: 5px !important;
    font-size: 8px !important;
}

.ownership-actions {
    margin-top: 5px !important;
    gap: 4px !important;
}

.state-button {
    min-height: 24px !important;
    padding: 0 7px !important;
    font-size: 7px !important;
}

.state-clear {
    width: 23px !important;
    height: 23px !important;
    font-size: 13px !important;
}

.level-panel {
    margin-top: 6px !important;
    padding: 7px !important;
}

.level-head {
    font-size: 8px !important;
}

.save-level {
    min-height: 24px !important;
    font-size: 7px !important;
}

/* DIPPING robot proporzionato */
.dipping-robot {
    left: 4px !important;
    bottom: 1px !important;
    height: 92% !important;
    max-width: 42% !important;
}

/* Toolbar leggermente più compatta */
.catalog-toolbar {
    padding: 10px !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
}

.search-box,
.filter select {
    min-height: 38px !important;
}

.search-box input {
    font-size: 12px !important;
}

.filter > span {
    font-size: 8px !important;
}

/* Footer senza brand secondario */
.site-footer {
    justify-content: flex-start !important;
}

/* Mobile */
@media (max-width: 760px) {
    .color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .card-visual {
        height: 98px !important;
    }

    .color-swatch {
        max-width: 106px !important;
        height: 54px !important;
    }

    .card-body {
        min-height: 84px !important;
        padding: 7px !important;
    }

    .card-body h2 {
        font-size: 10px !important;
    }
}


/* =========================================================
   CHROMARIUM v18 — INK VISUAL SYSTEM
   Tutte queste gamme usano il robottino:
   DIPPING INKS / WASH INKS / INTENSITY INKS / CANDY INKS
   ========================================================= */

.color-swatch.wash-ink-swatch,
.color-swatch.intensity-ink-swatch,
.color-swatch.candy-ink-swatch {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* WASH INKS
   Parte da bianco PURO a sinistra e arriva all'HEX pieno a destra. */
.color-swatch.wash-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 13%,
            rgba(255,255,255,.84) 27%,
            rgba(255,255,255,.57) 41%,
            rgba(255,255,255,.28) 55%,
            rgba(255,255,255,0) 70%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* INTENSITY INKS
   Sinistra più scura del DIPPING INKS:
   overlay nero forte che sfuma verso l'HEX pieno. */
.color-swatch.intensity-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.48) 0%,
            rgba(0,0,0,.43) 14%,
            rgba(0,0,0,.34) 29%,
            rgba(0,0,0,.22) 43%,
            rgba(0,0,0,.10) 56%,
            rgba(0,0,0,0) 70%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* CANDY INKS
   Base come WASH: bianco puro -> HEX.
   In più scintillii interni, discreti e non metallici. */
.color-swatch.candy-ink-swatch:not(.color-swatch-image) {
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
        radial-gradient(circle at 29% 70%, rgba(255,255,255,.72) 0 1.2px, transparent 2px),
        radial-gradient(circle at 43% 34%, rgba(255,255,255,.80) 0 1px, transparent 1.8px),
        radial-gradient(circle at 56% 62%, rgba(255,255,255,.55) 0 1px, transparent 1.8px),
        radial-gradient(circle at 72% 28%, rgba(255,255,255,.66) 0 1px, transparent 1.8px),
        radial-gradient(circle at 84% 73%, rgba(255,255,255,.44) 0 1px, transparent 1.8px),
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 13%,
            rgba(255,255,255,.84) 27%,
            rgba(255,255,255,.57) 41%,
            rgba(255,255,255,.28) 55%,
            rgba(255,255,255,0) 70%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Piccola seconda trama luminosa Candy */
.color-swatch.candy-ink-swatch::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background:
        radial-gradient(circle at 24% 52%, rgba(255,255,255,.72) 0 1px, transparent 2px),
        radial-gradient(circle at 48% 18%, rgba(255,255,255,.58) 0 1px, transparent 2px),
        radial-gradient(circle at 67% 78%, rgba(255,255,255,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 90% 42%, rgba(255,255,255,.48) 0 1px, transparent 2px) !important;
    opacity: .72 !important;
}

/* Robot sopra le sfumature */
.color-swatch.wash-ink-swatch .dipping-robot,
.color-swatch.intensity-ink-swatch .dipping-robot,
.color-swatch.candy-ink-swatch .dipping-robot {
    z-index: 4 !important;
}

/* Niente velo generico sopra questi swatch */
.color-swatch.wash-ink-swatch::after,
.color-swatch.intensity-ink-swatch::after,
.color-swatch.candy-ink-swatch::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   CHROMARIUM v18.2 — CANDY INKS
   Come DIPPING INKS, ma parte da BIANCO PURO a sinistra.
   Destra = HEX pieno del prodotto.
   ========================================================= */

.color-swatch.candy-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 12%,
            rgba(255,255,255,.86) 25%,
            rgba(255,255,255,.60) 39%,
            rgba(255,255,255,.34) 52%,
            rgba(255,255,255,.14) 63%,
            rgba(255,255,255,0) 72%
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Togli gli scintillii della versione precedente */
.color-swatch.candy-ink-swatch::before,
.color-swatch.candy-ink-swatch::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Robot sopra la sfumatura */
.color-swatch.candy-ink-swatch .dipping-robot {
    z-index: 4 !important;
}


/* =========================================================
   CHROMARIUM v18.3 — FIX ROBOT WASH + CANDY
   IMPORTANTE:
   Il ROBOT non viene più "sbiancato" dalla logica della gamma.
   WASH e CANDY usano lo stesso trattamento del DIPPING:
   tono medio = HEX, luci più chiare, ombre più scure.
   Solo lo SFONDO parte dal bianco.
   ========================================================= */

.color-swatch.wash-ink-swatch:not(.color-swatch-image),
.color-swatch.candy-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 12%,
            rgba(255,255,255,.86) 25%,
            rgba(255,255,255,.60) 39%,
            rgba(255,255,255,.34) 52%,
            rgba(255,255,255,.14) 63%,
            rgba(255,255,255,0) 72%
        ) !important;
}

/* Candy: nessun effetto extra. */
.color-swatch.candy-ink-swatch::before,
.color-swatch.candy-ink-swatch::after {
    content: none !important;
    display: none !important;
}


/* =========================================================
   CHROMARIUM v18.4 — FIX REALE CLASSI INK
   ========================================================= */

/* WASH: bianco puro -> HEX pieno */
.color-swatch.wash-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 12%,
            rgba(255,255,255,.88) 25%,
            rgba(255,255,255,.62) 40%,
            rgba(255,255,255,.34) 54%,
            rgba(255,255,255,.12) 66%,
            rgba(255,255,255,0) 74%
        ) !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
}

/* INTENSITY: più scuro -> HEX pieno */
.color-swatch.intensity-ink-swatch:not(.color-swatch-image) {
    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.52) 0%,
            rgba(0,0,0,.47) 14%,
            rgba(0,0,0,.36) 30%,
            rgba(0,0,0,.22) 45%,
            rgba(0,0,0,.09) 58%,
            rgba(0,0,0,0) 72%
        ) !important;
}

/* CANDY: bianco puro -> HEX pieno + sbrilluccichio */
.color-swatch.candy-ink-swatch:not(.color-swatch-image) {
    background-image:
        radial-gradient(circle at 16% 24%, rgba(255,255,255,.98) 0 1.1px, transparent 2px),
        radial-gradient(circle at 28% 70%, rgba(255,255,255,.86) 0 1px, transparent 1.9px),
        radial-gradient(circle at 39% 35%, rgba(255,255,255,.78) 0 1.15px, transparent 2px),
        radial-gradient(circle at 53% 64%, rgba(255,255,255,.66) 0 1px, transparent 1.8px),
        radial-gradient(circle at 67% 25%, rgba(255,255,255,.72) 0 1px, transparent 1.9px),
        radial-gradient(circle at 80% 72%, rgba(255,255,255,.58) 0 1px, transparent 1.8px),
        radial-gradient(circle at 91% 40%, rgba(255,255,255,.48) 0 1px, transparent 1.8px),
        linear-gradient(
            90deg,
            #ffffff 0%,
            #ffffff 12%,
            rgba(255,255,255,.88) 25%,
            rgba(255,255,255,.62) 40%,
            rgba(255,255,255,.34) 54%,
            rgba(255,255,255,.12) 66%,
            rgba(255,255,255,0) 74%
        ) !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
}

.color-swatch.candy-ink-swatch::before {
    content:"" !important;
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 22% 54%, rgba(255,255,255,.88) 0 1px, transparent 2px),
        radial-gradient(circle at 37% 18%, rgba(255,255,255,.72) 0 1px, transparent 2px),
        radial-gradient(circle at 59% 46%, rgba(255,255,255,.76) 0 1px, transparent 2px),
        radial-gradient(circle at 75% 61%, rgba(255,255,255,.62) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 20%, rgba(255,255,255,.56) 0 1px, transparent 2px) !important;
    opacity:.95 !important;
}

.color-swatch.candy-ink-swatch::after {
    content:none !important;
    display:none !important;
}

/* Robot sempre sopra */
.color-swatch.wash-ink-swatch .dipping-robot,
.color-swatch.intensity-ink-swatch .dipping-robot,
.color-swatch.candy-ink-swatch .dipping-robot {
    z-index:4 !important;
}


/* =========================================================
   CHROMARIUM v18 — FREDOKA + FILTER ALIGNMENT FINAL OVERRIDE
   ========================================================= */
:root{
    --chromarium-cartoon-font: "Fredoka", "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
summary,
.hero,
.hero-copy,
.catalog-toolbar,
.ownership-chip,
.filter,
.card-body,
.card-meta,
.state-button,
.site-footer,
.gsw-header,
.gsw-brand-copy strong,
.gsw-brand-copy small,
.range-name,
.card-body h2,
.button,
.gsw-navstrip .main-nav a,
.language-picker,
.usage-multiselect,
.usage-option {
    font-family: var(--chromarium-cartoon-font) !important;
}

/* più rotondo/cool senza toccare il logo grafico */
.hero h1,
.gsw-brand-copy strong {
    font-family: var(--chromarium-cartoon-font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.035em !important;
}

body,
input,
select,
button,
summary {
    font-weight: 500 !important;
}

.ownership-chip,
.button,
.state-button,
.main-nav a,
.filter > span,
.range-name,
.card-body h2 {
    font-weight: 600 !important;
}

/* FILTRI: stessa altezza reale per Gamma / Modalità / Finitura */
.catalog-toolbar .filter,
.catalog-toolbar .usage-filter {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-self: stretch !important;
    margin: 0 !important;
}

.catalog-toolbar .filter > span,
.catalog-toolbar .usage-filter > span {
    display: flex !important;
    align-items: flex-end !important;
    height: 16px !important;
    min-height: 16px !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.catalog-toolbar .filter select,
.catalog-toolbar .usage-multiselect > summary {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 36px !important;
}

.catalog-toolbar .usage-multiselect {
    margin: 0 !important;
    padding: 0 !important;
}

.catalog-toolbar .usage-multiselect > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.catalog-toolbar .usage-summary-text {
    display: block !important;
    line-height: 1 !important;
}

.catalog-toolbar .usage-chevron {
    line-height: 1 !important;
}


/* CHROMARIUM — Fredoka più leggero */
body,
input,
select,
textarea,
summary,
.filter,
.card,
.card-meta,
.card-actions {
    font-weight: 400 !important;
}

h1, h2, h3,
.hero h1,
.page-title {
    font-weight: 500 !important;
}

button,
.button,
.tabs a,
.nav a,
.card-title,
.card h3,
.card strong,
.filters select,
.filters input,
.usage-multiselect > summary {
    font-weight: 500 !important;
}

/* Manteniamo forti solo brand/logo e piccoli elementi di enfasi */
.brand-title,
.logo-wordmark,
.chromarium-logo,
.eyebrow,
.badge,
.counter {
    font-weight: 700 !important;
}


/* CHROMARIUM — header logo XL + rainbow wordmark */
.brand,
.branding,
.site-brand,
.chromarium-brand {
    display: flex;
    align-items: center;
}

/* GSW mark: larger without distorting it */
.brand img,
.branding img,
.site-brand img,
.chromarium-brand img,
header .logo img,
header img[alt*="GSW" i],
header img[alt*="Green Stuff" i] {
    width: 92px !important;
    height: 92px !important;
    max-width: none !important;
    object-fit: contain !important;
}

/* Rainbow across the letters while keeping Fredoka */
.chromarium-rainbow-word {
    display: inline-block !important;
    font-family: "Fredoka", "Trebuchet MS", Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.035em !important;
    color: transparent !important;
    background: linear-gradient(
        90deg,
        #ef3340 0%,
        #ff7a32 16%,
        #f6c945 30%,
        #78b82a 45%,
        #20a76f 56%,
        #2d9bd3 68%,
        #5756b3 79%,
        #b83ca5 90%,
        #f04c45 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Keep header balanced with the larger mark */
.brand,
.branding,
.site-brand,
.chromarium-brand,
.header-inner,
.site-header .inner {
    min-height: 112px;
}

@media (max-width: 760px) {
    .brand img,
    .branding img,
    .site-brand img,
    .chromarium-brand img,
    header .logo img,
    header img[alt*="GSW" i],
    header img[alt*="Green Stuff" i] {
        width: 70px !important;
        height: 70px !important;
    }
}

/* Chromarium tagline: nero */
.brand-tagline,
.tagline,
.site-tagline,
.chromarium-tagline,
.brand-subtitle,
.brand small {
    color: #111111 !important;
}

/* FINAL — motto nero e non grassetto */
.brand-tagline,
.tagline,
.site-tagline,
.chromarium-tagline,
.brand-subtitle,
.brand small,
.site-brand small,
.chromarium-brand small,
header small {
    color: #111111 !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* FINAL EXACT FIX — real motto selector */
.gsw-brand-copy small {
    color: #111111 !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
}


/* CHROMARIUM TRIADS */
.triads-page{padding-bottom:70px}
.triads-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:32px 0 24px;border-bottom:1px solid #ddd;margin-bottom:24px}
.triads-hero h1{margin:4px 0 8px;font-size:clamp(36px,4vw,58px);line-height:1}
.triads-hero p:not(.eyebrow){margin:0;max-width:760px;color:#666;line-height:1.5}
.triads-back{padding:10px 15px;border:1px solid #111;color:#111;text-decoration:none;font-weight:800;font-size:12px}
.triads-back:hover{background:#111;color:#fff}

.featured-triads-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.triad-card{background:#fff;border:1px solid #d8d8d8;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.triad-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 20px 15px}
.triad-featured-label{display:block;color:#83b300;font-size:9px;font-weight:900;letter-spacing:.12em}
.triad-card-head h2{margin:5px 0 0;font-size:25px}
.triad-count{padding:6px 9px;background:#111;color:#fff;font-size:9px;font-weight:900;text-transform:uppercase}

.triad-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.triad-color{min-width:0;background:#fafafa}
.triad-color + .triad-color{border-left:1px solid #ddd}
.triad-role{height:34px;display:flex;align-items:center;justify-content:center;background:#f2f2f2;font-size:9px;font-weight:900;letter-spacing:.1em}
.triad-swatch{height:150px;background:var(--triad-color);display:flex;align-items:flex-end;justify-content:center}
.triad-hex{margin-bottom:10px;padding:4px 7px;background:rgba(255,255,255,.9);font-size:9px;font-weight:900;color:#111}
.triad-color-info{padding:13px 10px 15px;text-align:center;min-height:122px}
.triad-color-info strong{display:block;font-size:13px;line-height:1.15}
.triad-color-info span{display:block;margin-top:5px;color:#777;font-size:8px;font-weight:800;text-transform:uppercase}
.triad-color-info small{display:block;margin-top:4px;color:#999;font-size:8px}
.triad-state{display:inline-flex;margin-top:9px;padding:5px 8px;font-size:8px;font-weight:900;letter-spacing:.05em}
.triad-state-own{background:#95c800;color:#111}
.triad-state-wish{background:#111;color:#fff}
.triad-state-missing{background:#eee;color:#777}

.triad-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;padding:12px 16px;background:#111;color:#fff;text-align:center}
.triad-flow span{font-size:8px;font-weight:900;letter-spacing:.08em}
.triad-flow i{font-style:normal;color:#95c800;font-size:15px}
.triads-top-button{background:#95c800!important;border-color:#95c800!important;color:#111!important}

@media(max-width:900px){.featured-triads-grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .triads-hero{align-items:flex-start;flex-direction:column}
  .triads-back{width:100%;text-align:center}
  .triad-swatch{height:110px}
  .triad-color-info{padding:10px 6px 12px}
  .triad-color-info strong{font-size:11px}
}


/* =========================================================
   TRIADS COMPACT CATALOG STYLE
   ========================================================= */
.featured-triads-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.triad-card{
    background:#fff;
    border:1px solid #d8d8d8;
    overflow:hidden;
    box-shadow:none;
}

.triad-card-head{
    padding:15px 16px 11px;
    align-items:center;
}

.triad-card-head h2{
    margin:3px 0 0;
    font-size:20px;
}

.triad-count{
    min-height:24px;
    padding:4px 7px;
    font-size:8px;
}

.triad-strip{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    background:#f5f5f5;
}

.triad-color{
    min-width:0;
    background:#fff;
}

.triad-color + .triad-color{
    border-left:1px solid #d7d7d7;
}

.triad-role{
    height:27px;
    background:#f3f3f3;
    font-size:8px;
    letter-spacing:.08em;
}

.triad-swatch{
    margin:10px 8px 0;
    height:112px;
    border-radius:12px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.triad-hex{
    margin-bottom:7px;
    padding:3px 5px;
    font-size:8px;
}

.triad-color-info{
    min-height:96px;
    padding:9px 7px 11px;
}

.triad-color-info strong{
    font-size:11px;
    line-height:1.1;
}

.triad-color-info span{
    margin-top:4px;
    font-size:7px;
}

.triad-color-info small{
    margin-top:3px;
    font-size:7px;
}

.triad-state{
    margin-top:7px;
    padding:4px 6px;
    font-size:7px;
}

.triad-flow{
    padding:9px 12px;
}

.triad-flow span{
    font-size:7px;
}

.triad-flow i{
    font-size:13px;
}

@media(max-width:900px){
    .featured-triads-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .triad-swatch{
        margin:7px 5px 0;
        height:90px;
        border-radius:9px;
    }

    .triad-color-info{
        padding:8px 4px 9px;
    }

    .triad-color-info strong{
        font-size:10px;
    }
}
.my-user-shell,.public-user-shell{max-width:1280px;padding-top:38px;padding-bottom:70px}.user-hero{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:#111;color:#fff;padding:30px;border-bottom:5px solid #9bc52b}.user-hero h1,.public-user-hero h1{margin:2px 0 5px;font-size:clamp(36px,5vw,62px)}.profile-name-line{display:flex;align-items:center;gap:12px;min-width:0}.profile-name-line h1,.profile-name-line h2{margin-top:0;margin-bottom:0}.public-name-line{justify-content:center}.preview-name-line{gap:8px;margin-top:8px}.gsw-team-mark{display:inline-flex;flex:0 0 auto;width:58px;height:58px;box-sizing:border-box;align-items:center;justify-content:center;padding:3px;border-radius:12px;background:#050505;border:1px solid #9bc52b;box-shadow:0 3px 10px #0003;overflow:hidden}.gsw-team-mark img{display:block;width:100%;height:100%;object-fit:contain}.gsw-team-mark.small{width:38px;height:38px;border-radius:9px;padding:2px}.public-user-hero .gsw-team-mark{box-shadow:0 3px 12px #0002}.user-hero .gsw-team-mark{border-color:#b5dc34;box-shadow:0 0 0 2px #9bc52b22}.public-preview .gsw-team-mark{box-shadow:none}.user-hero .eyebrow,.public-user-hero .eyebrow{color:#9bc52b}.user-avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#9bc52b,#e73888,#3eb9e8);padding:4px;display:grid;place-items:center}.user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;background:#fff}.user-avatar span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#fff;color:#111;font-size:45px;font-weight:800}.user-score{margin-top:13px;color:#bbb}.user-score strong{color:#fff}.profile-preview{background:#9bc52b;color:#111!important;padding:13px 17px;text-decoration:none;font-weight:800}.user-tabs{display:flex;gap:0;overflow:auto;border:1px solid #ddd;border-top:0;background:#fff}.user-tabs a{white-space:nowrap;padding:16px 19px;color:#555;text-decoration:none;font-weight:700;border-right:1px solid #eee}.user-tabs a.active,.user-tabs a:hover{color:#111;background:#f2f8df;box-shadow:inset 0 -4px #9bc52b}.profile-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:24px;margin-top:26px}.profile-card{background:#fff;border:1px solid #ddd;padding:26px}.profile-form label,.settings-form>label{display:block;margin:14px 0;font-weight:700}.profile-form input,.profile-form textarea,.settings-form input{width:100%;box-sizing:border-box;margin-top:6px;padding:12px;border:1px solid #bbb;font:inherit}.profile-form button,.settings-form button{border:0;background:#111;color:#fff;padding:13px 24px;font-weight:800;cursor:pointer}.public-preview{align-self:start;position:sticky;top:20px;background:linear-gradient(145deg,#f3f7e7,#fff)}.preview-label{font-size:12px;font-weight:800;color:#759615}.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:25px}.mini-stats span{text-align:center;background:#111;color:#aaa;padding:13px 6px;font-size:11px}.mini-stats strong{display:block;color:#fff;font-size:25px}.profile-notice{margin-top:20px;padding:13px 16px;border-left:4px solid}.profile-notice.success{background:#eff8d7;border-color:#9bc52b}.profile-notice.error{background:#fff0f0;border-color:#c23d3d}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}.stat-card{background:#fff;border:1px solid #ddd;padding:28px;text-align:center}.stat-card i{display:block;font-style:normal;font-size:28px}.stat-card strong{display:block;font-size:44px;color:#111}.stat-card span{color:#777}.points-panel{margin-top:26px;text-align:center;background:#111;color:#ddd}.points-total{display:block;font-size:90px;color:#9bc52b;line-height:1}.points-rules{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:25px}.points-rules span{background:#272727;padding:11px 16px}.points-rules b{color:#9bc52b}.milestone-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px}.milestone-card{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:23px;border:1px solid #ddd;background:#fff}.milestone-card>i{font-style:normal;font-size:38px;filter:grayscale(1);opacity:.45}.milestone-card.unlocked{border-color:#9bc52b;background:#f6faeb}.milestone-card.unlocked>i{filter:none;opacity:1}.milestone-card small{font-weight:800;color:#888}.milestone-card.unlocked small{color:#759615}.milestone-card h3{margin:3px 0}.milestone-card p{margin:0;color:#777}.milestone-card em{font-size:12px;color:#777}.milestone-bar{height:6px;background:#e6e6e6;margin:13px 0 5px}.milestone-bar span{display:block;height:100%;background:#9bc52b}.settings-form{max-width:760px;margin:26px auto}.slug-field{display:flex;align-items:center;border:1px solid #bbb;margin-top:6px}.slug-field span{padding:12px;background:#f2f2f2;color:#777;font-weight:400}.slug-field input{border:0;margin:0}.switch-row{display:flex!important;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #eee}.switch-row input{width:auto;margin:3px 0}.switch-row small{display:block;color:#777;font-weight:400}.public-user-hero{text-align:center;padding:55px 20px;border-bottom:1px solid #ddd}.user-avatar.large{width:150px;height:150px;margin:0 auto 20px}.painter-style{font-weight:700;color:#759615}.profile-bio{max-width:700px;margin:18px auto;color:#666;line-height:1.7}.social-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.social-links a{border:1px solid #bbb;color:#111;padding:9px 13px;text-decoration:none;font-weight:700}.public-badges{margin-top:40px}.badge-row{display:flex;flex-wrap:wrap;gap:14px}.badge-row div{min-width:130px;border:1px solid #ddd;background:#fff;padding:20px;text-align:center}.badge-row i{font-style:normal;font-size:35px;display:block}.empty-public-profile{text-align:center;padding:100px 20px}@media(max-width:800px){.user-hero{grid-template-columns:auto 1fr}.profile-preview{grid-column:1/-1;text-align:center}.profile-grid,.milestone-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}.public-preview{position:static}}@media(max-width:520px){.user-hero{grid-template-columns:1fr;text-align:center}.user-avatar{margin:auto}.stat-grid{grid-template-columns:1fr 1fr}.slug-field{display:block}.slug-field span{display:block}.points-total{font-size:64px}}
.public-collection{margin-top:40px}.owned-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.owned-strip article{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;min-height:38px;border:1px solid #ddd;background:#fff;overflow:hidden}.owned-strip article>span{width:34px;height:34px;display:grid;place-items:center;overflow:hidden}.owned-strip img{width:100%;height:100%;object-fit:contain}.owned-strip strong{display:block;padding:4px 6px;font-size:9px;line-height:1.08;word-break:break-word}@media(max-width:700px){.owned-strip{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:5px}.owned-strip article{grid-template-columns:30px minmax(0,1fr);min-height:34px}.owned-strip article>span{width:30px;height:30px}.owned-strip strong{font-size:8px;padding:3px 5px}}
.user-session-list{margin-top:24px}.user-session-list h2{margin-top:0}.session-history{display:grid;gap:10px}.session-history article{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid #e6e6e6}.session-history article>div:first-child{display:grid;gap:4px}.session-history article span{color:#777;font-size:13px}.session-history-actions{display:flex;align-items:center;gap:8px}.session-history-actions form{margin:0}.session-history-actions a,.session-history-actions button{display:inline-flex;padding:8px 11px;border:1px solid #bbb;background:#fff;color:#111;font:inherit;font-size:12px;font-weight:800;text-decoration:none;cursor:pointer}.session-history-actions button{border-color:#c23d3d;color:#a51f1f}@media(max-width:700px){.session-history article{align-items:flex-start;flex-direction:column}}
/* Sessions manuali · Admin Alpha */
.lab-manual-grid{display:grid;grid-template-columns:minmax(210px,.8fr) minmax(360px,1.6fr) minmax(240px,.9fr);gap:18px;align-items:start}.lab-panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.lab-mini-button{border:1px solid #5d5266;background:#28222e;color:#fff;border-radius:8px;padding:7px 10px}.lab-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:10px 0 22px}.lab-reference-grid figure{margin:0;background:#211d25;border-radius:10px;overflow:hidden}.lab-reference-grid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}.lab-reference-grid figcaption{padding:6px 8px;font-size:12px}.lab-phase-history{display:grid;gap:8px}.lab-phase-history>div{display:grid;gap:2px;background:#28222e;border-radius:9px;padding:9px}.lab-phase-history small{color:#b9afc0}.lab-wet-palette{position:relative;min-height:540px;background:linear-gradient(145deg,#ded7d7,#bfb4c4);border-radius:20px;overflow:hidden}.lab-wet-palette.is-dragover{outline:4px solid #a873cf;outline-offset:-7px}.lab-palette-spot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:118px;min-height:80px;border:0;border-radius:46% 54% 52% 48%;padding:12px;background:var(--spot);color:#fff;text-shadow:0 1px 2px #000;box-shadow:0 5px 15px #0005;cursor:pointer}.lab-palette-spot span,.lab-palette-spot small{display:block}.lab-palette-spot small{font-size:10px;margin-top:5px}.lab-session-products{display:grid;gap:8px;max-height:430px;overflow:auto}.lab-draggable-product{display:flex;align-items:center;gap:9px;background:#28222e;border:1px solid #443b4a;border-radius:10px;padding:8px;cursor:grab}.lab-draggable-product>span,.lab-product-dot{display:block;width:28px;height:35px;border-radius:6px;background:var(--paint);flex:0 0 auto}.lab-draggable-product b,.lab-draggable-product small{display:block}.lab-draggable-product small{color:#b9afc0}.lab-active-phase{display:grid;gap:10px}.lab-active-phase>span{color:#b9afc0}.lab-alpha-chip{font-size:11px;background:#784c98;border-radius:999px;padding:5px 8px}.lab-new-phase{width:100%;margin-top:12px}.lab-dialog{width:min(520px,calc(100% - 28px));border:1px solid #665a70;border-radius:16px;background:#201b24;color:#fff;padding:20px}.lab-dialog::backdrop{background:#000a}.lab-dialog form,.lab-dialog label{display:grid;gap:7px}.lab-dialog form{gap:14px}.lab-dialog input,.lab-dialog select,.lab-dialog fieldset{width:100%;background:#2c2631;color:#fff;border:1px solid #5d5266;border-radius:8px;padding:10px}.lab-dialog fieldset{max-height:180px;overflow:auto}.lab-dialog .lab-check{display:flex;align-items:center;gap:8px;padding:4px}.lab-dialog .lab-check input{width:auto}.lab-dialog-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}.lab-product-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:520px;overflow:auto}.lab-product-choice{display:flex;align-items:center;gap:8px;background:#28222e;border:1px solid #443b4a;border-radius:10px;padding:9px}.lab-product-choice input{width:auto}.lab-product-choice b,.lab-product-choice small{display:block}.lab-product-choice small{color:#b9afc0}.lab-product-search{width:100%;padding:12px;margin-bottom:10px}.lab-error{background:#5e2630;color:#fff;border-radius:9px;padding:12px}.lab-stage-title{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
@media(max-width:980px){.lab-manual-grid{grid-template-columns:1fr}.lab-wet-palette{min-height:420px}.lab-product-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.lab-product-picker{grid-template-columns:1fr}.lab-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lab-wet-palette{min-height:360px}.lab-palette-spot{width:96px;min-height:70px;font-size:11px}}
.lab-product-result[hidden]{display:none}
.lab-wet-palette{box-sizing:border-box;border:10px solid #f4f4ef;border-radius:30px;background:linear-gradient(145deg,#ded7d7,#c8c0c8);box-shadow:inset 0 0 0 2px #aaa2,inset 0 8px 22px #73697724,0 3px 0 #c8c8c1,0 12px 28px #29212d25}.lab-palette-spot{width:108px;height:108px;min-height:108px;box-sizing:border-box;border-radius:50%;background:radial-gradient(circle at 32% 24%,color-mix(in srgb,var(--spot),white 30%) 0 5%,var(--spot) 34%,color-mix(in srgb,var(--spot),black 20%) 100%);border:1px solid color-mix(in srgb,var(--spot),black 28%);box-shadow:inset 7px 9px 12px #fff2,inset -8px -10px 15px #0002,0 8px 14px #251d2b45}.lab-palette-spot::after{content:"";position:absolute;left:23px;top:17px;width:23px;height:11px;border-radius:50%;background:#fff5;transform:rotate(-24deg);filter:blur(1px);pointer-events:none}.lab-palette-spot span,.lab-palette-spot small{position:relative;z-index:1}.lab-draggable-product>span.lab-product-visual{display:grid;place-items:center;overflow:hidden;background:var(--paint,#ececec)}.lab-product-visual-image img,.lab-product-result-image img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.lab-product-visual-empty{background:repeating-linear-gradient(135deg,#eee 0 5px,#ddd 5px 10px)!important}.lab-product-result-image{overflow:hidden;background:#fff}
/* LAB · interfaccia chiara coerente con Chromarium */
.catalog-product-code{display:block;margin:-4px 0 10px;color:#777;font-size:11px;font-weight:700;letter-spacing:.04em}
.lab-shell,.lab-room{background:#fff;color:#171717}.lab-shell a,.lab-room a{color:#171717}.lab-hero,.lab-start-head,.lab-start-form,.lab-reference,.lab-palette-stage,.lab-session-side,.lab-empty,.lab-card,.lab-card-body{background:#fff;color:#171717}.lab-room{padding:30px}.lab-manual-grid{background:#fff}.lab-reference,.lab-palette-stage,.lab-session-side{padding:18px;border:1px solid #dedede;border-radius:12px}.lab-phase-history>div,.lab-draggable-product,.lab-product-choice{background:#f5f5f5;color:#171717;border:1px solid #dedede}.lab-phase-history small,.lab-draggable-product small,.lab-product-choice small,.lab-active-phase>span{color:#666}.lab-alpha-chip{background:#e7f2c9;color:#425a08}.lab-reference-grid figure{background:#f3f3f3;border:1px solid #ddd}.lab-reference-grid img{width:100%;height:112px;aspect-ratio:auto;object-fit:cover}.lab-reference-grid figcaption{background:#fff;color:#333}.lab-card-image{position:relative;height:190px;overflow:hidden;background:#f2f2f2}.lab-card-image img{display:block;width:100%;height:100%;object-fit:cover}.lab-card{overflow:hidden;border:1px solid #ddd}.lab-dialog{background:#fff;color:#171717;border-color:#d5d5d5;box-shadow:0 24px 70px #0004}.lab-dialog input,.lab-dialog select,.lab-dialog fieldset{box-sizing:border-box;background:#fff;color:#171717;border-color:#bbb}.lab-dialog .lab-check{color:#171717}.lab-dialog-actions button:not(.recipe-primary){background:#e7e7e7;color:#171717;border:0;padding:11px 16px}.lab-dialog::backdrop{background:#0008}.lab-mini-button{background:#17131c;color:#fff;border-color:#17131c}@media(max-width:560px){.lab-room{padding:16px}.lab-reference-grid img{height:96px}.lab-card-image{height:150px}}
.lab-product-dialog{background:#fff;color:#191919;border-color:#d6d6d6;box-shadow:0 24px 70px #0004}.lab-product-dialog h2{margin:0;font-size:27px}.lab-product-dialog label{color:#333;font-size:13px;font-weight:800}.lab-product-dialog .lab-product-search{box-sizing:border-box;margin:0;background:#fff;color:#111;border:2px solid #b8b8b8;border-radius:4px;padding:13px 14px}.lab-product-dialog .lab-product-search:focus{outline:3px solid #9bc52b55;border-color:#789e12}.lab-product-autocomplete{position:relative}.lab-product-results{display:grid;max-height:330px;overflow:auto;margin-top:6px;border:1px solid #d7d7d7;background:#fff;box-shadow:0 10px 25px #0002}.lab-product-result{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid #ececec;background:#fff;color:#111;text-align:left;cursor:pointer}.lab-product-result:hover,.lab-product-result:focus,.lab-product-result.is-selected{background:#f2f8df;outline:none}.lab-product-result-swatch{width:30px;height:38px;border:1px solid #bbb;border-radius:5px;background:var(--paint);box-shadow:inset 0 0 0 2px #fff8}.lab-product-result b,.lab-product-result small{display:block}.lab-product-result small{margin-top:2px;color:#6b6b6b}.lab-product-result em{font-style:normal;font-size:11px;font-weight:900;color:#55720b;text-align:right}.lab-product-no-results{margin:0;padding:12px;background:#f5f5f5;color:#666}.lab-product-dialog .lab-dialog-actions button{border:0;padding:12px 18px;font-weight:800;cursor:pointer}.lab-product-dialog .lab-dialog-actions button[type="button"]{background:#e5e5e5;color:#222}.lab-product-dialog .lab-dialog-actions .recipe-primary{background:#111;color:#fff}.lab-product-dialog .lab-dialog-actions .recipe-primary:disabled{background:#aaa;cursor:not-allowed}@media(max-width:560px){.lab-product-result{grid-template-columns:32px 1fr}.lab-product-result em{grid-column:2;text-align:left}}

/* LAB · delete controls + Mix Match */
.lab-card-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}.lab-card-actions form{margin:0}.lab-delete-session{border:1px solid #c23d3d;background:#fff;color:#a51f1f;padding:9px 12px;font:inherit;font-size:12px;font-weight:900;cursor:pointer}.lab-delete-session:hover{background:#fff0f0}.lab-phase-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}.lab-phase-actions form{margin:0}.lab-phase-delete{border:1px solid #c23d3d;background:#fff;color:#a51f1f;padding:6px 9px;font:inherit;font-size:10px;font-weight:900;cursor:pointer}.lab-phase-delete:hover{background:#fff0f0}
.lab-palette-spot[data-mix-count]:not([data-mix-count="0"]):not([data-mix-count="1"]){cursor:pointer;outline:2px solid #fff;outline-offset:2px}
.lab-mix-match-dialog{width:min(650px,calc(100% - 28px));padding:0;overflow:hidden}.lab-mix-match-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px 14px;border-bottom:1px solid #ddd}.lab-mix-match-head .eyebrow{margin:0 0 4px;color:#769814;font-size:11px;font-weight:900;letter-spacing:.12em}.lab-mix-match-head h2{margin:0}.lab-mix-match-head>[data-close]{border:0;background:#eee;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer}.lab-mix-match-content{padding:20px 22px 24px}.lab-mix-match-loading,.lab-mix-match-empty{padding:26px;text-align:center;background:#f5f5f5;color:#666}.lab-mix-match-source{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center;margin-bottom:18px;padding:13px;background:#f4f4f4;border:1px solid #ddd}.lab-mix-match-source>span{display:block;width:64px;height:64px;border-radius:50%;border:1px solid #aaa}.lab-mix-match-source small,.lab-mix-match-source strong{display:block}.lab-mix-match-source small{font-size:10px;font-weight:900;color:#789e12}.lab-mix-match-source strong{margin-top:2px;font-size:17px}.lab-mix-match-source p{margin:5px 0 0;color:#555;font-size:13px}.lab-mix-match-list{display:grid;gap:8px}.lab-mix-match-list article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px;border:1px solid #ddd;background:#fff}.lab-mix-match-list article.best{border-color:#9bc52b;background:#f6faeb}.lab-mix-match-swatch{display:block;width:44px;height:44px;border-radius:50%;border:1px solid #aaa}.lab-mix-match-copy small,.lab-mix-match-copy strong,.lab-mix-match-copy em{display:block}.lab-mix-match-copy small{font-size:10px;color:#777}.lab-mix-match-copy strong{font-size:13px}.lab-mix-match-copy em{margin-top:2px;font-style:normal;font-size:10px;font-weight:900;color:#63820d}.lab-mix-match-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex-wrap:wrap}.lab-mix-match-actions form{margin:0}.lab-mix-match-actions button,.lab-mix-state{display:inline-flex;align-items:center;justify-content:center;border:1px solid #bbb;background:#fff;color:#111;padding:6px 8px;font:inherit;font-size:9px;font-weight:900;cursor:pointer}.lab-mix-state.own{border-color:#789e12;background:#eef7d8;color:#4a6508}.lab-mix-state.wish{background:#f2f2f2;color:#555}@media(max-width:600px){.lab-card-actions{align-items:stretch;flex-direction:column}.lab-card-actions .lab-open,.lab-delete-session{width:100%;box-sizing:border-box;text-align:center;justify-content:center}.lab-mix-match-list article{grid-template-columns:42px 1fr}.lab-mix-match-actions{grid-column:1/-1;justify-content:flex-start}.lab-mix-match-source{grid-template-columns:50px 1fr}.lab-mix-match-source>span{width:50px;height:50px}}

/* Test 3: completed LAB sessions are immutable/read-only. */
.lab-completed-lock{font-weight:900;letter-spacing:.04em}.lab-final-visibility{font-weight:800}.lab-session-readonly .lab-palette-spot{cursor:pointer}.lab-session-readonly .lab-palette-spot.is-moving{transform:none}.lab-product-readonly{cursor:default!important}.lab-readonly-copy{font-size:.9rem;line-height:1.45;opacity:.75}.lab-session-readonly .lab-clear-airbrush{display:none!important}


/* LAB photo source: explicit gallery/file vs smartphone camera. */
.lab-photo-source{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.lab-photo-source>label{display:grid;gap:7px;padding:12px;border:1px solid #d7d7d7;border-radius:10px;background:#f7f7f7;color:#171717;font-weight:800}.lab-photo-source>label>span{font-size:13px}.lab-photo-source input[type=file]{padding:8px;background:#fff}.lab-photo-source.photo-missing{outline:3px solid #c74343;border-radius:12px;outline-offset:3px}.lab-photo-source.has-photo{outline:2px solid #96c11f;border-radius:12px;outline-offset:2px}.lab-photo-source-start{margin-top:7px}@media(max-width:560px){.lab-photo-source{grid-template-columns:1fr}.lab-photo-source>label{padding:10px}}

/* GSW Team profile badge */
@media(max-width:520px){.profile-name-line{justify-content:center}.gsw-team-mark{width:46px;height:46px;border-radius:10px}.gsw-team-mark.small{width:34px;height:34px}.preview-name-line{justify-content:flex-start}}

/* TEST 8 · GSW Team badge: logo piu grande, senza cornice verde */
.gsw-team-mark{
    width:72px;
    height:72px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
}
.user-hero .gsw-team-mark,
.public-user-hero .gsw-team-mark,
.public-preview .gsw-team-mark{
    border:0;
    background:transparent;
    box-shadow:none;
}
.gsw-team-mark.small{
    width:44px;
    height:44px;
    padding:0;
    border-radius:0;
}
@media(max-width:520px){
    .gsw-team-mark{
        width:58px;
        height:58px;
        padding:0;
        border:0;
        border-radius:0;
        box-shadow:none;
    }
    .gsw-team-mark.small{
        width:42px;
        height:42px;
    }
}


/* CHROMARIUM ACADEMY · TEST 10 */


.academy-shell{max-width:1280px;padding-top:26px;padding-bottom:80px}
.academy-intro-strip{margin:0 0 26px;background:#fff;border:1px solid #e2e2e2;padding:22px 26px}
.academy-kicker{margin:0 0 8px;color:#87ad1c;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.academy-intro-text{margin:0;max-width:860px;color:#525252;font-size:16px;line-height:1.65}
.academy-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.academy-area-card{min-width:0;display:block;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b;color:#111!important;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.academy-area-card:hover{transform:translateY(-3px);border-color:#9bc52b;box-shadow:0 14px 30px #0000000f}
.academy-card-copy{display:flex;flex-direction:column;min-height:300px;padding:34px 34px 30px;box-sizing:border-box}
.academy-card-copy small,.academy-stage-head small{color:#7aa20f;font-size:11px;font-weight:800;letter-spacing:.11em}
.academy-card-copy h2{margin:10px 0 16px;font-size:38px;line-height:1;letter-spacing:-.025em}
.academy-card-copy p{margin:0;color:#666;line-height:1.65;font-size:16px}
.academy-card-note{margin-top:24px;padding:13px 15px;background:#f4f8e9;border-left:4px solid #9bc52b;font-size:13px;font-weight:700}
.academy-card-copy strong{margin-top:auto;padding-top:28px;font-size:13px}
.academy-card-copy strong span{color:#80aa13;font-size:17px}
.academy-area-stage{margin-top:10px;background:#fff;border:1px solid #ddd}
.academy-area-stage-clean{background:#fff;border-top:5px solid #9bc52b}
.academy-back{display:inline-flex;margin:24px 28px 0;color:#111!important;text-decoration:none;font-size:13px;font-weight:800}
.academy-stage-head{display:block;padding:34px 34px 44px}
.academy-stage-head h2{margin:8px 0 14px;font-size:clamp(40px,5vw,62px);line-height:1}
.academy-stage-head p{max-width:760px;margin:0;color:#666;font-size:17px;line-height:1.65}
.academy-next-step{padding:18px 24px;background:#9bc52b;color:#111;text-align:center;font-size:12px;font-weight:900;letter-spacing:.06em}
.gsw-navstrip .main-nav a[href="academy.php"]{position:relative}
@media(max-width:980px){.academy-menu-grid{grid-template-columns:1fr}.gsw-navstrip .gsw-header-inner{overflow-x:auto}.gsw-navstrip .main-nav{min-width:max-content}}
@media(max-width:520px){.academy-shell{padding-top:20px;padding-bottom:50px}.academy-intro-strip{padding:18px}.academy-intro-text{font-size:14px}.academy-card-copy{min-height:0;padding:26px 20px 24px}.academy-card-copy h2{font-size:30px}.academy-card-copy p{font-size:14px}.academy-card-note{font-size:12px}.academy-card-copy strong{padding-top:24px}.academy-stage-head{padding:26px 20px 32px}.academy-stage-head p{font-size:15px}.academy-back{margin:18px 20px 0}}

/* =========================================================
   CHROMARIUM ACADEMY V1 — library, upload, video detail
   ========================================================= */
.academy-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 22px;padding:24px 26px;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b}.academy-library-head h1{margin:5px 0 9px;font-size:clamp(38px,5vw,58px);line-height:1}.academy-library-head>div>p:last-child{max-width:760px;margin:0;color:#666;line-height:1.55}.academy-back-inline{margin:0 0 17px!important}.academy-upload-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;background:#9bc52b;color:#111!important;text-decoration:none;font-weight:900;white-space:nowrap;border:1px solid #8caf18}.academy-upload-button:hover{background:#111;color:#fff!important;border-color:#111}.academy-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) minmax(170px,220px) auto auto;gap:10px;align-items:end;margin-bottom:12px;padding:18px;background:#fff;border:1px solid #ddd}.academy-toolbar label{display:grid;gap:6px}.academy-toolbar label>span{font-size:10px;font-weight:900;letter-spacing:.08em;color:#6f8e00}.academy-toolbar input,.academy-toolbar select{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #cfcfcf;background:#fff;color:#111;padding:0 12px;font:inherit}.academy-search-button,.academy-reset-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 15px;border:0;text-decoration:none;font-weight:900;font:inherit}.academy-search-button{background:#111;color:#fff;cursor:pointer}.academy-reset-button{border:1px solid #ccc;color:#333!important;background:#fff}.academy-result-count{margin:0 0 14px;color:#777;font-size:12px;font-weight:800}.academy-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,210px));gap:18px;justify-content:flex-start}.academy-video-card{min-width:0;max-width:210px;background:#fff;border:1px solid #ddd;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}.academy-video-card:hover{transform:translateY(-3px);border-color:#9bc52b;box-shadow:0 12px 26px #00000012}.academy-video-cover{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#111;color:#fff!important;text-decoration:none}.academy-video-cover img,.academy-video-cover video{display:block;width:100%;height:100%;object-fit:cover}.academy-play-icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:50px;height:50px;transform:translate(-50%,-50%);border-radius:50%;background:#111d;color:#fff;font-size:18px;padding-left:3px;box-shadow:0 4px 18px #0006}.academy-video-cover em{position:absolute;left:10px;bottom:10px;max-width:70%;padding:5px 8px;background:#9bc52b;color:#111;font-size:9px;font-weight:900;font-style:normal;text-transform:uppercase;z-index:3}.academy-video-card-body{padding:14px 14px 15px}.academy-video-card-body h2{margin:0 0 8px;font-size:18px;line-height:1.22}.academy-video-card-body h2 a{color:#111!important;text-decoration:none}.academy-video-meta{display:grid;gap:4px;color:#777;font-size:11px}.academy-video-meta span:first-child{font-weight:800;color:#4f4f4f}.academy-video-card-stats{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid #eee;font-size:12px;font-weight:900}.academy-empty-library,.academy-setup-warning{padding:36px;background:#fff;border:1px solid #ddd;text-align:center}.academy-empty-library strong{font-size:22px}.academy-empty-library p{margin:8px 0 0;color:#777}.academy-setup-warning{border-left:5px solid #e3a72d;text-align:left;background:#fff9e9;font-weight:800}

.academy-upload-shell{max-width:1120px}.academy-upload-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding:26px;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b}.academy-upload-head h1{margin:5px 0 9px;font-size:clamp(38px,5vw,58px);line-height:1}.academy-upload-head p:last-child{max-width:760px;margin:0;color:#666;line-height:1.55}.academy-pending-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;background:#fff2c5;border:1px solid #e6c767;color:#7d6200;font-size:10px;font-weight:900;letter-spacing:.06em;white-space:nowrap}.academy-upload-success,.academy-upload-error{margin-bottom:18px;padding:16px 18px;border-left:5px solid}.academy-upload-success{background:#eff8d7;border-color:#9bc52b}.academy-upload-error{background:#fff0f0;border-color:#c33;color:#8f1f1f;font-weight:800}.academy-upload-success p{margin:4px 0 0}.academy-upload-form{display:grid;gap:18px}.academy-form-card{background:#fff;border:1px solid #ddd;padding:24px}.academy-form-card h2{margin:0 0 18px;font-size:23px}.academy-form-card>label{display:grid;gap:7px;margin:0 0 16px;font-weight:800}.academy-form-card input[type=text],.academy-form-card textarea,.academy-form-card select,.academy-products-picker>input[type=search]{box-sizing:border-box;width:100%;border:1px solid #c8c8c8;background:#fff;padding:12px;font:inherit;color:#111}.academy-form-card textarea{resize:vertical;min-height:150px}.academy-file-drop{display:grid!important;place-items:center;gap:6px;min-height:145px;padding:20px;border:2px dashed #b9b9b9;background:#fafafa;text-align:center;cursor:pointer}.academy-file-drop input{max-width:100%}.academy-file-drop strong{font-size:20px}.academy-file-drop span{color:#777;font-size:11px}.academy-cover-generator{margin-top:10px;color:#6b6b6b;font-size:12px;font-weight:800}.academy-products-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.academy-products-head h2{margin-bottom:5px}.academy-products-head p{margin:0;color:#777}.academy-products-head>strong{min-width:115px;padding:9px 11px;background:#111;color:#fff;text-align:center;font-size:11px}.academy-product-list{max-height:430px;overflow:auto;margin-top:10px;border:1px solid #ddd}.academy-product-option{display:grid;grid-template-columns:auto 28px 1fr;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid #eee;cursor:pointer}.academy-product-option:hover{background:#f8f8f8}.academy-product-option:has(input:checked){background:#f2f8df;box-shadow:inset 4px 0 #9bc52b}.academy-product-option input{width:18px;height:18px;accent-color:#9bc52b}.academy-product-dot{width:26px;height:26px;border-radius:50%;border:1px solid #bbb}.academy-product-option>span:last-child{display:grid;gap:2px}.academy-product-option small{color:#777;font-size:10px}.academy-upload-submitbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;background:#111;color:#fff}.academy-upload-submitbar p{margin:0;max-width:700px;color:#ccc;font-size:12px}.academy-upload-submitbar button{min-height:48px;padding:0 22px;border:0;background:#9bc52b;color:#111;font-weight:900;cursor:pointer;white-space:nowrap}

.academy-detail-shell{max-width:1320px}.academy-detail-layout{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr);gap:22px}.academy-player-panel,.academy-detail-side>section{background:#fff;border:1px solid #ddd}.academy-player-panel{padding-top:20px}.academy-player-wrap{position:relative;width:min(100%,430px);margin:0 auto;background:#000;aspect-ratio:9/16;display:grid;place-items:center;overflow:hidden}.academy-player-wrap video{width:100%;height:100%;max-height:80vh;background:#000;object-fit:contain}.academy-player-badge{position:absolute;right:8px;bottom:8px;width:38px;height:38px;object-fit:contain;z-index:5;filter:drop-shadow(0 1px 3px #0006);pointer-events:none}.academy-detail-titlebar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px}.academy-detail-titlebar h1{margin:5px 0 10px;font-size:clamp(30px,4vw,48px);line-height:1.05}.academy-detail-meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;color:#777;font-size:12px}.academy-like-button{min-width:92px;min-height:48px;border:1px solid #ccc;background:#fff;color:#111;font-size:18px;font-weight:900;cursor:pointer}.academy-like-button.active{background:#9bc52b;border-color:#9bc52b}.academy-description-card{border-top:1px solid #eee;padding:24px}.academy-description-card h2{margin:0 0 10px;font-size:20px}.academy-description-card p{margin:0;color:#555;line-height:1.7}.academy-detail-side{display:grid;gap:18px;align-content:start}.academy-rating-card,.academy-products-used-card{padding:22px}.academy-rating-summary{display:flex;align-items:center;gap:15px;padding-bottom:18px;border-bottom:1px solid #eee}.academy-rating-summary>strong{font-size:50px;line-height:1;color:#111}.academy-rating-summary>div{display:grid}.academy-stars-static{color:#e4ac22;font-size:22px;letter-spacing:2px}.academy-rating-summary small{color:#777}.academy-rating-form{padding-top:18px}.academy-rating-form p{margin:0 0 8px;font-weight:900}.academy-star-input{display:inline-flex;flex-direction:row-reverse;gap:3px}.academy-star-input input{position:absolute;opacity:0;pointer-events:none}.academy-star-input label{color:#d7d7d7;font-size:34px;cursor:pointer;line-height:1}.academy-star-input label:hover,.academy-star-input label:hover~label,.academy-star-input input:checked~label{color:#e4ac22}.academy-rating-form button{display:block;margin-top:12px;min-height:40px;padding:0 14px;border:0;background:#111;color:#fff;font-weight:900;cursor:pointer}.academy-products-used-card h2{margin:0 0 14px}.academy-used-products{display:grid;gap:9px}.academy-used-products>a{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;padding:8px;border:1px solid #eee;color:#111!important;text-decoration:none}.academy-used-products>a:hover{border-color:#9bc52b;background:#f8fbeF}.academy-used-product-visual{display:grid;place-items:center;width:52px;height:52px;overflow:hidden}.academy-used-product-visual img{width:100%;height:100%;object-fit:contain}.academy-used-products>a>span:last-child{display:grid;gap:2px}.academy-used-products small{color:#777;font-size:9px}

@media(max-width:980px){.academy-detail-layout{grid-template-columns:1fr}.academy-detail-side{grid-template-columns:1fr 1fr}.academy-library-head,.academy-upload-head{align-items:flex-start;flex-direction:column}.academy-toolbar{grid-template-columns:1fr 1fr}.academy-search-field{grid-column:1/-1}}
@media(max-width:620px){.academy-toolbar{grid-template-columns:1fr}.academy-search-field{grid-column:auto}.academy-video-grid{grid-template-columns:repeat(auto-fill,minmax(170px,170px));gap:14px}.academy-video-card{max-width:170px}.academy-video-meta{display:grid}.academy-detail-side{grid-template-columns:1fr}.academy-detail-titlebar{flex-direction:column}.academy-like-form,.academy-like-button{width:100%}.academy-form-card{padding:18px}.academy-products-head{flex-direction:column}.academy-upload-submitbar{align-items:stretch;flex-direction:column}.academy-upload-submitbar button{width:100%}.academy-library-head,.academy-upload-head{padding:20px}.academy-toolbar{padding:14px}.academy-player-panel{padding-top:16px}.academy-player-wrap{width:min(100%,320px);aspect-ratio:9/16;min-height:0}.academy-player-wrap video{height:100%;max-height:none}.academy-player-badge{width:30px;height:30px;right:6px;bottom:6px}.academy-product-option{grid-template-columns:auto 24px 1fr;padding:9px 8px}}

/* =========================================================
   CHROMARIUM COMMUNITY V1 · 2026-09-14
   ========================================================= */
.gsw-navstrip .main-nav .nav-disabled{min-height:46px;display:flex!important;align-items:center!important;gap:7px;padding:0 20px!important;color:#8b8b8b!important;border-radius:0!important;text-transform:uppercase;font-size:12px!important;font-weight:900!important;letter-spacing:.02em;border-right:1px solid #292929;background:#0a0a0a!important;cursor:not-allowed;white-space:nowrap;opacity:1}.gsw-navstrip .main-nav .nav-smart-cap span{font-size:12px;filter:grayscale(1)}
.community-shell{max-width:1280px;padding-top:28px;padding-bottom:80px}.community-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:18px;padding:30px 32px;background:#111;color:#fff;border-bottom:5px solid #9bc52b}.community-kicker{margin:0 0 8px;color:#88ad1b;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.community-hero h1{margin:0 0 12px;font-size:clamp(38px,5vw,64px);line-height:.98}.community-hero>div>p:last-child{max-width:760px;margin:0;color:#c8c8c8;line-height:1.6}.community-points-chip{flex:0 0 auto;min-width:150px;padding:16px 20px;background:#9bc52b;color:#111;text-align:center}.community-points-chip small{display:block;font-size:9px;font-weight:900;letter-spacing:.1em}.community-points-chip strong{display:block;margin-top:3px;font-size:28px;line-height:1}
.community-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}.community-tabs a{display:flex;align-items:center;gap:10px;min-height:58px;padding:0 18px;background:#fff;border:1px solid #ddd;color:#111!important;text-decoration:none;font-size:13px;font-weight:900}.community-tabs a span{font-size:20px}.community-tabs a:hover,.community-tabs a.active{border-color:#9bc52b;box-shadow:inset 0 -4px #9bc52b}.community-tabs a.is-locked:not(.active){color:#777!important;background:#f6f6f4}
.community-alert{margin:0 0 18px;padding:14px 17px;border-left:5px solid;font-weight:800}.community-alert.success{background:#eff8d7;border-color:#9bc52b}.community-alert.error{background:#fff0f0;border-color:#b83232;color:#7f1f1f}.community-alert.setup{background:#fff8df;border-color:#d5a62a}.community-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:18px;padding:24px 26px;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b}.community-section-head h2{margin:0;font-size:clamp(28px,4vw,44px);line-height:1}.community-section-head>p{max-width:520px;margin:0;color:#666;line-height:1.55}.community-empty{padding:50px 24px;background:#fff;border:1px solid #ddd;text-align:center}.community-empty>span{display:block;font-size:42px;margin-bottom:12px}.community-empty strong{font-size:22px}.community-empty p{margin:8px 0 0;color:#777}
.community-work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.community-work-card{min-width:0;background:#fff;border:1px solid #ddd;transition:transform .16s,border-color .16s,box-shadow .16s}.community-work-card:hover{transform:translateY(-3px);border-color:#9bc52b;box-shadow:0 14px 28px #00000010}.community-work-image{position:relative;aspect-ratio:4/5;overflow:hidden;background:#171717}.community-work-image img{width:100%;height:100%;object-fit:cover;display:block}.community-image-missing{display:grid;place-items:center;width:100%;height:100%;color:#9bc52b;font-weight:900;letter-spacing:.12em}.community-work-votes{position:absolute;right:10px;top:10px;padding:7px 10px;background:#111e;color:#fff;font-size:12px;font-weight:900}.community-work-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px}.community-work-body small{color:#789e12;font-size:10px;font-weight:900}.community-work-body h3{margin:4px 0 3px;font-size:18px;line-height:1.2}.community-work-body p{margin:0;color:#888;font-size:10px}.community-vote-button{border:1px solid #cfcfcf;background:#fff;color:#111;padding:9px 11px;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}.community-vote-button:hover,.community-vote-button.is-voted{border-color:#9bc52b;background:#9bc52b}
.community-challenge-locked{padding:58px 28px;margin-bottom:20px;background:linear-gradient(135deg,#171717,#272727);color:#fff;text-align:center;border-bottom:5px solid #4d4d4d}.community-big-lock{font-size:58px;filter:grayscale(1);margin-bottom:12px}.community-challenge-locked h3{margin:6px 0 9px;font-size:28px}.community-challenge-locked>p:last-child{max-width:680px;margin:0 auto;color:#bdbdbd;line-height:1.55}.community-challenge-card{margin-bottom:20px;padding:26px;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b}.community-challenge-head{display:flex;justify-content:space-between;align-items:start;gap:20px}.community-challenge-head small,.community-deadline small{color:#789e12;font-size:9px;font-weight:900;letter-spacing:.08em}.community-challenge-head h3{margin:5px 0 0;font-size:34px}.community-deadline{padding:10px 13px;background:#111;color:#fff;text-align:right}.community-deadline small{display:block;color:#9bc52b}.community-challenge-card>p{max-width:850px;color:#555;line-height:1.6}.community-challenge-meta{display:flex;gap:18px;margin:16px 0;color:#666;font-size:11px;font-weight:800}.community-join-form{display:flex;gap:8px;margin:18px 0}.community-join-form select{flex:1;min-height:44px;border:1px solid #ccc;background:#fff;padding:0 12px}.community-join-form button,.community-challenge-form button,.community-mentor-card button,.mentor-session-notes button{border:0;background:#9bc52b;color:#111;min-height:44px;padding:0 16px;font-weight:900;cursor:pointer}.community-entry-strip{display:flex;gap:10px;overflow-x:auto;padding-top:18px;border-top:1px solid #eee}.community-entry{flex:0 0 118px}.community-entry>div{height:118px;background:#eee;display:grid;place-items:center;overflow:hidden}.community-entry img{width:100%;height:100%;object-fit:cover}.community-entry strong,.community-entry small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-entry strong{margin-top:7px;font-size:11px}.community-entry small{color:#777;font-size:9px}
.community-create-challenge{margin-top:20px;padding:24px;background:#fff;border:1px solid #ddd}.community-create-challenge.is-locked{background:#f6f6f4}.community-create-copy{display:flex;gap:16px;align-items:center}.community-create-copy>span{display:grid;place-items:center;width:58px;height:58px;background:#111;color:#fff;font-size:28px}.community-create-copy h3{margin:2px 0 0;font-size:22px}.community-points-progress{position:relative;width:min(420px,70vw);height:8px;margin:10px 0 4px;background:#ddd;overflow:hidden}.community-points-progress i{display:block;width:var(--progress);height:100%;background:#9bc52b}.community-challenge-form{display:grid;gap:14px;margin-top:22px;padding-top:22px;border-top:1px solid #e5e5e5}.community-challenge-form label{display:grid;gap:6px;font-size:11px;font-weight:900}.community-challenge-form input,.community-challenge-form textarea{box-sizing:border-box;width:100%;border:1px solid #c9c9c9;background:#fff;padding:11px;font:inherit}.community-date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.community-challenge-form button{justify-self:start}.community-admin-pending,.community-mentor-panel,.community-mentor-notes{margin-top:22px;padding:22px;background:#fff;border:1px solid #ddd}.community-admin-pending>article,.community-mentor-panel>article{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid #eee}.community-admin-pending article strong,.community-admin-pending article small{display:block}.community-admin-pending article small{color:#777;font-size:10px}.community-admin-pending article p{margin:6px 0 0;color:#666}.community-admin-pending form,.community-mentor-panel form{display:flex;gap:6px}.community-admin-pending button,.community-mentor-panel button{border:0;padding:9px 12px;background:#9bc52b;font-weight:900;cursor:pointer}.community-admin-pending button.danger,.community-mentor-panel button.danger{background:#111;color:#fff}
.community-current-mentor{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding:22px;background:#fff;border:1px solid #ddd;border-left:5px solid #d8b344}.community-current-mentor.accepted{border-left-color:#9bc52b}.community-current-mentor>div:nth-child(2){flex:1}.community-current-mentor small{color:#789e12;font-size:9px;font-weight:900}.community-current-mentor h3{margin:4px 0 5px;font-size:26px}.community-current-mentor p{margin:0;color:#666}.community-mentor-avatar{flex:0 0 74px;width:74px;height:74px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#111;color:#9bc52b;font-size:18px;font-weight:900}.community-mentor-avatar img{width:100%;height:100%;object-fit:cover}.community-end-mentor{border:1px solid #bbb;background:#fff;padding:9px 11px;font-size:9px;font-weight:900;cursor:pointer}.community-mentor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.community-mentor-card{padding:22px;background:#fff;border:1px solid #ddd;border-top:5px solid #9bc52b}.community-mentor-card .community-mentor-avatar{margin-bottom:14px}.community-mentor-card>small{color:#789e12;font-size:9px;font-weight:900;letter-spacing:.1em}.community-mentor-card h3{margin:4px 0 5px;font-size:24px}.community-mentor-card p{color:#666;line-height:1.5}.community-mentor-card .community-mentor-style{margin:0;color:#111;font-size:11px;font-weight:900}.community-mentor-card form{margin-top:16px}.community-mentor-notes>article{padding:13px 0;border-top:1px solid #eee}.community-mentor-notes article strong,.community-mentor-notes article small{display:block}.community-mentor-notes article small{color:#777;font-size:10px}.community-mentor-notes article p{margin:6px 0 0;line-height:1.55}.community-student{align-items:flex-start!important}.community-student>div:first-child{min-width:160px}.community-student strong,.community-student small{display:block}.community-student small{color:#777}.community-student-sessions{display:grid;gap:6px;min-width:min(520px,60vw)}.community-student-sessions a{display:flex;justify-content:space-between;gap:20px;padding:9px 11px;background:#f6f6f4;color:#111!important;text-decoration:none;border-left:3px solid #9bc52b}.community-student-sessions em{color:#888;font-size:11px}
.mentor-session-shell{max-width:1280px;padding-top:26px;padding-bottom:70px}.mentor-session-back{display:inline-flex;margin-bottom:14px;color:#111!important;text-decoration:none;font-weight:900}.mentor-session-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px;background:#111;color:#fff;border-bottom:5px solid #9bc52b}.mentor-session-head h1{margin:3px 0 7px;font-size:clamp(34px,5vw,56px);line-height:1}.mentor-session-head>div>p:last-child{margin:0;color:#bbb;font-size:11px;font-weight:800}.mentor-readonly-badge{padding:10px 14px;background:#2b2b2b;color:#9bc52b;font-size:10px;font-weight:900}.mentor-session-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.7fr);gap:18px;margin-top:18px}.mentor-session-main{display:grid;gap:18px}.mentor-block{padding:20px;background:#fff;border:1px solid #ddd}.mentor-block h2{margin:0 0 15px;font-size:22px}.mentor-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}.mentor-photo-grid figure{margin:0}.mentor-photo-grid img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#eee}.mentor-photo-grid figcaption{padding:7px 0;color:#777;font-size:9px}.mentor-phase-list{display:grid;gap:7px}.mentor-phase-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 13px;background:#f5f5f3;border-left:3px solid #9bc52b}.mentor-phase-list strong,.mentor-phase-list span{display:block}.mentor-phase-list span{color:#777;font-size:10px}.mentor-phase-list small{font-weight:900}.mentor-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}.mentor-product-grid article{display:flex;align-items:center;gap:9px;padding:8px;background:#f6f6f4}.mentor-product-grid img,.mentor-product-grid article>span{width:42px;height:42px;object-fit:contain;border-radius:50%;background:var(--paint,#777)}.mentor-product-grid strong,.mentor-product-grid small{display:block}.mentor-product-grid strong{font-size:11px}.mentor-product-grid small{color:#777;font-size:8px}.mentor-session-notes{display:grid;align-content:start;gap:18px}.mentor-sticky{position:sticky;top:16px}.mentor-session-notes textarea{box-sizing:border-box;width:100%;resize:vertical;border:1px solid #ccc;padding:11px;font:inherit}.mentor-session-notes button{margin-top:8px}.mentor-note{padding:11px 0;border-top:1px solid #eee}.mentor-note strong{font-size:9px;color:#789e12}.mentor-note p{margin:4px 0 0;line-height:1.5}
@media(max-width:900px){.community-hero,.community-section-head{align-items:flex-start;flex-direction:column}.community-tabs{grid-template-columns:1fr}.mentor-session-grid{grid-template-columns:1fr}.mentor-sticky{position:static}.community-student{display:block!important}.community-student-sessions{min-width:0;margin-top:10px}.community-current-mentor{align-items:flex-start;flex-wrap:wrap}.community-challenge-head{flex-direction:column}.community-deadline{text-align:left}.community-date-grid{grid-template-columns:1fr}}
@media(max-width:560px){.community-shell,.mentor-session-shell{padding-top:16px}.community-hero{padding:22px 18px}.community-points-chip{width:100%;box-sizing:border-box}.community-section-head{padding:20px 18px}.community-work-grid{grid-template-columns:1fr 1fr;gap:9px}.community-work-body{display:block;padding:11px}.community-work-body form{margin-top:10px}.community-vote-button{width:100%}.community-challenge-card,.community-create-challenge{padding:18px}.community-join-form{display:grid}.community-mentor-grid{grid-template-columns:1fr}.mentor-session-head{align-items:flex-start;flex-direction:column;padding:20px}.mentor-photo-grid{grid-template-columns:1fr 1fr}.community-admin-pending>article,.community-mentor-panel>article{align-items:flex-start;flex-direction:column}.community-work-body h3{font-size:15px}}

/* =========================================================
   CHROMARIUM COMMUNITY / MENTOR INFO V2 · 2026-09-14
   ========================================================= */
/* Smart Cap: visibile ma bloccato */
.gsw-navstrip .main-nav .nav-disabled.nav-smart-cap{
  color:#fff!important;
  opacity:.78;
  background:#090909!important;
}
.gsw-navstrip .main-nav .nav-disabled.nav-smart-cap span{
  color:#d6ad35!important;
  filter:none!important;
  opacity:1;
}

/* Community V2: più gerarchia, meno effetto "pagina tecnica" */
.community-shell{max-width:1320px}
.community-hero{
  position:relative;
  overflow:hidden;
  padding:38px 40px;
  border:1px solid #242424;
  border-bottom:6px solid #9bc52b;
  box-shadow:0 16px 40px #00000010;
}
.community-hero:after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-110px;
  width:280px;
  height:280px;
  border:54px solid #9bc52b10;
  border-radius:50%;
  pointer-events:none;
}
.community-hero h1{letter-spacing:-.035em}
.community-points-chip{
  position:relative;
  z-index:1;
  min-width:170px;
  padding:19px 22px;
  border:1px solid #b4dc3b;
  box-shadow:0 8px 22px #0004;
}
.community-tabs{gap:12px}
.community-tabs a{
  min-height:64px;
  padding:0 22px;
  border:1px solid #d7d7d7;
  border-radius:12px;
  box-shadow:0 5px 18px #00000008;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.community-tabs a:hover{transform:translateY(-2px);box-shadow:0 9px 22px #0000000d}
.community-tabs a.active{background:#f4f8e9;border-color:#9bc52b;box-shadow:inset 0 -4px #9bc52b,0 7px 20px #0000000a}
.community-section-head{
  border-radius:14px;
  padding:29px 30px;
  box-shadow:0 8px 24px #00000008;
}
.community-empty,.community-challenge-card,.community-create-challenge,.community-current-mentor,.community-mentor-card,.community-mentor-notes,.community-mentor-panel,.community-admin-pending{
  border-radius:14px;
  box-shadow:0 8px 24px #00000008;
}
.community-challenge-locked{
  border-radius:16px;
  padding:64px 32px;
  border:1px solid #303030;
  border-bottom:6px solid #4f4f4f;
  box-shadow:0 14px 34px #00000014;
}
.community-big-lock{font-size:52px}
.community-create-challenge{border-top:5px solid #9bc52b}
.community-create-challenge.is-locked{border-top-color:#c8c8c8}
.community-points-progress{height:10px;border-radius:999px}.community-points-progress i{border-radius:999px}
.community-work-card{border-radius:14px;overflow:hidden}

/* Adotta un GSW Team: avatar SEMPRE piccoli, anche con immagini enormi */
.community-mentor-avatar{
  flex:0 0 58px!important;
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  border:2px solid #9bc52b;
  box-shadow:0 5px 14px #00000018;
}
.community-mentor-avatar img,
.community-mentor-card img,
.community-current-mentor img{
  display:block!important;
  width:58px!important;
  height:58px!important;
  max-width:58px!important;
  max-height:58px!important;
  object-fit:cover!important;
}
.community-mentor-card{position:relative;padding:24px;border-top-width:5px}
.community-mentor-card.is-full{border-top-color:#bdbdbd}
.community-mentor-card form button:disabled{background:#ddd;color:#777;cursor:not-allowed}
.community-mentor-availability{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 8px;
  margin-top:16px;
  padding:11px 12px;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.03em;
}
.community-mentor-availability.available{background:#f0f7dc;color:#537600;border:1px solid #bfd77a}
.community-mentor-availability.full{background:#f2f2f2;color:#666;border:1px solid #d5d5d5}
.community-mentor-availability>span{font-size:13px}
.community-mentor-availability small{width:100%;color:inherit;font-size:9px;font-weight:700;letter-spacing:0}

/* MY USER > MENTOR INFO */
.mentor-info-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:22px;margin-top:26px}
.mentor-info-settings,.mentor-info-requests{border-radius:14px;box-shadow:0 8px 24px #00000008}
.mentor-info-settings{align-self:start;border-top:5px solid #9bc52b}
.mentor-info-settings h2,.mentor-info-requests h2{margin:5px 0 10px;font-size:28px;line-height:1.08}
.mentor-info-settings>p:not(.eyebrow){margin:0 0 18px;color:#666;line-height:1.55}
.mentor-limit-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;margin-top:20px}
.mentor-limit-form label{display:grid;gap:7px;font-size:11px;font-weight:900}
.mentor-limit-form input{box-sizing:border-box;width:100%;min-height:46px;border:1px solid #c7c7c7;padding:0 12px;font:inherit}
.mentor-limit-form button{min-height:46px;border:0;background:#111;color:#fff;padding:0 18px;font-weight:900;cursor:pointer}
.mentor-limit-form button:disabled,.mentor-limit-form input:disabled{opacity:.45;cursor:not-allowed}
.mentor-info-warning{margin:14px 0;padding:12px 14px;background:#fff7df;border-left:4px solid #d1a92f;font-size:12px;font-weight:800}
.mentor-info-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.mentor-info-stats div{padding:15px 10px;background:#111;color:#fff;text-align:center;border-radius:10px}
.mentor-info-stats strong{display:block;color:#9bc52b;font-size:30px;line-height:1}
.mentor-info-stats span{display:block;margin-top:6px;color:#c9c9c9;font-size:9px;font-weight:800}
.mentor-info-title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.mentor-request-count{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:#9bc52b;color:#111;font-size:18px;font-weight:900}
.mentor-info-empty{display:flex;align-items:center;gap:10px;margin-top:18px;padding:22px;background:#f7f7f5;border:1px dashed #ccc;border-radius:12px;color:#666}
.mentor-request-list{display:grid;gap:9px;margin-top:18px}
.mentor-request-list>article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid #e0e0e0;border-radius:12px;background:#fafafa}
.mentor-request-person{display:flex;align-items:center;gap:12px;min-width:0}
.mentor-request-person strong,.mentor-request-person small{display:block}
.mentor-request-person small{margin-top:3px;color:#777;font-size:9px}
.mentor-request-avatar{display:grid;place-items:center;flex:0 0 46px;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#111;color:#9bc52b;font-weight:900}
.mentor-request-avatar img{display:block;width:46px!important;height:46px!important;object-fit:cover!important}
.mentor-request-list form{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.mentor-request-list button{min-height:38px;border:0;padding:0 12px;background:#9bc52b;color:#111;font-size:10px;font-weight:900;cursor:pointer;border-radius:8px}
.mentor-request-list button.danger{background:#111;color:#fff}
.mentor-request-list button:disabled{background:#ddd;color:#888;cursor:not-allowed}

@media(max-width:900px){
  .mentor-info-grid{grid-template-columns:1fr}
  .community-tabs{grid-template-columns:repeat(3,minmax(180px,1fr));overflow-x:auto;padding-bottom:4px}
}
@media(max-width:620px){
  .community-hero{padding:26px 20px}
  .community-tabs{display:flex;overflow-x:auto}.community-tabs a{flex:0 0 auto;min-width:185px}
  .community-section-head{padding:22px 20px}
  .mentor-limit-form{grid-template-columns:1fr}
  .mentor-limit-form button{width:100%}
  .mentor-info-stats{grid-template-columns:1fr 1fr 1fr}
  .mentor-request-list>article{align-items:flex-start;flex-direction:column}
  .mentor-request-list form{width:100%;justify-content:flex-start}
}


/* =========================================================
   Javier / GSW design feedback — 2026-09-16
   Chromarium is the primary brand; GSW mark belongs to the
   catalog hero, not to the global header or login.
   ========================================================= */
.gsw-brand {
    gap: 0 !important;
}

.catalog-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
}

.catalog-hero > div {
    min-width: 0;
}

.catalog-gsw-mark {
    flex: 0 0 auto;
    width: 86px;
    height: 86px;
    object-fit: contain;
    display: block;
}

@media (max-width: 760px) {
    .catalog-hero {
        align-items: flex-start !important;
    }

    .catalog-gsw-mark {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 430px) {
    .catalog-gsw-mark {
        width: 50px;
        height: 50px;
    }
}