/* Container for Download button and QR code */
.modal-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Provides spacing between the download button and QR code */
    position: relative;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: center;
}

/* Styling for the now-visible QR code container */
.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc; /* A slightly off-white for better visual appeal */
    border-radius: 12px;
    padding: 15px; /* Increased padding for better spacing */
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* A soft shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* The element where the QR code image will be generated */
.qr-code-display {
    margin-bottom: 10px; /* More space between QR code and the text */
    background-color: #ffffff; /* Crucial for QR code scannability */
    padding: 5px; /* A little padding around the QR code itself */
    border-radius: 6px; /* Slightly rounded corners for the QR code background */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04); /* Inner shadow for a subtle depth effect */
}

.qr-code-container p {
    margin: 0;
    font-size: 0.75rem; /* Slightly smaller, cleaner font size */
    color: #64748b;   /* A pleasant, readable grey */
    font-weight: 500;
}

@import"https://unpkg.com/open-props/easings.min.css";
.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.theme-toggle:is(:hover,:focus-visible)>.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill-hover)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px}.theme-toggle:is(:hover,:focus-visible) .sun-and-moon>.sun-beams{stroke:var(--icon-fill-hover)}[data-theme=light] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=light] .sun-and-moon>.sun-beams{opacity:0}[data-theme=light] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=light] .sun-and-moon>.moon>circle{transform:translate(0);cx:17}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon .moon>circle{transition:transform .25s var(--ease-out-5)}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s var(--ease-out-5)}}[data-theme=light] .sun-and-moon>.sun{transform:scale(1.75);transition-timing-function:var(--ease-3);transition-duration:.25s}[data-theme=light] .sun-and-moon>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}[data-theme=light] .sun-and-moon>.moon>circle{transition-delay:.25s;transition-duration:.5s}}.theme-toggle{--size: 2rem;--icon-fill: hsl(200, 100%, 50%);--icon-fill-hover: hsl(266, 100%, 44%);background:none;border:none;padding:0;inline-size:var(--size);block-size:var(--size);aspect-ratio:1;border-radius:50%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline-offset:5px}.theme-toggle>svg{inline-size:100%;block-size:100%;stroke-linecap:round}[data-theme=dark] .theme-toggle{--icon-fill: hsl(49, 94%, 45%);--icon-fill-hover: #f24738 }@media (hover: none){.theme-toggle{--size: 48px }}*{box-sizing:border-box;margin:0}html{block-size:100%;color-scheme:light}html[data-theme=dark]{color-scheme:dark}@supports not (color-scheme: dark){html[data-theme=dark]{background:#111}}body{min-block-size:100%;align-content:center;justify-content:center;place-content:center}.github-corner{fill:#ff69b4;color:Canvas}.github-corner:hover .octo-arm{-webkit-animation:octocat-wave .56s ease-in-out;animation:octocat-wave .56s ease-in-out}[data-theme=dark] .github-corner{fill:indigo}@-webkit-keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@keyframes octocat-wave{0%,to{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}

body #searchQuery {
    background-color: #f5f5f7;
    color: #000000;
}
body.dark-theme {
    background-color: #121212 ;
    color: #f0f0f0;
    
}
body.dark-theme .search-icon-image {
    display:none;
 
    
}

body.dark-theme .card p {

color:#f2ecdb;
transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme .card h2 {

    color:#f2ecdb;
    transition: background-color 0.3s ease, color 0.3s ease;
    }


body.dark-theme #searchQuery {
    background-color: #0f0f0f;
    color: #f1ecdb;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark-theme .card-content{
    background-color: #000000;
    
}

body.dark-theme .card{
    box-shadow: 0 10px 30px rgba(212, 212, 212, 0.08);
    background-color: #121212;
    color:#f0f0f0;
}

body.dark-theme .modal{

    background-color: black;

}
body.dark-theme .modal-text{

    color:#f2ecdb;

}
body.dark-theme .modal-title{

    color:#f2ecdb;

}

body.dark-theme .tag{
    background-color: rgb(99, 99, 99);
    color:#f2ecdb;

}

body.dark-theme #password-tab{
    background-color: rgb(99, 99, 99);
    color:#f2ecdb;

}

body.dark-theme  .menu > li > a {
    display: block;
    padding: 5px 0; /* Tăng padding để khu vực click rộng hơn */
    text-decoration: none;
    color: #ffffff; /* Màu chữ trắng */
    font-weight: bold;
    transition: color 0.3s ease; /* Hiệu ứng chuyển đổi màu chữ mượt mà */
  }

body.dark-theme .menu > li > a:hover {
    color: #00ff9d; /* Màu chữ khi rê chuột */
  }

  body.dark-theme #searchForm {

    border: 1px solid #00ff9d;
  }


body.dark-theme .fixed-search   {

    background-color: #0f0f0f;
}

body.dark-theme .music-player-container {

    background-color: #000000;

}

body.dark-theme  .control-button {

    color: #00ff9d;
}

body.dark-theme .track-info {

    color: #00ff9d;
}

body.dark-theme #seekBar::-webkit-slider-thumb {
    background: #00ff9d;
}

body.dark-theme .time-display {


    color: #00ff9d;
}

body.dark-theme  #volumeBar::-webkit-slider-thumb {
    background: #00ff9d;
}


body.dark-theme .menu-bo-tron a:hover {
	background-color: #A7dca5; /* Màu nền khi di chuột qua */
  }


  body.dark-theme .tooltip .tooltiptext {
    
    background-color: #497568;
    color: #ffffff;
  }
  body.dark-theme .language-switcher select {

    color:rgb(255, 255, 255);
  }

  body.dark-theme .language-switcher select:focus {
    background-color: #121212;
  
  }


.theme-toggle{

    top: 10px;
    left: 10px;
    z-index: 1000;
    position: fixed;
}
body.dark-theme .filter-tag-button {
    border-color: var(--icon-fill); /* Màu border ở dark mode */
    color: var(--icon-fill); /* Màu chữ ở dark mode */
}

body.dark-theme .filter-tag-button:hover,
body.dark-theme .filter-tag-button.active {
    background-color: var(--icon-fill);
    color: #00ff9d; /* Màu chữ khi active/hover ở dark mode */
}

body.dark-theme .notification-container {

    background-color: rgb(223, 223, 223);
}

/* === ADDED: Dark Theme Styles for QR Code === */
body.dark-theme .qr-code-container {
    background-color: #1e293b; /* A dark blue-grey that matches many dark themes */
    border-color: #334155;     /* A slightly lighter border for subtle definition */
}

body.dark-theme .qr-code-display {
    background-color: #ffffff; /* IMPORTANT: Keep QR code background white for scannability */
    box-shadow: none;          /* The inner shadow isn't needed in dark mode */
}

body.dark-theme .qr-code-container p {
    color: #94a3b8; /* A lighter, soft blue-grey text color for readability */
}