/* BikeLocker iPhone Style */


* {
    box-sizing: border-box;
}


body {

    margin:0;

    padding:20px;

    padding-bottom:50px;


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


    background:#f2f2f7;

    color:#111;

}





header {

    text-align:center;

    margin-top:25px;

    margin-bottom:30px;

}


header h1 {

    font-size:38px;

    margin:0;

    letter-spacing:-1px;

}


header p {

    margin-top:8px;

    color:#6e6e73;

    font-size:18px;

}






.card {


    background:white;

    border-radius:24px;

    padding:20px;

    margin-bottom:20px;


    box-shadow:

    0 8px 25px rgba(0,0,0,.08);


}





h2 {

    font-size:22px;

    margin-top:0;

    letter-spacing:-0.3px;

}





.control-card {


    text-align:center;

}



#lastUpdate {


    font-size:18px;

    font-weight:600;

    margin:15px 0;

}





#photoInfo {


    color:#6e6e73;

    margin-bottom:15px;


}






button {


    width:100%;


    border:none;


    background:#007aff;


    color:white;


    padding:15px;


    border-radius:16px;


    font-size:17px;


    font-weight:600;


}





button:active {

    transform:scale(.97);

}







.summary-container {


    display:flex;


    gap:15px;


    margin-bottom:25px;


}





.summary-box {


    flex:1;


    background:white;


    border-radius:22px;


    padding:20px;


    text-align:center;


    box-shadow:

    0 6px 20px rgba(0,0,0,.08);


}





.summary-box span {


    display:block;


    color:#6e6e73;


    font-size:15px;


    margin-bottom:10px;


}




.summary-box strong {


    font-size:34px;


}




.empty strong {


    color:#ff3b30;


}







.section-title {


    margin-top:30px;


}






.product {


    display:flex;


    justify-content:space-between;


    align-items:center;


    background:white;


    padding:15px;


    border-radius:20px;


    margin-bottom:12px;


    box-shadow:

    0 5px 15px rgba(0,0,0,.07);


}




.product.low {


    border:2px solid #ff3b30;


}






.product-name {


    font-size:17px;


    font-weight:600;


}




.controls {


    display:flex;


    align-items:center;


    gap:8px;


}




.controls button {


    width:40px;


    height:40px;


    padding:0;


    border-radius:50%;


    font-size:24px;


}





.number-input {


    width:55px;


    height:40px;


    text-align:center;


    border-radius:12px;


    border:1px solid #ddd;


    font-size:18px;


    font-weight:600;


}








.photo-card input {


    width:100%;


    margin-top:10px;


}




#photoContainer {


    display:flex;


    gap:10px;


    flex-wrap:wrap;


    margin-top:15px;


}




#photoContainer img {


    width:90px;


    height:90px;


    object-fit:cover;


    border-radius:18px;


}








/* iPhone Dark Mode */


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


body {

    background:#000;

    color:white;

}



.card,
.summary-box,
.product {

    background:#1c1c1e;

    color:white;

}



header p,
#photoInfo,
.summary-box span {

    color:#aaa;

}



.number-input {

    background:#2c2c2e;

    color:white;

    border:none;

}


}