@font-face{font-family:"RoadRageInstalled";src:local("RoadRage"),local("Road Rage"),local("Road Rage Regular"),url("assets/fonts/Road_Rage.otf") format("opentype");font-style:normal;font-weight:400;font-display:swap}
:root{
  --bg:#030507;--panel:#080d11;--panel2:#0c141a;--ink:#f1fbfc;--muted:#81979f;
  --cyan:#5cecff;--blue:#43cce3;--red:#ff3344;--yellow:#f5f61f;--green:#70ffb1;
  --line:rgba(92,225,244,.17);--line-red:rgba(255,51,68,.28);--shadow:0 0 28px rgba(43,221,244,.09);
  --display:"RoadRageInstalled","Road Rage","RoadRage","Bahnschrift Condensed","Arial Narrow",Impact,sans-serif;
  --heading:"Bahnschrift Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Bahnschrift","Segoe UI",Arial,sans-serif;--mono:Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#010203;color:var(--ink);font-family:var(--body)}
body{overflow:hidden;background:
  radial-gradient(circle at 77% 22%,rgba(255,27,55,.1),transparent 22%),
  radial-gradient(circle at 27% 70%,rgba(0,210,255,.08),transparent 28%),
  linear-gradient(rgba(2,5,7,.82),rgba(2,5,7,.92)),url('assets/night-city.png') center/cover fixed;
  filter:saturate(1.1) contrast(1.035) brightness(1.08)
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.52) 100%);mix-blend-mode:multiply}
button,input,select,textarea{font:inherit}button{cursor:pointer}input,select,textarea{width:100%;border:1px solid rgba(95,218,236,.18);background:rgba(2,7,10,.84);color:var(--ink);padding:10px 11px;outline:none;border-radius:0;transition:.18s}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 1px rgba(92,236,255,.24),0 0 20px rgba(52,218,245,.14)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--ink)!important;caret-color:var(--ink)!important;-webkit-box-shadow:0 0 0 1000px #02070a inset!important;box-shadow:0 0 0 1000px #02070a inset!important;border-color:rgba(95,218,236,.3)!important;transition:background-color 99999s ease-out 0s!important}
input[type=range]{padding:0;border:0;accent-color:var(--cyan)}
select{appearance:none;-webkit-appearance:none;color-scheme:dark;padding-right:38px;background-color:rgba(3,9,12,.94);background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%),linear-gradient(90deg,transparent,rgba(92,236,255,.075));background-position:calc(100% - 17px) 50%,calc(100% - 11px) 50%,100% 0;background-size:6px 6px,6px 6px,34px 100%;background-repeat:no-repeat;box-shadow:inset -34px 0 0 rgba(5,18,23,.64)}
select:hover{border-color:rgba(92,236,255,.42);box-shadow:inset -34px 0 0 rgba(7,25,31,.84),0 0 17px rgba(52,218,245,.08)}
select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--yellow) 50%),linear-gradient(135deg,var(--yellow) 50%,transparent 50%),linear-gradient(90deg,transparent,rgba(245,246,31,.07))}
select option{background:#050d12;color:#dceef1;padding:9px}select option:checked{background:#12313a;color:white}.hidden{display:none!important}
label{display:grid;gap:6px;color:#82959d;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase}

.crt-overlay,.scanlines,.noise,.vhs-tear{position:fixed;inset:0;pointer-events:none;z-index:100}
.crt-overlay{background:linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.12) 50%),linear-gradient(90deg,rgba(255,0,0,.025),rgba(0,255,0,.012),rgba(0,0,255,.025));background-size:100% 4px,5px 100%;animation:crtFlicker .14s infinite;mix-blend-mode:screen;opacity:.72}
.scanlines{background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(5,18,21,.25) 3px,rgba(0,0,0,.2) 4px);opacity:.42;animation:scan 11s linear infinite}
.noise{opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:noiseMove .18s steps(2) infinite;mix-blend-mode:screen}
.vhs-tear{height:18px;top:-30px;bottom:auto;background:linear-gradient(90deg,transparent,rgba(80,231,255,.19),rgba(255,43,65,.15),transparent);filter:blur(2px);animation:vhsTear 8s steps(1) infinite;opacity:.75}
@keyframes crtFlicker{0%,100%{opacity:.68}50%{opacity:.78}}@keyframes scan{to{transform:translateY(18px)}}@keyframes noiseMove{0%{transform:translate(0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(.5%,1%)}}
@keyframes vhsTear{0%,13%,100%{top:-30px}14%{top:18%}15%{top:62%}16%{top:34%}17%{top:-30px}58%{top:-30px}59%{top:79%}60%{top:22%}61%{top:-30px}}

.boot-screen{position:fixed;inset:0;z-index:200;background:#020406;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:.55s;overflow:hidden}
.boot-screen:before{content:"";position:absolute;pointer-events:none;inset:-20%;background:repeating-linear-gradient(90deg,transparent 0 48px,rgba(53,224,247,.035) 49px 50px),repeating-linear-gradient(0deg,transparent 0 48px,rgba(53,224,247,.03) 49px 50px);transform:perspective(700px) rotateX(65deg) translateY(30%);animation:gridMove 5s linear infinite}
.boot-screen.hidden{opacity:0;visibility:hidden;transform:scale(1.02);pointer-events:none}.boot-logo{font:clamp(3rem,9vw,8rem)/.8 var(--heading);letter-spacing:.04em;position:relative}.boot-screen p{font:700 .72rem var(--mono);letter-spacing:.26em;color:#708991;z-index:1}.boot-screen small{color:#4f6268;z-index:1}.boot-screen>#bootButton{position:relative;z-index:3;pointer-events:auto}
.boot-bar{width:min(520px,72vw);height:4px;background:#10181c;overflow:hidden;z-index:1}.boot-bar span{display:block;height:100%;width:30%;background:var(--red);box-shadow:0 0 18px var(--red);animation:boot 1.8s ease-in-out infinite}
@keyframes boot{50%{transform:translateX(230%)}}@keyframes gridMove{to{transform:perspective(700px) rotateX(65deg) translateY(36%)}}
.chroma-title,.chroma-soft{position:relative;isolation:isolate;text-shadow:-2px 0 3px rgba(255,28,66,.52),2px 0 3px rgba(30,230,255,.48),0 0 7px rgba(255,255,255,.34),0 0 17px rgba(91,231,255,.25),0 0 27px rgba(255,45,68,.16)}
.chroma-title:before,.chroma-title:after,.chroma-soft:before,.chroma-soft:after{content:attr(data-text);position:absolute;inset:0;color:inherit;pointer-events:none;mix-blend-mode:screen;filter:blur(.35px);opacity:0}
.chroma-title:before,.chroma-soft:before{color:rgba(45,226,255,.72);clip-path:inset(18% 0 66%);animation:glitchSliceBlue 3.7s infinite steps(1)}
.chroma-title:after,.chroma-soft:after{color:rgba(255,42,65,.7);clip-path:inset(58% 0 25%);animation:glitchSliceRed 2.9s infinite steps(1)}
@keyframes glitchSliceBlue{0%,82%,100%{transform:translateX(0);opacity:0}83%{transform:translateX(3px);opacity:.42}84%{transform:translateX(-4px);opacity:.68}85%{transform:translateX(1px);opacity:.22}86%{opacity:0}}
@keyframes glitchSliceRed{0%,88%,100%{transform:translateX(0);opacity:0}89%{transform:translateX(-5px);opacity:.58}90%{transform:translateX(4px);opacity:.36}91%{transform:translateX(-1px);opacity:.18}92%{opacity:0}}

.app-shell{display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:78px minmax(0,1fr);height:100vh;position:relative;z-index:2;background:rgba(1,4,6,.16)}
.app-shell:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 82px rgba(0,0,0,.42)}
.topbar{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:10px 18px;border-bottom:1px solid var(--line);background:rgba(4,9,12,.88);backdrop-filter:blur(10px);position:relative;z-index:20;box-shadow:0 6px 28px rgba(0,0,0,.34)}
.brand-wrap{min-width:210px}.brand{font:2rem/.85 var(--heading);letter-spacing:.04em}.status{font:.52rem var(--mono);letter-spacing:.12em;color:#627981;margin-top:6px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);margin-right:6px;animation:pulseDot 1.4s infinite}@keyframes pulseDot{50%{opacity:.35}}
.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.global-meter{font:700 .64rem var(--mono);color:var(--blue);padding:9px 10px;border:1px solid rgba(67,204,227,.22);min-width:112px;text-align:center}.global-meter.invalid{color:var(--red);border-color:var(--line-red);box-shadow:0 0 16px rgba(255,51,68,.1)}
.audio-player{display:flex;align-items:center;gap:6px;min-width:0;border-left:1px solid var(--line);padding-left:14px}.track-meta{display:grid;width:170px;min-width:0}.track-meta span{font:.46rem var(--mono);letter-spacing:.14em;color:#557078}.track-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:.62rem var(--mono);color:#cce4e8}.track-credit{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;font:.43rem var(--mono);letter-spacing:.05em;color:#7f9da3}.track-credit[hidden]{display:none}.icon-button{width:32px;height:32px;padding:0;border:1px solid rgba(85,216,235,.2);background:#071015;color:var(--cyan);box-shadow:inset 0 0 12px rgba(64,218,239,.03)}.icon-button:hover:not(:disabled){border-color:var(--cyan);text-shadow:-1px 0 var(--red),1px 0 var(--cyan)}.icon-button:disabled{opacity:.28;cursor:not-allowed}.volume-control{display:flex;align-items:center;grid-template-columns:none;gap:6px}.volume-control input{width:70px}.button{border:1px solid rgba(91,218,237,.2);background:#071015;color:#b8d4d8;padding:10px 13px;font-size:.59rem;letter-spacing:.08em;text-transform:uppercase;transition:.16s}.button:hover{border-color:var(--cyan);color:white;box-shadow:0 0 18px rgba(65,224,247,.12);transform:translateY(-1px)}.button.primary{background:var(--red);border-color:var(--red);color:white;box-shadow:0 0 22px rgba(255,51,68,.19);font-weight:800}.button.primary:hover{filter:brightness(1.12);box-shadow:-3px 0 rgba(49,224,251,.22),3px 0 rgba(255,51,68,.25),0 0 28px rgba(255,51,68,.28)}.button.compact{padding:8px;font-size:.5rem}.button.large{font-size:.72rem;padding:14px 20px}.file-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center}.file-button input{position:absolute;inset:0;opacity:0;cursor:pointer}

.sidebar{grid-row:2;display:flex;flex-direction:column;padding:16px 10px;border-right:1px solid var(--line);background:rgba(4,10,13,.86);position:relative;z-index:10}.sidebar:after{content:"";position:absolute;right:-1px;top:0;width:1px;height:100%;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.24}.nav-item{border:0;border-left:2px solid transparent;background:transparent;color:#687e86;text-align:left;padding:14px 10px;font-size:.62rem;letter-spacing:.08em;transition:.18s}.nav-item span{font:700 .56rem var(--mono);display:inline-block;width:31px;color:#425961}.nav-item:hover{color:#bdd9dd;background:rgba(68,205,225,.035)}.nav-item.active{color:white;border-left-color:var(--yellow);background:linear-gradient(90deg,rgba(245,246,31,.08),transparent);text-shadow:-1px 0 rgba(255,50,70,.4),1px 0 rgba(67,227,255,.38)}.nav-item.active span{color:var(--yellow)}.sidebar-meter{margin-top:auto;padding:10px;color:#5c7078;font:.52rem var(--mono)}.sidebar-meter>div{height:3px;background:#111b1f;margin:8px 0}.sidebar-meter i{display:block;height:100%;width:0;background:var(--cyan);box-shadow:0 0 11px var(--cyan);transition:.3s}.sidebar-meter strong{color:#bcd8dc}
.sidebar .nav-item[data-tab="identity"]{order:1}
.sidebar .nav-item[data-tab="lifepath"]{order:2}
.sidebar .nav-item[data-tab="roleLifepath"]{order:3}
.sidebar .nav-item[data-tab="stats"]{order:4}
.sidebar .nav-item[data-tab="skills"]{order:5}
.sidebar .nav-item[data-tab="arsenal"]{order:6}
.sidebar .nav-item[data-tab="equipment"]{order:7}
.sidebar .nav-item[data-tab="cyber"]{order:8}
.sidebar .nav-item[data-tab="export"]{order:9}
.sidebar .sidebar-meter{order:20}
.sidebar .reset-system-button{order:21}


.workspace{grid-column:2;grid-row:2;padding:26px 30px 70px;overflow:auto;position:relative;z-index:7}.workspace::-webkit-scrollbar{width:8px}.workspace::-webkit-scrollbar-thumb{background:#16313a}.panel{display:none;max-width:1500px;margin:auto;animation:panelIn .26s ease}.panel.active{display:block}@keyframes panelIn{from{opacity:0;transform:translateY(7px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;border-bottom:1px solid rgba(91,220,239,.13);padding-bottom:14px;position:relative}.section-head:after{content:"";position:absolute;bottom:-1px;left:0;width:150px;height:2px;background:var(--red);box-shadow:0 0 16px var(--red)}.section-head h1{margin:3px 0 0;font:clamp(2.05rem,4vw,3.7rem)/.9 var(--display);letter-spacing:.025em;text-transform:none;text-shadow:-2px 0 rgba(255,44,65,.48),2px 0 rgba(48,224,250,.4),0 0 24px rgba(54,225,249,.08)}.eyebrow{font:.55rem var(--mono);letter-spacing:.18em;color:var(--red)}.head-code{font:.55rem var(--mono);color:#566d75;letter-spacing:.09em}.head-meters{display:flex;gap:8px}.subhead{font:1.45rem var(--heading);letter-spacing:.05em;margin:24px 0 12px;text-transform:uppercase}.glass-card,.dossier-card,.loadout-panel,.inventory-panel,.body-map-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(12,21,27,.92),rgba(5,11,15,.9));box-shadow:var(--shadow);position:relative}.glass-card:before,.dossier-card:before,.loadout-panel:before,.inventory-panel:before,.body-map-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 48%,rgba(83,224,245,.026) 49%,transparent 50%);background-size:250% 100%;animation:sheen 9s linear infinite}@keyframes sheen{to{background-position:-250% 0}}
.two-column{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:16px}.form-card{padding:18px}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.field-grid .wide{grid-column:1/-1}.money-summary-block{margin-top:15px;border-top:1px solid var(--line);padding-top:13px;display:grid;grid-template-columns:1fr auto;gap:5px}.money-summary-block span{font:.54rem var(--mono);color:#5e7780;letter-spacing:.12em}.money-summary-block strong{font:.76rem var(--mono);color:var(--blue)}.money-summary-block small{grid-column:1/-1;color:#768b92;font:.58rem var(--mono)}.money-summary-block.invalid strong,.money-summary-block.invalid small{color:var(--red)}
.dossier-card{padding:14px;display:grid;grid-template-columns:1fr;gap:12px}.portrait-frame{min-height:430px;border:1px solid rgba(96,221,240,.28);position:relative;overflow:hidden;background:radial-gradient(circle at center,rgba(69,219,241,.1),transparent 48%),linear-gradient(155deg,#071017,#020608);touch-action:none;user-select:none}.portrait-frame.editing{cursor:grab;border-color:rgba(92,236,255,.72);box-shadow:inset 0 0 28px rgba(52,218,245,.08),0 0 20px rgba(52,218,245,.08)}.portrait-frame.dragging{cursor:grabbing}.portrait-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:none;transform-origin:center;will-change:transform;pointer-events:none;background:rgba(0,0,0,.26)}.portrait-frame img.visible{display:block}.portrait-frame:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 -105px 82px rgba(0,0,0,.55),inset 0 0 34px rgba(0,0,0,.28)}.portrait-scan{position:absolute;left:-4%;right:-4%;top:0;height:48%;z-index:2;pointer-events:none;background:linear-gradient(to bottom,transparent 0,rgba(92,236,255,.012) 13%,rgba(92,236,255,.045) 30%,rgba(92,236,255,.11) 43%,rgba(125,244,255,.22) 50%,rgba(92,236,255,.11) 57%,rgba(255,51,68,.035) 72%,rgba(92,236,255,.012) 87%,transparent 100%);filter:blur(1.25px);mix-blend-mode:screen;opacity:0;box-shadow:0 0 32px rgba(92,236,255,.055)}.portrait-frame.has-image .portrait-scan{opacity:.86;animation:portraitScan 4.1s linear infinite}@keyframes portraitScan{from{transform:translateY(-100%)}to{transform:translateY(315%)}}.portrait-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;text-align:center;font:.68rem var(--mono);letter-spacing:.12em;color:#617981}.portrait-silhouette{width:min(68%,252px);height:auto;color:#45d9ee;filter:drop-shadow(-5px 0 rgba(255,51,68,.08)) drop-shadow(5px 0 rgba(92,236,255,.08)) drop-shadow(0 0 24px rgba(47,210,235,.08))}.portrait-silhouette-halo{fill:url(#portraitHalo)}.portrait-silhouette-ring{fill:none;stroke:rgba(91,223,242,.15);stroke-width:1.4;stroke-dasharray:38 12;filter:drop-shadow(0 0 7px rgba(91,223,242,.08))}.portrait-silhouette-coat{fill:url(#portraitCoat);stroke:rgba(91,223,242,.16);stroke-width:1.5}.portrait-silhouette-lapel{fill:rgba(3,8,11,.9);stroke:rgba(91,223,242,.12);stroke-width:1.2}.portrait-silhouette-neck{fill:url(#portraitSkin);stroke:rgba(91,223,242,.12);stroke-width:1.1}.portrait-silhouette-head{fill:url(#portraitSkin);stroke:rgba(91,223,242,.18);stroke-width:1.5}.portrait-silhouette-hair{fill:#010304;stroke:rgba(255,51,68,.13);stroke-width:1.3}.portrait-silhouette-shadow{fill:rgba(0,0,0,.48)}.portrait-silhouette-eye,.portrait-silhouette-face-line{fill:none;stroke:rgba(139,233,245,.24);stroke-width:1.3;stroke-linecap:round}.portrait-silhouette-cyber-eye{fill:none;stroke:rgba(255,51,68,.72);stroke-width:1.7;filter:url(#portraitGlow)}.portrait-silhouette-data{fill:none;stroke:rgba(91,223,242,.2);stroke-width:1.2;stroke-dasharray:5 5}.portrait-silhouette-node{fill:var(--red);filter:url(#portraitGlow)}.portrait-silhouette-circuit{stroke-dasharray:4 5;opacity:.65}.portrait-name{position:absolute;z-index:5;left:14px;right:14px;bottom:18px;text-align:center;font:2rem/.85 var(--heading);letter-spacing:.04em;color:white;text-shadow:-2px 0 var(--red),2px 0 var(--cyan),0 0 17px rgba(0,0,0,.92);text-transform:uppercase}.portrait-control{position:absolute;top:12px;z-index:7;width:38px;height:38px;border:1px solid rgba(92,236,255,.42);background:rgba(2,8,11,.88);color:var(--cyan);display:flex;align-items:center;justify-content:center;font:800 1rem var(--mono);box-shadow:0 0 16px rgba(52,218,245,.08);transition:.16s}.portrait-control:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 18px rgba(245,246,31,.12)}.portrait-action{left:12px}.portrait-action.delete{color:var(--red);border-color:rgba(255,51,68,.42)}.portrait-import{right:12px;cursor:pointer}.portrait-import>span{font:900 1.35rem/1 var(--mono);transform:translateY(-1px)}.portrait-edit-hint{position:absolute;z-index:6;left:50%;top:15px;transform:translateX(-50%);font:.52rem var(--mono);letter-spacing:.08em;color:rgba(220,249,252,.68);text-shadow:0 0 10px rgba(92,236,255,.25);opacity:0;transition:.18s;white-space:nowrap}.portrait-frame.editing .portrait-edit-hint{opacity:1}.dossier-meta{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,auto);gap:8px;border-top:1px solid var(--line);padding-top:12px;font:.59rem var(--mono);align-items:center}.dossier-meta span{color:#66808a}.dossier-meta strong{color:#d2e6e9}.dossier-meta .danger{color:var(--red)}
.role-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px}.role-card{border:1px solid rgba(93,208,225,.15);background:rgba(5,11,15,.88);color:#8da3aa;padding:13px;text-align:left;min-height:95px;position:relative;overflow:hidden;transition:.18s}.role-card:after{content:"";position:absolute;right:-32px;bottom:-32px;width:75px;height:75px;border:1px solid rgba(77,222,242,.07);transform:rotate(45deg)}.role-card i{font:700 .53rem var(--mono);color:#465d65}.role-card b{display:block;font:1.15rem var(--heading);letter-spacing:.05em;color:#cfdee1;margin:8px 0 5px}.role-card small{font:.56rem var(--mono);color:#647b83}.role-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:-2px 0 rgba(255,50,67,.18),2px 0 rgba(55,225,249,.16)}.role-card.selected{border-color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(245,246,31,.12),0 0 18px rgba(245,246,31,.06)}.role-card.selected b{color:var(--yellow)}.role-details{margin-top:10px;padding:13px 15px;border-left:2px solid var(--red);background:rgba(255,51,68,.035);color:#81969e;font-size:.7rem}.role-details strong{color:white}

.rules-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.rules-strip span{font:.52rem var(--mono);letter-spacing:.08em;padding:6px 8px;border:1px solid rgba(83,205,224,.13);color:#657b83;background:rgba(4,10,13,.7)}.budget-chip{font:700 .68rem var(--mono);padding:10px 12px;border:1px solid rgba(67,204,227,.22);color:var(--blue);min-width:105px;text-align:center;background:rgba(3,9,12,.7)}.budget-chip.invalid{color:var(--red);border-color:var(--line-red);box-shadow:0 0 18px rgba(255,51,68,.1)}.center-budget-alert{text-align:center;min-height:25px;font:800 .82rem var(--mono);letter-spacing:.13em;color:transparent;margin:-4px 0 10px}.center-budget-alert.invalid{color:var(--red);text-shadow:0 0 14px rgba(255,51,68,.35)}
.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(145px,1fr));gap:11px}.stat-card{border:1px solid rgba(82,205,224,.14);background:linear-gradient(155deg,rgba(8,15,19,.94),rgba(4,8,11,.92));padding:13px;min-height:165px;transition:.18s;position:relative}.stat-card:hover{border-color:rgba(92,236,255,.62);box-shadow:-2px 0 rgba(255,51,68,.15),2px 0 rgba(92,236,255,.15),0 0 19px rgba(73,226,247,.07)}.stat-card header{display:flex;justify-content:space-between;align-items:flex-start}.stat-card b{font:1.55rem var(--heading);color:var(--cyan)}.stat-card small{color:#5d7179;font-size:.54rem;letter-spacing:.1em}.stat-control{display:grid;grid-template-columns:32px 1fr 32px;gap:7px;align-items:center;margin-top:18px}.stat-control button{height:32px;border:1px solid rgba(97,222,239,.2);background:#071015;color:var(--cyan);position:relative;z-index:2}.stat-control strong{text-align:center;font:2rem var(--mono)}.stat-card p{margin:11px 0 0;color:#63767e;font-size:.62rem;line-height:1.45}.stat-card .details-hint{position:absolute;right:10px;bottom:8px;color:#3f5962;font:.48rem var(--mono)}.derived-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}.derived-grid article{border-top:2px solid var(--red);background:rgba(9,14,19,.82);padding:16px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px}.derived-grid small{grid-column:1/-1;color:#788d95;letter-spacing:.11em}.derived-grid strong{font:2rem var(--mono);color:var(--yellow)}.derived-grid span{font-size:.6rem;color:#687b83;align-self:center}

.filter-strip{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}.filter-chip{border:1px solid rgba(83,211,229,.16);background:#071015;color:#667c84;padding:8px 10px;font:.6rem var(--mono)}.filter-chip.active{border-color:var(--cyan);color:#061014;background:var(--cyan);box-shadow:0 0 14px rgba(92,236,255,.12)}.filter-chip.all.active{background:var(--yellow);border-color:var(--yellow)}.skill-toolbar,.catalog-toolbar{display:flex;gap:10px;margin-bottom:14px}.skill-toolbar input,.catalog-toolbar input{max-width:390px}.skills-container{display:grid;grid-template-columns:repeat(3,minmax(280px,1fr));gap:12px;align-items:start}.skill-category{border:1px solid var(--line);background:rgba(7,12,16,.86)}.skill-category h3{margin:0;padding:11px 13px;background:rgba(65,201,219,.06);border-bottom:1px solid var(--line);font:1rem var(--heading);letter-spacing:.08em}.skill-row{display:grid;grid-template-columns:minmax(0,1fr) 42px 92px 42px;gap:7px;align-items:center;padding:7px 10px;border-bottom:1px solid rgba(97,186,199,.08);font-size:.64rem}.skill-row:last-child{border-bottom:0}.skill-name span{display:inline-block;color:var(--red);font-size:.5rem;margin-left:5px}.skill-name em{font-style:normal;color:var(--yellow);font-size:.48rem;border:1px solid rgba(242,242,29,.26);padding:2px 4px;margin-left:5px}.skill-stat,.skill-base{font-family:var(--mono);text-align:center;color:#75919b}.skill-base{color:var(--cyan);font-weight:800}.mini-stepper{display:grid;grid-template-columns:26px 34px 26px;align-items:center}.mini-stepper button{height:27px;padding:0;border:1px solid rgba(94,209,225,.18);background:#071015;color:var(--cyan)}.mini-stepper input{text-align:center;padding:5px 0;height:27px;border-left:0;border-right:0}.skill-row.invalid{background:rgba(255,60,70,.07)}

.arsenal-layout,.equipment-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px}.segmented{display:flex}.segmented button{border:1px solid rgba(93,211,229,.18);background:#071015;color:#6f838b;padding:10px 13px;font-size:.62rem}.segmented button.active{color:#070909;background:var(--yellow);border-color:var(--yellow)}.weapon-catalog,.cyber-catalog,.item-catalog{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:10px}.weapon-card,.cyber-card,.item-card{border:1px solid rgba(102,208,224,.16);background:linear-gradient(150deg,rgba(10,18,23,.94),rgba(5,9,12,.89));padding:13px;transition:.2s;position:relative;min-height:150px}.weapon-card:hover,.cyber-card:hover,.item-card:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:-2px 0 rgba(255,51,68,.16),2px 0 rgba(92,236,255,.16)}.weapon-card.selected,.cyber-card.selected,.item-card.selected{border-color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(242,242,29,.16),0 0 18px rgba(245,246,31,.05)}.weapon-card .source,.item-card .source{font-size:.5rem;letter-spacing:.12em;color:var(--red)}.weapon-card .source.s2077{color:#9aff56}.weapon-card h3,.cyber-card h3,.item-card h3{font:1rem var(--heading);letter-spacing:.035em;margin:8px 38px 7px 0}.weapon-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:12px}.weapon-stats div{background:rgba(72,202,220,.05);padding:6px;text-align:center}.weapon-stats small{display:block;color:#51666f;font-size:.46rem}.weapon-stats b{font:700 .66rem var(--mono)}.weapon-card p,.cyber-card p,.item-card p{font-size:.57rem;color:#71868e;line-height:1.45}.weapon-card>button,.cyber-card>button,.item-card>button{position:absolute;right:9px;top:9px;border:1px solid rgba(103,211,228,.25);background:#081116;color:var(--cyan);width:28px;height:28px}.weapon-card.selected>button,.cyber-card.selected>button,.item-card.selected>button{background:var(--yellow);color:#060808;border-color:var(--yellow)}.loadout-panel,.inventory-panel,.body-map-card{padding:16px;position:sticky;top:0;align-self:start}.loadout-panel h2,.inventory-panel h2,.body-map-card h2{font:1.1rem var(--heading);letter-spacing:.08em;margin:0 0 14px}.selected-list{display:grid;gap:6px;max-height:410px;overflow:auto}.selected-item{display:grid;grid-template-columns:1fr auto;gap:8px;border:1px solid rgba(94,195,210,.12);padding:9px;background:rgba(3,8,11,.58);font-size:.63rem}.selected-item small{display:block;color:#617780;margin-top:4px;line-height:1.4}.selected-item button{border:0;background:transparent;color:var(--red)}.selected-controls{grid-column:1/-1;display:grid;grid-template-columns:70px 1fr;gap:7px}.selected-controls select{padding:5px;font-size:.55rem}.qty-controls{display:grid;grid-template-columns:23px 28px 23px;align-items:center}.qty-controls button{border:1px solid var(--line);color:var(--cyan);background:#071015}.qty-controls span{text-align:center;font:600 .6rem var(--mono)}.empty-state{color:#50636b;font-size:.63rem;padding:14px;border:1px dashed rgba(101,199,214,.16);text-align:center}.armor-block{margin-top:20px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:10px}.armor-block h3{font:.95rem var(--heading);letter-spacing:.08em;margin:0}.armor-summary{font:.6rem var(--mono);color:#78909a;padding:10px;background:#05090c;line-height:1.6}.equipment-toolbar{align-items:center}.equipment-toolbar select{max-width:220px}.item-price{position:absolute;right:10px;bottom:10px;color:var(--cyan);font:700 .66rem var(--mono)}

.cyber-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.cyber-card{min-height:150px}.cyber-card .zone{font-size:.5rem;color:var(--cyan);letter-spacing:.12em}.cyber-card .ph{position:absolute;right:10px;bottom:10px;color:var(--red);font:700 .64rem var(--mono)}.cyber-card .price{position:absolute;left:13px;bottom:10px;color:var(--cyan);font:700 .64rem var(--mono)}.body-silhouette{height:320px;position:relative;background:radial-gradient(ellipse at 50% 38%,rgba(71,222,240,.1),transparent 40%),linear-gradient(90deg,transparent 49.5%,rgba(83,217,235,.14) 50%,transparent 50.5%);border:1px solid rgba(99,208,224,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}.silhouette-glyph{font-size:8rem;color:rgba(87,224,241,.08);font-family:serif}.node{position:absolute;width:10px;height:10px;border:1px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 12px rgba(80,226,246,.5);animation:pulse 1.8s infinite}.n-head{top:50px;left:50%}.n-chest{top:125px;left:50%}.n-arm-l{top:145px;left:29%}.n-arm-r{top:145px;right:29%}.n-leg-l{bottom:52px;left:42%}.n-leg-r{bottom:52px;right:42%}@keyframes pulse{50%{opacity:.3;transform:rotate(45deg) scale(.7)}}.humanity-readout{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;align-items:center}.humanity-readout span{font:.5rem var(--mono);color:#5e747c}.humanity-readout strong{font:.76rem var(--mono);color:var(--yellow)}

.lifepath-grid{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:11px}.life-field,.personality-card{padding:12px;border:1px solid rgba(95,194,209,.13);background:rgba(7,13,18,.8);position:relative}.life-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}.life-card-head span{font:.6rem var(--mono);letter-spacing:.1em;color:#94a9af}.life-card-head small{display:block;margin-top:4px;font:.47rem var(--mono);color:#4f6670}.dice-button{width:30px;height:30px;border:1px solid rgba(89,218,237,.2);background:#071015;color:var(--cyan)}.dice-button:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 13px rgba(245,246,31,.08)}.personality-card{margin-top:12px}.personality-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.personality-chip{border:1px solid rgba(90,205,224,.15);background:#071015;color:#657c84;padding:7px 9px;font-size:.56rem}.personality-chip.active{background:var(--yellow);border-color:var(--yellow);color:#071015}.personality-chip.disabled{opacity:.33}.relationship-section{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.relationship-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.relationship-head h2{font:1.55rem var(--heading);letter-spacing:.06em;margin:3px 0 0}.relationship-head>div:last-child{display:flex;gap:7px}.relationship-list{display:grid;gap:8px}.relationship-row{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr)) auto;padding:10px;border:1px solid rgba(89,202,220,.13);background:rgba(5,11,15,.76)}.relationship-row.enemy{grid-template-columns:repeat(4,minmax(0,1fr)) auto}.relationship-row .row-actions{display:flex;gap:5px;align-items:end}.relationship-row .row-actions button{width:30px;height:34px}.life-summary{margin-top:14px;padding:18px;border-left:3px solid var(--red)}.life-summary p{color:#9bafb6;line-height:1.7;font-size:.75rem;text-transform:none}

.export-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.export-card{padding:30px;text-align:center;position:relative;overflow:hidden}.export-card h2{font:2rem var(--heading);margin:20px 0 7px;letter-spacing:.04em}.export-card p{color:#71858d;font-size:.72rem;max-width:560px;margin:0 auto 20px;line-height:1.6}.radar{width:120px;height:120px;margin:auto;border:1px solid rgba(87,223,242,.22);border-radius:50%;background:conic-gradient(from 20deg,rgba(92,232,249,.28),transparent 18%,transparent);position:relative;animation:radar 3s linear infinite}.radar:before,.radar:after{content:"";position:absolute;inset:20%;border:1px solid rgba(87,223,242,.13);border-radius:50%}.radar:after{inset:40%}@keyframes radar{to{transform:rotate(360deg)}}.export-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:18px 0}.check{padding:9px;border:1px solid rgba(106,204,219,.13);font-size:.56rem;color:#687d86}.check.ok{color:var(--green);border-color:rgba(105,255,177,.25)}.check.warn{color:var(--yellow)}.check.bad{color:var(--red);border-color:rgba(255,51,68,.25)}.export-status{min-height:22px;margin-top:12px;font-size:.66rem;color:var(--cyan)}.summary-card{padding:20px}.summary-card h3{font:1rem var(--heading);letter-spacing:.08em}.summary-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:.65rem}.summary-card dt{color:#61757e}.summary-card dd{margin:0;text-align:right;color:#dbeaec;font-family:var(--mono)}

.modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}.modal-card{position:relative;z-index:1;width:min(650px,90vw);max-height:84vh;overflow:auto;border:1px solid var(--cyan);background:linear-gradient(150deg,#0a1217,#030709);padding:25px;box-shadow:-5px 0 rgba(255,51,68,.15),5px 0 rgba(92,236,255,.14),0 0 70px rgba(0,0,0,.8)}.modal-card h2{font:2.2rem var(--heading);margin:7px 0 12px}.modal-card h3{font:.72rem var(--mono);color:var(--red);letter-spacing:.12em}.modal-card p{font-size:.75rem;line-height:1.7;color:#9bb0b6}.modal-close{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid var(--line);background:#071015;color:var(--red)}.modal-skill-list{display:flex;flex-wrap:wrap;gap:7px}.modal-skill-list span{border:1px solid rgba(91,213,232,.15);padding:7px 9px;font-size:.6rem;color:#8ca3aa}
.toast{position:fixed;right:24px;bottom:24px;z-index:400;background:#0a1115;border:1px solid var(--cyan);padding:13px 17px;color:var(--cyan);font-size:.66rem;letter-spacing:.05em;box-shadow:0 0 25px rgba(71,222,241,.16);opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.toast.error{border-color:var(--red);color:var(--red)}

@media(max-width:1320px){.audio-player .track-meta{width:120px}.audio-player .compact{display:none}.role-grid{grid-template-columns:repeat(5,1fr)}.stats-grid{grid-template-columns:repeat(5,1fr)}.skills-container{grid-template-columns:repeat(2,1fr)}.weapon-catalog,.cyber-catalog,.item-catalog{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1100px){.app-shell{grid-template-columns:84px 1fr}.sidebar .nav-item{font-size:0;text-align:center}.sidebar .nav-item span{font-size:.67rem;width:auto}.brand-wrap{min-width:160px}.brand{font-size:1.6rem}.top-actions .button{display:none}.role-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(3,1fr)}.lifepath-grid{grid-template-columns:repeat(2,1fr)}.relationship-row.enemy{grid-template-columns:repeat(2,1fr) auto}}
@media(max-width:820px){html,body{overflow:auto}.app-shell{display:block;height:auto}.topbar{position:sticky;top:0;height:auto;padding:10px;flex-wrap:wrap}.brand-wrap{display:none}.audio-player{border-left:0;padding-left:0;order:2;width:100%;overflow-x:auto}.audio-player .track-meta{min-width:150px}.top-actions{margin-left:auto}.global-meter{display:none}.sidebar{position:sticky;top:118px;flex-direction:row;overflow-x:auto;padding:6px;z-index:25;border-right:0;border-bottom:1px solid var(--line)}.sidebar .nav-item{min-width:48px;border-left:0;border-bottom:2px solid transparent}.sidebar .nav-item.active{border-bottom-color:var(--yellow)}.sidebar-meter{display:none}.workspace{padding:20px 12px 50px;overflow:visible}.two-column,.arsenal-layout,.equipment-layout,.cyber-layout,.export-layout{grid-template-columns:1fr}.role-grid,.stats-grid,.derived-grid,.skills-container,.weapon-catalog,.cyber-catalog,.item-catalog,.lifepath-grid{grid-template-columns:1fr}.loadout-panel,.inventory-panel,.body-map-card{position:static}.section-head{align-items:flex-start}.head-code{display:none}.field-grid{grid-template-columns:1fr}.dossier-card{grid-template-columns:1fr}.dossier-meta{grid-template-columns:repeat(2,1fr)}.relationship-row,.relationship-row.enemy{grid-template-columns:1fr}.relationship-row .row-actions{align-items:center}.boot-screen p{font-size:.52rem;text-align:center}.catalog-toolbar{flex-wrap:wrap}.equipment-toolbar select{max-width:none}}


/* V2.2 — lisibilité accrue des micro-textes sans modifier la hiérarchie visuelle */
label{font-size:.67rem;color:#91a7ae}
.status{font-size:.56rem;color:#78919a}.track-meta span{font-size:.5rem;color:#6e8992}.track-meta strong{font-size:.66rem;color:#e4f5f7}
.button{font-size:.63rem}.button.compact{font-size:.54rem}.nav-item{font-size:.66rem}.nav-item span{font-size:.6rem}
.eyebrow,.head-code{font-size:.59rem}.rules-strip span{font-size:.56rem}.role-card small{font-size:.6rem}.role-details{font-size:.73rem}
.life-card-head span{font-size:.64rem}.life-card-head small{font-size:.52rem}.personality-chip{font-size:.6rem}.selected-item,.empty-state{font-size:.67rem}
input,select,textarea{color:#f3fcfd;background:rgba(3,9,12,.9)}



/* Détails de rôle accessibles sans alourdir la grille */
.role-card .role-info{position:absolute;right:9px;top:8px;z-index:3;width:24px;height:24px;border:1px solid rgba(92,236,255,.22);display:grid;place-items:center;color:var(--cyan);background:rgba(3,10,14,.84);font:800 .62rem var(--mono);letter-spacing:0;transition:.16s}
.role-card .role-info:hover,.role-card .role-info:focus{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 14px rgba(245,246,31,.1);outline:none}
.role-card>i{padding-right:29px}
.role-modal-card{width:min(720px,92vw)}
.role-modal-ability{display:grid;gap:4px;padding:12px 14px;margin:4px 0 14px;border-left:3px solid var(--red);background:rgba(255,51,68,.045)}
.role-modal-ability span{font:.55rem var(--mono);letter-spacing:.14em;color:#6f8991}
.role-modal-ability strong{font:1.15rem var(--heading);letter-spacing:.045em;color:white}
.role-modal-select{margin-top:18px;width:100%}

/* L'image complète est visible au chargement; le cadrage est ensuite volontaire */
.portrait-frame:not(.editing) img{cursor:default}
.portrait-placeholder{background:radial-gradient(circle at 50% 42%,rgba(31,115,130,.075),transparent 34%),linear-gradient(155deg,rgba(2,7,10,.1),rgba(0,0,0,.28))}

/* Commandes audio compactes */
#audioDefault{white-space:nowrap}
.role-detail-link{margin-left:10px;border:0;border-bottom:1px solid rgba(92,236,255,.38);background:transparent;color:var(--cyan);padding:2px 0;font:.58rem var(--mono);letter-spacing:.07em}
.role-detail-link:hover{color:var(--yellow);border-bottom-color:var(--yellow);box-shadow:none;transform:none}


/* V2.4 — Road Rage uniquement sur les titres principaux, avec casse éditoriale */
.section-head h1{
  font-family:"RoadRageInstalled","Road Rage","RoadRage","Bahnschrift Condensed","Arial Narrow",Impact,sans-serif!important;
  font-weight:400!important;
  font-synthesis:none;
  text-transform:none!important;
}
.boot-logo,.brand,.subhead,.role-card b,.stat-card b,.skill-category h3,
.weapon-card h3,.cyber-card h3,.item-card h3,.loadout-panel h2,.inventory-panel h2,.body-map-card h2,
.armor-block h3,.relationship-head h2,.export-card h2,.summary-card h3,.modal-card h2,
.role-modal-ability strong,.portrait-name{text-transform:uppercase}

/* Menus déroulants entièrement dessinés par l'interface */
select.cyber-native-select{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important;margin:0!important;padding:0!important;border:0!important}
.cyber-select{position:relative;width:100%;min-width:0;z-index:1}
.cyber-select.open{z-index:90}
.cyber-select-trigger{width:100%;min-height:39px;padding:9px 39px 9px 11px;border:1px solid rgba(95,218,236,.2);background:linear-gradient(90deg,rgba(3,9,12,.97),rgba(5,16,21,.94));color:#f3fcfd;text-align:left;position:relative;box-shadow:inset -35px 0 0 rgba(8,25,31,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.16s}
.cyber-select-trigger:after{content:"";position:absolute;right:13px;top:50%;width:8px;height:8px;border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);transform:translateY(-68%) rotate(45deg);transition:.18s}
.cyber-select.open .cyber-select-trigger,.cyber-select-trigger:hover{border-color:rgba(92,236,255,.62);box-shadow:inset -35px 0 0 rgba(9,30,37,.96),0 0 18px rgba(52,218,245,.1)}
.cyber-select.open .cyber-select-trigger:after{border-color:var(--yellow);transform:translateY(-28%) rotate(225deg)}
.cyber-select-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);display:none;max-height:260px;overflow:auto;border:1px solid rgba(92,236,255,.46);background:linear-gradient(155deg,rgba(5,14,18,.99),rgba(1,5,8,.99));box-shadow:-3px 0 rgba(255,51,68,.12),3px 0 rgba(92,236,255,.12),0 18px 34px rgba(0,0,0,.72);padding:4px;z-index:500}
.cyber-select.open .cyber-select-menu{display:block;animation:cyberSelectIn .13s ease-out}
@keyframes cyberSelectIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.cyber-select-option{display:block;width:100%;border:0;border-bottom:1px solid rgba(92,236,255,.075);background:transparent;color:#9db3b9;text-align:left;padding:9px 10px;font-size:.64rem;line-height:1.35;transition:.12s}
.cyber-select-option:last-child{border-bottom:0}.cyber-select-option:hover,.cyber-select-option.focused{background:linear-gradient(90deg,rgba(92,236,255,.11),rgba(92,236,255,.025));color:white;text-shadow:-1px 0 rgba(255,51,68,.3),1px 0 rgba(92,236,255,.3)}
.cyber-select-option.selected{color:var(--yellow);background:rgba(245,246,31,.055)}
.cyber-select-option:disabled{opacity:.32;cursor:not-allowed}
.cyber-select-menu::-webkit-scrollbar{width:7px}.cyber-select-menu::-webkit-scrollbar-thumb{background:#17404a;border:1px solid #071115}.cyber-select-menu::-webkit-scrollbar-track{background:#02070a}
.selected-controls .cyber-select-trigger{min-height:29px;padding:5px 32px 5px 7px;font-size:.55rem}.selected-controls .cyber-select-trigger:after{right:11px;width:6px;height:6px}

/* V2.5 — corrections ciblées */

/* Bouton d'entrée plus affirmé et plus isolé du bloc supérieur */
.boot-screen>#bootButton{
  min-width:230px;
  margin-top:24px;
  padding:17px 44px;
  font-size:.78rem;
  letter-spacing:.16em;
  box-shadow:0 0 30px rgba(255,51,68,.26),inset 0 0 18px rgba(255,255,255,.035);
}

/* Transition de mauvais tracking VHS / neige analogique */
.vhs-transition{position:fixed;inset:0;z-index:260;pointer-events:none;opacity:0;visibility:hidden;overflow:hidden;background:#050607}
.vhs-transition.active{visibility:visible;animation:vhsTransitionVisibility .82s steps(1,end) both}
.vhs-static,.vhs-tracking{position:absolute;inset:-8%;opacity:0}
.vhs-transition.active .vhs-static{
  opacity:1;
  background:
    repeating-radial-gradient(circle at 20% 20%,#fff 0 1px,#08090a 1px 3px,transparent 3px 5px),
    repeating-radial-gradient(circle at 78% 64%,#111 0 1px,#e8e8e8 1px 2px,transparent 2px 4px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.9) 0 1px,rgba(0,0,0,.95) 1px 3px,transparent 3px 5px);
  background-size:7px 7px,9px 9px,100% 6px;
  mix-blend-mode:screen;
  filter:contrast(2.4) brightness(1.35);
  animation:vhsSnow .82s steps(12,end) both;
}
.vhs-transition.active .vhs-tracking{
  opacity:1;
  background:
    linear-gradient(180deg,transparent 0 17%,rgba(255,255,255,.92) 17.4% 18%,rgba(0,0,0,.92) 18.4% 21%,transparent 22% 44%,rgba(255,255,255,.68) 45% 46%,rgba(0,0,0,.96) 47% 55%,transparent 56% 100%),
    repeating-linear-gradient(90deg,rgba(255,35,55,.3) 0 3px,transparent 3px 11px,rgba(44,224,255,.3) 11px 14px,transparent 14px 25px);
  filter:blur(.3px) contrast(1.7);
  animation:vhsTracking .82s steps(9,end) both;
}
.boot-screen.tracking-out{animation:bootBadTracking .55s steps(8,end) both}
@keyframes vhsTransitionVisibility{0%{opacity:0}8%{opacity:.96}66%{opacity:.95}100%{opacity:0}}
@keyframes vhsSnow{0%{transform:translate(-2%,-3%) scale(1.05)}18%{transform:translate(4%,1%) scale(1.07)}35%{transform:translate(-1%,5%) scale(1.03)}52%{transform:translate(5%,-2%) scale(1.08)}72%{transform:translate(-4%,2%) scale(1.04)}100%{transform:translate(2%,-4%) scale(1.06)}}
@keyframes vhsTracking{0%{transform:translateY(-18%) skewX(-2deg)}20%{transform:translate(4%,21%) skewX(4deg)}42%{transform:translate(-5%,-8%) skewX(-5deg)}64%{transform:translate(3%,34%) skewX(2deg)}82%{transform:translate(-2%,6%) skewX(-3deg)}100%{transform:translateY(20%)}}
@keyframes bootBadTracking{0%{transform:none;filter:none}16%{transform:translateX(-10px);filter:contrast(1.5) saturate(1.6)}34%{transform:translateX(13px) skewX(2deg);filter:brightness(1.35) hue-rotate(7deg)}51%{transform:translateX(-5px);clip-path:inset(18% 0 32% 0)}68%{transform:translateX(8px);clip-path:inset(2% 0 64% 0)}84%{transform:translateX(-12px);filter:contrast(2)}100%{transform:translateX(0);filter:brightness(.2);opacity:.12}}

/* Portrait par défaut fourni et image utilisateur au-dessus */
.portrait-frame #portraitImage{z-index:1;object-fit:contain}
.portrait-frame .portrait-default{display:block;z-index:0;object-fit:cover;object-position:center center;transform:none!important;background:#010305}
.portrait-frame .portrait-default.hidden{display:none}

/* Scan de la V2.3 : bande plus courte, douce et progressive */
.portrait-scan{
  left:0;
  right:0;
  top:0;
  height:30%;
  background:linear-gradient(to bottom,transparent 0,rgba(95,235,255,.018) 15%,rgba(95,235,255,.07) 40%,rgba(95,235,255,.14) 50%,rgba(95,235,255,.07) 60%,rgba(255,52,74,.025) 78%,transparent 100%);
  filter:blur(.65px);
  mix-blend-mode:screen;
  opacity:0;
  box-shadow:none;
}
.portrait-frame.has-portrait .portrait-scan{opacity:.78;animation:portraitScanV23 3.5s linear infinite}
@keyframes portraitScanV23{from{transform:translateY(-100%)}to{transform:translateY(435%)}}

/* Suggestions personnalisées : même largeur, mêmes couleurs et mêmes bordures que le champ */
.suggestion-combo{position:relative;width:100%;min-width:0;z-index:1;margin-top:0}
.suggestion-combo.open{z-index:180}
.suggestion-combo>input{width:100%;padding-right:42px!important;margin:0}
.suggestion-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:39px;border:0;border-left:1px solid rgba(95,218,236,.2);background:rgba(8,25,31,.9);color:var(--cyan);z-index:2}
.suggestion-toggle:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-70%) rotate(45deg);transition:.16s}
.suggestion-combo.open .suggestion-toggle{color:var(--yellow);background:rgba(9,30,37,.96)}
.suggestion-combo.open .suggestion-toggle:after{transform:translate(-50%,-30%) rotate(225deg)}
.suggestion-menu{position:absolute;left:0;right:0;top:calc(100% + 2px);display:none;max-height:280px;overflow:auto;box-sizing:border-box;border:1px solid rgba(92,236,255,.62);background:linear-gradient(90deg,rgba(3,9,12,.995),rgba(5,16,21,.995));box-shadow:inset -38px 0 0 rgba(8,25,31,.34),-2px 0 rgba(255,51,68,.11),2px 0 rgba(92,236,255,.11),0 18px 34px rgba(0,0,0,.72);padding:0;z-index:600}
.suggestion-combo.open .suggestion-menu{display:block;animation:suggestionMenuIn .13s ease-out}
@keyframes suggestionMenuIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.suggestion-option{display:block;width:100%;min-height:39px;box-sizing:border-box;border:0;border-bottom:1px solid rgba(92,236,255,.1);background:transparent;color:#d8e8eb;text-align:left;padding:10px 12px;font:600 .64rem/1.35 var(--body);text-transform:none;white-space:normal}
.suggestion-option:last-child{border-bottom:0}
.suggestion-option:hover,.suggestion-option.selected{background:linear-gradient(90deg,rgba(92,236,255,.13),rgba(92,236,255,.025));color:white;text-shadow:-1px 0 rgba(255,51,68,.25),1px 0 rgba(92,236,255,.25)}
.suggestion-option.selected{color:var(--yellow)}
.suggestion-empty{padding:11px 12px;color:#607881;font:.58rem var(--mono);letter-spacing:.08em}
.suggestion-menu::-webkit-scrollbar{width:7px}.suggestion-menu::-webkit-scrollbar-thumb{background:#17404a;border:1px solid #071115}.suggestion-menu::-webkit-scrollbar-track{background:#02070a}

@media(max-width:820px){.boot-screen>#bootButton{min-width:200px;margin-top:18px;padding:15px 34px}.suggestion-menu{max-height:220px}}

/* V2.6 — corrections ciblées */
.boot-screen>#bootButton{
  min-width:280px;
  margin-top:44px;
  padding:20px 58px;
  font-size:1rem;
  letter-spacing:.18em;
}

/* Transition : neige analogique pure, sans décalage ni déformation de l'écran. */
.vhs-transition{
  background:#080808;
}
.vhs-transition.active{
  animation:staticNoiseFade .72s steps(1,end) both;
}
.vhs-static-canvas{
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  opacity:.96;
  filter:blur(1.35px) contrast(1.48) brightness(.94);
  transform:scale(1.025);
  image-rendering:auto;
}
.vhs-transition .vhs-static,.vhs-transition .vhs-tracking{display:none!important}
.boot-screen.tracking-out{animation:none!important;transform:none!important;filter:none!important;clip-path:none!important}
@keyframes staticNoiseFade{
  0%{opacity:0}
  8%{opacity:.98}
  82%{opacity:.98}
  100%{opacity:0}
}

@media(max-width:820px){
  .boot-screen>#bootButton{min-width:235px;margin-top:34px;padding:18px 46px;font-size:.9rem}
}

/* V2.7 — retouches ciblées */
.boot-screen>#bootButton{font-size:1.28rem;letter-spacing:.19em;padding:22px 64px}
.boot-screen>#bootButton:hover{background:#ff5962;border-color:#ff7a81;filter:brightness(1.1) saturate(.72);color:#fff;box-shadow:0 0 13px rgba(255,255,255,.23),0 0 33px rgba(255,72,86,.4),-2px 0 5px rgba(45,226,255,.2),2px 0 5px rgba(255,42,65,.16)}
.stat-control strong{font-size:2.45rem;line-height:1}
.vhs-static-canvas{filter:blur(.88px) contrast(1.42) brightness(.96);transform:scale(1.012)}
@media(max-width:820px){.boot-screen>#bootButton{font-size:1.05rem;padding:20px 50px}}


/* V2.8 — retouches accueil, glitch, transition et champs de compétences */
.boot-screen{
  background:
    linear-gradient(180deg,rgba(1,4,7,.86),rgba(1,3,5,.94)),
    radial-gradient(circle at 28% 33%,rgba(39,214,238,.09),transparent 25%),
    radial-gradient(circle at 76% 62%,rgba(255,36,63,.075),transparent 27%),
    url('assets/default-profile.png') center 44%/cover no-repeat,
    #010305;
}
.boot-screen:before{
  inset:0;
  transform:none;
  background:
    linear-gradient(90deg,transparent 8%,rgba(62,221,241,.055) 8.2%,transparent 8.55%,transparent 31%,rgba(62,221,241,.035) 31.2%,transparent 31.5%,transparent 73%,rgba(255,49,71,.038) 73.2%,transparent 73.5%),
    linear-gradient(0deg,transparent 12%,rgba(62,221,241,.04) 12.2%,transparent 12.45%,transparent 46%,rgba(62,221,241,.034) 46.2%,transparent 46.5%,transparent 78%,rgba(255,49,71,.035) 78.2%,transparent 78.5%),
    repeating-linear-gradient(90deg,transparent 0 82px,rgba(63,222,242,.021) 83px 84px),
    repeating-linear-gradient(0deg,transparent 0 58px,rgba(63,222,242,.018) 59px 60px);
  opacity:.78;
  animation:bootHoloDrift 9s ease-in-out infinite alternate;
  z-index:0;
}
.boot-screen:after{
  content:"";
  position:absolute;
  inset:-8%;
  pointer-events:none;
  z-index:0;
  opacity:.105;
  mix-blend-mode:screen;
  filter:blur(.22px) contrast(1.18);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.76'/%3E%3C/svg%3E");
  animation:bootNoise .22s steps(2) infinite;
}
.boot-screen>*{position:relative;z-index:1}
@keyframes bootHoloDrift{from{transform:translate3d(-.5%,-.3%,0) scale(1.01)}to{transform:translate3d(.6%,.45%,0) scale(1.025)}}
@keyframes bootNoise{0%{transform:translate(0)}33%{transform:translate(-.8%,.55%)}66%{transform:translate(.55%,-.75%)}100%{transform:translate(.25%,.35%)}}

/* Aberration plus ample, tout en conservant des bords doux. */
.chroma-title,.chroma-soft{
  text-shadow:-4px 0 4px rgba(255,28,66,.48),4px 0 4px rgba(30,230,255,.44),0 0 8px rgba(255,255,255,.36),0 0 19px rgba(91,231,255,.25),0 0 29px rgba(255,45,68,.17);
}
.chroma-title:before,.chroma-title:after,.chroma-soft:before,.chroma-soft:after{filter:blur(.52px)}

/* Glitch fort ponctuel, déclenché aléatoirement par le script toutes les 5 à 10 secondes. */
.boot-logo.major-glitch{animation:archiveMajorGlitch .47s steps(1,end) both}
.boot-logo.major-glitch:before{animation:archiveMajorBlue .47s steps(1,end)!important}
.boot-logo.major-glitch:after{animation:archiveMajorRed .47s steps(1,end)!important}
@keyframes archiveMajorGlitch{
  0%,100%{transform:none;clip-path:inset(0);filter:none}
  7%{transform:translateX(-5px) skewX(-1.4deg);clip-path:inset(0 0 70% 0)}
  13%{transform:translateX(6px);clip-path:inset(34% 0 42% 0);filter:brightness(1.35)}
  20%{transform:translateX(-3px) skewX(1.8deg);clip-path:inset(62% 0 8% 0)}
  28%{transform:translateX(8px);clip-path:inset(12% 0 62% 0)}
  36%{transform:translateX(-7px);clip-path:inset(48% 0 26% 0);filter:contrast(1.6)}
  45%{transform:translateX(3px);clip-path:inset(0 0 0 0)}
  54%{transform:translateX(-2px) skewX(-1deg);clip-path:inset(72% 0 3% 0)}
  63%{transform:translateX(5px);clip-path:inset(25% 0 52% 0)}
  72%{transform:translateX(-3px);clip-path:inset(0);filter:brightness(1.18)}
  82%{transform:translateX(1px);clip-path:inset(42% 0 38% 0)}
  90%{transform:none;clip-path:inset(0)}
}
@keyframes archiveMajorBlue{
  0%,100%{opacity:0;transform:none;clip-path:inset(0)}
  8%{opacity:.95;transform:translateX(10px);clip-path:inset(9% 0 71%)}
  22%{opacity:.72;transform:translateX(-7px);clip-path:inset(54% 0 21%)}
  38%{opacity:.9;transform:translateX(12px);clip-path:inset(31% 0 46%)}
  58%{opacity:.64;transform:translateX(-9px);clip-path:inset(74% 0 4%)}
  79%{opacity:.88;transform:translateX(7px);clip-path:inset(16% 0 63%)}
}
@keyframes archiveMajorRed{
  0%,100%{opacity:0;transform:none;clip-path:inset(0)}
  12%{opacity:.92;transform:translateX(-11px);clip-path:inset(43% 0 33%)}
  29%{opacity:.75;transform:translateX(8px);clip-path:inset(69% 0 7%)}
  47%{opacity:.94;transform:translateX(-13px);clip-path:inset(18% 0 59%)}
  67%{opacity:.62;transform:translateX(10px);clip-path:inset(52% 0 25%)}
  86%{opacity:.8;transform:translateX(-6px);clip-path:inset(7% 0 75%)}
}

/* Transition V2.8 : grain plus fin et légèrement moins flou. */
.vhs-transition.active{animation:staticNoiseFadeV28 .92s linear both}
.vhs-static-canvas{filter:blur(.62px) contrast(1.38) brightness(.94);transform:scale(1.008)}
@keyframes staticNoiseFadeV28{0%{opacity:0}3%{opacity:.82}10%{opacity:.98}78%{opacity:.98}92%{opacity:.82}100%{opacity:0}}

/* Les boutons +/- suffisent : aucun spinner natif au survol et valeur bien centrée. */
.mini-stepper input[type=number]{-moz-appearance:textfield;appearance:textfield;text-align:center!important;padding-left:0!important;padding-right:0!important;font-variant-numeric:tabular-nums}
.mini-stepper input[type=number]::-webkit-inner-spin-button,.mini-stepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;display:none}


/* V2.10 — grain d'accueil renforcé et liserés cyan plus présents */

/* Le décor 16:9 est utilisé par défaut. L'image 21:9 prend le relais sur les
   écrans réellement ultralarges afin de limiter tout recadrage destructeur. */
.boot-screen{
  background:#010305;
  isolation:isolate;
}
.boot-screen:before{
  content:"";
  position:absolute;
  inset:-3%;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,3,6,.24),rgba(0,2,4,.48)),
    radial-gradient(ellipse at center,transparent 28%,rgba(0,2,4,.27) 72%,rgba(0,1,2,.62) 100%),
    url('assets/boot-background-16x9.png') center center/cover no-repeat;
  filter:blur(2.15px) brightness(.63) saturate(.82) contrast(1.06);
  transform:scale(1.035);
  opacity:.97;
  animation:bootBackdropBreath 16s ease-in-out infinite alternate;
}
@media (min-aspect-ratio:2/1){
  .boot-screen:before{
    background:
      linear-gradient(180deg,rgba(0,3,6,.22),rgba(0,2,4,.46)),
      radial-gradient(ellipse at center,transparent 29%,rgba(0,2,4,.25) 73%,rgba(0,1,2,.59) 100%),
      url('assets/boot-background-21x9.png') center center/cover no-repeat;
  }
}
@keyframes bootBackdropBreath{
  0%{transform:scale(1.035) translate3d(-.18%,0,0);filter:blur(2.15px) brightness(.61) saturate(.8) contrast(1.06)}
  52%{transform:scale(1.042) translate3d(.12%,-.12%,0);filter:blur(2.05px) brightness(.645) saturate(.84) contrast(1.07)}
  100%{transform:scale(1.038) translate3d(.2%,.1%,0);filter:blur(2.2px) brightness(.625) saturate(.82) contrast(1.06)}
}

/* Filtre inspiré d'un moniteur VHS usé : scanlines très fines, bords cyan
   presque imperceptibles, grain vivant et une large zone de mauvais tracking
   qui traverse lentement l'image. L'opacité reste volontairement faible. */
.boot-screen:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.43;
  mix-blend-mode:screen;
  filter:blur(.24px) contrast(1.11);
  box-shadow:
    inset 4px 0 11px rgba(73,229,255,.31),
    inset -4px 0 11px rgba(73,229,255,.25),
    inset 0 2px 8px rgba(198,249,255,.13),
    inset 0 -2px 8px rgba(198,249,255,.10);
  background-image:
    linear-gradient(90deg,rgba(64,228,255,.23) 0,rgba(64,228,255,.08) .45%,transparent 1.5%,transparent 98.5%,rgba(64,228,255,.07) 99.55%,rgba(64,228,255,.20) 100%),
    linear-gradient(180deg,rgba(174,249,255,.14) 0,transparent .8%,transparent 99.2%,rgba(174,249,255,.10) 100%),
    linear-gradient(180deg,
      transparent 0 34%,
      rgba(105,235,255,.055) 34.35%,
      rgba(219,253,255,.075) 34.7%,
      rgba(0,0,0,.36) 35.2% 50.5%,
      rgba(0,0,0,.13) 55%,
      rgba(93,228,255,.035) 55.45%,
      transparent 56.1% 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.018) 0 1px,
      rgba(0,0,0,.025) 1px 3px,
      transparent 3px 5px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.68'/%3E%3C/svg%3E");
  background-size:100% 100%,100% 100%,100% 185%,100% 5px,180px 180px;
  background-position:0 0,0 0,0 -58%,0 0,0 0;
  animation:bootTapeFilter 13.5s linear infinite,bootTapeFlicker 5.8s steps(1,end) infinite;
}
@keyframes bootTapeFilter{
  0%{background-position:0 0,0 0,0 -58%,0 0,0 0}
  17%{background-position:0 0,0 0,0 -35%,0 1px,-7px 4px}
  43%{background-position:0 0,0 0,0 0%,0 2px,4px -5px}
  69%{background-position:0 0,0 0,0 45%,0 3px,-3px 6px}
  100%{background-position:0 0,0 0,0 112%,0 5px,6px -4px}
}
@keyframes bootTapeFlicker{
  0%,19%,23%,51%,54%,83%,100%{opacity:.41}
  20%{opacity:.48}
  21%{opacity:.37}
  52%{opacity:.46}
  84%{opacity:.44}
}
.boot-screen>*{position:relative;z-index:1}

/* Titre : aberration très légèrement resserrée et plus nette que la V2.8. */
.chroma-title,.chroma-soft{
  text-shadow:-3px 0 3px rgba(255,28,66,.49),3px 0 3px rgba(30,230,255,.45),0 0 8px rgba(255,255,255,.36),0 0 19px rgba(91,231,255,.25),0 0 29px rgba(255,45,68,.17);
}
.chroma-title:before,.chroma-title:after,.chroma-soft:before,.chroma-soft:after{
  filter:blur(.39px);
}

/* La transition garde exactement son rythme et sa granulométrie V2.8 ; seule
   une séparation RVB discrète est ajoutée côté canvas. */
.vhs-static-canvas{
  filter:blur(.68px) contrast(1.38) brightness(.94) saturate(.88);
}

/* V2.11 — grain plus contrasté, sans voile gris, et liserés cyan décollés
   des bords avec un tracé irrégulier inspiré d'un signal analogique instable. */

/* Le filtre principal conserve le tracking et les scanlines, mais le bruit
   pleine surface est retiré de cette couche en mode screen afin de ne plus
   blanchir les noirs ni rendre le décor grisâtre. */
.boot-screen:after{
  opacity:.36;
  mix-blend-mode:screen;
  filter:blur(.22px) contrast(1.14);
  box-shadow:
    inset 0 2px 8px rgba(198,249,255,.11),
    inset 0 -2px 8px rgba(198,249,255,.08);
  background-image:
    linear-gradient(180deg,rgba(174,249,255,.12) 0,transparent .75%,transparent 99.25%,rgba(174,249,255,.085) 100%),
    linear-gradient(180deg,
      transparent 0 34%,
      rgba(105,235,255,.05) 34.35%,
      rgba(219,253,255,.07) 34.7%,
      rgba(0,0,0,.34) 35.2% 50.5%,
      rgba(0,0,0,.12) 55%,
      rgba(93,228,255,.032) 55.45%,
      transparent 56.1% 100%),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.014) 0 1px,
      rgba(0,0,0,.032) 1px 3px,
      transparent 3px 5px);
  background-size:100% 100%,100% 185%,100% 5px;
  background-position:0 0,0 -58%,0 0;
  animation:bootTapeFilterV211 13.5s linear infinite,bootTapeFlickerV211 5.8s steps(1,end) infinite;
}
@keyframes bootTapeFilterV211{
  0%{background-position:0 0,0 -58%,0 0}
  17%{background-position:0 0,0 -35%,0 1px}
  43%{background-position:0 0,0 0%,0 2px}
  69%{background-position:0 0,0 45%,0 3px}
  100%{background-position:0 0,0 112%,0 5px}
}
@keyframes bootTapeFlickerV211{
  0%,19%,23%,51%,54%,83%,100%{opacity:.34}
  20%{opacity:.41}
  21%{opacity:.30}
  52%{opacity:.39}
  84%{opacity:.37}
}

/* Grain indépendant en mode overlay : il renforce les noirs et les hautes
   lumières au lieu d'ajouter un voile blanc uniforme. */
.boot-grain{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.31;
  mix-blend-mode:overlay;
  filter:contrast(1.72) brightness(.72);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
  background-size:190px 190px;
  animation:bootContrastGrain .2s steps(2,end) infinite;
}
@keyframes bootContrastGrain{
  0%{background-position:0 0;opacity:.29}
  25%{background-position:-8px 5px;opacity:.32}
  50%{background-position:6px -7px;opacity:.30}
  75%{background-position:-4px -3px;opacity:.33}
  100%{background-position:5px 6px;opacity:.29}
}

/* Deux traces cyan irrégulières, placées à environ 1,65 % de la largeur de
   l'écran. L'irrégularité est produite par une turbulence SVG plutôt que par
   deux traits parfaitement droits collés au viewport. */
.boot-edge-trace{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.68;
  mix-blend-mode:screen;
  filter:blur(.38px) drop-shadow(0 0 3px rgba(83,235,255,.42));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bffaff' stop-opacity='.26'/%3E%3Cstop offset='.08' stop-color='%235cecff' stop-opacity='.70'/%3E%3Cstop offset='.33' stop-color='%235cecff' stop-opacity='.35'/%3E%3Cstop offset='.57' stop-color='%23d8fdff' stop-opacity='.76'/%3E%3Cstop offset='.82' stop-color='%2347dff8' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23bffaff' stop-opacity='.24'/%3E%3C/linearGradient%3E%3Cfilter id='d' x='-80%25' y='-5%25' width='260%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .065' numOctaves='3' seed='29' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.55'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-linecap='round' filter='url(%23d)'%3E%3Cpath d='M17 0 L17 1000' stroke-width='2.2'/%3E%3Cpath d='M983 0 L983 1000' stroke-width='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
  animation:bootEdgeSignal 6.7s steps(1,end) infinite;
}
@keyframes bootEdgeSignal{
  0%,17%,29%,52%,71%,100%{opacity:.63;transform:translateX(0)}
  18%{opacity:.78;transform:translateX(.45px)}
  19%{opacity:.50;transform:translateX(-.35px)}
  30%{opacity:.70;transform:translateX(.2px)}
  53%{opacity:.82;transform:translateX(-.5px)}
  54%{opacity:.57;transform:translateX(.25px)}
  72%{opacity:.74;transform:translateX(-.2px)}
}

.boot-screen>*{position:relative;z-index:1}
.boot-screen>.boot-grain,.boot-screen>.boot-edge-trace{position:absolute;z-index:0}


/* V2.11.2 — grain légèrement renforcé sans voile gris, traces cyan plus
   visibles/décollées, et texture lignes-pixels sur le logo d'accueil. */
.boot-grain{
  opacity:.39;
  mix-blend-mode:overlay;
  filter:contrast(2.06) brightness(.57);
  background-size:156px 156px;
}
@keyframes bootContrastGrain{
  0%{background-position:0 0;opacity:.37}
  25%{background-position:-7px 5px;opacity:.40}
  50%{background-position:6px -6px;opacity:.38}
  75%{background-position:-4px -3px;opacity:.41}
  100%{background-position:5px 6px;opacity:.37}
}

/* Traces placées à 2,5 % des bords. Les segments secondaires et la
   displacement map créent un contour bruité, irrégulier et par endroits
   interrompu, tout en restant franchement visible. */
.boot-edge-trace{
  z-index:2!important;
  opacity:.96;
  mix-blend-mode:screen;
  filter:blur(.18px) drop-shadow(0 0 4px rgba(75,236,255,.76)) drop-shadow(0 0 11px rgba(38,202,235,.32));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d9fdff' stop-opacity='.44'/%3E%3Cstop offset='.07' stop-color='%2367f0ff' stop-opacity='.96'/%3E%3Cstop offset='.25' stop-color='%234de5fb' stop-opacity='.58'/%3E%3Cstop offset='.43' stop-color='%23d8fdff' stop-opacity='.98'/%3E%3Cstop offset='.58' stop-color='%235cecff' stop-opacity='.48'/%3E%3Cstop offset='.77' stop-color='%23bffaff' stop-opacity='.93'/%3E%3Cstop offset='.91' stop-color='%2344d8f1' stop-opacity='.52'/%3E%3Cstop offset='1' stop-color='%23d9fdff' stop-opacity='.38'/%3E%3C/linearGradient%3E%3Cfilter id='d' x='-90%25' y='-8%25' width='280%25' height='116%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .052' numOctaves='4' seed='37' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='19' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeGaussianBlur stdDeviation='.26'/%3E%3C/filter%3E%3Cfilter id='d2' x='-90%25' y='-8%25' width='280%25' height='116%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='.023 .078' numOctaves='2' seed='71' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='12'/%3E%3C/filter%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='url(%23g)' filter='url(%23d)'%3E%3Cpath d='M25 0 L25 1000' stroke-width='3.5'/%3E%3Cpath d='M975 0 L975 1000' stroke-width='3.5'/%3E%3C/g%3E%3Cg stroke='%238af5ff' stroke-opacity='.52' filter='url(%23d2)' stroke-dasharray='34 17 5 27'%3E%3Cpath d='M28 0 L28 1000' stroke-width='1.15'/%3E%3Cpath d='M972 0 L972 1000' stroke-width='1.15'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:100% 104%;
  background-position:center 0;
}
@keyframes bootEdgeSignal{
  0%,16%,31%,49%,72%,100%{opacity:.91;transform:translate3d(0,0,0);background-position:center 0}
  17%{opacity:1;transform:translate3d(.7px,0,0);background-position:center -3px}
  18%{opacity:.76;transform:translate3d(-.45px,0,0);background-position:center 2px}
  32%{opacity:.96;transform:translate3d(.35px,0,0);background-position:center -5px}
  50%{opacity:1;transform:translate3d(-.75px,0,0);background-position:center 4px}
  51%{opacity:.81;transform:translate3d(.3px,0,0);background-position:center -1px}
  73%{opacity:.98;transform:translate3d(-.35px,0,0);background-position:center 3px}
}
.boot-screen>*{z-index:3}
.boot-screen>.boot-grain{z-index:1}
.boot-screen>.boot-edge-trace{z-index:2}

/* Texture discrète à l'intérieur des glyphes, proche des grands titres de
   page : fines coupures horizontales et quelques micro-pixels, sans modifier
   la police ni l'aberration chromatique validée. */
.boot-logo{
  -webkit-mask-image:
    repeating-linear-gradient(to bottom,#000 0 5px,rgba(0,0,0,.58) 5px 6px,#000 6px 10px),
    linear-gradient(#000,#000);
  -webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(to bottom,#000 0 5px,rgba(0,0,0,.58) 5px 6px,#000 6px 10px);
}
.boot-logo:after{
  background-image:
    repeating-linear-gradient(90deg,transparent 0 23px,rgba(255,255,255,.22) 23px 25px,transparent 25px 41px);
  background-clip:text;
  -webkit-background-clip:text;
}


/* V2.11.3 — grain réellement dynamique sur canvas, décor légèrement
   décontrasté, synchronisation cyan inspirée du moniteur de référence, et
   texture horizontale du logo rendue plus discrète. */
.boot-screen:before{
  filter:blur(2.15px) brightness(.655) saturate(.82) contrast(.975);
}
@keyframes bootBackdropBreath{
  0%{transform:scale(1.035) translate3d(-.18%,0,0);filter:blur(2.15px) brightness(.64) saturate(.80) contrast(.97)}
  52%{transform:scale(1.042) translate3d(.12%,-.12%,0);filter:blur(2.05px) brightness(.675) saturate(.84) contrast(.985)}
  100%{transform:scale(1.038) translate3d(.2%,.1%,0);filter:blur(2.2px) brightness(.655) saturate(.82) contrast(.975)}
}
.boot-grain{
  position:absolute!important;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.46;
  mix-blend-mode:soft-light;
  filter:contrast(1.3) brightness(.98) blur(.2px);
  background:none!important;
  animation:none!important;
  transform:scale(1.004);
}
.boot-edge-trace{
  position:absolute!important;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.9;
  mix-blend-mode:screen;
  filter:blur(.34px) drop-shadow(0 0 3px rgba(72,232,255,.46));
  background:none!important;
  animation:none!important;
  transform:none!important;
}
.boot-screen>.boot-grain{z-index:1!important}
.boot-screen>.boot-edge-trace{z-index:2!important}
.boot-screen>*:not(.boot-grain):not(.boot-edge-trace){z-index:3}

/* Les coupures restent perceptibles uniquement de près. */
.boot-logo{
  -webkit-mask-image:repeating-linear-gradient(to bottom,#000 0 7px,rgba(0,0,0,.84) 7px 8px,#000 8px 13px),linear-gradient(#000,#000);
  mask-image:repeating-linear-gradient(to bottom,#000 0 7px,rgba(0,0,0,.84) 7px 8px,#000 8px 13px);
}
.boot-logo:after{
  background-image:repeating-linear-gradient(90deg,transparent 0 29px,rgba(255,255,255,.09) 29px 30px,transparent 30px 51px);
}

/* V2.12 — test du véritable overlay VHS réalisé sous After Effects.
   La vidéo remplace les simulations d'accueil en canvas/CSS afin de conserver
   le grain, les scanlines et le bad tracking organiques du fichier source. */
.boot-screen:after{display:none!important}
.boot-grain,.boot-edge-trace{display:none!important}
.boot-vhs-overlay{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
  object-fit:fill;
  pointer-events:none;
  opacity:.52;
  mix-blend-mode:screen;
  filter:brightness(.88) contrast(1.08) saturate(.82);
  transform:translateZ(0);
  will-change:opacity;
}
.boot-screen>*:not(.boot-vhs-overlay){position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){
  .boot-vhs-overlay{display:none}
}

/* V2.12.1 — correction des flashes noirs sur les bords de l'interface.
   La texture de bruit était déplacée sur une surface exactement égale au
   viewport : ses translations révélaient brièvement le fond noir à gauche
   ou à droite. On lui ajoute une marge de débordement permanente. */
.noise{
  inset:-4%!important;
  width:auto!important;
  height:auto!important;
}
.scanlines{
  inset:-24px 0!important;
}

/* V2.12.2 — le grain procédural de l’interface est remplacé par la vidéo
   fournie par l’utilisateur. Elle reste au-dessus de toutes les pages,
   sans bloquer les interactions, en mode Overlay à 35 %. */
.interface-grain-overlay{
  position:fixed;
  inset:-2%;
  width:104%;
  height:104%;
  z-index:100;
  object-fit:cover;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:overlay;
  transform:translateZ(0);
  will-change:opacity;
}
@media (prefers-reduced-motion:reduce){
  .interface-grain-overlay{display:none}
}


/* V2.14 — catalogue visuel des armes RED.
   Les illustrations fournies sont normalisées en 3:2 et restent cohérentes
   malgré leurs cadrages d'origine légèrement différents. */
.weapon-card{
  padding:0 13px 13px;
  overflow:hidden;
  min-height:330px;
  display:flex;
  flex-direction:column;
}
.weapon-visual{
  position:relative;
  aspect-ratio:3/2;
  margin:0 -13px 10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 46%,rgba(48,77,84,.14),transparent 62%),
    linear-gradient(145deg,#0a1014,#030609);
  border-bottom:1px solid rgba(102,208,224,.14);
}
.weapon-visual:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  box-shadow:inset 0 0 30px rgba(0,0,0,.38),inset 0 0 70px rgba(0,0,0,.18);
  background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.10) 82%,rgba(0,0,0,.24) 100%);
}
.weapon-visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  background:
    repeating-linear-gradient(to bottom,transparent 0 4px,rgba(105,225,242,.025) 4px 5px),
    linear-gradient(90deg,rgba(255,42,58,.035),transparent 14%,transparent 86%,rgba(61,222,255,.045));
  mix-blend-mode:screen;
  opacity:.62;
}
.weapon-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  position:relative;
  z-index:1;
  transition:transform .28s ease,filter .28s ease;
}
.weapon-card:hover .weapon-visual img{
  transform:scale(1.025);
  filter:brightness(1.06) contrast(1.03);
}
.weapon-placeholder{
  display:grid;
  place-items:center;
  color:rgba(111,139,148,.56);
  font:600 .56rem var(--mono);
  letter-spacing:.18em;
}
.weapon-placeholder:before{
  content:"";
  position:absolute;
  width:58%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,213,231,.32),transparent);
  box-shadow:0 -18px rgba(90,213,231,.05),0 18px rgba(90,213,231,.05);
}
.weapon-card .source{
  margin-top:1px;
}
.weapon-category{
  display:block;
  margin-top:8px;
  color:#607780;
  font:600 .49rem var(--mono);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.weapon-card h3{
  margin-top:4px;
  min-height:2.2em;
}
.weapon-card p{
  min-height:2.9em;
}
.weapon-stats{
  margin-top:auto;
}
.weapon-card>button{
  z-index:3;
  background:rgba(5,12,16,.82);
  backdrop-filter:blur(3px);
}
.weapon-card.selected>button{
  background:var(--yellow);
}
@media(max-width:1120px){
  .weapon-catalog{grid-template-columns:repeat(2,minmax(220px,1fr))}
}
@media(max-width:720px){
  .weapon-catalog{grid-template-columns:1fr}
}


/* V2.14 — arsenal homogénéisé, filtres de familles et protection clarifiée */
.weapon-category-filters{margin:-3px 0 14px;padding:0;gap:6px}
.weapon-category-filters .filter-chip{font-size:.54rem;padding:7px 9px;white-space:nowrap}
.weapon-category-filters .filter-chip.active{background:var(--cyan);border-color:var(--cyan);color:#061014;box-shadow:0 0 14px rgba(92,236,255,.12)}
.weapon-card{min-height:304px}
.weapon-visual img{object-fit:cover}
.weapon-card h3{margin-bottom:8px}
.weapon-card .weapon-stats{margin-top:auto}

.armor-block{gap:12px}
.armor-block-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid rgba(92,211,229,.12);padding-bottom:9px}
.armor-block-head h3{margin:3px 0 0;font-size:1.05rem}
.armor-intro{margin:0;color:#779099;font-size:.62rem;line-height:1.55;text-transform:none}
.armor-legend{display:grid;gap:5px;padding:9px;background:rgba(2,7,10,.62);border:1px solid rgba(91,203,220,.11)}
.armor-legend>div{display:grid;grid-template-columns:72px 1fr;gap:8px;align-items:start}
.armor-legend b{color:var(--cyan);font:.62rem var(--mono);letter-spacing:.06em}
.armor-legend span{color:#6f868e;font-size:.53rem;line-height:1.4}
.armor-choice{display:grid;gap:7px;padding:10px;border:1px solid rgba(94,203,220,.12);background:rgba(4,10,14,.6)}
.armor-choice-title{display:grid;grid-template-columns:34px 1fr;gap:9px;align-items:center}
.armor-choice-title strong{display:block;color:#dcebed;font:.68rem var(--mono);letter-spacing:.08em}
.armor-choice-title small{display:block;margin-top:3px;color:#607881;font-size:.52rem;line-height:1.35}
.armor-icon{width:30px;height:30px;position:relative;display:block;border:1px solid rgba(93,219,237,.18);background:radial-gradient(circle,rgba(67,220,242,.07),transparent 70%)}
.body-icon:before{content:"";position:absolute;left:8px;top:5px;width:12px;height:18px;border:1px solid var(--cyan);clip-path:polygon(25% 0,75% 0,100% 28%,82% 100%,18% 100%,0 28%);opacity:.8}
.head-icon:before{content:"";position:absolute;left:8px;top:5px;width:12px;height:13px;border:1px solid var(--cyan);border-radius:50% 50% 42% 42%;opacity:.8}
.head-icon:after{content:"";position:absolute;left:11px;top:18px;width:6px;height:5px;border-left:1px solid var(--cyan);border-right:1px solid var(--cyan);opacity:.8}
.shield-icon:before{content:"";position:absolute;left:7px;top:4px;width:14px;height:20px;border:1px solid var(--cyan);clip-path:polygon(50% 0,100% 18%,86% 74%,50% 100%,14% 74%,0 18%);opacity:.8}
.armor-choice .cyber-select{width:100%}
.armor-summary{padding:0;background:transparent}
.armor-summary-grid{display:grid;gap:7px}
.armor-summary-grid article{padding:10px;border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(75,219,239,.065),rgba(4,9,12,.82));display:grid;gap:5px}
.armor-summary-grid article.shield-readout{border-left-color:var(--yellow)}
.armor-summary-grid article>span{color:#647b84;font:.5rem var(--mono);letter-spacing:.12em}
.armor-summary-grid article>b{color:#e4f1f3;font:.67rem var(--heading);letter-spacing:.035em}
.armor-summary-grid article>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.armor-summary-grid strong{color:var(--cyan);font:.74rem var(--mono)}
.armor-summary-grid .shield-readout strong{color:var(--yellow)}
.armor-summary-grid em{font-style:normal;color:#778d95;font:.48rem var(--mono);text-align:right}
.armor-summary-grid small{color:#647b84;font:.52rem var(--mono)}
@media(max-width:820px){.weapon-category-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.weapon-category-filters .filter-chip{flex:0 0 auto}}

/* ========================================================================
   V2.15 — détails intégrés, catalogue cyberware complet et parcours en 02
   ======================================================================== */
.expandable-row,.expandable-card{cursor:pointer}
.expandable-row.expanded,.expandable-card.expanded{
  border-color:rgba(91,226,243,.62)!important;
  box-shadow:0 0 0 1px rgba(91,226,243,.12),0 0 24px rgba(33,179,207,.10),inset 0 0 28px rgba(22,93,108,.06)
}
.inline-detail{
  position:relative;
  width:100%;
  margin-top:12px;
  padding:14px 15px;
  border:1px solid rgba(91,226,243,.24);
  background:linear-gradient(135deg,rgba(6,18,23,.94),rgba(5,10,14,.9));
  box-shadow:inset 0 0 25px rgba(23,137,157,.06);
  cursor:default
}
.inline-detail:before{
  content:"";position:absolute;left:-1px;top:-1px;width:48px;height:2px;background:#ef3340;box-shadow:0 0 9px rgba(239,51,64,.55)
}
.inline-detail p{margin:11px 0 8px!important;color:#d8e5e8!important;font-size:.92rem!important;line-height:1.55!important}
.inline-detail>small{display:block;color:#728b92;font-size:.71rem;letter-spacing:.08em;text-transform:uppercase}
.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.detail-grid>span{padding:8px 9px;border-left:2px solid rgba(91,226,243,.42);background:rgba(255,255,255,.018);font-size:.66rem;letter-spacing:.09em;color:#718b91}
.detail-grid b{display:block;margin-top:4px;color:#edf6f7;font-size:.78rem;letter-spacing:.03em;overflow-wrap:anywhere}
.detail-specialization{display:block;margin:12px 0 8px;color:#8da3a8;font-size:.72rem;letter-spacing:.1em}
.detail-specialization input{margin-top:6px;width:100%}

.skill-row.expanded{grid-template-rows:auto auto}
.skill-inline-detail{grid-column:1/-1}
.skill-row{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.skill-row:hover{background:rgba(72,207,226,.035)}
.skill-name{min-width:0}
.skill-name:after{content:"▾";float:right;margin-left:10px;color:rgba(91,226,243,.42);font-size:.72rem;transition:transform .18s ease}
.skill-row.expanded .skill-name:after{transform:rotate(180deg);color:#6feafa}

.weapon-card.expanded,.item-card.expanded,.cyber-card.expanded{height:auto!important;max-height:none!important}
.weapon-inline-detail,.equipment-inline-detail,.cyber-inline-detail{margin-top:12px}
.weapon-inline-detail .detail-grid,.equipment-inline-detail .detail-grid,.cyber-inline-detail .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.owned-count{display:block;margin-top:8px;color:#6feafa;font-size:.7rem;letter-spacing:.08em}
.cyber-detail-actions{display:flex;gap:8px;margin-top:12px}

.cyber-controls{margin-bottom:15px;padding:14px 16px}
.cyber-mode-row{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(380px,1.6fr);gap:18px;align-items:start}
.cyber-mode-row>label{font-size:.72rem;letter-spacing:.1em;color:#829ba1}
.cyber-mode-row select{width:100%;margin-top:7px}
.role-cyber-pack{min-height:52px;padding:10px 12px;border-left:2px solid rgba(239,51,64,.65);background:rgba(255,255,255,.015)}
.role-cyber-pack p{margin:0;color:#9ab0b5;font-size:.8rem;line-height:1.45}
.role-pack-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:9px}
.role-pack-title b{color:#f1f7f8;letter-spacing:.08em}.role-pack-title span{color:#ef5962;font-weight:700}
.role-pack-items{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.role-pack-items>span,.role-pack-items>label{padding:6px 8px;border:1px solid rgba(91,226,243,.2);background:rgba(13,31,37,.72);color:#c8dadd;font-size:.7rem;letter-spacing:.05em}
.role-pack-items label{display:flex;align-items:center;gap:7px}
.role-pack-items select{width:auto;min-width:170px;margin:0;padding:4px 28px 4px 7px;font-size:.7rem}
.role-cyber-pack>small{display:block;margin-top:8px;color:#71888e;font-size:.66rem;line-height:1.4}
.danger-text{color:#ef5962!important}
.cyber-toolbar{display:flex;align-items:flex-start;gap:12px;margin-top:14px}
.cyber-toolbar input{min-width:260px;flex:0 0 300px}
.cyber-category-filters{flex:1;margin:0;flex-wrap:wrap}

.cyber-slot-summary{margin-bottom:14px;padding:12px;border:1px solid rgba(91,226,243,.16);background:rgba(5,15,19,.65)}
.cyber-slot-summary h3{margin:0 0 10px;font-size:.78rem;letter-spacing:.12em;color:#d7e7e9}
.slot-meter{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;margin:7px 0;padding-bottom:6px;color:#829ba1;font-size:.68rem;letter-spacing:.08em;overflow:hidden}
.slot-meter b{color:#dcecef}.slot-meter i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgba(255,255,255,.07)}
.slot-meter i:after{content:"";display:block;width:var(--fill);height:100%;background:#5be2f3;box-shadow:0 0 7px rgba(91,226,243,.6)}
.slot-meter.invalid b{color:#ef5962}.slot-meter.invalid i:after{background:#ef3340}

.cyber-card{min-height:250px}
.cyber-card>p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cyber-card.expanded>p{-webkit-line-clamp:unset}

@media(max-width:1050px){
  .detail-grid,.cyber-mode-row{grid-template-columns:1fr 1fr}
  .cyber-toolbar{flex-direction:column}.cyber-toolbar input{width:100%;flex:auto}
}
@media(max-width:720px){
  .detail-grid,.weapon-inline-detail .detail-grid,.equipment-inline-detail .detail-grid,.cyber-inline-detail .detail-grid,.cyber-mode-row{grid-template-columns:1fr}
}

/* V2.15 — Formule complète uniquement */
.formula-complete-note{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:11px 12px;border-left:2px solid #ef3340;
  background:linear-gradient(90deg,rgba(239,51,64,.07),rgba(91,226,243,.025));
}
.formula-complete-note b{color:#f3f8f9;font-size:.76rem;letter-spacing:.13em;white-space:nowrap}
.formula-complete-note span{color:#9db1b6;font-size:.78rem;line-height:1.5}
.slot-help{margin:0 0 11px;color:#728a90;font-size:.7rem;line-height:1.45;letter-spacing:.035em}
.slot-meter span{display:flex;align-items:baseline;gap:8px;min-width:0}
.slot-meter span small{color:#536c73;font-size:.58rem;letter-spacing:.06em}
.detail-note{padding:8px 10px;border-left:2px solid rgba(239,51,64,.55);background:rgba(239,51,64,.035);color:#aebfc3!important;font-size:.78rem!important}
.cyber-inline-detail .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:950px){.cyber-inline-detail .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.formula-complete-note{grid-template-columns:1fr}.cyber-inline-detail .detail-grid{grid-template-columns:1fr}}

/* Les fiches détaillées restent dans la carte sélectionnée, mais celle-ci
   s'étend pour que les informations demeurent lisibles. */
.weapon-card.expanded,.item-card.expanded{grid-column:span 2}
.cyber-card.expanded{grid-column:1/-1}
@media(max-width:760px){.weapon-card.expanded,.item-card.expanded,.cyber-card.expanded{grid-column:1/-1}}

/* ========================================================================
   V2.16 — dialogues cohérents et cartes sans informations redondantes
   ======================================================================== */
body.modal-open{overflow:hidden}
.dialog-row,.dialog-card{cursor:pointer}
.dialog-row:hover,.dialog-card:hover{border-color:rgba(92,236,255,.58)}
.skill-name:after{content:none!important}

.detail-modal-card{width:min(790px,92vw);padding:26px}
.detail-modal-card h2{margin-top:8px}
.detail-modal-visual{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  margin:4px 0 18px;
  overflow:hidden;
  border:1px solid rgba(92,236,255,.2);
  background:linear-gradient(145deg,#0a1014,#030609);
  box-shadow:inset 0 0 45px rgba(0,0,0,.42)
}
.detail-modal-visual.hidden{display:none}
.detail-modal-visual img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.detail-visual-placeholder{display:grid;place-items:center;width:100%;height:100%;color:#637b83;font:.66rem var(--mono);letter-spacing:.16em}
.detail-modal-body{color:#a4b7bc}
.detail-modal-body .detail-lead{margin:4px 0 17px;color:#d3e1e4;font-size:.9rem;line-height:1.7;text-transform:none}
.detail-modal-body .detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px}
.detail-modal-body .detail-grid>span{padding:10px 11px}
.detail-modal-body .detail-grid b{font-size:.82rem;line-height:1.35}
.detail-note-block{margin:14px 0 0;padding:10px 12px;border-left:2px solid rgba(239,51,64,.58);background:rgba(239,51,64,.035);color:#aebfc3!important;font-size:.8rem!important;line-height:1.55!important;text-transform:none}
.detail-modal-actions{display:flex;gap:9px;margin-top:19px}
.detail-modal-actions:empty{display:none}
.detail-modal-actions .button{flex:1}

.weapon-card.dialog-card{min-height:270px}
.weapon-card.dialog-card h3{margin-bottom:0;min-height:2.2em}
.weapon-card.dialog-card .weapon-category{margin-top:8px}
.weapon-card-price{display:block;margin-top:auto;padding-top:8px;color:var(--cyan);font:700 .68rem var(--mono);letter-spacing:.04em}
.cyber-card.dialog-card{min-height:250px}
.cyber-card.dialog-card>p{-webkit-line-clamp:3}
.item-card{cursor:default}

/* Supprime les flèches natives : les valeurs restent éditables au clavier. */
#roleRank,#reputation,#eddies{-moz-appearance:textfield;appearance:textfield;text-align:center;font-variant-numeric:tabular-nums}
#roleRank::-webkit-inner-spin-button,#roleRank::-webkit-outer-spin-button,
#reputation::-webkit-inner-spin-button,#reputation::-webkit-outer-spin-button,
#eddies::-webkit-inner-spin-button,#eddies::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;display:none}

@media(max-width:720px){
  .detail-modal-body .detail-grid{grid-template-columns:1fr}
  .detail-modal-actions{flex-direction:column}
}


/* ========================================================================
   V2.16.2 — valeurs alignées et mise en page résistante au zoom navigateur
   ======================================================================== */
/* On retire seulement les spinners : l'alignement reste identique aux autres
   champs du formulaire, au lieu de recentrer artificiellement les valeurs. */
#roleRank,#reputation,#eddies{
  text-align:left!important;
  padding-left:11px!important;
  padding-right:11px!important;
}

/* Les grilles choisissent naturellement leur nombre de colonnes selon la
   largeur réellement disponible (y compris lorsque le navigateur est zoomé). */
.role-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,145px),1fr))}
.derived-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr))}
.skills-container{grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr))}
.weapon-catalog,.cyber-catalog,.item-catalog{grid-template-columns:repeat(auto-fit,minmax(min(100%,225px),1fr))}
.dossier-meta{grid-template-columns:repeat(auto-fit,minmax(min(100%,115px),1fr))}
.section-head,.head-meters,.catalog-toolbar,.skill-toolbar{flex-wrap:wrap}
.catalog-toolbar input,.skill-toolbar input{flex:1 1 260px;min-width:min(100%,220px)}

/* Le dialogue possède son propre défilement, toujours accessible au zoom.
   dvh suit la hauteur réellement visible du navigateur. */
.modal{padding:12px;min-width:0}
.modal-card{
  width:min(650px,100%);
  max-width:100%;
  max-height:calc(100dvh - 24px);
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-color:#24505c #050a0d;
}
.detail-modal-card{width:min(790px,100%);max-width:100%}
.modal-card::-webkit-scrollbar{width:10px}
.modal-card::-webkit-scrollbar-track{background:#050a0d}
.modal-card::-webkit-scrollbar-thumb{background:#24505c;border:2px solid #050a0d}
.modal-card::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
.detail-modal-visual{max-height:min(52dvh,520px)}

/* Avant le basculement complet en affichage mobile, les grands assemblages se
   rangent déjà sur une seule colonne pour éviter l'écrasement au zoom. */
@media(max-width:1180px){
  .two-column,.arsenal-layout,.equipment-layout,.cyber-layout,.export-layout{grid-template-columns:1fr}
  .loadout-panel,.inventory-panel,.body-map-card{position:static}
  .field-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
  .field-grid .wide{grid-column:1/-1}
}

@media(max-width:920px){
  .workspace{padding-left:18px;padding-right:18px}
  .detail-modal-card{padding:20px}
  .detail-modal-body .detail-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
}

@media(max-height:700px){
  .modal{align-items:flex-start;padding:6px}
  .modal-card{max-height:calc(100dvh - 12px);padding-top:20px;padding-bottom:20px}
  .detail-modal-visual{max-height:42dvh;margin-bottom:13px}
}

@media(max-width:820px){
  .role-grid,.stats-grid,.derived-grid,.skills-container,
  .weapon-catalog,.cyber-catalog,.item-catalog,.lifepath-grid,
  .field-grid{grid-template-columns:1fr}
  .dossier-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .detail-modal-body .detail-grid{grid-template-columns:1fr}
}


/* ========================================================================
   V2.17 — interface plus ample à 100 % et réinitialisation globale
   ======================================================================== */
.reset-system-button{
  width:100%;
  border:0;
  border-left:2px solid rgba(255,51,68,.42);
  background:linear-gradient(90deg,rgba(255,51,68,.055),transparent);
  color:#a76f76;
  text-align:left;
  padding:14px 10px;
  margin-top:7px;
  font-size:.62rem;
  letter-spacing:.08em;
  transition:.18s;
}
.reset-system-button span{
  display:inline-block;
  width:31px;
  color:var(--red);
  font:800 .72rem var(--mono);
}
.reset-system-button:hover{
  color:white;
  border-left-color:var(--red);
  background:linear-gradient(90deg,rgba(255,51,68,.13),transparent);
  text-shadow:-1px 0 rgba(255,50,70,.36),1px 0 rgba(67,227,255,.22);
  box-shadow:inset 12px 0 26px rgba(255,51,68,.035);
}
.reset-warning-lead{max-width:680px}
.reset-warning-note{border-left-color:var(--red)!important;color:#d8b8bd!important}
.reset-confirm-button{background:#c7182b!important;border-color:#ff4253!important}

/* Le palier 1200 px vise l'affichage de bureau à 100 %. Lorsqu'un zoom
   navigateur réduit la largeur CSS, les règles adaptatives V2.16.2 reprennent
   automatiquement la main afin de ne pas casser la mise en page. */
@media(min-width:1200px){
  .app-shell{grid-template-columns:260px minmax(0,1fr)}
  .sidebar{padding:20px 14px}
  .nav-item,.reset-system-button{min-height:56px;padding:18px 13px;font-size:.72rem}
  .nav-item span,.reset-system-button span{width:37px;font-size:.66rem}

  .role-grid{gap:13px}
  .role-card{min-height:120px;padding:17px 16px}
  .role-card i{font-size:.59rem}
  .role-card b{font-size:1.35rem;margin:11px 0 7px}
  .role-card small{font-size:.65rem;line-height:1.4}

  .stats-grid{gap:14px}
  .stat-card{min-height:194px;padding:17px}
  .stat-card b{font-size:1.75rem}
  .stat-card small{font-size:.59rem}
  .stat-control{grid-template-columns:36px 1fr 36px;gap:9px;margin-top:22px}
  .stat-control button{height:36px;font-size:1rem}
  .stat-control strong{font-size:2.25rem}
  .stat-card p{margin-top:14px;font-size:.68rem;line-height:1.5}

  .skills-container{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px}
  .skill-category h3{padding:14px 15px;font-size:1.12rem}
  .skill-row{grid-template-columns:minmax(0,1fr) 46px 104px 46px;gap:9px;min-height:49px;padding:10px 12px;font-size:.7rem}
  .skill-name em{font-size:.52rem;padding:3px 5px}
  .skill-name span{font-size:.54rem}
  .mini-stepper{grid-template-columns:30px 40px 30px}
  .mini-stepper button,.mini-stepper input{height:31px}

  .weapon-catalog{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
  .weapon-card.dialog-card{min-height:350px;padding:0 16px 16px}
  .weapon-card .weapon-visual{margin:0 -16px 13px}
  .weapon-card.dialog-card h3{font-size:1.13rem;min-height:2.25em}
  .weapon-card-price{font-size:.75rem;padding-top:10px}
  .weapon-category{font-size:.54rem;margin-top:10px}

  /* Deux colonnes plus larges donnent aux objets et cyberimplants une forme
     plus longiligne, tout en augmentant réellement leur surface cliquable. */
  .item-catalog,.cyber-catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
  .item-card{min-height:190px;padding:17px}
  .item-card h3{font-size:1.14rem;margin-top:11px}
  .item-card p{font-size:.65rem;line-height:1.55;padding-right:8px}
  .item-price{right:14px;bottom:14px;font-size:.72rem}
  .cyber-card.dialog-card{min-height:198px;padding:17px 17px 42px}
  .cyber-card.dialog-card h3{font-size:1.14rem;margin-top:11px}
  .cyber-card.dialog-card>p{font-size:.64rem;line-height:1.5;-webkit-line-clamp:3}
}

@media(max-width:1100px){
  .reset-system-button{font-size:0;text-align:center}
  .reset-system-button span{font-size:.84rem;width:auto}
}
@media(max-width:820px){
  .reset-system-button{min-width:48px;margin-top:0;border-left:0;border-bottom:2px solid rgba(255,51,68,.42);padding:14px 10px}
}

/* V2.18 — filtre des compétences acquises et gestion des munitions */
.owned-filter{
  border-color:rgba(242,242,29,.28)!important;
  color:#a9aa73!important;
}
.owned-filter.active{
  color:#070909!important;
  background:var(--yellow)!important;
  border-color:var(--yellow)!important;
}
.ammo-block{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid var(--line);
  display:grid;
  gap:11px;
}
.ammo-block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.ammo-block-head h3{font:.98rem var(--heading);letter-spacing:.09em;margin:3px 0 0}
.ammo-cost{color:var(--yellow);font:700 .68rem var(--mono);white-space:nowrap}
.ammo-intro{margin:0;color:#6f858e;font-size:.57rem;line-height:1.45}
.ammo-builder{display:grid;gap:8px;padding:11px;border:1px solid rgba(91,208,225,.14);background:rgba(3,8,11,.46)}
.ammo-builder label{display:grid;gap:5px;color:#617780;font:700 .5rem var(--mono);letter-spacing:.08em}
.ammo-builder select{width:100%;min-width:0;padding:8px 9px;font-size:.57rem}
.ammo-purchase-info{display:grid;gap:5px;padding:8px 9px;background:rgba(72,202,220,.045);border-left:2px solid rgba(92,236,255,.35)}
.ammo-purchase-info strong{font:700 .58rem var(--mono);color:var(--cyan)}
.ammo-purchase-info span{font-size:.54rem;line-height:1.45;color:#71868e}
.ammo-selected-list{max-height:280px}
.ammo-selected-item{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.ammo-selected-item strong{line-height:1.35}
.ammo-qty-controls{display:grid;grid-template-columns:24px 25px 24px;align-items:center}
.ammo-qty-controls button{position:static!important;width:24px!important;height:25px!important;border:1px solid var(--line)!important;background:#071015!important;color:var(--cyan)!important}
.ammo-qty-controls span{text-align:center;font:700 .58rem var(--mono);color:#b5c4c9}

@media(min-width:1200px){
  .ammo-builder{padding:13px}
  .ammo-intro{font-size:.61rem}
  .ammo-purchase-info span{font-size:.58rem}
}

/* ========================================================================
   V2.19 — budgets séparés et audit des textes du parcours
   ======================================================================== */
.budget-stack{
  display:grid;
  gap:4px;
  min-width:162px;
  padding:7px 10px;
  text-align:left;
}
.budget-stack span{display:block;white-space:nowrap}
.budget-stack span:first-child{color:var(--blue)}
.budget-stack span:last-child{color:var(--yellow)}
.budget-stack .invalid{color:var(--red)}
.style-money{color:var(--yellow);border-color:rgba(245,246,31,.22)}
.style-money.invalid{color:var(--red);border-color:var(--line-red)}
#styleEddies[readonly]{
  color:var(--yellow);
  border-color:rgba(245,246,31,.2);
  background:rgba(10,10,4,.68);
  cursor:not-allowed;
}
.money-summary-block{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.money-budget-row{
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(67,204,227,.14);
  background:rgba(3,9,12,.5);
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 10px;
}
.money-budget-row span{align-self:center}
.money-budget-row strong{text-align:right}
.money-budget-row small{grid-column:1/-1}
.money-budget-row.invalid{border-color:var(--line-red);box-shadow:0 0 15px rgba(255,51,68,.08)}
.money-budget-row.invalid strong,.money-budget-row.invalid small{color:var(--red)}
#identityStyleBudgetBlock strong{color:var(--yellow)}
#identityStyleBudgetBlock small{color:#a7a85f}
#identityStyleBudgetBlock.invalid strong,#identityStyleBudgetBlock.invalid small{color:var(--red)}
@media(max-width:1180px){
  .money-summary-block{grid-template-columns:1fr}
}
#styleEddies{-moz-appearance:textfield;appearance:textfield;text-align:left!important;padding-left:11px!important;padding-right:11px!important;font-variant-numeric:tabular-nums}
#styleEddies::-webkit-inner-spin-button,#styleEddies::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;display:none}

/* ========================================================================
   V2.20 — colonnes de compétences, modificateurs et Netrunner
   ======================================================================== */
.skill-columns-header,
.skill-row {
  grid-template-columns: minmax(0, 1fr) 108px 58px 58px;
}
.skill-columns-header.has-other,
.skill-row.has-other {
  grid-template-columns: minmax(0, 1fr) 108px 58px minmax(72px, auto) 58px;
}
.skill-columns-header {
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 0 14px 7px;
  color: rgba(207, 222, 225, .55);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-align: center;
}
.skill-columns-header span:first-child { text-align: left; }
.skill-row .mini-stepper { grid-column: 2; }
.skill-row .skill-stat { grid-column: 3; position: relative; }
.skill-row .skill-other { grid-column: 4; }
.skill-row.has-other .skill-base { grid-column: 5; }
.skill-row:not(.has-other) .skill-base { grid-column: 4; }
.skill-stat small {
  position: absolute;
  right: 2px;
  bottom: -2px;
  color: rgba(225, 96, 96, .8);
  font-size: .56rem;
  text-decoration: line-through;
}
.skill-other { display: flex; justify-content: center; min-width: 0; }
.skill-modifier-stack { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.skill-modifier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  min-height: 25px;
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}
.skill-modifier.cyberware { color: #ec5c61; background: rgba(209, 45, 54, .09); }
.skill-modifier.equipment { color: #54bde2; background: rgba(41, 151, 193, .09); }
.skill-modifier.role { color: #e8bd65; background: rgba(198, 145, 39, .09); }
.skill-modifier.armor { color: #b99ad9; background: rgba(126, 87, 164, .1); }
.skill-modifier.conditional { border-style: dashed; }
.skill-other-empty { color: rgba(207, 222, 225, .25); }
.skill-base { display: flex; align-items: center; justify-content: center; gap: 3px; }
.skill-base strong { font: inherit; }
.skill-base small { color: #ec5c61; font-size: .6rem; cursor: help; }
.skill-detail-modifiers { margin-top: 18px; }
.skill-detail-modifiers h4,
.chip-installed-list h4 { margin: 0 0 8px; font-size: .7rem; letter-spacing: .12em; color: rgba(210, 229, 232, .58); }
.skill-detail-modifiers p,
.chip-installed-list p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
  padding: 7px 9px;
  border: 1px solid rgba(126, 177, 183, .16);
  background: rgba(0, 0, 0, .17);
}
.skill-detail-modifiers p small { grid-column: 2; color: rgba(210, 229, 232, .58); }
.chip-installed-list { margin-top: 16px; }
.chip-installed-list p span { color: #ec5c61; font-weight: 900; }
.detail-specialization select { width: 100%; margin-top: 7px; }

.netrunner-panel {
  margin-top: 18px;
  padding: 20px;
  border-color: rgba(55, 184, 219, .25);
  background: linear-gradient(135deg, rgba(13, 41, 52, .62), rgba(8, 13, 17, .72));
}
.netrunner-panel.hidden { display: none; }
.netrunner-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.netrunner-panel-head h3 { margin: 3px 0 0; }
.netrunner-action-count { display: flex; align-items: center; gap: 10px; text-align: right; }
.netrunner-action-count b { color: #54bde2; font-size: 2rem; line-height: 1; }
.netrunner-action-count span { max-width: 110px; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.netrunner-readiness { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.netrunner-check {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid rgba(126, 177, 183, .18);
  background: rgba(0, 0, 0, .2);
  color: inherit;
  text-align: left;
}
.netrunner-check i { font-style: normal; }
.netrunner-check.ok i, .netrunner-check.ok b { color: #58c993; }
.netrunner-check.missing i, .netrunner-check.missing b { color: #ec5c61; }
.netrunner-check span { font-size: .72rem; font-weight: 800; }
.netrunner-check span small { display: block; margin-top: 2px; color: rgba(210, 229, 232, .45); font-size: .55rem; }
.netrunner-check b { font-size: .65rem; }
.netrunner-console-summary { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(126, 177, 183, .14); }
.netrunner-console-summary span { font-size: .66rem; color: rgba(210, 229, 232, .55); }
.netrunner-console-summary b { margin-left: 5px; color: #d9ecee; }

@media (max-width: 1050px) {
  .skill-columns-header,
  .skill-row { grid-template-columns: minmax(0, 1fr) 94px 52px 52px; }
  .skill-columns-header.has-other,
  .skill-row.has-other { grid-template-columns: minmax(0, 1fr) 94px 52px 66px 52px; }
}
@media (max-width: 760px) {
  .skill-columns-header { display: none; }
  .skill-row,
  .skill-row.has-other {
    grid-template-columns: minmax(0, 1fr) 92px 52px 66px 52px;
    row-gap: 8px;
  }
  .skill-row .skill-name { grid-column: 1 / -1; }
  .skill-row .mini-stepper { grid-column: 2; }
  .skill-row .skill-stat { grid-column: 3; }
  .skill-row .skill-other { grid-column: 4; }
  .skill-row.has-other .skill-base { grid-column: 5; }
  .skill-row:not(.has-other) .skill-base { grid-column: 4; }
  .netrunner-readiness { grid-template-columns: 1fr; }
  .netrunner-panel-head { align-items: flex-start; }
}

/* ======================================================================
   V2.21 — capacités de rôle et atelier Netrunner
   ====================================================================== */
.role-ability-panel {
  margin-top: 22px;
  padding: clamp(18px, 2.2vw, 28px);
  border-color: rgba(222, 55, 64, .22);
  background:
    linear-gradient(135deg, rgba(24, 15, 18, .9), rgba(8, 14, 18, .88)),
    radial-gradient(circle at 100% 0, rgba(222, 55, 64, .1), transparent 42%);
  overflow: hidden;
}
.role-ability-panel.hidden { display: none; }
.role-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}
.role-panel-head h3 {
  margin: 3px 0 0;
  font-size: clamp(1.08rem, 1.8vw, 1.55rem);
  letter-spacing: .03em;
}
.role-rank-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 92px;
  padding: 10px 14px;
  border: 1px solid rgba(222, 55, 64, .35);
  background: rgba(222, 55, 64, .08);
  color: rgba(226, 238, 240, .62);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
}
.role-rank-badge b {
  display: block;
  margin-top: 2px;
  color: #f06a70;
  font-size: 1.45rem;
  line-height: 1;
}
.role-panel-lead {
  max-width: 980px;
  margin: 0 0 18px;
  color: rgba(218, 234, 236, .7);
  font-size: .78rem;
  line-height: 1.65;
}
.role-points {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 16px;
  padding: 10px 13px;
  border: 1px solid rgba(222, 55, 64, .2);
  background: rgba(0, 0, 0, .22);
  color: rgba(213, 230, 232, .58);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .09em;
}
.role-points strong { color: #f06a70; font-size: .9rem; }
.role-points.complete { border-color: rgba(78, 194, 143, .32); }
.role-points.complete strong { color: #58c993; }
.role-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.role-metrics-grid.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.role-metric {
  min-height: 84px;
  padding: 12px;
  border: 1px solid rgba(126, 177, 183, .16);
  background: rgba(1, 7, 9, .3);
}
.role-metric span,
.role-metric small {
  display: block;
  color: rgba(211, 229, 232, .5);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.4;
}
.role-metric strong {
  display: block;
  margin: 7px 0 3px;
  color: #e7f2f3;
  font-size: .86rem;
  line-height: 1.25;
}
.role-allocation-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.role-allocation-row {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(220px, 1.2fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 177, 183, .16);
  background: rgba(0, 0, 0, .2);
}
.role-allocation-row > div:first-child strong,
.role-allocation-row > div:first-child span { display: block; }
.role-allocation-row > div:first-child strong { font-size: .76rem; }
.role-allocation-row > div:first-child span {
  margin-top: 3px;
  color: rgba(211, 229, 232, .46);
  font-size: .57rem;
  line-height: 1.4;
}
.role-allocation-row > small {
  color: rgba(210, 228, 231, .62);
  font-size: .61rem;
  line-height: 1.45;
}
.role-stepper {
  display: grid;
  grid-template-columns: 34px minmax(34px, auto) 34px;
  align-items: center;
  gap: 4px;
}
.role-stepper button,
.net-item-qty button {
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(126, 177, 183, .22);
  background: rgba(4, 13, 16, .76);
  color: #d8eaec;
  font-weight: 900;
  cursor: pointer;
}
.role-stepper button:hover:not(:disabled),
.net-item-qty button:hover:not(:disabled) {
  border-color: rgba(222, 55, 64, .55);
  color: #f06a70;
}
.role-stepper button:disabled,
.net-item-qty button:disabled { opacity: .3; cursor: default; }
.role-stepper strong { text-align: center; font-size: 1rem; }
.role-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.role-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  min-height: 76px;
  padding: 10px;
  border: 1px solid rgba(126, 177, 183, .15);
  background: rgba(0, 0, 0, .2);
  cursor: pointer;
}
.role-choice.selected { border-color: rgba(222, 55, 64, .5); background: rgba(222, 55, 64, .07); }
.role-choice input { margin-top: 2px; accent-color: #d93640; }
.role-choice strong,
.role-choice small { display: block; }
.role-choice strong { font-size: .7rem; }
.role-choice small { margin-top: 4px; color: rgba(211, 229, 232, .47); font-size: .56rem; line-height: 1.45; }
.medtech-medicines { margin-top: 17px; }
.medtech-medicines > span,
.role-perks > span,
.corpo-members > span,
.fixer-cultures > span,
.nomad-garage > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(211, 229, 232, .48);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.role-perks {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(126, 177, 183, .13);
}
.role-perks ul { margin: 0; padding-left: 18px; color: rgba(218, 234, 236, .68); }
.role-perks li { margin: 6px 0; font-size: .69rem; line-height: 1.45; }
.corpo-members,
.fixer-cultures,
.nomad-garage { display: grid; gap: 9px; margin-top: 14px; }
.corpo-member {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 110px;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(126, 177, 183, .17);
  background: rgba(0, 0, 0, .2);
}
.corpo-member label,
.fixer-cultures label,
.nomad-slot label {
  color: rgba(211, 229, 232, .48);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.corpo-member input,
.corpo-member select,
.fixer-cultures input,
.nomad-slot input,
.nomad-slot select {
  width: 100%;
  margin-top: 5px;
  text-align: left;
}
.corpo-member input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.corpo-member input[type="number"]::-webkit-inner-spin-button,
.corpo-member input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.lawman-unit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}
.lawman-unit > div {
  padding: 11px;
  border: 1px solid rgba(126, 177, 183, .15);
  background: rgba(0, 0, 0, .2);
}
.lawman-unit span,
.lawman-unit b { display: block; }
.lawman-unit span { color: rgba(211, 229, 232, .47); font-size: .57rem; letter-spacing: .08em; }
.lawman-unit b { margin-top: 5px; font-size: .72rem; line-height: 1.35; }
.role-sd-line {
  margin-top: 13px;
  padding: 11px 13px;
  border-left: 3px solid #d93640;
  background: rgba(217, 54, 64, .07);
  color: rgba(222, 236, 238, .73);
  font-size: .68rem;
  line-height: 1.5;
}
.role-empty-note {
  margin: 12px 0 0;
  padding: 11px;
  border: 1px dashed rgba(126, 177, 183, .2);
  color: rgba(211, 229, 232, .48);
  font-size: .65rem;
}
.role-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nomad-slot {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) minmax(150px, .65fr);
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(126, 177, 183, .16);
  background: rgba(0, 0, 0, .2);
}

.netrunner-workbench {
  margin: 0 0 20px;
  padding: clamp(16px, 2vw, 25px);
  border-color: rgba(55, 184, 219, .28);
  background:
    linear-gradient(145deg, rgba(8, 22, 29, .92), rgba(5, 10, 14, .92)),
    radial-gradient(circle at 96% 0, rgba(48, 169, 203, .13), transparent 38%);
}
.netrunner-workbench.hidden { display: none; }
.net-workbench-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 14px;
}
.net-workbench-head h2 { margin: 3px 0 4px; font-size: clamp(1.15rem, 2vw, 1.7rem); }
.net-workbench-head p { margin: 0; max-width: 720px; color: rgba(211, 229, 232, .55); font-size: .66rem; line-height: 1.5; }
.net-workbench-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(222, 55, 64, .3);
  background: rgba(222, 55, 64, .06);
}
.net-workbench-status.ok { border-color: rgba(78, 194, 143, .3); background: rgba(78, 194, 143, .055); }
.net-workbench-status span,
.net-workbench-status b { display: block; }
.net-workbench-status span { color: rgba(211, 229, 232, .5); font-size: .58rem; font-weight: 900; letter-spacing: .12em; }
.net-workbench-status b { margin-top: 4px; color: #ee666c; font-size: .67rem; line-height: 1.45; }
.net-workbench-status.ok b { color: #58c993; }
.net-slot-ring {
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 84px;
  padding: 10px 12px;
  border: 1px solid rgba(55, 184, 219, .3);
  color: #55c1e6;
}
.net-slot-ring strong { font-size: 1.35rem; }
.net-slot-ring span { margin-left: 4px; color: rgba(211, 229, 232, .55); font-size: .65rem; }
.net-slot-ring.over { border-color: rgba(222, 55, 64, .48); color: #ee666c; }
.net-prerequisites {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 15px;
}
.net-prerequisites .netrunner-check { width: 100%; }
.net-console-section {
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(55, 184, 219, .17);
  background: rgba(0, 0, 0, .18);
}
.net-console-section > h3 { margin: 0 0 10px; font-size: .72rem; letter-spacing: .1em; }
.net-console-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.net-console-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 11px;
  border: 1px solid rgba(126, 177, 183, .15);
  background: rgba(0, 0, 0, .2);
}
.net-console-card.owned { border-color: rgba(55, 184, 219, .35); }
.net-console-card.active { box-shadow: inset 3px 0 0 #38b6dd; background: rgba(55, 184, 219, .07); }
.net-console-card span,
.net-console-card h4,
.net-console-card small { display: block; }
.net-console-card span { color: #4db9dd; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }
.net-console-card h4 { margin: 5px 0 3px; font-size: .72rem; }
.net-console-card small { color: rgba(211, 229, 232, .46); font-size: .57rem; }
.net-console-actions { display: grid; gap: 5px; }
.net-console-actions button,
.net-view-tabs button,
.net-arm-extension label {
  min-height: 31px;
  padding: 6px 9px;
  border: 1px solid rgba(126, 177, 183, .2);
  background: rgba(4, 13, 16, .78);
  color: rgba(218, 234, 236, .7);
  font-size: .54rem;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
}
.net-console-actions button.active,
.net-view-tabs button.active { border-color: #38b6dd; color: #5cc5e8; background: rgba(55, 184, 219, .08); }
.net-arm-extension { margin-top: 9px; }
.net-arm-extension label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.net-arm-extension input { accent-color: #38b6dd; }
.net-view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0 10px; }
.net-workbench-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(245px, .34fr);
  gap: 13px;
  align-items: start;
}
.net-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.net-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 225px;
  padding: 12px;
  border: 1px solid rgba(126, 177, 183, .15);
  background: rgba(0, 0, 0, .22);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.net-item-card:hover { transform: translateY(-1px); border-color: rgba(55, 184, 219, .42); }
.net-item-card.selected { border-color: rgba(55, 184, 219, .55); background: rgba(55, 184, 219, .065); }
.net-item-card > span { color: #50bde1; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }
.net-item-card h4 { margin: 7px 0 8px; font-size: .78rem; }
.net-item-card p { margin: 0 0 12px; color: rgba(213, 230, 232, .57); font-size: .61rem; line-height: 1.48; }
.net-item-stats {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(126, 177, 183, .12);
}
.net-item-stats small { color: rgba(211, 229, 232, .45); font-size: .52rem; line-height: 1.35; }
.net-item-stats b { color: #e7f2f3; font-size: .65rem; white-space: nowrap; }
.net-item-qty {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
}
.net-item-qty strong { text-align: center; font-size: .85rem; }
.net-loadout-summary {
  position: sticky;
  top: 16px;
  padding: 13px;
  border: 1px solid rgba(55, 184, 219, .19);
  background: rgba(1, 7, 10, .58);
}
.net-loadout-summary h3 { margin: 0 0 10px; font-size: .72rem; letter-spacing: .08em; }
.net-slot-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}
.net-slot-breakdown div {
  padding: 8px;
  border: 1px solid rgba(126, 177, 183, .12);
}
.net-slot-breakdown span,
.net-slot-breakdown b { display: block; }
.net-slot-breakdown span { color: rgba(211, 229, 232, .44); font-size: .5rem; }
.net-slot-breakdown b { margin-top: 3px; font-size: .68rem; }
.net-selected-list { display: grid; gap: 5px; }
.net-selected-list > div {
  display: flex;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid rgba(126, 177, 183, .11);
  color: rgba(218, 234, 236, .66);
  font-size: .58rem;
}
.net-selected-list b { color: #55c1e6; white-space: nowrap; }

@media (max-width: 1280px) {
  .role-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .role-allocation-row { grid-template-columns: minmax(0, 1fr) auto; }
  .role-allocation-row > small { grid-column: 1 / -1; }
  .role-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .corpo-member { grid-template-columns: 1fr 1fr; }
  .corpo-member label:last-child { grid-column: 1 / -1; }
  .nomad-slot { grid-template-columns: 1fr 1fr; }
  .nomad-slot label:last-child { grid-column: 1 / -1; }
  .net-workbench-layout { grid-template-columns: 1fr; }
  .net-loadout-summary { position: static; }
}
@media (max-width: 720px) {
  .role-panel-head,
  .net-workbench-head { flex-direction: column; }
  .role-rank-badge { min-width: 0; width: 100%; }
  .role-metrics-grid,
  .role-metrics-grid.compact,
  .role-choice-grid,
  .lawman-unit,
  .net-prerequisites,
  .net-console-grid,
  .net-catalog { grid-template-columns: 1fr; }
  .role-allocation-row { grid-template-columns: 1fr; }
  .role-stepper { width: 116px; }
  .corpo-member,
  .nomad-slot { grid-template-columns: 1fr; }
  .corpo-member label:last-child,
  .nomad-slot label:last-child { grid-column: auto; }
  .net-workbench-status { grid-template-columns: 1fr; }
  .net-slot-ring { width: 100%; }
  .net-console-card { grid-template-columns: 1fr; }
  .net-console-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-item-card { min-height: 0; }
}

/* Correctifs de lisibilité du bandeau de configuration NET. */
.net-workbench-head > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(55, 184, 219, .18);
  background: rgba(0, 0, 0, .2);
}
.net-workbench-head > div:last-child b { color: #e8f3f4; font-size: .82rem; }
.net-workbench-head > div:last-child span { color: rgba(211, 229, 232, .48); font-size: .54rem; font-weight: 900; letter-spacing: .08em; }
.net-prerequisites > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid rgba(126, 177, 183, .2);
  background: rgba(2, 9, 12, .72);
  color: #dcebed;
  text-align: left;
  cursor: pointer;
}
.net-prerequisites > button:hover { border-color: rgba(55, 184, 219, .48); }
.net-prerequisites > button.ok { border-color: rgba(78, 194, 143, .34); background: rgba(78, 194, 143, .06); }
.net-prerequisites > button.missing { border-color: rgba(222, 55, 64, .28); }
.net-prerequisites > button b,
.net-prerequisites > button span { display: block; }
.net-prerequisites > button b { font-size: .64rem; }
.net-prerequisites > button span { color: #ed676d; font-size: .55rem; font-weight: 900; white-space: nowrap; }
.net-prerequisites > button.ok span { color: #58c993; }
@media (max-width: 720px) {
  .net-workbench-head > div:last-child { align-items: flex-start; width: 100%; }
}

/* Ajustement aux balises générées par les cartes dynamiques. */
.role-metric b { display: block; margin: 7px 0 3px; color: #e7f2f3; font-size: .86rem; line-height: 1.25; }
.role-allocation-row > div:first-child b,
.role-allocation-row > div:first-child small { display: block; }
.role-allocation-row > div:first-child b { font-size: .76rem; }
.role-allocation-row > div:first-child small { margin-top: 4px; color: rgba(211, 229, 232, .48); font-size: .57rem; line-height: 1.4; }
.medtech-medicines h4,
.fixer-cultures h4 { margin: 0 0 9px; color: rgba(211, 229, 232, .56); font-size: .65rem; letter-spacing: .1em; }
.medtech-medicines h4 span { float: right; color: #f06a70; }
.corpo-member {
  grid-template-columns: 150px minmax(160px, .75fr) minmax(190px, 1fr);
  align-items: start;
}
.corpo-member > header {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 54px;
  gap: 5px 8px;
  align-items: center;
}
.corpo-member > header b { grid-column: 1 / -1; font-size: .68rem; }
.corpo-member > header span { color: rgba(211,229,232,.45); font-size: .5rem; letter-spacing: .08em; }
.corpo-member > header input { width: 54px; margin: 0; }
.corpo-member > input,
.corpo-member > select,
.corpo-member > textarea {
  width: 100%;
  margin: 0;
  text-align: left;
}
.corpo-member > textarea { grid-column: 2 / -1; min-height: 62px; resize: vertical; }
.corpo-member > small { grid-column: 2 / -1; color: rgba(211,229,232,.45); font-size: .56rem; line-height: 1.4; }
.fixer-cultures > h4 { margin-bottom: 0; }
.fixer-cultures > label {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(126,177,183,.14);
  background: rgba(0,0,0,.18);
}
.fixer-cultures > label span { color: #f06a70; text-align: center; font-weight: 900; }
.fixer-cultures > label input { margin: 0; }
.nomad-slot > header { display: grid; gap: 6px; }
.nomad-slot > header b { font-size: .63rem; }
.nomad-slot > header select,
.nomad-slot > select,
.nomad-slot > input { width: 100%; margin: 0; }
.lawman-unit > header,
.lawman-unit > p,
.lawman-unit > .role-metrics-grid { margin: 0; padding: 11px; border: 1px solid rgba(126,177,183,.15); background: rgba(0,0,0,.2); }
.lawman-unit > header span,
.lawman-unit > header h4,
.lawman-unit > header b { display: block; }
.lawman-unit > header span { color: rgba(211,229,232,.47); font-size: .55rem; letter-spacing: .08em; }
.lawman-unit > header h4 { margin: 5px 0; font-size: .8rem; }
.lawman-unit > header b { color: rgba(218,234,236,.65); font-size: .62rem; }
.lawman-unit > p { color: rgba(218,234,236,.65); font-size: .64rem; line-height: 1.5; }
.role-sd-line { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.role-sd-line span { font-size: .6rem; }
.role-sd-line b { margin-left: 4px; color: #e8f3f4; }
.role-sd-line small { margin-left: auto; color: rgba(211,229,232,.42); }
.net-slot-breakdown > span {
  display: block;
  padding: 8px;
  border: 1px solid rgba(126, 177, 183, .12);
  color: rgba(211, 229, 232, .44);
  font-size: .5rem;
}
.net-slot-breakdown > span b { display: block; margin-top: 3px; color: #e7f2f3; font-size: .68rem; }
.net-slot-breakdown > span.bonus { border-color: rgba(78,194,143,.22); }
.net-slot-breakdown > span.bonus b { color: #58c993; }
@media (max-width: 980px) {
  .corpo-member { grid-template-columns: 135px minmax(0,1fr); }
  .corpo-member > select { grid-column: 2; }
  .corpo-member > textarea,
  .corpo-member > small { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .corpo-member { grid-template-columns: 1fr; }
  .corpo-member > header { grid-row: auto; }
  .corpo-member > select,
  .corpo-member > textarea,
  .corpo-member > small { grid-column: auto; }
}

/* ======================================================================
   V2.22 — lisibilité compétences, caractéristiques et détails de rôle
   ====================================================================== */

/* Compétences : deux colonnes réellement lisibles sur écran large,
   puis une seule dès que le zoom réduit la largeur disponible. */
.skills-container{
  grid-template-columns:repeat(2,minmax(540px,1fr));
  gap:18px;
}
.skill-category{min-width:0}
.skill-category h3{padding:15px 17px;font-size:1.15rem}
.skill-columns-header,
.skill-row{
  grid-template-columns:minmax(235px,1fr) 106px 64px 64px;
  column-gap:13px;
}
.skill-columns-header.has-other,
.skill-row.has-other{
  grid-template-columns:minmax(220px,1fr) 106px 64px minmax(78px,auto) 64px;
}
.skill-columns-header{
  padding:10px 16px 8px;
  font-size:.63rem;
}
.skill-row{
  min-height:58px;
  padding:10px 16px;
  font-size:.72rem;
}
.skill-name{
  line-height:1.35;
  overflow-wrap:anywhere;
}
.skill-row .mini-stepper{justify-self:center;width:92px}
.skill-row .skill-stat,
.skill-row .skill-base{font-size:.75rem}

@media(max-width:1450px){
  .skills-container{grid-template-columns:1fr}
  .skill-columns-header,
  .skill-row{grid-template-columns:minmax(260px,1fr) 108px 68px 68px}
  .skill-columns-header.has-other,
  .skill-row.has-other{grid-template-columns:minmax(245px,1fr) 108px 68px minmax(82px,auto) 68px}
}
@media(max-width:760px){
  .skill-row,
  .skill-row.has-other{
    grid-template-columns:minmax(0,1fr) 94px 54px 70px 54px;
    padding:11px 12px;
  }
  .skill-row .skill-name{grid-column:1/-1;margin-bottom:2px}
}

/* Caractéristiques : cartes moins carrées et intitulé complet compact. */
.stats-grid{grid-template-columns:repeat(5,minmax(190px,1fr));gap:14px}
.stat-card.v222-stat-card{
  min-height:154px;
  padding:16px 17px;
}
.stat-word{
  display:flex;
  align-items:baseline;
  min-width:0;
  font-family:var(--heading);
  letter-spacing:.045em;
  white-space:nowrap;
}
.stat-word b{font-size:1.7rem!important;color:var(--cyan)!important}
.stat-word span{font-size:1.18rem;color:#e8f0f2}
.stat-card.v222-stat-card .stat-control{margin-top:12px;grid-template-columns:38px 1fr 38px}
.stat-card.v222-stat-card .stat-control button{height:37px}
.stat-card.v222-stat-card .stat-control strong{font-size:2.15rem}
.stat-card.v222-stat-card p{margin-top:10px;font-size:.65rem;line-height:1.4}
@media(max-width:1450px){.stats-grid{grid-template-columns:repeat(3,minmax(210px,1fr))}}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(200px,1fr))}}
@media(max-width:560px){.stats-grid{grid-template-columns:1fr}}

/* Synthèse du parcours sous le titre. */
.life-summary.life-summary-top{
  margin:0 0 18px;
  padding:17px 19px;
  border-left:3px solid var(--red);
  border-top:1px solid rgba(92,236,255,.09);
}

/* Bouton de détail ajouté aux capacités de rôle. */
.role-panel-head{flex-wrap:wrap}
.role-rank-detail-button{
  margin-left:auto;
  min-height:34px;
  padding:8px 12px;
  border:1px solid rgba(92,236,255,.25);
  background:rgba(4,13,17,.78);
  color:var(--cyan);
  font:.58rem var(--mono);
  letter-spacing:.1em;
}
.role-rank-detail-button:hover{
  color:var(--yellow);
  border-color:var(--yellow);
  box-shadow:0 0 15px rgba(245,246,31,.08);
}
.detail-grid span small{
  display:block;
  margin-top:6px;
  color:rgba(210,229,232,.55);
  font-size:.6rem;
  line-height:1.45;
}

/* Les prérequis Netrunner restent lisibles avec leurs noms complets. */
.net-prerequisites button b{line-height:1.3}
.net-prerequisites button span{line-height:1.3}
@media(max-width:1100px){.net-prerequisites{grid-template-columns:1fr}}

/* ======================================================================
   V2.23 — bandeau Netrunner et sélection du rang
   ====================================================================== */
#roleRank {
  text-align: left;
  font-family: var(--mono);
  font-weight: 800;
}

.v223-netrunner-head {
  align-items: center;
}

.netrunner-action-count.v223-action-count {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 14px;
  min-width: max-content;
  text-align: left;
}
.netrunner-action-count.v223-action-count > b {
  min-width: 44px;
  font-size: 2.45rem;
  text-align: center;
}
.netrunner-action-count.v223-action-count > span {
  display: block;
  max-width: none;
  line-height: 1.15;
  text-align: left;
}
.netrunner-action-count.v223-action-count small,
.netrunner-action-count.v223-action-count em {
  display: block;
  color: #edf5f6;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .09em;
  white-space: nowrap;
}
.netrunner-action-count.v223-action-count small { font-size: .62rem; }
.netrunner-action-count.v223-action-count em { margin-top: 4px; font-size: .72rem; }

.netrunner-status-banner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 10px 18px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(126, 177, 183, .16);
  background: rgba(0, 0, 0, .22);
}
.netrunner-status-banner b {
  font-size: .82rem;
  line-height: 1.35;
  white-space: nowrap;
}
.netrunner-status-banner span {
  color: rgba(223, 238, 240, .82);
  font-size: .72rem;
  line-height: 1.5;
}
.netrunner-status-banner.ok { border-color: rgba(78, 194, 143, .35); }
.netrunner-status-banner.ok b { color: #58c993; }
.netrunner-status-banner.danger { border-color: rgba(222, 55, 64, .34); }
.netrunner-status-banner.danger b { color: #f06a70; }

/* Une fois le badge redondant retiré, le bouton de détail reste à droite. */
.role-panel-head .role-rank-detail-button { align-self: center; }

@media (max-width: 820px) {
  .v223-netrunner-head { align-items: flex-start; }
  .netrunner-action-count.v223-action-count { align-self: stretch; }
  .netrunner-status-banner { grid-template-columns: 1fr; }
  .netrunner-status-banner b { white-space: normal; }
}


/* ======================================================================
   V2.26 — parcours de rôle et double export PDF
   ====================================================================== */
.role-lifepath-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,360px) minmax(0,1fr);
  align-items:end;
  gap:18px;
  margin-bottom:16px;
  padding:16px 18px;
}
.role-lifepath-toolbar label{
  display:grid;
  gap:7px;
  color:#94a9af;
  font:.62rem var(--mono);
  letter-spacing:.1em;
}
.role-lifepath-toolbar select{width:100%;margin:0}
.role-lifepath-toolbar p{
  margin:0;
  color:rgba(218,234,236,.68);
  font-size:.69rem;
  line-height:1.55;
}
.role-lifepath-grid{
  grid-template-columns:repeat(2,minmax(360px,1fr));
  gap:12px;
}
.role-life-field{min-height:118px}
.role-life-field input{
  width:100%;
  min-height:42px;
  margin:0;
  padding:10px 12px;
  text-align:left;
}
.export-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.export-buttons .button{flex:1 1 260px}
@media(max-width:980px){
  .role-lifepath-toolbar,.role-lifepath-grid{grid-template-columns:1fr}
}