/* nRc · tema "Aurora glicine" della control room (restyling 2026-10).
   Caricato per ULTIMO in control_room.html: solo aspetto (colori, contenitori, tipografia, spaziature),
   nessuna regola di logica, nessun font o file esterno (font di sistema, numeri in monospazio tabellare).
   Prefisso html:root = stesso peso delle regole chiaro/scuro dei pannelli (html:not([data-theme]) #id),
   così questo file, caricato dopo, le sostituisce senza toccarle.
   Sezioni: 1 pannello dell'agente · 2 watchlist · 3 approfondimento azienda · 4 cTrader e Data Quality ·
   5 intestazione, menu e pagina. */

/* ---------- token ---------- */
html:root{
  --t-sans:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --t-mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  --t-ease:cubic-bezier(.2,.7,.2,1);
  --t-bg:#0C0E12;
  --t-surface:rgba(255,255,255,.03);          /* contenitore: vetro discreto */
  --t-surface-2:rgba(255,255,255,.025);       /* celle interne */
  --t-border:rgba(255,255,255,.07);
  --t-border-hi:rgba(255,255,255,.13);
  --t-text:#E6EAF2; --t-muted:#8A94A8;
  --t-accent:#9DB2FF;                          /* glicine: primario, attivo, piano da approvare, focus, rete neurale */
  --t-on-accent:#0B1020;
  --t-active-bg:color-mix(in srgb, var(--t-accent) 12%, transparent);
  --t-up:#3DDC97; --t-down:#FF5C7A; --t-warn:#FFB547;
  --t-grid:rgba(255,255,255,.04);
  --t-chart-bg:rgba(0,0,0,0);                  /* grafici trasparenti sul contenitore */
  --t-pat-hole:#141619;                        /* colore del contenitore sopra lo sfondo: buco dei cerchi del collo */
  --t-radius:16px; --t-radius-sm:11px;
  --t-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 18px 40px -24px rgba(0,0,0,.7);
  --t-blur:blur(8px);
}

/* =================== 1 · pannello dell'agente =================== */
html:root :is(#agentDesk, #nrcAskSlot){
  --ad-bg:var(--t-surface-2); --ad-panel:var(--t-chart-bg); --ad-ink:var(--t-text); --ad-muted:var(--t-muted); --ad-line:var(--t-border);
  --ad-accent:var(--t-accent); --ad-accent-soft:color-mix(in srgb, var(--t-accent) 15%, transparent);
  --ad-up:var(--t-up); --ad-up-soft:color-mix(in srgb, var(--t-up) 15%, transparent);
  --ad-down:var(--t-down); --ad-down-soft:color-mix(in srgb, var(--t-down) 15%, transparent);
  --ad-wait:var(--t-warn); --ad-wait-soft:color-mix(in srgb, var(--t-warn) 15%, transparent);
  --ad-grid:var(--t-grid); --ad-f-data:var(--t-mono); --ad-r:var(--t-radius-sm);
  --ad-pat-shape:var(--t-up); --ad-pat-neck:var(--t-down); --ad-pat-ends:var(--t-accent);
  --ad-pat-target:#4FD1C5; --ad-pat-breakout:var(--t-warn); --ad-pat-hole:var(--t-pat-hole);
  --ad-net:var(--t-accent);
  font-family:var(--t-sans); color:var(--t-text);
}
html:root #agentDesk .ad-wrap{gap:18px}
/* contenitori: vetro discreto, bordo uniforme, al passaggio del mouse solo il bordo si schiarisce */
html:root #agentDesk :is(.panel, .ask-row){
  background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur); transition:border-color .25s var(--t-ease);
}
html:root #agentDesk :is(.panel, .ask-row):hover{border-color:var(--t-border-hi)}
/* celle interne */
html:root #agentDesk :is(.stat, .pat-card, .news article, .ev, .appr-card, .company){
  background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:var(--t-radius-sm); box-shadow:none;
}
html:root #agentDesk .ticket{background:var(--t-border); border-color:var(--t-border); border-radius:var(--t-radius-sm)}
html:root #agentDesk .ticket div{background:#121418}
html:root #agentDesk .ev{border-left-width:3px}
/* intestazioni: maiuscoletto spaziato, puntino, linea sottile sotto */
html:root #agentDesk :is(h2, h3.sub){display:flex; align-items:center; gap:9px; font-size:11px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--t-muted)}
html:root #agentDesk h2::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--t-muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-muted) 18%, transparent)}
html:root #agentDesk .panel-head{padding-bottom:10px; border-bottom:1px solid var(--t-border)}
html:root #agentDesk .ad-brand h1{font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--t-text)}
html:root #agentDesk .hero-title h3{font-size:34px; font-weight:700; letter-spacing:-.03em}
html:root #agentDesk :is(.num, .ticket .v, .stat .v, .appr-lv, td.r, .hist .d){font-family:var(--t-mono); font-variant-numeric:tabular-nums}
/* pulsanti: ghost con bordo sottile; primario pieno glicine; rifiuta rosso tenue; attivo glicine */
html:root :is(#agentDesk, #nrcAskSlot) button{font-family:var(--t-sans); font-weight:600; border-radius:10px; padding:8px 14px; color:var(--t-text); background:transparent; border:1px solid var(--t-border-hi); transition:background .18s var(--t-ease), border-color .18s var(--t-ease)}
html:root :is(#agentDesk, #nrcAskSlot) button:hover{background:color-mix(in srgb, var(--t-text) 6%, transparent); border-color:var(--t-muted)}
html:root :is(#agentDesk, #nrcAskSlot) :is(button.primary, button.approve){background:var(--t-accent)!important; color:var(--t-on-accent)!important; border-color:transparent!important; font-weight:700}
html:root :is(#agentDesk, #nrcAskSlot) :is(button.primary, button.approve):hover{filter:brightness(1.08)}
html:root #agentDesk :is([data-reject], [data-reject-yes], button.danger){background:color-mix(in srgb, var(--t-down) 12%, transparent); color:color-mix(in srgb, var(--t-down) 70%, var(--t-text)); border-color:color-mix(in srgb, var(--t-down) 30%, transparent)}
html:root #agentDesk :is([data-reject], [data-reject-yes], button.danger):hover{background:color-mix(in srgb, var(--t-down) 20%, transparent)}
html:root #agentDesk :is(.tabs button[aria-pressed="true"], .pat-pill[aria-pressed="true"]){background:var(--t-active-bg); color:var(--t-text); border-color:var(--t-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 40%, transparent)}
html:root #agentDesk :is(.tf button, .pat-pill){border-radius:8px; padding:4px 10px; font-size:12px}
html:root #agentDesk button.linkish{border:0; padding:4px 0; color:var(--t-accent); background:none}
html:root :is(#agentDesk, #nrcAskSlot) :is(button, a, input, select, [tabindex]):focus-visible{outline:2px solid var(--t-accent); outline-offset:2px}
/* campi */
html:root :is(#agentDesk, #nrcAskSlot) :is(input, select){font-family:var(--t-sans); color:var(--t-text); background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:10px}
html:root :is(#agentDesk, #nrcAskSlot) :is(input, select):focus{border-color:var(--t-accent); outline:none}
/* badge a pillola: fondo al 15% del colore, testo pieno */
html:root #agentDesk .pill{border-radius:999px; font-weight:600; font-size:11.5px; padding:3px 10px; background:color-mix(in srgb, var(--t-muted) 15%, transparent); color:var(--t-muted)}
html:root #agentDesk .pill.up{background:var(--ad-up-soft); color:var(--t-up)}
html:root #agentDesk .pill.down{background:var(--ad-down-soft); color:var(--t-down)}
html:root #agentDesk .pill.wait{background:var(--ad-wait-soft); color:var(--t-warn)}
html:root #agentDesk .pill.acc{background:var(--ad-accent-soft); color:var(--t-accent)}
/* piano da approvare: filo glicine a sinistra e anello sottile */
html:root #agentDesk .appr-card:not(.done){border-color:transparent; box-shadow:inset 3px 0 0 var(--t-accent), 0 0 0 1px color-mix(in srgb, var(--t-accent) 35%, transparent)}
html:root #agentDesk .appr-card.done{opacity:.85}
html:root #agentDesk tbody tr[aria-selected="true"] td{background:color-mix(in srgb, var(--t-accent) 10%, transparent)}
html:root #agentDesk tbody tr[data-sym]:hover td{background:color-mix(in srgb, var(--t-text) 4%, transparent)}
html:root #agentDesk :is(.chart, .chart-empty){border-radius:var(--t-radius-sm)}
html:root #agentDesk :is(.pat-progress span, .bar i){background:var(--t-accent)}
/* "Chiedi a Claude": riquadro della rete neurale */
/* nella barra laterale: riquadro opaco (colore del vetro sopra lo sfondo), così se la barra scorre il menu non traspare */
html:root #nrcAskSlot{--ad-side-bg:#15171D; font-family:var(--t-sans)}
html:root #nrcAskSlot .ask-row{background:var(--ad-side-bg); border:1px solid var(--t-border); border-radius:var(--t-radius-sm); box-shadow:var(--t-shadow); transition:border-color .25s var(--t-ease)}
html:root #nrcAskSlot .ask-row:hover{border-color:var(--t-border-hi)}
html:root :is(#agentDesk, #nrcAskSlot) .ask-net{background:color-mix(in srgb, var(--t-text) 2.5%, transparent); border:1px solid var(--t-border)}
html:root :is(#agentDesk, #nrcAskSlot) .ask-label{font-size:13px; font-weight:700}
html:root :is(#agentDesk, #nrcAskSlot) .ask-state{color:var(--t-muted)}
html:root :is(#agentDesk, #nrcAskSlot) .ask-controls [data-id="askMic"][aria-pressed="true"]{border-color:var(--t-accent); color:var(--t-accent); background:var(--t-active-bg)}
@media (max-width:640px){
  html:root #agentDesk .panel{padding:14px; border-radius:12px}
  html:root #agentDesk .hero-title h3{font-size:28px}
  html:root #agentDesk .ad-head{gap:8px}
}
@media (prefers-reduced-motion: reduce){ html:root #agentDesk *{transition:none!important} }

/* =================== 2 · watchlist dell'agente =================== */
html:root #awlSection{
  --awl-panel:var(--t-surface); --awl-ink:var(--t-text); --awl-muted:var(--t-muted); --awl-line:var(--t-border); --awl-chip:var(--t-surface-2);
  --awl-accent:var(--t-accent); --awl-accent-soft:color-mix(in srgb, var(--t-accent) 15%, transparent);
  --awl-up:var(--t-up); --awl-up-soft:color-mix(in srgb, var(--t-up) 15%, transparent);
  --awl-down:var(--t-down); --awl-down-soft:color-mix(in srgb, var(--t-down) 15%, transparent);
  --awl-wait:var(--t-warn); --awl-wait-soft:color-mix(in srgb, var(--t-warn) 15%, transparent);
  --awl-data:var(--t-mono);
  font-family:var(--t-sans); background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur);
  scrollbar-width:thin; scrollbar-color:var(--t-border-hi) transparent;
}
/* in colonna accanto al grafico: niente secondo vetro sopra il pannello, solo un filo che la separa */
html:root #agentDesk .ad-wl-slot #awlSection{background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:var(--t-radius-sm)}
html:root #awlSection h2{display:flex; align-items:center; gap:9px; font-size:11px; font-weight:650; letter-spacing:.16em; text-transform:uppercase; color:var(--t-muted)}
html:root #awlSection h2::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--t-muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-muted) 18%, transparent)}
html:root #awlSection .awl-head{padding-bottom:10px; border-bottom:1px solid var(--t-border)}
/* schede compatte: simbolo grande, freccia, badge; prezzo e distanza in monospazio */
html:root #awlSection .awl-card{background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:var(--t-radius-sm); padding:10px 12px; transition:border-color .18s var(--t-ease), background .18s var(--t-ease)}
html:root #awlSection .awl-card:hover{border-color:var(--t-border-hi); background:color-mix(in srgb, var(--t-text) 4%, transparent)}
html:root #awlSection .awl-card[aria-current="true"]{border-color:var(--t-accent); box-shadow:inset 3px 0 0 var(--t-accent)}
html:root #awlSection .awl-card:focus-visible{outline:2px solid var(--t-accent); outline-offset:2px}
html:root #awlSection .awl-sym{font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--t-text)}
html:root #awlSection :is(.awl-px, .awl-dist){font-family:var(--t-mono); font-variant-numeric:tabular-nums}
html:root #awlSection .awl-px{font-size:14px; font-weight:600; color:var(--t-text)}
html:root #awlSection .awl-chip{border-radius:999px; font-weight:600; padding:2px 9px}
html:root #awlSection .awl-acts button{font-family:var(--t-sans); font-weight:600; border-radius:9px; padding:5px 11px; color:var(--t-text); background:transparent; border:1px solid var(--t-border-hi)}
html:root #awlSection .awl-acts button:hover{border-color:var(--t-muted); background:color-mix(in srgb, var(--t-text) 6%, transparent)}

/* =================== 3 · approfondimento azienda =================== */
html:root #companyDesk{
  --ad-bg:var(--t-surface-2); --ad-panel:var(--t-chart-bg); --ad-ink:var(--t-text); --ad-muted:var(--t-muted); --ad-line:var(--t-border);
  --ad-accent:var(--t-accent); --ad-accent-soft:color-mix(in srgb, var(--t-accent) 15%, transparent);
  --ad-up:var(--t-up); --ad-up-soft:color-mix(in srgb, var(--t-up) 15%, transparent);
  --ad-down:var(--t-down); --ad-down-soft:color-mix(in srgb, var(--t-down) 15%, transparent);
  --ad-wait:var(--t-warn); --ad-wait-soft:color-mix(in srgb, var(--t-warn) 15%, transparent);
  --ad-grid:var(--t-grid); --ad-f-data:var(--t-mono); --ad-r:var(--t-radius-sm);
  font-family:var(--t-sans); color:var(--t-text); padding:18px 20px;
  background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur); transition:border-color .25s var(--t-ease);
}
html:root #companyDesk:hover{border-color:var(--t-border-hi)}
html:root #companyDesk .cd-head{padding-bottom:10px; border-bottom:1px solid var(--t-border)}
html:root #companyDesk .cd-eyebrow{display:flex; align-items:center; gap:9px; font-size:11px; font-weight:650; letter-spacing:.16em; color:var(--t-muted)}
html:root #companyDesk .cd-eyebrow::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--t-muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-muted) 18%, transparent)}
html:root #companyDesk h2{font-weight:700; letter-spacing:-.02em}
html:root #companyDesk h4{font-size:11px; font-weight:650; letter-spacing:.14em; color:var(--t-muted)}
html:root #companyDesk :is(.cd-card, .cd-tile){background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:var(--t-radius-sm); transition:border-color .18s var(--t-ease)}
html:root #companyDesk .cd-card:hover{border-color:var(--t-border-hi)}
html:root #companyDesk .cd-empty-profile{border-color:color-mix(in srgb, var(--t-accent) 40%, transparent); background:var(--t-active-bg)}
html:root #companyDesk :is(.num, .cd-price b, .cd-tile b, .cd-dl dd, .cd-table td){font-family:var(--t-mono); font-variant-numeric:tabular-nums}
html:root #companyDesk .cd-logo{background:var(--t-surface-2)}
html:root #companyDesk .cd-range span{background:var(--t-text)}
html:root #companyDesk :is(.cd-table td, .cd-news li){border-color:var(--t-border)}
html:root #companyDesk button{font-family:var(--t-sans); font-weight:600; border-radius:10px; padding:8px 14px; color:var(--t-text); background:transparent; border:1px solid var(--t-border-hi); transition:background .18s var(--t-ease), border-color .18s var(--t-ease)}
html:root #companyDesk button:hover{background:color-mix(in srgb, var(--t-text) 6%, transparent); border-color:var(--t-muted)}
html:root #companyDesk :is(button.primary, button.approve){background:var(--t-accent)!important; color:var(--t-on-accent)!important; border-color:transparent!important; font-weight:700}
html:root #companyDesk :is(button.primary, button.approve):hover{filter:brightness(1.08)}
html:root #companyDesk :is(input, select){font-family:var(--t-sans); color:var(--t-text); background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:10px}
html:root #companyDesk :is(input, select):focus{border-color:var(--t-accent); outline:none}
html:root #companyDesk :is(button, a, input, select):focus-visible{outline:2px solid var(--t-accent); outline-offset:2px}
html:root #companyDesk :is(.cd-pill, .cd-badge){border-radius:999px; padding:2px 9px}
html:root #companyDesk .cd-divbars i{background:var(--t-accent)}
html:root #companyDesk a{color:inherit; text-decoration-color:var(--t-border-hi); text-underline-offset:3px}
html:root #companyDesk a:hover{color:var(--t-accent); text-decoration-color:currentColor}
@media (max-width:640px){ html:root #companyDesk{padding:14px; border-radius:12px} }
@media (prefers-reduced-motion: reduce){ html:root #companyDesk, html:root #companyDesk *{transition:none!important} }

/* =================== 4 · cTrader e Data Quality =================== */
html:root #brokerSection{font-family:var(--t-sans); color:var(--t-text)}
html:root #brokerSection .broker-status-card{
  background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur); transition:border-color .25s var(--t-ease);
}
html:root #brokerSection .broker-status-card:hover{border-color:var(--t-border-hi)}
html:root #brokerSection .broker-account-inline{border-top-color:var(--t-border)}
html:root #brokerSection .eyebrow{display:flex; align-items:center; gap:9px; color:var(--t-muted); font-size:11px; font-weight:650; letter-spacing:.16em}
html:root #brokerSection .eyebrow::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--t-muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-muted) 18%, transparent)}
html:root #brokerSection #brokerAccountTitle{font-weight:700; letter-spacing:-.02em; color:var(--t-text)}
html:root #brokerSection .muted{color:var(--t-muted)}
/* numeri del conto: celle interne, etichetta piccola, valore in monospazio */
html:root #brokerSection .broker-kpis div{background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:var(--t-radius-sm)}
html:root #brokerSection .broker-kpis span{color:var(--t-muted); font-weight:600; letter-spacing:.12em}
html:root #brokerSection .broker-kpis b{font-family:var(--t-mono); font-variant-numeric:tabular-nums; font-size:15px; font-weight:600}
/* pulsanti: ghost; "Aggiorna broker" primario glicine; "Disconnetti" rosso tenue; provider attivo glicine */
html:root #brokerSection button{font-family:var(--t-sans); font-weight:600; border-radius:10px; color:var(--t-text); background:transparent; border:1px solid var(--t-border-hi); box-shadow:none; transform:none}
html:root #brokerSection button:hover{background:color-mix(in srgb, var(--t-text) 6%, transparent); border-color:var(--t-muted)}
html:root #brokerSection :is(button.primary, button.approve){background:var(--t-accent)!important; color:var(--t-on-accent)!important; border-color:transparent!important; font-weight:700}
html:root #brokerSection :is(#brokerDisconnectBtn, .danger-soft){background:color-mix(in srgb, var(--t-down) 12%, transparent)!important; color:color-mix(in srgb, var(--t-down) 70%, var(--t-text))!important; border-color:color-mix(in srgb, var(--t-down) 30%, transparent)!important}
html:root #brokerSection .broker-provider-strip button.active{background:var(--t-active-bg)!important; color:var(--t-text)!important; border-color:var(--t-accent)!important}
html:root #brokerSection :is(button, a, input, select):focus-visible{outline:2px solid var(--t-accent); outline-offset:2px}
/* stato della connessione: pillola con puntino */
html:root :is(#brokerSection, .topbar) .status-badge{border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; color:var(--t-text); border:0; background:color-mix(in srgb, var(--t-muted) 15%, transparent)}
html:root :is(#brokerSection, .topbar) .status-badge.on{background:color-mix(in srgb, var(--t-up) 15%, transparent); color:var(--t-up)}
html:root :is(#brokerSection, .topbar) .status-badge.error{background:color-mix(in srgb, var(--t-down) 15%, transparent); color:var(--t-down)}
html:root :is(#brokerSection, .topbar) .status-badge.on i{background:var(--t-up); box-shadow:0 0 8px var(--t-up)}
html:root :is(#brokerSection, .topbar) .status-badge.error i{background:var(--t-down); box-shadow:0 0 8px var(--t-down)}
/* strisce: stato cTrader (nell'intestazione), piano passato al broker, Provider e Data Quality */
html:root :is(#nrcControlBrokerStatus, #nrcControlProviderHealth, #nrcSelectedPlanHandoff){
  font-family:var(--t-sans); background:var(--t-surface-2)!important; border:1px solid var(--t-border)!important; border-radius:12px!important;
  color:var(--t-text)!important; box-shadow:none!important;
}
html:root #nrcControlBrokerStatus{box-shadow:inset 3px 0 0 var(--t-up)!important}
html:root #nrcControlProviderHealth{background:var(--t-surface)!important}
html:root #nrcControlProviderHealth small{color:var(--t-muted)}
html:root #nrcControlProviderHealth .nrc-quality-badge{border-radius:999px; border:0; padding:3px 9px; font-weight:600; font-style:normal; letter-spacing:.02em; background:color-mix(in srgb, var(--t-muted) 15%, transparent); color:var(--t-muted)}
html:root #nrcControlProviderHealth .nrc-quality-badge:is([data-status="AVAILABLE"], [data-status="GOOD"]){background:color-mix(in srgb, var(--t-up) 15%, transparent); color:var(--t-up)}
html:root #nrcControlProviderHealth .nrc-quality-badge[data-status="DEGRADED"]{background:color-mix(in srgb, var(--t-warn) 15%, transparent); color:var(--t-warn)}
html:root #nrcControlProviderHealth .nrc-quality-badge:is([data-status="UNAVAILABLE"], [data-status="REJECT"]){background:color-mix(in srgb, var(--t-down) 15%, transparent); color:var(--t-down)}
/* telefono: scheda del conto e striscia Data Quality restano nello schermo (a 390px uscivano di ~70px) */
@media (max-width:640px){
  html:root :is(#brokerSection, #brokerSection .broker-status-card, #nrcControlProviderHealth){min-width:0; max-width:100%}
  html:root #brokerSection .broker-status-card{padding:14px; border-radius:12px}
  html:root #brokerSection .broker-kpis{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html:root #brokerSection :is(.broker-connection-top, .broker-connection-actions){flex-wrap:wrap}
  html:root #nrcControlProviderHealth{flex-wrap:wrap}
  html:root #nrcControlProviderHealth > *{min-width:0; overflow-wrap:anywhere}
}
@media (prefers-reduced-motion: reduce){ html:root #brokerSection *, html:root #brokerSection .broker-status-card{transition:none!important} }

/* =================== 5 · intestazione, menu e pagina =================== */
/* sfondo: colore pieno scuro e neutro, una sola sfumatura verticale appena percettibile; niente luci né griglie */
html:root body{font-family:var(--t-sans); color:var(--t-text); background:linear-gradient(180deg,#10131A 0%,#0C0E12 50%,#0A0C10 100%) fixed #0C0E12}
html:root body::before{background:none}
html:root :is(b, strong){font-variant-numeric:tabular-nums}
/* contenitori generici (intestazione, menu, modalità di investimento, widget TradingView): stesso vetro discreto */
html:root :is(.glass, .panel, .control-card){
  background:var(--t-surface); border:1px solid var(--t-border); border-radius:var(--t-radius); box-shadow:var(--t-shadow);
  -webkit-backdrop-filter:var(--t-blur); backdrop-filter:var(--t-blur); transition:border-color .25s var(--t-ease);
}
html:root :is(.glass, .panel, .control-card):hover{border-color:var(--t-border-hi)}
html:root .eyebrow{display:flex; align-items:center; gap:9px; color:var(--t-muted); font-size:11px; font-weight:650; letter-spacing:.16em}
html:root .eyebrow::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--t-muted); box-shadow:0 0 0 3px color-mix(in srgb, var(--t-muted) 18%, transparent)}
html:root .muted{color:var(--t-muted)}
html:root :is(.panel-head, .compact-head){border-bottom:1px solid var(--t-border); padding-bottom:10px}
/* striscia "Collegamento cTrader" in cima alla pagina (ha preso il posto del pannello nRc Trading AI):
   etichetta a sinistra, riga di stato del poller a destra, riquadro errori sotto a tutta larghezza */
html:root .topbar.nrc-ctrader-bar{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:8px 16px; padding:10px 14px; border-radius:16px; margin-bottom:0}
html:root .nrc-ctrader-bar .eyebrow{margin:0; white-space:nowrap}
html:root .nrc-ctrader-bar #nrcControlBrokerStatus{display:block; margin:0!important; min-height:44px; padding:6px 12px!important; min-width:0; line-height:1.6}
html:root .nrc-ctrader-bar #nrcControlBrokerStatus :is(select, button){vertical-align:middle}
html:root .nrc-ctrader-bar #nrcControlBrokerStatus select{max-width:100%}
html:root .nrc-ctrader-bar #errorBox{grid-column:1 / -1; margin:0}
/* menu laterale */
html:root .brand-icon{background:var(--t-accent); color:var(--t-on-accent); border-radius:12px}
html:root .brand-mini h2{font-weight:700; letter-spacing:-.02em}
html:root .sidebar nav button{text-align:left; border-radius:11px; background:transparent; border:1px solid transparent; color:var(--t-text); font-weight:600}
html:root .sidebar nav button:hover{background:var(--t-surface-2); border-color:var(--t-border)}
html:root .sidebar nav button:focus-visible{border-color:var(--t-accent)}
/* schermata attiva (app_shell.js, aria-current="page"): glicine, sul PC come sul telefono */
html:root .sidebar nav button[aria-current="page"]{color:var(--t-text); background:var(--t-active-bg); border-color:color-mix(in srgb, var(--t-accent) 30%, transparent)}
html:root .sidebar{scrollbar-width:thin; scrollbar-color:var(--t-border-hi) transparent}
/* pulsanti generici: ghost; primario glicine pieno; pericolosi rosso tenue */
html:root button{font-family:var(--t-sans); font-weight:600; border-radius:10px; color:var(--t-text); background:transparent; border:1px solid var(--t-border-hi); box-shadow:none; transition:background .18s var(--t-ease), border-color .18s var(--t-ease)}
html:root button:hover{background:color-mix(in srgb, var(--t-text) 6%, transparent); border-color:var(--t-muted); transform:none}
html:root :is(.primary, .approve){background:var(--t-accent)!important; color:var(--t-on-accent)!important; border-color:transparent!important; font-weight:700}
html:root :is(.primary, .approve):hover{filter:brightness(1.08)}
html:root :is(.danger-soft, .hard-danger, button.danger){background:color-mix(in srgb, var(--t-down) 12%, transparent)!important; color:color-mix(in srgb, var(--t-down) 70%, var(--t-text))!important; border-color:color-mix(in srgb, var(--t-down) 30%, transparent)!important}
html:root :is(button, a, input, select, textarea, [tabindex]):focus-visible{outline:2px solid var(--t-accent); outline-offset:2px}
html:root :is(input, select, textarea){font-family:var(--t-sans); color:var(--t-text); background:var(--t-surface-2); border:1px solid var(--t-border); border-radius:10px}
html:root :is(input, select, textarea):focus{border-color:var(--t-accent); outline:none}
html:root .status-badge{border-radius:999px; padding:6px 12px; font-size:12px; font-weight:600; border:0; background:color-mix(in srgb, var(--t-muted) 15%, transparent)}
/* modalità di investimento: scelta attiva in glicine */
html:root .nrc-allocation-presets button.is-selected{border-color:var(--t-accent)!important; background:var(--t-active-bg)!important; color:var(--t-text)!important; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--t-accent) 40%, transparent)}
html:root .nrc-investment-subsection{border-top-color:var(--t-border)}
html:root .nrc-system-leverage strong{font-family:var(--t-mono)}
/* telefono: nessun trabocco orizzontale a 390px */
@media (max-width:640px){
  html:root :is(.glass, .panel){border-radius:12px}
  html:root .nrc-investment-limits-grid{grid-template-columns:minmax(0, 1fr)}
  html:root .nrc-allocation-presets{grid-template-columns:repeat(3, minmax(0, 1fr))}
  html:root #companyDesk .cd-controls label{flex:1 1 100%; min-width:0}
  html:root #companyDesk .cd-controls select{flex:1; min-width:0; max-width:100%}
}
@media (prefers-reduced-motion: reduce){
  html:root *, html:root *::before, html:root *::after{transition:none!important; scroll-behavior:auto!important}
}

/* =================== 6 · telefono: menu (sotto 768px) =================== */
/* La barra laterale diventa una riga compatta in cima (logo + account) e le tre voci del menu (Oggi, Analisi, Mercato) una barra
   fissa in basso, a portata di pollice. Niente effetto vetro sulla barra: backdrop-filter farebbe da
   riferimento per la nav fissa, che resterebbe dentro la barra invece che sul fondo dello schermo.
   "Chiedi a Claude" è il pulsante tondo sopra la barra, che apre un foglio dal basso (app_shell.js/.css).
   Aree sicure dell'iPhone (viewport-fit=cover): notch in alto, barra Home in basso. */
@media (max-width:767px){
  html:root body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  html:root .sidebar.glass{
    position:relative; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
    width:auto; max-height:none; margin:calc(10px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    padding:10px 12px; border-radius:14px; overflow:visible!important;
    -webkit-backdrop-filter:none; backdrop-filter:none; background:#13161C;
  }
  html:root .sidebar .brand-mini{flex:none; order:1!important}
  html:root .sidebar .brand-icon{width:36px; height:36px; border-radius:10px}
  html:root .sidebar .brand-mini h2{font-size:17px}
  html:root .sidebar #nrcAccountWidget.nrc-account-widget{flex:1 1 0; min-width:0; margin:0!important; order:2!important}
  html:root .sidebar nav{
    position:fixed!important; left:0; right:0; bottom:0; z-index:60; margin:0;
    display:grid!important; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px;
    padding:6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background:#11131A; border-top:1px solid var(--t-border); box-shadow:0 -12px 30px -18px rgba(0,0,0,.8);
  }
  html:root .sidebar nav button{
    min-height:52px; width:auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center;
    padding:5px 2px; font-size:11.5px; line-height:1.1; white-space:normal; border-radius:12px; border:1px solid transparent; color:var(--t-muted);
  }
  html:root .sidebar nav button .nav-ico{flex:none}
  /* schermata attiva (app_shell.js, aria-current="page"): glicine */
  html:root .sidebar nav button[aria-current="page"]{color:var(--t-accent); background:var(--t-active-bg); border-color:color-mix(in srgb, var(--t-accent) 30%, transparent)}
  html:root .sidebar nav button:active{background:var(--t-active-bg); border-color:color-mix(in srgb, var(--t-accent) 40%, transparent)}
}

/* =================== 7 · telefono: contenitori (sotto 768px) =================== */
/* Una colonna, contenitori a tutta larghezza con 12px di margine (più le aree sicure in orizzontale),
   padding e spazi più compatti, titoli più piccoli ma leggibili senza zoom, testo secondario almeno 14px.
   Stesso ordine delle sezioni del PC. */
@media (max-width:767px){
  html:root .main{
    width:auto; max-width:none; margin:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    padding:12px 0 24px; row-gap:12px;
  }
  html:root :is(.glass, .panel, #agentDesk .panel, #companyDesk, #awlSection, #agentCapitalSection, #brokerSection .broker-status-card){
    padding:14px; border-radius:14px;
  }
  html:root #agentDesk .ad-top{gap:12px}
  html:root #agentDesk .ad-plan-body{gap:12px}
  html:root #agentDesk .panel{gap:10px}
  /* striscia Collegamento cTrader: etichetta sopra la riga di stato, compatta, subito sotto la riga in alto */
  html:root .topbar.nrc-ctrader-bar{grid-template-columns:minmax(0, 1fr); gap:6px; margin:0; padding:10px 12px}
  html:root .topbar.nrc-ctrader-bar{box-shadow:inset 3px 0 0 var(--t-up)}
  html:root .nrc-ctrader-bar #nrcControlBrokerStatus{padding:0!important; border:0!important; background:none!important; box-shadow:none!important;
    min-height:0; font-size:13px!important; line-height:1.5}
  html:root .nrc-ctrader-bar #nrcControlBrokerStatus :is(select, button){margin:3px 0; padding-top:4px; padding-bottom:4px; vertical-align:middle}
  /* titoli e testi */
  html:root :is(#agentCapitalSection h2, #companyDesk h2, #brokerAccountTitle){font-size:18px; line-height:1.25}
  html:root #agentDesk .ad-brand h1{font-size:20px}
  html:root #agentDesk .hero-title h3{font-size:26px}
  html:root :is(.muted, #agentDesk .muted, #agentCapitalSection .muted, .awl-sub){font-size:14px; line-height:1.45}
  html:root #agentDesk .small, html:root #awlSection :is(.awl-meta, .awl-why){font-size:13px}
  html:root :is(.panel-head, .compact-head, #agentDesk .panel-head){flex-wrap:wrap; gap:8px}
  html:root #agentDesk .ad-head{gap:6px 10px; padding:0 2px}
  html:root .nrc-provider-quality-strip{font-size:13px}
}

/* =================== 8 · telefono: grafico e watchlist (sotto 768px) =================== */
/* Grafico dell'agente a tutta larghezza, alto 360-420px (al massimo il 60% dello schermo); la watchlist
   resta sotto il grafico (agent_desk.css la porta sotto già da 1100px) come lista di schede a una colonna. */
@media (max-width:767px){
  /* grafico alto 360-420px secondo la larghezza, mai oltre il 60% dello schermo; quasi a filo del riquadro (4px) */
  html:root #agentDesk :is(.chart, .chart-empty){height:min(clamp(360px, 100vw, 420px), 60vh); height:min(clamp(360px, 100vw, 420px), 60svh); width:auto; margin:0 -10px}
  html:root #companyDesk .cd-chart{height:280px}
  html:root #awlSection .awl-grid{grid-template-columns:minmax(0, 1fr); gap:10px}
  html:root #agentDesk .ad-wl-slot #awlSection{padding:12px 0 0; border:0; border-top:1px solid var(--t-border); border-radius:0}
  html:root #awlSection .awl-card{padding:12px 14px}
  html:root #awlSection .awl-top{gap:6px 8px}
  html:root #awlSection .awl-px{font-size:15px}
  html:root #agentDesk .pat-card-grid{gap:8px}
}

/* =================== 9 · telefono: tabelle e dati larghi (sotto 768px) =================== */
/* Mai scorrimento orizzontale della pagina: lo scanner resta una tabella che scorre SOLO nel suo riquadro,
   con la colonna dell'asset ferma a sinistra; i livelli dei piani e i numeri del conto diventano schede su
   due colonne; le griglie di notizie, calendario e metodo scendono a una colonna intera. */
@media (max-width:767px){
  html:root #agentDesk .scan-wrap{overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    margin:0 -14px; padding:0 14px; scrollbar-width:thin}
  html:root #agentDesk .scan-wrap table:not(.mini) :is(th, td):first-child{position:sticky; left:0; z-index:1; background:#16181E}
  html:root #agentDesk .scan-wrap table:not(.mini) td:first-child{box-shadow:6px 0 8px -6px rgba(0,0,0,.6)}
  html:root #agentDesk .scan-wrap tbody tr[aria-selected="true"] td:first-child{background:#1C2030}   /* tinta glicine opaca sulla cella fissa */
  html:root #agentDesk .appr-lv{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px 12px}
  html:root #agentDesk .appr-row{gap:6px 10px}
  html:root #brokerSection .broker-kpis{grid-template-columns:repeat(2, minmax(0, 1fr))}
  html:root #agentDesk .news{grid-template-columns:minmax(0, 1fr)}
  html:root #agentDesk .cal{grid-template-columns:minmax(0, 1fr)}
  html:root #agentDesk .two{grid-template-columns:minmax(0, 1fr)}
  html:root #agentDesk .row{flex-wrap:wrap}
  html:root #companyDesk .cd-table{display:block; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch}
  html:root #companyDesk :is(.cd-groups, .cd-tiles){grid-template-columns:minmax(0, 1fr)}
  html:root :is(#agentDesk, #companyDesk, #brokerSection) :is(dd, .v){overflow-wrap:anywhere}
  html:root #agentDesk .scan-wrap table:not(.mini) td:not(.reason){white-space:nowrap}   /* simboli e numeri mai spezzati */
}

/* =================== 10 · telefono: campi e pulsanti (sotto 768px) =================== */
/* Aree toccabili di almeno 44px, campi a 16px (sotto, iOS ingrandisce la pagina quando li tocchi),
   pulsanti principali distanziati per non toccarli per sbaglio: Start AI a tutta riga, Approva e Rifiuta
   larghi e separati, Salva a tutta riga. */
@media (max-width:767px){
  html:root :is(.main, .sidebar, #agentDesk, #companyDesk, #awlSection, #agentCapitalSection, #brokerSection, #nrcAskSlot) :is(button, select, input:not([type="checkbox"]):not([type="radio"])){
    min-height:44px;
  }
  html:root :is(.main, .sidebar, #agentDesk, #companyDesk, #agentCapitalSection, #brokerSection, #nrcAskSlot) :is(input, select, textarea){font-size:16px}
  html:root :is(.main, #agentDesk, #companyDesk) select{min-width:44px}
  html:root :is(#agentDesk, #nrcAskSlot) .ask-controls [data-id="askMic"]{width:44px; height:44px}
  html:root #agentDesk :is(.tf button, .pat-pill){min-width:44px; padding:6px 12px; font-size:13px}
  html:root #agentDesk :is(.tabs, .pat-pills){gap:8px}
  /* grafico dell'agente: comandi da pollice. Asset a riga intera, timeframe in griglia da 4, livelli da 3 */
  html:root #agentDesk .ad-plan .ad-actions{display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; width:100%}
  html:root #agentDesk .ad-plan .ad-actions > .pill{justify-self:start}
  html:root #agentDesk .asset-sel{display:flex; align-items:center; gap:10px; min-width:0}
  html:root #agentDesk .asset-sel select{flex:1 1 auto; min-width:0}
  html:root #agentDesk .tabs.tf{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px}
  html:root #agentDesk .tf button{font-size:15px; font-weight:700}
  html:root #agentDesk .pat-pills{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); flex:1 1 100%}
  html:root #agentDesk .pat-pill{min-height:44px; padding:6px 4px}
  html:root #nrcAccountButton.nrc-account-button{min-height:44px!important}
  /* piani da approvare: Approva e Rifiuta larghi e lontani tra loro */
  html:root #agentDesk .appr-card :is([data-act], [data-confirm], [data-reject-form]){gap:16px}
  html:root #agentDesk .appr-card [data-act] button{flex:1 1 0}
  html:root #agentDesk .appr-card :is([data-confirm], [data-reject-form]) :is(button, input){flex:1 1 140px}
  html:root #agentDesk .ad-actions{gap:12px}
  /* capitale per l'agente: percentuali alte 44px, Salva a tutta riga */
  html:root #agentCapitalSection .ac-presets button{min-height:44px}
  html:root #agentCapitalSection #acSave{width:100%}
  html:root #awlSection .awl-acts button{min-height:44px; padding:8px 14px}
  html:root #brokerSection .broker-connection-actions{gap:10px}
}