/* ============================================================
   extras.css — nav dropdown, terminal inner pages, contact
   sequence, dashboard home. Loads AFTER style.css and reuses its
   tokens (--accent, --card, --border, --mono, --ease, --angle).
   Rule: every animated "from" state lives inside
   prefers-reduced-motion: no-preference, so reduced-motion users
   (and no-JS users) always see final, fully readable content.
   ============================================================ */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- NAV BAR ---------- */
.nav-bar {
  position: sticky; top: 0; z-index: 60;
  margin: 0 -20px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-bar::after { /* scanning light along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  opacity: .55;
}
.site-nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.brand { font: 600 .92rem/1 var(--mono); color: var(--fg); text-decoration: none; letter-spacing: .01em; display: inline-flex; align-items: center; gap: 2px; }
.brand .bp { color: var(--accent); }
.brand .bc { display: inline-block; width: .55em; height: 1.05em; margin-left: 4px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (prefers-reduced-motion: no-preference) { .brand .bc { animation: blink 1.1s steps(2, jump-none) infinite; } }
@keyframes blink { 50% { opacity: 0; } }

.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-btn {
  position: relative; overflow: hidden; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 .84rem/1 var(--mono); letter-spacing: .04em; color: var(--fg);
  padding: 10px 14px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--card);
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.menu-btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in oklch, var(--accent) 24%, transparent) 50%, transparent 70%);
  transition: transform .7s var(--ease); }
.menu-btn:hover, .menu[open] > .menu-btn { border-color: var(--accent); box-shadow: 0 10px 28px -14px var(--glow), 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.menu-btn:hover::before { transform: translateX(110%); }
.menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-btn .ps { color: var(--accent); }
.menu-btn .caret { display: inline-block; transition: transform .35s var(--ease); color: var(--accent); }
.menu[open] .caret { transform: rotate(180deg); }

.menu-panel {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 70;
  width: min(360px, calc(100vw - 40px));
  color: #cfe9f1; background: #060910;
  border-radius: 14px; isolation: isolate; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7), 0 0 60px -20px rgb(34 211 238 / .35);
}
.menu-panel::before { /* rotating gradient border beam */
  content: ""; position: absolute; inset: 0; z-index: 2; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, #22d3ee 50deg, #a78bfa 110deg, transparent 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
@media (prefers-reduced-motion: no-preference) { .menu-panel::before { animation: beam 6s linear infinite; } }
.menu-panel::after { /* CRT scanlines */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(255 255 255 / .025) 2px 3px);
}
.mp-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid #141b28; font: 500 .72rem/1 var(--mono); color: #7f8aa0; }
.mp-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3347; }
.mp-bar i:nth-child(1) { background: #ff5f57; } .mp-bar i:nth-child(2) { background: #febc2e; } .mp-bar i:nth-child(3) { background: #28c840; }
.mp-bar span { margin-left: 8px; }
.menu-panel ul { list-style: none; margin: 0; padding: 8px; }
.menu-panel li { margin: 0; }
.menu-panel a {
  position: relative; display: grid; grid-template-columns: 1.3rem 1fr auto; align-items: center; gap: 4px;
  padding: 12px 12px; border-radius: 8px; text-decoration: none; color: inherit;
  transition: background-color .2s, transform .25s var(--ease);
}
.menu-panel a .pr { color: #22d3ee; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--ease); font: 700 1rem/1 var(--mono); }
.menu-panel a .cmd { font: 700 1.08rem/1.2 var(--mono); color: #e8f6fa; letter-spacing: .01em; }
.menu-panel a .desc { grid-column: 2; font: 400 .76rem/1.3 var(--mono); color: #7f8aa0; }
.menu-panel a kbd { grid-row: 1 / span 2; grid-column: 3; font: 600 .7rem/1 var(--mono); color: #7f8aa0; border: 1px solid #1f2738; border-radius: 4px; padding: 4px 6px; background: #0a0f19; }
.menu-panel a::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: linear-gradient(#22d3ee, #a78bfa); transform: scaleY(0); transition: transform .3s var(--ease); }
.menu-panel a:hover, .menu-panel a:focus-visible { background: linear-gradient(90deg, rgb(34 211 238 / .10), transparent 85%); outline: none; transform: translateX(3px); }
.menu-panel a:hover::before, .menu-panel a:focus-visible::before { transform: scaleY(1); }
.menu-panel a:hover .pr, .menu-panel a:focus-visible .pr { opacity: 1; transform: none; }
.menu-panel a:hover .cmd, .menu-panel a:focus-visible .cmd { text-shadow: -1px 0 rgb(34 211 238 / .75), 1px 0 rgb(167 139 250 / .75); }
.menu-panel a[aria-current="page"] .cmd { color: #22d3ee; }
.menu-panel a[aria-current="page"] .desc::after { content: "  ● you are here"; color: #34d399; }
.mp-foot { padding: 10px 16px 12px; border-top: 1px solid #141b28; font: 400 .7rem/1 var(--mono); color: #55607a; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panel { animation: panel-in .42s var(--ease) both; }
  .menu[open] .menu-panel li { animation: item-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 140ms); }
  .menu-panel a:hover .cmd { animation: glitch .38s steps(2) 1; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(-8px) scale(.98); clip-path: inset(0 0 100% 0 round 14px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); } }
@keyframes item-in { from { opacity: 0; transform: translateX(-14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes glitch { 0% { transform: translate(0); } 25% { transform: translate(-1.5px, 0); } 50% { transform: translate(1.5px, 0); } 75% { transform: translate(-1px, 0); } 100% { transform: translate(0); } }

/* ---------- TERMINAL INNER PAGES ---------- */
.term-wrap { max-width: 920px; margin: 0 auto; padding: 38px 0 90px; }
.term { border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); overflow: hidden; box-shadow: 0 40px 80px -50px var(--glow), 0 1px 2px rgb(0 0 0 / .05); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); font: 500 .74rem/1 var(--mono); color: var(--muted); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; }
.term-bar i:nth-child(1) { background: #ff5f57; } .term-bar i:nth-child(2) { background: #febc2e; } .term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; }
.term-body { padding: 26px clamp(18px, 4vw, 36px) 36px; }
.prompt { font: 600 1.02rem/1.5 var(--mono); margin: 0 0 20px; color: var(--fg); }
.prompt .u { color: var(--accent-2); } .prompt .ps { color: var(--accent); }
.prompt .typed { display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden; }
.prompt .cur { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; margin-left: 3px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .prompt .typed { width: 0; animation: typing calc(var(--n, 12) * 70ms) steps(var(--n, 12)) .2s forwards; }
  .prompt .cur { animation: blink 1s steps(2, jump-none) infinite; }
  .term-body > .rv { animation: rise .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 110ms + 500ms); }
}
@keyframes typing { to { width: calc(var(--n, 12) * 1ch); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.out-h { font: 600 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; }
.out-h::before { content: "#"; color: var(--accent); } .out-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.term-body p { max-width: 68ch; }
.lead-bio { font-size: 1.12rem; line-height: 1.75; }
.copy-box { position: relative; border: 1px dashed var(--border-strong); border-radius: 10px; padding: 18px 20px 16px; background: color-mix(in srgb, var(--bg-2) 60%, transparent); }
.copy-box p { margin: 0 0 12px; }
.btn-mini { font: 600 .74rem/1 var(--mono); letter-spacing: .06em; color: var(--fg); background: var(--card); border: 1px solid var(--border-strong); border-radius: 6px; padding: 8px 12px; cursor: pointer; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.btn-mini:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0; margin: 0; font-family: var(--mono); font-size: .9rem; }
.kv dt, .kv dd { padding: 11px 0; border-bottom: 1px dashed var(--border-strong); margin: 0; }
.kv dt { color: var(--accent); padding-right: 26px; font-weight: 600; letter-spacing: .04em; }
.kv dd { color: var(--fg); line-height: 1.55; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } }

.filter { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 10px; padding: 12px 14px; background: var(--card); font: 500 .95rem/1 var(--mono); transition: border-color .2s, box-shadow .2s; }
.filter:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.filter .ps { color: var(--accent); white-space: nowrap; }
.filter input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg); font: inherit; }
.filter .count { color: var(--muted); font-size: .76rem; white-space: nowrap; }
.tagbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.tagbar button { font: 500 .74rem/1 var(--mono); color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.tagbar button:hover, .tagbar button[aria-pressed="true"] { color: var(--fg); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.hit { position: relative; padding: 14px 16px 14px 18px; margin: 10px 0; border-left: 2px solid var(--border-strong); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--card) 70%, transparent); transition: border-color .25s, background-color .25s, transform .3s var(--ease); }
.hit:hover { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); transform: translateX(3px); }
.hit .path { font: 500 .72rem/1.4 var(--mono); color: var(--muted); margin: 0 0 6px; word-break: break-all; }
.hit .path b { color: var(--accent-2); font-weight: 600; } .hit .path i { color: var(--ok); font-style: normal; }
.hit h3 { margin: 0 0 4px; font-size: 1.04rem; letter-spacing: -.01em; }
.term-body .hit p { max-width: none; }
.hit p { margin: 0; font-size: .96rem; line-height: 1.6; color: color-mix(in srgb, var(--fg) 88%, var(--muted)); }
.hit a { font-weight: 600; }
.hit[hidden] { display: none; }
.noresult { font: 500 .9rem/1.5 var(--mono); color: var(--muted); padding: 14px 4px; }

/* ---------- CONTACT SEQUENCE ---------- */
body.contact { background: #000; padding: 0; overflow-x: hidden; }
body.contact::before, body.contact::after { display: none; }
body.contact .nav-bar { margin: 0; background: rgb(0 0 0 / .55); border-bottom-color: rgb(34 255 120 / .18); }
body.contact .brand, body.contact .menu-btn { color: #d6ffe4; }
body.contact .menu-btn { background: rgb(0 18 8 / .75); border-color: rgb(84 255 143 / .35); }
body.contact .menu-btn .ps, body.contact .menu-btn .caret { color: #54ff8f; }
.stage { position: fixed; inset: 0; z-index: 1; background: #000; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / .78) 100%), repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / .18) 2px 3px); }
.hud { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; text-align: center; color: #9dffb4; font-family: var(--mono); padding: 70px 20px 20px; transition: opacity .5s, transform .8s var(--ease), filter .8s; }
.hud.gone { opacity: 0; pointer-events: none; }
.hud.warp { transform: scale(1.08); }
.ring { position: relative; width: min(300px, 68vw); aspect-ratio: 1; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 3; }
.ring .track { stroke: rgb(120 255 160 / .14); }
.ring .prog { stroke: #54ff8f; stroke-linecap: round; filter: drop-shadow(0 0 8px #54ff8f); transition: stroke-dashoffset 1s linear; }
.count { font: 800 clamp(5rem, 22vw, 9.5rem)/1 var(--mono); color: #c9ffd9; text-shadow: 0 0 18px #36ff7a, 0 0 60px rgb(54 255 122 / .55); font-variant-numeric: tabular-nums; }
.hud.warp .count { animation: shake .09s linear infinite; color: #fff; }
@keyframes shake { 0% { transform: translate(0, 0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -2px); } 100% { transform: translate(1px, 2px); } }
.hud-label { margin-top: 26px; font-size: .8rem; letter-spacing: .32em; text-transform: uppercase; color: #6dff9a; min-height: 1.4em; text-shadow: 0 0 10px rgb(54 255 122 / .6); }
.hud-log { margin-top: 12px; font-size: .72rem; letter-spacing: .08em; color: rgb(109 255 154 / .6); min-height: 2.6em; line-height: 1.5; }
.skip { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 8; font: 600 .78rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(157 255 180 / .75); background: rgb(0 0 0 / .5); border: 1px solid rgb(84 255 143 / .35); border-radius: 6px; padding: 10px 16px; cursor: pointer; transition: color .2s, border-color .2s; }
.skip:hover, .skip:focus-visible { color: #fff; border-color: #54ff8f; outline: none; }
.skip[hidden] { display: none; }
.flash { position: fixed; inset: 0; z-index: 9; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash 1.1s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }

.reveal-wrap { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 84px 20px 40px; overflow-y: auto; }
.reveal-card {
  position: relative; isolation: isolate; width: min(720px, 100%); text-align: center;
  padding: clamp(28px, 6vw, 54px) clamp(20px, 5vw, 48px);
  border-radius: 18px; color: #e6fff0; background: rgb(2 10 6 / .72);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 0 80px -20px rgb(54 255 122 / .35), inset 0 0 0 1px rgb(84 255 143 / .18);
}
.reveal-card::before { content: ""; position: absolute; inset: 0; z-index: -1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, #54ff8f 50deg, #22d3ee 110deg, transparent 170deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) { .reveal-card::before { animation: beam 6s linear infinite; } }
.rc-kicker { font: 600 .72rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: #6dff9a; margin: 0 0 18px; }
.reveal-card h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); margin: 0 0 16px; background: linear-gradient(100deg, #fff 20%, #7dffa8 60%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.rc-email { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 6px 0 22px; }
.rc-email a { font: 700 clamp(1.05rem, 3.6vw, 1.55rem)/1.2 var(--mono); color: #54ff8f; text-decoration: none; border-bottom: 1px solid rgb(84 255 143 / .4); padding-bottom: 3px; text-shadow: 0 0 18px rgb(54 255 122 / .45); word-break: break-all; transition: color .2s, border-color .2s; }
.rc-email a:hover, .rc-email a:focus-visible { color: #fff; border-color: #fff; outline: none; }
.reveal-card .btn-mini { background: rgb(0 20 8 / .7); color: #9dffb4; border-color: rgb(84 255 143 / .4); }
.rc-line { font-size: 1.12rem; line-height: 1.7; color: #d3f7e0; margin: 0 auto 22px; max-width: 34em; }
.rc-line strong { color: #fff; }
.rc-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 24px; padding: 0; list-style: none; }
.rc-tags li { font: 600 .72rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #6dff9a; border: 1px solid rgb(84 255 143 / .3); border-radius: 999px; padding: 8px 12px; background: rgb(0 30 12 / .5); }
.rc-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rc-links a { font: 500 .8rem/1 var(--mono); color: #bfffd2; text-decoration: none; border: 1px solid rgb(84 255 143 / .25); border-radius: 6px; padding: 9px 13px; transition: border-color .2s, color .2s, transform .2s var(--ease); }
.rc-links a:hover { border-color: #54ff8f; color: #fff; transform: translateY(-2px); }
/* JS present: the card starts hidden and is revealed by the sequence. No JS: card shows immediately. */
html.js .reveal-wrap:not(.on) { opacity: 0; visibility: hidden; }
html.js .reveal-wrap.on { opacity: 1; visibility: visible; transition: opacity .8s; }
html:not(.js) .stage, html:not(.js) .skip { display: none; }
@media (prefers-reduced-motion: no-preference) { html.js .reveal-wrap.on .reveal-card { animation: card-pop 1s var(--ease) both; } }
@keyframes card-pop { from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- DASHBOARD HOME ---------- */
.wrap.dash { max-width: 1240px; padding-top: 26px; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.panel {
  --mx: 50%; --my: -90%;
  grid-column: span 12; position: relative; min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px 22px;
  background:
    radial-gradient(340px circle at var(--mx) var(--my), color-mix(in oklch, var(--accent) 11%, transparent), transparent 70%),
    color-mix(in srgb, var(--card) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 26px 50px -38px var(--glow), 0 1px 2px rgb(0 0 0 / .04);
  transition: border-color .3s, box-shadow .4s var(--ease);
}
.panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--accent), var(--accent-2), transparent 80%); opacity: .85; }
.panel:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: 0 30px 60px -34px var(--glow); }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
@media (max-width: 1020px) { .s3, .s4, .s5, .s6 { grid-column: span 6; } .s7, .s8 { grid-column: span 12; } }
@media (max-width: 640px) { .grid { gap: 12px; } .s3, .s4, .s5, .s6 { grid-column: span 12; } .panel { padding: 18px 16px 20px; } }

.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; font: 600 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.panel-h .t { display: inline-flex; align-items: center; gap: 8px; }
.panel-h .t::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.panel-h .tag { font-size: .64rem; letter-spacing: .12em; padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--muted); }
.panel-h .tag.live { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.panel-h .tag.live::before { content: "● "; }
.panel h3 { letter-spacing: -.01em; }
.panel p { margin: 0 0 14px; } .panel p:last-child { margin-bottom: 0; }

/* top status strip */
.statusbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 16px; font: 500 .76rem/1.4 var(--mono); color: var(--muted); }
.statusbar .crumb b { color: var(--fg); font-weight: 600; } .statusbar .crumb i { color: var(--accent); font-style: normal; }
.statusbar .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: color-mix(in srgb, var(--card) 80%, transparent); }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; }
@media (prefers-reduced-motion: no-preference) { .pill .dot { animation: pulse-dot 2.2s ease-out infinite; } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* profile panel */
.profile { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; padding: 30px 30px; }
.profile::after { content: ""; position: absolute; inset: 0; z-index: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0deg, var(--accent) 40deg, var(--accent-2) 80deg, transparent 130deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@media (prefers-reduced-motion: no-preference) { .profile::after { animation: beam 9s linear infinite; } }
.profile > * { position: relative; z-index: 1; }
.profile h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); }

/* availability */
.avail { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.avail .big { font: 800 1.9rem/1 var(--mono); letter-spacing: -.01em; color: var(--ok); display: flex; align-items: center; gap: 12px; }
.avail .big .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 14px var(--ok); }
.avail ul { list-style: none; margin: 0; padding: 0; font: 500 .84rem/1.5 var(--mono); color: var(--muted); }
.avail li { padding: 7px 0; border-top: 1px dashed var(--border-strong); } .avail li b { color: var(--fg); font-weight: 600; }
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 700 .9rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; color: #04121a; padding: 14px 18px; border-radius: 9px; background: linear-gradient(100deg, var(--accent), var(--accent-3) 55%, var(--accent-2)); box-shadow: 0 14px 30px -14px var(--glow); transition: transform .3s var(--ease), box-shadow .3s; }
html:not([data-theme="dark"]) .btn { color: #fff; }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .btn { color: #04121a; } }
.btn::before { content: ""; position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 50%, transparent 70%); transition: transform .7s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px var(--glow); } .btn:hover::before { transform: translateX(110%); }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* quick commands */
.cmds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-column: span 12; }
@media (max-width: 900px) { .cmds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cmds { grid-template-columns: 1fr; } }
.cmd-card { position: relative; overflow: hidden; display: block; text-decoration: none; color: var(--fg); padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--card) 88%, transparent); transition: transform .35s var(--ease), border-color .25s, box-shadow .35s; }
.cmd-card:hover, .cmd-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 18px 36px -22px var(--glow); outline: none; }
.cmd-card .c { font: 700 1.1rem/1 var(--mono); } .cmd-card .c::before { content: "$ "; color: var(--accent); }
.cmd-card .d { margin: 8px 0 0; font: 400 .8rem/1.4 var(--mono); color: var(--muted); }
.cmd-card .go { position: absolute; right: 14px; top: 14px; font: 700 1rem/1 var(--mono); color: var(--accent); transition: transform .3s var(--ease); }
.cmd-card:hover .go { transform: translateX(4px); }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; grid-column: span 12; }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tile { position: relative; overflow: hidden; padding: 16px 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--card) 90%, transparent); transition: border-color .3s, transform .4s var(--ease); }
.tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile .k { font: 600 .64rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tile .v { margin: 10px 0 6px; font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, var(--fg) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tile .s { font: 400 .74rem/1.4 var(--mono); color: var(--muted); }
.tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(.35); transition: transform .8s var(--ease); }
.tile:hover::after { transform: scaleX(1); }

/* now / lists */
.now { list-style: none; margin: 0; padding: 0; }
.now li { display: grid; grid-template-columns: 1.1rem 1fr; gap: 10px; padding: 11px 0; border-top: 1px dashed var(--border-strong); font-size: .95rem; line-height: 1.5; }
.now li:first-child { border-top: 0; padding-top: 0; }
.now li::before { content: "›"; color: var(--accent); font: 700 1rem/1.4 var(--mono); }
.now b { color: var(--fg); }

/* stepper */
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding: 38px 14px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: .88rem; line-height: 1.5; color: var(--muted); background: color-mix(in srgb, var(--bg-2) 55%, transparent); counter-increment: st; }
.steps li::before { content: "0" counter(st); position: absolute; left: 12px; top: 12px; font: 700 .7rem/1 var(--mono); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 4px; padding: 5px 6px; }
.steps li::after { content: "✓ done"; position: absolute; right: 12px; top: 13px; font: 600 .66rem/1 var(--mono); letter-spacing: .08em; color: var(--ok); }
.steps b { display: block; color: var(--fg); margin-bottom: 3px; font-size: .95rem; }

/* github live bars */
.bars { list-style: none; margin: 0; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 8.5em) 1fr 2.6em; align-items: center; gap: 10px; padding: 5px 0; font: 500 .78rem/1.2 var(--mono); }
.bars .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
.bars .tr { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--border) 80%, transparent); overflow: hidden; }
.bars .fl { display: block; height: 100%; width: var(--w, 0%); border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--glow); transition: width 1.1s var(--ease); }
.bars .vv { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.gh-stats { display: flex; gap: 22px; margin: 0 0 14px; }
.gh-stats div { font: 400 .72rem/1.3 var(--mono); color: var(--muted); } .gh-stats b { display: block; font: 800 1.5rem/1.1 var(--mono); color: var(--fg); font-variant-numeric: tabular-nums; }

/* projects grid inside a panel */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1020px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .proj-grid { grid-template-columns: 1fr; } }
.dash .entity-card::before { display: none; }
.proj-grid .card { margin: 0; padding: 16px 18px; }
.proj-grid .card h3 { font-size: 1rem; } .proj-grid .card p { font-size: .9rem; line-height: 1.55; }

/* skills */
.skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .skill-grid { grid-template-columns: 1fr; } }
.skill { padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-2) 50%, transparent); font-size: .9rem; line-height: 1.55; color: var(--muted); transition: border-color .25s, transform .35s var(--ease); }
.skill:hover { border-color: var(--accent); transform: translateY(-2px); }
.skill h3 { margin: 0 0 6px; font: 700 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

/* timeline */
.tl { list-style: none; margin: 0; padding: 0 0 0 18px; position: relative; }
.tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(var(--accent), var(--accent-2), transparent); }
.tl li { position: relative; padding: 0 0 16px 14px; font-size: .92rem; line-height: 1.5; }
.tl li::before { content: ""; position: absolute; left: -18px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); box-shadow: 0 0 10px var(--glow); }
.tl .y { display: block; font: 700 .72rem/1 var(--mono); letter-spacing: .1em; color: var(--accent); margin-bottom: 4px; }

.dash .links { margin-top: 4px; }
/* greyed-out, non-clickable pill (named but deliberately not linked) */
.links .off { border: 1px dashed var(--border); border-radius: 6px; padding: 9px 16px; font: 500 .85rem/1.2 var(--mono); color: var(--muted); opacity: .55; cursor: default; user-select: none; background: transparent; }
.dash footer { grid-column: span 12; }
.reveal-in { }
@media (prefers-reduced-motion: no-preference) {
  .grid > .panel, .kpis .tile, .cmds .cmd-card { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
}