:root {
      --bg-body-rgb: 248, 249, 250;
      --bg-card-rgb: 255, 255, 255;
      --bg-card: #ffffff;
      --text-primary: #1e293b;
      --text-secondary: #64748b;
      --primary: #6366f1;
      --primary-hover: #4f46e5;
      --border: #e2e8f0;
      --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
      --font-main: 'Plus Jakarta Sans', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
  }
  
  [data-theme="dark"] {
      --bg-body: #0f172a;
      --bg-body-rgb: 15, 23, 42;
      --bg-card: #1e293b;
      --bg-card-rgb: 30, 41, 59;
      --text-primary: #f8fafc;
      --text-secondary: #94a3b8;
      --primary: #818cf8;
      --primary-hover: #6366f1;
      --border: #334155;
  }
  
  * { box-sizing: border-box; margin: 0; padding: 0; }
  
  body {
      font-family: var(--font-main);
      background: var(--bg-body);
      color: var(--text-primary);
      min-height: 100vh;
  }
  
  .app-container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
  }
  
  /* Header */
  .top-bar {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(var(--bg-body-rgb), 0.95);
      background: var(--bg-body);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
  }
  
  .logo {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary);
      display: flex;
      align-items: center;
      gap: 12px;
  }
  
  .actions {
      display: flex;
      gap: 12px;
  }
  
  .icon-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 18px;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: background 0.2s;
  }
  
  .icon-btn:hover {
      background: var(--border);
      color: var(--text-primary);
  }
  
  /* Main Content */
  .main-content {
      flex: 1;
      display: flex;
      flex-direction: column;
  }
  
  .content-area {
      padding-bottom: 40px;
  }
  
  /* Search Hero (Spotlight Style) */
  .search-hero {
      /* Removed sticky hero, now in header */
      display: none; 
  }
  
  .admin-dashboard-fixed {
      position: sticky;
      top: 80px; /* Below top-bar */
      z-index: 90;
      background: rgba(var(--bg-body-rgb), 0.95); /* Fix transparency issue */
      backdrop-filter: blur(8px);
      padding: 20px 0;
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
  }
  
  .search-input-wrapper {
      position: relative;
      max-width: 600px;
      margin: 0 auto;
  }
  
  .search-input {
      width: 100%;
      padding: 20px 24px 20px 54px;
      font-size: 18px;
      border: 2px solid var(--border);
      border-radius: 30px;
      background: var(--bg-card);
      color: var(--text-primary);
      outline: none;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .search-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
      transform: scale(1.01);
  }
  
  .search-icon {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
      font-size: 20px;
  }
  
  /* Cards Grid */
  .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Reduce width slightly */
      gap: 24px;
  }
  
  .card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px;
      transition: transform 0.2s, box-shadow 0.2s;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      height: 100%;
      align-items: center; /* Center Content */
      text-align: center;  /* Center Text */
      position: relative;
  }
  
  .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: var(--primary);
  }
  
  .card-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, var(--primary), #818cf8);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 24px;
      margin-bottom: 16px;
      box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.2);
  }
  
  .card-title {
      font-weight: 600;
      margin-bottom: 8px;
      font-size: 16px;
      width: 100%;
  }
  
  .card-desc {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
      flex: 1;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
      width: 100%;
      position: relative;
  }
  
  /* Tooltip for Description - Overlay style */
  .card-tooltip {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(var(--bg-card-rgb, 255, 255, 255), 0.95);
      /* Fallback if rgb var not set */
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 24px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.6;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow-y: auto;
      pointer-events: none; /* Allow clicking through if needed, but usually we want to see text */
      /* Actually if it covers the card, we might want it to be clickable as the link? */
      /* The parent .card is an <a> tag, so clicking the tooltip will trigger the link. */
  }
  
  .card:hover .card-tooltip {
      opacity: 1;
      pointer-events: auto;
  }
  
  .card-meta {
      margin-top: auto; /* Push to bottom */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: var(--text-secondary);
      gap: 8px;
      width: 100%;
  }
  
  /* Filters */
  .filters {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
      justify-content: center;
      flex-wrap: wrap;
      position: sticky;
      top: 80px; /* Below top-bar */
      z-index: 80;
      background: var(--bg-body);
      padding: 10px 0 20px 0; /* Add background padding to cover content behind */
      border-bottom: 1px solid transparent; /* Optional separator */
      transition: border-color 0.3s;
  }
  
  /* Add a state where filters get a border when stuck? JS IntersectionObserver needed for that. 
     For now just solid background. 
  */
  
  .filter-chip {
      padding: 8px 20px;
      border-radius: 20px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      color: var(--text-secondary);
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
  }
  
  .filter-chip.active, .filter-chip:hover {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
  }
  
  /* Footer */
  .footer {
      border-top: 1px solid var(--border);
      padding: 20px 0;
      color: var(--text-secondary);
      font-size: 14px;
      background: var(--bg-body);
      /* Make footer sticky/fixed if content is short, or always visible? 
         User said "always show", so sticky to bottom of viewport if content is short,
         but usually "sticky footer" means it's pushed down.
         If user means "fixed at bottom overlay", that's different.
         "not scroll with page, always show" usually means position: fixed or sticky.
      */
      position: sticky;
      bottom: 0;
      z-index: 10;
      backdrop-filter: blur(8px); /* Optional nice touch */
      background: rgba(var(--bg-body-rgb), 0.9); /* Need RGB var for transparency or just use solid */
      background: var(--bg-body); /* Fallback */
  }
  
  .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 20px;
  }
  
  .status-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--primary);
  }
  
  .status-dot {
      width: 8px;
      height: 8px;
      background: #22c55e;
      border-radius: 50%;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }
  
  .admin-link {
      color: var(--text-secondary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s;
  }
  
  .admin-link:hover {
      color: var(--primary);
  }
  
  /* Buttons & Modal (Reused) */
  .btn {
      padding: 10px 20px;
      border-radius: 8px;
      border: none;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      font-family: var(--font-main);
  }
  .btn-primary { background: var(--primary); color: white; }
  .btn-primary:hover { background: var(--primary-hover); }
  .btn-secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); }
  .btn-secondary:hover { border-color: var(--primary); }
  .btn-success { background: #10b981; color: white; }
  .btn-success:hover { background: #059669; }
  .btn-warning { background: #f59e0b; color: white; }
  .btn-warning:hover { background: #d97706; }
  .btn-danger { background: #ef4444; color: white; }
  .btn-danger:hover { background: #dc2626; }
  
  .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      backdrop-filter: blur(4px);
  }
  .modal-content {
      background: var(--bg-card);
      padding: 32px;
      border-radius: 24px;
      width: 90%;
      max-width: 500px;
      box-shadow: var(--shadow);
  }
  .form-group { margin-bottom: 20px; }
  .form-group label { display: block; margin-bottom: 8px; font-weight: 500; }
  .form-input {
      width: 100%; padding: 12px; border: 1px solid var(--border);
      border-radius: 8px; background: var(--bg-body); color: var(--text-primary); font-family: inherit;
  }
  .loading-spinner { display: flex; justify-content: center; align-items: center; height: 200px; font-size: 32px; color: var(--primary); }
  
  @media (max-width: 600px) {
      .footer-content {
          flex-direction: column;
          align-items: center;
          text-align: center;
      }
  }