:root{
    --bg:#0b1220;
    --sidebar:#111827;
    --panel:#1f2937;
    --primary:#f59e0b;
    --primary-dark:#d97706;
    --text:#ffffff;
    --muted:#9ca3af;
}

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

body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);
    height:100%
}

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

.layout{
    display:flex;
    min-height:100vh;
}
.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    color:var(--muted);
    font-size:14px;
}

.form-control{
    width:100%;
    padding:12px 15px;

    background:#111827;

    border:1px solid rgba(255,255,255,.1);

    border-radius:10px;

    color:#fff;

    outline:none;
}
select.form-control{
    width:100%;
    padding:12px 15px;

    background:#111827;
    color:#fff;

    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
}

.form-control:focus{
    border-color:var(--primary);
}

.actions .btn{
    border:none;

    background:var(--primary);

    color:#000;

    padding:12px 20px;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;
}
/* =========================
   SIDEBAR
========================= */

.sidebar{
    position:fixed;
    left:0;
    top:0;
    width:260px;
    height:100vh;

    overflow-y:auto;

    background:var(--sidebar);

    padding:20px;

    border-right:
        1px solid rgba(255,255,255,.08);
}

.logo h2{
    color:var(--primary);
    font-size:28px;
    letter-spacing:1px;
}

.logo span{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:12px;
}

.sidebar nav{
    margin-top:40px;

    display:flex;
    flex-direction:column;

    gap:10px;
}

.sidebar nav a{
    padding:12px 16px;

    border-radius:10px;

    text-decoration:none;

    color:var(--muted);

    transition:.3s ease;
}

.sidebar nav a:hover,
.sidebar nav a.active{
    background:
        rgba(245,158,11,.15);

    color:#fff;
}

/* =========================
   CONTENT
========================= */

.content{
    flex:1;
    margin-left:180px;
    padding:20px;

    display:flex;
    flex-direction:column;
    min-height:100vh;
}

/* =========================
   HEADER
========================= */

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding-bottom:20px;
    margin-bottom:25px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.header p{
    color:var(--muted);
    margin-top:8px;
}

.license-card{
    background:var(--panel);

    border:
        1px solid rgba(245,158,11,.25);

    padding:15px 20px;

    border-radius:14px;
}

.badge{
    background:var(--primary);
    color:#000;

    font-weight:700;

    padding:6px 12px;

    border-radius:999px;
}

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

.stats{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin-bottom:25px;
}

.card{
    background:var(--panel);

    border:
        1px solid rgba(255,255,255,.05);

    padding:25px;

    border-radius:18px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

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

    border-color:
        rgba(245,158,11,.4);

    box-shadow:
        0 15px 30px rgba(0,0,0,.25),
        0 0 20px rgba(245,158,11,.12);
}

.card h4{
    color:var(--muted);
    margin-bottom:10px;
}

.card h2{
    color:var(--primary);
}

/* =========================
   PANELS
========================= */

.panel{
    background:var(--panel);

    padding:25px;

    border-radius:18px;

    margin-bottom:25px;

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

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

    box-shadow:
        0 15px 30px rgba(0,0,0,.20);
}

.panel h3{
    margin-bottom:20px;
}

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

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.actions button,
.open-btn{
    border:none;

    background:var(--primary);

    color:#000;

    padding:10px 16px;

    border-radius:10px;

    font-weight:600;

    cursor:pointer;

    transition:.3s ease;
}

.actions button:hover,
.open-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

/* =========================
   GRID
========================= */

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

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

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:14px;
    text-align:left;
}

th{
    color:var(--muted);
}

tr{
    border-bottom:
        1px solid rgba(255,255,255,.08);
}

table tr:hover{
    background:
        rgba(255,255,255,.03);
}

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

.status{
    padding:5px 10px;
    border-radius:20px;
    font-size:12px;
}

.active{
    background:#10b98122;
    color:#10b981;
}

.completed{
    background:#3b82f622;
    color:#3b82f6;
}

.draft{
    background:#f59e0b22;
    color:#f59e0b;
}

/* =========================
   LICENSE PROGRESS
========================= */

.progress{
    height:10px;

    overflow:hidden;

    background:#111827;

    border-radius:20px;

    margin:20px 0;
}

.progress-bar{
    width:85%;
    height:100%;

    background:var(--primary);

    border-radius:20px;
}

/* =========================
   DOWNLOADS
========================= */

.system li,
.downloads li{
    list-style:none;

    padding:10px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

/* =========================
   ACTIVITY TIMELINE
========================= */

.timeline div{
    padding:12px 0;

    border-left:
        3px solid var(--primary);

    padding-left:15px;

    margin-left:5px;
}

/* =========================
   FOOTER
========================= */

footer{
    text-align:center;
    color:var(--muted);

    margin-top:auto;
    padding-top:30px;
}
/* =========================
   PAGE ANIMATION
========================= */

.card,
.panel{
    animation:fadeUp .6s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media(max-width:1000px){

    .sidebar{
        display:none;
    }

    .content{
        margin-left:0;
        padding:20px;
    }

    .header{
        flex-direction:column;
        align-items:flex-start;
        gap:15px;
    }

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

}
.actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px;
}

.actions .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:180px;
    padding:12px 20px;

    border-radius:10px;

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:all .25s ease;
    cursor:pointer;
}

.actions .btn:hover{
    transform:translateY(-2px);
}

.actions .btn:nth-child(1){
    background:#2563eb;
    color:#fff;
}

.actions .btn:nth-child(2){
    background:#059669;
    color:#fff;
}

.actions .btn:nth-child(3){
    background:#ea580c;
    color:#fff;
}

.actions .btn:nth-child(4){
    background:#7c3aed;
    color:#fff;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 16px;

    border:none;
    border-radius:10px;

    text-decoration:none;

    font-weight:600;
    font-size:13px;

    cursor:pointer;

    transition:.25s ease;
}

.action-buttons{
    display:flex;
    gap:8px;
    align-items:center;
}

.action-buttons a,
.action-buttons button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:80px;
    height:38px;

    border:none;
    border-radius:10px;

    font-size:13px;
    font-weight:600;

    text-decoration:none;

    cursor:pointer;
}

.btn-edit{
    background:#2563eb !important;
    color:#fff !important;
}

.btn-delete{
    background:#dc2626 !important;
    color:#fff !important;
}

.btn-edit:hover{
    background:#1d4ed8 !important;
}

.btn-delete:hover{
    background:#b91c1c !important;
}