:root {

    color-scheme:light;

    --font:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;

    --radius-xl:28px;

    --radius-lg:18px;

    --shadow:
    0 24px 70px rgba(15,23,42,.12);

    --container:1180px;
}

/* ========================================================= */
/* RESET */
/* ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    min-height:100vh;

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

pre{
    overflow:auto;
    border-radius:14px;
}

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

.app-shell{

    min-height:100vh;

    display:grid;

    grid-template-columns:290px 1fr;

    grid-template-rows:auto 1fr auto;
}

/* ========================================================= */
/* TOPBAR */
/* ========================================================= */

.topbar{

    grid-column:1 / -1;

    position:sticky;

    top:0;

    z-index:20;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:
    18px clamp(18px,4vw,48px);

    background:
    color-mix(
    in srgb,
    var(--bg) 85%,
    transparent
    );

    backdrop-filter:blur(20px);

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

.logo{

    height:42px;

    width:auto;

    display:block;
}

.brand{

    display:flex;

    align-items:center;

    gap:14px;
}

.brand-mark{

    display:grid;

    place-items:center;

    width:48px;

    height:48px;

    border-radius:16px;

    color:white;

    font-weight:900;

    font-size:1.5rem;

    background:
    linear-gradient(
    135deg,
    var(--accent),
    var(--accent-2)
    );

    box-shadow:var(--shadow);
}

.topbar-actions{
    display:flex;
    gap:10px;
}

.icon-button,
.theme-toggle{

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

    background:var(--surface);

    color:var(--text);

    width:44px;

    height:44px;

    border-radius:14px;

    cursor:pointer;
}

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

.sidebar{

    padding:
    26px 18px 26px clamp(18px,3vw,34px);

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

.menu{
    display:grid;
    gap:10px;
}

.menu-link{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    border-radius:16px;

    color:var(--muted);

    transition:.2s;
}

.menu-link:hover,
.menu-link.active{

    color:var(--text);

    background:var(--surface);

    box-shadow:
    0 12px 30px rgba(15,23,42,.08);
}

.sidebar-card{

    margin-top:22px;

    padding:18px;

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

    border-radius:var(--radius-lg);

    background:var(--surface-soft);
}

.sidebar-card a{

    display:block;

    margin-top:8px;

    color:var(--accent);

    font-weight:500;
}

.sidebar-card a:hover{
    text-decoration:underline;
}

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

.content{

    padding:
    clamp(22px,4vw,54px);

    max-width:var(--container);
}

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

.footer{

    grid-column:1 / -1;

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

    padding:20px 0;
}

.footer-inner{

    max-width:var(--container);

    margin:0 auto;

    padding:0 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;
}

.footer-links{

    display:flex;

    gap:15px;
}

.footer-links a{
    color:var(--accent);
}

/* ========================================================= */
/* CONTAINER */
/* ========================================================= */

.container{

    max-width:1100px;

    margin:auto;
}

/* ========================================================= */
/* BLOCK */
/* ========================================================= */

.block{

    margin-bottom:30px;

    padding:22px;

    border-radius:16px;

    background:var(--surface);

    color:var(--text);

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

    box-shadow:
    0 8px 24px rgba(0,0,0,0.08);
}

/* ========================================================= */
/* TYPOGRAPHY */
/* ========================================================= */

h2{

    margin-bottom:20px;

    padding:15px;

    border-radius:10px;

    background:
    linear-gradient(
    90deg,
    var(--accent),
    var(--accent-2)
    );

    color:white;
}

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

@media(max-width:900px){

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

    .sidebar{
        display:none;
    }

    .sidebar.open{
        display:block;
    }
}

@media(max-width:768px){

    .footer-inner{

        flex-direction:column;

        text-align:center;
    }

    .footer-links{

        justify-content:center;

        flex-wrap:wrap;
    }
}