.btn-outline.btn-share { padding: 6px 8px; font-size: 0.9rem; }
    /* ── Toggle Switch ── */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border);
  transition: 0.3s;
  border-radius: 26px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--accent);
  box-shadow: 0 0 8px var(--glow);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
    :root {
        --bg: #070b14;
        --surface: #0f172a;
        --card: rgba(255, 255, 255, 0.04);
        --glass: rgba(15, 23, 42, 0.82);
        --input: rgba(255, 255, 255, 0.06);
        --border: rgba(255, 255, 255, 0.08);
        --text: #f3f4f6;
        --text2: #94a3b8;
        --muted: #64748b;
        --accent: #8b5cf6;
        --accent2: #a78bfa;
        --glow: rgba(139, 92, 246, 0.3);
        --green: #22c55e;
        --greenBg: rgba(34, 197, 94, 0.12);
        --orange: #f59e0b;
        --red: #ef4444;
        --yellow: #facc15;
        --yellowBg: rgba(250, 204, 21, 0.15);
        --cyan: #06b6d4;
        --shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
        --radius: 14px;
        --trans: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
        --sidebar-w: 260px;
        --topbar-h: 64px;
        color-scheme: dark;
    }
    [data-theme="light"] {
        --bg: #f8fafc;
        --surface: #fff;
        --card: #032063;
        --glass: rgba(255, 255, 255, 0.88);
        --input: #f1f5f9;
        --border: #e2e8f0;
        --text: #0f172a;
        --text2: #475569;
        --muted: #94a3b8;
        --accent: #7c3aed;
        --shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
        color-scheme: light;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { font-size:15px; scroll-behavior:smooth; }
    body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; transition:background var(--trans), color var(--trans); -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5; }
    ::-webkit-scrollbar { width:5px; height:5px; }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
    ::-webkit-scrollbar-track { background:transparent; }

    @keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
    @keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
    @keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
    @keyframes bounce { 0%,80%,100% { transform:scale(0); opacity:0.4; } 40% { transform:scale(1); opacity:1; } }
    @keyframes springIn { 0% { transform:translateX(120%) scale(0.8); opacity:0; } 60% { transform:translateX(-5%) scale(1.05); } 100% { transform:translateX(0) scale(1); opacity:1; } }
    @keyframes ripple { 0% { inset:-2px; opacity:0.7; } 100% { inset:-8px; opacity:0; } }
    @keyframes fadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @keyframes float { 0%,100% { transform:translate(0,0); } 50% { transform:translate(15px,15px); } }
    @keyframes aurora { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
    @keyframes countUp { from { opacity:0; transform:scale(0.8); } to { opacity:1; transform:scale(1); } }

    .animate-fade-in-up { animation: fadeInUp 0.4s ease both; }
    .badge-pending { background: var(--yellowBg); color: var(--yellow); animation: pulse 1.1s infinite; position: relative; }
    .badge-pending::after { content:''; position:absolute; inset:-2px; border-radius:20px; border:2px solid var(--yellow); opacity:0; animation: ripple 1.2s infinite; }
    .skeleton { background: linear-gradient(90deg, var(--input) 25%, rgba(255,255,255,0.03) 50%, var(--input) 75%); background-size:200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius:8px; height:40px; width:200px; }
    .loading-dots { display:flex; gap:6px; align-items:center; }
    .loading-dots span { width:8px; height:8px; border-radius:50%; background:var(--accent); animation: bounce 1.4s infinite ease-in-out both; }
    .loading-dots span:nth-child(1) { animation-delay:-0.32s; } .loading-dots span:nth-child(2) { animation-delay:-0.16s; }
    .toast { position:fixed; top:20px; right:20px; z-index:300; padding:12px 20px; border-radius:8px; font-weight:600; box-shadow:var(--shadow); animation: springIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275); display:flex; align-items:center; gap:8px; font-size:0.85rem; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
    .toast-success { background:#065f46; color:#d1fae5; border:1px solid #10b981; }
    .toast-error { background:#991b1b; color:#fecaca; border:1px solid #ef4444; }
    .toast-info { background:#1e3a5f; color:#dbeafe; border:1px solid #3b82f6; }
    .stream-text { border-left:2px solid var(--accent); padding-left:10px; font-family:'JetBrains Mono','Fira Code',monospace; font-size:0.85rem; line-height:1.7; }
    .stream-text .cursor { display:inline-block; width:8px; height:16px; background:var(--accent); animation:blink 0.7s infinite; vertical-align:text-bottom; margin-left:1px; }

    /* ── Glow for Description & Prompt boxes ── */
    #agentDesc:focus,
    #agentPrompt:focus {
      border-color: var(--accent);
      box-shadow: 0 0 18px rgba(139, 92, 246, 0.35), 0 0 0 2px var(--accent2);
      outline: none;
    }

    .sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--surface); border-right:1px solid var(--border); z-index:100; display:flex; flex-direction:column; transition:transform 0.3s,box-shadow 0.3s; }
    @media (max-width:1024px) { .sidebar { transform:translateX(-100%); } .sidebar.mobile-open { transform:translateX(0); box-shadow:10px 0 30px rgba(0,0,0,0.5); } }
    .sidebar-brand { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; height:var(--topbar-h); border-bottom:1px solid var(--border); flex-shrink:0; }
    .sidebar-brand .logo-area { display:flex; align-items:center; gap:10px; }
    .sidebar-brand .logo { width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg, #8b5cf6, #06b6d4); display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff; font-weight:700; flex-shrink:0; box-shadow:0 0 20px rgba(139,92,246,0.4); }
    .sidebar-close-btn { display:none; background:none; border:none; color:var(--text2); font-size:1.5rem; cursor:pointer; }
    @media (max-width:1024px) { .sidebar-close-btn { display:block; } }
    .sidebar-nav { flex:1; padding:12px; display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
    .nav-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:8px; cursor:pointer; color:var(--text2); font-weight:500; white-space:nowrap; font-size:0.9rem; transition:all var(--trans); position:relative; }
    .nav-item:hover { background:var(--input); color:var(--text); }
    .nav-item.active { background:var(--accent); color:#fff; box-shadow:0 0 20px var(--glow); }
    .main-area { margin-left:var(--sidebar-w); transition:margin-left 0.3s; min-height:100vh; display:flex; flex-direction:column; }
    @media (max-width:1024px) { .main-area { margin-left:0!important; } }
    .topbar { height:var(--topbar-h); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); position:sticky; top:0; z-index:50; }
    .content { flex:1; padding:24px; overflow-y:auto; position:relative; }
    .content::before { content:''; position:absolute; top:-120px; left:-120px; width:500px; height:500px; background:radial-gradient(circle, rgba(139,92,246,0.12) 0%, transparent 70%); pointer-events:none; animation:float 8s ease-in-out infinite; }
    .panel { display:none; animation:fadeSlide 0.3s; }
    .panel.active { display:block; }
    .card { background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); transition:all 0.3s ease,transform 0.2s ease,box-shadow 0.3s ease; }
    .card:hover { border-color:var(--accent); box-shadow:0 0 25px rgba(139,92,246,0.25),0 15px 35px rgba(0,0,0,0.5); transform:translateY(-2px); }
    .card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
    .stat-value { font-size:2rem; font-weight:800; letter-spacing:-0.02em; animation: countUp 0.5s ease; }
    .btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-weight:600; cursor:pointer; border:none; font-family:var(--font); transition:all var(--trans); font-size:0.9rem; position:relative; overflow:hidden; }
    .btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.18); opacity:0; transition:opacity 0.3s; pointer-events:none; }
    .btn:active::after { opacity:1; transition:0s; } .btn:active { transform:scale(0.97); }
    .btn-primary { background:var(--accent); color:#fff; } .btn-primary:hover { background:var(--accent2); box-shadow:0 0 20px var(--glow); transform:translateY(-1px); }
    .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-outline:hover { border-color:var(--accent); color:var(--accent); }
    .btn-danger { background:var(--red); color:#fff; }
    .btn-sm { padding:6px 12px; font-size:0.8rem; }
    .input-group { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
    .input-group label { font-weight:600; font-size:0.85rem; color:var(--text2); }
    .input-group input,
    .input-group textarea,
    .input-group select {
        background:var(--input);
        border:1px solid var(--border);
        border-radius:8px;
        padding:10px 14px;
        color:var(--text);
        font-family:var(--font);
        outline:none;
        width:100%;
        transition:border var(--trans);
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394a3b8'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }
    .input-group input,
    .input-group textarea {
        background-image: none;
        padding-right: 14px;
    }
    .input-group input:focus,
    .input-group textarea:focus,
    .input-group select:focus {
        border-color:var(--accent);
        box-shadow:0 0 0 3px var(--glow);
    }
        select option {
        background: var(--surface);
        color: var(--text);
    }
    .badge { padding:4px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
    .badge-green { background:var(--greenBg); color:var(--green); }
    .badge-purple { background:rgba(139,92,246,0.15); color:#a78bfa; }
    .badge-orange { background:rgba(245,158,11,0.15); color:var(--orange); }
    .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:200; display:flex; align-items:center; justify-content:center; }
    .modal { background:var(--surface); border-radius:16px; padding:24px; width:90%; max-width:500px; box-shadow:var(--shadow); animation:fadeInUp 0.2s ease; max-height:85vh; overflow-y:auto; border:1px solid var(--border); }
    .mobile-menu-btn { display:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--card); cursor:pointer; font-size:1.2rem; align-items:center; justify-content:center; color:var(--text2); }
    @media (max-width:1024px) { .mobile-menu-btn { display:flex!important; } }
    .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:99; }
    @media (max-width:1024px) { .sidebar-overlay.show { display:block; } }
    .avatar-preview { width:60px; height:60px; border-radius:50%; object-fit:cover; margin-bottom:12px; border:2px solid var(--accent); }
    .file-upload-wrapper { position:relative; overflow:hidden; display:inline-block; }
    .file-upload-wrapper input[type=file] { position:absolute; left:-9999px; }
    .file-upload-trigger { display:flex; align-items:center; gap:6px; }
    .selected-file-name { font-size:0.8rem; color:var(--text2); margin-left:8px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .notif-bell { position:relative; cursor:pointer; font-size:1.2rem; margin-right:8px; }
    .notif-badge { position:absolute; top:-4px; right:-8px; background:var(--red); color:#fff; border-radius:50%; padding:2px 5px; font-size:0.6rem; font-weight:700; display:none; animation:pulse 1.5s infinite; }
    .admin-pending-badge { background:var(--red); color:#fff; border-radius:50%; padding:2px 6px; font-size:0.7rem; margin-left:4px; display:none; animation:pulse 1.5s infinite; }
    .glow-border { position:relative; }
    .glow-border::before { content:''; position:absolute; inset:-1px; border-radius:var(--radius); background:linear-gradient(135deg,var(--accent),var(--cyan),var(--accent)); z-index:-1; opacity:0; transition:opacity 0.3s; }
    .glow-border:hover::before { opacity:1; }
    .aurora-bg { background:linear-gradient(270deg,rgba(139,92,246,0.06),rgba(6,182,212,0.04),rgba(139,92,246,0.06)); background-size:400% 400%; animation:aurora 8s ease infinite; }
    .notif-dropdown { position:absolute; top:100%; right:0; width:360px; max-height:450px; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); z-index:150; display:none; animation:fadeSlide 0.2s ease; }
    .notif-dropdown.show { display:block; }
    #adminStats table { display: block; overflow-x: auto; }
    .notif-item { padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background var(--trans); display:flex; align-items:flex-start; gap:10px; font-size:0.85rem; }
    .notif-item:hover { background:var(--input); }
    .notif-item.unread { background:rgba(139,92,246,0.08); }
    .notif-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:4px; }
    .run-info { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 0.85rem; color: var(--text2); flex-wrap: wrap; }
    
    /* ── Star Rating ── */
    .star-rating { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
    .star-rating .star { font-size: 1.1rem; color: var(--yellow); transition: transform 0.1s; }
    .star-rating .star:hover { transform: scale(1.2); }
    .star-rating .star.empty { color: var(--muted); }
    .avg-rating { font-size: 0.75rem; color: var(--text2); margin-left: 4px; }

    /* ── Help Chat (glassmorphism + responsive) ── */
    #helpChat {
      background: var(--glass) !important;
      backdrop-filter: blur(18px) !important;
      -webkit-backdrop-filter: blur(18px) !important;
      border: 1px solid var(--border) !important;
      border-radius: var(--radius) !important;
      box-shadow: var(--shadow) !important;
    }
    #helpChat input, #helpChat textarea {
      background: var(--input) !important;
      border: 1px solid var(--border) !important;
      color: var(--text) !important;
      font-family: var(--font) !important;
      font-size: 0.85rem !important;
    }
    #helpButton {
      transition: transform 0.2s, box-shadow 0.2s;
    }
    #helpButton:hover {
      transform: scale(1.08);
      box-shadow: 0 0 28px var(--glow);
    }
    #helpMessages .user-msg {
      background: var(--accent);
      color: #fff;
      padding: 10px 14px;
      border-radius: 14px 14px 4px 14px;
      max-width: 80%;
      word-break: break-word;
      font-size: 0.85rem;
      line-height: 1.4;
      align-self: flex-end;
    }
    #helpMessages .bot-msg {
      background: var(--glass);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid var(--border);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 14px 14px 14px 4px;
      max-width: 85%;
      word-break: break-word;
      position: relative;
      padding-left: 36px;
      font-size: 0.85rem;
      line-height: 1.4;
      align-self: flex-start;
    }
        #helpMessages .bot-msg::before {
      content: '';
      position: absolute;
      left: 10px;
      top: 12px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: url('/logo.png') center/cover no-repeat;
      background-color: var(--surface);
      border: 1px solid var(--border);
    }
    #helpMessages .typing {
      display: flex;
      gap: 4px;
      padding: 8px 14px;
      background: var(--glass);
      border-radius: 14px 14px 14px 4px;
      max-width: 60px;
      align-self: flex-start;
    }
    #helpMessages .typing span {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text2);
      animation: bounce 1.4s infinite ease-in-out both;
    }
    #helpMessages .typing span:nth-child(1) { animation-delay: -0.32s; }
    #helpMessages .typing span:nth-child(2) { animation-delay: -0.16s; }
        #helpMessages .bot-msg .cursor {
      display: inline-block; width: 8px; height: 16px; background: var(--accent);
      animation: blink 0.7s infinite; vertical-align: text-bottom; margin-left: 2px;
    }

    /* ── Temperature Slider – Premium (ultra‑thin track, rounded box, glowing handle) ── */
    input[type="range"].range-slider,
    #agentTemp.range-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 38px;
      background: var(--input);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0 4px;
      outline: none;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
    }
    input[type="range"].range-slider::-webkit-slider-runnable-track,
    #agentTemp.range-slider::-webkit-slider-runnable-track {
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #06b6d4 0%, #8b5cf6 50%, #f59e0b 100%);
      border-radius: 2px;
      border: none;
      box-shadow: 0 0 6px rgba(139, 92, 246, 0.15);
      margin: auto 0;
    }
    input[type="range"].range-slider::-webkit-slider-thumb,
    #agentTemp.range-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid var(--accent);
      box-shadow: 0 0 10px var(--glow), 0 2px 6px rgba(0,0,0,0.25);
      cursor: pointer;
      transition: all 0.2s;
      margin-top: -7px;
    }
    input[type="range"].range-slider:hover::-webkit-slider-thumb,
    #agentTemp.range-slider:hover::-webkit-slider-thumb {
      transform: scale(1.18);
      border-color: var(--accent2);
      box-shadow: 0 0 18px var(--glow), 0 3px 10px rgba(0,0,0,0.35);
    }
    input[type="range"].range-slider:active::-webkit-slider-thumb,
    #agentTemp.range-slider:active::-webkit-slider-thumb {
      transform: scale(0.95);
    }
    input[type="range"].range-slider::-moz-range-track,
    #agentTemp.range-slider::-moz-range-track {
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #06b6d4 0%, #8b5cf6 50%, #f59e0b 100%);
      border-radius: 2px;
      border: none;
    }
    input[type="range"].range-slider::-moz-range-thumb,
    #agentTemp.range-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid var(--accent);
      box-shadow: 0 0 10px var(--glow), 0 2px 6px rgba(0,0,0,0.25);
      cursor: pointer;
      transition: all 0.2s;
    }
    input[type="range"].range-slider:hover::-moz-range-thumb,
    #agentTemp.range-slider:hover::-moz-range-thumb {
      transform: scale(1.18);
      border-color: var(--accent2);
      box-shadow: 0 0 18px var(--glow), 0 3px 10px rgba(0,0,0,0.35);
    }
    input[type="range"].range-slider:active::-moz-range-thumb,
    #agentTemp.range-slider:active::-moz-range-thumb {
      transform: scale(0.95);
    }

    /* ── Responsive ── */
            @media (max-width: 640px) {
        .topbar { padding: 0 12px; gap: 8px; }
        .content { padding: 12px; }
        .card-grid { grid-template-columns: 1fr; }
        .stat-value { font-size: 1.5rem; }
        .modal { width: 95%; margin: 0 auto; padding: 16px; }
        .input-group input, .input-group textarea, .input-group select { font-size: 16px; }
        .btn { padding: 8px 12px; font-size: 0.85rem; }
        .sidebar { width: 100%; }
        .notif-dropdown { width: 290px; max-width: 90vw; right: 0; }
        .toast { max-width: 90vw; }
        #panel-create div[style*="display:flex;gap:12px"] { flex-wrap: wrap; }
        #recentUsage > div { flex-wrap: wrap; }
        #helpChat {
            width: calc(100vw - 32px) !important;
            right: 16px !important;
            bottom: 90px !important;
        }
        #helpButton {
            width: 48px;
            height: 48px;
            font-size: 20px;
            bottom: 16px;
            right: 16px;
        }
    }

    @media (min-width: 641px) and (max-width: 1024px) {
        .card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    }
    @media (min-width: 1400px) {
        .card-grid { grid-template-columns: repeat(4, 1fr); }
    }
    #pageTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
    #filterPills { display: flex; flex-wrap: wrap; gap: 6px; }
    @media (max-width: 480px) {
        .file-upload-wrapper { display: block; text-align: center; }
        .file-upload-trigger { justify-content: center; }
    }