/* BikeLocker - iPhone Style Design */


:root {

    --background: #f2f2f7;
    --card: rgba(255,255,255,0.75);
    --text: #111111;
    --secondary: #6e6e73;
    --blue: #007aff;
    --green: #34c759;
    --red: #ff3b30;

}



* {

    box-sizing: border-box;

}



body {

    margin: 0;
    padding: 20px;

    padding-bottom: 40px;

    font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Helvetica Neue",
    Arial,
    sans-serif;


    background:
    linear-gradient(
        180deg,
        #eef1f8,
        #f2f2f7
    );


    color: var(--text);

}




header {

    text-align: center;

    margin-top: 20px;
    margin-bottom: 30px;

}



header h1 {

    font-size: 34px;

    margin: 0;

    letter-spacing: -1px;

}



header p {

    color: var(--secondary);

    margin-top: 8px;

}






h2 {

    font-size: 22px;

    margin-top: 30px;

    letter-spacing: -0.4px;

}





.card {


    background:
    var(--card);


    backdrop-filter:
    blur(20px);


    -webkit-backdrop-filter:
    blur(20px);



    border-radius: 24px;


    padding: 20px;


    margin-bottom: 20px;


    box-shadow:

    0 8px 25px
    rgba(0,0,0,0.08);


}




.info {


    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    color:var(--secondary);

}




.info strong {

    color:var(--text);

}





button {


    width:100%;

    border:0;

    padding:15px;


    border-radius:16px;


    background:
    var(--blue);


    color:white;


    font-size:17px;


    font-weight:600;


    margin-top:10px;


    cursor:pointer;



    transition:
    transform .15s ease,
    opacity .15s ease;


}



button:active {


    transform:scale(.97);

    opacity:.8;


}







.summary {


    display:flex;


    justify-content:space-around;


    text-align:center;


}



.summary div {


    display:flex;

    flex-direction:column;

    gap:8px;


}



.summary span {

    color:var(--secondary);

}



.summary b {

    font-size:30px;

}







.item {


    display:flex;


    align-items:center;


    justify-content:space-between;


    background:white;


    padding:15px;


    margin-bottom:12px;


    border-radius:18px;


    box-shadow:
    0 4px 15px rgba(0,0,0,.06);


}



.item.low {


    border:2px solid var(--red);


}



.item-name {


    font-weight:600;


}



.controls {


    display:flex;


    align-items:center;


    gap:12px;


}



.controls button {


    width:38px;

    height:38px;


    padding:0;


    margin:0;


    border-radius:50%;


    font-size:22px;


}





.count {


    font-size:20px;


    font-weight:700;


}







#photoPreview {


    display:flex;


    gap:10px;


    margin-top:15px;


    flex-wrap:wrap;


}




#photoPreview img {


    width:90px;


    height:90px;


    object-fit:cover;


    border-radius:18px;


}





input[type="file"] {


    width:100%;

    padding:12px;

    border-radius:15px;

    background:white;

}





footer {


    text-align:center;


    color:var(--secondary);


    margin-top:40px;


    font-size:13px;


}






/* Dark Mode */


@media (prefers-color-scheme: dark) {


body {

    background:
    #000;

    color:white;

}


.card {

    background:
    rgba(30,30,30,.75);

}


.item {

    background:#1c1c1e;

    color:white;

}


header p,
.info,
.summary span,
footer {

    color:#aaa;

}



}