:root{
    --ink:#3A3A3A;
    --ink-soft:#4A4A4A;
    --bg:#F6F7F9;
    --card:#FFFFFF;
    --border:#E4E7EC;
    --teal:#0C8C8C;
    --teal-soft:#E4F5F5;
    --amber:#E2A83D;
    --amber-soft:#FBF0DA;
    --green:#2E9E5B;
    --green-soft:#E5F5EC;
    --red:#C94F3D;
    --red-soft:#FBEAE7;
    --slate:#6B7280;
    --slate-light:#98A2B3;
    --charcoal:#545454;
    --gray-fill:#C7C7C6;
    --text:#3A3A3A;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);font-family:'Inter',sans-serif;color:var(--ink);}
  .mono{font-family:'IBM Plex Mono',monospace;}
  .app{display:flex;min-height:100vh;}

  /* ---------- Dark mode (scoped to the app AND the login screen) ---------- */
  #appScreen.dark-mode{
    --bg:#14171C;
    --card:#1E2128;
    --border:#2C313C;
    --text:#E7E9EC;
    --slate:#9AA1AC;
    --slate-light:#6B7280;
    --teal-soft:#0F2E2E;
    --amber-soft:#332A16;
    --green-soft:#132A1E;
    --red-soft:#32201D;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
  }
  #loginScreen.dark-mode{ background:#14171C; }
  #loginScreen.dark-mode .login-tagline,
  #loginScreen.dark-mode .login-card h2{ color:#E7E9EC; }
  #loginScreen.dark-mode .login-card .lc-sub,
  #loginScreen.dark-mode .login-field label{ color:#9AA1AC; }
  #loginScreen.dark-mode .login-field input{ background:#1E2128; border-color:#2C313C; color:#E7E9EC; }
  #loginScreen.dark-mode .login-arc{ border-color:#262a32; }
  #loginScreen.dark-mode .login-arc.two{ border-color:#20232a; }
  #loginScreen.dark-mode .login-social a{ border-color:#2C313C; color:#9AA1AC; }
  #loginScreen.dark-mode .login-foot{ color:#6B7280; }

  .login-mode-toggle{position:absolute;top:24px;right:28px;z-index:5;width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;border:1px solid var(--border);color:var(--slate);cursor:pointer;
    transition:border-color 0.2s, color 0.2s;}
  .login-mode-toggle:hover{border-color:var(--charcoal);color:var(--charcoal);}
  .login-mode-toggle svg{width:18px;height:18px;}
  #loginScreen.dark-mode .login-mode-toggle{border-color:#2C313C;color:#E7E9EC;}

  .dark-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;font-size:12.5px;color:var(--slate-light);}

  @keyframes welcomeFade{
    0%{opacity:0;transform:translate(-50%,-50%) scale(0.92);}
    5%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    93%{opacity:1;transform:translate(-50%,-50%) scale(1);}
    100%{opacity:0;transform:translate(-50%,-50%) scale(0.97);}
  }
  #welcomeToast{
    position:fixed;top:50%;left:50%;z-index:200;
    background:var(--card);border:1px solid var(--border);border-radius:16px;
    padding:28px 40px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.18);
    pointer-events:none;display:none;
  }
  #welcomeToast.show{display:block;animation:welcomeFade 10s ease both;}
  #welcomeToast .wt-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;color:var(--text);}

  /* ---------- Action toasts (success/error confirmations) ---------- */
  @keyframes toastSlide{ from{opacity:0;transform:translateY(-12px);} to{opacity:1;transform:translateY(0);} }
  #toastStack{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:340px;}
  .toast{padding:12px 16px;border-radius:10px;font-size:13.5px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,0.15);
    animation:toastSlide 0.25s ease both;display:flex;align-items:center;gap:8px;}
  .toast.success{background:var(--green);color:#fff;}
  .toast.error{background:var(--red);color:#fff;}

  /* ---------- Sticky table headers — opt-in via .table-scroll wrapper, for genuinely long tables ---------- */
  .table-scroll{max-height:480px;overflow-y:auto;border-radius:8px;}
  .table-scroll table{margin:0;}
  .table-scroll th{position:sticky;top:0;background:var(--card);z-index:2;box-shadow:0 1px 0 var(--border);}
  #welcomeToast .wt-sub{font-size:13px;color:var(--slate);margin-top:4px;}
  .dark-toggle-switch{position:relative;width:36px;height:20px;background:rgba(255,255,255,0.15);border-radius:20px;cursor:pointer;flex-shrink:0;transition:background 0.2s;}
  .dark-toggle-switch.on{background:var(--teal);}
  .dark-toggle-switch::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform 0.2s;}
  .dark-toggle-switch.on::after{transform:translateX(16px);}

  /* ---------- Sidebar ---------- */
  .sidebar{width:250px;background:var(--ink);color:#fff;display:flex;flex-direction:column;flex-shrink:0;}
  .brand{padding:22px 20px 14px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:0.2px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .brand span{color:var(--teal);}

  /* ID badge / role switcher — signature element */
  .badge-zone{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .badge-label{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-light);margin-bottom:8px;}
  .badge{background:var(--ink-soft);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px;position:relative;overflow:hidden;}
  .badge::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--role-color, var(--teal));}
  .badge-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;padding-left:8px;}
  .badge-role{font-size:11px;color:var(--slate-light);padding-left:8px;margin-top:2px;}
  select#roleSwitch{width:100%;margin-top:12px;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,0.15);border-radius:6px;padding:8px;font-family:'Inter',sans-serif;font-size:12.5px;}

  .nav{padding:10px 12px;flex:1;}
  .nav-item{padding:10px 12px;border-radius:8px;font-size:13.5px;color:#C7CCD6;margin-bottom:2px;cursor:default;}
  .nav-item.active{background:rgba(255,255,255,0.08);color:#fff;font-weight:500;}
  .nav-foot{padding:16px;font-size:11px;color:var(--slate-light);border-top:1px solid rgba(255,255,255,0.08);}

  /* ---------- Main ---------- */
  .main{flex:1;padding:28px 34px;overflow-x:hidden;}
  .topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px;}
  .title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;}
  .subtitle{color:var(--slate);font-size:13px;margin-top:3px;}
  .tag{display:inline-block;font-size:10.5px;letter-spacing:0.6px;text-transform:uppercase;padding:3px 8px;border-radius:20px;font-weight:600;}
  .tag-teal{background:var(--teal-soft);color:var(--teal);}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:24px;}
  .stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;position:relative;transition:box-shadow 0.15s, border-color 0.15s;}
  .stat-card[onclick]:hover{box-shadow:0 4px 14px rgba(0,0,0,0.08);border-color:#D8DCE3;}
  .stat-caret{position:absolute;top:14px;right:14px;color:var(--slate-light);font-size:13px;}
  .stat-num{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;}
  .stat-label{font-size:12px;color:var(--slate);margin-top:2px;}

  .panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px;}
  .panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .panel-title{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;}

  .filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
  .filter-btn{border:1px solid var(--border);background:#fff;padding:6px 12px;border-radius:20px;font-size:12.5px;cursor:pointer;color:var(--slate);}
  .filter-btn.active{background:var(--ink);color:#fff;border-color:var(--ink);}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  .table-scroll{max-height:520px;overflow-y:auto;border-radius:10px;}

  /* ---------- Kanban board — Client's leads, drag between folders ---------- */
  .kanban-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:14px;padding-right:20px;scrollbar-width:thin;}
  .kanban-board::-webkit-scrollbar{height:10px;}
  .kanban-board::-webkit-scrollbar-track{background:var(--bg);border-radius:20px;}
  .kanban-board::-webkit-scrollbar-thumb{background:var(--slate-light);border-radius:20px;}
  .kanban-board::-webkit-scrollbar-thumb:hover{background:var(--slate);}
  .kanban-column{background:var(--bg);border:1px solid var(--border);border-radius:12px;min-width:208px;max-width:208px;
    flex-shrink:0;display:flex;flex-direction:column;max-height:calc(100vh - 260px);transition:background 0.15s, border-color 0.15s;}
  .kanban-column.drag-over{background:var(--teal-soft);border-color:var(--teal);}
  .kanban-col-head{font-size:12.5px;font-weight:700;padding:12px 14px;border-bottom:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;flex-shrink:0;}
  .kanban-count{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:1px 8px;font-size:11px;color:var(--slate);}
  .kanban-col-body{padding:10px;overflow-y:auto;flex:1;}
  .kanban-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px;
    cursor:grab;transition:box-shadow 0.15s, opacity 0.15s;}
  .kanban-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08);}
  .kanban-card.dragging{opacity:0.4;}
  .kanban-empty{font-size:12px;color:var(--slate-light);text-align:center;padding:16px 8px;border:1px dashed var(--border);border-radius:8px;}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--slate-light);padding:8px 10px;border-bottom:1px solid var(--border);
    position:sticky;top:0;background:var(--card);z-index:2;}
  td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
  tr:last-child td{border-bottom:none;}
  .status-pill{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:600;display:inline-block;}

  /* ---------- Toast notifications ---------- */
  @keyframes toastIn{ from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
  #toastStack{position:fixed;top:20px;right:20px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:340px;}
  .toast{background:var(--card);border:1px solid var(--border);border-left:4px solid var(--teal);border-radius:8px;padding:12px 14px;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);font-size:13px;color:var(--text,var(--ink));animation:toastIn 0.25s ease both;}
  .toast.error{border-left-color:var(--red);}
  .toast.success{border-left-color:var(--green);}

  /* ---------- Confirm modal ---------- */
  #confirmOverlay{position:fixed;inset:0;background:rgba(20,25,35,0.45);display:none;align-items:center;justify-content:center;z-index:250;}
  #confirmOverlay.open{display:flex;}
  .confirm-card{background:#fff;border-radius:14px;padding:24px 26px;max-width:380px;width:90%;box-shadow:0 20px 50px rgba(0,0,0,0.2);}
  .confirm-card h4{font-family:'Space Grotesk',sans-serif;font-size:17px;margin:0 0 8px;}
  .confirm-card p{font-size:13.5px;color:var(--slate);margin:0 0 18px;line-height:1.5;}
  .confirm-actions{display:flex;gap:10px;justify-content:flex-end;}

  /* ---------- Pagination ---------- */
  .pagination{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;color:var(--slate);}
  .pagination-controls{display:flex;gap:6px;align-items:center;}
  .page-btn{border:1px solid var(--border);background:#fff;padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12px;}
  .page-btn:disabled{opacity:0.4;cursor:not-allowed;}
  .page-size-select{border:1px solid var(--border);border-radius:6px;padding:5px 8px;font-size:12px;}
  .st-pending{background:var(--amber-soft);color:#96721F;}
  .st-qualified{background:var(--green-soft);color:var(--green);}
  .st-disqualified{background:var(--red-soft);color:var(--red);}
  .st-duplicate{background:#FFF6CC;color:#8A6E0A;}
  .st-callback{background:#E1EEFC;color:#1D5FA8;}

  .qa-select{font-size:12px;border:1px solid var(--border);border-radius:6px;padding:5px 6px;font-family:'Inter',sans-serif;}
  .qa-select.st-qualified{background:var(--green-soft);color:var(--green);border-color:var(--green);font-weight:600;}
  .qa-select.st-disqualified{background:var(--red-soft);color:var(--red);border-color:var(--red);font-weight:600;}
  .qa-select.st-duplicate{background:#FFF6CC;color:#8A6E0A;border-color:#D4B106;font-weight:600;}
  .qa-select.st-callback{background:#E1EEFC;color:#1D5FA8;border-color:#1D5FA8;font-weight:600;}
  .btn{background:var(--teal);color:#fff;border:none;padding:8px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;}
  .btn:hover{opacity:0.9;}
  .btn-ghost{background:none;border:1px solid var(--border);color:var(--text);}

  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .form-grid label{font-size:12px;color:var(--slate);display:block;margin-bottom:4px;}
  .form-grid input, .form-grid textarea{width:100%;padding:9px 10px;border:1px solid var(--border);border-radius:7px;font-size:13px;font-family:'Inter',sans-serif;}
  .form-grid .full{grid-column:1/-1;}

  .drawer-overlay{position:fixed;inset:0;background:rgba(20,25,35,0.35);display:none;align-items:stretch;justify-content:flex-end;z-index:50;}
  .drawer-overlay.open{display:flex;}
  .drawer{width:520px;max-width:92vw;background:#fff;height:100%;padding:24px;overflow-y:auto;box-shadow:-8px 0 30px rgba(0,0,0,0.12);}
  .drawer .table-scroll-wrap{overflow-x:auto;}
  .drawer h3{font-family:'Space Grotesk',sans-serif;margin:0 0 4px;}
  .drawer .field{margin-bottom:14px;}
  .drawer .field label{font-size:11px;color:var(--slate-light);text-transform:uppercase;letter-spacing:0.5px;}
  .drawer .field div{font-size:14px;margin-top:2px;}
  .drawer textarea{width:100%;min-height:70px;border:1px solid var(--border);border-radius:8px;padding:8px;font-family:'Inter',sans-serif;}
  .close-x{float:right;cursor:pointer;color:var(--slate);font-size:18px;}

  .empty{color:var(--slate-light);font-size:13px;padding:20px 0;text-align:center;}
  .banner{background:var(--amber-soft);border:1px solid #EAD9AE;color:#8A6A24;border-radius:10px;padding:12px 16px;font-size:13.5px;}
  .note{font-size:11px;color:var(--slate-light);margin-top:10px;}

  /* ---------- Submit Lead modal ---------- */
  .modal-overlay{position:fixed;inset:0;background:rgba(20,25,35,0.45);display:none;align-items:flex-start;justify-content:center;z-index:60;overflow-y:auto;padding:40px 20px;}
  .modal-overlay.open{display:flex;}
  .modal-card{background:#fff;border-radius:14px;width:100%;max-width:680px;padding:28px 30px;box-shadow:0 20px 50px rgba(0,0,0,0.2);}
  .modal-card h3{font-family:'Space Grotesk',sans-serif;font-size:19px;margin:0;}
  .repair-grid{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:6px;}
  .repair-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer;}
  .repair-item input{margin:0;}

  /* ---------- Login screen ---------- */
  @keyframes fadeInUp{ from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
  @keyframes arcPulse{ 0%,100%{opacity:0.55;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.035);} }
  @keyframes logoBuild{
    0%{opacity:0;transform:scale(0.4) rotate(-18deg);}
    55%{opacity:1;transform:scale(1.1) rotate(4deg);}
    75%{transform:scale(0.96) rotate(-2deg);}
    100%{opacity:1;transform:scale(1) rotate(0deg);}
  }
  @keyframes ringExpand{
    0%{opacity:0.9;transform:translate(-50%,-50%) scale(0.3);}
    70%{opacity:0.25;}
    100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);}
  }

  #loginScreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:100;overflow:hidden;}
  .login-arc{position:absolute;left:50%;top:50%;width:900px;height:900px;transform:translate(-50%,-50%);
    border:1px solid #E2E2E0;border-radius:50%;animation:arcPulse 7s ease-in-out infinite;}
  .login-arc.two{width:700px;height:700px;border-color:#EAEAE8;animation:arcPulse 7s ease-in-out infinite 1.2s;}
  .login-ring{position:absolute;left:50%;top:170px;width:120px;height:120px;border:2px solid var(--charcoal);border-radius:50%;
    animation:ringExpand 1.4s ease-out both;pointer-events:none;}

  .login-center{position:relative;z-index:2;width:100%;max-width:400px;padding:40px;text-align:center;}
  .login-logo-wrap{display:flex;justify-content:center;margin-bottom:10px;}
  .login-logo-anim{height:88px;width:auto;display:block;animation:logoBuild 0.9s cubic-bezier(.34,1.56,.64,1) both;}
  .login-brand-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--slate);margin-bottom:28px;animation:fadeInUp 0.6s ease both;animation-delay:0.35s;}
  .login-tagline{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:600;line-height:1.3;margin-bottom:28px;color:var(--ink);animation:fadeInUp 0.6s ease both;animation-delay:0.4s;}

  .login-card{width:100%;animation:fadeInUp 0.6s ease both;animation-delay:0.5s;}
  .login-card h2{font-family:'Space Grotesk',sans-serif;font-size:22px;margin:0 0 6px;color:var(--ink);}
  .login-card .lc-sub{color:var(--slate);font-size:13.5px;margin-bottom:26px;}
  .login-field{margin-bottom:16px;text-align:left;}
  .login-field label{font-size:12.5px;color:var(--ink);font-weight:500;display:block;margin-bottom:6px;}
  .login-field input, .login-field select{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;background:#fff;}
  .login-field input:focus, .login-field select:focus{outline:2px solid var(--charcoal);outline-offset:1px;border-color:var(--charcoal);}
  .login-btn{width:100%;background:var(--ink);color:#fff;border:none;padding:12px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;transition:background 0.2s, transform 0.15s;}
  .login-btn:hover{transform:translateY(-1px);}
  .login-btn:active{transform:translateY(0);}
  .login-btn:hover{background:var(--charcoal);}
  .login-foot{margin-top:22px;font-size:12px;color:var(--slate-light);text-align:center;}
  .login-social{display:flex;justify-content:center;gap:14px;margin-top:26px;}
  .login-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);color:var(--slate);transition:border-color 0.2s, color 0.2s;}
  .login-social a:hover{border-color:var(--charcoal);color:var(--charcoal);}
  .login-social svg{width:16px;height:16px;}

  .sidebar-logo{display:flex;align-items:center;gap:9px;padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .notif-bell-wrap{position:relative;margin-left:auto;}
  .notif-bell{position:relative;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    color:#fff;cursor:pointer;background:rgba(255,255,255,0.06);}
  .notif-bell:hover{background:rgba(255,255,255,0.12);}
  .notif-bell svg{width:16px;height:16px;}
  .notif-dot{position:absolute;top:2px;right:2px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--red);
    color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  .notif-panel{position:absolute;top:40px;right:0;width:320px;max-height:380px;overflow-y:auto;background:var(--card);
    border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.25);z-index:60;display:none;}
  .notif-panel.open{display:block;}
  .notif-panel-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--border);}
  .notif-panel-head span{font-weight:600;font-size:13px;color:var(--text);}
  .notif-panel-head button{background:none;border:none;color:var(--teal);font-size:12px;cursor:pointer;}
  .notif-item{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;}
  .notif-item:last-child{border-bottom:none;}
  .notif-item.unread{background:var(--teal-soft);}
  .notif-item-msg{font-size:12.5px;color:var(--text);line-height:1.4;}
  .notif-item-meta{font-size:10.5px;color:var(--slate-light);margin-top:4px;}
  .notif-empty{padding:24px 14px;text-align:center;font-size:12.5px;color:var(--slate-light);}
  .sidebar-logo .logo-chip{background:#fff;border-radius:8px;padding:4px 6px;display:flex;align-items:center;}
  .sidebar-logo .logo-chip img{height:20px;width:auto;display:block;}
  .sidebar-logo-name{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#fff;}
  .sidebar-search{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .sidebar-search input{flex:1;min-width:0;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:8px;
    padding:8px 10px;color:#fff;font-size:12.5px;font-family:'Inter',sans-serif;}
  .sidebar-search input::placeholder{color:#9AA1AC;}
  .sidebar-search input:focus{outline:none;border-color:var(--teal);}
  .sidebar-search button{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:8px;
    width:34px;flex-shrink:0;color:#D8DAE0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
  .sidebar-search button:hover{background:rgba(255,255,255,0.15);}
  .sidebar-search svg{width:15px;height:15px;}

  .logout-btn{background:none;border:none;color:var(--slate-light);font-size:11.5px;cursor:pointer;padding:0;text-decoration:underline;}