*{
    box-sizing:border-box
}

:root{
    --bg:#f5f6f8;
    --panel:#fff;
    --border:#e4e7ec;
    --text:#171a21;
    --muted:#727b8c;
    --dark:#181c25;
}

html,body{
    margin:0;
    min-height:100%;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
}

.shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:
      245px minmax(0,1fr);
}

.sidebar{
    position:sticky;
    top:0;
    height:100vh;
    background:#fff;
    border-right:1px solid var(--border);
    padding:30px 18px;
    display:flex;
    flex-direction:column;
}

.logo{
    padding:3px 12px 31px;
    font-size:20px;
    font-weight:900;
    letter-spacing:.12em;
}

nav{
    display:flex;
    flex-direction:column;
    gap:5px;
}

nav a{
    padding:12px 14px;
    color:#596273;
    text-decoration:none;
    border-radius:10px;
    font-weight:650;
}

nav a.active,
nav a:hover{
    background:#f0f2f5;
    color:#11151c;
}

.logout{
    margin-top:auto;
}

.logout button{
    width:100%;
    border:0;
    background:transparent;
    text-align:left;
    color:#747c8c;
    cursor:pointer;
    padding:12px 14px;
    font:inherit;
}

.content{
    width:min(1120px,100%);
    padding:42px 42px 70px;
    margin:0 auto;
}

.mobile-head{
    display:none;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:28px;
}

h1{
    margin:0 0 7px;
    font-size:30px;
    letter-spacing:-.03em;
}

h2,h3{
    margin-top:0;
}

p{
    line-height:1.55;
}

.page-head p,
.page-intro,
.muted,
.hint{
    color:var(--muted);
}

.school-grid{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap:16px;
}

.school-card,
.room-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:22px;
    text-decoration:none;
    color:inherit;
    transition:.15s ease;
}

.school-card:hover,
.room-card:hover{
    transform:translateY(-1px);
    border-color:#cfd4dc;
    box-shadow:
      0 10px 26px
      rgba(22,27,35,.05);
}

.school-card h2,
.room-card h3{
    margin:0 0 7px;
}

.school-card p{
    margin:0;
    color:var(--muted);
}

.arrow{
    font-size:24px;
    color:#8991a0;
}

.panel,
.form-card,
.empty{
    background:#fff;
    border:1px solid var(--border);
    border-radius:15px;
    padding:23px;
    margin-bottom:24px;
}

.section-title{
    font-size:15px;
    font-weight:800;
    margin-bottom:17px;
}

.section-title.outside{
    margin-top:30px;
}

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

.info-grid span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:5px;
}

.room-list{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.room-data{
    display:flex;
    flex-wrap:wrap;
    gap:14px 24px;
    color:var(--muted);
    font-size:13px;
}

.room-data strong{
    color:#313744;
}

label{
    display:block;
    font-size:13px;
    font-weight:750;
    margin:18px 0 7px;
}

input{
    width:100%;
    min-height:45px;
    padding:10px 12px;
    border:1px solid #d6dae2;
    border-radius:10px;
    background:#fff;
    font:inherit;
}

input:focus{
    outline:none;
    border-color:#9098a6;
    box-shadow:
      0 0 0 3px
      rgba(70,80,95,.08);
}

.primary,
.secondary,
button.primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    padding:0 17px;
    border-radius:10px;
    text-decoration:none;
    font-weight:750;
    border:0;
    cursor:pointer;
    font:inherit;
}

.primary,
button.primary{
    background:var(--dark);
    color:#fff;
}

.secondary{
    background:#eceff3;
    color:#303642;
}

.full{
    width:100%;
    margin-top:22px;
}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:24px;
}

.field-help{
    margin-top:7px;
    color:var(--muted);
    font-size:12px;
}

.flash{
    background:#fff5cc;
    border:1px solid #ead478;
    border-radius:10px;
    padding:12px 14px;
    margin-bottom:18px;
}

.back{
    display:inline-block;
    color:#60697a;
    text-decoration:none;
    margin-bottom:20px;
}

.user-chip{
    background:#e9ecf1;
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
}

.login-body{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
}

.login-card{
    width:min(430px,100%);
    background:#fff;
    border:1px solid var(--border);
    border-radius:18px;
    padding:36px;
    box-shadow:
      0 18px 45px
      rgba(24,28,37,.07);
}

.login-brand{
    font-weight:900;
    letter-spacing:.13em;
    margin-bottom:36px;
}

.login-card h1{
    margin-bottom:10px;
}

@media(max-width:760px){

    .shell{
        display:block;
    }

    .sidebar{
        position:static;
        width:100%;
        height:auto;
        border-right:0;
        border-bottom:1px solid var(--border);
        padding:14px;
    }

    .logo{
        padding:5px 5px 13px;
    }

    nav{
        flex-direction:row;
        overflow:auto;
    }

    nav a{
        white-space:nowrap;
    }

    .logout{
        margin-top:8px;
    }

    .content{
        padding:24px 15px 50px;
    }

    .school-grid,
    .info-grid{
        grid-template-columns:1fr;
    }

    .page-head{
        flex-direction:column;
    }

}