:root{
    --bg:#0b1117;
    --bg-elev:#111923;
    --bg-elev-2:#0e151d;
    --text:#e6edf3;
    --muted:#9fb1c1;
    --brand:#f4b000;
    --accent:#23c55e;
    --danger:#ef4444;
    --warning:#f59e0b;
    --card:#0f1822;
    --line:#1f2b3a;
    --chip:#1a2430;
  }
  *{box-sizing:border-box}
  html,body{height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif; background:var(--bg); color:var(--text);}

  .app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}

  /* Sidebar (desktop) */
  .sidebar{background:linear-gradient(180deg, #0e151d 0%, #0a1016 100%); border-right:1px solid var(--line); padding:18px 14px; position:sticky; top:0; height:100vh;}
  .brand{display:flex;align-items:center;gap:12px;padding:8px 10px;margin-bottom:8px}
  .brand img{width:42px;height:42px;border-radius:10px}
  .brand .t1{font-weight:700;margin:0;font-size:16px;line-height:1}
  .brand .t2{margin:0;font-size:12px;color:var(--muted);line-height:1}
  .nav{margin-top:10px;display:flex;flex-direction:column;gap:6px}
  .nav button{width:100%;text-align:left;border:0;border-radius:10px;background:transparent;color:var(--text);padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;}
  .nav button.active, .nav button:hover{background:var(--chip)}
  .version{margin-top:auto;color:var(--muted);font-size:12px;padding:6px 10px;border-top:1px dashed var(--line)}

  .main{display:flex;flex-direction:column}

  .topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-elev);z-index:10;}
  .topbar-left{display:flex;gap:12px;align-items:center;flex:1}

  .search{flex:1;position:relative;max-width:500px}
  .search input{width:100%;padding:12px 14px 12px 38px;border-radius:10px;border:1px solid var(--line);background:#0a121a;color:var(--text);}
  .search .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);opacity:.6}

  .btn{background:var(--chip);border:1px solid var(--line);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;}
  .btn.primary{background:linear-gradient(180deg,#1e293b,#0f172a);border-color:#263042}
  .btn.brand{background:linear-gradient(180deg,#2d2400,#1f1a00);border-color:#3a2f00;color:#ffd76a}

  .page{padding:16px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}

  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset;}
  .kpi{display:flex;justify-content:space-between;align-items:flex-start}
  .kpi h3{margin:0 0 6px 0;font-size:14px;color:var(--muted);font-weight:600}
  .kpi .val{font-size:28px;font-weight:800}

  .badge{font-size:12px;padding:4px 8px;border-radius:999px;background:var(--chip);border:1px solid var(--line);color:#cde3f9}
  .badge.ok{color:#bbf7d0;background:#0f1a13;border-color:#1c3424}
  .badge.down{color:#fecaca;background:#1a0f10;border-color:#3a1c1f}
  .badge.up{color:#bbf7d0;background:#0f1a13;border-color:#1c3424}

  .section h4{margin:0 0 8px 0;font-weight:700}

  .table{width:100%;border-collapse:collapse;font-size:14px}
  .table th,.table td{border-top:1px solid var(--line);padding:10px 8px}
  .table th{color:var(--muted);font-weight:600;text-align:left;background:#0a121a;position:sticky;top:52px}

  .table tbody tr:hover{background:#0b141d}

  .table-wrap{width:100%;overflow:auto;border-radius:12px;border:1px solid var(--line)}
  .table-wrap .table{min-width:760px;border-collapse:collapse}
  .table-wrap .table th{top:0; position:sticky;}
  .table-wrap .table th,.table-wrap .table td{border-top:1px solid var(--line)}
  .table-wrap::-webkit-scrollbar{height:10px}
  .table-wrap::-webkit-scrollbar-thumb{background:#1f2b3a;border-radius:999px}

  .canvas-wrap{width:100%;height:300px;background:var(--card);border-radius:8px;padding:10px;}

  .tab{display:none}
  .tab.active{display:block}

  .news-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
  .news-item .date{color:var(--muted);font-size:12px;}

  .formgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;}
  .formgrid label{display:flex;flex-direction:column;color:var(--muted);font-size:14px;}
  .formgrid input,.formgrid textarea{background:#0a121a;border:1px solid var(--line);color:var(--text);padding:10px;border-radius:8px;margin-top:6px;}
  .actions{margin-top:20px;display:flex;justify-content:flex-end;gap:12px;}

  .toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#0f172a;border:1px solid var(--line);padding:10px 14px;border-radius:10px;display:none;z-index:100;}

  svg.icon{width:18px;height:18px;}

  /* ===== Mobile / Responsive ===== */
  .menu-btn{
    display:none;
    width:44px;height:44px;
    align-items:center;justify-content:center;
    background:#0a121a;border:1px solid var(--line);
    border-radius:12px;cursor:pointer;
    flex:0 0 auto;
  }
  .overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(0,0,0,.55);
    z-index:1000;
  }
  .overlay.show{display:block}

  @media (max-width: 900px){
    .app{grid-template-columns:1fr}

    /* Sidebar becomes off-canvas */
    .sidebar{
      position:fixed;
      left:-280px;
      top:0;
      width:260px;
      height:100vh;
      z-index:1001;
      transition:left .25s ease;
      border-right:1px solid var(--line);
    }
    .sidebar.open{left:0}

    .menu-btn{display:inline-flex}

    .topbar{
      gap:10px;
      padding:10px 12px;
    }
    .topbar-left{
      gap:10px;
      flex:1;
      min-width:0;
    }
    .search{max-width:none}
    .search input{padding:12px 12px 12px 38px}

    /* Make main fill full width */
    .main{width:100%}
    .page{padding:12px}
  }

  @media (max-width: 600px){
    /* KPI cards: 2 per row */
    #dashboard .kpi-card{grid-column: span 6 !important;}
    #dashboard .chart-card,
    #dashboard .about-card{grid-column: span 12 !important;}

    .kpi .val{font-size:24px}
    .kpi h3{font-size:13px}

    /* Tables scroll */
    .table-wrap .table{min-width:860px}

    /* Prevent tiny margins */
    .card{border-radius:14px}
  }

  @media (max-width: 420px){
    /* KPI cards: 1 per row on very small screens */
    #dashboard .kpi-card{grid-column: span 12 !important;}
  }
.seo-h1{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
/* ===== Single page layout (cabinet / login etc) ===== */
.app--single{
  display:flex;
  min-height:100vh;
}

.app--single .main{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}