* {
    box-sizing:border-box;
}


body {

    margin:0;

    font-family:
    Inter,
    Arial,
    sans-serif;

    background:#f3f6fb;

    color:#1f2937;

}


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


.wrapper {
    display: flex;
    min-height: calc(100vh - 50px);
}


/* =====================
SIDEBAR
===================== */


.sidebar {

    width:240px;

    background:
    linear-gradient(
        180deg,
        #111827,
        #1e293b
    );

    color:white;

    padding:25px;

}


.logo {

    font-size:22px;

    font-weight:700;

    margin-bottom:35px;

}


.sidebar a {

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    margin-bottom:8px;

    border-radius:10px;

    color:#cbd5e1;

    text-decoration:none;

    transition:.2s;

}


.sidebar a:hover {

    background:#2563eb;

    color:white;

}


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


.content {

    flex:1;

    padding:35px;

}



h1 {

    margin-top:0;

    margin-bottom:25px;

    font-size:28px;

}



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


.card {

    background:white;

    border-radius:16px;

    padding:22px;

    box-shadow:

    0 8px 25px rgba(0,0,0,.06);

}



.cards {

    display:grid;

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

    gap:20px;

}



.card h2 {

    margin-top:0;

}



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


button,
.button {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    background:#2563eb;

    color:white;


    border:none;

    padding:

    12px 24px;


    border-radius:10px;

    cursor:pointer;

    text-decoration:none;


    transition:.2s;


}



button:hover,
.button:hover {

    background:#1d4ed8;

}


.danger {

    background:#dc2626;

}


.danger:hover {

    background:#b91c1c;

}



/* =====================
TABLES
===================== */


.table {

    width:100%;

    border-collapse:collapse;

}


.table th {

    background:#f1f5f9;

    padding:14px;

    text-align:left;

}


.table td {

    padding:14px;

    border-bottom:

    1px solid #e5e7eb;

}


.table tr:hover {

    background:#f8fafc;

}



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


.ok {

    color:#16a34a;

    font-weight:700;

}


.error {

    color:#dc2626;

    font-weight:700;

}


/* =====================
FEEDS
===================== */


.feed-card {

    min-height:220px;

    display:flex;

    flex-direction:column;

}


.feed-card h2 {

    min-height:55px;

}


.feed-info {

    flex:1;

}



.feed-button {

    width:160px;

}



/* =====================
SETTINGS
===================== */


.category {

    background:white;

    border-radius:16px;

    margin-bottom:15px;

    overflow:hidden;

    box-shadow:

    0 5px 18px rgba(0,0,0,.06);

}



.category-title {


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:18px;

    cursor:pointer;

    font-weight:600;

}


.category-title:hover {

    background:#f8fafc;

}



.category-body {

    display:none;

    padding:0 20px 20px;

}



.category.open .category-body {

    display:block;

}



.main-row {

    background:#eff6ff;

    border-radius:12px;

    padding:14px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.child-row {

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px;

    border-bottom:1px solid #eee;

}



.percent-box {

    display:flex;

    align-items:center;

    gap:5px;

}



.percent-input {


    width:70px;

    height:36px;


    border:

    1px solid #cbd5e1;


    border-radius:8px;


    text-align:center;


    font-size:16px;

}


.percent-input:focus {

    outline:none;

    border-color:#2563eb;

}



/* badges */


.badge {

    background:#fee2e2;

    color:#dc2626;

    padding:4px 10px;

    border-radius:20px;

    font-size:13px;

}



.warning {

    background:#fef3c7;

    color:#92400e;

}
.logo small {

    display:block;

    margin-top:8px;

    font-size:14px;

    color:#9ca3af;

    font-weight:normal;

}
.sidebar a.active {

    background:#2563eb;

    color:white;

}
footer {

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#6b7280;

    font-size:13px;

}