/* ---- shell dello showcase (barra controlli) ---- */
html,body{margin:0;background:#1A1726}
.showcase{font-family:'Nunito',system-ui,sans-serif}
.ctrlbar{position:sticky;top:0;z-index:200;background:#15121F;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:11px 18px;color:#fff}
.ctrlbar-brand{display:flex;align-items:center;gap:10px;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px}
.ctrlbar-brand .dot{width:22px;height:22px;border-radius:6px;background:conic-gradient(#ff3d6e,#ff8a2b,#ffc400,#2fcb6e,#16c7d6,#7c5cfc,#ff3d6e)}
.ctrl{display:flex;align-items:center;gap:9px}
.ctrl-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8b86a3}
.seg{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:3px;gap:2px}
.seg button{font-family:inherit;border:none;background:none;color:#bdb8cf;font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer;white-space:nowrap;transition:.14s;display:flex;align-items:center;gap:6px}
.seg button:hover{color:#fff}
.seg button.on{background:#fff;color:#15121F}
.seg .sw{width:13px;height:13px;border-radius:4px;border:1px solid rgba(0,0,0,.15)}
.ctrl-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.hint{font-size:11.5px;color:#8b86a3;font-weight:700}
.stage{overflow:visible}
.stage-inner{margin:0 auto;transition:width .2s ease}
.stage[data-m="true"]{padding:22px 12px 40px;overflow:hidden;background:repeating-linear-gradient(45deg,#1d1a28 0 12px,#1a1726 12px 24px)}
.stage[data-m="true"] .stage-inner{width:390px !important;max-width:100%;border-radius:22px;overflow:hidden;box-shadow:0 0 0 8px #0c0a14,0 0 0 9px rgba(255,255,255,.08),0 30px 70px rgba(0,0,0,.55)}
.showcase .hh-bar{top:var(--ctrlh,56px)}
@media(max-width:760px){.ctrl-right{display:none}.ctrlbar{gap:12px}}

/* ---- breadcrumb condiviso (pill contenuto, leggibile su ogni tema) ---- */
.crumb{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;margin:18px 0 16px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);font-size:13px;font-weight:700;max-width:100%}
.crumb a{display:inline-flex;align-items:center;gap:5px;color:var(--muted);text-decoration:none;transition:color .14s}
.crumb a:hover{color:var(--r6)}
.crumb svg{opacity:.7}
.crumb .crumb-sep{color:var(--faint);font-weight:700}
.crumb b,.crumb span:not(.crumb-sep){color:var(--text)}
.crumb .crumb-home{color:var(--muted)}