@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&family=Inter:ital,wght@0,300;0,400;0,500;1,300&family=Montserrat:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* ============================================================
   DESIGN SYSTEM — BITCAMPERS
   IBM Institutional × Canonical Open Source × Knowledge Stream
   ============================================================ */

:root {
  color-scheme: dark;
  --navy:       #00122B;
  --surface:    #202020;
  --bg:         #151515;
  --navy-deep:  #0D1117;
  --navy-mid:   #161B22;
  --navy-lift:  #001d46;
  --white:      #ffffff;
  --off:        #cdd8e8;
  --muted:      #6b82a0;
  --subtle:     rgba(255,255,255,0.06);
  --orange:     #E95420;
  --orange-lo:  rgba(233,84,32,0.10);
  --orange-md:  rgba(233,84,32,0.30);
  --border:     rgba(255,255,255,0.07);
  --bdr-h:      rgba(233,84,32,0.45);

  --font-head: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1200px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size: var(--text-base); }
body {
  font-family: var(--font-body);
  background: var(--navy-deep);
  color: var(--muted);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img   { display:block; max-width:100%; height:auto; }
a     { color:inherit; text-decoration:none; }
ul    { list-style:none; }
strong { font-weight:600; color: var(--off); }
em     { font-style:italic; }

.container { max-width:var(--max); margin-inline:auto; padding-inline:2rem; }
.mono { font-family: var(--font-mono); }
.orange { color: var(--orange); }


/* ============================================================
   HEADER
   ============================================================ */
header {
  position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
  background: rgba(0,12,29,0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}
header.scrolled {
  background: rgba(0,12,29,0.97);
  border-bottom-color: rgba(255,255,255,0.1);
}
.nav-container {
  display:flex; align-items:center; justify-content:space-between; height:68px;
}
.logo-wrapper { display: flex; align-items: center; gap: 1.2rem; }
.logo-link { display:flex; align-items:center; }
.nav-logo  { height:42px; width:auto; object-fit:contain; }
.logo-slogan {
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: .05em;
  background: rgba(255,255,255,0.03);
  padding: .3rem .6rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.08);
}
nav ul { display:flex; align-items:center; gap:2.5rem; }
nav ul li a {
  font-family:var(--font-mono); font-size: var(--text-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); transition:color .2s;
}
nav ul li a:hover { color:var(--white); }

.btn-ghost {
  padding:.5rem 1.3rem;
  border: 1px solid var(--bdr-h);
  color: var(--white) !important;
  transition: background .2s, border-color .2s !important;
}
.btn-ghost:hover { background:var(--orange-lo); }


/* ============================================================
   HERO
   ============================================================ */
.hero {
  background: var(--navy);
  padding-top: 68px;
  border-bottom: 1px solid var(--border);
}

/* Hero: two-column split — terminal fixed left, copy right */
.hero-split {
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 2fr;
  gap: 4rem;
  align-items: center;
  padding-block: 6rem 4rem;
}

.hero-terminal-wrap {
  width: 420px;
  flex-shrink: 0;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.h1-sub {
  display: block;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--orange);
  text-transform: uppercase;
  margin-top: .3rem;
}

.hero-sub {
  font-size: var(--text-base);
  max-width: 520px;
  line-height: 1.8;
  color: var(--muted);
}

.hero-cta { display:flex; align-items:center; gap:2rem; }
.btn-primary {
  font-family: var(--font-mono); font-size: var(--text-sm); font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; padding:.9rem 2.2rem;
  background:var(--orange); color:var(--white); border:2px solid var(--orange);
  display:inline-block; transition:background .3s var(--ease), color .3s var(--ease), letter-spacing .3s var(--ease);
}
.btn-primary:hover { background:transparent; color:var(--orange); letter-spacing:.14em; }
.hero-cta-note { font-family:var(--font-mono); font-size: var(--text-xs); color:var(--muted); opacity:.6; }

/* Flow figure */
.flow-figure {
  border:1px solid var(--border);
  
  overflow: hidden;
}
.flow-figure img { width:100%; display:block; }
.flow-figure figcaption {
  background: rgba(0,12,29,.9);
  border-top:1px solid var(--border);
  padding:.7rem 1.2rem;
  display:flex; justify-content:space-between; align-items:center;
}
.fc-label { font-size: var(--text-xs); color:var(--off); letter-spacing:.07em; }
.fc-ver   { font-size: var(--text-xs); color:var(--muted); }

/* Metrics strip */
.hero-strip {
  border-top:1px solid var(--border);
  background: rgba(0,12,29,.5);
}
.metrics-row {
  display:flex; align-items:stretch;
  padding-block:2rem;
}
.metric-item {
  flex:1; display:flex; flex-direction:column; gap:.4rem;
  padding-inline:2rem;
}
.metric-item:first-child { padding-left:0; }
.metric-val {
  font-family:var(--font-head); font-size: var(--text-xl); font-weight:700;
  color:var(--white); line-height:1;
}
.metric-val em { font-family:var(--font-mono); font-size: var(--text-sm); color:var(--orange); font-style:normal; margin-left:.3rem; }
.metric-desc { font-size: var(--text-xs); color:var(--muted); letter-spacing:.05em; line-height:1.4; }
.metric-div { width:1px; background:var(--border); flex-shrink:0; }

/* Terminal window — also used standalone */
.terminal-window {
  background: #010b18;
  border: 1px solid rgba(255,255,255,0.1);
  
  overflow: hidden;
}
.tw-bar {
  display:flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--border);
  padding: .6rem 1rem;
}
.tw-dot {
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,0.15);
}
.tw-dot:first-child { background:#ff5f57; }
.tw-dot:nth-child(2){ background:#ffbd2e; }
.tw-dot:nth-child(3){ background:#28c940; }
.tw-title { font-size: var(--text-xs); color:var(--muted); margin-left:.5rem; letter-spacing:.06em; }

.tw-body {
  padding:1.2rem 1.4rem; font-size: var(--text-sm); line-height:1.8;
  min-height:110px; color: rgba(255,255,255,0.75);
}
.tw-line { display:flex; flex-wrap:wrap; gap:.3rem; min-height:1.8em; }
.tw-prompt { color: var(--orange); }
.tw-cmd { color: var(--white); }
.tw-out { color: rgba(255,255,255,0.55); padding-left:1.2rem; }
.tw-out.orange { color:var(--orange); }
.tw-cursor { color:var(--orange); animation:blink .9s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Framework image aside */
.fw-figure-aside {
  float: right;
  width: min(300px, 40%);
  margin: 0 0 2rem 3rem;
  border: 1px solid var(--border);
  overflow: hidden;
}
.fw-figure-aside img { width:100%; display:block; }
.fw-figure-aside figcaption {
  padding: .5rem .9rem;
  font-size: var(--text-xs);
  color: var(--muted);
  border-top: 1px solid var(--border);
  background: rgba(0,12,29,.7);
  letter-spacing: .06em;
}

.status-chip {
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--white);
  border: 1px solid currentColor;
}
.status-chip:hover {
  opacity: 0.8;
  cursor: pointer;
}

.card-label {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  background: var(--navy-light);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.card-label:hover {
  border-color: var(--orange);
}
.label-chip {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  background: var(--navy-light);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  border: 1px solid var(--border);
  cursor: pointer;
}
.label-chip:hover {
  border-color: var(--orange);
  color: var(--orange);
}


/* ============================================================
   SECTION SHELL
   ============================================================ */
.section { padding-block:110px; border-bottom:1px solid var(--border); background:var(--navy); }
.s-dark   { background:var(--navy-deep); }
.s-flows  { background:var(--navy-mid); }
.s-access { background:var(--navy); }

.tag-row { display:flex; align-items:center; gap:1rem; margin-bottom:3.5rem; }
.tag-n   { font-size: var(--text-xs); color:var(--orange); letter-spacing:.12em; }
.tag-line{ flex:0 0 36px; height:1px; background:rgba(255,255,255,0.12); }
.tag-t   { font-size: var(--text-xs); color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }

.section-h {
  font-family:var(--font-head);
  font-size:clamp(1.9rem,3vw,3rem);
  font-weight:700; color:var(--white);
  text-transform:uppercase; letter-spacing:-.025em; line-height:1.1;
  margin-bottom:4rem;
}


/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:start;
}
blockquote p {
  font-family:var(--font-head);
  font-size:clamp(1.6rem,2.8vw,2.4rem);
  font-weight:400; color:var(--white); line-height:1.3;
  letter-spacing:-.01em;
}
blockquote p strong { font-style:italic; color:var(--orange); font-weight:400; }
.quote-source {
  margin-top:2rem; font-size: var(--text-xs); color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase;
  border-top:1px solid var(--border); padding-top:1.2rem;
}

.manifesto-body { display:flex; flex-direction:column; gap:1.5rem; padding-top:.5rem; border-top:1px solid var(--border); }
.manifesto-body p { font-size: var(--text-base); }

/* Pillars */
.pillar-strip {
  display:flex; align-items:center; gap:0;
  border:1px solid var(--border); margin-top:2rem;
  background: rgba(255,255,255,0.02);
}
.pillar {
  flex:1; padding:1.8rem 1.5rem;
  display:flex; flex-direction:column; gap:.6rem;
  transition: background .25s;
}
.pillar:hover { background:var(--navy-lift); }
.pillar-line { width:1px; background:var(--border); align-self:stretch; }
.pillar-icon { width:32px; height:32px; }
.pillar-name { font-size: var(--text-xs); color:var(--white); letter-spacing:.08em; }
.pillar-sub  { font-size: var(--text-xs); color:var(--muted); }


/* ============================================================
   KNOWLEDGE STREAM — PROCESS FLOW
   ============================================================ */

/* Row wrapper */
.ks-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}

/* Individual phase block */
.ks-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  transition: background .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.ks-phase:hover { background: rgba(233,84,32,0.03); }
.ks-phase-last  { border-right: none; }

/* Ghost number watermark — huge faded behind content */
.ks-phase::before {
  content: attr(data-n);
  position: absolute;
  top: -.1em;
  right: .4rem;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,0.028);
  pointer-events: none;
  user-select: none;
  letter-spacing: -.04em;
  transition: color .35s;
}
.ks-phase:hover::before { color: rgba(233,84,32,0.07); }

/* Inner: padding + layout */
.ks-phase-inner {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 2rem 1.6rem;
  flex: 1;
  position: relative;
}

/* Ordinal number — the hero of each card */
.ks-num {
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1;
  color: var(--orange);
  opacity: .9;
  letter-spacing: -.02em;
  transition: opacity .25s;
}
.ks-phase:hover .ks-num { opacity: 1; }

/* Tag — e.g. "Assessment" */
.ks-tag {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: .3rem;
}

/* Main label */
.ks-name {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.4;
}

/* Bottom accent bar */
.ks-bar {
  height: 2px;
  background: rgba(255,255,255,0.07);
  transition: background .3s;
}
.ks-bar-og { background: var(--orange); }
.ks-phase:hover .ks-bar { background: rgba(233,84,32,0.4); }
.ks-phase-last:hover .ks-bar,
.ks-phase-last .ks-bar { background: var(--orange); }

/* Connector SVG arrows between phases */
.ks-connector {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.ks-connector svg { width: 48px; height: 16px; display: block; }

/* Loop label below */
.ks-loop-label {
  font-size: var(--text-xs);
  color: rgba(233,84,32,0.45);
  letter-spacing: .1em;
  text-align: center;
  padding-bottom: 2.5rem;
  padding-top: .6rem;
  user-select: none;
}

.phases-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2px; background:var(--subtle);
}
.phase-card {
  background:var(--navy-deep); padding:2.5rem 2rem;
  border:2px solid transparent;
  display:flex; flex-direction:column; gap:1.1rem;
  transition:border-color .25s, background .25s;
}
.phase-card:hover { background:var(--navy-lift); border-color:var(--bdr-h); }
.phase-header { display:flex; align-items:center; justify-content:space-between; }
.phase-tag { font-size: var(--text-xs); color:var(--orange); letter-spacing:.1em; text-transform:uppercase; }
.phase-ico  { width:24px; height:24px; opacity:.85; }
.phase-card h3 {
  font-family:var(--font-head); font-size: var(--text-base); font-weight:700;
  color:var(--white); text-transform:uppercase; letter-spacing:.03em;
}
.phase-card p { font-size: var(--text-sm); line-height:1.65; }
.phase-list { display:flex; flex-direction:column; gap:.4rem; margin-top:auto; }
.phase-list li {
  font-family:var(--font-mono); font-size: var(--text-xs); color:var(--muted);
  padding-left:1rem; position:relative; line-height:1.5;
}
.phase-list li::before { content:'—'; position:absolute; left:0; color:var(--orange); }
.phase-foot {
  font-size: var(--text-xs); color:var(--orange); letter-spacing:.05em;
  border-top:1px solid var(--border); padding-top:1rem; margin-top:auto;
}


/* ============================================================
   PROTOCOLS / FLOWS
   ============================================================ */
/* ============================================================
   PROTOCOLS — FLOW ROWS
   ============================================================ */
.flows-layout { display:flex; flex-direction:column; gap:2px; background:var(--subtle); }

.flow-block {
  background: var(--navy-mid);
  padding: 2.8rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border: 1px solid transparent;
  transition: border-color .25s, background .25s;
}
.flow-block:hover { background: var(--navy-lift); border-color: var(--bdr-h); }

/* Left meta column */
.flow-meta { display:flex; flex-direction:column; gap:.7rem; }

.flow-id {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.flow-letter {
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--orange);
  line-height: 1;
  letter-spacing: -.02em;
  min-width: 1.6rem;
}

.flow-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
}

.flow-trig {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: .02em;
  line-height: 1.6;
  padding-left: 3.2rem; /* align under title */
}

/* Step pipeline */
.flow-steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.flow-step {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  min-width: 130px;
  transition: border-color .2s, background .2s;
}
.flow-block:hover .flow-step { border-color: rgba(255,255,255,0.13); }

/* Outcome node — orange accent */
.flow-outcome {
  border-color: rgba(233,84,32,0.5) !important;
  background: rgba(233,84,32,0.07) !important;
}
.flow-outcome .fs-tag  { color: var(--orange) !important; }
.flow-outcome .fs-label { color: var(--orange) !important; }

.fs-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.fs-label {
  font-family: var(--font-head);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--white);
  letter-spacing: .02em;
  line-height: 1.3;
}

/* Directional arrow */
.flow-arrow {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.2);
  line-height: 1;
  flex-shrink: 0;
  padding: 0 .1rem;
  user-select: none;
}
.flow-arrow-og { color: var(--orange); opacity: .7; }




/* ============================================================
   SKILLS / MATRIX
   ============================================================ */
.skills-layout { display:grid; grid-template-columns:1fr 280px; gap:4rem; align-items:start; }
.skills-layout-full { display:block; } /* full-width, no sidebar */

.skills-table { display:flex; flex-direction:column; gap:2px; background:var(--subtle); }
.st-header {
  display:grid; grid-template-columns:200px 1fr 130px;
  gap:2rem; padding:.8rem 2.5rem;
  border-bottom:1px solid var(--border);
}
.st-header span { font-size: var(--text-xs); color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }

.st-row {
  display:grid; grid-template-columns:200px 1fr 130px;
  gap:2rem; align-items:start;
  background:var(--navy-deep); padding:2rem 2.5rem;
  border:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.st-row:hover { background:var(--navy-lift); border-color:var(--bdr-h); }

.sk-bar {
  width:24px; height:2px; background:var(--orange); margin-bottom:1rem;
  transition: width .4s var(--ease);
}
.sk-bar-ag { background:var(--muted); }
.st-row:hover .sk-bar { width:44px; }

.st-eco h4 {
  font-family:var(--font-head); font-size: var(--text-sm); font-weight:700;
  color:var(--white); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem;
}
.sk-stack { font-size: var(--text-xs); color:var(--muted); }
.st-tech p { font-size: var(--text-sm); line-height:1.65; }
.st-badge  { display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }

.badge-im, .badge-ag {
  font-family:var(--font-mono); font-size: var(--text-xs);
  letter-spacing:.08em; padding:.3rem .7rem; text-transform:uppercase;
}
.badge-im { background:var(--orange-lo); color:var(--orange); border:1px solid var(--orange-md); }
.badge-ag { background:var(--subtle); color:var(--muted); border:1px solid var(--border); }
.badge-t  { font-family:var(--font-mono); font-size: var(--text-xs); color:var(--muted); }

/* Radar chart */
.radar-wrap {
  display:flex; flex-direction:column; gap:1.2rem;
  padding:2rem; background:var(--navy-deep);
  border:1px solid var(--border);
}
.radar-label { font-size: var(--text-xs); color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.radar-svg { width:100%; height:auto; }
.radar-legend { display:flex; flex-direction:column; gap:.6rem; }
.rl-item { display:flex; align-items:center; gap:.6rem; font-size: var(--text-xs); color:var(--muted); }
.rl-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }


/* ============================================================
   ACCESS
   ============================================================ */
.access-layout {
  display:grid; grid-template-columns:1fr 1fr;
  gap:6rem; align-items:start;
}
.access-text { display:flex; flex-direction:column; gap:1.8rem; }
.access-text p { font-size: var(--text-base); }

.access-values { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; }
.av-item { display:flex; align-items:center; gap:1rem; font-size: var(--text-sm); color:var(--off); }
.av-icon { width:20px; height:20px; flex-shrink:0; }

.access-card {
  background:var(--navy-mid); border:1px solid var(--border);
  overflow:hidden; transition:border-color .3s;
}
.access-card:hover { border-color:rgba(233,84,32,.4); }

.ac-topbar {
  display:flex; align-items:center; gap:.5rem;
  background:var(--navy-lift); padding:.8rem 1.5rem;
  border-bottom:1px solid var(--border);
}
.ac-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.2); flex-shrink:0;
}
.ac-title { font-size: var(--text-xs); color:var(--orange); margin-left:.4rem; letter-spacing:.05em; }

.ac-body { padding:2rem 1.8rem; border-bottom:1px solid var(--border); }
.ac-body > p { font-size: var(--text-sm); margin-bottom:1.5rem; }
.ac-links { display:flex; flex-direction:column; gap:.8rem; }
.ac-link {
  display:flex; align-items:center; gap:.8rem;
  font-size: var(--text-sm); color:var(--off);
  transition:color .2s;
}
.ac-link:hover { color:var(--orange); }
.ac-arrow { color:var(--orange); font-size: var(--text-sm); }

/* Portal access link highlight */
#link-portal { color: var(--off); }
#link-portal:hover { color: var(--orange); }
#link-portal .ac-arrow { color: var(--orange); }

/* Footer nav — link portal */
.footer-nav .btn-ghost {
  padding: .3rem .8rem;
  font-size: var(--text-xs);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ac-footer {
  padding:.9rem 1.8rem; font-size: var(--text-xs);
  color:var(--muted); letter-spacing:.07em; text-transform:uppercase;
}


/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background:var(--navy-deep);
  border-top:1px solid var(--border);
  padding-block:3rem;
}
.footer-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:2rem;
}
.footer-logo-link { display:flex; }
.footer-logo { height:48px; width:auto; object-fit:contain; }
.footer-center { display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.footer-tag {
  font-family:var(--font-head); font-size: var(--text-xs); font-weight:700;
  color:var(--white); text-transform:uppercase; letter-spacing:.08em;
}
.footer-nav {
  display:flex; gap:1rem; font-size: var(--text-xs); color:var(--muted);
}
.footer-nav a:hover { color:var(--white); }
.footer-nav span { opacity:.3; }
.footer-copy { font-family:var(--font-mono); font-size: var(--text-xs); color:var(--muted); }


/* ============================================================
   FADE-IN ON SCROLL
   ============================================================ */
.fi {
  opacity:0; transform:translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fi.visible { opacity:1; transform:translateY(0); }
.fi:nth-child(2){transition-delay:.07s}
.fi:nth-child(3){transition-delay:.14s}
.fi:nth-child(4){transition-delay:.21s}
.fi:nth-child(5){transition-delay:.28s}
.fi:nth-child(6){transition-delay:.35s}


/* ============================================================
   OMNIBOX SEARCH
   ============================================================ */
.omnibox {
  background: var(--surface);
  border: 1px solid var(--orange);
  width: 100%;
  max-width: 600px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  
  margin-top: 15vh;
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-overlay.open .omnibox {
  background: var(--surface);
  border: 1px solid var(--orange);
  width: 100%;
  max-width: 600px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}
.omnibox-loading, .omnibox-empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.omnibox-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  gap: 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}
.omnibox-item:hover {
  background: rgba(233,84,32,0.05);
}
.omnibox-item:last-child {
  border-bottom: none;
}
.omnibox-item-icon {
  color: var(--orange);
  opacity: 0.8;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.omnibox-item-content {
  flex: 1;
  overflow: hidden;
}
.omnibox-item-title {
  font-family: var(--font-head);
  font-size: var(--text-base);
  color: var(--white);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.omnibox-item-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.omnibox-item-type {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--orange);
  background: rgba(233,84,32,0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 0;
  border: 1px solid rgba(233,84,32,0.3);
}

/* ============================================================
   WIKI HIERARCHY TREE
   ============================================================ */
.wiki-tree-item {
  display: flex;
  flex-direction: column;
}
.wiki-doc-item {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.wiki-doc-item:hover {
  background: rgba(233, 84, 32, 0.05);
}
.wiki-doc-item.active {
  background: rgba(233, 84, 32, 0.1);
  border-left: 3px solid var(--orange);
}
.wiki-doc-title {
  font-family: var(--font-head);
  font-size: var(--text-base);
  color: var(--white);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wiki-doc-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}
.wiki-tree-children {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,0.1);
  margin-left: 1rem;
}
.wiki-tree-children .wiki-doc-item {
  border-bottom: none;
  padding: 0.5rem 1rem;
}
.wiki-tree-children .wiki-doc-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 1px;
  background: rgba(255,255,255,0.1);
}
.wiki-tree-children .wiki-doc-title {
  font-size: var(--text-sm);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1200px) {
  .phases-grid { grid-template-columns:repeat(2,1fr); }
  .skills-layout { grid-template-columns:1fr; }
  .radar-wrap { max-width:400px; }
}
@media (max-width:1024px) {
  .hero-split { grid-template-columns:1fr; gap:3rem; padding-block:4rem 2rem; }
  .hero-terminal-wrap { width:100%; max-width:500px; margin:0 auto; }
  .manifesto-layout { grid-template-columns:1fr; gap:3rem; }
  .access-layout    { grid-template-columns:1fr; gap:3rem; }
  .st-row, .st-header { grid-template-columns:1fr 1fr; }
  .st-badge { grid-column:1/-1; flex-direction:row; }
  .st-header { display:none; }
}
@media (max-width:768px) {
  .metrics-row { flex-direction:column; gap:1.5rem; padding-block:2rem; }
  .metric-div  { width:100%; height:1px; }
  .flow-block  { padding:2rem; }
  .flow-head   { flex-direction:column; gap:1rem; }
  .phases-grid { grid-template-columns:1fr; }
  .st-row, .st-header { grid-template-columns:1fr; }
  .st-badge { flex-direction:row; align-items:center; }
  nav ul { display:none; }
  .footer-inner { flex-direction:column; text-align:center; }
  .footer-copy  { text-align:center; }
  .pillar-strip { flex-direction:column; }
  .pillar-line  { width:100%; height:1px; align-self:auto; }
}
/* =========================================================================
   KANBAN BOARD STYLES (Admin, Client, Login)
   ========================================================================= */

:root {
  --navy-lift: #001d46;
  --green: #28c940;
  --yellow: #f0c040;
  --blue: #4a9eff;
  --red: #ff6b6b;
  --sidebar: 220px;
}

/* ── SHELL (Admin) ── */
.shell{display:flex;min-height:100vh;background:#030303;}

/* ── SIDEBAR (Admin) ── */
.sidebar {
  width:var(--sidebar);flex-shrink:0;
  background:#050505;border-right:1px solid #222;
  display:flex;flex-direction:column;
}
.sb-brand{padding:1.2rem 1rem 1rem;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:0.4rem;}
.sb-logo{height:54px;width:auto;}
.sb-title{font-family:var(--font-head);font-size: var(--text-xs);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.06em;}
.sb-sub  {font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}

.sb-nav{flex:1;padding:.8rem 0;}
.sb-item{
  display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;
  font-size: var(--text-sm);color:var(--muted);cursor:pointer;
  border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
  white-space:nowrap;
}
.sb-item:hover{color:var(--white);background:rgba(233,84,32,.05);}
.sb-item.active{color:var(--orange);border-left-color:var(--orange);background:rgba(233,84,32,.15);}
.sb-item svg{width:16px;height:16px;flex-shrink:0;opacity:.7;}
.sb-item.active svg{opacity:1;}
.sb-section{
  padding:.5rem 1rem .2rem;
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;
}

.sb-foot{padding:1rem;border-top:1px solid var(--border);}
.sb-user{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);margin-bottom:.6rem;display:flex;align-items:center;gap:0.5rem;}
.btn-logout{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;
  letter-spacing:.08em;padding:.35rem .8rem;border:1px solid var(--border);
  color:var(--muted);width:100%;transition:border-color .2s,color .2s;
  background:none;cursor:pointer;
}
.btn-logout:hover{border-color:var(--orange);color:var(--orange);}

/* ── MAIN (Admin & Client) ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Client Layout override */
.layout{max-width:1400px;margin:0 auto;padding:2.5rem 2rem;}

.topbar{
  height:52px;flex-shrink:0;
  background:rgba(5,5,5,.95);backdrop-filter:blur(16px);
  border-bottom:1px solid #222;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;
}
/* Client specific topbar */
.client-topbar {
  background:rgba(5,5,5,.98);backdrop-filter:blur(20px);
  border-bottom:1px solid #222;
  position:sticky;top:0;z-index:800;
  height:64px;
}
.client-topbar .topbar-inner{
  max-width:1400px;margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;height:100%;
}
.topbar-brand{display:flex;align-items:center;gap:1rem;}
.topbar-brand img{height:38px;width:auto;}
.topbar-brand-text{
  font-family:var(--font-head);font-size: var(--text-sm);font-weight:700;
  color:var(--white);text-transform:uppercase;letter-spacing:.06em;
}
.topbar-brand-sub{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}
.topbar-user{display:flex;align-items:center;gap:1.5rem;}
.topbar-name{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}

.topbar-title{font-family:var(--font-head);font-size: var(--text-sm);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.04em;}
.topbar-actions{display:flex;align-items:center;gap:.8rem;}

.btn-new{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size: var(--text-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.5rem 1.1rem;background:var(--orange);color:var(--white);
  transition:opacity .2s;border:none;cursor:pointer;
}
.btn-new:hover{opacity:.85;}

.content{flex:1;padding:1.5rem;}

/* ── VIEWS ── */
.view{display:none;}
.view.active{display:block;}

/* ── STATS GRID (Admin) ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#333;margin-bottom:2rem;}
.stat-box{background:#080808;padding:1.4rem 1.5rem;}
.stat-val{font-family:var(--font-head);font-size: var(--text-xl);font-weight:700;color:var(--white);line-height:1;}
.stat-val em{font-family:var(--font-mono);font-size: var(--text-sm);color:var(--orange);font-style:normal;margin-left:.2rem;}
.stat-lbl{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);margin-top:.3rem;letter-spacing:.06em;}

/* ── STATS STRIP (Client) ── */
.stats-strip{display:flex;gap:1px;background:#333;margin-bottom:3rem;}
.stat-item{flex:1;background:#080808;padding:1.5rem 2rem;}

/* ── KANBAN ── */
.kanban-wrap{display:flex;gap:1px;background:#333;min-height:calc(100vh - 200px);overflow-x:auto;}
.k-col{flex:1;min-width:220px;background:#080808;display:flex;flex-direction:column;}
.k-head{
  padding:1rem 1.2rem;border-bottom:1px solid #222;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.k-title{font-family:var(--font-head);font-size: var(--text-xs);font-weight:700;color:var(--white);text-transform:uppercase;letter-spacing:.06em;}
.k-count{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);background:var(--navy-deep);padding:.15rem .5rem;}
.k-bar{height:2px;flex-shrink:0;}
.k-bar.assessment{background:var(--muted);}
.k-bar.curation{background:var(--yellow);}
.k-bar.jit{background:var(--blue);}
.k-bar.readiness{background:var(--green);}

/* ── DATABASE SETTINGS ── */
.db-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:1px solid var(--border);}
.db-tab{
  padding:0.8rem 1rem;font-family:var(--font-head);font-size: var(--text-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .2s;
}
.db-tab:hover{color:var(--white);}
.db-tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.db-panel{display:none;}
.db-panel.active{display:block;}
.db-list{display:flex;flex-direction:column;gap:0.5rem;margin-top:1.5rem;}
.db-item{
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(255, 255, 255, 0.02);border:1px solid rgba(255, 255, 255, 0.05);padding:0.8rem 1.2rem;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.db-item-name{font-family:var(--font-mono);font-size: var(--text-sm);color:var(--white);}
.card-title{font-size: var(--text-sm);color:var(--white);font-weight:500;margin-bottom:.5rem;padding-left:.4rem;line-height:1.35;}
.card-meta {display:flex;align-items:center;justify-content:space-between;gap:.4rem;padding-left:.4rem;flex-wrap:wrap;}
.card-cat  {font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);background:rgba(255,255,255,.04);padding:.15rem .5rem;border:1px solid var(--border);}
.card-badges{display:flex;align-items:center;gap:.3rem;}
.card-badge{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);display:flex;align-items:center;gap:.25rem;}
.card-badge svg{width:10px;height:10px;}
.card-time{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--orange);}

/* Card (Client) */
.ticket-card{
  background:var(--navy-deep);border:1px solid var(--border);
  padding:1.2rem;transition:border-color .2s;
  position:relative;
}
.ticket-card:hover{border-color:rgba(255,255,255,.15);}
.ticket-card.highlight{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);transition:border-color .3s,box-shadow .3s;}
.ticket-id{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);margin-bottom:.6rem;}
.ticket-title{font-size: var(--text-sm);color:var(--white);font-weight:500;margin-bottom:.6rem;line-height:1.4;}
.ticket-desc{font-size: var(--text-sm);color:var(--muted);line-height:1.5;margin-bottom:.8rem;}
.ticket-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.4rem;}
.ticket-cat{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  background:rgba(255,255,255,.05);padding:.2rem .6rem;border:1px solid var(--border);
}
.ticket-date{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}


/* ── MOVE MENU ── */
.move-menu{
  position:absolute;top:100%;right:0;z-index:850;
  background:var(--navy-mid);border:1px solid var(--border);
  min-width:160px;
  display:none;
}
.move-menu.open{display:block;}
.move-opt{
  padding:.6rem 1rem;font-family:var(--font-mono);font-size: var(--text-xs);
  color:var(--muted);cursor:pointer;transition:color .15s,background .15s;
}
.move-opt:hover{color:var(--white);background:rgba(255,255,255,.05);}

/* ── DRAWER ── */
.drawer-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.drawer-overlay.open{opacity:1;pointer-events:auto;}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:901;
  width:min(620px,92vw);
  background:var(--navy-mid);border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .35s var(--ease);
  overflow:hidden;
}
.drawer.open{transform:translateX(0);}

.dr-head{
  padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.dr-id{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--orange);}
.btn-dr-close{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:color .2s;flex-shrink:0;background:none;border:none;cursor:pointer;
}
.btn-dr-close:hover{color:var(--white);}

.dr-body{flex:1;overflow-y:auto;padding:1.5rem;}

.dr-title-input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--border);
  font-family:var(--font-head);font-size: var(--text-base);font-weight:700;color:var(--white);
  padding:.4rem 0;outline:none;margin-bottom:1.2rem;
  transition:border-color .2s;
}
.dr-title-input:focus{border-bottom-color:var(--orange);}

.dr-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem;}
.dr-field label{
  display:block;font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem;
}
.dr-field select, .dr-field input[type=text], .dr-field input[type=date], .dr-field input[type=datetime-local], .dr-field input[type=number], .dr-field input[type=password], .dr-field input[type=email], .dr-field textarea {
  width:100%;background:var(--navy-deep);border:1px solid var(--border);
  padding:.55rem .8rem;font-size: var(--text-sm);color:var(--white);
  outline:none;transition:border-color .2s;font-family:var(--font-body);
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.dr-field select {
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E95420%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px;
  cursor: pointer;
}
.dr-field select:focus, .dr-field input:focus, .dr-field textarea:focus { border-color: var(--orange); }
.dr-field select option{background:var(--navy-deep); color:var(--white);}
.dr-field input[type=date]::-webkit-calendar-picker-indicator, .dr-field input[type=datetime-local]::-webkit-calendar-picker-indicator {
  filter: invert(1); cursor: pointer; opacity: 0.6; transition: opacity 0.2s;
}
.dr-field input[type=date]::-webkit-calendar-picker-indicator:hover, .dr-field input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.dr-section{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border);}
.dr-section-title{
  font-family:var(--font-head);font-size: var(--text-xs);font-weight:700;color:var(--off);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem;
  display:flex;align-items:center;gap:.6rem;
}
.dr-section-title svg{width:14px;height:14px;color:var(--orange);}

/* Description */
.dr-desc{
  width:100%;background:var(--navy-deep);border:1px solid var(--border);
  padding:.75rem .9rem;font-size: var(--text-sm);color:var(--white);
  outline:none;resize:vertical;min-height:80px;
  transition:border-color .2s;line-height:1.55;font-family:var(--font-body);
}
.dr-desc:focus{border-color:var(--orange);}

/* Status selector (chips) */
.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;}
.status-chip{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  padding:.4rem .9rem;border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:all .2s;
}
.status-chip.active-assessment  {background:rgba(107,130,160,.15);color:var(--muted);border-color:var(--muted);}
.status-chip.active-curation    {background:rgba(240,192,64,.1);color:var(--yellow);border-color:var(--yellow);}
.status-chip.active-jit         {background:rgba(74,158,255,.1);color:var(--blue);border-color:var(--blue);}
.status-chip.active-readiness   {background:rgba(40,201,64,.1);color:var(--green);border-color:var(--green);}



/* Buttons */
.btn-sm{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  padding:.45rem 1rem;background:var(--orange);color:var(--white);transition:opacity .2s;align-self:flex-start;
  border:none;cursor:pointer;
}
.btn-sm:hover{opacity:.8;}
.btn-sm-ghost{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  padding:.45rem 1rem;border:1px solid var(--border);color:var(--muted);
  transition:border-color .2s,color .2s;background:none;cursor:pointer;
}
.btn-sm-ghost:hover{border-color:var(--orange);color:var(--orange);}

.btn-save{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;
  letter-spacing:.08em;padding:.55rem 1.4rem;
  background:var(--orange);color:var(--white);transition:opacity .2s;
  border:none;cursor:pointer;
}
.btn-save:hover{opacity:.8;}

.btn-danger{
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;
  letter-spacing:.08em;padding:.55rem 1.2rem;
  border:1px solid rgba(255,107,107,.3);color:var(--red);
  transition:background .2s,border-color .2s;background:none;cursor:pointer;
}
.btn-danger:hover{background:rgba(255,107,107,.1);border-color:var(--red);}

/* Time tracking */
.timer-display{
  background:var(--navy-deep);border:1px solid var(--border);
  padding:1rem;margin-bottom:1rem;
  display:flex;align-items:center;justify-content:space-between;
}
.timer-counter{font-family:var(--font-mono);font-size: var(--text-xl);color:var(--white);}
.timer-counter.running{color:var(--orange);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.timer-btns{display:flex;gap:.5rem;}

.time-manual{
  margin-bottom:1rem;background:var(--navy-deep);border:1px solid #222;
  padding:.8rem;display:flex;flex-direction:column;gap:.5rem;
}
.time-inputs-wrap{
  display:flex;gap:.5rem;align-items:center;justify-content:space-between;
}
.time-inputs{
  display:flex;gap:.4rem;align-items:center;
}
.t-inp{
  width:40px;text-align:center;background:#000;border:1px solid #333;color:var(--white);
  font-family:var(--font-mono);font-size: var(--text-sm);padding:.3rem;
}
.t-inp:focus{border-color:var(--orange);outline:none;}
.time-inputs span{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}
.proc-input{
  width:100%;background:#000;border:1px solid #333;color:var(--white);
  font-family:var(--font-mono);font-size: var(--text-xs);padding:.6rem;resize:vertical;min-height:60px;
}
.proc-input:focus{border-color:var(--orange);outline:none;}

.time-entries-list{display:flex;flex-direction:column;gap:.4rem;}
.time-entry{
  background:var(--navy-deep);border:1px solid var(--border);
  padding:.6rem .9rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.time-entry-info{flex:1;}
.time-entry-desc{font-size: var(--text-sm);color:var(--off);margin-bottom:.2rem;}
.time-entry-meta{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}
.time-entry-dur {font-family:var(--font-mono);font-size: var(--text-sm);color:var(--orange);flex-shrink:0;}
.btn-del{color:var(--muted);font-size: var(--text-xs);padding:.2rem .4rem;transition:color .2s;background:none;border:none;cursor:pointer;}
.btn-del:hover{color:var(--red);}
.time-total{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--orange);
  padding:.6rem .9rem;border:1px solid var(--orange-md);background:var(--orange-lo);
  text-align:right;
}

/* Attachments */
.att-drop{
  border:1px dashed rgba(255,255,255,.15);padding:1.5rem;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:.8rem;
}
.att-drop:hover,.att-drop.dragover{border-color:var(--orange);background:var(--orange-lo);}
.att-drop-txt{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);pointer-events:none;}
.att-drop-txt span{color:var(--orange);}
#att-file-input{display:none;}

.att-list{display:flex;flex-direction:column;gap:.4rem;}
.att-item{
  background:var(--navy-deep);border:1px solid var(--border);
  padding:.6rem .9rem;
  display:flex;align-items:center;gap:.8rem;
}
.att-icon{width:28px;height:28px;background:var(--navy-mid);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}
.att-info{flex:1;min-width:0;}
.att-name{font-size: var(--text-sm);color:var(--off);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.att-meta{font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);}
.att-actions{display:flex;gap:.3rem;flex-shrink:0;}

/* Danger zone (admin drawer footer) */
.dr-danger{
  padding:1.5rem;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;justify-content:flex-end;gap:.5rem;
}

/* ── CLIENTS VIEW ── */
.clients-table{border-collapse:collapse;width:100%;background:var(--navy-mid);}
.clients-table th{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
  padding:.9rem 1.2rem;text-align:left;
  background:var(--navy-deep);border-bottom:1px solid var(--border);
}
.clients-table td{
  padding:.9rem 1.2rem;font-size: var(--text-sm);
  border-bottom:1px solid var(--border);color:var(--off);
}
.clients-table tr:hover td{background:rgba(255,255,255,.02);}
.td-mono{font-family:var(--font-mono);font-size: var(--text-xs);}
.td-num {font-family:var(--font-mono);font-size: var(--text-xs);color:var(--orange);}

/* ── TIME REPORT VIEW ── */
.time-report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);margin-bottom:2rem;}
.time-report-table{background:var(--navy-mid);border:1px solid var(--border);width:100%;border-collapse:collapse;}
.time-report-table th{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  padding:.8rem 1.2rem;text-align:left;
  background:var(--navy-deep);border-bottom:1px solid var(--border);letter-spacing:.1em;text-transform:uppercase;
}
.time-report-table td{
  padding:.8rem 1.2rem;font-size: var(--text-sm);color:var(--off);
  border-bottom:1px solid var(--border);
}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;
  padding:.9rem 1.3rem;background:var(--navy-lift);border:1px solid var(--border);
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--white);
  transform:translateY(8px);opacity:0;transition:all .3s;pointer-events:none;
  max-width:300px;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.ok  {border-color:rgba(40,201,64,.4);}
.toast.err {border-color:rgba(255,107,107,.4);}

/* ── LOADING ── */
.loading{
  display:flex;align-items:center;justify-content:center;
  height:200px;font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
}

/* ── LOGIN/AUTH ── */
.auth-wrap {
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;
}

.auth-logo {
  display:flex;align-items:center;gap:1.2rem;margin-bottom:3rem;
}
.auth-logo img { height:56px;width:auto;object-fit:contain; }
.auth-logo-img { height: 56px; width: auto; object-fit: contain; }
.auth-logo-title {
  font-family:var(--font-head);font-size: var(--text-base);font-weight:700;
  color:var(--white);text-transform:uppercase;letter-spacing:.05em;
}
.auth-logo-sub { font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);letter-spacing:.08em; }

.auth-box {
  width:100%;max-width:420px;
  background:var(--navy-mid);
  border:1px solid var(--border);
}

.auth-tabs {
  display:flex;border-bottom:1px solid var(--border);
}
.auth-tab {
  flex:1;padding:1rem;text-align:center;
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s;
}
.auth-tab.active{color:var(--white);border-bottom-color:var(--orange);}

.auth-panel{display:none;padding:2.5rem;}
.auth-panel.active{display:block;}

.auth-panel h2 {
  font-family:var(--font-head);font-size: var(--text-base);font-weight:700;
  color:var(--white);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:.5rem;
}
.auth-panel p { font-size: var(--text-sm);margin-bottom:2rem;line-height:1.6; }

.form-group{margin-bottom:1.2rem;}
.form-group label{
  display:block;font-family:var(--font-mono);font-size: var(--text-xs);
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;
}
.form-group input, .form-group select, .form-group textarea {
  width:100%;padding:.8rem 1rem;
  background:var(--navy-deep);border:1px solid var(--border);
  color:var(--white);font-family:var(--font-body);font-size: var(--text-sm);
  outline:none;transition:border-color .2s;border-radius:0;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--orange); box-shadow: 4px 4px 0 var(--orange);}
.form-group select option{background:var(--navy-deep);}

.btn-submit {
  width:100%;padding:.9rem;
  background:var(--orange);color:var(--white);
  font-family:var(--font-mono);font-size: var(--text-sm);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;
  border:2px solid var(--orange);cursor:pointer;
  transition:background .25s,color .25s;
  margin-top:.5rem;
}
.btn-submit:hover{background:transparent;color:var(--orange);}

.auth-msg {
  margin-top:1rem;padding:.8rem 1rem;
  font-family:var(--font-mono);font-size: var(--text-sm);
  border:1px solid;display:none;
}
.auth-msg.error{color:#ff6b6b;border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.07);}
.auth-msg.ok   {color:#51d88a;border-color:rgba(81,216,138,.3);background:rgba(81,216,138,.07);}

.auth-footer{
  text-align:center;padding:1.5rem;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);letter-spacing:.06em;
}

/* Admin login link */
.admin-link{
  margin-top:2rem;
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  text-align:center;
}
.admin-link a{color:var(--orange);cursor:pointer;}
.admin-link a:hover{text-decoration:underline;}

/* Form rows and Client Open Ticket Section */
.section-title{
  font-family:var(--font-head);font-size: var(--text-base);font-weight:700;color:var(--white);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.5rem;
  display:flex;align-items:center;gap:1rem;
}
.section-title::after{content:'';flex:1;height:1px;background:var(--border);}

.new-ticket-form{
  background:var(--navy-mid);border:1px solid var(--border);padding:2rem;
  margin-bottom:3rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.form-group textarea{min-height:90px;}

.btn-primary{
  font-family:var(--font-mono);font-size: var(--text-xs);font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;padding:.8rem 2rem;
  background:var(--orange);color:var(--white);border:2px solid var(--orange);
  cursor:pointer;transition:background .25s,color .25s;
}
.btn-primary:hover{background:transparent;color:var(--orange);}

.form-feedback{
  margin-top:1rem;padding:.7rem 1rem;
  font-family:var(--font-mono);font-size: var(--text-xs);border:1px solid;display:none;
}
.form-feedback.ok   {color:#51d88a;border-color:rgba(81,216,138,.3);background:rgba(81,216,138,.07);}
.form-feedback.error{color:#ff6b6b;border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.07);}

/* Client Kanban Display */
.kanban-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);}
.kanban-col{background:var(--navy-mid);display:flex;flex-direction:column;}
.kanban-col-header{
  padding:1.2rem 1.5rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.col-title{
  font-family:var(--font-head);font-size: var(--text-sm);font-weight:700;
  color:var(--white);text-transform:uppercase;letter-spacing:.06em;
}
.col-count{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  background:var(--navy-deep);padding:.2rem .6rem;
}
.col-indicator{height:2px;background:var(--border);}
.col-indicator.assessment      {background:var(--muted);}
.col-indicator.curation   {background:var(--yellow);}
.col-indicator.jit{background:var(--blue);}
.col-indicator.readiness    {background:var(--green);}

.kanban-cards{padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-height:200px;}
.empty-col{
  font-family:var(--font-mono);font-size: var(--text-xs);color:var(--muted);
  opacity:.4;text-align:center;padding:2rem 1rem;
}

/* Badge styles from Client view */
.badge-assessment       {background:rgba(107,130,160,.12);color:var(--muted);border:1px solid rgba(107,130,160,.3);}
.badge-curation    {background:rgba(255,189,46,.08);color:var(--yellow);border:1px solid rgba(255,189,46,.25);}
.badge-jit{background:rgba(74,158,255,.08);color:var(--blue);border:1px solid rgba(74,158,255,.25);}
.badge-readiness     {background:rgba(40,201,64,.08);color:var(--green);border:1px solid rgba(40,201,64,.25);}
.status-badge{
  display:inline-block;font-family:var(--font-mono);font-size: var(--text-xs);
  text-transform:uppercase;letter-spacing:.08em;padding:.2rem .6rem;
}

@media(max-width:900px){
  .sidebar{width:52px;}
  .sb-title,.sb-sub,.sb-section,.sb-item span,.sb-user,.sb-foot .btn-logout{display:none;}
  .sb-logo{height:42px;}
  .sb-item{justify-content:center;padding:.7rem;}
  .kanban-wrap{overflow-x:auto; scroll-snap-type: x mandatory;}
  .k-col{min-width:240px;}
  .stats-grid{grid-template-columns:1fr 1fr;}

  .kanban-grid{grid-template-columns:1fr;gap:1.5rem;background:transparent;}
  .kanban-col{border:1px solid var(--border);}

  .stats-strip{flex-direction:column;gap:1px;background:var(--border);}

  .form-row{grid-template-columns:1fr;}

  /* Admin topbar: too many controls for one fixed-height row on narrow
     viewports — let the action cluster scroll horizontally instead of
     clipping or overlapping the view title. */
  .topbar{padding:0 .8rem;gap:.5rem;}
  .topbar-title{flex-shrink:0;}
  .topbar-actions{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .topbar-actions::-webkit-scrollbar{display:none;}
  .topbar-actions>*{flex-shrink:0;}

  /* Client topbar: brand + search + KB link + user + logout no longer
     fit on one 64px row below ~900px, so let it wrap. */
  .client-topbar{height:auto;}
  .client-topbar .topbar-inner{flex-wrap:wrap;height:auto;padding:.7rem 1rem;row-gap:.6rem;}
  .topbar-user{flex-wrap:wrap;row-gap:.5rem;}
}

/* ── TOPBAR SELECT (Admin filter) ── */
.topbar-select {
  padding:.4rem .7rem;
  font-family:var(--font-mono);font-size: var(--text-xs);
  background:var(--navy-deep);border:1px solid var(--border);
  color:var(--white);outline:none;
  transition:border-color .2s;cursor:pointer;
}
.topbar-select:focus,.topbar-select:hover{border-color:var(--orange);}
.topbar-select option{background:var(--navy-deep);}

/* ── STAT LABEL (Client view) ── */
.stat-label,.stat-lbl{
  font-family:var(--font-mono);font-size: var(--text-xs);
  color:var(--muted);margin-top:.3rem;letter-spacing:.06em;
}

/* ── REPORT MODAL ── */
.report-modal {
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.95);
  background:var(--navy-mid);
  border:1px solid var(--border);
  padding:2.5rem;
  z-index:1001;
  /* Usar visibility ao invés de display para permitir transição */
  visibility:hidden;
  pointer-events:none;
  width:100%;max-width:420px;
  opacity:0;
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.report-modal.open {
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear 0s;
}

.report-modal-title {
  font-family:var(--font-head);font-size: var(--text-base);font-weight:700;
  color:var(--white);text-transform:uppercase;letter-spacing:.04em;
  margin-bottom:1.5rem;
}
.report-modal-field{margin-bottom:1rem;}

.report-modal-result {
  display:none;
  margin-bottom:1.5rem;
  padding:1.2rem;
  background:var(--navy-deep);
  border:1px solid var(--orange-md);
  text-align:center;
}
.report-modal-result-label {
  font-family:var(--font-mono);font-size: var(--text-xs);
  color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:.5rem;
}
.report-modal-result-value {
  font-family:var(--font-mono);font-size: var(--text-xl);
  color:var(--orange);line-height:1;
}
.report-modal-result-value em{
  font-family:var(--font-mono);font-size: var(--text-base);
  font-style:normal;opacity:.7;margin-left:.1rem;
}
.report-modal-actions{display:flex;gap:.6rem;}
.report-modal-actions .btn-save,
.report-modal-actions .btn-sm-ghost{flex:1;justify-content:center;}

/* ── PRIORITY & LABELS ── */
.card-priority-label {
  font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
  padding:.1rem .35rem;border:1px solid;
}
.priority-low      { color:var(--muted);border-color:rgba(107,130,160,.3); }
.priority-normal   { color:var(--blue);border-color:rgba(74,158,255,.3); }
.priority-high     { color:var(--yellow);border-color:rgba(240,192,64,.3); }
.priority-critical { color:var(--red);border-color:rgba(255,107,107,.3); }

/* Labels / chips */
#dr-labels-wrap { display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem; }
.label-chip {
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  padding:.25rem .7rem;border:1px solid var(--border);color:var(--muted);
  cursor:pointer;transition:all .2s;
}
.label-chip.active { background:var(--orange-lo);color:var(--orange);border-color:var(--orange-md); }
.label-chip:hover  { border-color:rgba(255,255,255,.2);color:var(--off); }

.card-labels { display:flex;flex-wrap:wrap;gap:.3rem;padding-left:.4rem;margin-top:.4rem; }
.card-label {
  font-family:var(--font-mono);font-size: var(--text-xs);text-transform:uppercase;letter-spacing:.07em;
  padding:.1rem .4rem;background:var(--orange-lo);color:var(--orange);border:1px solid var(--orange-md);
}

/* ── CLIENT LAYOUT OVERRIDES ── */
/* Override overflow para páginas de app (não-landing) */
body:has(.shell),
body:has(.auth-wrap),
body:has(.layout) {
  overflow: hidden auto;
  line-height: 1.6;
}

/* Admin: overflow hidden total (layout fixed) */
body:has(.shell) {
  overflow: hidden;
}

/* Client/Login: scroll normal */
body:has(.layout),
body:has(.auth-wrap) {
  overflow: auto;
  height: auto;
}

/* -- Utilities -- */
.report-client-title { margin: 0; font-size: var(--text-base); font-family: var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; }
.modal-actions { display: flex; justify-content: flex-end; gap: 1rem; }
/* -- REPORT PRIME (Glassmorphism Brutalist) -- */
.rp-card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 4px solid var(--c-theme);
  transition: transform 0.3s var(--ease);
}
.rp-card:hover {
  transform: translateY(-2px);
}
.rp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rp-client-title {
  margin: 0; font-size: var(--text-base); font-family: var(--font-head);
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--c-theme);
  
}
.rp-meta { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: var(--text-sm); }
.rp-badge { padding: 0.4rem 0.8rem; border-radius: 0; display: inline-flex; align-items: center; }
.rp-badge-ghost { background: rgba(255, 255, 255, 0.05); color: var(--muted); border: 1px solid rgba(255, 255, 255, 0.1); }
.rp-badge-primary { 
  background: linear-gradient(135deg, rgba(233, 84, 32, 0.8), rgba(233, 84, 32, 0.4)); 
  color: var(--white); 
  border: 1px solid var(--orange);
  
}
.rp-tickets { display: flex; flex-direction: column; gap: 1rem; }
.rp-vector {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.2s;
}
.rp-vector:hover { border-color: rgba(255, 255, 255, 0.15); }
.rp-vector-head {
  cursor: pointer; padding: 0.8rem 1rem;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}
.rp-vector-head:hover { background: rgba(255, 255, 255, 0.05); }
.rp-vector-title { font-weight: 500; font-size: var(--text-sm); color: var(--off); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.rp-vector-id { font-family: var(--font-mono); color: var(--orange); font-weight: 600; }
.rp-tag { background: rgba(255, 255, 255, 0.1); color: var(--white); padding: 2px 6px; border-radius: 0; font-size: var(--text-xs); font-family: var(--font-mono); text-transform: uppercase; }
.rp-vector-time { text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); }
.rp-time-period { color: var(--white); }
.rp-time-lifetime { opacity: 0.5; margin-top: 2px; }
.rp-proc-list { display: flex; flex-direction: column; position: relative; }
.rp-proc-item {
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  align-items: center; font-size: var(--text-sm); z-index: 2; overflow: hidden;
  font-family: var(--font-mono);
}
.rp-proc-item:last-child { border-bottom: none; }
.rp-proc-item:hover { background: rgba(255, 255, 255, 0.02); }
.rp-proc-bar {
  position: absolute; top: 0; left: 0; height: 100%; z-index: -1;
  background: linear-gradient(90deg, rgba(233, 84, 32, 0.15), rgba(233, 84, 32, 0.02));
  border-right: 1px solid rgba(233, 84, 32, 0.3);
  transition: width 1s var(--ease);
}
.rp-proc-date { color: var(--muted); }
.rp-proc-desc { color: var(--off); font-family: var(--font-body); font-size: var(--text-sm); }
.rp-proc-admin { color: var(--orange); }
.rp-proc-dur { text-align: right; color: var(--white); font-weight: 600; }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-terminal-wrap { width: 100%; max-width: 500px; margin: 0 auto; }
  .metrics-row { flex-direction: column; gap: 2rem; }
  .metric-div { width: 100%; height: 1px; }
  .metric-item { padding-inline: 0; }
  
  .shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; }
  .sb-brand, .sb-footer, .pomodoro-sidebar-widget { display: none; }
  .sb-nav { padding: 0; flex-direction: row; gap: 1rem; overflow-x: auto; flex:1; justify-content: flex-end; }
  .sb-section { display: none; }
  .sb-item { margin-bottom: 0; padding: 0.5rem; justify-content: center; }
  .sb-item span { display: none; }
  
  .kanban-wrap { flex-direction: column; padding: 1rem; height: auto; overflow: visible; }
  .k-col { min-height: 400px; }
}

.btn-sm-ghost:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* -- KNOWLEDGE BASE (WIKI) -- */
.wiki-layout { display: flex; gap: 2rem; }
.wiki-sidebar { flex: 0 0 300px; max-width: 100%; background: rgba(255,255,255,0.02); border-right: 1px solid var(--border); padding: 1rem; display: flex; flex-direction: column; }
.wiki-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.wiki-doc-item { padding: 0.8rem; border-radius: 0; cursor: pointer; transition: background 0.2s; border: 1px solid transparent; }
.wiki-doc-item:hover { background: rgba(255,255,255,0.05); }
.wiki-doc-item.active { background: rgba(233,84,32,0.1); border-color: rgba(233,84,32,0.3); }
.wiki-doc-title { font-weight: 500; font-size: var(--text-sm); color: var(--off); margin-bottom: 0.2rem; }
.wiki-doc-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.wiki-main {
  flex: 1;
  padding: 2rem;
  position: relative;
  display: flex;
  justify-content: center;
  background: #000;
}
.wiki-main > div { width: 100%; max-width: 800px; display: flex; flex-direction: column; }
.wiki-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); }
.wiki-actions { position: absolute; top: 2rem; right: 2rem; display: flex; gap: 1rem; }
.wiki-title-input { width: 100%; background: transparent; border: none; font-size: var(--text-xl); font-family: var(--font-head); font-weight: 700; color: var(--white); margin-bottom: 1.5rem; outline: none; margin-top: 3rem; letter-spacing: -0.02em; }
.wiki-content-input { width: 100%; min-height: 60vh; background: transparent; border: none; font-size: var(--text-base); line-height: 1.6; font-family: var(--font-mono); color: var(--off); outline: none; resize: vertical; }
#wiki-network-canvas, #client-wiki-network-canvas { outline: none; border-radius: 0; border: 1px solid rgba(255,255,255,0.05); }
.vis-network { outline: none !important; }
.wiki-title-display { font-size: var(--text-xl); font-family: var(--font-head); font-weight: 700; color: var(--white); margin-top: 3rem; margin-bottom: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; }
.wiki-content { font-size: var(--text-base); line-height: 1.6; color: rgba(255,255,255,0.85); font-family: var(--font-body); padding-bottom: 5rem; }
.wiki-content h1, .wiki-content h2, .wiki-content h3 { font-family: var(--font-head); color: var(--white); margin-top: 2.5rem; margin-bottom: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.wiki-content h1 { font-size: var(--text-xl); }
.wiki-content h2 { font-size: var(--text-xl); border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.5rem; }
.wiki-content h3 { font-size: var(--text-lg); }
.wiki-content p { margin-bottom: 1.2rem; }
.wiki-content ul, .wiki-content ol { margin-bottom: 1.5rem; padding-left: 2rem; }
.wiki-content li { margin-bottom: 0.4rem; }
.wiki-content pre { background: #161b22; padding: 1.2rem; border-radius: 0; overflow-x: auto; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 1.5rem; font-family: var(--font-mono); font-size: var(--text-base); }
.wiki-content code { background: rgba(255,255,255,0.1); padding: 0.2rem 0.4rem; border-radius: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: #ff7b72; }
.wiki-content pre code { background: transparent; padding: 0; border-radius: 0; color: inherit; }

/* Loading / disabled state for triggering buttons on async actions */
button:disabled { opacity: .5; cursor: not-allowed; }

/* Brutalist Focus State */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none !important; }
/* Hide Number Spinners */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type="number"] { -moz-appearance: textfield; }

/* Kanban Mobile Scroll Snapping */
.k-col { scroll-snap-align: start; }
/* Body-copy links stay Branco Técnico; orange is reserved for the hover/active signal, not passive reading text */
.wiki-content a { color: var(--off); text-decoration: none; border-bottom: 1px solid var(--border); transition: border-color 0.2s, color 0.2s; }
.wiki-content a:hover { color: var(--orange); border-bottom-color: var(--orange); }
.wiki-content blockquote { border-left: 4px solid var(--orange); margin: 1.5rem 0; padding: 0.5rem 0 0.5rem 1.5rem; color: var(--muted); font-style: italic; background: rgba(255,255,255,0.02); }
.wiki-content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.wiki-content th, .wiki-content td { padding: 0.75rem; border: 1px solid rgba(255,255,255,0.1); text-align: left; }
.wiki-content th { background: rgba(255,255,255,0.05); font-family: var(--font-head); font-weight: 600; color: var(--white); }
.wiki-linked-vectors { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); }



/* Form resets */
.dr-field input, .dr-field select, .dr-field textarea, input[type="text"], input[type="number"], select, textarea { border-radius: 0 !important; }
input[type="checkbox"] { appearance: none; width: 16px; height: 16px; border: 1px solid var(--border); background: transparent; cursor: pointer; position: relative; margin: 0; padding: 0; vertical-align: middle; }
input[type="checkbox"]:checked { background: var(--orange); border-color: var(--orange); }
input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wiki-content { overflow-wrap: break-word; word-break: break-word; }