/* ===================================
   BUTTONS
=================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    min-height:54px;

    padding:14px 20px;

    border:3px solid var(--text);

    font-family:"Plus Jakarta Sans",sans-serif;

font-size:15px;

font-weight:700;

    text-transform:uppercase;

    text-decoration:none;

    cursor:pointer;

    transition:.15s;

}

.btn-primary{

    background:var(--primary);

    color:var(--white);

    box-shadow:4px 4px 0 var(--text);

}

.btn-secondary{

    background:var(--surface);

    color:var(--text);

    box-shadow:4px 4px 0 var(--text);

}

.btn-primary:hover,
.btn-secondary:hover{

    filter:brightness(1.05);

}

.btn-primary:active,
.btn-secondary:active{

    transform:translate(4px,4px);

    box-shadow:none;

}

/* ===================================
   WINDOW
=================================== */

.window-box{

    width:min(92%,560px);

    margin:70px auto;

    padding:30px;

    background:var(--surface);

    color:var(--text);

    border:4px solid var(--text);

    box-shadow:8px 8px 0 var(--secondary);

}

.window-title{

    margin-bottom:25px;

    color:var(--text);

    text-align:center;

    font-family:"Press Start 2P",cursive;

    font-size:16px;

    line-height:1.8;

}

.window-divider{

    margin:25px 0;

    border-top:3px solid var(--text);

}

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

.status-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:12px 0;

    color:var(--text);

}

.status-dot{

    width:14px;

    height:14px;

    flex-shrink:0;

    border:3px solid var(--text);

}

.status-dot.active{

    background:var(--text);

}

/* ===================================
   INPUTS
=================================== */

.label{

    display:block;

    margin-bottom:8px;

    color:var(--text);

    font-weight:bold;

}

.input{

    width:100%;

    padding:14px;

    background:var(--white);

    color:var(--text);

    border:3px solid var(--text);

    outline:none;

}

.input:focus{

    border-color:var(--primary);

}

/* ===================================
   CARD
=================================== */

.card{

    padding:24px;

    background:var(--surface);

    color:var(--text);

    border:4px solid var(--text);

    box-shadow:8px 8px 0 var(--secondary);

}

/* ===================================
   GROUPS
=================================== */

.button-group{

    display:grid;

    gap:16px;

    margin-top:10px;

}