/* ─── bitcoin.css — Thème : Cyberpunk, circuit, orange Bitcoin ────────────── */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Exo+2:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,300&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --void:        #040608;
  --deep:        #080c10;
  --surface:     #0c1218;
  --surface-2:   #111c24;
  --surface-3:   #172230;
  --btc:         #f7931a;
  --btc-2:       #ffab40;
  --btc-glow:    rgba(247,147,26,.22);
  --btc-pale:    rgba(247,147,26,.07);
  --border:      rgba(247,147,26,.14);
  --border-hi:   rgba(247,147,26,.45);
  --ink:         #e8f0f8;
  --ink-mid:     #8aa0b8;
  --ink-dim:     #3a5068;
  --green:       #00ff88;
  --green-pale:  rgba(0,255,136,.07);
  --red:         #ff4466;
  --red-pale:    rgba(255,68,102,.07);
  --cyan:        #00cfff;
  --cyan-pale:   rgba(0,207,255,.07);
  --violet:      #a855f7;
  --vi-pale:     rgba(168,85,247,.07);
  --font-display:'Exo 2', sans-serif;
  --font-body:   'Rajdhani', sans-serif;
  --font-mono:   'Share Tech Mono', monospace;
  --sidebar-w:   265px;
  --radius:      4px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.72;
  /* Circuit board grid */
  background-image:
    linear-gradient(rgba(247,147,26,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,147,26,.025) 1px, transparent 1px),
    radial-gradient(ellipse at 60% 20%, rgba(247,147,26,.05) 0, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(0,207,255,.03) 0, transparent 40%);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* ─── Progress ───────────────────────────────────────────────────────────── */
.progress-bar {
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--btc), var(--btc-2), #fff8);
  z-index:200; transition:width .08s linear;
  box-shadow: 0 0 10px var(--btc-glow), 0 0 20px var(--btc-glow);
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */
.page-layout{display:flex;min-height:100vh;}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--deep);
  border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh;
  overflow-y:auto; display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--surface-3) transparent;
}

.sidebar-header {
  padding:26px 20px 20px;
  border-bottom:1px solid var(--border);
  position:relative; overflow:hidden;
}

/* Bitcoin ₿ watermark */
.sidebar-header::before {
  content:'₿';
  position:absolute; right:-10px; top:-10px;
  font-family:var(--font-mono); font-size:5rem;
  color:rgba(247,147,26,.05); line-height:1; pointer-events:none;
  user-select:none;
}

.sidebar-site-link {
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em;
  color:var(--ink-dim); text-decoration:none; display:block; margin-bottom:12px;
}

.sidebar-title {
  font-family:var(--font-display); font-size:1.2rem; font-weight:700;
  color:var(--btc); letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}

.sidebar-title::before { content:'₿'; font-size:1.1rem; }

.toc-nav{padding:12px 0 16px;flex:1;}
.toc-section-label {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-dim); padding:10px 20px 4px;
}

.toc-link {
  display:block; padding:5px 20px 5px 24px;
  font-family:var(--font-mono); font-size:.78rem;
  color:var(--ink-mid); text-decoration:none;
  border-left:2px solid transparent; transition:all .15s;
}
.toc-link:hover,.toc-link.active {
  color:var(--btc); border-left-color:var(--btc); background:var(--btc-pale);
}

.sidebar-subject-nav{padding:14px 20px;border-top:1px solid var(--border);}
.sidebar-subject-nav p {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px;
}
.sidebar-subject-nav a {
  display:block; font-family:var(--font-mono); font-size:.76rem;
  color:var(--ink-dim); text-decoration:none; padding:3px 0; transition:color .15s;
}
.sidebar-subject-nav a:hover{color:var(--btc);}
.sidebar-subject-nav a.current{color:var(--btc);font-weight:700;}

/* ─── Main ───────────────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;padding:0 56px 100px;max-width:860px;}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.page-header {
  padding:56px 0 38px; margin-bottom:50px;
  border-bottom:1px solid var(--border); position:relative; overflow:hidden;
}

.page-header::after {
  content:''; position:absolute; bottom:0; left:0;
  width:200px; height:1px;
  background:linear-gradient(90deg,var(--btc),transparent);
  box-shadow:0 0 12px var(--btc-glow);
}

.subject-tag {
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--btc); margin-bottom:12px;
}

h1.page-title {
  font-family:var(--font-display); font-size:3.3rem; font-weight:900;
  color:var(--ink); line-height:1.0; letter-spacing:.02em;
  text-shadow:0 0 40px var(--btc-glow);
}
h1.page-title span { color:var(--btc); }

.page-intro {
  margin-top:16px; font-size:1rem; color:var(--ink-mid);
  font-family:var(--font-mono); max-width:540px; line-height:1.65;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */
.section{margin-bottom:62px;scroll-margin-top:28px;}

h2.section-title {
  font-family:var(--font-display); font-size:1.55rem; font-weight:700;
  color:var(--ink); margin-bottom:22px; padding-bottom:10px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; text-transform:uppercase;
  letter-spacing:.04em;
}
h2.section-title .num {
  font-family:var(--font-mono); font-size:.7rem; color:var(--void);
  background:var(--btc); padding:3px 9px; border-radius:3px; font-weight:400;
  box-shadow:0 0 8px var(--btc-glow);
}

h3.sub-title {
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  color:var(--btc); margin:28px 0 12px; text-transform:uppercase; letter-spacing:.05em;
}

p{margin-bottom:.9em;}ul,ol{padding-left:1.4em;margin-bottom:.9em;}li{margin-bottom:.3em;}

/* ─── Boxes ──────────────────────────────────────────────────────────────── */
.box {
  padding:16px 20px 14px; margin:18px 0;
  border-radius:var(--radius); border:1px solid var(--border);
  background:var(--surface); position:relative;
}
.box::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  border-radius:var(--radius) var(--radius) 0 0;
}

.box-label {
  font-family:var(--font-mono); font-size:.63rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:8px;
}

.box.def::before{background:var(--btc);}
.box.def{background:var(--btc-pale);border-color:var(--border-hi);}
.box.def .box-label{color:var(--btc);}

.box.theorem::before{background:var(--cyan);}
.box.theorem{background:var(--cyan-pale);border-color:rgba(0,207,255,.3);}
.box.theorem .box-label{color:var(--cyan);}

.box.prop::before{background:var(--green);}
.box.prop{background:var(--green-pale);border-color:rgba(0,255,136,.25);}
.box.prop .box-label{color:var(--green);}

.box.corollary::before{background:var(--violet);}
.box.corollary{background:var(--vi-pale);border-color:rgba(168,85,247,.25);}
.box.corollary .box-label{color:var(--violet);}

.box.example::before{background:var(--red);}
.box.example{background:var(--red-pale);border-color:rgba(255,68,102,.25);}
.box.example .box-label{color:var(--red);}

.box.remark::before{background:var(--ink-dim);}
.box.remark{background:var(--surface-2);border-color:var(--border);}
.box.remark .box-label{color:var(--ink-mid);}

/* ─── Proof / detail ─────────────────────────────────────────────────────── */
.proof-toggle {
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--btc);border:1px solid var(--border-hi);
  padding:4px 12px;border-radius:3px;cursor:pointer;
  background:transparent;margin-top:8px;transition:all .18s;user-select:none;
}
.proof-toggle:hover{background:var(--btc);color:var(--void);box-shadow:0 0 10px var(--btc-glow);}
.proof-toggle .arrow{transition:transform .2s;}
.proof-toggle.open .arrow{transform:rotate(90deg);}
.proof-content{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.proof-content.open{max-height:900px;}
.proof-inner{margin-top:12px;padding:14px 18px;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);color:var(--ink-mid);font-size:.92rem;font-family:var(--font-mono);}
.qed{float:right;color:var(--btc);font-size:.85rem;}

/* ─── Formula / hash block ───────────────────────────────────────────────── */
.formula-block {
  text-align:center;padding:18px 16px;margin:16px 0;
  background:var(--void);border:1px solid var(--border);
  border-radius:var(--radius);overflow-x:auto;
  box-shadow:inset 0 0 20px rgba(247,147,26,.03);
  font-family:var(--font-mono);
}

/* ─── Hash display ───────────────────────────────────────────────────────── */
.hash-display {
  font-family:var(--font-mono); font-size:.78rem; color:var(--btc);
  background:var(--void); border:1px solid var(--border);
  padding:10px 14px; border-radius:var(--radius); margin:10px 0;
  word-break:break-all; line-height:1.5;
  box-shadow:inset 0 0 10px rgba(247,147,26,.04);
}

/* ─── Table ──────────────────────────────────────────────────────────────── */
.math-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);}
.math-table th{background:var(--surface-3);color:var(--btc);padding:10px 14px;text-align:left;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--border-hi);}
.math-table td{padding:8px 14px;border-bottom:1px solid var(--border);vertical-align:top;font-family:var(--font-body);}
.math-table tr:hover td{background:var(--btc-pale);}
.math-table td:first-child{font-family:var(--font-mono);font-size:.82rem;color:var(--btc);}
.math-table .up{color:var(--green);}
.math-table .down{color:var(--red);}

code{font-family:var(--font-mono);font-size:.82em;background:var(--surface-2);color:var(--btc);padding:2px 6px;border-radius:3px;border:1px solid var(--border);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0;}
.two-col .box{margin:0;}

/* ─── Ticker ─────────────────────────────────────────────────────────────── */
.ticker-band {
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--btc); background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--radius); margin:14px 0;
  display:flex; gap:24px; flex-wrap:wrap;
}
.ticker-band .t-label{color:var(--ink-dim);}
.ticker-band .t-up{color:var(--green);}
.ticker-band .t-down{color:var(--red);}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */
.mobile-header{display:none;position:sticky;top:0;z-index:50;background:var(--deep);border-bottom:1px solid var(--border);padding:12px 18px;align-items:center;justify-content:space-between;}
.mobile-menu-btn{background:none;border:none;color:var(--btc);font-size:1.3rem;cursor:pointer;}
.mobile-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--btc);text-transform:uppercase;letter-spacing:.04em;}
.mobile-drawer{display:none;position:fixed;inset:0;z-index:100;}
.mobile-drawer.open{display:flex;}
.drawer-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);}
.drawer-panel{position:relative;z-index:1;width:265px;background:var(--deep);height:100%;overflow-y:auto;padding:16px 0;border-right:1px solid var(--border);}

@media(max-width:960px){
  .sidebar{display:none;}.mobile-header{display:flex;}
  .main{padding:0 18px 70px;}h1.page-title{font-size:2.3rem;}
  .two-col{grid-template-columns:1fr;}
}
