body{
    font-family: Arial, sans-serif;
    background:#f6f6f6;
    color:#222;
    margin:0;
}
.container{
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
}
h1{
    margin-bottom:5px;
}
.sub,.note,.small{
    color:#666;
}
.small{
    font-size:12px;
}
.cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin:25px 0;
}
.card{
    background:#fff;
    padding:18px;
    border-radius:10px;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.label{
    color:#666;
    font-size:14px;
}
.value{
    font-size:24px;
    font-weight:bold;
    margin-top:8px;
}
table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}
th,td{
    padding:12px;
    border-bottom:1px solid #eee;
    text-align:right;
    vertical-align:top;
}
th:first-child,td:first-child{
    text-align:left;
}
th{
    background:#222;
    color:#fff;
}
.plus{
    color:#087a34;
}
.min{
    color:#b00020;
}
.error{
    background:#ffe9e9;
    border:1px solid #d88;
    padding:15px;
    border-radius:8px;
}
.ok{
    background:#e8f6ec;
    border:1px solid #9bd2aa;
    padding:12px;
    border-radius:8px;
}
code{
    background:#eee;
    padding:2px 5px;
    border-radius:4px;
}
@media(max-width:900px){
    .cards{
        grid-template-columns:1fr 1fr;
    }
    table{
        font-size:14px;
    }
}
@media(max-width:600px){
    .cards{
        grid-template-columns:1fr;
    }
}
.menu{
    margin:18px 0 24px;
}
.menu a{
    color:#222;
    font-weight:bold;
}
h2{
    margin-top:35px;
}