*{box-sizing:border-box}
body{margin:0;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:700}
a{color:inherit;text-decoration:none}

.topbar{
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 6%;
    background:#090909;
    border-bottom:1px solid #222
}

.brand{
    font-size:28px;
    white-space:nowrap
}

.tabs{
    display:flex;
    gap:10px;
    align-items:center;
    flex:1
}

.tabs a,
.tabs button,
.btn,
button{
    height:46px;
    border:1px solid #2d2d2d;
    background:#191919;
    color:#fff;
    border-radius:14px;
    padding:0 18px;
    font-size:16px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer
}

.tabs a:hover,
.tabs button:hover,
.btn:hover,
button:hover{
    background:#242424
}

.userchip{
    margin-left:auto;
    border:1px solid #2d2d2d;
    background:#1b1b1b;
    border-radius:999px;
    padding:12px 18px;
    white-space:nowrap
}

.container{
    width:min(1500px,92vw);
    margin:28px auto
}

.pageHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px
}

.pageHead h1{
    margin:0 0 12px;
    font-size:36px
}

.muted{
    color:#bbb;
    font-weight:500
}

.card{
    background:linear-gradient(145deg,#0d0d0d,#080808);
    border:1px solid #252525;
    border-radius:22px;
    padding:26px;
    margin-bottom:18px
}

.compact{
    padding:18px
}

.rowBetween{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px
}

.progressTop{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:18px;
    align-items:end
}

.progressTop input{
    height:50px
}

.bar{
    height:16px;
    border-radius:999px;
    background:#202020;
    overflow:hidden;
    margin:14px 0
}

.bar span{
    display:block;
    height:100%;
    width:0%;
    background:#36d47a;
    border-radius:inherit
}

.pending{
    color:#ccc;
    font-size:14px;
    font-weight:500;
    line-height:1.6
}

.grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.grid3{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:18px
}

.grid4{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
    gap:18px
}

label{
    display:block;
    color:#bbb;
    font-size:18px;
    margin-bottom:12px
}

input,
select,
textarea{
    width:100%;
    height:62px;
    margin-top:10px;
    border:1px solid #333;
    background:#050505;
    color:#fff;
    border-radius:15px;
    padding:0 20px;
    font-size:18px;
    font-weight:700;
    outline:none
}

textarea{
    height:100px;
    padding-top:18px;
    resize:vertical
}

input:focus,
select:focus,
textarea:focus{
    border-color:#777
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    appearance:none;
    -webkit-appearance:none;
    margin:0
}

input[type=number]{
    appearance:textfield;
    -moz-appearance:textfield
}

.calcBox{
    min-height:92px;
    border:1px solid #2d2d2d;
    background:#080808;
    border-radius:15px;
    padding:20px
}

.calcBox span{
    display:block;
    color:#bbb;
    margin-bottom:8px
}

.calcBox b{
    font-size:28px
}

.form h2{
    font-size:24px;
    margin:26px 0 14px
}

.wide{
    width:100%
}

.primary,
button[type=submit]{
    background:#35d27c;
    color:#000;
    border-color:#35d27c
}

.danger{
    background:#ff4b4b!important;
    border-color:#ff4b4b!important;
    color:#fff
}

.ghost{
    background:#191919!important;
    color:#fff!important;
    border-color:#333!important
}

.moveRow{
    display:grid;
    grid-template-columns:1fr 1.5fr 1fr 54px;
    gap:12px;
    margin-bottom:12px;
    align-items:center
}

.moveRow select,
.moveRow input{
    margin-top:0
}

.xbtn{
    height:52px;
    width:52px;
    padding:0;
    border-radius:13px;
    background:#ff4b4b;
    color:#fff;
    border:0
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:10px 16px;
    font-size:15px;
    border:1px solid #333
}

.gray{background:#1c1c1c;color:#ddd}
.ok{background:#0e3820;color:#56f09a;border-color:#1f7a43}
.warn{background:#3a2d0b;color:#ffd86b;border-color:#836212}
.bad{background:#3a1111;color:#ff7777;border-color:#8a2222}

.alert{
    padding:14px 18px;
    border-radius:14px;
    margin-bottom:14px
}

.okbg{background:#0e3820}
.badbg{background:#3a1111}

.tableWrap{
    overflow:auto;
    border-radius:18px;
    border:1px solid #242424
}

.table{
    width:100%;
    border-collapse:collapse;
    min-width:980px;
    background:#080808
}

.table th,
.table td{
    padding:14px;
    border-bottom:1px solid #202020;
    text-align:left;
    white-space:nowrap
}

.table th{
    background:#121212;
    color:#ccc
}

.actions{
    display:flex;
    gap:8px
}

.small{
    height:36px;
    padding:0 12px;
    border-radius:10px;
    font-size:13px
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:50
}

.modal.show{
    display:flex
}

.modalbox{
    width:min(420px,92vw);
    background:#111;
    border:1px solid #333;
    border-radius:22px;
    padding:24px;
    box-shadow:0 20px 80px #000
}

.modalbox h3{
    margin-top:0
}

.modalActions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:16px
}

.login{
    min-height:100vh;
    display:grid;
    place-items:center
}

.loginbox{
    width:min(430px,92vw);
    background:#0d0d0d;
    border:1px solid #292929;
    border-radius:24px;
    padding:30px
}

.adminGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px
}

.checkrow{
    display:flex;
    align-items:center;
    gap:8px
}

.checkrow input{
    width:auto;
    height:auto;
    margin:0
}

.dateInline{
    display:flex;
    align-items:center;
    gap:10px
}

.dateInline label{
    margin:0;
    min-width:220px
}

/* calendar */
.calendarCard{margin-top:18px}
.calNav{display:flex;align-items:center;gap:12px}

.calNav .btn{
    min-width:44px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:14px
}

.calendarGrid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:10px;
    margin-top:10px
}

.calHead{
    margin-top:18px;
    color:#aaa;
    font-weight:900;
    text-align:center;
    font-size:13px
}

.calDay{
    position:relative;
    min-height:86px;
    border:1px solid #242424;
    background:#090909;
    border-radius:18px;
    padding:12px;
    text-decoration:none;
    color:#fff;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:7px;
    box-sizing:border-box
}

.calDay strong{font-size:20px;line-height:1}
.calDay small{color:#bbb;font-weight:900}
.calDay span{font-size:11px;font-weight:900;color:#ff5757}

.calDay em{
    position:absolute;
    left:0;
    bottom:0;
    height:5px;
    background:#777;
    display:block
}

.calDay.full em{background:#39d978}
.calDay.partial em{background:#ffbf38}
.calDay.ended{border-color:#ff5757}
.calDay.ended em{background:#ff5757}
.calDay.none{opacity:.72}
.calDay.active{outline:2px solid #fff;outline-offset:2px}
.calDay.empty{background:transparent;border:0;pointer-events:none}

.calLegend{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:16px;
    color:#bbb;
    font-size:13px
}

.dot{
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#777;
    margin-right:6px
}

.dot.full{background:#39d978}
.dot.partial{background:#ffbf38}
.dot.ended{background:#ff5757}
.dot.none{background:#777}

/* shortcuts */
.shortcutPanel{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    z-index:60;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px
}

.shortcutBox{
    width:min(520px,94vw);
    background:#111;
    border:1px solid #333;
    border-radius:22px;
    padding:24px;
    box-shadow:0 20px 80px #000
}

.shortcutBox h3{
    margin:0;
    font-size:24px
}

.shortcutGrid{
    display:grid;
    grid-template-columns:70px 1fr;
    gap:10px 14px;
    margin-top:18px
}

.shortcutGrid span{
    background:#050505;
    border:1px solid #333;
    border-radius:12px;
    padding:10px;
    text-align:center
}

.shortcutGrid b{
    display:flex;
    align-items:center;
    color:#ddd
}

.card h2{margin-top:0}

input[data-money="1"]{
    appearance:textfield;
    -moz-appearance:textfield
}

.form .wide{
    margin-bottom:30px
}

.form h2{
    margin:30px 0 16px!important;
    line-height:1.2;
    clear:both
}

.form .grid4{
    margin-top:0
}

.dateInline{
    align-items:flex-end!important;
    gap:12px!important
}

.dateInline button{
    height:62px;
    min-width:90px;
    margin-top:0
}

.dateInline input{
    height:62px
}

.topbar .tabs{
    gap:12px
}

.topbar .tabs a{
    min-width:90px
}

.day-end-wrap{
    display:flex;
    justify-content:flex-end;
    margin-bottom:18px;
}

.day-end-btn,
.primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:140px;
    height:48px;
    border-radius:14px;
}

/* responsive */
@media(max-width:1100px){

    .tabs{
        flex-wrap:wrap
    }

    .tabs a,
    .tabs button{
        height:42px;
        padding:0 14px
    }

    .brand{
        font-size:24px
    }
}

@media(max-width:900px){

    .topbar{
        padding:12px;
        align-items:flex-start;
        flex-wrap:wrap
    }

    .brand{
        font-size:24px
    }

    .tabs{
        order:3;
        width:100%;
        overflow:auto
    }

    .tabs a,
    .tabs button{
        height:42px;
        font-size:14px;
        padding:0 14px
    }

    .container{
        width:94vw
    }

    .pageHead,
    .rowBetween{
        align-items:flex-start;
        flex-direction:column
    }

    .progressTop,
    .grid2,
    .grid3,
    .grid4,
    .adminGrid{
        grid-template-columns:1fr
    }

    .moveRow{
        grid-template-columns:1fr
    }

    .xbtn{
        width:100%
    }

    .table{
        min-width:900px
    }

    .dateInline{
        width:100%;
        align-items:stretch!important
    }

    .dateInline label{
        min-width:0;
        width:100%
    }

    .dateInline button{
        width:100%
    }

    .form .wide{
        margin-bottom:24px
    }
}

@media(max-width:800px){

    .calendarGrid{
        gap:6px
    }

    .calDay{
        min-height:66px;
        border-radius:12px;
        padding:8px
    }

    .calDay strong{
        font-size:16px
    }

    .calHead{
        font-size:11px
    }

    .calLegend{
        font-size:12px
    }
}

/* mobile navbar */
@media (max-width:700px){

    .topbar{
        display:grid!important;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:10px;
        padding:10px 10px!important;
    }

    .brand{
        font-size:20px!important;
        line-height:1.1;
        white-space:nowrap;
    }

    .userchip{
        margin-left:0!important;
        padding:8px 14px!important;
        font-size:13px!important;
        height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .tabs{
        grid-column:1 / -1;
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        gap:8px!important;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        padding:2px 0 4px;
        scrollbar-width:none;
    }

    .tabs::-webkit-scrollbar{
        display:none;
    }

    .tabs a,
    .tabs button{
        flex:0 0 auto;
        height:38px!important;
        min-width:auto!important;
        padding:0 14px!important;
        border-radius:12px!important;
        font-size:13px!important;
        white-space:nowrap;
    }

    .container{
        width:94vw!important;
        margin:22px auto!important;
    }
}

@media(max-width:700px){

    .pageHead .dateInline{
        display:grid !important;
        grid-template-columns:1fr auto;
        align-items:end !important;
        gap:10px !important;
        width:100%;
    }

    .pageHead .dateInline label{
        min-width:0 !important;
        width:100% !important;
        margin:0 !important;
    }

    .pageHead .dateInline input{
        height:52px !important;
        margin-top:8px !important;
    }

    .pageHead .dateInline button{
        height:52px !important;
        min-width:110px !important;
        margin:0 !important;
        align-self:end;
    }
}