:root {
  /* Core colors from your request */
  --bg: #272B34;           /* left side bg #20242B */
  --panel: #272B34;        /* right side bg */
  --panel-2: #2E323B;      /* slightly darker variant of right bg */
  --text: #DCDDDE;         /* text color */
  --muted: #888888;        /* text-muted from Atom theme */
  --accent: #61AFEF;       /* hyperlink */
  --accent-light: #70BDFC; /* text-accent-hover from Atom theme */
  --accent-dark: #4C79CD;  /* active hyperlink */
  --chip: #20242B;         /* specialization dropdown */
  --chip-border: #424958;  /* background-modifier-border from Atom theme */
  --divider: #404754;      /* divider-color-hover from Atom theme */
  --card: #252A32;         /* card background */
  --card-hover: #2D3138;   /* card hover background */
  --clickable-hover: #353B47; /* interactive-hover from Atom theme */
  
  /* New complementary colors */
  --success: #98C379;      /* green from Atom theme */
  --warning: #E5C07B;      /* yellow for warnings */
  --error: #E06C75;        /* red for errors */
  --info: #56B6C2;         /* teal for info */
  
  /* Typography - Standardized hierarchy */
  --font-h1: 44px;         /* Largest - Sidebar name */
  --font-h2: 32px;         /* Section titles */
  --font-h3: 18px;         /* Subsection titles, card titles */
  --font-h4: 16px;         /* Subheadings, tagline, category labels */
  --font-body: 15px;       /* Standard body text, paragraphs */
  --font-small: 14px;      /* Labels, secondary text, cards */
  --font-xs: 13px;         /* Chips, metadata */
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* UI variables */
  --radius: 6px;
  --gap: 24px;
  --shadow: 0 4px 12px rgba(0,0,0,0.3);
  --glow: 0 0 10px rgba(97, 175, 239, 0.15);
  --transition: all 0.2s ease-in-out;
  
  /* Special cases */
  --dropdown-bg: #3B3B3B;  /* specialization dropdown */
  --dropdown-text: #DCDDDE;
}

/* Add this to your existing CSS */
body {
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  overflow-y: auto;   /* Keep vertical scrollbar when needed */
}

.cursor-halo {
  position: fixed;
  width: 180vmax; /* Uses viewport max dimension for responsive size */
  height: 180vmax;
  border-radius: 50%;
  background: radial-gradient(
    circle, 
    rgba(77, 159, 255, 0.02) 0%, 
    rgba(77, 159, 255, 0.008) 30%,
    rgba(77, 159, 255, 0) 70%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform; /* Optimizes animation performance */
}

/* Only show halo on desktop */
@media (min-width: 981px) {
  body:hover .cursor-halo {
    opacity: 0.3; /* Very subtle visibility */
  }

  aside.sidebar {
    position: sticky;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure full viewport height */
  }
  
  .sidebar-content {
    position: relative;
    flex-grow: 1; /* Pushes icons to bottom */
  }
}

* { box-sizing: border-box }
html, body { height: 100% }
html { scroll-padding-top: 16px }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--font-body);
  font-weight: var(--font-weight-normal);
  color:var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* ---- Layout ---- */
.app{
  display:flex;
  min-height:100vh;
  position: relative;
}

/* Left side glow effect */
.app::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(97, 175, 239, 0.3) 25%, rgba(97, 175, 239, 0.3) 75%, transparent 100%);
  box-shadow: 20px 0 40px rgba(97, 175, 239, 0.15), inset -20px 0 40px rgba(97, 175, 239, 0.1);
  pointer-events: none;
  z-index: 10;
}

/* Right side glow effect */
.app::after {
  content: "";
  position: fixed;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, rgba(97, 175, 239, 0.3) 25%, rgba(97, 175, 239, 0.3) 75%, transparent 100%);
  box-shadow: -20px 0 40px rgba(97, 175, 239, 0.15), inset 20px 0 40px rgba(97, 175, 239, 0.1);
  pointer-events: none;
  z-index: 10;
}
aside.sidebar{
  min-width:35%;
  max-width: 520px;
  padding:56px 56px;
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
  overflow:hidden; /* Changed from auto to hidden */
  display: flex;
  flex-direction: column;
}

/* Sidebar content wrapper to manage spacing */
.sidebar-collapsible {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* Important for flex child with overflow */
  overflow: hidden; /* Prevent content overflow */
}

main.content{
  flex:1 1 auto;
  height:100vh;
  overflow-y:auto;
  padding: 72px 48px 56px 48px;
}

/* ---- Sidebar ---- */
h1{
  font-size: var(--font-h1);
  font-weight: var(--font-weight-bold);
  margin:0 0 6px 0;
  letter-spacing:.2px;
  color: var(--text);
}
.title{ 
  color:var(--muted); 
  margin:0 0 12px 0; 
  font-size: var(--font-h4);
  font-weight: var(--font-weight-medium);
}
.tagline{ 
  color:var(--muted); 
  font-style:italic; 
  margin:0 0 22px 0;
  font-size: var(--font-h4);
  font-weight: var(--font-weight-normal);
}
.field { 
  display: flex; /* Changed from grid to flex */
  align-items: center; /* Vertically center items */
  gap: 12px; /* Space between label and select */
  margin: 18px 0 26px 0;
}

.field label { 
  color: var(--muted); 
  font-size: var(--font-small);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.5px;
  white-space: nowrap; /* Prevent label from wrapping */
  margin-bottom: 0; /* Remove any default bottom margin */
}

.select {
  appearance: none;
  width: 100%; /* Still takes remaining width */
  background: var(--chip);
  color: #888888;
  border: 1px solid var(--chip-border);
  padding: 12px 38px 12px 12px;
  border-radius: 6px;
  background-image:
      linear-gradient(45deg, transparent 50%, #888888 50%),
      linear-gradient(135deg, #888888 50%, transparent 50%);
  background-position:
      calc(100% - 22px) 50%,
      calc(100% - 14px) 50%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
  min-width: 150px; /* Ensure select has minimum width */
}

.select:hover:not(:focus) {
  background-color: var(--clickable-hover);
  color: #DCDDDE;
  background-image:
      linear-gradient(45deg, transparent 50%, #DCDDDE 50%),
      linear-gradient(135deg, #DCDDDE 50%, transparent 50%);
}

.select:focus {
  border-color: var(--accent);
  outline: none;
}

.icons { 
  display: flex; 
  gap: 12px; 
  margin-top: auto; /* Push icons to bottom in flexbox */
  padding-top: 24px; /* Reduced from 40px to save space */
  flex-shrink: 0; /* Prevent icons from shrinking */
}

/* Media query for larger screens to ensure proper spacing */
@media (min-width: 981px) {
  .icons {
    /* Ensure minimum distance from dropdown but don't force too much space */
    margin-top: max(24px, auto);
  }
  
  /* Remove the min-height that was causing overflow */
}

@media (min-width: 981px) and (max-height: 800px) {
  .icons {
    margin-bottom: 50px; /* Fixed margin instead of auto on shorter screens */
    gap: 8px; /* Reduce gap to save space */
    padding-top: 16px; /* Reduce padding */
  }
  
  .icon {
    width: 38px; /* Slightly smaller icons */
    height: 38px;
  }
  
  .icon svg {
    width: 18px;
    height: 18px;
  }
  
  /* Compact spacing for shorter screens */
  h1 { font-size: 36px; margin-bottom: 4px; }
  .title { font-size: 16px; margin-bottom: 8px; }
  .tagline { font-size: 14px; margin-bottom: 16px; }
  .field { margin: 12px 0 20px 0; }
}

.icon {
  width: 44px; 
  text-decoration: none;
  color: #888888;
  
  height: 44px; 
  border-radius: 6px;
  display: grid; 
  place-items: center;
  background: var(--chip);
  border: 1px solid var(--chip-border);
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

.icon svg {
  width: 22px;
  height: 22px;
  color: #888888;
  transition: color 0.2s ease;
}

.icon:hover {
  background-color: var(--clickable-hover);
  color: #DCDDDE;
}

.icon:hover svg {
  color: #DCDDDE;
}

.icon:focus {
  border-color: var(--accent);
  outline: none;
}

/* ---- Content / Sections ---- */
section{ 
  margin:0 0 56px 0;
  position: relative;
}

.section-title{
  font-size: var(--font-h2);
  font-weight: var(--font-weight-bold);
  margin:0 0 20px 0;
  line-height:1.15;
  color: var(--text);
}

.muted{ color:var(--muted) }

.split-group{ display:grid; gap:16px; margin-bottom:20px }
.split-group h3{
  margin:0; 
  font-size: var(--font-h4);
  font-weight: var(--font-weight-medium);
  color:var(--muted);
  letter-spacing: 0.5px;
}
.tags{ display:flex; flex-wrap:wrap; gap:10px }
.chip{
  text-decoration: none;
  color: #888888;
  display:inline-flex; 
  align-items:center; 
  gap:8px;
  padding:8px 14px; 
  border-radius:6px;
  background:var(--chip);
  border:1px solid var(--chip-border);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-normal);
  box-shadow: var(--shadow);
  white-space:nowrap;
  transition: all 0.2s ease;
}

#projects .chip {
    box-shadow: none;
  }


.chip:hover {
  background-color: var(--clickable-hover);
  color: #DCDDDE;
}

.chip::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(61%) sepia(70%) saturate(86%) hue-rotate(181deg) brightness(107%);
}

.chip[data-kind="domain"]::before{ background-image: url('x_assets/domain.svg') }
.chip[data-kind="concept"]::before{ background-image: url('x_assets/concept.svg') }
.chip[data-kind="tool"]::before{ background-image: url('x_assets/tool.svg') }

ul.clean{ 
  padding-left:20px; 
  margin:0; 
  display:grid; 
  gap:12px 
}
.card-grid{
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) );
  gap:20px;
}
.card{
  background:var(--card);
  border:1px solid var(--chip-border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  display:flex; 
  flex-direction:column; 
  gap:12px;
  transition: all 0.2s ease;
}

.card:hover {
  background-color: var(--card-hover);
}
.thumb{
  border-radius:6px;
  background: linear-gradient(135deg, #0f1a34 0%, #1a2a4a 100%);
  aspect-ratio: 16 / 9;
  display:grid; 
  place-items:center;
  font-size:12px; 
  color:var(--muted);
  border:1px solid var(--chip-border);
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb a {
  display: contents;
}
.card h3{ 
  margin:0 0 4px 0; 
  font-size: var(--font-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}
.card p{ 
  margin:0 0 6px 0; 
  color:var(--muted); 
  font-size: var(--font-small);
  font-weight: var(--font-weight-normal);
  line-height:1.5;
}
.card .tags{ margin-top:0; padding-top: 0; }

/* Rainbow animated highlight */
.highlight {
  background: linear-gradient(
    90deg,
    #ff6b6b,
    #feca57,
    #48dbfb,
    #1dd1a1,
    #5f27cd,
    #ff6b6b
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  animation: rainbowMove 8s linear infinite;
}

/* Mobile styles 980px and below */
@media (max-width: 980px){
  body {
    background: var(--bg);
  }

  aside.sidebar{
    position:static;
    width:100%;
    max-width:none;
    padding:24px 16px;
    height:auto;
    display: block; /* Reset flex on mobile */
  }

  .sidebar-collapsible {
    display: block; /* Reset flex on mobile */
  }

  .icons {
    position: static;
    margin-top: 40px;
    margin-bottom: 24px;
    padding-top: 0; /* Reset padding-top on mobile */
  }

  main.content{
    height:auto;
    overflow:visible;
    padding:24px 16px 64px 16px;
  }

  .app{ display:block }
}

/* collapsible sidebar on very small screens */
.sidebar-top{
  display:none;
  margin:12px 0 6px 0;
}

.toggle{
  display:none;
  border:1px solid var(--chip-border);
  background:var(--chip);
  color:#888888;
  padding:10px 14px;
  border-radius:6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle:hover {
  background-color: #252A32;
  color: #DCDDDE;
}

@media (max-width: 640px){
  .sidebar-top{ 
    display:flex; 
    gap:10px; 
    align-items:center; 
    justify-content:space-between 
  }

  .toggle{ display:inline-block }
  .sidebar-collapsible[aria-hidden="true"]{ display:none }
}

/* motion respect */
@media (prefers-reduced-motion: no-preference){
  .card, .icon, .chip, .toggle, .select {
    transition: all 0.2s ease;
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--panel);
}
::-webkit-scrollbar-thumb {
  background: var(--divider);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}