html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
    color:#1e293b;
    line-height:1.6;
    min-height:100vh
}

/* Navigation */
.navbar{
    backdrop-filter:saturate(180%) blur(20px);
    background:rgba(255,255,255,0.95);
    border-bottom:1px solid rgba(0,0,0,0.08);
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    padding:0.75rem 0
}
.navbar .navbar-brand{
    color:var(--theme-primary);
    font-weight:700;
    font-size:1.25rem;
    letter-spacing:-0.5px
}
.navbar a{
    color:#475569;
    font-weight:500;
    transition:color 0.2s ease
}
.navbar a:hover{
    color:var(--theme-primary)
}

/* Header */
header{
    background:linear-gradient(135deg,rgba(255,255,255,0.95) 0%,rgba(248,250,252,0.95) 100%);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,0,0,0.06)
}
header h1{
    font-weight:800;
    letter-spacing:-1px;
    background:linear-gradient(135deg,var(--theme-primary) 0%,#8b5cf6 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text
}

/* Buttons */
.btn-primary{
    background:linear-gradient(135deg,var(--theme-primary) 0%,#8b5cf6 100%);
    border:none;
    color:#fff;
    font-weight:600;
    padding:0.625rem 1.5rem;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(99,102,241,0.3);
    transition:all 0.3s ease
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(99,102,241,0.4);
    color:#fff
}
.btn-primary:focus{
    box-shadow:0 0 0 3px rgba(99,102,241,0.2)
}
.btn-outline-primary{
    color:var(--theme-primary);
    border:2px solid var(--theme-primary);
    font-weight:600;
    padding:0.5rem 1.25rem;
    border-radius:10px;
    transition:all 0.3s ease
}
.btn-outline-primary:hover{
    background:var(--theme-primary);
    border-color:var(--theme-primary);
    color:#fff;
    transform:translateY(-2px)
}
.btn-outline-primary:focus{
    box-shadow:0 0 0 3px rgba(99,102,241,0.2)
}
.btn-sm{
    padding:0.375rem 1rem;
    font-size:0.875rem
}

/* Cards */
.card{
    border:1px solid rgba(0,0,0,0.08);
    border-radius:20px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(10px);
    transition:all 0.3s ease
}
.card.shadow-sm{
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    border:1px solid rgba(0,0,0,0.06)
}
.card:hover{
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
    transform:translateY(-2px)
}
.section-card .h5{
    font-weight:700;
    color:#1e293b;
    letter-spacing:-0.5px;
    margin-bottom:1.25rem
}

/* Quick Navigation */
.quick-nav-card{
    position:sticky;
    top:1rem;
    z-index:2;
    background:linear-gradient(135deg,rgba(255,255,255,0.98) 0%,rgba(248,250,252,0.98) 100%);
    border:1px solid rgba(0,0,0,0.08)
}
.quick-nav-card .btn{
    border-radius:999px;
    font-weight:600;
    padding:0.5rem 1.25rem;
    font-size:0.875rem;
    transition:all 0.3s ease;
    border:2px solid rgba(99,102,241,0.2)
}
.quick-nav-card .btn:hover{
    background:var(--theme-primary);
    border-color:var(--theme-primary);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(99,102,241,0.3)
}

/* Form Controls */
.form-control,
.form-select{
    border-radius:10px;
    border:2px solid #e2e8f0;
    padding:0.625rem 1rem;
    font-weight:500;
    transition:all 0.3s ease
}
.form-control:focus,
.form-select:focus{
    border-color:var(--theme-primary);
    box-shadow:0 0 0 4px rgba(99,102,241,0.1);
    outline:none
}
.form-control-color{
    height:42px;
    padding:0.25rem;
    border-radius:10px;
    border:2px solid #e2e8f0
}
.form-range{
    height:8px;
    border-radius:4px
}
.form-range::-webkit-slider-thumb{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--theme-primary);
    box-shadow:0 2px 8px rgba(99,102,241,0.4);
    transition:all 0.3s ease
}
.form-range::-webkit-slider-thumb:hover{
    transform:scale(1.1)
}
.form-check-input{
    width:1.25rem;
    height:1.25rem;
    border-radius:6px;
    border:2px solid #cbd5e1;
    transition:all 0.3s ease
}
.form-check-input:checked{
    background-color:var(--theme-primary);
    border-color:var(--theme-primary)
}
.form-check-input:focus{
    box-shadow:0 0 0 4px rgba(99,102,241,0.1)
}
.form-check-label{
    font-weight:500;
    color:#475569
}

/* QR Preview */
.qr-preview canvas,
.qr-preview svg{
    max-width:100%;
    height:auto;
    border-radius:8px
}
.qr-frame-wrapper{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-top:16px;
    padding:20px
}
.qr-frame{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);
    border:2px solid #e2e8f0;
    border-radius:16px;
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    transition:all 0.3s ease
}
.qr-frame:hover{
    box-shadow:0 8px 30px rgba(0,0,0,0.1);
    transform:translateY(-2px)
}
.qr-frame.frame-rounded{
    border-radius:20px
}
.qr-frame.frame-badge{
    border-radius:24px;
    border-width:3px
}
.qr-label{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.15em;
    font-size:0.75rem;
    color:#64748b
}
.qr-watermark{
    position:absolute;
    pointer-events:none;
    opacity:.18;
    max-width:70%;
    max-height:70%;
    transition:opacity 0.3s ease
}

/* Layout Styles */
.layout-stacked .row{
    flex-direction:column
}
.layout-stacked #controls-col,
.layout-stacked #preview-col{
    max-width:100%
}

/* Sticky Preview */
#preview-col {
    position: sticky;
    top: 1rem;
    align-self: start;
    z-index: 2;
}

#section-preview {
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 0%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

/* Transitions */
*{
    transition:background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease
}

/* Responsive */
@media (max-width: 991px){
    .quick-nav-card{
        position:static
    }
    #preview-col {
        position: sticky;
        top: 1rem;
        z-index: 2;
        align-self: start;
    }
    .card{
        border-radius:16px
    }
    header h1{
        font-size:1.5rem
    }
}

/* Animations */
@keyframes fadeIn{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
}
.card{
    animation:fadeIn 0.5s ease-out
}

/* Utility */
input[type="color"]{
    cursor:pointer
}
input[type="file"]{
    cursor:pointer
}