/* ====== CSS Variables – Light & Dark ====== */
:root {
  --bg:            #f4f6f8;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --border:        #e5e7eb;
  --text:          #111827;
  --text-muted:    #6b7280;
  --primary:       #2563eb;
  --primary-soft:  rgba(37,99,235,0.08);
  --primary-hover: rgba(37,99,235,0.15);
  --success:       #10b981;
  --shadow:        0 4px 24px rgba(15,35,52,0.08);
  --shadow-hover:  0 12px 32px rgba(15,35,52,0.14);
  --radius:        14px;
}
:root[data-theme="dark"] {
  /* Dark palette with improved contrast for text and surfaces */
  --bg:            #071018; /* page background, very dark */
  --surface:       #0f1722; /* primary surface (cards, header) */
  --surface-2:     #0b1218; /* secondary surfaces (inputs, panels) */
  --border:        #22303a; /* slightly lighter border for separation */
  --text:          #eef6ff; /* brighten main text for legibility */
  --text-muted:    #b7c2cc; /* muted text but readable on dark surfaces */
  --primary:       #58a6ff;
  --primary-soft:  rgba(88,166,255,0.14);
  --primary-hover: rgba(88,166,255,0.28);
  --success:       #3fb950;
  --shadow:        0 4px 24px rgba(0,0,0,0.6);
  --shadow-hover:  0 12px 32px rgba(0,0,0,0.8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #071018;
    --surface: #0f1722;
    --surface-2: #0b1218;
    --border: #22303a;
    --text: #eef6ff;
    --text-muted: #b7c2cc;
    --primary: #58a6ff;
    --primary-soft: rgba(88,166,255,0.14);
    --primary-hover: rgba(88,166,255,0.28);
    --success: #3fb950;
    --shadow: 0 4px 24px rgba(0,0,0,0.6);
    --shadow-hover: 0 12px 32px rgba(0,0,0,0.8);
  }
}
*,*::before,*::after{box-sizing:border-box;}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background-color:var(--bg);color:var(--text);transition:background-color .25s,color .25s;}
.bg-light{background-color:var(--bg)!important;}
.bg-white{background-color:var(--surface)!important;}
.border-bottom{border-color:var(--border)!important;}
.text-muted{color:var(--text-muted)!important;}
.navbar{background-color:var(--surface)!important;border-bottom:1px solid var(--border);}
.navbar-brand{font-weight:700;font-size:1.15rem;color:var(--text)!important;}
.navbar-brand span{color:var(--primary);}
.nav-link{color:var(--text-muted)!important;font-size:.9rem;}
.nav-link:hover,.nav-link.active{color:var(--text)!important;font-weight:600;}
header{background-color:var(--surface);}
.hero-search{border:1.5px solid var(--border);border-radius:999px;padding:.65rem 1.25rem;
  background:var(--surface-2);color:var(--text);font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;}
.hero-search:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);}
.hero-search::placeholder{color:var(--text-muted);}
.nav-tabs-custom{border-bottom:2px solid var(--border);}
.nav-tabs-custom .nav-link{color:var(--text-muted)!important;border:none;
  border-bottom:2px solid transparent;margin-bottom:-2px;padding:.5rem 1rem;
  font-size:.875rem;font-weight:500;background:transparent;}
.nav-tabs-custom .nav-link.active,.nav-tabs-custom .nav-link:hover{
  color:var(--primary)!important;border-bottom-color:var(--primary);}
.card{background-color:var(--surface);border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;}
.card-tool:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);
  background-color:var(--primary-soft);border-color:var(--primary)!important;}
.card-tool{cursor:pointer;text-decoration:none;color:inherit;}
.card-tool .card-title{color:var(--text);font-size:.95rem;font-weight:600;}
.card-tool .card-text{color:var(--text-muted);font-size:.82rem;}
.tool-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:20px;background-color:var(--primary-soft);color:var(--primary);border-radius:10px;}
.sidebar-card{background-color:var(--surface-2);border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;}
.trending-item{font-size:.85rem;color:var(--text);padding:.35rem 0;
  border-bottom:1px solid var(--border);}
.trending-item:last-child{border-bottom:none;}
.trending-rank{font-size:.7rem;font-weight:700;color:var(--text-muted);width:22px;}
.recently-item{display:flex;align-items:center;gap:.65rem;padding:.45rem 0;}
.recently-icon{width:32px;height:32px;border-radius:8px;background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--primary);}
.recently-label{font-size:.82rem;font-weight:600;color:var(--text);}
.recently-meta{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;}
.filter-sidebar{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
.filter-btn{background:var(--primary-soft);color:var(--primary);border:none;
  border-radius:8px;padding:.4rem .75rem;font-size:.82rem;font-weight:600;}
.filter-btn.active{background:var(--primary);color:#fff;}
.filter-btn:hover{background:var(--primary-hover);}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary);}
.form-check-label{font-size:.85rem;color:var(--text);}
.btn-tool{border:1.5px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:8px;font-size:.82rem;font-weight:500;transition:all .15s;}
.btn-tool:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.result-panel{background:linear-gradient(135deg,var(--primary) 0%,#1d4ed8 100%);
  color:#fff;border-radius:var(--radius);}
.result-panel.dark-result{background:linear-gradient(135deg,#1c2333 0%,#161b22 100%);
  border:1px solid var(--border);color:var(--text);}
.form-control,.input-group-text{background-color:var(--surface-2)!important;
  border-color:var(--border)!important;color:var(--text)!important;}
.form-control:focus{box-shadow:0 0 0 3px var(--primary-soft)!important;
  border-color:var(--primary)!important;}
.formula-box{background-color:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:1.25rem;text-align:center;font-family:monospace;
  color:var(--primary);font-size:1.1rem;}
#theme-toggle{border-radius:999px;border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text-muted);padding:.35rem .7rem;
  font-size:.85rem;transition:all .2s;}
#theme-toggle:hover{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);}
footer{background-color:var(--surface)!important;border-top:1px solid var(--border);
  color:var(--text-muted);}
footer a{color:var(--text-muted);text-decoration:none;font-size:.85rem;}
footer a:hover{color:var(--primary);}
footer h6{color:var(--text);text-transform:uppercase;font-size:.75rem;letter-spacing:.08em;}
.breadcrumb-item a{color:var(--text-muted);text-decoration:none;font-size:.85rem;}
.breadcrumb-item.active{color:var(--text-muted);font-size:.85rem;}
.breadcrumb-item+.breadcrumb-item::before{color:var(--border);}
.premium-card{background:var(--primary-soft);border:1.5px solid var(--primary)!important;
  border-radius:var(--radius)!important;padding:1rem;}
.premium-label{font-size:.7rem;font-weight:700;color:var(--primary);
  text-transform:uppercase;letter-spacing:.1em;}
@media(max-width:767.98px){.navbar-brand{font-size:1rem;}header h1{font-size:1.75rem;}}

/* smaller tool icons on very narrow screens */
@media(max-width:575.98px){
  .tool-icon{width:36px;height:36px;font-size:18px;}
}

/* Accessibility & contrast enhancements */
/* Headings */
h1,h2,h3,h4,h5,h6 { color: var(--text); line-height:1.2; }
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }

/* Card text and titles */
.card-title { color: var(--text); font-weight:700; }
.card-text { color: var(--text-muted); }

/* Form controls: stronger contrast for inputs and placeholders */
.form-control { background-color: var(--surface-2); color: var(--text); border-color: var(--border); }
.form-control::placeholder { color: var(--text-muted); opacity: 0.95; }
.input-group-text { color: var(--text-muted); }

/* Buttons and links */
.btn-primary, .filter-btn, .btn-tool { background-color: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .filter-btn:hover, .btn-tool:hover { background-color: var(--primary-hover); color: #fff; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); text-decoration: underline; }

/* Navbar contrast */
.navbar { background-color: var(--surface); }
.nav-link { color: var(--text-muted) !important; }
.nav-link.active, .nav-link:hover { color: var(--text) !important; }

/* Borders and separators */
hr, .border-bottom { border-color: var(--border) !important; }
.breadcrumb-item.active { color: var(--text); }

/* Shadows / highlights */
.card { box-shadow: var(--shadow); }
.card-tool:hover { box-shadow: var(--shadow-hover); }

/* Result panel contrast */
.result-panel { color: #fff; }
.result-panel.dark-result { color: var(--text); }