:root{
    --blue:#073b8e;
    --yellow:#ffd21f;
    --red:#b40000;
    --ink:#101828;
    --muted:#667085;
    --bg:#f4f7fb;
    --card:#ffffff;
    --line:#e6eaf2;
    --shadow:0 24px 70px rgba(7,59,142,.18);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Inter,Arial,sans-serif;
    background:
        radial-gradient(circle at top left,rgba(255,210,31,.32),transparent 30%),
        linear-gradient(135deg,#eef4ff,#fff 45%,#fff8d8);
    color:var(--ink);
}

.page{
    width:min(1080px,94vw);
    margin:auto;
    padding:38px 0;
}

.hero{
    text-align:center;
    padding:1px 12px;
}

.badge{
    display:inline-flex;
    background:var(--blue);
    color:#fff;
    border:2px solid var(--yellow);
    border-radius:999px;
    padding:8px 16px;
    font-weight:800;
    letter-spacing:.04em;
}

.hero h1{
    font-size:clamp(32px,5vw,62px);
    line-height:1.02;
    margin:18px 0;

    background:linear-gradient(
        90deg,
        var(--blue),
        var(--red)
    );

    -webkit-background-clip:text;
    color:transparent;
}

.hero p{
    color:var(--muted);
    font-size:18px;
}

.card{
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(14px);

    border:1px solid rgba(7,59,142,.12);

    border-radius:28px;

    box-shadow:var(--shadow);

    padding:28px;
}

.grid{
    display:grid;
    gap:18px;
}

.two{
    grid-template-columns:repeat(2,1fr);
}

.three{
    grid-template-columns:repeat(3,1fr);
}

.birth-row{
    display:flex;
    flex-direction:row;
    gap:10px;
    width:100%;
}

.birth-row select{
    flex:1;
    min-width:0;
}

label{
    display:block;
    font-weight:800;
    margin:16px 0 8px;
}

.label-title{
    display:block;
    font-weight:800;
    margin:16px 0 8px;
}

input,
select,
textarea{
    width:100%;

    border:1px solid var(--line);

    border-radius:16px;

    padding:14px 15px;

    font-size:16px;

    background:#fff;

    outline:none;
}

textarea{
    min-height:110px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 4px rgba(7,59,142,.12);
}

.bad{
    border-color:var(--red)!important;
}

.btn{
    width:100%;

    border:0;

    border-radius:18px;

    padding:16px 22px;

    margin-top:20px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0d55c6
        );

    color:#fff;

    font-weight:900;

    font-size:17px;

    cursor:pointer;

    box-shadow:
        0 16px 30px rgba(7,59,142,.22);
}

.btn:hover{
    filter:brightness(1.05);
}

.small-btn{
    width:auto;
    margin:0;
    padding:12px 18px;
}

.small{
    color:var(--muted);
}

.hidden-field{
    position:absolute;
    left:-9999px;
}

.message{
    border-radius:18px;
    padding:18px;
    margin-bottom:20px;
}

.message ul{
    margin:10px 0 0;
}

.success{
    background:#ecfdf3;
    color:#027a48;
    border:1px solid #abefc6;
}

.warning{
    background:#fff8db;
    color:#8a5a00;
    border:1px solid #ffe58a;
}

.error{
    background:#fff1f3;
    color:#b42318;
    border:1px solid #fecdd6;
}

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

.admin-login .card{
    width:min(460px,94vw);
}

.admin-page{
    width:min(1280px,96vw);
    margin:auto;
    padding:28px 0;
}

.admin-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logout,
.search a,
.detail-card a{
    color:var(--blue);
    font-weight:800;
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:22px 0;
}

.stats div{
    background:#fff;

    border:1px solid var(--line);

    border-radius:22px;

    padding:22px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.05);
}

.stats strong{
    display:block;
    font-size:38px;
    color:var(--blue);
}

.stats span{
    color:var(--muted);
}

.search{
    display:flex;
    gap:12px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:22px;

    padding:14px;

    margin-bottom:20px;
}

.table-wrap{
    overflow:auto;

    background:#fff;

    border:1px solid var(--line);

    border-radius:22px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:900px;
}

th,
td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:top;
}

th{
    background:#f8fafc;
    color:var(--blue);
}

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

.actions form{
    margin:0;
}

.mini{
    display:inline-block;

    border:0;

    border-radius:12px;

    padding:9px 12px;

    background:var(--blue);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;
      margin-left:auto;
}

.danger{
    background:var(--red);
}

.pagination{
    display:flex;
    gap:8px;
    justify-content:center;
    margin:22px 0;
    flex-wrap:wrap;
}

.pagination a{
    padding:10px 14px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:12px;

    text-decoration:none;

    color:var(--blue);

    font-weight:600;
}

.pagination a.active{
    background:var(--blue);
    color:#fff;
}

.detail-card{
    margin:20px 0;
}

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

.detail-grid div{
    background:#f8fafc;

    border:1px solid var(--line);

    border-radius:14px;

    padding:12px;
}

.detail-grid b{
    display:block;
    color:var(--blue);
    margin-bottom:5px;
}

.conditional{
    display:none;
}

@media(max-width:760px){

    .two,
    .stats,
    .detail-grid{
        grid-template-columns:1fr;
    }

    .card{
        padding:20px;
        border-radius:22px;
    }

    .hero{
        text-align:left;
    }

    .search{
        flex-direction:column;
    }

    .admin-top{
        align-items:flex-start;
        gap:10px;
        flex-direction:column;
    }

    .stats strong{
        font-size:30px;
    }

    .birth-row{
        display:flex;
        flex-direction:row;
        gap:8px;
    }

    .birth-row select{
        flex:1;
        min-width:0;
        font-size:14px;
        padding:12px 8px;
    }
}

.note-form{
    margin-top:8px;
}

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

.note-row input{
    flex:1;
}

@media(max-width:760px){

    .note-row{
        flex-direction:column;
    }

    .note-row button{
        width:100%;
    }

}

.note-line td{
    background:#f8fafc;
    padding-top:8px;
}

.note-form{
    margin:0;
}

.note-row{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:100%;
}

.note-row textarea{
    flex:1;
    min-height:46px;
    height:46px;
    resize:vertical;
    padding:12px 14px;
}

.note-row .mini{
    min-width:110px;
    height:46px;
    align-self:flex-start;
}

@media(max-width:760px){

    .admin-page{
        width:94vw;
        padding:18px 0;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .search{
        flex-direction:column;
    }

    .search .btn,
    .search input{
        width:100%;
    }

    .table-wrap{
        border-radius:18px;
        overflow-x:auto;
    }

    table{
        min-width:760px;
    }

    th,
    td{
        padding:11px 10px;
        font-size:14px;
    }

    .actions{
        flex-direction:column;
        align-items:flex-start;
    }

    .actions .mini,
    .actions form,
    .actions button{
        width:100%;
    }

    .note-row{
        flex-direction:row;
        gap:8px;
    }

    .note-row textarea{
        min-height:46px;
        height:46px;
        font-size:14px;
    }

    .note-row .mini{
        width:auto;
        min-width:92px;
        padding:9px 10px;
    }

    .pagination{
        flex-wrap:wrap;
    }
}

.admin-table{
    min-width:0;
}

@media(max-width:760px){

    .table-wrap{
        overflow:visible;
        background:transparent;
        border:0;
        box-shadow:none;
    }

    .admin-table,
    .admin-table thead,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td{
        display:block;
        width:100%;
    }

    .admin-table thead{
        display:none;
    }

    .person-row{
        background:#fff;
        border:1px solid var(--line);
        border-radius:18px 18px 0 0;
        padding:10px;
        margin-top:14px;
        box-shadow:0 8px 22px rgba(0,0,0,.05);
    }

    .person-row td{
        border-bottom:1px solid var(--line);
        padding:10px 4px;
        font-size:14px;
    }

    .person-row td::before{
        content:attr(data-label);
        display:block;
        font-weight:900;
        color:var(--blue);
        margin-bottom:4px;
    }

    .person-row td:last-child{
        border-bottom:0;
    }

    .note-line{
        display:block;
        background:#fff;
        border:1px solid var(--line);
        border-top:0;
        border-radius:0 0 18px 18px;
        padding:10px;
    }

    .note-line td{
        display:block;
        width:100%;
        padding:0;
        border:0;
    }

    .actions{
        display:flex;
        flex-direction:row;
        gap:8px;
    }

    .actions .mini,
    .actions form,
    .actions button{
        width:100%;
        text-align:center;
    }

    .note-row{
        display:flex;
        flex-direction:row;
        gap:8px;
        width:100%;
    }

    .note-row textarea{
        flex:1;
        min-width:0;
        height:46px;
        min-height:46px;
        resize:vertical;
    }

    .note-row .mini{
        width:auto;
        min-width:86px;
        height:46px;
    }
}

.person-row:nth-of-type(4n+1),
.person-row:nth-of-type(4n+1) + .note-line{
    background:#ffffff;
}

.person-row:nth-of-type(4n+3),
.person-row:nth-of-type(4n+3) + .note-line{
    background:#eef4ff;
}

.person-row:nth-of-type(4n+1) td,
.person-row:nth-of-type(4n+1) + .note-line td{
    background:#ffffff;
}

.person-row:nth-of-type(4n+3) td,
.person-row:nth-of-type(4n+3) + .note-line td{
    background:#eef4ff;
}

@media(max-width:760px){

    .person-row:nth-of-type(4n+1),
    .person-row:nth-of-type(4n+1) + .note-line{
        background:#ffffff;
    }

    .person-row:nth-of-type(4n+3),
    .person-row:nth-of-type(4n+3) + .note-line{
        background:#eef4ff;
    }
}

.stats-four{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.stat-blue{
    background:#eef4ff!important;
}

.stat-yellow{
    background:#fff8db!important;
}

.stat-green{
    background:#ecfdf3!important;
}

.stat-red{
    background:#fff1f3!important;
}

.stat-view{
    display:inline-block;
    margin-top:10px;
}

.deleted-note{
    padding:12px;
    border-radius:14px;
    background:rgba(255,255,255,.65);
}

@media(max-width:760px){
    .stats-four{
        grid-template-columns:1fr;
    }
}


.stat-purple{
    background:#f4efff!important;
}