*{
    box-sizing:border-box
}

body{
    margin:0;
    font-family:Arial,sans-serif;
    background:#f3f6fa;
    color:#172033
}

.container{
    max-width:760px;
    margin:40px auto;
    padding:16px
}

.wide{
    max-width:1200px
}

.card{
    background:#fff;
    border-radius:16px;
    padding:28px;
    box-shadow:0 8px 30px #00000010;
    margin-bottom:20px
}

.small{
    max-width:460px;
    margin:auto
}

.hero{
    text-align:center;
    padding:42px 28px
}

/* =========================
   BADGE / LOGO UNIMED
   ========================= */

.badge{
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:12px;
    color:#345
}

.badge a{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 16px;
    border-radius:14px;
    color:inherit;
    text-decoration:none;
    background:rgba(52,68,85,.08);
    transition:all .25s ease
}

.badge a:hover{
    transform:translateY(-2px);
    background:rgba(52,68,85,.15);
    box-shadow:0 5px 15px rgba(0,0,0,.12)
}

.badge-logo{
    width:60px;
    height:60px;
    object-fit:contain;
    display:block
}

.badge-arrow{
    font-size:14px;
    opacity:.65;
    transition:transform .25s ease
}

.badge a:hover .badge-arrow{
    transform:translate(2px,-2px);
    opacity:1
}

/* =========================
   STATUS
   ========================= */

.status{
    padding:18px;
    border-radius:12px;
    font-weight:800;
    font-size:20px;
    margin-bottom:18px
}

.valid{
    background:#e8f7ed;
    color:#16733b
}

.invalid{
    background:#fdecec;
    color:#a21d1d
}

.cancelled{
    background:#fff4dc;
    color:#8a5a00
}

/* =========================
   DETAIL
   ========================= */

.details{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:10px;
    border-top:1px solid #ddd;
    margin-top:20px;
    padding-top:20px
}

.details b{
    color:#5b6575
}

/* =========================
   FOOTER & MUTED
   ========================= */

.footer,
.muted{
    color:#6b7280;
    font-size:13px;
    margin-top:24px
}

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

label{
    display:block;
    font-weight:700;
    margin:14px 0 6px
}

input,
select,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #ccd3dd;
    border-radius:9px;
    font:inherit
}

textarea{
    min-height:90px
}

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

button,
.button{
    display:inline-block;
    border:0;
    border-radius:9px;
    padding:12px 16px;
    background:#173b6d;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    cursor:pointer;
    margin-top:14px
}

.secondary{
    background:#697586
}

/* =========================
   DOWNLOAD
   ========================= */

.download-area{
    text-align:center;
    margin-top:22px
}

.download-area .button{
    display:inline-block
}

/* =========================
   ALERT
   ========================= */

.alert{
    padding:12px;
    background:#fdecec;
    color:#a21d1d;
    border-radius:9px
}

/* =========================
   TOP
   ========================= */

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

/* =========================
   STATISTICS
   ========================= */

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

.stats strong{
    display:block;
    font-size:28px;
    margin-top:8px
}

/* =========================
   SEARCH
   ========================= */

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

.search button{
    margin-top:0
}

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

.tablewrap{
    overflow:auto;
    margin-top:20px
}

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

th,
td{
    text-align:left;
    padding:11px;
    border-bottom:1px solid #e5e7eb
}

/* =========================
   QR CODE
   ========================= */

#qrcode{
    margin:20px 0
}

#url{
    max-width:70%
}

/* =========================
   404 ERROR PAGE
   ========================= */

.error-page{
    text-align:center
}

.error-code{
    font-size:86px;
    line-height:1;
    font-weight:800;
    color:#173b6d;
    letter-spacing:2px;
    margin:25px 0 10px
}

.error-page h1{
    margin:0;
    font-size:28px;
    color:#172033
}

.error-message{
    max-width:500px;
    margin:14px auto 5px;
    color:#6b7280;
    line-height:1.6
}

.error-page .button{
    margin-top:22px
}

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

@media(max-width:700px){

    .top{
        display:block
    }

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

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

    .search{
        display:block
    }

    .search>*{
        margin-bottom:8px
    }

    .hero{
        padding:30px 18px
    }

    #url{
        max-width:100%
    }

    .badge a{
        padding:8px 13px
    }

    .badge-logo{
        width:36px;
        height:36px
    }

    .error-code{
        font-size:64px
    }

    .error-page h1{
        font-size:23px
    }

    .error-message{
        font-size:14px
    }
}