/*
Theme Name: Simbolario
Theme URI: https://simbolario.com/
Description: Tema leggero per un sito di simboli, caratteri e nickname. Nessuna dipendenza esterna.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simbolario
Tags: blog, one-column, two-columns, custom-menu, translation-ready, responsive
*/

/* ==========================================================================
   1 token · 2 reset · 3 layout · 4 header · 5 footer · 6 componenti
   7 home · 8 elenco · 9 articolo · 10 generatore · 11 responsive
   ========================================================================== */

/* 1. TOKEN ---------------------------------------------------------------- */
:root{
  --green:#17864a;
  --green-dark:#0f6337;
  --green-soft:#eef7f1;
  --red:#e14640;
  --red-dark:#c9372f;
  --yellow:#f0b429;
  --blue:#3b5aa6;
  --violet:#6659d6;
  --pink:#c9436a;

  --ink:#26282b;
  --ink-2:#3c4146;
  --ink-3:#4a4f55;
  --muted:#6f7378;
  --muted-2:#8b9096;
  --muted-3:#9aa0a6;

  --bg:#fff;
  --bg-soft:#fbfbf8;
  --bg-cream:#fdf9f2;
  --surface:#fff;
  --surface-2:#f4f4f1;
  --surface-3:#f4f8f5;
  --line:#f0eee9;
  --line-2:#eceae4;
  --line-3:#e0ece3;

  --pad:clamp(15px,3vw,28px);
  --wrap:1240px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:24px;
  --header-h:69px;
  --shadow-sm:0 12px 26px rgba(38,40,43,.09);
  --shadow-md:0 18px 44px rgba(38,40,43,.14);
  --shadow-lg:0 26px 60px rgba(38,40,43,.18);
  --font:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"]{
  --green:#4cb87d;
  --green-dark:#6cc994;
  --green-soft:#1c2a22;
  --red:#ec6a63;
  --red-dark:#f0837d;
  --yellow:#e5b755;
  --blue:#7d95d6;
  --violet:#9b90e6;
  --pink:#e2799a;

  --ink:#e9ebed;
  --ink-2:#d8dcdf;
  --ink-3:#c6cbd0;
  --muted:#9ba2a9;
  --muted-2:#8a9197;
  --muted-3:#7a8188;

  --bg:#15181b;
  --bg-soft:#1a1e21;
  --bg-cream:#181c1f;
  --surface:#1e2327;
  --surface-2:#262c31;
  --surface-3:#232a26;
  --line:#2a3035;
  --line-2:#333a41;
  --line-3:#31413a;

  --shadow-sm:0 12px 26px rgba(0,0,0,.4);
  --shadow-md:0 18px 44px rgba(0,0,0,.5);
  --shadow-lg:0 26px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* Nunito variabile, servito dal tema: nessuna richiesta a domini esterni. */
@font-face{
  font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/n-lat.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Nunito";font-style:normal;font-weight:400 900;font-display:swap;
  src:url(assets/fonts/n-lat-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 2. RESET -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-weight:600;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark)}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ol,ul,figure,blockquote,pre{margin:0}
ol,ul{padding-left:22px}
table{border-collapse:collapse;width:100%}
::selection{background:#cdeeda;color:#26282b}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--green);color:#fff;border-radius:0 0 var(--r-sm) 0;font-weight:800}
.skip-link:focus{left:0;color:#fff}
[hidden]{display:none!important}

/* 3. LAYOUT ------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(26px,4vw,56px)}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.grow{flex:1 1 auto;min-width:0}
.spacer{flex:1}
.cols{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px)}
.cols > .main{flex:1 1 520px;min-width:0}
.cols > .side{flex:1 1 250px;min-width:0;display:flex;flex-direction:column;gap:18px}

/* 4. HEADER ------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:12px;min-width:0;padding-block:12px}
.logo{display:flex;flex-direction:column;gap:2px;flex:none}
.logo__word{font-size:clamp(21px,2.4vw,27px);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink)}
.logo__word b{font-weight:900;color:var(--green)}
.logo__word i{font-style:normal;color:var(--red)}
.logo__tag{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-3)}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px;min-width:0}
.nav ul{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav li{position:relative}
.nav__link{position:relative;display:block;padding:8px 9px;font-size:14.5px;font-weight:700;color:var(--muted);white-space:nowrap;background:none;border:0;font-family:inherit}
.nav__link:hover{color:var(--green)}
.nav .current-menu-item > .nav__link,.nav .current_page_item > .nav__link,.nav__link.is-active{color:var(--ink);font-weight:800}
.nav .current-menu-item > .nav__link::after,.nav .current_page_item > .nav__link::after,.nav__link.is-active::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:34px;height:4px;transform:translateX(-50%);border-radius:2px;
  background:linear-gradient(90deg,var(--green) 0 46%,transparent 46% 54%,var(--red) 54% 100%);
}
.nav .sub-menu{position:absolute;top:40px;left:0;display:none;min-width:190px;padding:7px;margin:0;list-style:none;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:5}
.nav li:hover > .sub-menu,.nav li:focus-within > .sub-menu{display:block}
.nav .sub-menu .nav__link{padding:8px 10px;border-radius:9px;font-size:13.5px}
.nav .sub-menu .nav__link:hover{background:var(--surface-3)}
.nav .sub-menu .nav__link::after{display:none}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;background:none;border:0;border-radius:50%;color:var(--muted-2)}
.icon-btn:hover{background:var(--surface-2);color:var(--yellow)}
.burger{width:36px;height:36px;display:none;place-items:center;background:var(--surface-2);border:0;border-radius:var(--r-sm);color:var(--ink)}
.lang{position:relative;flex:none}
.lang__btn{display:flex;align-items:center;gap:6px;padding:7px 8px;background:none;border:0;border-radius:var(--r-sm)}
.lang__btn:hover{background:var(--surface-2)}
.lang__code{font-size:13.5px;font-weight:800;color:var(--ink-2)}
.flag{width:21px;height:15px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.07);background:linear-gradient(90deg,#17864a 33.3%,#fff 33.3% 66.6%,#e14640 66.6%)}
.flag--sm{width:18px;height:12px}
.nav__dd{display:flex;align-items:center}
.dropdown--nav{left:0;right:auto;top:44px;min-width:212px}
.dropdown{position:absolute;top:42px;right:0;min-width:150px;padding:7px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-md);z-index:5;animation:pop .16s ease both}
.dropdown__item{display:flex;width:100%;align-items:center;gap:9px;padding:8px 10px;background:none;border:0;border-radius:9px;font-size:13.5px;font-weight:700;color:var(--ink-2);text-align:left}
.dropdown__item:hover{background:var(--surface-3)}
.btn-fav{flex:none;display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--surface);border:1.6px solid var(--green);border-radius:22px;color:var(--green);font-size:13.5px;font-weight:800;white-space:nowrap}
.btn-fav:hover{background:var(--green-soft)}
.badge-count{min-width:19px;height:19px;padding:0 5px;display:none;place-items:center;background:var(--green);color:#fff;border-radius:10px;font-size:11px;font-weight:900}
.badge-count.is-on{display:grid}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mobile-nav.is-open{display:block;animation:slide .18s ease both}
.mobile-nav__list{display:flex;flex-direction:column;gap:2px;padding-block:10px 16px;margin:0;list-style:none}
.mobile-nav__list .sub-menu{list-style:none;margin:0;padding-left:14px}
.mobile-nav__link{display:block;padding:13px 10px;border-radius:var(--r-sm);font-size:15px;font-weight:700;color:var(--muted)}
.mobile-nav__link:hover{background:var(--surface-3)}
.mobile-nav .current-menu-item > .mobile-nav__link{color:var(--green)}
.fav-panel{position:absolute;top:calc(100% + 8px);right:var(--pad);z-index:70;width:min(320px,calc(100vw - 30px));max-height:60vh;overflow:auto;padding:18px;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);animation:pop .18s ease both}
.fav-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:15px;font-weight:900}
.fav-panel__hint{font-size:13px;color:var(--muted-2);line-height:1.6}
.fav-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg-soft);border-radius:12px}
.fav-row__val{flex:1;min-width:0;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.close-x{width:26px;height:26px;display:grid;place-items:center;background:var(--surface-2);border:0;border-radius:50%;color:var(--muted);font-size:15px;line-height:1}

/* 5. FOOTER ------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-soft)}
.site-footer__grid{display:flex;flex-wrap:wrap;gap:32px;padding-block:44px 22px}
.site-footer__brand{flex:1 1 240px;min-width:0}
.site-footer__tag{margin:14px 0 18px;font-size:13px;font-weight:700;color:var(--muted)}
.site-footer__col{flex:1 1 140px;min-width:0}
.site-footer__made{flex:1 1 200px;min-width:0;display:flex;align-items:center;gap:14px}
.col-title{display:inline-block;font-size:14px;font-weight:900;padding-bottom:5px;border-bottom:2.4px solid var(--green)}
.col-title--red{border-color:var(--red)}
.col-title--yellow{border-color:var(--yellow)}
.col-links{display:flex;flex-direction:column;gap:11px;margin-top:16px;padding:0;list-style:none}
.col-links a{font-size:13px;font-weight:700;color:var(--muted)}
.col-links a:hover{color:var(--green)}
.socials{display:flex;gap:10px;margin-top:4px}
.social{width:30px;height:30px;display:grid;place-items:center;border-radius:9px}
.social--ig{background:linear-gradient(135deg,#f7a34b,#e2456f 55%,#a03ab0)}
.social--tt{background:#26282b}
.social--yt{background:#e14640}
.social--pt{background:#c9372f}
.made__a{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:900;white-space:nowrap}
.made__b{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--muted-2)}
.copyright{border-top:1px solid var(--line)}
.copyright p{padding-block:14px;font-size:12px;font-weight:700;color:var(--muted-3)}

/* 6. COMPONENTI COMUNI -------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border:0;border-radius:13px;font-size:14.5px;font-weight:800;white-space:nowrap}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover{background:var(--green-dark);color:#fff}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark);color:#fff}
.btn--ghost{background:var(--surface);border:1.6px solid var(--green);color:var(--green)}
.btn--ghost:hover{background:var(--green-soft)}
.btn--sm{padding:10px 16px;font-size:13px;border-radius:11px}
.btn[disabled]{opacity:.55;cursor:default}
.field{width:100%;min-width:0;padding:15px 18px;background:var(--surface);border:1.6px solid var(--line-2);border-radius:13px;font-size:15px;font-weight:600;color:var(--ink);outline:none}
.field::placeholder{color:var(--muted-3);font-weight:600}
.field:focus{border-color:var(--green)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1.4px solid var(--line-2);border-radius:20px;background:var(--surface);font-size:12.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.chip:hover{filter:brightness(.97)}
.chip.is-active{background:var(--green);border-color:var(--green);color:#fff}
.chip--green{background:var(--green-soft);border-color:var(--line-3);color:var(--green)}
.chip--pink{background:#fdf2f5;border-color:#f8e3e9;color:var(--pink)}
.chip--yellow{background:#fdf9ee;border-color:#f6eed9;color:#b8860f}
.chip--blue{background:#f3f6fd;border-color:#e4eaf8;color:var(--blue)}
.chip--violet{background:#f7f4fd;border-color:#ebe5f9;color:var(--violet)}
.chip--orange{background:#fdf3f1;border-color:#f8e2dc;color:#c9502f}
.tag{padding:5px 11px;border-radius:14px;font-size:11.5px;font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.tag--green{background:var(--green-soft);color:var(--green)}
.tag--red{background:var(--red);color:#fff}
.tag--yellow{background:#fdf9ee;color:#b8860f}
.tag--pink{background:#fdf2f5;color:var(--pink)}
.tag--blue{background:#f3f6fd;color:var(--blue)}
.tag--violet{background:#f7f4fd;color:var(--violet)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.card--soft{background:var(--bg-soft)}
.card--pad{padding:clamp(16px,2.4vw,22px)}
.panel{padding:20px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.panel--plain{background:var(--surface)}
.panel--cta{background:linear-gradient(150deg,var(--green-soft),var(--bg-cream));border-color:var(--line-3)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--muted-3)}
.crumbs a{color:var(--muted-3)}
.crumbs a:hover{color:var(--green)}
.crumbs span[aria-current]{color:var(--green)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12.5px;font-weight:700;color:var(--muted-2)}
.avatar{width:34px;height:34px;flex:none;display:grid;place-items:center;background:var(--green);border-radius:50%;color:#fff;font-size:12.5px;font-weight:900;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar--lg{width:56px;height:56px;font-size:18px}
.avatar--sm{width:26px;height:26px;font-size:11px}
.toast{position:fixed;left:50%;bottom:34px;z-index:95;transform:translate(-50%,16px);opacity:0;pointer-events:none;padding:12px 20px;background:#26282b;border-radius:var(--r-md);color:#fff;font-size:13.5px;font-weight:800;box-shadow:0 18px 40px rgba(38,40,43,.28);max-width:calc(100vw - 30px);text-align:center;transition:opacity .2s ease,transform .2s ease}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.to-top{position:fixed;right:var(--pad);bottom:22px;z-index:65;width:42px;height:42px;display:grid;place-items:center;background:var(--green);border:0;border-radius:12px;box-shadow:0 10px 26px rgba(23,134,74,.32);opacity:0;visibility:hidden;transition:opacity .2s ease}
.to-top.is-on{opacity:1;visibility:visible}
.to-top:hover{background:var(--green-dark)}
.sym-btn{width:42px;height:42px;display:grid;place-items:center;background:var(--bg-soft);border:1.4px solid var(--line);border-radius:12px;font-size:19px;color:var(--ink-2)}
.sym-btn:hover{border-color:var(--green);color:var(--green)}

/* 7. HOME --------------------------------------------------------------- */
.hero{position:relative;background:linear-gradient(180deg,var(--bg-cream) 0%,var(--bg-soft) 62%,var(--bg) 100%);overflow:hidden}
.hero__inner{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,24px);align-items:flex-start;padding-block:clamp(26px,4vw,56px) 8px}
.hero__copy{flex:1 1 340px;min-width:0;position:relative;z-index:3;padding-top:14px}
.hero__art{flex:1 1 420px;min-width:0;position:relative;z-index:1;margin-right:clamp(-40px,-3vw,0px)}
.hero h1{font-size:clamp(31px,6.2vw,60px);line-height:1.04;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.hero h1 .g{color:var(--green)}
.hero h1 .r{color:var(--red)}
.hero__lead{margin-top:22px;max-width:400px;font-size:clamp(15px,1.8vw,17px);line-height:1.6;color:var(--muted)}
.hero__squiggle{margin-top:18px}
.trust{display:flex;flex-wrap:wrap;gap:26px;margin-top:30px}
.trust__item{display:flex;align-items:center;gap:9px}
.trust__ico{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%}
.trust__ico--green{background:#e9f6ee}
.trust__ico--red{background:#fdeeee}
.trust__ico--yellow{background:#fdf4e2}
.trust__txt{display:flex;flex-direction:column}
.trust__txt b{font-size:13px;font-weight:800}
.trust__txt span{font-size:12px;font-weight:600;color:var(--muted-2)}
.trust__item--green b{color:var(--green)}
.trust__item--red b{color:var(--red)}
.trust__item--yellow b{color:#e0a92b}
.searchbox{position:relative;z-index:5;max-width:560px;margin-top:-56px;padding:clamp(16px,2.4vw,22px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.searchbox__form{display:flex;flex-wrap:wrap;gap:10px}
.searchbox__form .field{flex:1 1 190px}
.searchbox__form .btn{flex:1 1 150px}
.searchbox__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,2vw,22px)}
.feature{padding:30px 26px 34px;border:1px solid;border-radius:22px;text-align:center}
.feature__ico{width:64px;height:64px;margin:0 auto 18px;display:grid;place-items:center;border-radius:20px}
.feature h3{font-size:16.5px;font-weight:900}
.feature p{margin-top:10px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.feature--green{background:#f2f8f4;border-color:#e2efe7}
.feature--green .feature__ico{background:#e5f2ea}
.feature--red{background:#fdf2f3;border-color:#f8e2e4}
.feature--red .feature__ico{background:#fbe7e8}
.feature--yellow{background:#fdf7ea;border-color:#f7ecd6}
.feature--yellow .feature__ico{background:#fbefd9}
.feature--violet{background:#f4f4fd;border-color:#e7e6f8}
.feature--violet .feature__ico{background:#eae9fb}
.cats{position:relative;padding-block:12px clamp(30px,5vw,64px);overflow:hidden}
.cats__inner{position:relative;z-index:2;max-width:1000px;margin-inline:auto}
.cats__head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px}
.cats__head h2{font-size:clamp(23px,4vw,31px);font-weight:900;letter-spacing:-.02em;text-align:center}
.cats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:clamp(10px,1.6vw,16px)}
.cat{padding:18px 8px 14px;border:1px solid;border-radius:18px;text-align:center;transition:transform .16s ease,box-shadow .16s ease}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.cat svg{margin:0 auto 12px}
.cat span{font-size:12.5px;font-weight:900;color:var(--ink)}
.cat--pink{background:#fdf2f5;border-color:#f8e3e9}
.cat--cream{background:#fbf7f2;border-color:#f2ebe0}
.cat--blue{background:#f3f6fd;border-color:#e4eaf8}
.cat--violet{background:#f7f4fd;border-color:#ebe5f9}
.cat--green{background:#f2f8f5;border-color:#e2efe8}
.cat--rose{background:#fdf2f8;border-color:#f8e3ef}
.cat--yellow{background:#fdfaef;border-color:#f6efdb}
.cat--grey{background:#f7f8fa;border-color:#eaecf0}
.cat--mint{background:#f2f9f4;border-color:#e2f0e7}
.cat--sand{background:#fdf9f0;border-color:#f6eeda}
.deco{position:absolute;pointer-events:none;z-index:1}
.deco--venezia{left:-26px;top:56px;width:min(250px,32vw)}
.deco--limoni{right:-6px;top:16px;width:min(140px,20vw)}
.deco--gelato{right:-22px;top:206px;width:min(160px,22vw)}
.deco--duomo{right:26px;bottom:0;width:min(230px,30vw);opacity:.5}
.doodle{position:absolute;pointer-events:none;z-index:1}
.results{padding:clamp(16px,2.4vw,26px);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl);animation:pop .22s ease both}
.results__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.results__head h2{font-size:22px;font-weight:900}
.results__hint{font-size:13px;font-weight:700;color:var(--muted-2)}
.results__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px}
.res{padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:transform .15s ease,box-shadow .15s ease}
.res:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.res__label{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-3)}
.res__value{margin-top:8px;font-size:20px;line-height:1.35;word-break:break-word}
.res__actions{display:flex;gap:8px;margin-top:14px}
.res__copy{flex:1;padding:8px;background:var(--green-soft);border:0;border-radius:var(--r-sm);color:var(--green);font-size:12.5px;font-weight:800}
.res__copy:hover{filter:brightness(.96)}
.res__fav{width:34px;display:grid;place-items:center;background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-sm);color:var(--muted-3)}
.res__fav:hover{border-color:var(--red)}
.res__fav.is-on{color:var(--red)}
.res__fav.is-on svg{fill:var(--red)}
.homefeed{padding-block:clamp(26px,4vw,52px)}

/* 8. ELENCO / ARCHIVIO -------------------------------------------------- */
.page-head{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-cream),var(--bg))}
.page-head__inner{position:relative;z-index:2;padding-block:clamp(28px,5vw,54px) clamp(22px,3vw,34px)}
.page-head h1{margin-top:14px;font-size:clamp(30px,5.4vw,50px);line-height:1.06;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.page-head h1 .g{color:var(--green)}
.page-head h1 .r{color:var(--red)}
.page-head__lead{margin-top:16px;max-width:520px;font-size:clamp(14.5px,1.7vw,17px);line-height:1.6;color:var(--muted)}
.page-head .deco--limoni{right:-18px;top:10px;opacity:.55;width:min(170px,24vw)}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:640px}
.searchfield{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;padding:13px 16px;background:var(--surface);border:1.6px solid var(--line-2);border-radius:13px}
.searchfield:focus-within{border-color:var(--green)}
.searchfield input{flex:1;min-width:0;border:0;outline:none;background:none;font-size:14.5px;font-weight:700}
.sortbtn{flex:none;display:flex;align-items:center;gap:8px;padding:13px 18px;background:var(--surface);border:1.6px solid var(--line-2);border-radius:13px;font-size:13.5px;font-weight:800;color:var(--ink-2)}
.sortbtn:hover{border-color:var(--green);color:var(--green)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.featured{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,32px);padding:clamp(16px,2.4vw,26px);background:var(--bg-soft);border:1px solid var(--line-3);border-radius:var(--r-xl)}
.featured:hover{border-color:var(--green)}
.featured__art{flex:1 1 260px;min-width:0;position:relative;min-height:200px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(140deg,#e9f5ee,#fdf3ea);overflow:hidden}
.featured__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.featured__glyph{position:relative;font-size:clamp(52px,9vw,78px);line-height:1;color:var(--green)}
.featured__body{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:14px}
.featured h2{font-size:clamp(22px,3.2vw,31px);line-height:1.16;font-weight:900;letter-spacing:-.02em;color:var(--ink);text-wrap:pretty}
.featured p{font-size:clamp(14px,1.6vw,15.5px);line-height:1.62;color:var(--muted);max-width:52ch}
.list-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:6px}
.list-head h2{font-size:clamp(20px,2.6vw,25px);font-weight:900;letter-spacing:-.02em}
.list-head span{font-size:13px;font-weight:700;color:var(--muted-3)}
.post-list{display:flex;flex-direction:column}
.post{display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,20px);padding:clamp(16px,2vw,22px) 4px;border-bottom:1px solid var(--line)}
.post:hover{background:var(--bg-soft)}
.post__thumb{flex:none;width:min(150px,100%);aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--r-md);font-size:38px;line-height:1;overflow:hidden}
.post__thumb img{width:100%;height:100%;object-fit:cover}
.post__body{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:9px}
.post__meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px;font-weight:700;color:var(--muted-3)}
.post__title{font-size:clamp(16.5px,2vw,19.5px);line-height:1.28;font-weight:900;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.post__excerpt{font-size:13.8px;line-height:1.6;color:var(--muted);max-width:60ch}
.post__more{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;color:var(--green)}
.tint--green{background:var(--green-soft);color:var(--green)}
.tint--pink{background:#fdf2f5;color:var(--pink)}
.tint--blue{background:#f3f6fd;color:var(--blue)}
.tint--yellow{background:#fdf9ee;color:#b8860f}
.tint--violet{background:#f7f4fd;color:var(--violet)}
.tint--red{background:#fdf3f2;color:var(--red-dark)}
.empty{padding:40px 20px;margin-top:20px;text-align:center;border:1px dashed var(--line-2);border-radius:18px}
.empty__ico{font-size:34px;line-height:1;color:var(--muted-3)}
.empty p{margin-top:12px;font-size:14px;font-weight:700;color:var(--muted-2)}
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:26px}
.pager .page-numbers{min-width:38px;height:38px;padding:0 12px;display:grid;place-items:center;background:var(--surface);border:1.4px solid var(--line-2);border-radius:11px;font-size:13.5px;font-weight:800;color:var(--ink-2)}
.pager .page-numbers:hover{border-color:var(--green);color:var(--green)}
.pager .page-numbers.current{background:var(--green);border-color:var(--green);color:#fff}
.pager .dots{border-color:transparent}
.toplist{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.toplist a{display:flex;gap:12px}
.toplist a:hover{opacity:.75}
.toplist__n{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--green-soft);border-radius:9px;color:var(--green);font-size:12px;font-weight:900}
.toplist__t{flex:1;min-width:0;font-size:13.5px;line-height:1.42;font-weight:800;color:var(--ink-2)}
.news h3{margin-top:10px;font-size:17px;font-weight:900;letter-spacing:-.015em}
.news p{margin:8px 0 14px;font-size:13px;line-height:1.55;color:var(--muted)}
.news .field{padding:12px 14px;font-size:14px;border-color:var(--line-3);border-radius:11px}
.news__ico{font-size:26px;line-height:1;color:var(--green)}
.symgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}

/* 9. ARTICOLO ----------------------------------------------------------- */
.progress{position:sticky;top:var(--header-h);z-index:55;height:3px;background:var(--line)}
.progress__bar{height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--red))}
.article__head{max-width:760px;margin-top:16px}
.article__head h1{margin-top:16px;font-size:clamp(28px,4.8vw,44px);line-height:1.08;font-weight:900;letter-spacing:-.025em;text-wrap:balance}
.article__lead{margin-top:18px;font-size:clamp(15px,1.9vw,18.5px);line-height:1.6;color:var(--muted);max-width:62ch}
.article__byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:22px;padding-bottom:24px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--muted-2)}
.article__byline > .row{flex-wrap:nowrap}
.byline__name{display:flex;flex-direction:column}
.byline__name b{font-size:13px;font-weight:900;color:var(--ink-2)}
.byline__name span{font-size:11.5px}
.prose h2{margin:26px 0 14px;font-size:clamp(21px,2.8vw,27px);line-height:1.2;font-weight:900;letter-spacing:-.02em;scroll-margin-top:96px}
.prose h3{margin:22px 0 12px;font-size:clamp(17px,2.2vw,21px);line-height:1.25;font-weight:900;letter-spacing:-.015em;scroll-margin-top:96px}
.prose h4{margin:18px 0 10px;font-size:16px;font-weight:900}
.prose > :first-child{margin-top:0}
.prose p{margin:0 0 16px;font-size:clamp(15px,1.7vw,16.8px);line-height:1.78;color:var(--ink-3);max-width:68ch}
.prose strong,.prose b{font-weight:900;color:var(--ink)}
.prose ol,.prose ul{margin:0 0 20px;display:flex;flex-direction:column;gap:12px;max-width:68ch}
.prose li{font-size:clamp(15px,1.7vw,16.8px);line-height:1.7;color:var(--ink-3)}
.prose li > ul,.prose li > ol{margin-top:12px}
.prose img{margin-bottom:22px;border-radius:18px;overflow:hidden}
/* Il figure NON va ritagliato: bordo arrotondato + overflow:hidden tagliavano
   il primo carattere dell'ultima riga della didascalia. Il raggio resta sull'immagine. */
.prose figure{margin-bottom:22px}
.prose figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--muted-3)}
.prose table{margin:0 0 22px;font-size:14.5px;width:100%;display:block;overflow-x:auto}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.prose th{background:var(--bg-soft);font-weight:900}
.prose hr{margin:26px 0;border:0;border-top:1px solid var(--line)}
.prose section{scroll-margin-top:96px}
.figure{margin-bottom:clamp(24px,3vw,34px)}
.figure__box{position:relative;min-height:clamp(180px,26vw,300px);display:grid;place-items:center;border-radius:22px;background:linear-gradient(140deg,#e9f5ee,#fdf3ea);overflow:hidden}
/* Niente altezza imposta: l'immagine detta la propria altezza e non viene mai
   tagliata sui telefoni (su schermi stretti il ritaglio mangiava il marchio in basso). */
.figure__box img{position:relative;display:block;width:100%;height:auto;margin-bottom:0;border-radius:0;object-fit:cover}
.figure__glyphs{position:relative;display:flex;align-items:center;gap:clamp(10px,2vw,22px);font-size:clamp(34px,6vw,64px);line-height:1;color:var(--green)}
.samples{padding:clamp(16px,2vw,22px);margin:22px 0 26px;background:var(--bg-soft);border:1px solid var(--line);border-radius:18px}
.samples__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
.samples__head b{font-size:14.5px;font-weight:900}
.samples__head span{font-size:12px;font-weight:700;color:var(--muted-3)}
.samples__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.sample{display:flex;flex-direction:column;gap:6px;padding:13px 15px;background:var(--surface);border:1.4px solid var(--line);border-radius:var(--r-md);text-align:left}
.sample:hover{border-color:var(--green)}
.sample b{font-size:10.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-3)}
.sample span{font-size:18px;color:var(--ink)}
.prose blockquote,.quote{margin:0 0 26px;padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);background:linear-gradient(140deg,var(--green-soft),var(--bg-cream));border-left:4px solid var(--green);border-radius:18px}
.prose blockquote p,.quote p{margin:0;font-size:clamp(15.5px,1.9vw,18px);line-height:1.62;font-weight:800;color:var(--ink);max-width:56ch}
.codebox{padding:clamp(16px,2vw,22px);margin-bottom:16px;background:#26282b;border-radius:18px}
.codebox__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.codebox__head span{font-family:var(--mono);font-size:11px;font-weight:700;color:#8b9096}
.codebox__head button{padding:6px 12px;background:#3a3f45;border:0;border-radius:9px;color:#fff;font-size:11.5px;font-weight:800}
.codebox__head button:hover{background:#4b5158}
.codebox pre,.prose pre{font-family:var(--mono);font-size:13.5px;line-height:1.9;color:#e8eae7;white-space:pre-wrap;word-break:break-word}
.prose pre{padding:clamp(16px,2vw,22px);margin-bottom:22px;background:#26282b;border-radius:18px}
.prose code{font-family:var(--mono);font-size:.92em;padding:2px 6px;background:var(--surface-2);border-radius:6px}
.prose pre code{padding:0;background:none}
.share{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share b{font-size:13px;font-weight:900}
.share__row{display:flex;flex-wrap:wrap;gap:9px}
.share__btn{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--surface);border:1.4px solid var(--line);border-radius:20px;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.share__btn:hover{border-color:var(--green);color:var(--green)}
.author{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:24px;padding:clamp(18px,2.4vw,24px);background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg)}
.author__body{flex:1 1 240px;min-width:0}
.author__body b{font-size:15px;font-weight:900}
.author__body p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.adjacent{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.adjacent a{flex:1 1 240px;min-width:0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:18px}
.adjacent a:hover{border-color:var(--green)}
.adjacent small{font-size:11.5px;font-weight:800;color:var(--muted-3)}
.adjacent b{display:block;margin-top:7px;font-size:15px;line-height:1.35;font-weight:900;color:var(--ink)}
.adjacent .next{text-align:right}
.toc{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.toc button{padding:9px 10px;background:none;border:0;border-radius:var(--r-sm);text-align:left;font-size:13.2px;line-height:1.4;font-weight:800;color:var(--muted)}
.toc button:hover{background:var(--green-soft)}
.toc button.is-active{background:var(--green-soft);color:var(--green)}
.related{display:flex;flex-direction:column;gap:13px;margin-top:14px}
.related a{display:flex;gap:11px}
.related a:hover{opacity:.72}
.related__ico{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;font-size:18px;overflow:hidden}
.related__ico img{width:100%;height:100%;object-fit:cover}
.related__t{flex:1;min-width:0;font-size:13.2px;line-height:1.42;font-weight:800;color:var(--ink-2)}
.side--sticky{align-self:flex-start;position:sticky;top:calc(var(--header-h) + 22px)}
.comments{margin-top:clamp(26px,4vw,40px)}
.comments h2{font-size:clamp(19px,2.4vw,23px);font-weight:900;letter-spacing:-.02em}
.comment-list{display:flex;flex-direction:column;gap:16px;margin:18px 0 0;padding:0;list-style:none}
.comment-list ol{list-style:none;padding-left:clamp(14px,3vw,34px)}
.comment-body{padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px}
.comment-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px;font-weight:800;color:var(--muted-2);margin-bottom:9px}
.comment-content p{font-size:14.5px;line-height:1.7;color:var(--ink-3);margin-bottom:10px}
.comment-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.comment-form p{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:800;color:var(--ink-2)}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;padding:13px 16px;background:var(--surface);border:1.6px solid var(--line-2);border-radius:13px;font-size:14.5px;font-weight:600;outline:none}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--green)}
.comment-form .form-submit input{padding:13px 24px;background:var(--green);border:0;border-radius:13px;color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.comment-form .comment-form-cookies-consent{flex-direction:row;align-items:center;gap:9px;font-weight:700}

/* WordPress core / editor */
.alignleft{float:left;margin:0 20px 16px 0}
.alignright{float:right;margin:0 0 16px 20px}
.aligncenter{margin-inline:auto}
.alignwide{width:min(100%,900px)}
.alignfull{width:100%}
.wp-caption-text,.wp-element-caption{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted-3)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sticky .post__title::after{content:" ★";color:var(--yellow)}

/* 10. GENERATORE NOMI --------------------------------------------------- */
.forge{position:relative;overflow:hidden;background:linear-gradient(105deg,var(--green-soft) 0%,var(--bg-soft) 46%,var(--bg-cream) 100%);border:1px solid var(--line-3);border-radius:26px}
.forge__inner{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:clamp(24px,3vw,40px);padding:clamp(22px,3vw,44px) clamp(18px,3vw,46px)}
.forge__copy{flex:1 1 300px;min-width:0}
.forge h2{font-size:clamp(25px,4.2vw,34px);line-height:1.14;font-weight:900;letter-spacing:-.02em}
.forge h2 .g{color:var(--green)}
.forge h2 .r{color:var(--red)}
.forge__lead{margin-top:16px;max-width:330px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.forge__form{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;max-width:400px}
.forge__form .field{flex:1 1 170px;padding:13px 16px;font-size:14.5px;border-color:var(--line-3)}
.forge__form .btn{flex:1 1 130px;padding:13px 20px;font-size:14px}
.forge__quick{flex:1 1 300px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;align-content:start}
.qname{padding:15px 12px;background:var(--surface);border:1.4px solid var(--line-3);border-radius:var(--r-md);font-size:17px;font-weight:700;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qname:nth-child(even){border-color:var(--line-2)}
.qname:hover{border-color:var(--green);color:var(--green)}

.forge-out{margin-top:clamp(18px,2.6vw,26px)}
.forge-out__status{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);font-size:13.5px;font-weight:800;color:var(--muted)}
.spin{width:16px;height:16px;flex:none;border:2.4px solid var(--line-2);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}
.fset{padding:clamp(16px,2.4vw,24px);margin-bottom:14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-xl);animation:pop .22s ease both}
.fset__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:16px}
.fset__head h3{font-size:clamp(16px,2.2vw,20px);font-weight:900;letter-spacing:-.015em}
.fset__head span{font-size:12.5px;font-weight:700;color:var(--muted-3)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:10px}
.fgrid--tight{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.vcard{display:flex;flex-direction:column;gap:8px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);text-align:left;transition:transform .14s ease,border-color .14s ease}
.vcard:hover{transform:translateY(-2px);border-color:var(--green)}
.vcard__label{font-size:10.5px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-3)}
.vcard__value{font-size:18px;line-height:1.35;color:var(--ink);word-break:break-word}
.emojis{display:flex;flex-wrap:wrap;gap:8px}
.emoji-btn{padding:9px 13px;background:var(--surface);border:1.4px solid var(--line);border-radius:12px;font-size:17px;line-height:1.3;color:var(--ink)}
.emoji-btn:hover{border-color:var(--green)}
.pill{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:9px 14px;background:var(--surface);border:1.4px solid var(--line);border-radius:20px;font-size:15px;color:var(--ink)}
.pill:hover{border-color:var(--green)}
.pill__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill__like{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:var(--green-soft);border:0;border-radius:12px;font-size:11.5px;font-weight:900;color:var(--green)}
.pill__like:hover{filter:brightness(.95)}
.pill__like.is-on{background:var(--green);color:#fff}
.pill__meta{font-size:11px;font-weight:700;color:var(--muted-3)}
.fchips{display:flex;flex-wrap:wrap;gap:9px}
.fset__more{display:flex;justify-content:center;margin-top:16px}
.fform{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.fform .field{flex:1 1 200px;padding:13px 16px;font-size:14.5px}
.fform .btn{flex:0 0 auto;padding:13px 20px;font-size:14px}
.fnote{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--muted-3)}
.trend{display:flex;flex-wrap:wrap;gap:9px}
.trend__link{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--surface);border:1.4px solid var(--line-2);border-radius:20px;font-size:13px;font-weight:800;color:var(--ink-2)}
.trend__link:hover{border-color:var(--green);color:var(--green)}
.trend__n{font-size:11px;font-weight:900;color:var(--muted-3)}
.toggle{display:inline-flex;padding:3px;background:var(--surface-2);border-radius:16px}
.toggle button{padding:5px 12px;background:none;border:0;border-radius:13px;font-size:12px;font-weight:800;color:var(--muted)}
.toggle button.is-active{background:var(--surface);color:var(--green);box-shadow:var(--shadow-sm)}

/* 11. SUPERFICI COLORATE IN TEMA SCURO ----------------------------------
   I riquadri pastello sono pensati su fondo bianco: al buio il testo diventa
   chiaro e sopra un pastello non si leggerebbe più. Qui ogni famiglia di tinta
   viene rifatta in versione profonda, mantenendo lo stesso codice colore. */
html[data-theme="dark"] .feature--green,
html[data-theme="dark"] .cat--green,
html[data-theme="dark"] .cat--mint,
html[data-theme="dark"] .chip--green,
html[data-theme="dark"] .tag--green,
html[data-theme="dark"] .tint--green,
html[data-theme="dark"] .note--good{background:#1a2a21;border-color:#273b30;color:#6cc994}
html[data-theme="dark"] .feature--green .feature__ico,
html[data-theme="dark"] .trust__ico--green{background:#213328}

html[data-theme="dark"] .feature--red,
html[data-theme="dark"] .cat--pink,
html[data-theme="dark"] .cat--rose,
html[data-theme="dark"] .chip--pink,
html[data-theme="dark"] .chip--orange,
html[data-theme="dark"] .tag--pink,
html[data-theme="dark"] .tint--pink,
html[data-theme="dark"] .tint--red,
html[data-theme="dark"] .note--bad{background:#2c1e20;border-color:#3f2b2d;color:#ee8b86}
html[data-theme="dark"] .feature--red .feature__ico,
html[data-theme="dark"] .trust__ico--red{background:#372528}

html[data-theme="dark"] .feature--yellow,
html[data-theme="dark"] .cat--cream,
html[data-theme="dark"] .cat--yellow,
html[data-theme="dark"] .cat--sand,
html[data-theme="dark"] .chip--yellow,
html[data-theme="dark"] .tag--yellow,
html[data-theme="dark"] .tint--yellow{background:#2b2518;border-color:#3d3422;color:#e5b755}
html[data-theme="dark"] .feature--yellow .feature__ico,
html[data-theme="dark"] .trust__ico--yellow{background:#37301e}

html[data-theme="dark"] .cat--blue,
html[data-theme="dark"] .chip--blue,
html[data-theme="dark"] .tag--blue,
html[data-theme="dark"] .tint--blue{background:#1c2333;border-color:#2b3450;color:#93a9e0}

html[data-theme="dark"] .feature--violet,
html[data-theme="dark"] .cat--violet,
html[data-theme="dark"] .chip--violet,
html[data-theme="dark"] .tag--violet,
html[data-theme="dark"] .tint--violet{background:#241f33;border-color:#342d49;color:#a99aea}
html[data-theme="dark"] .feature--violet .feature__ico{background:#2d2740}

html[data-theme="dark"] .cat--grey{background:#22262a;border-color:#30363c}
html[data-theme="dark"] .cat span,
html[data-theme="dark"] .feature h3{color:var(--ink)}
html[data-theme="dark"] .feature p{color:var(--muted)}

html[data-theme="dark"] .featured__art,
html[data-theme="dark"] .figure__box{background:linear-gradient(140deg,#1d2a24,#2a2419)}
html[data-theme="dark"] ::selection{background:#2c5a41;color:#fff}
html[data-theme="dark"] .flag{box-shadow:0 0 0 1px rgba(255,255,255,.12)}

/* 12. ANIMAZIONI + RESPONSIVE ------------------------------------------- */
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes floaty2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:floaty 8s ease-in-out infinite}
.float--slow{animation:floaty2 9s ease-in-out infinite}

@media (max-width:1080px){
  .deco--venezia,.deco--gelato{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .btn-fav__label{display:none}
  .side--sticky{position:static}
}
@media (max-width:640px){
  :root{--pad:15px}
  .doodle{display:none}
  .deco--limoni,.deco--duomo{display:none}
  .hero__art{margin-right:0}
  .searchbox{margin-top:12px;max-width:none}
  .trust{gap:16px}
  .post__thumb{width:100%;aspect-ratio:16/7;font-size:34px}
  .adjacent .next{text-align:left}
  .featured__art{min-height:150px}
  .cats__head{gap:8px}
  .cats__head svg{display:none}
  .alignleft,.alignright{float:none;margin:0 0 16px}
}
@media (max-width:420px){
  .cats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .searchbox__form .btn,.forge__form .btn{flex:1 1 100%}
}
@media print{
  .site-header,.to-top,.progress,.searchbox,.side,.forge,.forge-out,.toast{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* Griglia per le COMBINAZIONI di caratteri (kaomoji, combo aesthetic): a differenza
   dei simboli singoli sono lunghe e hanno segni combinanti, quindi la cella non può
   essere quadrata e fissa — altrimenti il testo esce dal riquadro. */
.symgrid--combo{gap:10px}
.symgrid--combo .sym-btn{width:auto;min-width:44px;height:auto;min-height:44px;padding:9px 13px;font-size:17px;line-height:1.4;white-space:nowrap;font-weight:400}

/* ------------------------------------------------------------------
   Griglia di simboli della home, stampata lato server.
   Le celle riusano il gestore di copia condiviso ([data-copy] in app.js).
   ------------------------------------------------------------------ */
.sbl-intro{max-width:74ch;margin:10px 0 4px;color:var(--muted);font-size:15.5px;line-height:1.72}
.sbl-set{margin-top:clamp(22px,3vw,34px)}
.sbl-set h3{font-size:clamp(17px,2.1vw,20px);font-weight:900;letter-spacing:-.01em}
.sbl-set__lead{margin:5px 0 12px;max-width:70ch;color:var(--muted-2);font-size:14.5px;line-height:1.65}
.sbl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.sbl-cell{display:flex;align-items:center;justify-content:center;min-height:56px;padding:8px 6px;
  background:var(--surface);border:1.6px solid var(--line);border-radius:var(--r-md);
  font-size:19px;line-height:1.35;font-weight:400;word-break:break-word;text-align:center;
  cursor:pointer;transition:border-color .14s,transform .14s}
.sbl-cell:hover{border-color:var(--green);transform:translateY(-2px)}
.sbl-cell:active{transform:translateY(0)}
.sbl-nota{margin-top:16px;max-width:74ch;color:var(--muted-3);font-size:13.5px;line-height:1.65}

.sbl-tabwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;
  border:1.6px solid var(--line);border-radius:var(--r-md)}
.sbl-tab{width:100%;min-width:560px;border-collapse:collapse;font-size:14.5px}
.sbl-tab th,.sbl-tab td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.sbl-tab thead th{background:var(--green-soft);font-weight:800;white-space:nowrap}
.sbl-tab tbody tr:last-child td{border-bottom:0}
.sbl-tab code{font-size:13px;color:var(--muted)}
.sbl-mini{min-width:42px;padding:5px 9px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:9px;font-size:17px;font-weight:400;cursor:pointer}
.sbl-mini:hover{border-color:var(--green)}

.sbl-faq{margin-top:14px;display:grid;gap:9px}
.sbl-faq__item{background:var(--surface);border:1.6px solid var(--line);border-radius:var(--r-md);padding:2px 14px}
.sbl-faq__item summary{list-style:none;cursor:pointer;padding:12px 0}
.sbl-faq__item summary::-webkit-details-marker{display:none}
.sbl-faq__item summary h3{display:inline;font-size:15.5px;font-weight:800}
.sbl-faq__item summary::after{content:"+";float:right;font-weight:900;color:var(--green)}
.sbl-faq__item[open] summary::after{content:"−"}
.sbl-faq__item p{margin:0 0 14px;max-width:74ch;color:var(--muted);font-size:14.8px;line-height:1.72}
@media (max-width:520px){.sbl-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.sbl-cell{min-height:50px;font-size:17px}}

/* ============================================================
   ITEM TỰ DO — free-size copy items (2026-09-09)
   Lý do: lưới cột cứng (grid auto-fill minmax) bóp mọi item về
   cùng một bề ngang, cắt cụt kaomoji/nickname dài; word-break:
   break-all còn chẻ combo giữa chừng. Đổi sang flex-wrap:
   item rộng theo đúng nội dung rồi giãn đều cho đầy dòng.
   Không dùng font-weight cho item (luật chủ site 0.4).
   ============================================================ */
.sbl-grid{display:flex;flex-wrap:wrap;align-content:flex-start;
  grid-template-columns:none;gap:8px}
.sbl-grid>*,.sbl-cell,.sym-btn{
  flex:1 1 auto;width:auto;max-width:100%;height:auto;min-height:44px;
  min-width:-moz-min-content;min-width:min-content;
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 13px;line-height:1.45;
  white-space:normal;overflow:visible;text-overflow:clip;
  word-break:normal;overflow-wrap:break-word;font-weight:400}
.pill{max-width:100%;white-space:normal;overflow-wrap:break-word;
  word-break:normal;font-weight:400}
@media(max-width:640px){.sbl-grid{gap:7px}.sbl-cell{padding:9px 11px;min-height:44px}}

/* ITEM TỰ DO — bổ sung 09/09/2026: các lưới item copy còn sót lại cột cứng.
   Quét bằng: grep -n "minmax(" <file>. Xem memory vps-theme-edit-safety mục 10. */
.results__grid,.samples__grid,.fgrid,.fgrid--tight{display:flex;flex-wrap:wrap;align-content:flex-start;grid-template-columns:none;gap:10px}
.results__grid>*,.samples__grid>*,.fgrid>*{flex:1 1 auto;width:auto;max-width:100%;min-width:min-content;
  white-space:normal;overflow:visible;text-overflow:clip;word-break:normal;overflow-wrap:break-word;font-weight:400}