@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}
.tool-share-bar-wrapper{margin-left:var(--content-pr);margin-right:var(--content-pr)}
.tool-share-bar{background:var(--surface);border:1px solid var(--border);border-radius:.5rem;padding:.5rem .85rem}
.tool-share-bar .btn{white-space:nowrap}
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)}
  .form-control:disabled, .form-control[readonly] {
    background-color: var(--bg);
    opacity: 1;
    color: var(--muted);
    border-color: var(--border);
  }
  .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, .text-body-secondary, .text-secondary { 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)}
  
  /* Breadcrumb Dark Fix */
  .breadcrumb-item a { color: var(--accent); }
  .breadcrumb-item.active { color: var(--muted); }
  .breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }

  /* Result Card Dark Fix */
  .alert-light {
    background-color: var(--surface);
    border-color: var(--border);
    color: var(--fg);
  }
  .alert-light .text-muted { color: var(--muted) !important; }

  /* Table Dark Fix */
  .table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--fg-2);
    --bs-table-border-color: var(--border);
    color: var(--fg-2);
    border-color: var(--border);
  }
  .table-light {
    background-color: var(--border);
    color: var(--fg);
    border-color: var(--border);
  }
  .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border);
    color: inherit;
  }
  .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--fg);
  }
  .pagination .page-link{
    background-color: transparent;
    border-color: var(--border);
    color: var(--fg-2);
  }
  .pagination .page-link:hover{
    background-color: var(--border);
    color: var(--fg);
  }
  .pagination .page-item.active .page-link{
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .pagination .page-item.disabled .page-link{
    color: var(--muted);
    border-color: var(--border);
    background-color: transparent;
  }
  
  /* Bootstrap Pagination Variables Override for Dark Mode */
  .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-color: var(--fg-2);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-bg: var(--border);
    --bs-pagination-hover-color: var(--fg);
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-focus-bg: var(--surface);
    --bs-pagination-focus-color: var(--fg);
    --bs-pagination-active-bg: var(--accent);
    --bs-pagination-active-border-color: var(--accent);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: var(--muted);
    --bs-pagination-disabled-border-color: var(--border);
  }
  
  /* Modal Dark Fix */
  .modal-content {
    background-color: var(--surface);
    color: var(--fg-2);
    border-color: var(--border);
  }
  .modal-header, .modal-footer {
    border-color: var(--border);
  }
  .modal-title {
    color: var(--fg);
  }
  .form-check-input {
    background-color: var(--surface);
    border-color: var(--border);
  }
  .form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
  }
  
  /* Enhanced Accordion Dark Mode */
  .accordion-item {
    background-color: var(--surface);
    color: var(--fg-2);
    border-color: var(--border);
  }
  .accordion-button {
    background-color: var(--surface);
    color: var(--fg-2);
  }
  .accordion-button:not(.collapsed) {
    background-color: rgba(14, 165, 233, 0.2); /* using accent color */
    color: var(--accent);
    box-shadow: inset 0 -1px 0 var(--border);
  }
  .accordion-button::after {
    /* filter: invert(1); removed as we set custom icon color */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5e7eb'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230ea5e9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    filter: none;
  }
  .accordion-collapse {
    background-color: var(--surface);
  }
  
  /* Enhanced List Group Dark Mode */
  .list-group-item, .list-group-item-action {
    background-color: var(--surface) !important;
    color: var(--fg) !important;
    border-color: var(--border) !important;
  }
  .list-group-item:hover, .list-group-item:focus {
    background-color: var(--bg) !important;
    color: var(--fg) !important;
  }
  .list-group-item.active {
    background-color: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
  }
  
  /* Loading Overlay Dark Fix */
  #loading-overlay {
    background-color: rgba(17, 24, 39, 0.95) !important;
    color: var(--fg) !important;
  }
}

/* Generic UI Enhancements */
#loading-overlay {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(2px);
}
.verse-number {
  opacity: 0.6;
}
.accordion-button:not(.collapsed) {
  background-color: rgba(14, 165, 233, 0.1);
  color: var(--accent);
}

/* Global Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: #334155;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #475569;
  }
}