*{
    box-sizing:border-box;
}

html,
body{
    height:100%;
}

body{
    margin:0;

    min-height:100vh;

    display:flex;
    flex-direction:column;

    font-family:Arial,sans-serif;

    background:#f3f3f3;
    color:#333;
}


/* =======================================================
   TYPO
======================================================= */

h1,
h2,
h3{
    margin-top:0;
}

h1{
    text-align:center;
    color:#ef3b3b;
}

h2,
h3{
    color:#ef3b3b;
}


/* =======================================================
   HEADER
======================================================= */

header{
    position:sticky;

    top:0;
    z-index:100;

    background:#fff;

    padding:18px 20px 24px;

    margin-bottom:28px;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.08);

    display:flex;
    justify-content:center;
    align-items:center;
}

.header-logo{
    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-250px,-50%);
}

.header-logo img{
    display:block;

    height:50px;
    width:auto;
}

.header-title{
    width:100%;
    max-width:700px;

    text-align:center;
}

header h1{
    margin:0;

    color:#ef3b3b;

    font-size:24px;
    line-height:1.3;
}

header h1 small{
    display:block;

    margin-top:6px;

    color:#777;

    font-size:16px;
    font-weight:normal;
    line-height:1.4;
}


/* =======================================================
   MAIN
======================================================= */

main{
    flex:1;

    width:100%;

    padding:20px;

    text-align:center;
}

.container{
    max-width:1200px;

    margin:0 auto;

    padding:12px 15px 40px;
}


/* =======================================================
   CARDS
======================================================= */

.card{
    background:#fff;

    border-radius:28px;

    padding:30px;

    margin-bottom:26px;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.06);
}


/* =======================================================
   FORM ELEMENTE
======================================================= */

form{
    margin:0;
}

input,
select,
textarea{
    width:100%;

    border:none;

    border-radius:16px;

    background:#f5f5f5;

    padding:14px 16px;

    font-size:16px;

    color:#333;

    outline:none;
}

input:focus,
select:focus,
textarea:focus{
    background:#efefef;
}

textarea{
    resize:vertical;

    min-height:120px;
}


/* =======================================================
   BUTTONS
======================================================= */

button,
.button{
    border:none;

    border-radius:18px;

    background:#ef3b3b;

    color:#fff;

    cursor:pointer;

    text-decoration:none;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

button:hover,
.button:hover{
    transform:translateY(-1px);

    opacity:0.94;
}

.main-button{
    display:block;

    width:100%;
    max-width:420px;

    margin:24px auto 0;

    padding:18px 20px;

    font-size:18px;
    font-weight:700;
}


/* =======================================================
   LOGIN
======================================================= */

.login-page main{
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-box{
    width:100%;
    max-width:360px;

    background:#fff;

    border-radius:28px;

    padding:34px;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.08);
}

.password-input{
    width:100%;

    padding:16px 18px;

    font-size:18px;

    margin-bottom:18px;
}

.show-password{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    margin-bottom:18px;

    font-size:14px;

    color:#666;
}

.show-password input[type="checkbox"]{
    width:18px;
    height:18px;

    margin:0;
}


/* =======================================================
   POSTER
======================================================= */

.poster{
    position:relative;

    max-width:520px;

    margin:
        0 auto 28px;

    background:#fff;

    border-radius:18px;

    padding:18px;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.08);

    overflow:visible;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.poster:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0 10px 24px rgba(0,0,0,0.14);
}

.poster img{
    width:100%;

    border-radius:12px;

    display:block;
}

.poster-info{
    margin-bottom:14px;

    text-align:left;
}

.poster-info strong{
    display:block;

    font-size:18px;

    margin-bottom:4px;

    color:#ef3b3b;
}

.poster-info span{
    display:block;

    font-size:14px;

    color:#777;

    line-height:1.4;
}


/* =======================================================
   SHARE BUTTON
======================================================= */

.share-btn{
    position:absolute;

    top:-18px;
    right:-18px;

    width:62px;
    height:62px;

    border:none;

    border-radius:50%;

    background:#ef3b3b;

    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:
        0 6px 16px rgba(0,0,0,0.25);

    z-index:20;
}

.share-btn svg{
    width:24px;
    height:24px;
}


/* =======================================================
   FILE LINKS
======================================================= */

.file-link{
    display:block;

    background:#fff;

    padding:18px 24px;

    margin-bottom:14px;

    border-radius:18px;

    color:#333;

    text-decoration:none;

    box-shadow:
        0 2px 10px rgba(0,0,0,0.06);
}

.file-link strong{
    display:block;

    margin-bottom:6px;
}

.file-link small{
    color:#777;
}


/* =======================================================
   SIDEBAR
======================================================= */

.admin-sidebar{
    position:fixed;

    top:15vh;
    right:0;

    z-index:9999;

    pointer-events:none;
}

.logout-sidebar{
    top:1vh;
}

.admin-sidebar-box{
    background:#ef3b3b;

    border-radius:
        14px 0 0 14px;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.18);

    pointer-events:auto;
}

.admin-sidebar-btn{
    display:flex;

    align-items:center;
    justify-content:center;

    width:56px;
    height:56px;

    border-bottom:
        1px solid rgba(255,255,255,0.15);
}

.admin-sidebar-btn:last-child{
    border-bottom:none;
}

.admin-sidebar-btn img{
    width:28px;
    height:28px;

    object-fit:contain;
}


/* =======================================================
   CHECKLIST
======================================================= */

.user-grid{
    display:flex;
    flex-direction:column;

    gap:24px;
}

.user-card{
    background:#fff;

    border-radius:28px;

    padding:28px;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.06);
}

.user-card-left{
    width:100%;
}

.user-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.user-card-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.user-card-actions form{
    margin:0;
}

.icon-btn-red{
    background:#ef3b3b;
    color:#fff;
}

.icon-btn-gray{
    background:#b5b5b5;
    color:#fff;
}

.icon-btn img{
    width:22px;
    height:22px;
    object-fit:contain;
    display:block;
}

/* =======================================================
   CHECKLIST SETTINGS
======================================================= */

.card-settings{
    margin-bottom:26px;
}

.card-actions{
    display:flex;

    justify-content:flex-end;

    gap:10px;

    margin-bottom:18px;
}

.card-settings-grid{
    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap:14px;
}

.card-notes{
    margin-top:20px;
}


/* =======================================================
   DYNAMIC TABLE
======================================================= */

.dynamic-table{
    margin-top:28px;
}

.dynamic-head,
.dynamic-row{
    display:grid;

    gap:12px;

    align-items:center;
}

.dynamic-head{
    margin-bottom:10px;

    padding:0 10px;

    opacity:0.55;

    font-size:14px;
    font-weight:700;
}

.dynamic-row{
    background:#fafafa;

    border-radius:22px;

    padding:12px;

    margin-bottom:12px;
}


/* =======================================================
   CHECKLIST INPUTS
======================================================= */

.dynamic-row input,
.dynamic-row select{
    width:100%;

    height:54px;

    border:none;

    border-radius:18px;

    background:#f1f1f1;

    padding:0 16px;

    font-size:16px;
    font-weight:600;
}

.dynamic-row input[type="checkbox"]{
    width:24px;
    height:24px;

    margin:auto;
}


/* =======================================================
   UNIT FIELD
======================================================= */

.field-unit{
    position:relative;
}

.field-unit input{
    padding-right:44px !important;
}

.field-unit span{
    position:absolute;

    right:14px;
    top:50%;

    transform:translateY(-50%);

    font-size:13px;
    font-weight:700;

    opacity:0.45;

    pointer-events:none;
}


/* =======================================================
   CHECKLIST ACTIONS
======================================================= */

.row-actions{
    display:flex;

    justify-content:flex-end;

    gap:8px;
}


/* =======================================================
   CHECKLIST BUTTONS
======================================================= */

.icon-btn,
.drink-add-btn{
    width:46px;
    height:46px;

    border:none;

    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    font-size:18px;

    flex-shrink:0;
}

.icon-btn{
    background:#ef3b3b;

    color:#fff;
}

.icon-btn.gray{
    background:#b5b5b5;
}

.drink-add-btn{
    background:#ef3b3b;

    color:#fff;

    font-size:28px;
    font-weight:700;
}


/* =======================================================
   POPUP
======================================================= */

.popup-overlay{
    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,0.35);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:99999;

    padding:20px;
}

.popup-box{
    background:#fff;

    width:100%;
    max-width:480px;

    border-radius:30px;

    padding:40px 30px;

    position:relative;

    text-align:center;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.18);
}

.popup-close{
    position:absolute;

    top:18px;
    right:18px;

    width:44px;
    height:44px;

    border:none;

    border-radius:14px;

    background:#efefef;

    color:#666;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:26px;

    cursor:pointer;
}

.popup-user{
    font-size:24px;
    font-weight:700;

    margin-bottom:20px;
}

.popup-password{
    background:#f5f5f5;

    border-radius:18px;

    padding:20px;

    font-size:34px;
    font-weight:700;

    margin-bottom:24px;

    word-break:break-all;
}


/* =======================================================
   INFO
======================================================= */

.info-box{
    color:#555;

    line-height:1.6;

    margin-top:80px;

    font-size:18px;
}

.error-box{
    margin-bottom:18px;

    color:#d32626;

    font-weight:700;
}


/* =======================================================
   BUNNY
======================================================= */

.bunny-fixed{
    position:fixed;

    bottom:10vh;
    right:-8px;

    z-index:1500;
}

.bunny-fixed img{
    width:80px;
    height:auto;
}


/* =======================================================
   FOOTER
======================================================= */

footer{
    margin-top:auto;

    padding:15px 20px;

    background:#7A7A7A;

    color:#fff;

    text-align:center;
}

.footer-copy{
    margin-bottom:18px;
}

.footer-links{
    display:flex;

    justify-content:center;

    gap:5px;

    flex-wrap:wrap;
}

.footer-links a{
    color:#fff;

    text-decoration:none;
}


/* =======================================================
   MOBILE
======================================================= */

@media(max-width:900px){

    header{
        padding:
            18px 15px 22px;
    }

    .header-logo{
        transform:
            translate(-180px,-50%);
    }

    .header-logo img{
        height:70px;
    }

    .container{
        padding:10px;
    }

    .card,
    .user-card{
        padding:22px;
    }

    .card-settings-grid{
        grid-template-columns:1fr;
    }

    .dynamic-head{
        display:none;
    }

    .dynamic-row{
        grid-template-columns:1fr !important;
    }

    .row-actions{
        justify-content:center;
    }

    .main-button{
        max-width:none;
    }

    .bunny-fixed{
        transform:scale(0.75);
        transform-origin:right center;
    }

    .poster{
        padding:14px;
    }

    .share-btn{
        width:54px;
        height:54px;

        top:-12px;
        right:-12px;
    }

    .login-box{
        padding:28px 24px;
    }
}