@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root{
    --green:#18794e;
    --green2:#219b65;
    --soft:#eaf7f0;
    --cream:#f8faf7;
    --ink:#1c2a24;
    --muted:#718078;
    --line:#e5ebe7;
    --white:#fff;
    --red:#d9534f;
    --orange:#e89b31
}

*{
    box-sizing:border-box
}

body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'DM Sans',sans-serif
}

a{
    text-decoration:none;
    color:inherit
}

button,
input,
select,
textarea{
    font:inherit
}

.app-shell{
    display:flex;
    min-height:100vh
}

.sidebar{
    width:255px;
    background:#123d2b;
    color:#dceee4;
    position:fixed;
    inset:0 auto 0 0;
    display:flex;
    flex-direction:column;
    padding:24px 15px;
    z-index:20
}

.brand{
    display:flex;
    gap:11px;
    align-items:center;
    padding:4px 10px 30px
}

.brand img{
    width:43px;
    height:43px
}

.brand strong{
    display:block;
    font-size:19px;
    color:#fff
}

.brand small{
    display:block;
    font-size:10px;
    color:#9fc1af;
    margin-top:2px
}

.sidebar nav{
    display:grid;
    gap:5px
}

.sidebar nav a,
.logout{
    padding:12px 14px;
    border-radius:11px;
    color:#b9d5c7;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:12px
}

.sidebar nav a i,
.logout i{
    width:18px
}

.sidebar nav a:hover,
.sidebar nav a.active{
    background:#1b5a40;
    color:#fff
}

.sidebar-bottom{
    margin-top:auto
}

.office-card{
    padding:13px;
    background:#173f2f;
    border:1px solid #285c47;
    border-radius:12px;
    font-size:11px;
    color:#a9cbb9;
    display:flex;
    gap:8px;
    margin-bottom:10px
}

.logout:hover{
    background:#a83b3b;
    color:#fff
}

.main{
    margin-left:255px;
    width:calc(100% - 255px);
    min-height:100vh
}

.topbar{
    height:78px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    padding:0 34px;
    gap:14px
}

.top-title{
    font-weight:700;
    display:block
}

.topbar small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:2px
}

.menu-btn{
    display:none;
    border:0;
    background:none;
    font-size:20px
}

.top-user{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:9px
}

.avatar{
    width:36px;
    height:36px;
    background:var(--soft);
    color:var(--green);
    border-radius:50%;
    display:grid;
    place-items:center
}

.top-user b{
    font-size:12px
}

.content{
    padding:32px;
    max-width:1500px;
    margin:auto
}

.welcome,
.page-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}

.welcome h1,
.page-heading h1{
    font:700 29px 'Playfair Display',serif;
    margin:5px 0
}

.welcome p,
.page-heading p{
    margin:0;
    color:var(--muted);
    font-size:13px
}

.eyebrow{
    font-size:10px;
    letter-spacing:1.5px;
    font-weight:700;
    color:var(--green)
}

.btn{
    border:0;
    border-radius:10px;
    padding:11px 17px;
    cursor:pointer;
    font-weight:600;
    font-size:13px;
    display:inline-flex;
    align-items:center;
    gap:8px
}

.btn.primary{
    background:var(--green);
    color:#fff;
    box-shadow:0 7px 16px #18794e22
}

.btn.primary:hover{
    background:#12633f
}

.btn.ghost{
    background:#fff;
    border:1px solid var(--line);
    color:var(--ink)
}

.btn.full{
    width:100%;
    justify-content:center;
    margin-top:22px
}

.btn.small{
    padding:7px 10px;
    font-size:11px
}

.success-btn{
    background:#e8f7ef;
    color:#18794e;
    border:0
}

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

.stat-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:13px
}

.stat-icon{
    width:42px;
    height:42px;
    border-radius:11px;
    display:grid;
    place-items:center
}

.stat-icon.blue{
    background:#edf5ff;
    color:#3677cc
}

.stat-icon.green{
    background:#e9f7ef;
    color:#198653
}

.stat-icon.orange{
    background:#fff4e5;
    color:#d78b22
}

.stat-icon.red{
    background:#fff0ef;
    color:#d9534f
}

.stat-icon.purple{
    background:#f3efff;
    color:#7657c7
}

.stat-card small{
    font-size:11px;
    color:var(--muted)
}

.stat-card h2{
    font-size:23px;
    margin:3px 0 0
}

.section-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px
}

.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:20px;
    overflow:hidden
}

.card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:14px
}

.card-head h3,
.quick h3{
    font-size:15px;
    margin:0
}

.card-head p{
    font-size:11px;
    color:var(--muted);
    margin:4px 0 0
}

.card-head>a{
    font-size:11px;
    color:var(--green);
    font-weight:700
}

.table-wrap{
    overflow:auto
}

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

th{
    text-align:left;
    background:#fafcfb;
    color:#819087;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.7px;
    padding:12px
}

td{
    padding:13px 12px;
    border-top:1px solid #eef2ef;
    font-size:12px
}

td small{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:3px
}

.badge{
    display:inline-block;
    padding:5px 9px;
    border-radius:20px;
    font-size:10px;
    font-weight:700
}

.badge.success{
    background:#e8f7ef;
    color:#18794e
}

.badge.warning{
    background:#fff4df;
    color:#ad711c
}

.badge.neutral{
    background:#f0f3f1;
    color:#66736d
}

.quick a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    color:var(--green)
}

.quick a:last-child{
    border-bottom:0
}

.quick a>i{
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--soft);
    display:grid;
    place-items:center
}

.quick a span{
    flex:1
}

.quick a b{
    font-size:12px
}

.quick a small{
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:400;
    margin-top:2px
}

.toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
    color:var(--muted);
    font-size:11px
}

.search{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    width:340px;
    display:flex;
    align-items:center;
    padding:0 12px;
    color:#98a49e
}

.search input{
    border:0;
    outline:0;
    padding:11px;
    width:100%;
    font-size:12px
}

.code{
    background:#eef8f2;
    color:var(--green);
    padding:5px 7px;
    border-radius:6px;
    font-size:10px;
    font-weight:700
}

.stock{
    font-weight:700;
    color:var(--green)
}

.stock.low{
    color:var(--red)
}

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

.icon-btn{
    border:0;
    background:#f4f7f5;
    border-radius:7px;
    padding:7px 9px;
    cursor:pointer
}

.danger-text{
    color:var(--red)
}

.empty{
    text-align:center;
    color:var(--muted);
    padding:30px!important
}

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:#0d241a88;
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:20px;
    overflow-y:auto;
}

.modal.show{
    display:flex;
}

.modal-box{
    background:#fff;
    border-radius:16px;
    width:min(650px,100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    overflow-x:hidden;
    padding:22px;
    box-shadow:0 25px 70px #0003;
}

/* Scrollbar modal */
.modal-box::-webkit-scrollbar{
    width:7px;
}

.modal-box::-webkit-scrollbar-track{
    background:#f1f4f2;
    border-radius:10px;
}

.modal-box::-webkit-scrollbar-thumb{
    background:#b8c8c0;
    border-radius:10px;
}

.modal-box::-webkit-scrollbar-thumb:hover{
    background:#8da99b;
}


/* =========================================
   PARAF / TANDA TANGAN
   ========================================= */

.signature-wrapper{
    width:100%;
    max-width:600px;
    height:150px;
    border:1px solid #d9e2dd;
    border-radius:10px;
    background:#fff;
    overflow:hidden;
}

#signatureCanvas{
    display:block;
    width:100%;
    height:100%;
    cursor:crosshair;
    touch-action:none;
}
/* =========================================
   MODAL BUKU TAMU
   ========================================= */

#guestModal{
    overflow-y:auto;
    padding:20px;
}

#guestModal .modal-box{
    width:min(650px,100%);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    overflow-x:hidden;
}

/* Scrollbar modal */
#guestModal .modal-box::-webkit-scrollbar{
    width:7px;
}

#guestModal .modal-box::-webkit-scrollbar-track{
    background:#f1f4f2;
    border-radius:10px;
}

#guestModal .modal-box::-webkit-scrollbar-thumb{
    background:#b8c8c0;
    border-radius:10px;
}

#guestModal .modal-box::-webkit-scrollbar-thumb:hover{
    background:#8da99b;
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px
}

.modal-head h3{
    margin:0;
    font-size:18px
}

.modal-head button{
    border:0;
    background:#f1f4f2;
    border-radius:50%;
    width:30px;
    height:30px;
    cursor:pointer;
    font-size:20px
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.form-grid>div{
    display:flex;
    flex-direction:column;
    gap:6px
}

.full-field{
    grid-column:1/-1
}

label{
    font-size:11px;
    font-weight:700;
    color:#56645d
}

input,
select,
textarea{
    border:1px solid #dce5df;
    border-radius:9px;
    padding:10px 11px;
    outline:none;
    background:#fff;
    font-size:12px
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--green);
    box-shadow:0 0 0 3px #18794e12
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:22px
}

.alert{
    padding:11px 14px;
    border-radius:9px;
    margin-bottom:18px;
    font-size:12px;
    display:flex;
    gap:8px;
    align-items:center
}

.alert.success{
    background:#e8f7ef;
    color:#176b47
}

.alert.danger{
    background:#fff0ef;
    color:#b33f3b
}

.alert button{
    margin-left:auto;
    border:0;
    background:none;
    cursor:pointer;
    font-size:18px
}

.report-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}

.bar-row{
    display:grid;
    grid-template-columns:70px 1fr 30px;
    gap:10px;
    align-items:center;
    margin:15px 0;
    font-size:11px
}

.bar-row>div{
    height:9px;
    background:#edf1ef;
    border-radius:10px;
    overflow:hidden
}

.bar-row i{
    height:100%;
    display:block;
    background:var(--green);
    border-radius:10px
}

.popular{
    margin:0;
    padding:0;
    list-style:none
}

.popular li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 0;
    border-bottom:1px solid var(--line);
    font-size:12px
}

.popular li>span{
    width:25px;
    height:25px;
    border-radius:7px;
    background:var(--soft);
    display:grid;
    place-items:center;
    color:var(--green);
    font-weight:700
}

.popular b{
    flex:1
}

.popular em{
    font-style:normal;
    color:var(--muted);
    font-size:10px
}

footer{
    text-align:center;
    color:#98a39e;
    font-size:10px;
    padding:25px
}

.login-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    background:#fff
}

.login-visual{
    background:linear-gradient(145deg,#123d2b,#1d6b4b);
    color:#fff;
    padding:42px 7vw;
    position:relative;
    overflow:hidden
}

.login-brand{
    display:flex;
    align-items:center;
    gap:12px
}

.login-brand img{
    width:47px
}

.login-brand b{
    display:block;
    font-size:20px
}

.login-brand span{
    font-size:10px;
    color:#b9d5c7
}

.login-copy{
    position:relative;
    z-index:2;
    max-width:520px;
    margin-top:22vh
}

.login-copy h1{
    font:700 clamp(40px,5vw,67px) 'Playfair Display',serif;
    line-height:1.03;
    margin:13px 0
}

.login-copy h1 em{
    color:#8ee0b7;
    font-style:normal
}

.login-copy p{
    color:#bed7ca;
    line-height:1.7;
    font-size:14px;
    max-width:450px
}

.login-book{
    position:absolute;
    font-size:260px;
    right:3vw;
    bottom:-35px;
    opacity:.08;
    transform:rotate(-12deg)
}

.login-panel{
    display:grid;
    place-items:center;
    padding:30px
}

.login-box{
    width:min(390px,100%)
}

.login-box h2{
    font:700 31px 'Playfair Display',serif;
    margin:7px 0
}

.muted{
    color:var(--muted);
    font-size:12px
}

.login-box form{
    margin-top:28px
}

.login-box label{
    display:block;
    margin:15px 0 7px
}

.input-icon{
    position:relative
}

.input-icon>span{
    position:absolute;
    left:12px;
    top:10px;
    color:#9aa69f;
    font-size:13px
}

.input-icon input{
    width:100%;
    padding-left:34px
}

.eye{
    position:absolute;
    right:6px;
    top:5px;
    border:0;
    background:#f2f5f3;
    padding:6px 8px;
    border-radius:6px;
    color:#607068;
    font-size:10px
}

.login-note{
    text-align:center;
    margin-top:20px;
    background:#f5f8f6;
    padding:11px;
    border-radius:9px;
    font-size:10px;
    color:#74817a
}

.mobile-logo{
    display:none
}


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

@media(max-width:1100px){

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

    .section-grid,
    .report-grid{
        grid-template-columns:1fr
    }
}

@media(max-width:800px){

    .sidebar{
        transform:translateX(-100%);
        transition:.25s
    }

    .sidebar.open{
        transform:translateX(0)
    }

    .main{
        margin-left:0;
        width:100%
    }

    .menu-btn{
        display:block
    }

    .topbar{
        padding:0 18px
    }

    .content{
        padding:22px 16px
    }

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

    .welcome,
    .page-heading{
        align-items:flex-start;
        flex-direction:column
    }

    .login-page{
        grid-template-columns:1fr
    }

    .login-visual{
        display:none
    }

    .mobile-logo{
        display:block;
        width:55px;
        margin-bottom:22px
    }

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

    .full-field{
        grid-column:auto
    }

    .search{
        width:100%
    }

    .toolbar{
        gap:10px;
        flex-direction:column;
        align-items:stretch
    }
}

@media(max-width:480px){

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

    .top-user div{
        display:none
    }
}

/* =========================================
   CETAK BUKU TAMU
   TANPA TANGGAL & TANPA PENCARIAN
   ========================================= */
/* =========================================
   CETAK BUKU TAMU
 /* =========================================
   CETAK BUKU TAMU
   ========================================= */

@media print {

    @page {
        size: A4 landscape;
        margin: 10mm;
    }


    /* ===============================
       HILANGKAN ELEMEN WEBSITE
       =============================== */

    .sidebar,
    .topbar,
    footer,
    .btn,
    .page-heading .btn,
    .actions,
    .icon-btn,
    .modal,
    .toolbar,
    .toolbar *,
    .search,
    .search *,
    .search-box,
    .search-box *,
    .filter-bar,
    .filter-bar *,
    .no-print {
        display: none !important;
    }


    /* ===============================
       BODY
       =============================== */

    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        min-height: auto !important;
        background: #fff !important;
        color: #1c2a24 !important;
    }


    /* ===============================
       LAYOUT
       =============================== */

    .app-shell {
        display: block !important;
        min-height: auto !important;
    }

    .main {
        margin: 0 !important;
        width: 100% !important;
        min-height: auto !important;
    }

    .content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    /* ===============================
       JUDUL
       =============================== */

    .page-heading {
        display: block !important;
        margin: 0 0 15px 0 !important;
        padding: 0 0 10px 0 !important;
        border-bottom: 2px solid #18794e !important;
    }

    .eyebrow {
        display: block !important;
        font-size: 8px !important;
        letter-spacing: 2px !important;
        font-weight: 700 !important;
        color: #18794e !important;
        margin-bottom: 3px !important;
    }

    .page-heading h1 {
        font-family: 'Playfair Display', serif !important;
        font-size: 25px !important;
        line-height: 1.2 !important;
        margin: 0 0 4px 0 !important;
        color: #1c2a24 !important;
    }

    .page-heading p {
        display: block !important;
        margin: 0 !important;
        font-size: 9px !important;
        color: #718078 !important;
    }


    /* ===============================
       STATISTIK
       =============================== */

    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin: 0 0 15px 0 !important;
    }

    .stat-card {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        background: #fff !important;
        border: 1px solid #dce5df !important;
        border-radius: 7px !important;

        padding: 9px !important;
        box-shadow: none !important;
    }

    .stat-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 7px !important;
    }

    .stat-card small {
        font-size: 8px !important;
        color: #718078 !important;
    }

    .stat-card strong {
        font-size: 15px !important;
        margin: 2px 0 0 !important;
        color: #1c2a24 !important;
    }


  /* ===============================
   SEMBUNYIKAN PENCARIAN/FILTER
   SAAT CETAK
   =============================== */

.guest-filter {
    display: none !important;
}


    /* ===============================
       DAFTAR PENGUNJUNG
       =============================== */

    .card {
        width: 100% !important;
        background: #fff !important;

        border: 1px solid #dce5df !important;
        border-radius: 7px !important;

        padding: 10px !important;
        margin: 0 !important;

        box-shadow: none !important;
        overflow: visible !important;
    }

    .card-head {
        display: block !important;
        margin-bottom: 10px !important;
    }

    .card-head h3 {
        font-size: 14px !important;
        margin: 0 !important;
        color: #1c2a24 !important;
    }

    .card-head p {
        font-size: 8px !important;
        color: #718078 !important;
        margin: 3px 0 0 !important;
    }


    /* ===============================
       TABEL
       =============================== */

    .table-wrap {
        width: 100% !important;
        overflow: visible !important;
    }

    table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        border-collapse: collapse !important;
        table-layout: fixed !important;
    }

    thead {
        display: table-header-group !important;
    }

    tbody {
        display: table-row-group !important;
    }

    tr {
        page-break-inside: avoid !important;
    }

    th {
        background: #f1f6f3 !important;
        color: #52645a !important;

        border: 1px solid #dce5df !important;

        padding: 6px 4px !important;

        font-size: 7px !important;
        line-height: 1.25 !important;

        text-align: center !important;
        vertical-align: middle !important;
    }

    td {
        background: #fff !important;
        color: #1c2a24 !important;

        border: 1px solid #dce5df !important;

        padding: 6px 4px !important;

        font-size: 7.5px !important;
        line-height: 1.3 !important;

        vertical-align: middle !important;

        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }


    /* ===============================
       LEBAR KOLOM
       TOTAL = 100%
       =============================== */
/* ===============================
   LEBAR KOLOM CETAK
   =============================== */

/* No */
th:nth-child(1),
td:nth-child(1) {
    width: 4% !important;
    text-align: center !important;
}

/* Nama */
th:nth-child(2),
td:nth-child(2) {
    width: 16% !important;
}

/* Asal */
th:nth-child(3),
td:nth-child(3) {
    width: 13% !important;
}

/* Keperluan */
th:nth-child(4),
td:nth-child(4) {
    width: 12% !important;
}

/* Tanggal */
th:nth-child(5),
td:nth-child(5) {
    width: 10% !important;
    text-align: center !important;
}

/* Jam Masuk */
th:nth-child(6),
td:nth-child(6) {
    width: 9% !important;
    text-align: center !important;
}

/* Jam Keluar */
th:nth-child(7),
td:nth-child(7) {
    width: 9% !important;
    text-align: center !important;
}

/* Kesan & Saran */
th:nth-child(8),
td:nth-child(8) {
    width: 16% !important;
}

/* PARAF */
th:nth-child(9),
td:nth-child(9) {
    width: 11% !important;
    text-align: center !important;
}

/* AKSI */
th:nth-child(10),
td:nth-child(10) {
    display: none !important;
}

    /* ===============================
       GAMBAR PARAF
       =============================== */

    td.guest-signature img {
        display: block !important;

        width: 70px !important;
        height: 40px !important;

        max-width: 100% !important;

        object-fit: contain !important;

        margin: 0 auto !important;
    }


    /* ===============================
       HINDARI TERPOTONG
       =============================== */

    .card,
    .stat-card,
    table {
        page-break-inside: avoid !important;
    }
}
/* =========================================
   UBAH KATA SANDI
   ========================================= */

.password-page {
    max-width:720px;
    margin:0 auto
}

.password-card {
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:30px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05)
}

.password-header {
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:28px
}

.password-icon {
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff7ed;
    color:#ea580c;
    font-size:21px
}

.password-header h2 {
    margin:0 0 5px;
    font-size:22px
}

.password-header p {
    margin:0;
    color:#6b7280;
    font-size:14px
}

.password-form {
    display:flex;
    flex-direction:column;
    gap:20px
}

.form-group {
    display:flex;
    flex-direction:column;
    gap:8px
}

.form-group label {
    font-weight:600;
    font-size:14px;
    color:#374151
}

.password-input {
    position:relative
}

.password-input input {
    width:100%;
    box-sizing:border-box;
    padding:12px 46px 12px 14px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:14px;
    outline:none
}

.password-input input:focus {
    border-color:#ea580c;
    box-shadow:0 0 0 3px rgba(234,88,12,0.1)
}

.toggle-password {
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:#6b7280;
    cursor:pointer;
    padding:6px
}

.toggle-password:hover {
    color:#ea580c
}

.password-info {
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    border-radius:10px;
    background:#fff7ed;
    color:#9a3412;
    font-size:13px
}

.password-actions {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:5px
}

.password-actions a,
.password-actions button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 17px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer
}

.btn-secondary {
    border:1px solid #d1d5db;
    background:#ffffff;
    color:#374151
}

.btn-secondary:hover {
    background:#f9fafb
}

.btn-primary {
    border:none;
    background:#ea580c;
    color:#ffffff
}

.btn-primary:hover {
    background:#c2410c
}


/* =========================================
   RESPONSIVE PASSWORD
   ========================================= */

@media (max-width:600px) {

    .password-card {
        padding:20px
    }

    .password-actions {
        flex-direction:column-reverse
    }

    .password-actions a,
    .password-actions button {
        width:100%
    }
}