/* ------------------------------------------------ */
/*  1.  Theme tokens – tweak colours in ONE place   */
/* ------------------------------------------------ */
:root{
    --bg:          #f8f9fa;
    --text:        #212529;
    --card-bg:     #ffffff;
    --accent:      #0d6efd;
    --accent-light:#3d8bfd;
    --gray:        #6c757d;
    --success:     #198754;
    --warning:     #ffc107;
    --danger:      #dc3545;
  }
  
  body.dark-mode{
    --bg:          #121212;
    --text:        #e0e0e0;
    --card-bg:     #1e1e1e;
    --accent:      #4da8ff;
    --accent-light:#8cc4ff;
    --gray:        #b5b5b5;
    --success:     #31d17b;
    --warning:     #ffda6a;
    --danger:      #ff6b6b;
  }
  
  /* ------------------------------------------------ */
  /*  2.  Base element styling                        */
  /* ------------------------------------------------ */
  body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    transition:background .3s,color .3s;
  }
  
  .container{max-width:1000px;margin-inline:auto;padding:20px}
  
  .auto-style6 {
    font-family: 'Titillium Web', sans-serif;
    font-size: 2.5em;
  	background-color: #f8f9fabf;
    font-weight: 400; /* Matches the imported weights: 300 or 400 */
    color: #007bff;
}
.dark-mode .auto-style6 {
    color: #000000;
}
  
  .lead{font-size:1.125rem;color:var(--gray)}
  
  /* ------------------------------------------------ */
  /*  3.  Navigation                                  */
  /* ------------------------------------------------ */
  .navbar{
    background:var(--card-bg);
    border-radius:8px;
    box-shadow:0 2px 6px rgb(0 0 0 / .08);
    transition:background .3s,color .3s;
  }
  
  .navbar .nav-link,
  .navbar .navbar-brand{color:var(--text);font-weight:500}
  .navbar .nav-link:hover,
  .navbar .navbar-brand:hover{color:var(--accent)}
  
  /* active link */
  .navbar .nav-link.active,
  .navbar .nav-link.show{
    color:var(--accent)!important;
    font-weight:600;
  }
  
  .navbar-toggler{border:none}
  .navbar-toggler-icon{
    width:1.5rem;height:1.5rem;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' stroke='%23aaaaaa'%3E%3Cpath stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
  }
  
  /* ------------------------------------------------ */
  /*  4.  Cards / panels                              */
  /* ------------------------------------------------ */
  .card{
    background:var(--card-bg);
    border:none;
    border-radius:12px;
    box-shadow:0 4px 16px rgb(0 0 0 / .08);
    transition:background .3s;
  }
  
  /* ------------------------------------------------ */
  /*  5.  Buttons & inputs                            */
  /* ------------------------------------------------ */
  .btn-primary{
    background:var(--accent);
    border:none;
    padding:.75rem 1.5rem;
    font-size:1.05rem;
    border-radius:.5rem;
    transition:background .3s,transform .2s;
  }
  .btn-primary:hover{background:var(--accent-light);transform:translateY(-2px)}
  
  .btn-outline-secondary{
    border-color:var(--gray);
    color:var(--gray);
    border-radius:.5rem;
  }
  .btn-outline-secondary:hover{background:var(--gray);color:#fff}
  
  /* slider helper */
  .slider-container{display:flex;align-items:center;gap:.5rem}
  .slider-value{min-width:2ch;color:var(--gray)}
  
  /* ------------------------------------------------ */
  /*  6.  Lists / generated output                    */
  /* ------------------------------------------------ */
  .passwords-list,
  .dummy-data-list{list-style:none;padding:0}
  
  .passwords-list li,
  .dummy-data-list li{
    margin-block:10px;
    font-size:1.25rem;
    color:var(--accent);
    display:flex;align-items:center;gap:.5rem;
    word-break:break-all;
  }
  
  /* passphrase colour */
  .passwords-list li.passphrase{color:var(--success)}
  
  .copy-button{font-size:.9em}
  .qr-code{padding:10px}
  
  /* ------------------------------------------------ */
  /*  7.  Strength meter                              */
  /* ------------------------------------------------ */
  #strength-meter{margin-top:1rem}
  #strength-text{margin-bottom:.5rem;line-height:1.45}
  #strength-text ul{margin:.25rem 0 0;padding-left:1.25rem}
  
  .progress{height:10px;border-radius:5px;overflow:hidden}
  .progress-bar.bg-success{background:var(--success)}
  .progress-bar.bg-warning{background:var(--warning)}
  .progress-bar.bg-danger{background:var(--danger)}
  
  /* ------------------------------------------------ */
  /*  8.  Accordion / footer                          */
  /* ------------------------------------------------ */
  .accordion-button{
    background:var(--card-bg);
    color:var(--text);
  }
  
  footer a{color:var(--accent)}
  footer a:hover{color:var(--accent-light)}
  
  /* ------------------------------------------------ */
  /*  9.  Responsive tweaks                           */
  /* ------------------------------------------------ */
  @media(max-width:768px){
    .passwords-list li,
    .dummy-data-list li{font-size:1.1rem}
  }
  
  /* ------------------------------------------------ */
  /* 10.  Bootstrap variable overrides                */
  /* ------------------------------------------------ */
  :root{
    --bs-body-bg:       var(--bg);
    --bs-body-color:    var(--text);
    --bs-card-bg:       var(--card-bg);
    --bs-card-color:    var(--text);
    --bs-navbar-bg:     var(--card-bg);
    --bs-navbar-color:  var(--text);
    --bs-navbar-hover-color: var(--accent);
  }
  
  body.dark-mode{
    --bs-body-bg:       var(--bg);
    --bs-body-color:    var(--text);
    --bs-card-bg:       var(--card-bg);
    --bs-card-color:    var(--text);
    --bs-navbar-bg:     var(--card-bg);
    --bs-navbar-color:  var(--text);
    --bs-navbar-hover-color: var(--accent);
  }
  
  /* muted text contrast */
  body.dark-mode .text-muted{color:var(--gray)!important}
  
  /* ------------------------------------------------ */
  /* 11.  Inputs & placeholders (dark mode)           */
  /* ------------------------------------------------ */
  body.dark-mode .form-control{
    background:#1b1b1b;
    color:var(--text);
    border-color:var(--gray);
  }
  body.dark-mode .form-control::placeholder{
    color:var(--gray);
    opacity:1;
  }
  
  /* ------------------------------------------------ */
/* 13.  QR code layout + 3-word toggle colour       */
/* ------------------------------------------------ */

/* Flex row of QR boxes */
.qr-output{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
  }
  
  /* Each QR box holds canvas + its own copy button */
  .qr-box{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .qr-box canvas{width:128px;height:128px}
  
  /* Make the “Generate 3-word passphrase” switch green when ON */
  #generate-passphrase.form-check-input:checked{
    background-color:var(--success);
    border-color:var(--success);
  }