:root {
  --bg: #f6f8fb;
  --bg-soft: #ffffff;
  --card: #ffffff;
  --text: #101827;
  --text-muted: #64748b;
  --muted: #667085;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --green: #009b4d;
  --green-dark: #006b38;
  --orange: #ff8a00;

  --header: #ffffff;
  --input-bg: #f9fafb;
  --icon-bg: #f3f4f6;
  --icon-hover: #e5e7eb;

  --tab-bg: #eef2ff;
  --tab-text: #1e3a8a;
  --tab-active: #2563eb;
  --tab-active-text: #ffffff;

  --result-bg: #f3f4f6;
  --result-hover: #e5e7eb;

  --shadow-soft:
    0 4px 10px rgba(15,23,42,.06),
    0 12px 30px rgba(15,23,42,.08);

  --shadow:
    0 10px 25px rgba(15,23,42,.10),
    0 20px 50px rgba(15,23,42,.12);

  --shadow-heavy:
    0 12px 24px rgba(15,23,42,.12),
    0 30px 60px rgba(15,23,42,.16);
    
    
    --btn-bg: rgba(37,99,235,.08);
  --btn-hover: rgba(37,99,235,.15);
  --btn-active: rgba(37,99,235,.22);

  --btn-border: rgba(37,99,235,.15);
  
  --success:#16a34a;
  --warning:#f59e0b;
  --danger:#dc2626;
  
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  
  --primary:#2563eb;
  --primary-hover:#1d4ed8;
  --primary-soft:rgba(37,99,235,.12);
}

body.dark {
  --bg: #08111f;
  --bg-soft: #111827;
  --card: #0f1b2d;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --muted: #aab4c2;
  --border: #243041;
  --border-strong: #334155;

  --header: #0b1626;
  --input-bg: #132033;
  --icon-bg: #132033;
  --icon-hover: #1a2b44;

  --tab-bg: #1f2937;
  --tab-text: #cbd5e1;
  --tab-active: #2563eb;
  --tab-active-text: #ffffff;

  --result-bg: #1f2937;
  --result-hover: #263244;

   --shadow-soft:
    0 4px 12px rgba(0,0,0,.25),
    0 8px 20px rgba(0,0,0,.20);

  --shadow:
    0 10px 30px rgba(0,0,0,.40),
    0 20px 50px rgba(0,0,0,.35);

  --shadow-heavy:
    0 15px 35px rgba(0,0,0,.55),
    0 30px 70px rgba(0,0,0,.45);
    
  --btn-bg: rgba(255,255,255,.06);
  --btn-hover: rgba(255,255,255,.12);
  --btn-active: rgba(255,255,255,.18);

  --btn-border: rgba(255,255,255,.08); 
  
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
  --surface:#111827;
  --surface-2:#172033;
  --surface-3:#1e293b;
  
   --primary:#3b82f6;
   --primary-hover:#60a5fa;
   --primary-soft:rgba(59,130,246,.18); 
}

* {
  box-sizing: border-box;
}

html,
body{
  width:100%;
  max-width:100%;
  min-height:100%;
  margin:0;

  
  background:var(--bg);
}

body{
  display:flex;
  flex-direction:column;
}
main{
    flex:1;
    width:100%;
    background:var(--bg);
    color:var(--text);
    border:1px solid var(--bg-soft);
  
    
}

.mainContainer{
   width:100%;
  max-width:900px;
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  overflow:visible;
 
}

.sidebars{
  position:sticky;
  top:170px; /* better than 3% */
  width:250px;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
  background:var(--bg);
  padding:10px;
  box-shadow:var(--shadow);
  border-radius:10px;
}

    .mainContent{
  flex:1;
  min-width:0;
  width:100%;
  
}
   
 

a {
  color: inherit;
  text-decoration: none;
}

/* Prevent page scroll when sidebar opens */
body.sidebar-open {
  overflow: hidden;
}

.closeSidebar{
    display:none;
}

/* MOBILE */
@media (max-width: 768px) {

  .mainContainer{
    width:100%;
    overflow:hidden;
  }

  .sidebars{
    position:fixed;
    left:-100%;
    width:82%;
    max-width:320px;
    top:70px;
  height:calc(100dvh - 70px);
    z-index:99999;
    overflow-y:auto;
    overflow-x:hidden;
    transition:left .3s ease;
    font-size:18px;
    
  }

  .sidebars.show{
    left: 0;
  }

  .mainContent{
      
    width:100%;
    min-width:0;
   
  }

  /* Optional dark overlay */
  .sidebars::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:-1;
    opacity:0;
    pointer-events:none;
    transition:.3s;
  }

  .sidebars.show::before{
    opacity:1;
    pointer-events:auto;
  }
  
  
  /* Close button */
  .closeSidebar{
    position:absolute;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:none;
    border-radius:12px;
    background:var(--icon-bg);
    color:var(--text);
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .closeSidebar:hover{
    background:var(--tab-bg);
  }
  
}