@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root{color-scheme:light dark;--bg:#f5f7fb;--fg:#0b1f3a;--fg-2:#2f3b4d;--accent:#0ea5e9;--accent-2:#3b82f6;--muted:#6b7280;--border:#e5e7eb;--success:#16a34a;--danger:#dc2626;--warning:#f59e0b;--nav-h:56px;--container-p:1rem;--content-pr:.75rem;--surface:#ffffff}
html,body{height:100%}
body{background:var(--bg);color:var(--fg-2);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
.navbar{border-bottom:1px solid var(--border);background:var(--surface);min-height:var(--nav-h)}
.navbar-brand{display:flex;align-items:center;gap:.5rem;color:var(--fg);font-weight:700}
.navbar-brand:hover{color:var(--fg)}
.navbar .nav-link{color:var(--fg-2)}
.navbar .nav-link:hover{color:var(--fg)}
.navbar .nav-link.active{color:var(--fg);font-weight:700}
@media (max-width: 991.98px){
  .navbar .container-fluid{justify-content:center;position:relative}
  .navbar .container-fluid .btn[data-bs-toggle="offcanvas"]{position:absolute;right:1rem;top:50%;transform:translateY(-50%)}
}
.brand-title{letter-spacing:.2px}
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-outline-primary{color:var(--accent);border-color:var(--accent)}
.btn-outline-primary:hover{background:var(--accent);color:#fff}
.hero{background:transparent}
.hero .container{padding-top:var(--container-p);padding-bottom:var(--container-p);margin-left:var(--content-pr);margin-right:var(--content-pr);max-width:calc(100% - (2 * var(--content-pr)));background:var(--surface);border:1px solid var(--border);border-radius:.5rem}
.hero h1{color:var(--fg)}
.card{border-color:var(--border);background:var(--surface)}
.badge{font-weight:600}
.footer{border-top:1px solid var(--border);background:var(--surface);color:var(--muted)}
.strength-indicator{height:.5rem;border-radius:.25rem;background:var(--border)}
.strength-indicator>span{display:block;height:100%;border-radius:.25rem}
.valid{color:var(--success)}
.invalid{color:var(--danger)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.section{padding:2rem 0}
main.section{padding-top:var(--container-p)}
pre.code{background:#0b1f3a;color:#e5e7eb;padding:1rem;border-radius:.5rem;overflow:auto}
.sidebar{background:var(--surface);border-right:1px solid var(--border)}
.offcanvas{background:var(--surface);color:var(--fg-2);border-right:1px solid var(--border)}
.offcanvas a{text-decoration:none}
.offcanvas a:hover{text-decoration:none}
.offcanvas .top-links{margin:0;padding:0}
.offcanvas .top-links li{margin-bottom:.5rem}
.offcanvas .top-links li:last-child{margin-bottom:0}
.offcanvas .top-links li a{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.5rem;background:var(--surface)}
.offcanvas .top-links li a:hover{border-color:var(--accent)}
.offcanvas .top-links a{color:var(--fg-2)}
.offcanvas .top-links a:hover{color:var(--fg)}
.sidebar a{text-decoration:none}
.sidebar a:hover{text-decoration:none}
.cat-icon{display:inline-block;width:1.2rem;text-align:center;margin-right:.375rem}
.tool-icon{display:inline-block;width:1rem;text-align:center;margin-right:.375rem}
 
.tool-page .section .container{max-width:100%;padding-left:var(--content-pr);padding-right:var(--content-pr)}
.tool-page .section .container .card{width:100%}
.tool-page .section .row .col-lg-8{flex:0 0 100%;max-width:100%}
 
.tool-page .section .row{--bs-gutter-x:1rem}
.tool-page .section{padding:1rem 0}
main.section,.sidebar{min-height:calc(100vh - var(--nav-h))}
.hero .container{padding-right:var(--content-pr);padding-left:var(--content-pr)}
.hero .row{--bs-gutter-x:0}
.filter-card{min-height:var(--nav-h)}

@media (prefers-color-scheme: dark){
  :root{--bg:#0b1220;--surface:#111827;--fg:#e5e7eb;--fg-2:#d1d5db;--muted:#94a3b8;--border:#334155}
  body{background:var(--bg);color:var(--fg-2)}
  h1,h2,h3,h4,h5,h6{color:var(--fg)}
  .navbar,.sidebar,.footer,.card,.accordion-button,.accordion-body{background:var(--surface);color:var(--fg-2)}
  .navbar .nav-link{color:var(--fg-2)}
  .navbar .nav-link:hover{color:#93c5fd}
  .navbar .nav-link.active{color:#fff;font-weight:700}
  .accordion-button{border-bottom:1px solid var(--border)}
  .accordion-button::after{opacity:1}
  .accordion-button{--bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M1.5 6l6 6 6-6'/%3e%3c/svg%3e");--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M1.5 10l6-6 6 6'/%3e%3c/svg%3e")}
  .accordion-button{--bs-accordion-active-bg:#000;--bs-accordion-active-color:#fff}
  .form-control,.form-select{background-color:var(--surface);color:var(--fg-2);border-color:var(--border)}
  .form-control:focus,.form-select:focus{background-color:var(--surface);color:var(--fg-2);border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(14,165,233,.25)}
  .form-control::placeholder{color:var(--muted)}
  .input-group-text{background-color:var(--border);color:var(--fg-2);border-color:var(--border)}
  .badge.bg-light{background-color:var(--border)!important;color:var(--fg-2)!important}
  .card .card-title{color:var(--fg)}
  .card .card-text{color:var(--fg-2)}
  .text-muted{color:var(--muted)!important}
  .form-text{color:var(--muted)}
  a{color:#93c5fd}
  .list-group-item{background:var(--surface);color:var(--fg);border-color:var(--border)}
  .input-group-text{background:var(--surface);color:var(--fg);border-color:var(--border)}
  pre.code{background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:.75rem;border-radius:.5rem;white-space:pre-wrap}
  .btn-outline-primary{color:var(--accent);border-color:var(--accent)}
  .btn-close{filter:invert(1)}
  .offcanvas .top-links a{color:var(--fg-2)}
  .offcanvas .top-links a:hover{color:#93c5fd}
  .offcanvas .top-links li a{background:var(--surface);border-color:var(--border)}
  .offcanvas .top-links li a:hover{border-color:var(--accent);box-shadow:0 0 0 .125rem rgba(14,165,233,.15)}
}