/* =========================================================
   NEON LAYER — loaded last on every page.
   Keeps the dark navy base; swaps the flat blue/violet accents
   for a neon system driven by three CSS variables, so the
   theme switcher (neon.js) can recolor the whole site at once.
========================================================= */

:root {
    --neon:  #2de2ff;
    --neon-2: #a855f7;
    --neon-3: #ff4fd8;
    --neon-ink: #04060f;

    --bg: #070b17;
    --bg2: #0f1628;
    --card: rgba(255,255,255,.045);
    --border: rgba(255,255,255,.085);
    --muted: #94a0b8;
    --text: #eef3ff;

    --accent: var(--neon);
    --accent2: var(--neon-2);

    --glow: color-mix(in srgb, var(--neon) 45%, transparent);
    --glow-soft: color-mix(in srgb, var(--neon) 16%, transparent);
    --line-neon: color-mix(in srgb, var(--neon) 38%, transparent);

    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-neon="magenta"] { --neon:#ff4fd8; --neon-2:#7c5cff; --neon-3:#2de2ff; }
html[data-neon="lime"]    { --neon:#7dff9b; --neon-2:#2de2ff; --neon-3:#a855f7; }
html[data-neon="amber"]   { --neon:#ffb547; --neon-2:#ff4f8b; --neon-3:#7c5cff; }

/* ---------- base ---------- */
html { color-scheme: dark; }
body {
    background:
        radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--neon-2) 20%, transparent), transparent 60%),
        radial-gradient(900px 560px at 108% 8%, color-mix(in srgb, var(--neon) 13%, transparent), transparent 60%),
        radial-gradient(800px 600px at 50% 120%, color-mix(in srgb, var(--neon-3) 10%, transparent), transparent 60%),
        #070b17 !important;
    background-attachment: fixed !important;
}
body::before {               /* faint grid */
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 25%, transparent 78%);
}
body::after {                /* film grain / vignette */
    content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.38) 100%);
}
#neonBg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
::selection { background: color-mix(in srgb, var(--neon) 40%, transparent); color: #fff; }

.container, main { position: relative; }

/* cursor aura */
#neonAura {
    position: fixed; left: 0; top: 0; width: 460px; height: 460px; z-index: -1; pointer-events: none;
    margin: -230px 0 0 -230px; opacity: 0; transition: opacity .4s ease;
    background: radial-gradient(circle, color-mix(in srgb, var(--neon) 13%, transparent), transparent 62%);
    will-change: transform;
}
body.aura-on #neonAura { opacity: 1; }

/* scroll progress */
#neonProgress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 10000;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--neon), var(--neon-2), var(--neon-3));
    box-shadow: 0 0 12px var(--glow);
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--neon) 50%, #1b2238) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--neon), var(--neon-2)) !important; border-radius: 9px; border: 2px solid #070b17; }

:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--neon) !important; outline-offset: 3px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--neon) 18%, transparent);
}

/* page enter / leave */
body { animation: neonIn .55s cubic-bezier(.2,.7,.2,1) both; }
body.leaving { opacity: 0; transform: translateY(-6px); transition: opacity .22s ease, transform .22s ease; }
@keyframes neonIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- sidebar ---------- */
.sidebar {
    background: linear-gradient(180deg, rgba(10,15,30,.78), rgba(8,12,24,.62)) !important;
    border-right: 1px solid transparent !important;
}
.sidebar::after {            /* neon edge */
    content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--neon) 20%, var(--neon-2) 70%, transparent);
    opacity: .55; box-shadow: 0 0 14px var(--glow);
}
.logo h1 {
    font-family: var(--font-display) !important; font-weight: 700; letter-spacing: -.03em; font-size: 1.75rem !important;
    background: linear-gradient(100deg, #fff 10%, var(--neon) 60%, var(--neon-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--neon) 35%, transparent));
}
.logo p, .sidebar p { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; }
.logo p::before { content: "// "; color: var(--neon); opacity: .8; }

nav a {
    position: relative; font-family: var(--font-mono); font-size: .82rem; letter-spacing: .01em;
    color: #b9c3da !important; border: 1px solid transparent; overflow: hidden;
}
nav a::before {
    content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px;
    background: var(--neon); box-shadow: 0 0 10px var(--neon); transform: scaleY(0); transition: transform .25s ease;
}
nav a:hover { color: #fff !important; background: color-mix(in srgb, var(--neon) 8%, transparent) !important; transform: translateX(5px); }
nav a:hover::before { transform: scaleY(1); }
nav a.active {
    color: var(--neon) !important; text-shadow: 0 0 12px var(--glow);
    background: linear-gradient(90deg, color-mix(in srgb, var(--neon) 14%, transparent), color-mix(in srgb, var(--neon-2) 8%, transparent)) !important;
    border-color: var(--line-neon); box-shadow: 0 0 22px -6px var(--glow), inset 0 0 18px -10px var(--glow);
}
nav a.active::before { transform: scaleY(1); }

.sidebar-footer { margin-top: auto; padding-top: 22px; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; }
.sidebar-footer small { display: block; line-height: 1.7; }
.sidebar-footer .kbd-hint { display: inline-flex; margin-top: 10px; }

.menu-toggle {
    background: rgba(8,12,24,.82) !important; border: 1px solid var(--line-neon) !important; color: var(--neon) !important;
    box-shadow: 0 0 18px -6px var(--glow);
}

/* ---------- type ---------- */
h1, h2, h3 { text-wrap: balance; }
.section-header h2 { font-family: "Cormorant Garamond", serif; font-weight: 700; letter-spacing: .005em; text-shadow: 0 0 24px color-mix(in srgb, var(--neon) 22%, transparent); }
.section-header a, .modal-box a { color: var(--neon) !important; font-family: var(--font-mono); font-size: .8rem; }
.section-header a:hover { text-shadow: 0 0 12px var(--glow); }

/* ---------- hero ---------- */
.hero { position: relative; }
.hero::before {              /* halo behind avatar */
    content: ""; position: absolute; top: 4%; left: 50%; width: 420px; height: 420px; max-width: 90vw; transform: translateX(-50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--neon-2) 24%, transparent), transparent 62%);
    filter: blur(24px); z-index: -1; pointer-events: none; animation: haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse { 0%,100% { opacity: .65; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
.avatar {
    background: conic-gradient(from var(--ring, 0deg), var(--neon), var(--neon-2), var(--neon-3), var(--neon)) !important;
    animation: ringSpin 7s linear infinite !important; background-size: auto !important;
    box-shadow: 0 0 34px -2px var(--glow), 0 0 80px -10px color-mix(in srgb, var(--neon-2) 55%, transparent), 0 15px 50px rgba(0,0,0,.5) !important;
    cursor: pointer; transform-style: preserve-3d;
}
@property --ring { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ringSpin { to { --ring: 360deg; } }
.avatar img { border-color: #070b17 !important; }
.avatar.pop { animation: ringSpin 7s linear infinite, avatarPop .5s ease; }
@keyframes avatarPop { 40% { transform: scale(1.12) rotate(-3deg); } }
.hero-name {
    font-family: var(--font-display) !important; font-weight: 700 !important; letter-spacing: -.045em;
    background: linear-gradient(100deg, #fff 0%, #fff 30%, var(--neon) 62%, var(--neon-2) 85%, var(--neon-3));
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: heroShift 9s ease-in-out infinite; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--neon) 30%, transparent));
}
@keyframes heroShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-title {
    font-family: var(--font-mono) !important; font-size: 1rem !important; font-weight: 500 !important; letter-spacing: .28em !important;
    color: var(--neon) !important; text-shadow: 0 0 6px var(--neon), 0 0 22px var(--glow);
    animation: flicker 7s infinite; min-height: 1.6em;
}
.hero-title.typing::after { content: "▍"; margin-left: 2px; animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes flicker { 0%,18%,22%,62%,64%,100% { opacity: 1; } 20%,63% { opacity: .55; } 21% { opacity: .9; } }
.hero-bio { font-family: var(--font-mono); font-size: .95rem !important; }
.hero-footer span {
    font-family: var(--font-mono); font-size: .8rem !important; border-color: var(--line-neon) !important;
    background: color-mix(in srgb, var(--neon) 6%, rgba(255,255,255,.02)) !important;
    box-shadow: 0 0 18px -8px var(--glow); transition: transform .2s ease, box-shadow .2s ease;
}
.hero-footer span:hover { transform: translateY(-2px); box-shadow: 0 0 24px -4px var(--glow); }

/* ---------- glass cards + spotlight border ---------- */
.card, .book-card, .project-card, .calendar-card, .editor-card, .export-item, .modal-box, .password-box {
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02)) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 14px 40px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05) !important;
    position: relative;
}
.fx::before, .fx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.fx::before {
    padding: 1px; z-index: 2;
    background: radial-gradient(380px circle at var(--x, 50%) var(--y, 50%), var(--neon), color-mix(in srgb, var(--neon-2) 70%, transparent) 40%, transparent 70%);
    -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);
}
.fx::after { background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--neon) 9%, transparent), transparent 65%); }
.fx:hover::before, .fx:hover::after { opacity: 1; }
.card:hover, .book-card:hover, .project-card:hover { border-color: var(--border) !important; box-shadow: 0 22px 50px rgba(0,0,0,.45), 0 0 40px -18px var(--glow) !important; }
.tilt { transition: transform .18s ease-out, box-shadow .3s ease, border-color .3s ease !important; will-change: transform; }
.tilt:hover { --ty: -4px; }
/* .reveal / .tilt transforms are injected by neon.js (reveal uses `translate`, tilt uses `transform`) */

/* ---------- stats ---------- */
.stat h3 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem !important; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.stat h1 {
    font-family: var(--font-display); font-size: 2.6rem !important; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--neon) 30%, transparent));
}
.stat span { font-family: var(--font-mono); color: var(--muted); }

/* ---------- books / progress ---------- */
.progress { background: rgba(255,255,255,.07) !important; height: 8px !important; overflow: visible !important; position: relative; }
.progress-fill {
    position: relative; background: linear-gradient(90deg, var(--neon), var(--neon-2)) !important;
    box-shadow: 0 0 14px var(--glow); transform-origin: 0 50%; animation: barGrow 1.2s cubic-bezier(.2,.7,.2,1) both;
}
.progress-fill::after { content: ""; position: absolute; right: -4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px var(--neon); }
@keyframes barGrow { from { transform: scaleX(0); } }
.cover, .book-cover { background: linear-gradient(145deg, color-mix(in srgb, var(--neon-2) 30%, #0b1020), #0b1020) !important; border-color: var(--line-neon) !important; box-shadow: 0 0 24px -8px var(--glow), 8px 10px 24px rgba(0,0,0,.3) !important; }
.book-info h3, .book-card h2 { font-family: "Cormorant Garamond", serif !important; }
.book-card p { color: var(--muted) !important; }
.badge { font-family: var(--font-mono); font-size: .7rem !important; letter-spacing: .04em; border: 1px solid currentColor; box-shadow: 0 0 14px -5px currentColor; background: transparent !important; }
.badge.reading { color: var(--neon); }
.badge.completed { color: #5dffb0; }
.badge.planned { color: #d48bff; }
.note { transition: padding .25s ease, background .25s ease; border-radius: 12px; }
.note:hover { padding-left: 12px; background: color-mix(in srgb, var(--neon) 5%, transparent); }
.note strong { font-family: var(--font-mono); font-size: .78rem; color: var(--neon); font-weight: 500; }

/* ---------- buttons ---------- */
body:not(.is-admin) button, .modal-action, .project-open {
    font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em;
}
body:not(.is-admin) button {
    background: linear-gradient(120deg, var(--neon), var(--neon-2)) !important; color: var(--neon-ink) !important; font-weight: 700 !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--neon) 60%, transparent), 0 8px 26px -10px var(--glow);
    position: relative; overflow: hidden;
}
body:not(.is-admin) button:hover { box-shadow: 0 0 0 1px var(--neon), 0 10px 34px -6px var(--glow) !important; filter: brightness(1.08); }
button .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(0); animation: ripple .6s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
body:not(.is-admin) button:disabled { background: rgba(255,255,255,.06) !important; color: var(--muted) !important; box-shadow: none !important; border: 1px dashed var(--border); }
.back-btn, .secondary-btn, .quiet-btn, .text-btn, .small-action {
    background: transparent !important; color: var(--neon) !important; box-shadow: inset 0 0 0 1px var(--line-neon) !important;
}
.back-btn:hover, .secondary-btn:hover, .quiet-btn:hover, .small-action:hover { background: color-mix(in srgb, var(--neon) 10%, transparent) !important; box-shadow: inset 0 0 0 1px var(--neon), 0 0 22px -6px var(--glow) !important; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- modals ---------- */
.modal { background: rgba(3,5,14,.78) !important; }
.modal-box { border-color: var(--line-neon) !important; animation: popIn .3s cubic-bezier(.2,.8,.2,1); }
.modal-box h2 { font-family: var(--font-display) !important; letter-spacing: -.03em; }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- footer ---------- */
footer { font-family: var(--font-mono); font-size: .74rem !important; }
footer::before { content: ""; display: block; width: 120px; height: 1px; margin: 0 auto 18px; background: linear-gradient(90deg, transparent, var(--neon), transparent); box-shadow: 0 0 12px var(--glow); }

/* ---------- notes ---------- */
.note-card { border-radius: 24px !important; }
.note-card h1, #noteTitle { font-family: var(--font-display) !important; letter-spacing: -.035em; background: linear-gradient(110deg, #fff, var(--neon)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#noteMeta { font-family: var(--font-mono); font-size: .8rem; color: var(--neon) !important; }
.note-card hr { border: 0; height: 1px; background: linear-gradient(90deg, var(--neon), transparent); opacity: .5; }
/* FIX: marked() output was inside a pre-wrap box, which printed every inter-tag newline as a blank gap */
#noteContent { white-space: normal !important; }
#noteContent.plain { white-space: pre-wrap !important; }
#noteContent p { white-space: pre-line; }
#noteContent h2 { font-family: var(--font-display) !important; font-size: 1.55rem !important; letter-spacing: -.02em; padding-left: 14px; border-left: 2px solid var(--neon); }
#noteContent h3 { color: var(--neon); font-family: var(--font-mono); font-size: .95rem; font-weight: 500; }
#noteContent code { font-family: var(--font-mono); background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 6px; }
#noteContent blockquote { border-left: 2px solid var(--neon-2); padding: 4px 16px; color: var(--muted); }
#passwordGate { background: radial-gradient(800px 500px at 50% 0%, color-mix(in srgb, var(--neon-2) 22%, transparent), transparent 70%), #070b17 !important; }
.password-box { box-shadow: 0 0 60px -20px var(--glow), 0 20px 60px rgba(0,0,0,.5) !important; }
#notePassword { font-family: var(--font-mono); letter-spacing: .3em; text-align: center; }
#notePassword:focus { border-color: var(--neon) !important; box-shadow: 0 0 20px -4px var(--glow); }
.password-box.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.lock-icon { filter: drop-shadow(0 0 14px var(--glow)); }

/* ---------- visual placeholder ---------- */
.visual-placeholder { border-color: var(--line-neon) !important; }
.visual-placeholder::before { animation: orbit 14s linear infinite; border-style: dashed !important; }
.visual-placeholder::after { animation: orbit 22s linear infinite reverse; }
.visual-placeholder span { color: var(--neon) !important; text-shadow: 0 0 22px var(--neon) !important; }
@keyframes orbit { to { transform: rotate(360deg); } }
.visual-status { color: var(--neon-3) !important; font-family: var(--font-mono); }

/* ---------- command palette ---------- */
#kbar { position: fixed; inset: 0; z-index: 20000; display: none; align-items: flex-start; justify-content: center; padding: 14vh 16px 16px; background: rgba(3,5,14,.7); backdrop-filter: blur(8px); }
#kbar.open { display: flex; animation: neonIn .2s ease both; }
.kbar-box { width: min(620px, 100%); border-radius: 18px; overflow: hidden; background: rgba(10,15,30,.96); border: 1px solid var(--line-neon); box-shadow: 0 0 70px -18px var(--glow), 0 30px 80px rgba(0,0,0,.6); }
.kbar-input { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--neon); font-family: var(--font-mono); }
.kbar-input input { flex: 1; background: none; border: 0; outline: 0 !important; box-shadow: none !important; color: var(--text); font: inherit; font-size: 1rem; }
.kbar-list { max-height: min(52vh, 380px); overflow-y: auto; padding: 8px; list-style: none; margin: 0; }
.kbar-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; cursor: pointer; color: #cfd8ee; font-size: .9rem; }
.kbar-item i { font-style: normal; width: 26px; text-align: center; color: var(--neon); font-family: var(--font-mono); }
.kbar-item small { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: .7rem; }
.kbar-item.sel { background: linear-gradient(90deg, color-mix(in srgb, var(--neon) 16%, transparent), transparent); box-shadow: inset 2px 0 0 var(--neon); color: #fff; }
.kbar-empty { padding: 22px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; }
.kbar-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-family: var(--font-mono); font-size: .68rem; }
kbd, .kbd { font-family: var(--font-mono); font-size: .68rem; padding: 2px 7px; border: 1px solid var(--line-neon); border-radius: 6px; color: var(--neon); background: color-mix(in srgb, var(--neon) 8%, transparent); }

/* ---------- floating tools + dock ---------- */
#neonTools { position: fixed; right: 16px; bottom: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 10px; }
#neonTools button {
    width: 44px; height: 44px; padding: 0; border-radius: 14px; display: grid; place-items: center; font-size: 1rem;
    background: rgba(8,12,24,.82) !important; color: var(--neon) !important; backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1px var(--line-neon), 0 0 22px -8px var(--glow) !important;
}
#neonTools button:hover { box-shadow: inset 0 0 0 1px var(--neon), 0 0 26px -4px var(--glow) !important; }
#themeBtn span { width: 16px; height: 16px; border-radius: 50%; background: conic-gradient(var(--neon), var(--neon-2), var(--neon-3), var(--neon)); box-shadow: 0 0 12px var(--glow); }

#neonDock {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8900; display: flex; gap: 4px; padding: 6px;
    border-radius: 18px; background: rgba(8,12,24,.8); backdrop-filter: blur(16px); border: 1px solid var(--line-neon);
    box-shadow: 0 0 40px -12px var(--glow), 0 14px 40px rgba(0,0,0,.5); max-width: calc(100vw - 84px);
}
#neonDock a {
    padding: 9px 13px; border-radius: 12px; color: #b9c3da; text-decoration: none; font-family: var(--font-mono); font-size: .76rem;
    transition: background .2s, color .2s, transform .2s; white-space: nowrap;
}
#neonDock a:hover { color: #fff; background: color-mix(in srgb, var(--neon) 12%, transparent); transform: translateY(-2px); }
#neonDock a.active { color: var(--neon); background: color-mix(in srgb, var(--neon) 14%, transparent); text-shadow: 0 0 10px var(--glow); }
body.has-dock { padding-bottom: 86px; }

#toast {
    position: fixed; left: 50%; top: 18px; transform: translate(-50%, -30px); z-index: 30000; opacity: 0; pointer-events: none;
    padding: 10px 18px; border-radius: 12px; background: rgba(8,12,24,.95); border: 1px solid var(--line-neon);
    color: var(--text); font-family: var(--font-mono); font-size: .8rem; box-shadow: 0 0 30px -8px var(--glow);
    transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- small-screen tweaks ---------- */
@media (max-width: 900px) {
    .sidebar { background: rgba(7,11,22,.985) !important; }
    .hero-title { letter-spacing: .14em !important; font-size: .82rem !important; }
    #neonTools { right: 12px; bottom: 12px; }
    #neonDock a { padding: 9px 10px; font-size: .7rem; }
    .stat h1 { font-size: 2rem !important; }
}
@media (hover: none) { #neonAura { display: none; } .tilt { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .hero-title, .hero-name, .hero::before, .avatar, .progress-fill, .visual-placeholder::before, .visual-placeholder::after { animation: none !important; }
    .reveal { opacity: 1; transform: none; }
    body { animation: none; }
    #neonBg, #neonAura { display: none; }
}

/* =========================================================
   PROJECTS PAGE
========================================================= */
.projects-header { border-bottom-color: var(--line-neon) !important; position: relative; }
.projects-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 140px; height: 1px; background: var(--neon); box-shadow: 0 0 14px var(--neon); }
.projects-kicker, .daily-kicker, .calendar-eyebrow, .project-index, .project-card-topline, .projects-header-meta, .modal-project-kicker, .project-tag, .project-card-meta { font-family: var(--font-mono); }
.projects-kicker span, .daily-kicker span { background: var(--neon) !important; box-shadow: 0 0 12px var(--neon) !important; animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 50% { transform: scale(1.5); opacity: .6; } }
.projects-header h1, .page-header h1 { font-family: var(--font-display) !important; font-weight: 700; text-shadow: 0 0 40px color-mix(in srgb, var(--neon) 30%, transparent); }
.projects-header h1 span, .page-header h1 span { color: var(--neon) !important; text-shadow: 0 0 18px var(--neon); }
.projects-header-meta span:first-child { color: var(--neon) !important; }

.proj-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 22px 0 4px; }
.proj-search { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.03); transition: border-color .2s, box-shadow .2s; }
.proj-search:focus-within { border-color: var(--neon); box-shadow: 0 0 24px -8px var(--glow); }
.proj-search i { font-style: normal; color: var(--neon); font-family: var(--font-mono); }
.proj-search input { flex: 1; min-width: 0; padding: 11px 0; background: none; border: 0; outline: 0 !important; box-shadow: none !important; color: var(--text); font-family: var(--font-mono); font-size: .85rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px !important; border-radius: 999px !important; background: transparent !important; color: var(--muted) !important; font-weight: 500 !important; box-shadow: inset 0 0 0 1px var(--border) !important; text-transform: lowercase; }
.chip:hover { color: #fff !important; box-shadow: inset 0 0 0 1px var(--line-neon) !important; }
.chip.on { color: var(--neon) !important; background: color-mix(in srgb, var(--neon) 12%, transparent) !important; box-shadow: inset 0 0 0 1px var(--neon), 0 0 18px -6px var(--glow) !important; }
.chip b { font-weight: 500; opacity: .6; margin-left: 4px; }

.projects-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)) !important; gap: 20px !important; }
.project-card { cursor: pointer; display: flex; flex-direction: column; overflow: hidden; }
.project-card::marker { content: none; }
.project-card-icon {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; color: var(--neon);
    background: color-mix(in srgb, var(--neon) 9%, transparent); border: 1px solid var(--line-neon); box-shadow: 0 0 22px -6px var(--glow), inset 0 0 14px -8px var(--glow); margin-top: 16px;
}
.project-card h2 { font-family: var(--font-display) !important; margin-top: 14px !important; transition: color .2s, text-shadow .2s; }
.project-card:hover h2 { color: var(--neon) !important; text-shadow: 0 0 18px var(--glow); }
.project-card-description { flex: 1; }
.project-index { color: var(--neon) !important; }
.project-repo-label::before { background: #5dffb0 !important; box-shadow: 0 0 8px #5dffb0; }
.project-tag { border-color: var(--line-neon) !important; color: #cfe9ff !important; background: color-mix(in srgb, var(--neon) 6%, transparent) !important; }
.project-card-footer { border-top-color: var(--border) !important; }
.project-open { background: linear-gradient(120deg, color-mix(in srgb, var(--neon) 85%, #000), var(--neon-2)) !important; color: var(--neon-ink) !important; border: 0 !important; font-weight: 700; }
.project-repo-link { font-family: var(--font-mono); color: var(--neon) !important; border-color: var(--line-neon) !important; }
.project-repo-link:hover { background: color-mix(in srgb, var(--neon) 10%, transparent) !important; }
.project-card .arrow-glow { position: absolute; right: 22px; top: 20px; opacity: 0; transform: translate(-6px, 6px); transition: .3s; color: var(--neon); }
.project-card:hover .arrow-glow { opacity: 1; transform: none; }
.proj-add-card { border: 1px dashed var(--line-neon); border-radius: 18px; min-height: 160px; display: grid; place-items: center; text-align: center; padding: 22px; color: var(--muted); font-family: var(--font-mono); font-size: .8rem; line-height: 1.8; }
.proj-add-card b { color: var(--neon); display: block; font-size: 1.6rem; text-shadow: 0 0 18px var(--neon); }

.project-modal-backdrop { background: rgba(3,5,14,.8) !important; }
.project-modal-panel { border-color: var(--line-neon) !important; background: linear-gradient(150deg, #101829, #0a1020 70%, color-mix(in srgb, var(--neon-2) 18%, #0a1020)) !important; box-shadow: 0 0 80px -24px var(--glow), 0 30px 90px rgba(0,0,0,.65) !important; transform: translateY(18px) scale(.97) !important; transition: transform .28s cubic-bezier(.2,.8,.2,1) !important; }
.project-modal.is-open .project-modal-panel { transform: none !important; }
.project-modal-panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), transparent); box-shadow: 0 0 16px var(--neon); }
.modal-project-kicker, .modal-project-section h3 { color: var(--neon) !important; font-family: var(--font-mono); }
.modal-project-section h3::before { content: "› "; }
.modal-project-icon { color: var(--neon) !important; border-color: var(--line-neon) !important; background: color-mix(in srgb, var(--neon) 10%, transparent) !important; box-shadow: 0 0 28px -6px var(--glow); }
.project-modal-panel h2 { font-family: var(--font-display) !important; }
.modal-feature-list li::marker { color: var(--neon); }
.project-commands { position: relative; border-color: var(--line-neon) !important; background: rgba(2,4,12,.7) !important; color: #aef6ff !important; }
.project-commands code::before { content: "$ "; color: var(--neon-3); }
.copy-cmd { position: absolute; top: 8px; right: 8px; padding: 5px 10px !important; font-size: .68rem !important; border-radius: 8px !important; }
.project-note { border-left-color: var(--neon-3) !important; background: color-mix(in srgb, var(--neon-3) 7%, transparent) !important; }
.modal-action { color: var(--neon-ink) !important; background: linear-gradient(120deg, var(--neon), var(--neon-2)) !important; border: 0 !important; }
.modal-action.secondary { color: var(--neon) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line-neon); }
.modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.modal-nav button { padding: 6px 12px !important; font-size: .72rem !important; }
.project-modal-close { background: rgba(255,255,255,.05) !important; color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--border) !important; }
.project-modal-close:hover { background: color-mix(in srgb, var(--neon) 15%, transparent) !important; color: var(--neon) !important; box-shadow: inset 0 0 0 1px var(--neon) !important; }

/* =========================================================
   LIBRARY
========================================================= */
.lib-tools { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
#libraryGrid { gap: 22px !important; }
#libraryGrid .book-card { margin-bottom: 0 !important; border-radius: 22px !important; display: flex; flex-direction: column; }
#libraryGrid .book-card h2 { font-size: 1.55rem !important; line-height: 1.25; }
#libraryGrid .book-card .badge { align-self: flex-start; }
#libraryGrid .book-card .progress { margin-top: auto !important; }
.book-card.hide { display: none; }

/* =========================================================
   DAILY
========================================================= */
.calendar-card { background: linear-gradient(150deg, rgba(14,20,38,.9), rgba(9,14,28,.9)) !important; }
.back-button { font-family: var(--font-mono); font-size: .8rem; }
.back-button span { color: var(--neon) !important; }
.back-button:hover { background: color-mix(in srgb, var(--neon) 8%, transparent) !important; border-color: var(--line-neon) !important; }
.calendar-header h2 { font-family: var(--font-display); }
.calendar-controls button { background: transparent !important; color: var(--neon) !important; box-shadow: inset 0 0 0 1px var(--line-neon) !important; }
.calendar-controls button:hover { background: color-mix(in srgb, var(--neon) 12%, transparent) !important; box-shadow: inset 0 0 0 1px var(--neon), 0 0 18px -6px var(--glow) !important; }
.weekday-row { font-family: var(--font-mono); color: var(--neon) !important; opacity: .75; font-size: .68rem !important; }
.day-cell { font-family: var(--font-mono); }
.day-cell.excellent { background: color-mix(in srgb, #39ff88 22%, #07101a) !important; color: #9dffc6 !important; border-color: #39ff88 !important; box-shadow: 0 0 18px -4px #39ff88, inset 0 0 14px -8px #39ff88; }
.day-cell.good { background: color-mix(in srgb, #ffe14a 18%, #07101a) !important; color: #ffe98a !important; border-color: #ffe14a !important; box-shadow: 0 0 16px -5px #ffe14a, inset 0 0 14px -8px #ffe14a; }
.day-cell.average { background: color-mix(in srgb, var(--neon-2) 24%, #07101a) !important; color: #e4c6ff !important; border-color: var(--neon-2) !important; box-shadow: 0 0 16px -5px var(--neon-2); }
.day-cell.poor { background: color-mix(in srgb, #ff4f6d 18%, #07101a) !important; color: #ffb2c0 !important; border-color: #ff4f6d !important; box-shadow: 0 0 14px -6px #ff4f6d; }
.day-cell.nostudy { background: rgba(255,255,255,.1) !important; color: #dbe3f5 !important; border-color: rgba(255,255,255,.3) !important; }
.day-cell.missing { background: rgba(255,255,255,.04) !important; color: #7f8aa3 !important; border-color: rgba(255,255,255,.07) !important; }
.day-cell.future { background: transparent !important; color: #4c566b !important; border: 1px dashed rgba(255,255,255,.07) !important; }
.day-cell.today { outline: 0 !important; box-shadow: 0 0 0 2px var(--neon), 0 0 24px -2px var(--neon) !important; animation: todayPulse 2.4s ease-in-out infinite; }
@keyframes todayPulse { 50% { box-shadow: 0 0 0 2px var(--neon), 0 0 34px 2px var(--neon); } }
.day-cell.picked { box-shadow: 0 0 0 2px #fff, 0 0 26px -2px var(--neon) !important; transform: translateY(-2px) scale(1.06); z-index: 1; }
.excellent-dot { background: #39ff88 !important; box-shadow: 0 0 8px #39ff88; }
.good-dot { background: #ffe14a !important; box-shadow: 0 0 8px #ffe14a; }
.average-dot { background: var(--neon-2) !important; box-shadow: 0 0 8px var(--neon-2); }
.poor-dot { background: #ff4f6d !important; box-shadow: 0 0 8px #ff4f6d; }
.missing-dot { background: #3a4358 !important; }
.legend-item { font-family: var(--font-mono); cursor: pointer; padding: 3px 8px; border-radius: 8px; transition: background .2s, opacity .2s; }
.legend-item:hover { background: rgba(255,255,255,.05); }
.calendar-grid.filtering .day-cell:not(.match) { opacity: .22; filter: saturate(.4); }
.day-tooltip { border-color: var(--line-neon) !important; background: rgba(8,12,24,.96) !important; box-shadow: 0 0 40px -12px var(--glow), 0 22px 55px rgba(0,0,0,.55) !important; font-family: var(--font-mono); }
#tipTopics strong { color: var(--neon) !important; }
.day-tooltip h3 { color: var(--neon) !important; }

.daily-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin: 0 0 18px; }
.daily-stats .ds { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--border); }
.daily-stats .ds small { display: block; color: var(--muted); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.daily-stats .ds b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 1.9rem; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 20px var(--glow); }
.daily-stats .ds b em { font-style: normal; font-size: .8rem; color: var(--neon); margin-left: 3px; font-family: var(--font-mono); }
@media (max-width: 700px) { .daily-stats { grid-template-columns: repeat(2, 1fr); } .daily-stats .ds b { font-size: 1.5rem; } }

/* =========================================================
   ABOUT
========================================================= */
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 6px; }
.about-tile { display: block; padding: 18px; border-radius: 16px; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: rgba(255,255,255,.03); position: relative; }
.about-tile small { color: var(--neon); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.about-tile strong { display: block; margin: 6px 0 2px; font-family: var(--font-display); font-size: 1.15rem; }
.about-tile span { color: var(--muted); font-size: .82rem; }
.about-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.about-stats span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-neon); font-family: var(--font-mono); font-size: .76rem; color: var(--muted); background: color-mix(in srgb, var(--neon) 5%, transparent); }
.about-stats b { color: var(--neon); font-weight: 600; }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.about-lead { font-size: 1.08rem; line-height: 1.9; color: #d6def2; }
@media (max-width: 700px) { .about-grid { grid-template-columns: 1fr; } }

/* =========================================================
   ADMIN (light touch: it has its own layout)
========================================================= */
.nav-btn { font-family: var(--font-mono); }
.nav-btn.active { color: var(--neon) !important; border-color: var(--line-neon) !important; box-shadow: 0 0 20px -8px var(--glow) !important; background: color-mix(in srgb, var(--neon) 10%, transparent) !important; }
.site-link { color: var(--neon) !important; font-family: var(--font-mono); }
input:focus, select:focus, textarea:focus { border-color: var(--neon) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--neon) 15%, transparent) !important; outline: none !important; }
.panel.active { animation: neonIn .4s ease both; }
.tag-list-input { display: flex; gap: 8px; }

/* ---------- shared fixes ---------- */
[hidden] { display: none !important; }
.hero.compact { min-height: auto; padding: 34px 20px 10px; margin-bottom: 34px; }
.hero.compact .hero-name { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.hero.compact::before { top: -30%; }
.lib-tools { margin: 0 0 30px; }
.lib-empty { text-align: center; padding: 40px; color: var(--muted); font-family: var(--font-mono); }
.kbar-input input:focus-visible, .proj-search input:focus-visible { outline: 0 !important; box-shadow: none !important; }
.day-cell { box-shadow: none; background-image: none !important; }
.day-cell.missing, .day-cell.future, .day-cell.nostudy { box-shadow: none !important; }
.day-cell:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.25); }
body { display: flow-root; }