/* make width calculations easier on small screens */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body{
    font-family: system-ui, -apple-system, Arial;
    background:#f3f4f6;
    margin:0;
    padding:20px;
    display:flex;
    justify-content:center;
}

.app{
background:white;
padding:24px;
border-radius:14px;
width:100%;
max-width:380px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

h1{
font-size:20px;
margin:0;
}

input,select{
width:100%;
padding:12px;
margin-top:10px;
margin-bottom:10px;
box-sizing:border-box;
border-radius:6px;
border:1px solid #ddd;
}

.color-picker-group {
    margin-bottom: 12px;
}

.color-picker-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

body.dark .color-picker-group label {
    color: #e2e8f0;
}

button{
width:100%;
padding:14px;
margin-top:12px;
border:none;
border-radius:8px;
background:#111827;
color:white;
font-weight:600;
cursor:pointer;
}

button:hover{
background:black;
}

#qr-container{
    margin-top:20px;
    margin-bottom:20px;
    display:grid;
    place-items: center;
    width:100%;
    aspect-ratio:1;
    background:inherit;
    line-height:0;
}




#qr-container svg{
    display:grid;
    place-items:middle;
    place-content: middle;
    justify-content: middle;
    border-radius:7px;
    z-index: 999;
    margin: 0px !important ;
    padding:0px !important ;
    position: relative;
} 

/* Dark mode */

body.dark{
background:#0f172a;
}

body.dark .app{
background:#1e293b;
color:white;
}

body.dark input,
body.dark select{
background:#0f172a;
color:white;
border:1px solid #334155;
}

body.dark button{
background:#2563eb;
}

/* Color picker styling */
#qrColor, #bgColor {
    width: 100%;
    height: 60px;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    border: 2px solid #ddd;
}

#qrColor:hover, #bgColor:hover {
    border-color: #999;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

body.dark #qrColor, 
body.dark #bgColor {
    border-color: #555;
}

body.dark #qrColor:hover,
body.dark #bgColor:hover {
    border-color: #777;
}

#themeToggle{
background:transparent;
color:inherit;
border:1px solid currentColor;
width: auto;
border: none;
}

#themeToggle:hover{
background:rgba(0,0,0,0.1);
transform: scale(0.9);
}



#downloadBtn:hover, #generateBtn:hover{
    transform: scale(0.98);
}

.color-group{
    display: flex;
    gap: 12px;
}

.color-picker-group{
    width: 11rem;
}