/* Core variables */
:root{
  --bg: #0b0f17;
  --bg-soft: #101826;
  --text: #e6f1ff;
  --muted: #9fb3c8;
  --accent: #57e389; /* cyber green */
  --accent-2: #4ea1ff;
  --card: #0f1624;
  --border: #1b2740;
  --focus: #fcd34d;
  --shadow: 0 10px 20px rgba(0,0,0,.35);
}

@media (prefers-color-scheme: light){
  html[data-theme="auto"]:root{
    --bg:#f8fafc; --bg-soft:#eef2f7; --text:#0b1220; --muted:#475569;
    --accent:#0ea5e9; --accent-2:#22c55e; --card:#ffffff; --border:#e5e7eb;
  }
}

html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Inter, Arial, sans-serif; line-height:1.5;
}

/* Layout */
.site-header, .site-footer{ display:flex; justify-content:space-between; align-items:center; padding:1rem clamp(1rem, 3vw, 2rem); border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--bg-soft),transparent); position:sticky; top:0; backdrop-filter:saturate(130%) blur(6px); z-index:10}
.site-footer{ position:static; border-top:1px solid var(--border); border-bottom:none; }

.brand{ display:flex; align-items:center; gap:.6rem }
.brand__dot{ width:.75rem; height:.75rem; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%); box-shadow:0 0 12px var(--accent) }

.top-nav{ display:flex; gap:.5rem; flex-wrap:wrap }
.container{ display:grid; gap:1rem; padding:1.2rem; max-width:1100px; margin:0 auto }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem 1.2rem; box-shadow:var(--shadow) }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1rem }
.list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem }

/* Controls */
.btn{ appearance:none; border:1px solid var(--border); background:transparent; color:var(--text); padding:.5rem .8rem; border-radius:12px; cursor:pointer; box-shadow:none; text-decoration:none; font-weight:600 }
.btn:hover{ border-color:var(--accent) }
.input{ width:100%; max-width:420px; padding:.6rem .7rem; border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text) }
.tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem }
.tag{ border:1px solid var(--border); padding:.2rem .5rem; border-radius:999px; font-size:.85rem; user-select:none; cursor:pointer }
.tag[aria-pressed="true"], .tag.active{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent) }

/* Typography */
h1,h2{ line-height:1.2; margin:.2rem 0 .8rem }
h1{ font-size:clamp(1.4rem, 2.5vw, 2rem) }
h2{ font-size:clamp(1.1rem, 2vw, 1.4rem) }
small{ color:var(--muted) }

/* Project Card */
.project{ border:1px solid var(--border); border-radius:14px; padding:.8rem; display:flex; flex-direction:column; gap:.4rem; background:linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, black), var(--card)); }
.project a{ color:var(--accent-2); text-decoration:none }
.project a:hover{ text-decoration:underline }

/* Accessibility */
:focus-visible{ outline:2px dashed var(--focus); outline-offset:3px }
.skip-link{ position:absolute; left:-9999px; top:auto }
.skip-link:focus{ left:1rem; top:1rem; background:var(--bg-soft); padding:.5rem; border-radius:8px }

/* Cyber atmosphere */
.scanlines{ pointer-events:none; position:fixed; inset:0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 3px); mix-blend-mode:overlay; opacity:.25 }

/* Print */
@media print{
  .top-nav, .scanlines, #projectSearch, #projectTags { display:none !important }
  body{ background:white; color:black }
  .card{ page-break-inside:avoid; box-shadow:none; border:1px solid #ddd }
}