/* ============================================================
   SaintChannel Tutorial — stili (dark theme, coerente con design system)
   Variabili disponibili da _variables.css (caricate prima di questo file).
   ============================================================ */

/* --- Hero hub --- */
.tut-hero {
    padding: 4rem 0 3rem;
    background: linear-gradient(135deg, var(--st-dark-card) 0%, var(--st-dark-surface) 100%);
    border-bottom: 1px solid rgba(0, 255, 157, .15);
}
.tut-hero__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    margin: 0 0 .8rem;
    color: var(--st-text-primary);
}
.tut-hero__subtitle {
    font-size: 1.15rem;
    color: var(--st-text-secondary);
    max-width: 720px;
    margin: 0 auto;
}
.tut-hero__lang     { text-align: right; margin-bottom: 1rem; }
.tut-hero__lang a   { color: var(--st-primary); font-size: .9rem; text-decoration: underline; }

.tut-lang-switch,
.tut-lang-alt { color: var(--st-primary); text-decoration: none; font-size: .9rem; }

/* --- Grid sezioni --- */
.tut-sections { padding: 3rem 0; }
.tut-section-card {
    display: block;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    text-decoration: none;
    color: var(--st-text-primary);
    background: var(--st-dark-card);
    transition: transform .2s, box-shadow .2s, border-color .2s;
    height: 100%;
}
.tut-section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 255, 157, .12);
    border-color: var(--st-primary);
    color: var(--st-text-primary);
}
.tut-section-card i     { font-size: 2rem; color: var(--st-primary); margin-bottom: 1rem; }
.tut-section-card__logo {
    width: 100%;
    height: 90px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
    background: #F8F8F6;
}
.tut-section-card__logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.tut-section-card h3    { font-size: 1.2rem; margin: 0 0 .5rem; }
.tut-section-card__desc { font-size: .88rem; color: var(--st-text-secondary); margin: 0 0 .75rem; line-height: 1.4; }
.tut-section-card__cta  { color: var(--st-primary); font-weight: 600; font-size: .9rem; }

/* Sezione "in arrivo" */
.tut-section-card--soon {
    opacity: .7;
    cursor: default;
    pointer-events: none;
}
.tut-section-card--soon:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(255,255,255,.08);
}
.tut-section-card__soon-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255,255,255,.08);
    color: var(--st-text-secondary);
    border: 1px solid rgba(255,255,255,.12);
}

/* --- Strip CTA login --- */
.tut-cta-strip { padding: 3rem 0; }
.tut-cta-strip__inner {
    background: var(--st-dark-surface);
    border: 1px solid rgba(0, 255, 157, .2);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
}
.tut-cta-strip__inner h3 { color: var(--st-text-primary); margin: 0 0 .5rem; }
.tut-cta-strip__inner p  { color: var(--st-text-secondary); margin: 0 0 1.5rem; }

/* --- Coming Soon box --- */
.tut-coming-soon-box {
    max-width: 560px;
    margin: 3rem auto 5rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 3rem 2.5rem;
    text-align: center;
}
.tut-coming-soon-box__icon {
    font-size: 2.5rem;
    color: var(--st-text-secondary);
    margin-bottom: 1.2rem;
    display: block;
}
.tut-coming-soon-box h2 {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 .75rem;
    color: var(--st-text-primary);
}
.tut-coming-soon-box p {
    color: var(--st-text-secondary);
    font-size: .97rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}
.tut-coming-soon-box__logged {
    font-size: .9rem;
    color: var(--st-text-secondary);
}
.tut-coming-soon-box__back {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: .88rem;
    color: var(--st-text-secondary);
    text-decoration: none;
}
.tut-coming-soon-box__back:hover { color: var(--st-primary); }

/* --- Cluster coming soon row --- */
.tut-cluster__soon-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    margin-top: .5rem;
    background: rgba(255,255,255,.03);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 10px;
    color: var(--st-text-secondary);
    font-size: .9rem;
}
.tut-cluster__soon-row i {
    font-size: 1rem;
    opacity: .6;
}
.tut-cluster__count--soon {
    color: var(--st-text-secondary);
    font-style: italic;
    font-size: .82rem;
}

/* --- Secondary sub-nav (livello 2) con immagini --- */
.tut-subnav {
    background: var(--st-dark-card);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.tut-subnav .container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tut-subnav .container::-webkit-scrollbar { display: none; }
.tut-subnav__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: .75rem 0;
    gap: .75rem;
    white-space: nowrap;
}
.tut-subnav__item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    text-decoration: none;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: border-color .18s, background .18s, opacity .18s;
    min-width: 160px;
}
.tut-subnav__item a:hover {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}
.tut-subnav__item--active a {
    border-color: var(--st-primary);
    background: rgba(0,255,157,.05);
}
.tut-subnav__item--soon {
    opacity: .55;
}
.tut-subnav__item--soon:hover {
    opacity: .8;
}

/* Thumbnail immagine */
.tut-subnav__thumb {
    position: relative;
    width: 140px;
    height: 80px;
    border-radius: 7px;
    overflow: hidden;
    background: var(--st-dark-surface);
    flex-shrink: 0;
}
.tut-subnav__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s;
}
.tut-subnav__item a:hover .tut-subnav__thumb img {
    transform: scale(1.05);
}
.tut-subnav__thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--st-text-secondary);
}

/* Overlay "Presto" sull'immagine */
.tut-subnav__soon-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}

/* Label testo sotto l'immagine */
.tut-subnav__label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--st-text-secondary);
    transition: color .18s;
    text-align: center;
    line-height: 1.2;
}
.tut-subnav__item a:hover .tut-subnav__label {
    color: var(--st-text-primary);
}
.tut-subnav__item--active .tut-subnav__label {
    color: var(--st-primary);
}

@media (max-width: 575px) {
    .tut-subnav__list { gap: .5rem; padding: .5rem 0; }
    .tut-subnav__item a { min-width: 120px; padding: .4rem .5rem; }
    .tut-subnav__thumb { width: 100px; height: 60px; }
    .tut-subnav__label { font-size: .72rem; }
}

/* --- Breadcrumb --- */
.tut-breadcrumb {
    padding: 1.5rem 0 .5rem;
    font-size: .9rem;
    color: var(--st-text-secondary);
}
.tut-breadcrumb a   { color: var(--st-text-secondary); text-decoration: none; }
.tut-breadcrumb a:hover { color: var(--st-primary); }
.tut-breadcrumb .sep { margin: 0 .5rem; opacity: .4; }
.tut-breadcrumb .current { color: var(--st-text-primary); font-weight: 500; }

/* --- Section hero --- */
.tut-section-hero { padding: 1rem 0 2rem; }
.tut-section-hero h1 {
    font-size: 2.4rem;
    font-weight: 800;
    margin: 0 0 .8rem;
    color: var(--st-text-primary);
}
.tut-section-hero .lead { color: var(--st-text-secondary); }

/* --- Card tutorial --- */
.tut-tutorials-grid { padding-bottom: 4rem; }
.tut-empty { color: var(--st-text-secondary); font-style: italic; text-align: center; padding: 3rem 0; }
.tut-card {
    display: block;
    height: 100%;
    padding: 1.5rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    text-decoration: none;
    color: var(--st-text-primary);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tut-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 255, 157, .1);
    border-color: var(--st-primary);
    color: var(--st-text-primary);
}
.tut-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.tut-card__time { font-size: .85rem; color: var(--st-text-secondary); }
.tut-card h3    { font-size: 1.1rem; margin: 0 0 .5rem; }
.tut-card p     { color: var(--st-text-secondary); font-size: .92rem; margin: 0; }

/* --- Badge livello accesso --- */
.tut-badge {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tut-badge--public     { background: rgba(0, 255, 157, .15); color: var(--st-primary); border: 1px solid rgba(0, 255, 157, .3); }
.tut-badge--registered { background: rgba(99, 102, 241, .2); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, .4); }
.tut-badge--premium    { background: rgba(245, 158, 11, .2); color: #fcd34d; border: 1px solid rgba(245, 158, 11, .35); }

/* --- Articolo --- */
.tut-article { padding: 2rem 0 4rem; max-width: 820px; }
.tut-article__header { margin-bottom: 2rem; }
.tut-article__meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.2rem;
    font-size: .9rem;
}
.tut-meta { color: var(--st-text-secondary); }
.tut-meta i { margin-right: .35rem; }
.tut-article__title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    margin: 0 0 .8rem;
    line-height: 1.2;
    color: var(--st-text-primary);
}
.tut-article__lead { font-size: 1.15rem; color: var(--st-text-secondary); margin: 0; }

.tut-prereq {
    background: rgba(245, 158, 11, .08);
    border-left: 3px solid #f59e0b;
    padding: 1rem 1.5rem;
    border-radius: 6px;
    margin: 2rem 0;
    color: var(--st-text-primary);
}
.tut-prereq h4 { margin: 0 0 .5rem; font-size: 1rem; }
.tut-prereq ul { margin: 0; padding-left: 1.2rem; }

.tut-article__body {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--st-text-accent);
}
.tut-article__body h2 { margin-top: 2.5rem; padding-top: .5rem; color: var(--st-text-primary); scroll-margin-top: 70px; }
.tut-article__body h3 { margin-top: 1.8rem; color: var(--st-text-primary); scroll-margin-top: 70px; }
.tut-article__body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; }
.tut-article__body a { color: var(--st-primary); }
.tut-article__body a:hover { color: var(--st-primary-light); }

/* --- Tables inside article body --- */
.tut-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: .95rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}
.tut-article__body thead tr {
    background: rgba(139,92,246,.18);
}
.tut-article__body thead th {
    padding: .7rem 1rem;
    text-align: left;
    color: var(--st-text-primary);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 2px solid rgba(139,92,246,.4);
    white-space: nowrap;
}
.tut-article__body tbody tr {
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
}
.tut-article__body tbody tr:last-child {
    border-bottom: none;
}
.tut-article__body tbody tr:hover {
    background: rgba(255,255,255,.04);
}
.tut-article__body tbody td {
    padding: .65rem 1rem;
    color: var(--st-text-accent);
    vertical-align: top;
    line-height: 1.55;
}
.tut-article__body tbody td:first-child {
    color: var(--st-text-primary);
    font-weight: 600;
}

/* --- Pricing --- */
.tut-pricing { padding: 3rem 0 5rem; }
.tut-pricing__header { text-align: center; margin-bottom: 3rem; }
.tut-pricing__header h1 { color: var(--st-text-primary); }
.tut-pricing__header .lead { color: var(--st-text-secondary); }
.tut-pricing__cards {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 760px;
    margin: 0 auto;
}
.tut-plan-card {
    position: relative;
    padding: 2rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    text-align: center;
}
.tut-plan-card--featured {
    border-color: var(--st-primary);
    border-width: 2px;
    box-shadow: 0 0 30px rgba(0, 255, 157, .12);
}
.tut-plan-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--st-gradient-primary);
    color: var(--st-dark);
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
}
.tut-plan-card__name  { font-size: 1.2rem; font-weight: 700; margin: 0 0 1rem; color: var(--st-text-primary); }
.tut-plan-card__price { margin: 1rem 0; }
.tut-plan-card__price .amount   { font-size: 2.6rem; font-weight: 800; color: var(--st-primary); }
.tut-plan-card__price .interval { color: var(--st-text-secondary); margin-left: .25rem; }
.tut-plan-card__desc  { color: var(--st-text-secondary); font-size: .95rem; min-height: 3rem; }
.tut-plan-card__note  { display: block; margin-top: .8rem; color: var(--st-text-secondary); font-size: .8rem; }
.btn-block            { display: block; width: 100%; }

/* --- Account --- */
.tut-account { padding: 3rem 0 5rem; }
.tut-account h1 { color: var(--st-text-primary); }
.tut-account__user {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    margin-bottom: 2rem;
}
.tut-account__avatar { width: 64px; height: 64px; border-radius: 50%; }
.tut-account__user div { display: flex; flex-direction: column; }
.tut-account__user strong { font-size: 1.1rem; color: var(--st-text-primary); }
.tut-account__user span   { color: var(--st-text-secondary); font-size: .9rem; }
.tut-account__subscription,
.tut-account__actions { padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.tut-account__subscription h3 { color: var(--st-text-primary); }
.tut-account__sub-empty { color: var(--st-text-secondary); font-style: italic; margin-bottom: 1rem; }

/* --- 404 --- */
.tut-notfound { padding: 5rem 0; text-align: center; }
.tut-notfound h1 { font-size: 6rem; font-weight: 800; color: var(--st-primary); margin: 0; }
.tut-notfound p  { color: var(--st-text-secondary); margin: 1rem 0 2rem; }

/* --- Login Modal --- */
.tut-login-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tut-login-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: blur(6px);
}
.tut-login-modal__panel {
    position: relative;
    background: var(--st-dark-card);
    border: 1px solid rgba(0, 255, 157, .25);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: calc(100% - 2rem);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 255, 157, .08);
    animation: tut-modal-in .2s ease-out;
}
@keyframes tut-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tut-login-modal__close {
    position: absolute;
    top: .5rem;
    right: .8rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--st-text-secondary);
    cursor: pointer;
}
.tut-login-modal__close:hover { color: var(--st-text-primary); }
.tut-login-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .75rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(255, 184, 0, .12);
    border: 1px solid rgba(255, 184, 0, .28);
    color: #ffd166;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tut-login-modal__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .5rem; color: var(--st-text-primary); }
.tut-login-modal__sub   { color: var(--st-text-secondary); margin: 0 0 1.5rem; }
.tut-login-modal__google { padding: .85rem 1.2rem; }
.tut-login-modal__privacy { font-size: .8rem; color: var(--st-text-secondary); margin: 1rem 0 0; }

/* --- Paywall block (Step 6) --- */
.tut-paywall-block {
    position: relative;
    margin: 2rem 0;
    padding: 3rem 2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, .85) 40%, var(--st-dark-card) 100%);
    border: 1px solid rgba(0, 255, 157, .2);
    border-radius: 12px;
    text-align: center;
}
.tut-paywall-block::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--st-dark) 100%);
    pointer-events: none;
}
.tut-paywall-block h3 { margin: 0 0 .8rem; font-size: 1.4rem; color: var(--st-text-primary); }
.tut-paywall-block p  { color: var(--st-text-secondary); margin: 0 0 1.5rem; }

/* --- Responsive --- */
@media (max-width: 640px) {
    .tut-article { padding: 1rem 0 3rem; }
    .tut-article__meta-bar { font-size: .85rem; }
    .tut-pricing__cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SHORTCODE TUTORIAL (Step 5)
   ========================================================================== */

/* --- [meta-bar] --- */
.tut-meta-bar {
    display: flex; flex-direction: column; gap: .75rem;
    margin: 1.5rem 0 2rem;
    padding: 1rem 1.25rem;
    background: var(--st-dark-card);
    border-left: 3px solid var(--st-primary);
    border-radius: 6px;
}
.tut-meta__items {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    color: var(--st-text-secondary); font-size: .9rem;
}
.tut-meta__items i { color: var(--st-primary); margin-right: .35rem; }
.tut-meta__access--registered { color: #ffc107; }
.tut-meta__access--premium    { color: var(--st-primary); }
.tut-meta__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tut-meta__tag {
    font-size: .75rem; padding: .15rem .55rem;
    background: rgba(0,255,157,.08); color: var(--st-primary);
    border-radius: 999px;
}

/* --- [toc] --- */
.tut-toc {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 8px;
}
.tut-toc__title {
    font-size: 1rem; margin: 0 0 .75rem;
    color: var(--st-text-primary); text-transform: uppercase; letter-spacing: .05em;
}
.tut-toc__list { list-style: none; padding: 0; margin: 0; }
.tut-toc__item { margin: .35rem 0; }
.tut-toc__item--h3 { padding-left: 1.25rem; }
.tut-toc__item a { color: var(--st-text-secondary); text-decoration: none; transition: color .15s; }
.tut-toc__item a:hover { color: var(--st-primary); }

/* --- [tldr] --- */
.tut-tldr {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(0,255,157,.08), rgba(0,204,125,.04));
    border-left: 4px solid var(--st-primary);
    border-radius: 6px;
}
.tut-tldr__label {
    font-weight: 700; color: var(--st-primary);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .5rem;
}
.tut-tldr__body { color: var(--st-text-primary); }
.tut-tldr__body p:last-child { margin-bottom: 0; }

/* --- [prereq] (override per nuova struttura) --- */
.tut-prereq {
    margin: 1.5rem 0; padding: 1.25rem 1.5rem;
    background: rgba(255,193,7,.06);
    border-left: 4px solid #ffc107;
    border-radius: 6px;
}
.tut-prereq__label {
    font-weight: 700; color: #ffc107;
    font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .5rem;
}
.tut-prereq__body ul { margin: 0; padding-left: 1.2rem; color: var(--st-text-secondary); }
.tut-prereq__body p:last-child { margin-bottom: 0; }

/* --- [try-it] --- */
.tut-tryit {
    margin: 1.5rem 0; padding: 1.5rem;
    background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(139,92,246,.02));
    border: 1px solid rgba(139,92,246,.25);
    border-radius: 8px;
}
.tut-tryit__label {
    font-weight: 700; color: var(--st-secondary);
    font-size: .85rem; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .75rem;
}
.tut-tryit__body { color: var(--st-text-primary); margin-bottom: 1rem; }
.tut-tryit__body p:last-child { margin-bottom: 0; }
.tut-tryit__prompt { position: relative; }
.tut-tryit__prompt pre {
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(139,92,246,.3);
    border-left: 3px solid var(--st-secondary);
    border-radius: 6px;
    padding: .85rem 4.5rem .85rem 1rem;
    overflow-x: hidden;
    color: #e2d9f3;
    font-size: .875rem;
    line-height: 1.6;
    font-family: 'Courier New', 'Consolas', monospace;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}
.tut-tryit__prompt pre code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}
.tut-tryit__copy {
    position: absolute; top: .5rem; right: .5rem;
    background: rgba(139,92,246,.2); color: var(--st-secondary);
    border: 1px solid rgba(139,92,246,.4); border-radius: 4px;
    padding: .35rem .65rem; font-size: .75rem; cursor: pointer;
    transition: all .15s; white-space: nowrap;
}
.tut-tryit__copy:hover { background: rgba(139,92,246,.35); color: #fff; border-color: var(--st-secondary); }
.tut-tryit__copy.is-copied { background: rgba(52,211,153,.2); color: #34d399; border-color: rgba(52,211,153,.4); }

/* --- [image-screenshot] --- */
.tut-screenshot {
    margin: 2rem auto;
    padding: 0;
    text-align: center;
}
.tut-screenshot img {
    max-width: 100%; height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    display: block; margin: 0 auto;
}
.tut-screenshot figcaption {
    margin-top: .75rem;
    color: var(--st-text-secondary);
    font-size: .85rem; font-style: italic;
}

/* --- [paywall] (variante shortcode, distinta da .tut-paywall-block) --- */
.tut-paywall {
    position: relative;
    margin: 2.5rem 0;
    padding: 2.5rem 2rem;
    background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,.85) 30%, var(--st-dark-card) 100%);
    border: 1px solid rgba(0,255,157,.2);
    border-radius: 12px;
    text-align: center;
}
.tut-paywall::before {
    content: ''; position: absolute;
    top: -80px; left: 0; right: 0; height: 80px;
    background: linear-gradient(180deg, transparent 0%, var(--st-dark) 100%);
    pointer-events: none;
}
.tut-paywall--registered { border-color: rgba(255,193,7,.3); }
.tut-paywall__icon {
    font-size: 2rem; color: var(--st-primary);
    margin-bottom: .75rem;
}
.tut-paywall--registered .tut-paywall__icon { color: #ffc107; }
.tut-paywall__title { margin: 0 0 .5rem; font-size: 1.4rem; color: var(--st-text-primary); }
.tut-paywall__body  { color: var(--st-text-secondary); margin: 0 0 1.5rem; }
.tut-paywall__cta .tut-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 1.6rem;
    background: var(--st-gradient-primary); color: var(--st-dark);
    border: none; border-radius: 6px; font-weight: 700; cursor: pointer;
    text-decoration: none; transition: transform .15s, box-shadow .15s;
}
.tut-paywall__cta .tut-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,255,157,.3);
}

/* ============================================================
   ACCOUNT PAGE
   ============================================================ */
.tut-account {
    padding: 3rem 0 5rem;
    min-height: 60vh;
}

/* Profilo */
.tut-account__profile {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.tut-account__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.tut-account__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--st-primary, #00ff9d);
    display: block;
}
.tut-account__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,255,157,.1);
    color: var(--st-primary, #00ff9d);
    font-size: 2rem;
    font-weight: 700;
}
.tut-account__premium-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #f59e0b;
    color: #0a0a0a;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    white-space: nowrap;
}
.tut-account__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .25rem;
}
.tut-account__email {
    color: rgba(255,255,255,.45);
    font-size: .88rem;
    margin: 0 0 .4rem;
}
.tut-account__stat {
    color: var(--st-primary, #00ff9d);
    font-size: .82rem;
    margin: 0;
}
.tut-account__stat i { margin-right: 5px; }

/* Grid 2 colonne */
.tut-account__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
@media (max-width: 767.98px) {
    .tut-account__grid { grid-template-columns: 1fr; }
}

/* Cards */
.tut-account__card {
    background: var(--st-dark-card, #111);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    padding: 1.5rem;
}
.tut-account__card-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    margin: 0 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .8rem;
}
.tut-account__card-title i {
    color: var(--st-primary, #00ff9d);
    margin-right: 6px;
}

/* Subscription states */
.tut-account__sub { display: flex; flex-direction: column; gap: .75rem; }
.tut-account__sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
}
.tut-account__sub-badge--active   { background: rgba(0,255,157,.12); color: #00ff9d; }
.tut-account__sub-badge--canceled { background: rgba(239,68,68,.12);  color: #ef4444; }
.tut-account__sub-badge--warning  { background: rgba(245,158,11,.12); color: #f59e0b; }
.tut-account__sub-renewal {
    color: rgba(255,255,255,.5);
    font-size: .82rem;
    margin: 0;
}
.tut-account__sub-empty {
    color: rgba(255,255,255,.4);
    font-size: .88rem;
    margin: 0;
}

/* Bottoni account */
.tut-account__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .6rem 1.25rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background .2s, box-shadow .2s, color .2s;
    width: 100%;
    justify-content: center;
}
.tut-account__btn--primary {
    background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d, #00cc7d));
    color: #0a0a0a;
}
.tut-account__btn--primary:hover {
    box-shadow: 0 4px 16px rgba(0,255,157,.3);
    color: #0a0a0a;
    text-decoration: none;
}
.tut-account__btn--outline {
    background: transparent;
    color: var(--st-primary, #00ff9d);
    border: 1.5px solid var(--st-primary, #00ff9d);
}
.tut-account__btn--outline:hover {
    background: rgba(0,255,157,.07);
    text-decoration: none;
}
.tut-account__btn--ghost {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
}
.tut-account__btn--ghost:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
    text-decoration: none;
}
.tut-account__btn--logout {
    background: rgba(239,68,68,.1);
    color: #ef4444;
}
.tut-account__btn--logout:hover {
    background: rgba(239,68,68,.18);
    text-decoration: none;
}
.tut-account__actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ============================================================
   LOGIN MODAL
   ============================================================ */
.tut-lm {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
}
.tut-lm.is-open { opacity: 1; }

.tut-lm__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.tut-lm__panel {
    position: relative;
    z-index: 1;
    background: #111;
    border: 1px solid rgba(0,255,157,.2);
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    width: 100%;
    max-width: 400px;
    margin: 1rem;
    text-align: center;
    box-shadow: 0 16px 48px rgba(0,0,0,.7);
    transform: translateY(16px);
    transition: transform .25s ease;
}
.tut-lm.is-open .tut-lm__panel { transform: translateY(0); }

.tut-lm__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: rgba(255,255,255,.4);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color .2s;
}
.tut-lm__close:hover { color: #fff; }

.tut-lm__logo {
    font-size: 2.5rem;
    color: var(--st-primary, #00ff9d);
    margin-bottom: 1rem;
}

.tut-lm__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .5rem;
}

.tut-lm__sub {
    color: rgba(255,255,255,.5);
    font-size: .88rem;
    margin: 0 0 1.25rem;
}

/* Benefits */
.tut-lm__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.tut-lm__benefits li {
    font-size: .84rem;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tut-lm__benefits li i {
    color: var(--st-primary, #00ff9d);
    font-size: .75rem;
    flex-shrink: 0;
}

/* Google button */
.tut-lm__google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: .85rem;
    background: #fff;
    color: #1f1f1f;
    font-size: .92rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: box-shadow .2s, background .2s;
    margin-bottom: 1rem;
}
.tut-lm__google-btn:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    text-decoration: none;
    color: #1f1f1f;
}
.tut-lm__google-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tut-lm__privacy {
    font-size: .72rem;
    color: rgba(255,255,255,.3);
    margin: 0;
}


/* --- [next-tutorial] --- */
.tut-next-tutorial {
    display: flex; flex-direction: column; gap: .25rem;
    margin: 2.5rem 0 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--st-dark-card);
    border: 1px solid rgba(255,255,255,.08);
    border-left: 4px solid var(--st-primary);
    border-radius: 8px;
    text-decoration: none;
    transition: transform .15s, border-color .15s;
}
.tut-next-tutorial:hover {
    transform: translateX(4px);
    border-color: var(--st-primary);
}
.tut-next__label {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--st-primary); font-weight: 700;
}
.tut-next__title {
    font-size: 1.1rem; color: var(--st-text-primary); font-weight: 600;
}
.tut-next__time {
    font-size: .8rem; color: var(--st-text-secondary);
}

/* ============================================================
   PRICING PAGE — /tutorial/upgrade
   ============================================================ */
.tut-pricing {
    padding: 3rem 0 5rem;
    min-height: 60vh;
}

/* Test mode banner */
.tut-pricing__test-banner {
    background: rgba(245,158,11,.1);
    border: 1px solid rgba(245,158,11,.3);
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-bottom: 2rem;
    font-size: .85rem;
}
.tut-pricing__test-banner-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    color: rgba(255,255,255,.8);
}
.tut-pricing__test-badge {
    background: #f59e0b;
    color: #0a0a0a;
    font-size: .7rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: .05em;
}
.tut-pricing__test-card {
    background: rgba(0,0,0,.4);
    color: #00ff9d;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: .92rem;
    letter-spacing: .08em;
}
.tut-pricing__test-hint {
    color: rgba(255,255,255,.45);
    font-size: .78rem;
}

/* Header */
.tut-pricing__header {
    text-align: center;
    margin-bottom: 3rem;
}
.tut-pricing__title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 .75rem;
}
.tut-pricing__subtitle {
    color: rgba(255,255,255,.55);
    font-size: 1.05rem;
    margin: 0;
}

/* Alert errore */
.tut-pricing__alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .85rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}
.tut-pricing__alert--error {
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.25);
    color: #ef4444;
}

/* Plan cards grid */
.tut-pricing__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 380px));
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}
@media (max-width: 767.98px) {
    .tut-pricing__cards { grid-template-columns: 1fr; }
    .tut-pricing__title { font-size: 1.6rem; }
}

/* Plan card */
.tut-plan-card {
    background: var(--st-dark-card, #111);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    transition: border-color .25s, box-shadow .25s;
}
.tut-plan-card:hover {
    border-color: rgba(0,255,157,.25);
    box-shadow: 0 8px 32px rgba(0,255,157,.08);
}
.tut-plan-card--featured {
    border-color: rgba(0,255,157,.35);
    background: linear-gradient(160deg, #111 60%, rgba(0,255,157,.04) 100%);
}
.tut-plan-card--featured:hover {
    border-color: var(--st-primary, #00ff9d);
    box-shadow: 0 8px 40px rgba(0,255,157,.18);
}

/* Badge "consigliato" */
.tut-plan-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,255,157,.12);
    color: var(--st-primary, #00ff9d);
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: -.5rem;
}

/* Head */
.tut-plan-card__head { display: flex; flex-direction: column; gap: .5rem; }
.tut-plan-card__name {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin: 0;
}
.tut-plan-card__price-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.tut-plan-card__price {
    font-size: 2.75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.tut-plan-card__interval {
    color: rgba(255,255,255,.45);
    font-size: .88rem;
}
.tut-plan-card__desc {
    color: rgba(255,255,255,.5);
    font-size: .84rem;
    margin: 0;
}

/* Feature list */
.tut-plan-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: 1;
}
.tut-plan-card__features li {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.tut-plan-card__features li i {
    color: var(--st-primary, #00ff9d);
    font-size: .75rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* Footer */
.tut-plan-card__footer {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.tut-plan-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: .85rem;
    border-radius: 10px;
    font-size: .92rem;
    font-weight: 700;
    text-decoration: none;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.8);
    border: 1.5px solid rgba(255,255,255,.1);}

/* ============================================================
   CLUSTER SECTION HUB — raggruppamento visivo per /tutorial/{section}
   ============================================================ */

.tut-clusters { padding-top: 1rem; }

.tut-cluster__cover {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cl-border);
    border-radius: 16px;
    background: var(--cl-bg);
    padding: 2rem 2rem 2rem 1.5rem;
    margin-bottom: .5rem;
}
.tut-cluster__cover-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.tut-cluster__cover-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--cl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tut-cluster__cover-icon i {
    font-size: 1.8rem;
    color: var(--cl-color);
}
.tut-cluster__cover-text { flex: 1; min-width: 180px; }
.tut-cluster__cover-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--st-text-primary);
    line-height: 1.2;
}
.tut-cluster__cover-desc {
    font-size: .93rem;
    color: var(--st-text-secondary);
    margin: 0;
    max-width: 600px;
}
.tut-cluster__cover-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}
.tut-cluster__count {
    font-size: .82rem;
    color: var(--st-text-secondary);
    font-variant-numeric: tabular-nums;
}
.tut-cluster__cover-deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Card aggiornate */
.tut-card__num {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--st-text-secondary);
    letter-spacing: .04em;
}
.tut-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.tut-card__cta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--st-primary);
    opacity: 0;
    transition: opacity .2s;
}
.tut-card:hover .tut-card__cta { opacity: 1; }

.tut-card--cluster-1:hover { border-color: #00ff9d; box-shadow: 0 8px 30px rgba(0,255,157,.1); }
.tut-card--cluster-2:hover { border-color: #a5b4fc; box-shadow: 0 8px 30px rgba(99,102,241,.1); }
.tut-card--cluster-3:hover { border-color: #fcd34d; box-shadow: 0 8px 30px rgba(245,158,11,.1); }

@media (max-width: 576px) {
    .tut-cluster__cover-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tut-cluster__cover-meta  { flex-direction: row; align-items: center; width: 100%; }
    .tut-cluster__cover-deco  { display: none; }
}
    transition: background .2s, border-color .2s, color .2s;
}
.tut-plan-card__cta:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    text-decoration: none;
}
.tut-plan-card__cta--featured {
    background: var(--st-gradient-primary, linear-gradient(135deg, #00ff9d, #00cc7d));
    color: #0a0a0a;
    border-color: transparent;
}
.tut-plan-card__cta--featured:hover {
    box-shadow: 0 4px 20px rgba(0,255,157,.35);
    color: #0a0a0a;
}
.tut-plan-card__note {
    text-align: center;
    font-size: .75rem;
    color: rgba(255,255,255,.35);
    margin: 0;
}
.tut-plan-card__note i { margin-right: 4px; }

/* Trust bar */
.tut-pricing__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.35);
    font-size: .82rem;
}
.tut-pricing__trust i { margin-right: 5px; }

/* ============================================================
   ACCOUNT — success banner
   ============================================================ */
.tut-account__success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0,255,157,.1);
    border: 1px solid rgba(0,255,157,.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: var(--st-primary, #00ff9d);
    font-weight: 600;
    font-size: .92rem;
}
.tut-account__success i { font-size: 1.1rem; }



/* ============================================================
   CLUSTER SECTION HUB � Stili per la pagina /tutorial/{section}
   con raggruppamento in cluster visivi
   ============================================================ */

/* Container principale cluster */
.tut-clusters { padding-top: 1rem; }

/* Wrapper singolo cluster */
.tut-cluster { }

/* Cover del cluster */
.tut-cluster__cover {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--cl-border);
    border-radius: 16px;
    background: var(--cl-bg);
    padding: 2rem 2rem 2rem 1.5rem;
    margin-bottom: .5rem;
}

.tut-cluster__cover-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Icona cluster */
.tut-cluster__cover-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--cl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tut-cluster__cover-icon i {
    font-size: 1.8rem;
    color: var(--cl-color);
}

/* Testo cover */
.tut-cluster__cover-text { flex: 1; min-width: 180px; }
.tut-cluster__cover-title {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .35rem;
    color: var(--st-text-primary);
    line-height: 1.2;
}
.tut-cluster__cover-desc {
    font-size: .93rem;
    color: var(--st-text-secondary);
    margin: 0;
    max-width: 600px;
}

/* Meta cover (badge + conteggio) */
.tut-cluster__cover-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    flex-shrink: 0;
}
.tut-cluster__count {
    font-size: .82rem;
    color: var(--st-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Decorazione SVG */
.tut-cluster__cover-deco {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Card tutorial aggiornata */
.tut-card__num {
    font-size: .72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--st-text-secondary);
    letter-spacing: .04em;
}
.tut-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.tut-card__cta {
    font-size: .82rem;
    font-weight: 600;
    color: var(--st-primary);
    opacity: 0;
    transition: opacity .2s;
}
.tut-card:hover .tut-card__cta { opacity: 1; }

/* Accent border-top per cluster */
.tut-card--cluster-1:hover { border-color: #00ff9d; box-shadow: 0 8px 30px rgba(0,255,157,.1); }
.tut-card--cluster-2:hover { border-color: #a5b4fc; box-shadow: 0 8px 30px rgba(99,102,241,.1); }
.tut-card--cluster-3:hover { border-color: #fcd34d; box-shadow: 0 8px 30px rgba(245,158,11,.1); }

/* Responsive */
@media (max-width: 576px) {
    .tut-cluster__cover-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .tut-cluster__cover-meta { flex-direction: row; align-items: center; width: 100%; }
    .tut-cluster__cover-deco { display: none; }
}