/* ==========================================================================
   LE RÉCUPÉREUR — Design system (v2)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root{
  --void:        #14110c;
  --plate:       #211b14;
  --plate-2:     #2b2318;
  --plate-3:     #362c1e;
  --rust:        #c1571f;
  --rust-dim:    #8f4319;
  --bone:        #e9ddc4;
  --bone-dim:    #b3a58c;
  --toxic:       #8fa24b;
  --toxic-dim:   #63722f;
  --signal:      #cf9a3d;
  --steel:       #3f7288;
  --blood:       #9c3b2c;
  --grease:      #6d675a;
  --font-display: 'Staatliches','Arial Narrow',sans-serif;
  --font-body:   'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --font-mono:   'JetBrains Mono','Consolas',monospace;
  --container: 1180px;
  --radius: 3px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; overflow-x:hidden;
  background:var(--void); color:var(--bone);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; letter-spacing:.02em; margin:0; text-transform:uppercase; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:1rem; }

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:2000;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.container{ max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
@media (max-width:640px){ .container{ padding-inline:1.1rem; } }

.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust);
  display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:""; width:18px; height:2px; background:var(--rust); display:inline-block; }

h1{ font-size:clamp(2.4rem,6vw,4.6rem); line-height:.98; }
h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.05; }
h3{ font-size:1.25rem; letter-spacing:.01em; }
.lede{ font-size:1.1rem; color:var(--bone-dim); max-width:52ch; }

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-size:1rem; letter-spacing:.05em;
  padding:.85rem 1.6rem;
  border:1px solid transparent;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:transform .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }
.btn-primary{ background:var(--rust); color:var(--void); }
.btn-primary:hover{ background:#d9661f; box-shadow:0 0 0 1px var(--rust), 0 6px 18px -6px rgba(193,87,31,.55); }
.btn-outline{ background:transparent; color:var(--bone); border-color:var(--plate-3); }
.btn-outline:hover{ border-color:var(--rust); color:var(--rust); }
.btn-ghost{ background:transparent; color:var(--bone-dim); clip-path:none; padding:.85rem .4rem; }
.btn-ghost:hover{ color:var(--bone); }
.btn-sm{ font-size:.82rem; padding:.55rem 1rem; }
.btn-block{ width:100%; justify-content:center; }

.badge{
  --c: var(--rust);
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em;
  padding:.32rem .7rem .26rem;
  color:var(--void); background:var(--c);
  transform:skewX(-8deg);
  box-shadow:1px 1px 0 rgba(0,0,0,.35);
}
.badge > *{ transform:skewX(8deg); display:inline-flex; }
.badge--fondeur{ --c: var(--rust); }
.badge--recupereur{ --c: var(--toxic); }
.badge--broyeur{ --c: var(--grease); color:var(--bone); }
.badge--deplaceur{ --c: var(--steel); color:var(--bone); }
.badge--repareur{ --c: var(--blood); color:var(--bone); }
.badge--prototypeur{ --c: #8e44ad; color:var(--bone); }
.badge--outline{ background:transparent; border:1px solid var(--c); color:var(--c); }

.chip{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em;
  padding:.3rem .6rem; border-radius:20px;
  background:var(--plate-2); color:var(--bone-dim); border:1px solid var(--plate-3);
  display:inline-flex; align-items:center; gap:.35rem;
}
.chip--free{ background:rgba(143,162,75,.16); border-color:var(--toxic); color:var(--toxic); }
.chip--price{ background:rgba(207,154,61,.16); border-color:var(--signal); color:var(--signal); }
.chip--essentiel{ background:rgba(193,87,31,.2); border-color:var(--rust); color:var(--rust); }
.chip--debutant{ border-color:var(--toxic); color:var(--toxic); }
.chip--intermediaire{ border-color:var(--signal); color:var(--signal); }
.chip--expert{ border-color:#8a5a34; color:#c98a54; }

.hazard{
  height:12px;
  background:repeating-linear-gradient(135deg,var(--signal) 0 16px,var(--void) 16px 32px);
  opacity:.9;
}
.hazard--thin{ height:6px; }

.site-header{
  position:sticky; top:0; z-index:500;
  background:linear-gradient(180deg,#221b13,#1a150e);
  border-bottom:1px solid var(--plate-3);
  box-shadow:0 6px 24px -14px rgba(0,0,0,.7);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; gap:.7rem; flex-wrap:nowrap; }
.brand{ display:flex; align-items:center; gap:.6rem; min-width:0; flex-shrink:1; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand-name{ font-family:var(--font-display); font-size:1.35rem; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; min-width:0; flex:1 1 auto; }
.brand-name span{ color:var(--rust); }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{
  font-family:var(--font-display); font-size:.92rem; letter-spacing:.06em;
  color:var(--bone-dim); position:relative; padding-block:.3rem;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--bone); }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--rust);
}
.nav-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:1px solid var(--plate-3); color:var(--bone); padding:.5rem .6rem; flex-shrink:0; }
@media (max-width:480px){
  .brand-name{ font-size:1.02rem; }
  .brand-mark{ width:26px; height:26px; }
  .nav-actions{ gap:.4rem; }
  .nav-actions .btn-sm{ padding:.55rem .8rem; font-size:.8rem; }
  .nav-toggle{ padding:.45rem .5rem; }
}
@media (max-width:900px){
  .nav-links{ position:absolute; top:100%; left:0; right:0; background:#1a150e; flex-direction:column; align-items:flex-start; gap:0; border-bottom:1px solid var(--plate-3); max-height:0; overflow:hidden; transition:max-height .25s var(--ease); }
  .nav-links.is-open{ max-height:420px; }
  .nav-links a{ padding:.9rem 1.5rem; width:100%; border-top:1px solid var(--plate-3); }
  .nav-toggle{ display:inline-flex; }
  .nav-actions .btn-outline{ display:none; }
}

.hero{
  position:relative; overflow:hidden; padding-block:5.5rem 4.5rem;
  background:
    radial-gradient(120% 90% at 85% -10%, rgba(193,87,31,.18), transparent 55%),
    radial-gradient(90% 70% at 5% 110%, rgba(63,114,136,.14), transparent 60%),
    var(--void);
  border-bottom:1px solid var(--plate-3);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 2px, transparent 2px 5px);
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:3rem; align-items:center; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero h1{ margin-block:1rem .9rem; }
.hero h1 em{ font-style:normal; color:var(--rust); }
.hero-ctas{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:1.8rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero-stats div{ font-family:var(--font-mono); }
.hero-stats b{ display:block; font-size:1.5rem; color:var(--bone); }
.hero-stats span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); }

.panel{ background:var(--plate); border:1px solid var(--plate-3); position:relative; }
.panel-rivets::before, .panel-rivets::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #55483080, var(--plate-3));
  box-shadow:0 1px 1px rgba(0,0,0,.6);
}
.panel-rivets::before{ top:10px; left:10px; }
.panel-rivets::after{ bottom:10px; right:10px; }

section{ padding-block:4.5rem; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.6rem; flex-wrap:wrap; }

.tag{
  position:relative;
  background:var(--plate);
  border:1px solid var(--plate-3);
  clip-path:polygon(30px 0,100% 0,100% 100%,30px 100%,0 50%);
  padding:1.6rem 1.5rem 1.6rem 3rem;
  transition:transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.tag::before{
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%;
  background:var(--void); box-shadow:0 0 0 2px var(--plate-3), inset 0 1px 2px rgba(0,0,0,.7);
}
.tag:nth-of-type(odd){ transform:rotate(-.6deg); }
.tag:nth-of-type(even){ transform:rotate(.6deg); }
.tag:hover{ transform:rotate(0deg) translateY(-3px); border-color:var(--rust); background:var(--plate-2); }
.tag-top{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem; }
.tag h3{ margin:.6rem 0 .5rem; }
.tag p{ color:var(--bone-dim); font-size:.94rem; }
.tag-meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed var(--plate-3); font-family:var(--font-mono); font-size:.76rem; color:var(--bone-dim); }
.tag-meta b{ color:var(--bone); font-weight:600; }

.grid{ display:grid; gap:1.5rem; min-width:0; }
.grid > *{ min-width:0; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .grid-3, .grid-2{ grid-template-columns:1fr; } }

.layout-aside-left{ display:grid; grid-template-columns:260px 1fr; gap:2.6rem; align-items:start; min-width:0; }
.layout-aside-left > *{ min-width:0; }
.layout-aside-right{ display:grid; grid-template-columns:1fr 320px; gap:3rem; align-items:start; min-width:0; }
.layout-aside-right > *{ min-width:0; }
@media (max-width:860px){
  .layout-aside-left, .layout-aside-right{ grid-template-columns:1fr; }
  .layout-aside-right > aside, .layout-aside-left > aside{ position:static !important; }
}

.layout-split{ display:grid; grid-template-columns:1.4fr 1fr; gap:2.6rem; align-items:start; min-width:0; }
.layout-split > *{ min-width:0; }
@media (max-width:860px){ .layout-split{ grid-template-columns:1fr; } }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; min-width:0; }
.kpi-grid > *{ min-width:0; }
@media (max-width:900px){ .kpi-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .kpi-grid{ grid-template-columns:1fr; } }

.pillar{ padding:2.2rem; border:1px solid var(--plate-3); background:var(--plate); border-top:3px solid var(--c,var(--rust)); }
.pillar .eyebrow{ color:var(--c,var(--rust)); }
.pillar .eyebrow::before{ background:var(--c,var(--rust)); }
.pillar h3{ margin:.7rem 0 .8rem; color:var(--c,var(--rust)); }
.pillar p{ color:var(--bone-dim); margin-bottom:1.4rem; }

.quote{ padding:2rem; border-left:3px solid var(--rust); background:var(--plate); }
.quote p{ font-size:1.05rem; }
.quote footer{ margin-top:1rem; font-family:var(--font-mono); font-size:.78rem; color:var(--bone-dim); }

.cta-band{ background:linear-gradient(120deg,#241a11,#1a1610); border-top:1px solid var(--plate-3); border-bottom:1px solid var(--plate-3); text-align:center; }
.cta-band .lede{ margin-inline:auto; }
.cta-band h2{ margin-bottom:1rem; }
.cta-band .btn{ margin-top:1.8rem; }

.site-footer{ background:#120f0a; border-top:1px solid var(--plate-3); padding-block:3rem 1.6rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:2rem; padding-bottom:2.2rem; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-size:.78rem; letter-spacing:.1em; color:var(--bone-dim); margin-bottom:.9rem; }
.footer-grid a{ display:block; padding:.3rem 0; color:var(--bone-dim); font-size:.92rem; }
.footer-grid a:hover{ color:var(--rust); }
.footer-note{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; border-top:1px solid var(--plate-3); flex-wrap:wrap; gap:1rem; }
.footer-note small{ color:var(--grease); font-family:var(--font-mono); font-size:.74rem; }
.badge-mainpropre{ font-family:var(--font-mono); font-size:.72rem; color:var(--signal); border:1px solid var(--signal); padding:.4rem .7rem; display:inline-flex; align-items:center; gap:.5rem; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.pill{
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:.02em;
  padding:.5rem 1rem; border:1px solid var(--plate-3); background:var(--plate);
  color:var(--bone-dim); border-radius:20px; transition:all .15s var(--ease);
}
.pill:hover{ border-color:var(--bone-dim); color:var(--bone); }
.pill.is-active{ background:var(--rust); border-color:var(--rust); color:var(--void); font-weight:600; }
.filter-row{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1rem; }
.filter-row label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grease); }

.search-bar{ display:flex; align-items:center; gap:.7rem; background:var(--plate); border:1px solid var(--plate-3); padding:.2rem .2rem .2rem 1rem; }
.search-bar input{ flex:1; background:none; border:none; color:var(--bone); padding:.75rem 0; outline:none; }
.search-bar input::placeholder{ color:var(--grease); }
.search-bar svg{ flex-shrink:0; color:var(--grease); }

.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-bottom:2rem; }

.photo-slot{
  aspect-ratio:4/3; background:
    linear-gradient(135deg, var(--plate-2), var(--plate));
  border:1px solid var(--plate-3);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.photo-slot svg{ width:38%; height:38%; color:var(--plate-3); }
.photo-slot::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 26px);
}

.post-card{ background:var(--plate); border:1px solid var(--plate-3); display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
.post-card:hover{ border-color:var(--rust); transform:translateY(-3px); }
.post-body{ padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.post-top-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.post-card p.desc{ color:var(--bone-dim); font-size:.9rem; }
.post-seller{ display:flex; align-items:center; gap:.5rem; font-size:.84rem; color:var(--bone-dim); padding-top:.6rem; border-top:1px solid var(--plate-3); margin-top:.3rem; }
.post-seller b{ color:var(--bone); font-weight:600; }
.reactions{ display:flex; gap:.5rem; margin-top:.3rem; }
.reaction{
  display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.78rem;
  padding:.35rem .6rem; border:1px solid var(--plate-3); background:var(--void); color:var(--bone-dim);
}
.reaction b{ color:inherit; }
.reaction--gg{ border-color:var(--toxic-dim); color:var(--toxic); }
.reaction--interet{ border-color:#8a6a26; color:var(--signal); }
.reaction--achat{ border-color:#6a2a1e; color:var(--blood); }
.mainpropre-note{ font-size:.72rem; color:var(--grease); font-family:var(--font-mono); }

.tabs{ display:flex; gap:.4rem; border-bottom:1px solid var(--plate-3); margin-bottom:2rem; flex-wrap:wrap; }
.tab{
  font-family:var(--font-display); letter-spacing:.05em; font-size:.95rem;
  padding:.8rem 1.2rem; color:var(--bone-dim); border-bottom:2px solid transparent; margin-bottom:-1px;
  background:none; border-top:none; border-left:none; border-right:none;
}
.tab:hover{ color:var(--bone); }
.tab.is-active{ color:var(--rust); border-bottom-color:var(--rust); }
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.kpi{ background:var(--plate); border:1px solid var(--plate-3); padding:1.3rem 1.4rem; position:relative; }
.kpi .eyebrow{ font-size:.66rem; color:var(--bone-dim); }
.kpi .eyebrow::before{ background:var(--bone-dim); }
.kpi b{ display:block; font-family:var(--font-mono); font-size:2rem; margin-top:.4rem; color:var(--bone); }
.kpi .delta{ font-family:var(--font-mono); font-size:.78rem; margin-top:.3rem; display:inline-block; }
.kpi .delta.up{ color:var(--toxic); }
.kpi .delta.down{ color:var(--blood); }

.gauge{ height:10px; background:var(--void); border:1px solid var(--plate-3); position:relative; overflow:hidden; }
.gauge > span{ display:block; height:100%; background:linear-gradient(90deg,var(--rust-dim),var(--rust)); position:relative; }
.gauge::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 9px); }
.objective{ padding:1.2rem 1.4rem; background:var(--plate); border:1px solid var(--plate-3); margin-bottom:1rem; }
.objective-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6rem; font-family:var(--font-mono); font-size:.82rem; }
.objective-top b{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:.03em; color:var(--bone); }

/* ---- Nouveaux blocs Dashboard : Trésor & Réserve ---- */
.treasure{
  border:2px solid var(--signal);
  background:linear-gradient(135deg, var(--plate), #1f1912);
  position:relative;
}
.treasure .treasure-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.treasure .treasure-total{
  font-family:var(--font-mono); font-size:1.2rem; color:var(--signal);
}
.treasure-items{
  display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.2rem;
}
.treasure-items .treasure-item{
  background:var(--void); border:1px solid var(--plate-3); padding:.6rem 1rem;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-mono); font-size:.9rem;
  border-radius:4px;
}
.treasure-items .treasure-item .qty{
  color:var(--bone-dim);
}
.reserve{
  border:1px solid var(--plate-3);
}
.reserve .reserve-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.reserve .reserve-count{
  font-family:var(--font-mono); font-size:.9rem; color:var(--bone-dim);
}
.reserve .reserve-suggestion{
  background:rgba(207,154,61,.08); border:1px solid var(--signal); padding:.8rem 1rem;
  margin-bottom:1.2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.6rem;
}
.reserve .reserve-suggestion .suggestion-text{
  color:var(--bone-dim);
}
.reserve .reserve-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
@media (max-width:640px){ .reserve .reserve-grid{ grid-template-columns:1fr 1fr; } }
.reserve .reserve-card{
  background:var(--plate-2); border:1px solid var(--plate-3); padding:.8rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.reserve .reserve-card .photo-slot{ aspect-ratio:4/3; }
.reserve .reserve-card .name{ font-weight:600; font-size:.9rem; }
.reserve .reserve-card .statut{ font-size:.7rem; color:var(--grease); }

/* ---- Contrôle de Guilde ---- */
.control-guild{
  border:2px solid var(--blood);
}
.control-guild .control-header{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.control-guild .control-progress{
  font-family:var(--font-mono); font-size:.9rem;
}
.control-guild .control-detail{
  margin-top:1rem;
}
.control-vote{
  display:flex; gap:1rem; margin-top:.6rem;
}

/* ---- Profile ---- */
.profile-head{ display:flex; gap:2rem; align-items:center; flex-wrap:wrap; padding:2.4rem; background:var(--plate); border:1px solid var(--plate-3); }
.avatar{ width:96px; height:96px; border-radius:50%; background:conic-gradient(from 210deg, var(--rust), var(--signal), var(--toxic), var(--rust)); display:flex; align-items:center; justify-content:center; flex-shrink:0; border:3px solid var(--void); box-shadow:0 0 0 1px var(--plate-3); }
.avatar span{ font-family:var(--font-display); font-size:1.7rem; color:var(--void); }
.profile-id{ flex:1; min-width:220px; }
.profile-id .badge{ margin-bottom:.6rem; }
.profile-meta{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.5rem; font-family:var(--font-mono); font-size:.8rem; color:var(--bone-dim); }
.profile-stats{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.profile-stats div b{ display:block; font-family:var(--font-mono); font-size:1.5rem; }
.profile-stats div span{ font-size:.72rem; color:var(--bone-dim); text-transform:uppercase; letter-spacing:.06em; }

.timeline-item{ display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--plate-3); }
.timeline-item:last-child{ border-bottom:none; }
.timeline-item .reaction{ flex-shrink:0; }
.timeline-item .who{ font-weight:600; }
.timeline-item .when{ font-family:var(--font-mono); font-size:.75rem; color:var(--grease); margin-left:auto; white-space:nowrap; }
.timeline-row{ display:flex; justify-content:space-between; width:100%; gap:1rem; flex-wrap:wrap; }

.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.data-table th{ text-align:left; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grease); padding:.7rem .8rem; border-bottom:1px solid var(--plate-3); }
.data-table td{ padding:.85rem .8rem; border-bottom:1px solid var(--plate-3); }
.data-table tr:hover td{ background:var(--plate-2); }
.metal-bar-row{ display:flex; align-items:center; gap:.8rem; }
.metal-bar{ flex:1; height:8px; background:var(--void); border:1px solid var(--plate-3); }
.metal-bar > span{ display:block; height:100%; }

.field{ margin-bottom:1.3rem; }
.field label{ display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bone-dim); margin-bottom:.5rem; }
.field input, .field select, .field textarea{
  width:100%; background:var(--void); border:1px solid var(--plate-3); color:var(--bone);
  padding:.85rem .9rem; outline:none; transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--rust); }
.field-hint{ font-size:.78rem; color:var(--grease); margin-top:.4rem; }
.role-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; min-width:0; }
.role-picker > *{ min-width:0; }
@media (max-width:640px){ .role-picker{ grid-template-columns:1fr 1fr; } }
.role-option{ position:relative; }
.role-option input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.role-option div{ border:1px solid var(--plate-3); padding:1rem .8rem; text-align:center; background:var(--plate); transition:all .15s; }
.role-option input:checked + div{ border-color:var(--rust); background:var(--plate-2); box-shadow:inset 0 0 0 1px var(--rust); }
.role-option .badge{ margin-bottom:.5rem; }
.role-option small{ display:block; color:var(--bone-dim); font-size:.72rem; margin-top:.3rem; }

.text-dim{ color:var(--bone-dim); }
.text-mono{ font-family:var(--font-mono); }
.mt-0{ margin-top:0; }
.center{ text-align:center; }
.flex{ display:flex; }
.gap-1{ gap:.6rem; } .gap-2{ gap:1.2rem; }
.mb-2{ margin-bottom:1.4rem; }
.icon{ width:20px; height:20px; flex-shrink:0; }
.badge-strip{ display:flex; gap:.6rem; flex-wrap:wrap; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--rust); color:var(--void); padding:.8rem 1.2rem; z-index:2000; }
.skip-link:focus{ left:1rem; top:1rem; }
.empty-state{ text-align:center; padding:3.5rem 1.5rem; border:1px dashed var(--plate-3); color:var(--bone-dim); }
.empty-state h3{ color:var(--bone); margin-bottom:.6rem; }
.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:var(--grease); margin-bottom:1.4rem; }
.breadcrumb a:hover{ color:var(--rust); }
.page-head{ padding-block:3rem 2.4rem; border-bottom:1px solid var(--plate-3); background:linear-gradient(180deg, rgba(193,87,31,.06), transparent); }
.page-head .lede{ margin-top:.8rem; }