/* ═══════════════════════════════════════════════
   TOKENS — système cocoa/ember de Hokay
═══════════════════════════════════════════════ */
:root {
  --bg:        #0c0a08;
  --bg2:       #13100d;
  --surface:   #1c1713;
  --surface2:  #241e18;
  --surface3:  #2e271f;
  --border:    #3d342a;
  --border2:   #564a3d;
  --text:      #f0e6d8;
  --text2:     #b5a393;
  --text3:     #7a6a5a;
  --accent:    #e07b35;
  --accent2:   #f09050;
  --accentDim: rgba(224,123,53,.12);
  --accentGlow:rgba(224,123,53,.06);
  --green:     #5ec97c;
  --red:       #e05555;
  --yellow:    #e0b855;
  --blue:      #5599e0;
  --r:         8px;
  --mono:      'JetBrains Mono', monospace;
  --sans:      'DM Sans', sans-serif;
  --display:   'Syne', sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
#topbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:54px;
  background:rgba(12,10,8,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.logo { font-family:var(--display); font-weight:800; font-size:18px; color:var(--text); text-decoration:none; letter-spacing:-.3px; }
.logo span { color:var(--accent); }
.topbar-right { display:flex; align-items:center; gap:10px; }

/* ═══════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:7px;
  font-family:var(--sans); font-size:13px; font-weight:500;
  border:none; cursor:pointer; transition:all .15s;
  text-decoration:none; white-space:nowrap;
}
.btn-primary { background:var(--accent); color:#fff; font-weight:600; }
.btn-primary:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 4px 20px rgba(224,123,53,.3); }
.btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--surface2); color:var(--text); border-color:var(--border2); }
.btn-outline-accent { background:transparent; color:var(--accent); border:1px solid rgba(224,123,53,.3); }
.btn-outline-accent:hover { background:var(--accentDim); border-color:var(--accent); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-full { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
#page {
  max-width:860px;
  margin:0 auto;
  padding:36px 20px 80px;
}

/* ═══════════════════════════════════════════════
   LOADING / ERROR STATES
═══════════════════════════════════════════════ */
.state-container {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:80px 20px; gap:16px;
}
.spinner {
  width:38px; height:38px;
  border:2px solid var(--border2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.state-icon { font-size:42px; }
.state-title { font-family:var(--display); font-size:18px; font-weight:700; }
.state-sub { font-size:14px; color:var(--text2); text-align:center; max-width:360px; }

/* ═══════════════════════════════════════════════
   HERO CERTIFICATE
═══════════════════════════════════════════════ */
.cert-hero {
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, var(--surface) 0%, var(--surface2) 100%);
  border:1px solid var(--border);
  border-radius:16px;
  padding:36px;
  margin-bottom:16px;
}
/* Glow radial en haut à droite */
.cert-hero::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 600px 350px at 110% -10%, rgba(224,123,53,.07), transparent),
    radial-gradient(ellipse 300px 200px at -10% 110%, rgba(85,153,224,.04), transparent);
}
/* Coin PoW watermark */
.cert-hero::after {
  content:'POW';
  position:absolute; top:18px; right:20px;
  font-family:var(--mono); font-size:9px; font-weight:600;
  letter-spacing:3px; color:rgba(224,123,53,.15);
  pointer-events:none;
}

.cert-top {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:28px;
}

/* Author */
.author-block { display:flex; align-items:center; gap:14px; }
.author-avatar {
  width:54px; height:54px; border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
  background:var(--surface3);
  flex-shrink:0;
}
.author-name {
  font-family:var(--display); font-size:17px; font-weight:700;
  color:var(--text); margin-bottom:3px;
}
.author-meta { font-size:12px; color:var(--text2); }
.author-link {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; color:var(--accent); text-decoration:none;
  font-family:var(--mono); margin-top:5px;
  opacity:.8; transition:.15s;
}
.author-link:hover { opacity:1; text-decoration:underline; }

/* Seal */
.cert-seal {
  display:flex; flex-direction:column; align-items:center;
  background:var(--accentDim);
  border:1px solid rgba(224,123,53,.2);
  border-radius:12px;
  padding:14px 20px; min-width:120px;
  text-align:center; flex-shrink:0;
}
.seal-icon { font-size:30px; margin-bottom:5px; }
.seal-label {
  font-size:10px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--accent);
  font-family:var(--mono);
}
.seal-status { font-size:11px; color:var(--text2); margin-top:3px; }
.seal-status.verified { color:var(--green); font-weight:600; }

/* Title */
.cert-title {
  font-family:var(--display); font-size:24px; font-weight:800;
  color:var(--text); line-height:1.25; margin-bottom:8px;
}
.cert-summary {
  font-size:14px; color:var(--text2); line-height:1.7;
  margin-bottom:24px; max-width:640px;
}

/* Metrics row */
.metrics-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
  gap:10px; margin-bottom:22px;
}
.metric {
  background:rgba(0,0,0,.25);
  border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
}
.metric-val {
  font-family:var(--mono); font-size:22px; font-weight:600;
  line-height:1; margin-bottom:4px;
}
.metric-val sup { font-size:13px; font-weight:400; color:var(--text3); }
.metric-label { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--text2); }
.val-high { color:var(--green); }
.val-mid  { color:var(--yellow); }
.val-low  { color:var(--red); }
.val-accent { color:var(--accent); }

/* Tags row */
.tags-row { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.tag {
  padding:4px 11px; border-radius:20px;
  font-size:11.5px; font-weight:500;
  background:var(--accentDim); color:var(--accent);
  border:1px solid rgba(224,123,53,.2);
}
.tag-diff {
  padding:4px 11px; border-radius:20px; font-size:10.5px;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase;
}
.diff-beginner     { background:rgba(94,201,124,.1);  color:var(--green);  border:1px solid rgba(94,201,124,.2); }
.diff-intermediate { background:rgba(224,184,85,.1);  color:var(--yellow); border:1px solid rgba(224,184,85,.2); }
.diff-advanced     { background:rgba(224,85,85,.1);   color:var(--red);    border:1px solid rgba(224,85,85,.2); }
.diff-expert       { background:rgba(224,123,53,.12); color:var(--accent); border:1px solid rgba(224,123,53,.25); }

/* Meta footer of hero */
.cert-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:18px;
  border-top:1px solid var(--border);
  font-size:11.5px; color:var(--text3);
}
.cert-meta i { color:var(--text2); }

/* ═══════════════════════════════════════════════
   SECTION CARD
═══════════════════════════════════════════════ */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px; padding:22px;
  margin-bottom:14px;
}
.card-title {
  font-family:var(--display); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--text2); margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.card-title i { color:var(--accent); font-size:12px; }
.card-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* ═══════════════════════════════════════════════
   SCORE BREAKDOWN
═══════════════════════════════════════════════ */
.score-rows { display:flex; flex-direction:column; gap:12px; }
.score-row { display:flex; align-items:center; gap:14px; }
.score-row-label {
  font-size:13px; color:var(--text);
  min-width:160px; display:flex; align-items:center; gap:6px;
}
.score-row-label i { color:var(--text3); font-size:11px; width:14px; text-align:center; }
.bar-track {
  flex:1; height:5px;
  background:var(--surface3); border-radius:3px; overflow:hidden;
}
.bar-fill { height:100%; border-radius:3px; transition:width .8s cubic-bezier(.4,0,.2,1); width:0; }
.fill-exec  { background:linear-gradient(90deg,#5599e0,#80b8f5); }
.fill-ai    { background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.fill-time  { background:linear-gradient(90deg,var(--green),#8ee8a0); }
.score-row-val {
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--text); min-width:36px; text-align:right;
}
.score-total-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 0;
  border-top:1px solid var(--border);
  margin-top:4px;
}
.score-total-label { font-size:13px; font-weight:600; color:var(--text); }
.score-total-val {
  font-family:var(--mono); font-size:26px; font-weight:700;
}

/* ═══════════════════════════════════════════════
   INTEGRITY BLOCK
═══════════════════════════════════════════════ */
.integrity-status {
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; margin-bottom:10px;
}
.integrity-status.valid  { color:var(--green); }
.integrity-status.pending { color:var(--yellow); }

.hash-block {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--r); padding:12px 14px;
  margin-bottom:10px;
}
.hash-label { font-size:10px; text-transform:uppercase; letter-spacing:.7px; color:var(--text3); margin-bottom:4px; }
.hash-val {
  font-family:var(--mono); font-size:11px; color:var(--text2);
  word-break:break-all; line-height:1.6;
}
.hash-short { display:none; }

/* Chain verify widget */
.chain-widget {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
}
.chain-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.chain-title { font-size:12px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; }
.chain-title i { color:var(--accent); }
.chain-toggle {
  font-size:11px; color:var(--text2); cursor:pointer;
  background:none; border:none; font-family:var(--mono);
  display:flex; align-items:center; gap:4px; padding:3px 7px;
  border-radius:4px; border:1px solid var(--border);
  transition:.15s;
}
.chain-toggle:hover { background:var(--surface3); color:var(--text); }

.chain-steps { display:none; flex-direction:column; gap:6px; margin-top:10px; }
.chain-steps.open { display:flex; }
.chain-step {
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px;
  padding:6px 10px; border-radius:5px;
  background:var(--surface); border:1px solid var(--border);
}
.chain-step-idx { color:var(--text3); min-width:24px; }
.chain-step-event { color:var(--accent); min-width:80px; }
.chain-step-time { color:var(--text3); min-width:50px; }
.chain-step-hash { color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.chain-step-icon { font-size:10px; }
.chain-step.valid .chain-step-icon::before   { content:'✓'; color:var(--green); }
.chain-step.genesis .chain-step-icon::before { content:'◎'; color:var(--accent); }

.chain-desc {
  font-size:11.5px; color:var(--text3); line-height:1.6; margin-top:8px;
}

/* ═══════════════════════════════════════════════
   PROCESS TIMELINE
═══════════════════════════════════════════════ */
.timeline { display:flex; flex-direction:column; gap:0; }
.tl-item {
  display:flex; gap:14px;
  position:relative; padding-bottom:18px;
}
.tl-item:last-child { padding-bottom:0; }
.tl-item:not(:last-child)::before {
  content:''; position:absolute;
  left:13px; top:27px; bottom:0; width:1px;
  background:var(--border);
}
.tl-dot {
  width:27px; height:27px; border-radius:50%;
  background:var(--surface2);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0; margin-top:2px;
}
.tl-dot.accent { background:var(--accentDim); border-color:rgba(224,123,53,.35); }
.tl-body { flex:1; padding-top:3px; }
.tl-label { font-size:13px; font-weight:500; color:var(--text); }
.tl-sub { font-size:11.5px; color:var(--text2); margin-top:2px; }

/* Snapshot density bar */
.density-bar {
  display:flex; gap:2px; margin-top:10px; height:18px;
  align-items:flex-end;
}
.density-tick {
  width:4px; border-radius:2px;
  background:var(--accent); opacity:.35;
  min-height:4px; transition:opacity .15s;
}
.density-tick:hover { opacity:.9; }
.density-tick.auto  { background:var(--blue); }
.density-tick.save  { background:var(--accent); }
.density-tick.run   { background:var(--green); }

/* ═══════════════════════════════════════════════
   ENDORSEMENTS
═══════════════════════════════════════════════ */
.endorsement {
  display:flex; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border);
}
.endorsement:last-child { border-bottom:none; }
.endorser-avatar {
  width:36px; height:36px; border-radius:50%;
  object-fit:cover; background:var(--surface3); flex-shrink:0;
}
.endorser-name { font-size:13px; font-weight:500; color:var(--text); margin-bottom:2px; }
.endorser-role { font-size:11px; color:var(--text3); margin-bottom:4px; }
.endorser-comment { font-size:12.5px; color:var(--text2); line-height:1.55; }
.empty-endorsements {
  text-align:center; padding:24px 0;
  color:var(--text3); font-size:13px;
}

/* Endorse button states */
#btn-endorse.endorsed {
  color:var(--green); border-color:rgba(94,201,124,.3);
  background:rgba(94,201,124,.08);
  pointer-events:none;
}

/* ═══════════════════════════════════════════════
   CTA BLOCK
═══════════════════════════════════════════════ */
.cta-card {
  background:linear-gradient(135deg, rgba(224,123,53,.07), rgba(224,123,53,.03));
  border:1px solid rgba(224,123,53,.18);
  border-radius:14px; padding:28px;
  text-align:center; margin-bottom:14px;
  position:relative; overflow:hidden;
}
.cta-card::before {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 400px 200px at 50% 0%, rgba(224,123,53,.06), transparent);
}
.cta-title { font-family:var(--display); font-size:18px; font-weight:800; margin-bottom:7px; }
.cta-sub { font-size:13.5px; color:var(--text2); line-height:1.65; margin-bottom:20px; max-width:480px; margin-left:auto; margin-right:auto; }
.cta-btns { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════ */
#toast-area {
  position:fixed; bottom:22px; right:22px;
  display:flex; flex-direction:column; gap:8px;
  z-index:9999; pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:9px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:11px 15px;
  font-size:13px; color:var(--text);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  animation:toast-in .2s ease; pointer-events:auto;
  max-width:300px;
}
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.info    { border-left:3px solid var(--blue); }
@keyframes toast-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.toast-out { opacity:0; transform:translateY(8px); transition:.25s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width:600px) {
  #page { padding:20px 14px 60px; }
  .cert-hero { padding:24px; }
  .cert-title { font-size:19px; }
  .score-row-label { min-width:120px; font-size:12px; }
  .cert-top { gap:14px; }
  .cert-seal { padding:11px 14px; min-width:100px; }
  .hash-val { display:none; }
  .hash-short { display:block; font-family:var(--mono); font-size:11px; color:var(--text2); }
  .chain-step-hash { max-width:100px; }
  .metrics-grid { grid-template-columns:repeat(2,1fr); }
}