*{
    box-sizing:border-box;
}

body{
    margin:0;
    height:100vh;
    font-family:Segoe UI,Arial,sans-serif;
    color:#eee;
    background:
        radial-gradient(circle at 30% 20%, #1f2a38 0%, #0d1117 60%) fixed;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* WRAPPER */
.wrapper{
    text-align:center;
    transform-origin:center;
    transition:transform .25s ease;
}

/* LOGO */
.logo{
    margin-bottom:25px;
}

.logo img{
    width:333px;
    opacity:.9;

    filter:
        invert(1)
        contrast(1.2)
        brightness(1.15)
        drop-shadow(0 0 12px rgba(0,150,255,.35));
}

/* TITLE */
.title{
    font-size:28px;
    letter-spacing:1px;
    margin-top:10px;
    font-weight:600;
}

.subtitle{
    font-size:30px;
    color:#8b949e;
    margin-bottom:30px;
}

/* CARD */
.card{
    width:320px;
    background:#161b22;
    padding:30px 28px;
    border-radius:12px;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 20px 60px rgba(0,0,0,.6);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.card:hover{
    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 30px 80px rgba(0,0,0,.9),
        0 0 25px rgba(35,136,255,.25);
}

.card h2{
    margin:0 0 18px 0;
    font-weight:500;
}

/* INPUT */
input,
textarea,
select{
    width:100%;
    padding:10px;
    margin-top:10px;

    background:#0d1117;
    border:1px solid #30363d;
    border-radius:6px;

    color:#eee;
    outline:none;

    transition:.15s;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#2388ff;
    box-shadow:0 0 0 1px #2388ff55;
}

/* TEXTAREA */
textarea{
    min-height:120px;
    resize:vertical;
}

/* BUTTON */
button{
    margin-top:18px;
    width:100%;
    padding:11px;

    border:none;
    border-radius:6px;

    background:#2388ff;
    color:white;

    font-weight:600;
    cursor:pointer;

    transition:.2s;
}

button:hover{
    background:#1f6fd1;

    box-shadow:
        0 0 18px rgba(35,136,255,.45);
}

/* ALERTS */
.error-message{
    background:#3a1212;
    border:1px solid #a33;
    color:#ffb3b3;

    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
}

.success-message{
    background:#123a1d;
    border:1px solid #2f9e44;
    color:#b7ffcb;

    padding:10px;
    border-radius:6px;
    margin-bottom:15px;
}

/* TABLE */
table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;

    background:#161b22;
    border-radius:10px;
    overflow:hidden;
}

table th{
    background:#1f2937;
    color:#fff;
    padding:12px;
    text-align:left;
}

table td{
    padding:12px;
    border-top:1px solid #30363d;
}

/* STATUS */
.status-open{
    color:#ff5c5c;
    font-weight:bold;
}

.status-progress{
    color:#ffb347;
    font-weight:bold;
}

.status-done{
    color:#4ade80;
    font-weight:bold;
}

/* CONTAINER */
.container{
    width:100%;
    max-width:1200px;
    padding:20px;
}

/* FOOTER */
.footer{
    margin-top:35px;
    font-size:12px;
    color:#6e7681;
    width:320px;
    text-align:center;
}

.footer a{
    color:#58a6ff;
    text-decoration:none;
    transition:.15s;
}

.footer a:hover{
    color:#79c0ff;
    text-shadow:0 0 6px rgba(88,166,255,.6);
}

/* RESPONSIVE */
@media (min-width:1200px){
    .wrapper{
        transform:scale(1.15);
    }
}

@media (min-width:1500px){
    .wrapper{
        transform:scale(1.30);
    }
}

@media (min-width:1800px){
    .wrapper{
        transform:scale(1.45);
    }
}

@media (min-width:2300px){
    .wrapper{
        transform:scale(1.65);
    }
}

@media (max-width:1200px){
    .wrapper{
        transform:scale(1);
    }
}
/* DASHBOARD GRID */

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:20px;
}

/* INFO CARD */

.info-card{
    background:#161b22;
    border-radius:12px;
    padding:25px;

    text-align:center;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.04),
        0 20px 60px rgba(0,0,0,.35);

    transition:.2s;
}

.info-card:hover{
    transform:translateY(-3px);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.05),
        0 25px 70px rgba(0,0,0,.5),
        0 0 20px rgba(35,136,255,.15);
}

.info-card h2{
    margin:0;
    font-size:38px;
    color:#58a6ff;
}

.info-card p{
    margin-top:10px;
    color:#8b949e;
}

/* MENU GRID */

.menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:15px;
    margin-top:20px;
}

/* FULL WIDTH CARD */

.full-card{
    width:100%;
    margin-top:25px;
}