/*
 * Forme dell'interfaccia (Impostazioni grafico → Temi → Forma), indipendenti dai colori del tema.
 * html[data-shape] = soft | glass | hard | aether | float | deep; senza attributo resta com'era.
 * Valgono nel layout classico (pannelli a schede con spazio in mezzo) e nell'Orizzonte (isole sul grafico),
 * da 901 px. I colori vengono dalle variabili del tema (--bg, --panel, --accent, --up, --down…).
 * Le animazioni usano le proprietà `translate`, `scale` e `rotate`, che non toccano `transform`
 * (le isole dell'Orizzonte lo usano per nascondersi).
 */
/* mai sul telefono in orizzontale (può superare i 900 px): lì il grafico va a tutto schermo, senza bordi */
@media (min-width: 901px) and (not ((pointer: coarse) and (orientation: landscape) and (max-height: 500px))) {
  html[data-shape] {
    --frame: 0px;
    --gap: 10px; --hudgap: 10px; --r: 18px; --rc: 8px; --blur: none;
    --gutter: color-mix(in srgb, var(--bg) 50%, #000);
    --line: color-mix(in srgb, var(--text-strong) 11%, transparent);
    --surface: var(--panel-2);
    --hudbg: color-mix(in srgb, var(--panel) 94%, transparent);
    --popbg: var(--panel);
    --card-shadow: none;
    --card-shadow-up: var(--card-shadow);
    background: var(--gutter);
  }
  html[data-shape].theme-light { --gutter: color-mix(in srgb, var(--bg) 88%, #000); }
  html[data-shape] body:not(.layout-hud) { background: transparent; }

  /* ---- layout classico: schede ---- */
  html[data-shape] body:not(.layout-hud) .app { padding: var(--gap); gap: var(--gap); position: relative; z-index: 1; }
  html[data-shape] body:not(.layout-hud) .main { gap: var(--gap); }
  html[data-shape] body:not(.layout-hud) .center { gap: 0; }
  html[data-shape] body:not(.layout-hud) .resizer { height: var(--gap); background: transparent; }
  html[data-shape] body:not(.layout-hud) .resizer:hover, html[data-shape] body:not(.layout-hud) .resizer.drag { background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 4px; }
  html[data-shape] body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom, .chart-wrap[data-grid="1"], .chart-wrap:not([data-grid="1"]) .chart-cell) {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--card-shadow); overflow: hidden;
  }
  html[data-shape] body:not(.layout-hud) .topbar { overflow-x: auto; }
  html[data-shape] body:not(.layout-hud) .chart-wrap[data-grid="1"] .chart-cell, html[data-shape] body:not(.layout-hud) .chart-wrap[data-grid="1"] { background: var(--bg); }
  html[data-shape] body:not(.layout-hud) .chart-wrap:not([data-grid="1"]) { gap: var(--gap); background: transparent; }
  html[data-shape] body:not(.layout-hud) .chart-wrap:not([data-grid="1"]) .chart-cell { background: var(--bg); }
  html[data-shape] body:not(.layout-hud) .rp-resizer { left: calc(-1px - var(--gap)); width: calc(var(--gap) + 2px); }
  html[data-shape] body:not(.layout-hud) .footer { border-top: 0; }
  html[data-shape] body:not(.layout-hud) .toolbar-left { padding: 8px 0; }
  html[data-shape] body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom) { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }

  /* ---- Orizzonte: le isole prendono la forma ---- */
  html[data-shape] body.layout-hud { --hud-gap: var(--hudgap); --glass: var(--hudbg); --glass-line: var(--line); }
  html[data-shape] body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card) {
    border-radius: var(--r); border-color: var(--line); background: var(--hudbg);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--card-shadow);
  }
  html[data-shape] body.layout-hud :is(#rightPanel, #bottom) { --glass: var(--hudbg); }
  /* l'altezza sta sul body: la legenda in alto a sinistra la usa per stare sotto la barra (--hud-legend-extra: margine per chi si muove) */
  html[data-shape] body.layout-hud { --hud-top-h: 44px; --hud-legend-extra: 0px; }
  html:is([data-shape="float"], [data-shape="deep"]) body.layout-hud { --hud-legend-extra: 5px; }
  html[data-shape] body.layout-hud :is(.topbar, #rightPanel, #bottom)::after { left: var(--r); right: var(--r); }
  html[data-shape] body.layout-hud .hud-card { border-radius: calc(var(--r) * .8); }

  /* ---- controlli e popup (tutti i layout) ---- */
  html[data-shape] :is(.btn, .tb-btn, .tf-group button, .tb-select, .toolbar-left button, #drawTools button, .tool-flyout button, .menu button, .sel-toolbar button, .tab, .rp-tab, .seg button, .hud-pin) { border-radius: var(--rc); }
  html[data-shape] :is(input:not([type=checkbox]):not([type=color]):not([type=range]), select, textarea, .seg, .wl-row) { border-radius: var(--rc); }
  html[data-shape] :is(.modal, .menu, .toast, .tool-flyout, .sel-toolbar, .chart-msg, .price-plus) {
    background: var(--popbg); border-color: var(--line); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
  html[data-shape] .modal { border-radius: var(--r); }
  /* la ricerca dei simboli resta di vetro (la sua trasparenza la decide app.css con --ss-glass) */
  html[data-shape] .modal.sym-modal { background: var(--ss-glass); -webkit-backdrop-filter: blur(18px) saturate(190%); backdrop-filter: blur(18px) saturate(190%); border-color: var(--ss-line, var(--line)); }
  html[data-shape="aether"] .modal.sym-modal { box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 26%, transparent); }
  html[data-shape] :is(.menu, .toast, .tool-flyout, .sel-toolbar, .chart-msg) { border-radius: calc(var(--r) * .65); }
  html[data-shape] .toast { border-left-width: 1px; }
  html[data-shape] .wl-row { border-bottom-color: transparent; margin: 1px 4px; }
  html[data-shape] .wl-row:hover { background: color-mix(in srgb, var(--text-strong) 7%, transparent); }

  /* ================= MORBIDA ================= */
  html[data-shape="soft"] {
    --gap: 12px; --hudgap: 12px; --r: 24px; --rc: 14px;
    --line: color-mix(in srgb, var(--text-strong) 6%, transparent);
    --surface: color-mix(in srgb, var(--panel-2) 88%, var(--text-strong) 4%);
    --hudbg: color-mix(in srgb, var(--panel) 90%, var(--text-strong) 4%);
    --card-shadow: 0 12px 38px rgba(0,0,0,.34), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 7%, transparent);
  }
  html[data-shape="soft"] :is(.tf-group button, .tab, .rp-tab) { border-radius: 999px; }
  html[data-shape="soft"] :is(.tab.active, .rp-tab.active) { background: color-mix(in srgb, var(--accent) 16%, transparent); border-bottom-color: transparent; }
  html[data-shape="soft"] .btn.primary { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
  html[data-shape="soft"] .modal { box-shadow: 0 30px 80px rgba(0,0,0,.5); }

  /* ================= VETRO ================= */
  html[data-shape="glass"] {
    --gap: 12px; --hudgap: 12px; --r: 20px; --rc: 11px; --blur: blur(26px) saturate(170%);
    --line: color-mix(in srgb, var(--text-strong) 16%, transparent);
    --surface: color-mix(in srgb, var(--panel-2) 50%, transparent);
    --hudbg: color-mix(in srgb, var(--panel) 42%, transparent);
    --popbg: color-mix(in srgb, var(--panel) 62%, transparent);
    --card-shadow: 0 16px 48px rgba(0,0,0,.38), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 3%, transparent);
  }
  html[data-shape="glass"] body:not(.layout-hud) :is(.bottom, .right) { background: color-mix(in srgb, var(--panel-2) 50%, transparent); }
  html[data-shape="glass"] :is(.tab.active, .rp-tab.active) { background: color-mix(in srgb, var(--text-strong) 9%, transparent); }

  /* ================= DURA ================= */
  html[data-shape="hard"] {
    --gap: 14px; --hudgap: 14px; --r: 0px; --rc: 0px;
    --line: color-mix(in srgb, var(--text-strong) 55%, transparent);
    --hudbg: color-mix(in srgb, var(--panel) 97%, transparent);
    --card-shadow: 5px 5px 0 color-mix(in srgb, var(--accent) 75%, transparent);
  }
  html[data-shape="hard"] body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom, .chart-wrap[data-grid="1"], .chart-wrap:not([data-grid="1"]) .chart-cell),
  html[data-shape="hard"] body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card) { border-width: 2px; }
  html[data-shape="hard"] body.layout-hud :is(.topbar, #rightPanel, #bottom)::after { display: none; }
  html[data-shape="hard"] :is(.modal, .menu, .toast, .tool-flyout, .sel-toolbar, .chart-msg) { border: 2px solid var(--line); box-shadow: 6px 6px 0 color-mix(in srgb, var(--accent) 75%, transparent); }
  html[data-shape="hard"] .btn { border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; }
  html[data-shape="hard"] .btn.primary { border-color: var(--text-strong); box-shadow: 3px 3px 0 var(--text-strong); }
  html[data-shape="hard"] .btn:active { transform: translate(2px, 2px); box-shadow: none; }
  html[data-shape="hard"] :is(.tab, .rp-tab) { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
  html[data-shape="hard"] :is(.tab.active, .rp-tab.active) { border-bottom-width: 3px; }
  html[data-shape="hard"] .resizer:hover, html[data-shape="hard"] .resizer.drag { border-radius: 0; }
  html[data-shape="hard"] .wl-row.active { box-shadow: inset 3px 0 0 var(--accent); }

  /* ================= ETEREA ================= */
  html[data-shape="aether"] {
    --gap: 14px; --hudgap: 14px; --r: 22px; --rc: 999px; --blur: blur(30px) saturate(190%);
    --line: color-mix(in srgb, var(--accent) 42%, transparent);
    --surface: color-mix(in srgb, var(--panel-2) 44%, transparent);
    --hudbg: color-mix(in srgb, var(--panel) 38%, transparent);
    --popbg: color-mix(in srgb, var(--panel) 58%, transparent);
    --card-shadow: 0 0 38px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 0 46px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 24%, transparent);
  }
  html[data-shape="aether"] body:not(.layout-hud) .chart-wrap[data-grid="1"] { background: color-mix(in srgb, var(--bg) 82%, transparent); box-shadow: 0 0 64px color-mix(in srgb, var(--accent) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--text-strong) 8%, transparent); }
  html[data-shape="aether"] :is(.toolbar-left button, #drawTools button, .tb-btn.icon) { border-radius: 50%; }
  html[data-shape="aether"] :is(.tab.active, .rp-tab.active, .tf-group button.active, .symbol-btn) { text-shadow: 0 0 14px var(--accent); }
  html[data-shape="aether"] :is(.tab.active, .rp-tab.active) { border-bottom-color: transparent; background: radial-gradient(60% 120% at 50% 100%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 75%); }
  html[data-shape="aether"] .btn.primary { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--up))); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 60%, transparent); }
  html[data-shape="aether"] :is(.modal, .menu, .toast, .tool-flyout) { box-shadow: 0 0 70px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 0 46px color-mix(in srgb, var(--accent) 8%, transparent); }
  html[data-shape="aether"] :is(input:not([type=checkbox]):not([type=color]):not([type=range]), select) { padding-left: 12px; padding-right: 12px; }
  html[data-shape="aether"] .status-dot.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--up) 25%, transparent), 0 0 14px var(--up); }
  html[data-shape="aether"] body.layout-hud :is(.topbar, #rightPanel, #bottom)::after { opacity: 1; height: 2px; filter: blur(.4px); }
  html[data-shape="aether"] .wl-row.active { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 26%, transparent), transparent); }
  html[data-shape="aether"] .hud-card .hc-price b { text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent); }

  /* ================= FLUTTUANTE ================= */
  html[data-shape="float"] {
    --gap: 20px; --hudgap: 20px; --r: 22px; --rc: 12px;
    --line: color-mix(in srgb, var(--text-strong) 10%, transparent);
    --surface: color-mix(in srgb, var(--panel-2) 90%, var(--text-strong) 3%);
    --hudbg: color-mix(in srgb, var(--panel) 92%, var(--text-strong) 3%);
    --card-shadow: 0 38px 64px -18px rgba(0,0,0,.68), 0 16px 30px -12px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 14%, transparent);
    --card-shadow-up: 0 54px 84px -20px rgba(0,0,0,.72), 0 24px 44px -14px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 18%, transparent);
    background: radial-gradient(120vw 90vh at 50% 0%, color-mix(in srgb, var(--bg) 70%, var(--accent) 12%), var(--gutter) 75%);
  }
  html[data-shape="float"] :is(body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom, .chart-wrap[data-grid="1"]), body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card)) {
    transition: scale .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, opacity .22s ease, transform .22s ease, visibility 0s;
  }
  html[data-shape="float"] :is(body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom, .chart-wrap[data-grid="1"]), body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card)):hover { box-shadow: var(--card-shadow-up); scale: 1.006; }
  html[data-shape="float"] :is(body:not(.layout-hud) .topbar, body.layout-hud .topbar) { animation: av-bob 7s ease-in-out infinite; }
  html[data-shape="float"] :is(body:not(.layout-hud) .toolbar-left, body.layout-hud #drawTools) { animation: av-bob 8.5s ease-in-out -2s infinite; }
  html[data-shape="float"] :is(body:not(.layout-hud) .right, body.layout-hud #rightPanel) { animation: av-bob 9.5s ease-in-out -4s infinite; }
  html[data-shape="float"] body.layout-hud #bottom { animation: av-bob 10.5s ease-in-out -6s infinite; }
  html[data-shape="float"] body.layout-hud .hud-card { animation: av-bob 6s ease-in-out -1s infinite; }
  @keyframes av-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
  @media (prefers-reduced-motion: reduce) { html[data-shape="float"] * { animation: none !important; } }

  /* ================= 3D =================
     Lastre con spessore che respirano piano da ferme. Con il mouse (js/depth.js): parallasse della scena (--mx/--my, ogni pannello ha la sua
     profondità --d), inclinazione verso il cursore del pannello sotto di esso (--ax --ay --ang),
     con l'ombra che si sposta al contrario della luce. */
  html[data-shape="deep"] {
    --gap: 18px; --hudgap: 16px; --r: 16px; --rc: 9px;
    --line: color-mix(in srgb, var(--text-strong) 20%, transparent);
    --hudbg: color-mix(in srgb, var(--panel) 95%, transparent);
    --edge1: color-mix(in srgb, var(--panel-2) 66%, #000); --edge2: color-mix(in srgb, var(--panel-2) 44%, #000); --edge3: color-mix(in srgb, var(--panel-2) 24%, #000);
    --card-shadow: 0 1px 0 var(--edge1), 0 2px 0 var(--edge1), 0 3px 0 var(--edge2), 0 4px 0 var(--edge2), 0 5px 0 var(--edge3), 0 6px 0 var(--edge3),
      calc(var(--mx, 0) * -14px) calc(26px - var(--my, 0) * 8px) 36px -4px rgba(0,0,0,.62),
      0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 30%, transparent), inset 0 -2px 0 rgba(0,0,0,.28);
    background: radial-gradient(90vw 70vh at calc(50% + var(--mx, 0) * 12%) calc(20% + var(--my, 0) * 10%), color-mix(in srgb, var(--gutter) 78%, var(--accent) 12%), var(--gutter));
  }
  html[data-shape="deep"] :is(.app, .main) { perspective: 1500px; perspective-origin: calc(50% + var(--mx, 0) * 18%) calc(40% + var(--my, 0) * 18%); }
  html[data-shape="deep"] :is(body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom), body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card)) {
    --d: 1;
    translate: calc(var(--mx, 0) * var(--d) * -5px) calc(var(--my, 0) * var(--d) * -4px);
    rotate: var(--ax, 0) var(--ay, 0) 0 var(--ang, 0deg);
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--text-strong) 7%, transparent), transparent 40%);
    transition: rotate .28s cubic-bezier(.2,.8,.2,1), translate .45s cubic-bezier(.2,.8,.2,1), opacity .22s ease, transform .22s ease, visibility 0s;
  }
  html[data-shape="deep"] :is(body:not(.layout-hud) :is(.topbar, .toolbar-left, .right, .bottom), body.layout-hud :is(.topbar, #drawTools, #rightPanel, #bottom, .hud-card)) { animation: av-breathe 7s ease-in-out infinite; }
  html[data-shape="deep"] :is(#drawTools, .toolbar-left) { animation-duration: 8.5s; animation-delay: -2s; }
  html[data-shape="deep"] :is(#rightPanel, .right) { animation-duration: 9.5s; animation-delay: -4s; }
  html[data-shape="deep"] :is(#bottom, .bottom) { animation-duration: 10.5s; animation-delay: -6s; }
  html[data-shape="deep"] .hud-card { animation-duration: 6s; animation-delay: -1s; }
  @keyframes av-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.0045; } }
  @media (prefers-reduced-motion: reduce) { html[data-shape="deep"] * { animation: none !important; } }
  html[data-shape="deep"] :is(.topbar, #drawTools, .toolbar-left) { --d: 1.5; }
  html[data-shape="deep"] :is(#rightPanel, .right) { --d: 1.2; }
  html[data-shape="deep"] :is(#bottom, .bottom) { --d: .6; }
  html[data-shape="deep"] .hud-card { --d: 2.4; }
  html[data-shape="deep"] .btn:not(.link):not(.icon) { box-shadow: 0 3px 0 color-mix(in srgb, var(--hover) 45%, #000), 0 6px 10px rgba(0,0,0,.3); }
  html[data-shape="deep"] .btn.primary { box-shadow: 0 3px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 7px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
  html[data-shape="deep"] .btn:not(.link):active { translate: 0 3px; box-shadow: 0 0 0 transparent; }
  html[data-shape="deep"] :is(.modal, .menu, .toast, .tool-flyout) { box-shadow: 0 1px 0 var(--edge1), 0 3px 0 var(--edge2), 0 6px 0 var(--edge3), 0 40px 70px -10px rgba(0,0,0,.7); }

  /* scrittura e scorrimento (depth.js mette fx-busy): le animazioni si fermano dove sono, il ridisegno resta solo quello necessario */
  html.fx-busy:is([data-shape="deep"], [data-shape="float"]) * { animation-play-state: paused !important; }

  /* ---- aurora: dietro le schede nel layout classico, sopra il grafico (a bagliore, senza coprirlo) nell'Orizzonte ---- */
  html:is([data-shape="glass"], [data-shape="aether"]) body::before {
    content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(48vw 44vh at 14% 6%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),
      radial-gradient(46vw 50vh at 96% 96%, color-mix(in srgb, var(--up) 26%, transparent), transparent 70%),
      radial-gradient(34vw 34vh at 62% 46%, color-mix(in srgb, var(--down) 14%, transparent), transparent 70%);
  }
  html[data-shape="glass"] body::before { opacity: .65; }
  html[data-shape="aether"] body::before { animation: aether-drift 38s ease-in-out infinite alternate; }
  html:is([data-shape="glass"], [data-shape="aether"]) body.layout-hud::before { inset: 0; z-index: 3; mix-blend-mode: screen; opacity: .34; box-shadow: inset 0 0 160px color-mix(in srgb, var(--accent) 45%, transparent); }
  html[data-shape="glass"] body.layout-hud::before { opacity: .2; }
  @keyframes aether-drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to { transform: translate3d(2.5%, 2%, 0) scale(1.12); }
  }
  @media (prefers-reduced-motion: reduce) { html[data-shape="aether"] body::before { animation: none; } }
}

/* ================= telefono: Fluttuante e 3D sulle due isole in basso =================
   horizon.js (setMobShape) mette layout-hudm quando la forma è float o deep: la barra del simbolo e il pannello degli editor
   sono isole di vetro. Qui fluttuano (Fluttuante) o respirano con lo spessore (3D), come i pannelli del desktop. */
@media (max-width: 640px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  @keyframes av-bob-m { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes av-breathe-m { 0%, 100% { scale: 1; translate: 0 0; } 50% { scale: 1.012; translate: 0 -2px; } }
  html[data-shape="float"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode, .tb-more) :is(.topbar, .bottom, .right, .toolbar-left) {
    box-shadow: 0 26px 40px -14px rgba(0,0,0,.72), 0 10px 18px -8px rgba(0,0,0,.6), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 14%, transparent);
  }
  html[data-shape="float"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode, .tb-more) .topbar { animation: av-bob-m 7s ease-in-out infinite; }
  html[data-shape="float"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode) .bottom { animation: av-bob-m 9s ease-in-out -3s infinite; }
  html[data-shape="deep"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode, .tb-more) :is(.topbar, .bottom, .right, .toolbar-left) {
    --e1: color-mix(in srgb, var(--panel-2) 66%, #000); --e2: color-mix(in srgb, var(--panel-2) 44%, #000); --e3: color-mix(in srgb, var(--panel-2) 24%, #000);
    box-shadow: 0 1px 0 var(--e1), 0 2px 0 var(--e1), 0 3px 0 var(--e2), 0 4px 0 var(--e2), 0 5px 0 var(--e3), 0 6px 0 var(--e3),
      0 22px 30px -6px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.35), inset 0 1px 0 color-mix(in srgb, var(--text-strong) 30%, transparent), inset 0 -2px 0 rgba(0,0,0,.28);
    background-image: linear-gradient(160deg, color-mix(in srgb, var(--text-strong) 7%, transparent), transparent 40%);
  }
  html[data-shape="deep"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode, .tb-more) .topbar { animation: av-breathe-m 7s ease-in-out infinite; }
  html[data-shape="deep"] body.layout-hudm:not(.cell-wide, .embed, .focus-mode) .bottom { animation: av-breathe-m 10s ease-in-out -5s infinite; }
  html.fx-busy:is([data-shape="deep"], [data-shape="float"]) body.layout-hudm :is(.topbar, .bottom) { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) { html:is([data-shape="deep"], [data-shape="float"]) body.layout-hudm :is(.topbar, .bottom) { animation: none !important; } }
}