/* ==========================================================================
   Tema Anonymate (stile anthropic.com), condiviso dalle pagine collegate
   dal footer della home Anonymate. Va caricato DOPO i CSS della pagina.
   Titoli e interfaccia: Inter Tight. Testi: Newsreader.
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap");

:root {
    --anon-cream: #f3f0e8;
    --anon-card: #e8e1d2;
    --anon-ink: #090d11;
    --anon-text: #26241f;
    --anon-muted: #5d5b55;
    --anon-line: #cecac0;
    --anon-orange: #d95f32;
    --anon-orange-deep: #b94723;
    --anon-sans: "Inter Tight", Arial, Helvetica, sans-serif;
    --anon-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --anon-squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C88 0 100 12 100 50S88 100 50 100 0 88 0 50 12 0 50 0Z'/%3E%3C/svg%3E");
}

.anon-legacy-hidden { display: none !important; }

html body.anon-themed {
    background: var(--anon-cream) !important;
    color: var(--anon-text);
    font-family: var(--anon-sans);
}

/* il banner V6 scorre con la pagina, come nella home Anonymate */
body.anon-themed .qsg-promo-banner { position: relative; inset: auto; }

/* ---------------- header ---------------- */
/* article-page.css nasconde ogni header figlio diretto del body: il nostro deve restare visibile */
body.anonymate-article > header.anon-header { display: flex !important; }

.anon-header {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 23px max(5%, calc((100vw - 1224px) / 2));
    background: var(--anon-cream);
    color: var(--anon-ink);
    font-family: var(--anon-sans);
}

.anon-brand {
    color: var(--anon-ink) !important;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.03em;
    text-decoration: none !important;
    line-height: 1;
}

.anon-brand small {
    display: block;
    margin-top: 6px;
    color: var(--anon-muted);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .14em;
}

.anon-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.anon-nav-link { color: var(--anon-ink) !important; text-decoration: none !important; }
.anon-nav-link:hover { color: var(--anon-orange-deep) !important; }

.anon-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--anon-ink);
    color: var(--anon-cream) !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}

.anon-pill:hover { background: var(--anon-orange); color: var(--anon-ink) !important; }

.anon-header a:focus-visible,
.anon-footer a:focus-visible { outline: 3px solid var(--anon-orange); outline-offset: 4px; }

@media (max-width: 720px) {
    .anon-header { padding: 20px 6%; }
    .anon-nav { gap: 12px; }
    .anon-nav-link { display: none; }
    .anon-pill { padding: 10px 14px; gap: 10px; font-size: 13px; white-space: nowrap; }
    .anon-brand { font-size: 21px; }
}

/* ---------------- footer ---------------- */
html body.anon-themed footer.anon-footer {
    max-width: none;
    margin: 0;
    border: 0;
    background: var(--anon-ink);
    color: #c0beb8;
    padding: 26px max(5%, calc((100vw - 1224px) / 2)) 30px;
    font: 14px/1.6 var(--anon-sans);
    text-align: left;
}

.anon-footer-inner { max-width: 1224px; margin: auto; }

.anon-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding: 30px 0;
}

html body.anon-themed .anon-footer p,
html body.anon-themed .anon-footer li {
    color: #c0beb8;
    font-family: var(--anon-sans);
    font-size: 14px;
    line-height: 1.6;
    text-align: left;
}
html body.anon-themed .anon-footer ul { display: block; text-align: left; justify-items: start; }
html body.anon-themed .anon-footer a { color: #c0beb8; text-decoration: none; }
html body.anon-themed .anon-footer a:hover { color: var(--anon-orange); }

.anon-footer h4 { margin: 0 0 18px; color: var(--anon-cream); font-size: 14px; font-weight: 500; }
.anon-footer ul { list-style: none; margin: 0; padding: 0; }
.anon-footer li { margin: 0 0 8px; }
.anon-footer a { color: #c0beb8; text-decoration: none; }
.anon-footer a:hover { color: var(--anon-orange); }
html body.anon-themed .anon-footer .anon-footer-logo { color: var(--anon-orange); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
html body.anon-themed .anon-footer .anon-footer-tag { margin: 5px 0 0; font-size: .7rem; font-weight: 600; text-transform: uppercase; }
.anon-footer-text { margin: 15px 0 0; line-height: 1.6; }
html body.anon-themed .anon-footer .anon-footer-mail { color: #e7744d; font-weight: 500; }
.anon-footer-sep { border: 0; border-top: 1px solid #35383b; margin: 25px 0; }
html body.anon-themed .anon-footer .anon-copyright { font-size: 11px; color: #a6a5a0; }

.anon-socials { display: flex; gap: 12px; margin-top: 20px; }
.anon-social { display: block; width: 46px; height: 46px; border-radius: 14px; transition: transform .25s ease; }
.anon-squircle {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--brand);
    color: var(--brand-ink, #fff);
    -webkit-mask: var(--anon-squircle) center / 100% 100% no-repeat;
    mask: var(--anon-squircle) center / 100% 100% no-repeat;
}
.anon-squircle svg { width: 21px; height: 21px; fill: currentColor; }
.anon-social:hover { transform: translateY(-3px) scale(1.04); }
.anon-social[data-social="discord"] { --brand: #5865f2; }
.anon-social[data-social="x"] { --brand: #fff; --brand-ink: #000; }
.anon-social[data-social="instagram"] { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

@media (max-width: 720px) {
    html body.anon-themed footer.anon-footer { padding: 25px 7%; }
    .anon-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width: 420px) { .anon-footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Pagine legali (article-page.css): Terms, Privacy, Minors, Guidelines,
   P2P Disclaimer, App Info. Lettura a sinistra come le pagine di Anthropic.
   ========================================================================== */
html body.anonymate-article.anon-themed {
    --article-bg: var(--anon-cream);
    --article-text: var(--anon-ink);
    --article-muted: var(--anon-muted);
    --article-soft: rgba(9, 13, 17, .12);
    --article-accent: var(--anon-orange-deep);
    line-height: 1.65;
}

html body.anonymate-article.anon-themed .container {
    width: min(100% - 12%, 760px);
    max-width: 760px;
}

html body.anonymate-article.anon-themed .container:first-of-type { padding-top: clamp(56px, 8vw, 104px); }

html body.anonymate-article.anon-themed .container > header {
    justify-items: start;
    gap: 14px;
    margin: 0 0 clamp(40px, 6vw, 64px);
    padding-bottom: clamp(28px, 4vw, 40px);
    border-bottom: 1px solid var(--anon-line);
    text-align: left;
}

html body.anonymate-article.anon-themed .container > header::before {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--anon-ink);
    font: 600 11px var(--anon-sans);
    letter-spacing: .16em;
}

html body.anonymate-article.anon-themed h1 {
    margin: 0;
    color: var(--anon-ink);
    font: 500 clamp(40px, 6vw, 72px) / 1.04 var(--anon-sans);
    letter-spacing: -.025em;
    text-align: left;
}

html body.anonymate-article.anon-themed .last-update,
html body.anonymate-article.anon-themed .lead {
    margin: 0;
    color: var(--anon-muted);
    font: 400 15px/1.5 var(--anon-sans);
    text-align: left;
}

html body.anonymate-article.anon-themed .last-update span { color: var(--anon-ink); font-weight: 500; }

html body.anonymate-article.anon-themed main {
    max-width: 760px;
    gap: clamp(30px, 4vw, 44px);
    text-align: left;
}

html body.anonymate-article.anon-themed main section,
html body.anonymate-article.anon-themed .intro-text {
    text-align: left;
}

html body.anonymate-article.anon-themed .container h2 {
    margin: 0 0 14px;
    color: var(--anon-ink);
    font: 500 clamp(24px, 2.6vw, 30px) / 1.2 var(--anon-sans);
    letter-spacing: -.015em;
    text-align: left;
}

html body.anonymate-article.anon-themed .container h3 {
    margin: 22px 0 8px;
    color: var(--anon-ink);
    font: 500 20px / 1.3 var(--anon-sans);
    text-align: left;
}

html body.anonymate-article.anon-themed .container p,
html body.anonymate-article.anon-themed .container li,
html body.anonymate-article.anon-themed .container td,
html body.anonymate-article.anon-themed .intro-text {
    color: var(--anon-text);
    font-family: var(--anon-serif);
    font-size: 18px;
    line-height: 1.65;
    text-align: left;
}

html body.anonymate-article.anon-themed .container ul,
html body.anonymate-article.anon-themed .container ol {
    display: block;
    justify-items: start;
    margin: 8px 0 16px;
    padding-left: 1.3em;
    text-align: left;
}

html body.anonymate-article.anon-themed .container li { margin: 6px 0; }
html body.anonymate-article.anon-themed .container li::marker { color: var(--anon-orange-deep); }

html body.anonymate-article.anon-themed .container strong,
html body.anonymate-article.anon-themed .container b { color: var(--anon-ink); font-weight: 500; }

html body.anonymate-article.anon-themed main a,
html body.anonymate-article.anon-themed .intro-text a {
    color: var(--anon-orange-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* box, note e riquadri: carta beige al posto dei pannelli scuri */
html body.anonymate-article.anon-themed .note,
html body.anonymate-article.anon-themed .warning,
html body.anonymate-article.anon-themed .warning-note,
html body.anonymate-article.anon-themed .awareness-box,
html body.anonymate-article.anon-themed .disclaimer-box,
html body.anonymate-article.anon-themed .contact-box,
html body.anonymate-article.anon-themed .data-highlight {
    max-width: none;
    margin: 16px 0;
    padding: 20px 22px;
    border: 0;
    border-left: 3px solid var(--anon-orange);
    border-radius: 0 12px 12px 0;
    background: var(--anon-card);
    box-shadow: none;
    color: var(--anon-text);
    text-align: left;
}

html body.anonymate-article.anon-themed .label { color: var(--anon-muted); font-family: var(--anon-sans); }
html body.anonymate-article.anon-themed .value { color: var(--anon-ink); }

html body.anonymate-article.anon-themed .container table,
html body.anonymate-article.anon-themed .info-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    box-shadow: none;
}

html body.anonymate-article.anon-themed .container th,
html body.anonymate-article.anon-themed .container td {
    padding: 12px 10px;
    border: 0;
    border-bottom: 1px solid var(--anon-line);
    background: transparent;
    color: var(--anon-text);
    text-align: left;
}

html body.anonymate-article.anon-themed .container th { color: var(--anon-ink); font: 500 14px var(--anon-sans); }

/* indice flottante: pillola nera, come i bottoni del tema */
html body.anonymate-article.anon-themed .toc-pill,
html body.anonymate-article.anon-themed .toc-panel {
    background: var(--anon-ink);
    color: var(--anon-cream);
    border-color: rgba(243, 240, 232, .16);
    font-family: var(--anon-sans);
}

/* ==========================================================================
   Supporto (support-page.css)
   ========================================================================== */
html body.support-page.anon-themed {
    --support-bg: var(--anon-cream);
    --support-surface: #ece6d9;
    --support-surface-2: var(--anon-card);
    --support-border: rgba(9, 13, 17, .14);
    --support-border-strong: rgba(9, 13, 17, .24);
    --support-text: var(--anon-ink);
    --support-muted: var(--anon-muted);
    --support-orange: var(--anon-orange-deep);
    --support-orange-bright: var(--anon-orange);
    background: var(--anon-cream) !important;
}

html body.support-page.anon-themed .support-hero h1,
html body.support-page.anon-themed h2,
html body.support-page.anon-themed h3 {
    color: var(--anon-ink);
    font-family: var(--anon-sans);
    font-weight: 500;
    letter-spacing: -.02em;
}

html body.support-page.anon-themed .support-hero p,
html body.support-page.anon-themed .support-workflow-heading p {
    font-family: var(--anon-serif);
    font-size: 18px;
}

/* il vecchio logo "Anonymate" dell'hero faceva da header: ora c'è quello condiviso */
html body.support-page.anon-themed .support-brand { display: none; }

html body.support-page.anon-themed .support-card .form-input,
html body.support-page.anon-themed .support-card .form-textarea,
html body.support-page.anon-themed .support-card select,
html body.support-page.anon-themed input,
html body.support-page.anon-themed select,
html body.support-page.anon-themed textarea {
    background: #faf8f3;
    color: var(--anon-ink);
    border-color: rgba(9, 13, 17, .18);
}

html body.support-page.anon-themed .support-card .form-input::placeholder,
html body.support-page.anon-themed .support-card .form-textarea::placeholder,
html body.support-page.anon-themed input::placeholder,
html body.support-page.anon-themed textarea::placeholder { color: #8a867d; }

/* ==========================================================================
   What's New (Changelog): variabili della pagina rimappate sul crema
   ========================================================================== */
html body.anon-themed.anon-changelog {
    --bg: var(--anon-cream);
    --panel: var(--anon-card);
    --panel-2: #ece6d9;
    --text: var(--anon-ink);
    --muted: var(--anon-muted);
    --faint: #8a867d;
    --line: rgba(9, 13, 17, .12);
    --line-strong: rgba(9, 13, 17, .22);
    --orange: var(--anon-orange);
    --orange-deep: var(--anon-orange-deep);
    --orange-soft: rgba(217, 95, 50, .12);
    --orange-line: rgba(217, 95, 50, .38);
    font-family: var(--anon-sans);
}

html body.anon-themed.anon-changelog h1,
html body.anon-themed.anon-changelog h2,
html body.anon-themed.anon-changelog h3 {
    font-family: var(--anon-sans);
    font-weight: 500;
    letter-spacing: -.02em;
}

html body.anon-themed.anon-changelog p { font-family: var(--anon-serif); }

/* card della release in arrivo (colore scuro scritto fisso nella pagina) */
html body.anon-themed.anon-changelog .release.is-next .item,
html body.anon-themed.anon-changelog .sub-label { background: var(--anon-card); }

/* ==========================================================================
   Anonymate Premium: variabili della pagina rimappate sul crema
   ========================================================================== */
html body.anon-themed.anon-premium {
    --black: var(--anon-cream);
    --dark: var(--anon-card);
    --dark2: #ece6d9;
    --dark3: #ddd4c2;
    --dark4: #cfc5b1;
    --white: var(--anon-ink);
    --muted: var(--anon-muted);
    --border: rgba(9, 13, 17, .12);
    --rust: var(--anon-orange-deep);
    --rust-light: var(--anon-orange);
    font-family: var(--anon-sans);
}

html body.anon-themed.anon-premium h1,
html body.anon-themed.anon-premium h2,
html body.anon-themed.anon-premium h3 {
    font-family: var(--anon-sans);
    font-weight: 500;
    letter-spacing: -.02em;
}

html body.anon-themed.anon-premium p { font-family: var(--anon-serif); }

@media (prefers-reduced-motion: reduce) {
    .anon-social, .anon-pill { transition: none; }
}