:root{
      --blue:#2f6fb2;
      --blue-dark:#255a8f;
      --bg:#f2f4f7;
      --card:#ffffff;
      --border:#dcdfe3;
      --ok:#3bb54a;
      --warn:#f5a623;
      --danger:#d9534f;
    }
    *{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
  body {
  margin: 0;
  background: var(--bg);
}


    .top-actions{
      max-width:1100px;
      margin:0 auto;
      padding:12px 16px;
      display:flex;
      justify-content:space-between;
      color:#fff;
      font-size:16px;
    }

    .screen{
      max-width:1100px;
      margin:20px auto 40px;
      background:var(--bg);
      border-radius:4px;
      overflow:hidden;
      box-shadow:0 4px 20px rgba(0,0,0,.25)
 max-width: 1100px;
  margin: 40px auto;
    }

    /* HEADER */
    .header{
      background:var(--blue);
      color:#fff;
      padding:10px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between
    }
.menu{
  display:flex;
  gap:18px;
  font-size:13px
}

.menu a{
  color:#fff;
  text-decoration:none;
  opacity:.85;
  padding-bottom:2px;
}

.menu a:hover{
  opacity:1;
  text-decoration:underline;
}

.menu a.active{
  font-weight:bold;
  opacity:1;
  border-bottom:2px solid #fff;
}


    /* CONTENT */
    .content{padding:16px}

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

    .card{
      background:var(--card);
      border:1px solid var(--border);
      border-radius:4px;
      padding:14px
    }

    .stat-title{font-size:13px;color:#555}
    .stat-value{font-size:22px;font-weight:bold;margin-top:6px}
    .stat-value.ok{color:var(--ok)}
    .stat-value.danger{color:var(--danger)}

    .grid{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:16px
    }

    h3{
      margin:0 0 10px;
      font-size:14px;
      color:#333
    }

    .list{
      border-top:1px solid var(--border)
    }

    .item{
      display:flex;
      align-items:center;
      gap:8px;
      padding:10px 0;
      border-bottom:1px solid var(--border);
      font-size:13px
    }

    .item code{
      font-weight:bold;
      color:var(--blue)
    }

    .alert{
      display:flex;
      align-items:flex-start;
      gap:8px;
      background:#fff6e5;
      border:1px solid #ffd58a;
      border-radius:4px;
      padding:12px;
      font-size:13px
    }

    .alert .icon{color:var(--warn);font-size:16px}