/* IA3 Refined — capa visual "fosc futurista" sobre ia3-design-system.css.
   Es carrega DESPRÉS del sistema base. Tipografies autoallotjades (sense CDN).
   Copiar a <modul>/static/css/ i les fonts a <modul>/static/fonts/ (scripts/sync-design-system.js).
   Estructura: css/ia3-refined.css  +  fonts/*.woff2  +  js/ia3-fx.js (efectes opcionals) */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hanken-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/hanken-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/unbounded-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --font-ui:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --font-display:'Unbounded','Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* superfícies fredes en capes (negre-blau de pantalla), tinta blanc-gèlid */
  --bg:#070a0d;--panel:#0c1115;--panel2:#111820;--panel3:#17202a;
  --rule:#1a242d;--rule2:#28343f;
  --ink:#e6eef0;--ink2:#9fb0b4;--ink3:#7f9094;
  --green:#3fdc97;--green-dim:rgba(63,220,151,.15);
  --accent:#4fe0c8;--accent-dim:rgba(79,224,200,.13);--accent-line:rgba(79,224,200,.42);--accent-glow:rgba(79,224,200,.28);
  --on-accent:#031512;--bg-deep:#04070a;
  --r:3px;
  --lift:inset 0 1px 0 rgba(255,255,255,.04);
  --ease:cubic-bezier(.22,1,.36,1);
}

html,body{font-family:var(--font-ui);font-size:14px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
input,button,select,textarea{font-family:var(--font-ui)}
.mono{font-family:var(--font-mono)}
.cond{font-family:var(--font-ui)}
::selection{background:var(--accent);color:var(--on-accent)}
::-webkit-scrollbar-thumb{background:var(--rule2)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
input,textarea{caret-color:var(--accent)}

/* ── títols: display ample i tecnològic ─────────────── */
.page-title,.console h1,.modal-header h2{font-family:var(--font-display);text-transform:none;letter-spacing:-.025em;font-weight:500}
.page-title{font-size:26px;line-height:1.15}
.page-sub{font-size:13px;color:var(--ink2);margin-top:8px}
.panel-title,.ms-title,.table-toolbar h3,th,.field label,.form-group label,.stat-label{font-family:var(--font-ui);font-weight:600;letter-spacing:.07em}

/* ── botons ─────────────────────────────────────────── */
button{font-family:var(--font-ui);font-weight:600;letter-spacing:0;text-transform:none}
.btn{font-size:13px;padding:8px 14px;border-radius:var(--r);transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:hover:not(:disabled){box-shadow:0 0 0 1px var(--rule2)}
.btn.sm{font-size:12px;padding:5px 10px}
.btn-go{font-size:14px;padding:12px;border-radius:var(--r);box-shadow:0 0 0 0 var(--accent-glow)}
.btn-go:hover:not(:disabled){box-shadow:0 0 22px var(--accent-glow);filter:none}
.btn-primary{border-color:var(--accent-line)}
.btn-primary:hover:not(:disabled){box-shadow:0 0 16px var(--accent-glow);background:rgba(79,224,200,.22)}
.icon-btn{border-radius:var(--r)}

/* ── superfícies ────────────────────────────────────── */
.panel-card,.manifest,.table-card,.modal-box,.console,.toast{border-radius:var(--r);box-shadow:var(--lift)}
.modal-box{box-shadow:var(--lift),0 30px 80px rgba(0,0,0,.6)}
.console{box-shadow:var(--lift),0 40px 90px rgba(0,0,0,.6)}
.toast{box-shadow:var(--lift),0 8px 28px rgba(0,0,0,.55)}
.field input,.form-group input,.form-group select,.form-group textarea,.filters input,.filters select{border-radius:var(--r);background:var(--bg-deep)}
th{font-size:11px}
td{font-size:13px}
.tag{border-radius:2px;font-family:var(--font-mono)}
.row-status-txt,.ms-count{font-family:var(--font-mono)}
.stat-val,.algo-stat-val{font-family:var(--font-display);font-weight:500;letter-spacing:-.03em}
.lamp-actiu{box-shadow:0 0 0 0 rgba(63,220,151,.55),0 0 8px rgba(63,220,151,.7);animation:lamp-ring 2.4s ease-out infinite}

/* ══════════════════════════════════════════════
   EFECTES — estil terminal / HUD (ia3-fx.js els activa)
══════════════════════════════════════════════ */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fx-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fx-flash{from{background:var(--accent-dim)}to{background:transparent}}
@keyframes fx-caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes fx-scan{from{transform:translateY(-100%)}to{transform:translateY(100vh)}}
@keyframes lamp-ring{0%{box-shadow:0 0 0 0 rgba(63,220,151,.55),0 0 8px rgba(63,220,151,.7)}70%,100%{box-shadow:0 0 0 7px rgba(63,220,151,0),0 0 8px rgba(63,220,151,.7)}}

.fx-in{animation:fx-up .6s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
.caret::after{content:'';display:inline-block;width:.5em;height:1.05em;margin-left:.2em;background:var(--accent);vertical-align:-.17em;animation:fx-caret 1.05s steps(1) infinite}
.ll-new{animation:fx-flash 1.4s ease-out}

/* focus de llum que segueix el punter */
.spot{--mx:50%;--my:50%}
.spot::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(260px circle at var(--mx) var(--my),var(--accent-dim),transparent 70%)}
.spot:hover::before{opacity:1}
.spot::after{pointer-events:none}

/* ratlla de rastreig per a plafons de marca */
.scanline{position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(79,224,200,.06),transparent);animation:fx-scan 7s linear infinite}

/* bloc de terminal */
.term{font-family:var(--font-mono);font-size:12.5px;line-height:1.9;color:var(--ink2);white-space:pre-wrap}
.term .p{color:var(--accent)}
.term .ok{color:var(--green)}
.term .dim{color:var(--ink3)}

/* paleta de comandes (Ctrl K) */
.cmdk-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;background:rgba(3,6,8,.72);backdrop-filter:blur(6px)}
.cmdk{width:560px;max-width:100%;background:var(--panel);border:1px solid var(--rule2);border-radius:var(--r);box-shadow:var(--lift),0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(79,224,200,.08);overflow:hidden}
.cmdk-in{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--rule)}
.cmdk-in .p{font-family:var(--font-mono);color:var(--accent);font-size:15px}
.cmdk-in input{flex:1;background:none;border:0;color:var(--ink);font-size:15px;outline:none;box-shadow:none}
.cmdk-in input:focus-visible{outline:none;box-shadow:none}
.cmdk-list{max-height:340px;overflow-y:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:var(--r);background:none;color:var(--ink2);text-align:left;font-weight:500;font-size:13.5px}
.cmdk-item svg{width:16px;height:16px;flex-shrink:0;color:var(--ink3)}
.cmdk-item .sub{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink3)}
.cmdk-item[aria-selected=true]{background:var(--panel3);color:var(--ink)}
.cmdk-item[aria-selected=true] svg{color:var(--accent)}
.cmdk-foot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--rule);font-family:var(--font-mono);font-size:11px;color:var(--ink3)}
.cmdk-empty{padding:26px;text-align:center;color:var(--ink3);font-size:13px}

/* ══════════════════════════════════════════════
   DEV — aspecte d'IDE / terminal: tot en monoespai, rejilla de punts,
   cantonades rectes, claudàtors, prefixos de codi
══════════════════════════════════════════════ */
:root{
  --font-ui:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --font-display:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:2px;
  --kw:#c792ea;--str:#f5c26b;--fn:#6cb6ff;
}
html,body{font-size:13px;letter-spacing:-.005em;font-variant-ligatures:common-ligatures}
body{background-image:radial-gradient(rgba(159,176,180,.10) 1px,transparent 1px);background-size:22px 22px;background-position:-1px -1px}
.page-title,.console h1,.modal-header h2{font-family:var(--font-mono);font-weight:700;letter-spacing:-.04em;text-transform:none}
.page-title::before{content:'# ';color:var(--accent);font-weight:500}
.modal-header h2::before{content:'~/ ';color:var(--accent)}
.page-sub{color:var(--ink3)}
.page-sub::before{content:'// ';color:var(--ink3)}
.panel-title,.table-toolbar h3,th,.field label,.form-group label,.stat-label{font-family:var(--font-mono);font-weight:500;text-transform:lowercase;letter-spacing:.02em;color:var(--ink3)}
th::before{content:'.';color:var(--accent)}
.stat-val,.algo-stat-val{font-family:var(--font-mono);font-weight:700}

/* botons: claudàtors */
button,.btn{font-family:var(--font-mono);font-weight:500}
.btn{border-radius:var(--r);text-transform:lowercase}
.btn-go::before{content:'[ ';color:inherit;opacity:.65}
.btn-go::after{content:' ]';color:inherit;opacity:.65}
.mc-open::before{content:'$ ';opacity:.7}

/* superfícies: vores fines tipus panell de codi */
.panel-card,.manifest,.table-card,.modal-box,.console,.toast,.module-card{border-radius:var(--r)}
.panel-card,.table-card,.modal-box{border-color:var(--rule2)}
.field input,.form-group input,.form-group select,.form-group textarea,.filters input,.filters select{font-family:var(--font-mono);font-size:13px;border-color:var(--rule2)}
input::placeholder,textarea::placeholder{color:var(--ink3);opacity:.8}
.tag{font-family:var(--font-mono);text-transform:lowercase;border-radius:2px}
td{font-variant-numeric:tabular-nums}
code,kbd,pre{font-family:var(--font-mono)}
kbd{border:1px solid var(--rule2);border-bottom-width:2px;border-radius:3px;padding:0 5px;font-size:11px;color:var(--ink2);background:var(--panel2)}

/* esquerra de cada fila de taula: cursor de línia */
tbody tr{box-shadow:inset 2px 0 0 transparent;transition:box-shadow .15s var(--ease),background .15s var(--ease)}
tbody tr:hover{box-shadow:inset 2px 0 0 var(--accent);background:var(--panel2)}

/* barra d'estat inferior (tmux/vim) */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:stretch;gap:0;height:26px;
  font-family:var(--font-mono);font-size:11.5px;line-height:26px;color:var(--ink2);background:var(--bg-deep);border-top:1px solid var(--rule2);white-space:nowrap;overflow:hidden}
.statusbar>span{padding:0 12px;border-right:1px solid var(--rule)}
.statusbar .sb-mode{background:var(--accent);color:var(--on-accent);font-weight:700;letter-spacing:.06em}
.statusbar .sb-grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink3)}
.statusbar .sb-ok{color:var(--green)}
.statusbar .sb-warn{color:var(--amber,#e0a63c)}
.statusbar .sb-key{color:var(--str)}
@media(max-width:700px){.statusbar .sb-hide{display:none}}