/* ============================================================================
   DEVELOP — DESIGN SYSTEM (condiviso)  ·  v001 · 26 giu 2026
   Fonte di verità: estratto da developcontroller.com (CF Worker, LIVE).
   Tema brand = "blueprint paper" CHIARO + accento ORO (Develop = gold).
   Font: Bebas Neue (display) · DM Sans (testo) · DM Mono (mono).
   LEAN: solo vanilla CSS, niente build. Usa SEMPRE le variabili qui sotto.
   Dark dashboard? aggiungi  <html data-theme="dark">  (override in fondo).
   ============================================================================ */

/* Font del sito = self-hosted (no Google CDN, privacy): vedi shared/fonts.css.
   Ogni pagina linka PRIMA shared/fonts.css e POI questo file. */

:root{
  /* ---- BRAND (verbatim da developcontroller.com) ---- */
  --ink:#1a1a1a;          /* near-black: testo + elementi scuri        */
  --paper:#F7F6F2;        /* sfondo: carta calda off-white             */
  --cement:#EDECE8;       /* superficie: pannello leggermente piu scuro*/
  --wire:#D8D6D0;         /* bordi + linee griglia "blueprint"         */
  --gold:#C8960A;         /* ACCENTO primario (Develop = oro)          */
  --gold-l:#F0B820;       /* oro chiaro (fine gradiente, hover)        */
  --white:#FFFFFF;
  --ink-soft:#888680;     /* testo muted (grigio caldo)                */
  /* accenti famiglia prodotti (dal sito) */
  --uni-accent:#4A90E2;   /* University = blu  */
  --lab-accent:#9C6ADE;   /* Laboratorio = viola */

  /* ---- SEMANTICI APP (tema chiaro = default) ---- */
  --bg:var(--paper);
  --surface:var(--cement);
  --card:var(--white);
  --line:var(--wire);
  --txt:var(--ink);
  --muted:var(--ink-soft);
  --accent:var(--gold);
  --accent-l:var(--gold-l);
  --on-accent:#1a1a1a;    /* testo SU oro: ink (contrasto migliore del bianco) */
  --ink-on-dark:#ffffff;  /* testo su superfici ink (pill scuri) */

  /* stato */
  --ok:#2e7d32;  --ok-bg:#e6f4ea;
  --warn:#856404; --warn-bg:#fff3cd;
  --err:#c62828; --err-bg:#fdecec;

  /* ---- TIPOGRAFIA ---- */
  --font-display:'Bebas Neue',Impact,sans-serif;          /* titoloni condensati */
  --font-main:'DM Sans',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:30px;
  --lh:1.6;

  /* ---- RAGGI (verbatim dal sito) ---- */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* ---- SPAZIATURA ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:40px;

  /* ---- OMBRE (scala dal sito) ---- */
  --sh-sm:0 4px 24px rgba(0,0,0,.08);
  --sh-md:0 12px 40px rgba(0,0,0,.10);
  --sh-lg:0 32px 80px rgba(0,0,0,.18);
  --sh-gold:0 8px 32px rgba(200,150,10,.35);

  /* ---- GRADIENTI / TRANSIZIONI ---- */
  --grad-gold:linear-gradient(135deg,var(--gold),var(--gold-l));
  --grad-ink:linear-gradient(135deg,#1a1a1a,#2a2a2a);
  --tr:.2s ease;

  /* griglia blueprint (sfondo): usa su body o .grid-bg */
  --grid:linear-gradient(var(--wire) 1px,transparent 1px),
         linear-gradient(90deg,var(--wire) 1px,transparent 1px);
  --grid-size:32px 32px;
}

/* =================== BASE =================== */
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-main);
  font-size:16px;
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* sfondo "blueprint": metti class .grid-bg sul body o un contenitore */
.grid-bg{background-image:var(--grid);background-size:var(--grid-size)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* =================== TIPOGRAFIA =================== */
h1,.h1{font-family:var(--font-display);font-weight:400;letter-spacing:1px;
  font-size:var(--fs-2xl);line-height:1.05;margin:8px 0 4px}
h2,.h2{font-family:var(--font-display);font-weight:400;letter-spacing:.5px;
  font-size:var(--fs-xl);margin:0 0 6px}
.brand{font-family:var(--font-display);font-weight:400;letter-spacing:4px;
  font-size:var(--fs-md);color:var(--accent)}
.sub{color:var(--muted);font-size:var(--fs-md)}
.muted{color:var(--muted);font-size:var(--fs-sm)}
.mono{font-family:var(--font-mono)}
.section-h{font-size:var(--fs-sm);font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:1px;margin:var(--sp-6) 0 var(--sp-3)}

/* =================== HEADER =================== */
.header{display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}

/* =================== CARD / SUPERFICI =================== */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--sh-sm)}
.banner{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 14px;font-size:var(--fs-xs);color:var(--muted)}

/* =================== BOTTONI =================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:var(--font-main);font-size:var(--fs-sm);font-weight:600;cursor:pointer;
  padding:10px 16px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--card);color:var(--txt);transition:filter var(--tr),background var(--tr)}
.btn:hover{background:var(--surface)}
.btn:disabled{opacity:.6;cursor:default}
.btn-primary{background:var(--grad-gold);color:var(--on-accent);border-color:transparent;
  font-weight:700;box-shadow:var(--sh-gold)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-dark{background:var(--ink);color:var(--ink-on-dark);border-color:var(--ink);
  border-radius:var(--r-pill);font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  font-size:var(--fs-xs);padding:9px 22px}
.btn-dark:hover{filter:brightness(1.15)}
.btn-ghost{background:transparent}

/* =================== INPUT =================== */
.input,input:not([type=checkbox]):not([type=radio]),textarea,select{
  width:100%;padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--white);color:var(--txt);
  font-family:var(--font-mono);font-size:var(--fs-sm)}
.input:focus,input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,150,10,.15)}
label{display:block;font-size:var(--fs-xs);text-transform:uppercase;
  letter-spacing:.5px;color:var(--muted);margin-top:var(--sp-3)}
.search{width:100%;padding:13px 14px;border-radius:var(--r-md);
  border:1px solid var(--line);background:var(--white);color:var(--txt);
  font-family:var(--font-main);font-size:var(--fs-md)}

/* =================== STATO / PILL / TAG =================== */
.status{font-size:var(--fs-xs);color:var(--muted)}
.status.ok{color:var(--ok)} .status.warn{color:var(--warn)} .status.err{color:var(--err)}
.pill,.tag{display:inline-block;font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.pill.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-bg)}
.pill.err{color:var(--err);border-color:var(--err);background:var(--err-bg)}
.pill.accent{color:var(--accent);border-color:var(--accent)}

/* =================== MODULI APP/SKILL (normalizzati dalle connections) ===== */
.app{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.apphead{display:flex;align-items:center;gap:10px;padding:13px 15px;cursor:pointer;user-select:none}
.apphead:hover{background:var(--surface)}
.ico{font-size:18px}
.nm{font-weight:600;font-size:var(--fs-md)}
.cat{font-size:var(--fs-xs);color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px}
.chev{color:var(--muted);transition:transform .15s}
.app.open .chev{transform:rotate(180deg)}
.fields{display:none;padding:0 15px 15px;border-top:1px solid var(--line)}
.app.open .fields{display:block}
.methods{display:flex;gap:6px;margin:12px 0}
.mbtn{background:var(--white);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--r-sm);padding:6px 12px;font-size:var(--fs-sm);cursor:pointer}
.mbtn.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.mod{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;margin-bottom:8px;box-shadow:var(--sh-sm)}
.mod-nm{font-weight:600;font-size:var(--fs-sm)}
.mod-tag{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:2px 8px;margin-left:8px;text-transform:uppercase}
.mod-tag.agente{color:var(--accent);border-color:var(--accent)}
.mod-tag.voce{color:var(--ok);border-color:var(--ok)}
.mod-ex{font-size:var(--fs-sm);color:var(--muted);margin-top:5px;font-family:var(--font-mono)}
.cam-add{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.cam-add .full,.cam-add .save{grid-column:1/-1}
@media(max-width:760px){.cam-add{grid-template-columns:1fr}}

/* save / send bar (compat con le pagine attuali) */
.save{background:var(--grad-gold);color:var(--on-accent);border:none;border-radius:var(--r-sm);
  padding:10px 16px;font-weight:700;font-size:var(--fs-sm);cursor:pointer}
.save:hover{filter:brightness(1.06)}
.sendbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;
  padding:14px;background:linear-gradient(to top,var(--paper) 62%,transparent)}
#inviaBtn{background:var(--grad-gold);color:var(--on-accent);border:none;border-radius:var(--r-md);
  padding:14px 30px;font-weight:800;font-size:var(--fs-md);cursor:pointer;box-shadow:var(--sh-gold)}
#inviaBtn:hover{filter:brightness(1.06)} #inviaBtn:disabled{opacity:.7;cursor:default}

/* griglia 2-col → 1-col su mobile (per le pagine web) */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:760px){.grid{grid-template-columns:1fr}}

/* =================== LAYOUT / FOOTER / UTILITY =================== */
.wrap{max-width:1040px;margin:0 auto}
.foot{color:var(--muted);font-size:var(--fs-xs);text-align:center;margin-top:26px}
.actions{margin-top:14px}
.w-full{width:100%}
.row{display:flex;align-items:center;gap:var(--sp-3)}

/* =================== TOOLBAR (.bar) + LOGIN (.box) — pagine Brain ===== */
.bar{display:flex;align-items:center;gap:var(--sp-3);padding:10px 16px;
  border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.bar .brand{font-size:var(--fs-sm)}
.bar .url{flex:1;min-width:120px;color:var(--muted);font-size:var(--fs-sm);
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .btn{padding:8px 13px}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:36px 32px;width:100%;max-width:420px;text-align:center;box-shadow:var(--sh-lg)}

/* ============================================================================
   TEMA SCURO opzionale  ·  <html data-theme="dark">
   Stessi token, valori scuri. L'accento RESTA oro (coerente coi blocchi dark
   del sito, glow oro), così il brand è uniforme. Default = chiaro.
   ============================================================================ */
:root[data-theme="dark"]{
  --bg:#0c0f14;
  --surface:#10151c;
  --card:#151b24;
  --line:#26303d;
  --txt:#e8eef5;
  --muted:#8aa0b3;
  --accent:#F0B820;
  --accent-l:#FFD24A;
  --on-accent:#1a1a1a;
  --ok:#3fb950; --ok-bg:#10241a;
  --warn:#d6a700; --warn-bg:#241f0a;
  --err:#ff6b6b; --err-bg:#2a1414;
  --grid:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
         linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  --sh-sm:0 4px 24px rgba(0,0,0,.4);
  --sh-md:0 16px 48px rgba(0,0,0,.5);
  --sh-lg:0 32px 80px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .input,
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .mbtn{background:#0f141b}
:root[data-theme="dark"] .sendbar{background:linear-gradient(to top,#0c0f14 62%,transparent)}


/* ============================================================================
   SKIN AURORA MORBIDA · scelta Dani 18 lug 2026 — appesa in coda: vince in cascata
   sui default sopra. Solo CSS: nessun HTML/JS toccato, font invariati.
   ============================================================================ */

/* ===== SKIN 04 · AURORA MORBIDA (mix: Aurora + Morbida + mic KITT della Night Rider) ===== */
:root{
  --bg:#FAF7F1; --surface:rgba(255,255,255,.55); --card:rgba(255,255,255,.78);
  --line:rgba(160,140,90,.18); --txt:#33302B; --muted:#A29A89;
  --accent:#E5A50A; --accent-l:#FFD86E; --on-accent:#4D3D10;
  --ink:#33302B; --paper:#FAF7F1; --cement:rgba(255,255,255,.55);
  --wire:rgba(160,140,90,.18); --white:rgba(255,255,255,.78); --ink-soft:#A29A89;
  --gold:#E5A50A; --gold-l:#FFD86E;
  --ok:#3F9E63; --ok-bg:#E7F3EB; --warn:#B08409; --warn-bg:#FFF3CD;
  --err:#C75B4E; --err-bg:#FCEBE8;
  --grad-gold:linear-gradient(135deg,#FFD86E,#E5A50A);
  --sh-sm:0 6px 18px rgba(160,140,90,.15); --sh-gold:0 8px 22px rgba(220,170,40,.32);
  --r-sm:14px; --r-md:22px; --r-lg:26px;
}
/* aurora pastello sul fondo crema */
body{background:#FAF7F1 !important;background-image:
  radial-gradient(460px 460px at 10% 0%,rgba(124,92,255,.14),transparent 62%),
  radial-gradient(520px 520px at 100% 30%,rgba(240,184,32,.16),transparent 62%),
  radial-gradient(480px 480px at 8% 100%,rgba(45,212,191,.15),transparent 62%) !important;
  background-attachment:fixed !important}
/* card = vetro chiaro + argilla */
.card,a.lcard,.acc:not(button),.actionbox,.sens-card,.preset,.descbox,.app,.mod,.box{
  background:rgba(255,255,255,.78) !important;border:1px solid rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:22px !important;
  box-shadow:0 6px 18px rgba(160,140,90,.15),0 1.5px 4px rgba(160,140,90,.08) !important}
.top,.newsbar{background:rgba(255,255,255,.5) !important;border-color:rgba(160,140,90,.14) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#notifBtn,#avatarBtn{background:#fff !important;border:none !important;border-radius:50% !important;
  box-shadow:0 3px 10px rgba(160,140,90,.18) !important}
/* chip colorati per funzione (Aurora) in versione pastello-glow */
a.lcard{padding:9px 12px !important}
a.lcard .ic{width:30px;height:30px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:19px;flex:0 0 auto;box-shadow:inset 0 -3px 6px rgba(0,0,0,.04)}
#lk_sensori .ic,#lk_codex .ic{background:rgba(45,212,191,.22);box-shadow:0 0 12px rgba(45,212,191,.28)}
#lk_cam .ic,#lk_dash .ic{background:rgba(74,144,226,.20);box-shadow:0 0 12px rgba(74,144,226,.26)}
#lk_vision .ic,#lk_neuro .ic{background:rgba(156,106,222,.20);box-shadow:0 0 12px rgba(156,106,222,.26)}
#lk_hub .ic,#lk_catalogo .ic{background:rgba(255,138,92,.22);box-shadow:0 0 12px rgba(255,138,92,.26)}
#lk_skills .ic,#lk_geo .ic{background:rgba(52,199,89,.18);box-shadow:0 0 12px rgba(52,199,89,.22)}
#lk_kb .ic,#lk_wall .ic,#lk_avatar .ic,#lk_myavatar .ic{background:rgba(255,105,180,.16);box-shadow:0 0 12px rgba(255,105,180,.2)}
a.lcard .lci{background:rgba(255,255,255,.7) !important;border-color:rgba(160,140,90,.2) !important}
/* VOCE = mic KITT: sfera ambra radiale + anello che ruota (dalla Night Rider) */
.vcard{border:1.5px solid rgba(255,179,0,.55) !important;
  box-shadow:0 0 26px rgba(255,179,0,.16),0 6px 18px rgba(160,140,90,.15) !important}
#lk_voce .ic,.vcard .ic{background:radial-gradient(circle at 32% 28%,#FFD24A,#FFB300 58%,#c98f00);
  box-shadow:0 0 20px rgba(255,179,0,.55);animation:kpulse 2.4s infinite}
@keyframes kpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,.45),0 0 20px rgba(255,179,0,.55)}
  50%{box-shadow:0 0 0 9px rgba(255,179,0,0),0 0 26px rgba(255,179,0,.7)}}
.vmic{background:radial-gradient(circle at 32% 28%,#FFD24A,#FFB300 55%,#c98f00) !important;
  color:#4D3D10 !important;box-shadow:0 0 30px rgba(255,179,0,.5) !important}
.vmic .vmic-ring{border:2px dashed rgba(255,179,0,.6);animation:krot 7s linear infinite !important;box-shadow:none !important}
@keyframes krot{to{transform:rotate(360deg)}}
#micBtn,#tgBtn,.micbtn{background:#fff !important;border:none !important;border-radius:50% !important;
  box-shadow:0 3px 10px rgba(160,140,90,.18) !important}
#micBtn.rec-on{background:#c0393b !important;color:#fff !important}
/* selettori: pill scura Morbida */
.vc-seg,.bpill{background:rgba(255,255,255,.7) !important;border:none !important;color:#A29A89 !important;
  box-shadow:0 2px 6px rgba(160,140,90,.14) !important;font-family:'DM Sans',sans-serif !important;font-weight:600}
.vc-seg.on,.bpill.act{background:#33302B !important;color:#FFE9A8 !important}
/* input & bottoni morbidi, CTA oro */
input:not([type=checkbox]):not([type=radio]),textarea,select,.search,.composer textarea,.sb-add-form input,.rec textarea{
  background:#fff !important;border:none !important;border-radius:16px !important;
  box-shadow:inset 0 0 0 1.5px rgba(160,140,90,.16) !important;color:#33302B !important;
  font-family:'DM Sans',sans-serif !important}
.composer textarea{border-radius:999px !important;padding-left:15px !important}
.composer button,#inviaBtn,.save,.rec .go{background:linear-gradient(135deg,#FFD86E,#E5A50A) !important;
  color:#4D3D10 !important;border-radius:999px !important;font-family:'DM Sans',sans-serif !important;
  font-weight:700 !important;letter-spacing:0 !important;box-shadow:0 5px 14px rgba(220,170,40,.4) !important}
.msg{border-radius:18px !important}
.msg.u{background:linear-gradient(135deg,#FFE9A8,#FFD86E) !important;color:#4D3D10 !important;
  font-weight:600;box-shadow:0 4px 12px rgba(220,170,40,.25)}
.msg.a{background:rgba(255,255,255,.85) !important;border:none !important;
  box-shadow:0 4px 12px rgba(160,140,90,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chat,.rec{border:none !important}
.rec{background:rgba(255,255,255,.78) !important;border-radius:22px !important;
  box-shadow:0 6px 18px rgba(160,140,90,.15) !important}
/* tab bar Morbida: pillole bianche, anello oro sull'attiva */
.tabbar button{background:rgba(255,255,255,.85);border:none;border-radius:18px;margin:0 8px 6px;
  padding-top:7px;padding-bottom:7px;box-shadow:0 4px 12px rgba(160,140,90,.16)}
.tabbar button.act{color:#B8860B;box-shadow:0 4px 14px rgba(220,170,40,.4),0 0 0 2.5px #E5A50A}
.sheet{background:#FAF7F1 !important}
.gauges .v{color:#33302B !important}
.btn.on,#discoverBtn.on{background:linear-gradient(135deg,#FFD86E,#E5A50A) !important;
  border-color:transparent !important;color:#4D3D10 !important}
/* 11 set (Dani): tasto INDIETRO con BOX e freccia BEN VISIBILE, uguale su TUTTE le pagine mobile.
   !important perche' lo stile dei link Indietro e' inline sulle singole pagine. */
body>a[href="studio-mobile.html"],a.backbar,a.backlink,#backLink,#backBar,#backBtn,#backlink,#back-link{
  display:inline-flex !important;align-items:center !important;gap:8px !important;
  background:linear-gradient(135deg,#FFE3A8,#EFB63E) !important;color:#4D3D10 !important;
  border:none !important;border-radius:12px !important;padding:9px 16px !important;min-height:0 !important;
  font-family:'DM Sans',sans-serif !important;font-weight:800 !important;font-size:16px !important;
  letter-spacing:.3px !important;text-decoration:none !important;
  box-shadow:0 3px 10px rgba(220,170,40,.35) !important;margin:10px 0 !important}