/* ============================================================================
   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. In produzione meglio anche il <link> nelle pagine (perf),
   ma l'@import rende questo CSS autoconsistente per il preview locale. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

: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,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)}