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

html,
body{
    margin:0;
    padding:0;

    width:100%;
    height:100%;
}

body{
     font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:var(--background);
    font-family:var(--font);
    color:var(--text);
}


.app{
    min-height:100vh;
    display:grid;
    grid-template-rows:
        auto
        1fr
        auto
        auto
        auto;
}

.app-header{
    background:var(--primary);
    color:white;
    padding:18px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.app-header h1{
    font-size:32px;
    font-weight:700;
}


.app-content{
    flex:1;
    display:grid;

    grid-template-columns:
        260px
        1fr
        280px;

    gap:20px;
    padding:20px;
}

.panel{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px;
}

.panel-title{
    display:block;
    margin-bottom:12px;
    font-size:1rem;
    font-weight:600;
    color:var(--primary);
}

.left-panel,
.center-panel,
.right-panel{
    background:var(--panel);
    border-radius:12px;
    padding:18px;
    box-shadow:
        0 4px 15px rgba(0,0,0,.08);
}

.app-footer{
    display:flex;
    justify-content:center;
    gap:20px;
    padding:20px;
    background:var(--panel);
    border-top:1px solid #ddd;
}

#footer-info{
    text-align:center;
    padding:12px;
    font-size:.9rem;
}

#status-message{
    text-align:center;
    padding:10px;
    min-height:24px;
}