/* ==========================================
   GLOBAL
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --background:#0f1b35;
    --background-light:#16264b;
    --panel:#1b2b52;

    --primary:#49d8ff;

    --text:#f2f7ff;
    --text-secondary:#9eb7d9;

    --border:#35517d;

    --success:#48e38a;
    --danger:#ff6b6b;

    --shadow:0 8px 30px rgba(0,0,0,.35);

    --radius:18px;
}

body{

    font-family:"Segoe UI",Roboto,sans-serif;
    background:linear-gradient(135deg,#0c1730,#162c58);
    color:var(--text);
    min-height:100vh;

}

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

main{

    max-width:60rem;
    margin:2rem auto;
    padding:0 1.5rem;

}

/* ==========================================
   NAVBAR
========================================== */

nav{

    background:#132343;
    border-bottom:1px solid var(--border);

}

nav ul{

    list-style:none;

    display:flex;

    align-items:center;

    gap:1.25rem;

    max-width:60rem;

    margin:0 auto;

    padding:0.85rem 1.5rem;

}

nav a,
nav button{

    color:var(--text);

    background:none;

    border:none;

    cursor:pointer;

    font:inherit;

    text-decoration:none;

}

/* ==========================================
   TITLES
========================================== */

h1{

    font-size:34px;
    margin-bottom:25px;
    font-weight:600;

}

h2{

    font-size:18px;
    color:var(--text-secondary);
    margin-bottom:20px;

}

.page-header{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1rem;

}

.page-header h1{

    margin:0;
    font-size:1.6rem;

}

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

button,
.btn{

    background:var(--primary);

    color:#06203d;

    border:none;
    border-radius:12px;

    padding:12px 20px;

    cursor:pointer;

    font-weight:600;

    font-size:0.9rem;

    text-decoration:none;

    display:inline-block;

}

.btn-light{

    background:transparent;
    color:var(--text);
    border:1px solid var(--border);

}

.btn-danger{

    background:var(--danger);
    color:#06203d;

}

/* ==========================================
   CARDS
========================================== */

.card{

    background:linear-gradient(180deg,#1d315d,#18284c);

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

    border-radius:var(--radius);

    padding:20px;

    box-shadow:var(--shadow);

    margin-bottom:1rem;

}

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

table{

    width:100%;
    border-collapse:collapse;

}

th,
td{

    text-align:left;
    padding:0.6rem 0.75rem;
    border-bottom:1px solid var(--border);

}

th{

    color:var(--text-secondary);
    font-weight:600;

}

code{

    background:rgba(73,216,255,.12);
    color:var(--primary);
    padding:0.15rem 0.4rem;
    border-radius:6px;
    font-size:0.9em;

}

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

input,
select,
textarea{

    width:100%;

    padding:12px 15px;

    border-radius:12px;

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

    background:#132343;

    color:white;

    outline:none;

    font:inherit;

}

input:focus,
select:focus,
textarea:focus{

    border-color:var(--primary);

}

form p{

    display:flex;
    flex-direction:column;
    gap:0.25rem;
    margin-bottom:0.75rem;

}

.helptext{

    color:var(--text-secondary);
    font-size:0.85rem;

}

.error{

    color:var(--danger);
    font-weight:600;

}

/* ==========================================
   ACTIONS
========================================== */

.crud-actions{

    display:flex;
    gap:0.5rem;
    margin-top:1rem;

}

.key-box{

    background:#132343;
    border:1px solid var(--border);
    color:var(--text);
    padding:1rem;
    border-radius:12px;
    overflow-wrap:break-word;
    white-space:pre-wrap;
    margin-top:0.75rem;

}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#11203d;

}

::-webkit-scrollbar-thumb{

    background:#31548a;

    border-radius:10px;

}

/* ==========================================
   ANIMATIONS
========================================== */

.fade{

    animation:fade .4s ease;

}

@keyframes fade{

    from{

        opacity:0;
        transform:translateY(15px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}