/* ritocchi per la demo: il resto è il CSS vero dell'app (app.css) */
.chart-mark { left: 12px; bottom: 38px; width: 30px; height: 40px; opacity: .6; background: #fff; -webkit-mask: url(../assets/mark.svg) center/contain no-repeat; mask: url(../assets/mark.svg) center/contain no-repeat; filter: drop-shadow(0 0 1px var(--bg)) drop-shadow(0 0 1px var(--bg)); }
body.theme-light .chart-mark { background: #131722; }
.tb-btn.get { background: var(--accent); color: #0b0b0c; font-weight: 600; text-decoration: none; border-radius: 6px; padding: 6px 12px; margin-left: 6px; }
.tb-btn.get:hover { filter: brightness(1.1); }
.demo-code { margin: 0; position: absolute; inset: 0; overflow: auto; padding: 8px 12px; font: 13px/1.6 var(--mono); color: var(--text); background: var(--bg); white-space: pre; tab-size: 4; }
.demo-code .c { color: var(--muted); font-style: italic; } .demo-code .k { color: #C678DD; } .demo-code .f { color: var(--accent); } .demo-code .s { color: #E6C17A; } .demo-code .n { color: #9EB6FF; }
.demo-hint { font-size: 11px; margin-right: 8px; }
.legend-main .legend-row { pointer-events: auto; }
.legend-script .lname::before { content: ""; }
.legend-script .lbtns { display: inline-flex; }
.legend-script .lbtns button { font-size: 12px; }
.ed-con-body { padding: 4px 10px; overflow: auto; }
.wl-row .num { font-variant-numeric: tabular-nums; }
.lock-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); margin-left: 6px; }
.ind-list { display: grid; gap: 4px; }
.ind-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; border: 1px solid transparent; }
.ind-item:hover { background: var(--hover); }
.ind-item.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ind-item small { color: var(--muted); display: block; }
.ind-item .grow { flex: 1; }
.ind-item.premium { cursor: default; opacity: .85; }
.ind-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 10px 4px 4px; }
.ind-cta { display: block; text-align: center; margin-top: 12px; padding: 10px; border-radius: 6px; background: var(--accent); color: #0b0b0c; font-weight: 600; text-decoration: none; }
.al-item { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; align-items: center; }
.al-item .grow { flex: 1; }
@media (max-width: 640px) { body:not(.layout-hudm) .bottom { height: 200px; } }
body.layout-hudm .demo-code { background: transparent; }
/* logo grande e quasi invisibile al centro del grafico (come «Motivo → Logo Anubi grande» dell'app).
   mark.svg ha preserveAspectRatio="none": le proporzioni si fissano con aspect-ratio, altrimenti la maschera si stira */
.chart-wm { position: absolute; z-index: 1; left: 0; right: 64px; top: 0; bottom: 28px; pointer-events: none; opacity: .02; }
.chart-wm::before { content: ''; position: absolute; left: 50%; top: 50%; height: 75%; aspect-ratio: 40.95 / 59.95; transform: translate(-50%, -50%); background: #fff; -webkit-mask: url(../assets/mark.svg) center / 100% 100% no-repeat; mask: url(../assets/mark.svg) center / 100% 100% no-repeat; }
body.theme-light .chart-wm::before { background: #131722; }
@media (max-width: 700px) { .chart-wm::before { height: 55%; } }

/* suggerimenti (come nell'app, mobile-tip.js): fumetti di vetro, fluttuano piano; i movimenti usano `translate`, mai `transform` */
.hud-tip, .mob-tip { position: fixed; z-index: 80; max-width: 240px; padding: 10px 28px 10px 14px; border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); border-radius: 14px; font-size: 12.5px; line-height: 1.4; color: var(--text);
  background: color-mix(in srgb, var(--panel) 62%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: tip-in .4s ease both, tip-float 4s ease-in-out .4s infinite; transition: opacity .3s; pointer-events: none; }
.mob-tip { left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px + 46px + 18px); translate: -50% 0; width: min(260px, calc(100vw - 32px)); padding: 10px 14px; text-align: center; }
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tip-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
.mob-tip { animation-name: tip-in, tip-float-m; }
@keyframes tip-float-m { 0%, 100% { margin-bottom: 0; } 50% { margin-bottom: 4px; } }
.mob-fold.tip-pulse i { animation: tip-pulse 1.1s ease-in-out infinite; }
@keyframes tip-pulse { 0%, 100% { opacity: .75; scale: 1 1; } 50% { opacity: 1; scale: 1.25 2; } }
.hud-tip.out, .mob-tip.out { opacity: 0; }
.hud-tip-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; pointer-events: auto; }
.hud-tip-x:hover { color: var(--text); background: var(--hover); }
.hud-tip-0 { right: 28px; top: calc(50% - 30px); }
.hud-tip-1 { left: 50%; bottom: 96px; translate: -50% 0; text-align: center; }
.hud-tip-2 { width: 240px; }
body.hud-tip-edges.layout-hud .hud-edge::after { animation: tip-edge 1.2s ease-in-out infinite; }
@keyframes tip-edge { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hud-tip, .mob-tip, .mob-fold.tip-pulse i, body.hud-tip-edges.layout-hud .hud-edge::after { animation: none; } }