:root{
      --blue-900:#0b3c7a;
      --blue-800:#0e4a93;
      --blue-700:#145fb8;
      --blue-600:#2b74cc;
      --blue-500:#3b88e6;
      --sky-100:#eaf2ff;
      --bg:#f1f5fb;
      --card:#ffffff;
      --text:#1b2a3a;
      --muted:#6b7b8e;
      --line:#d9e2ef;
      --shadow: 0 10px 22px rgba(10, 35, 70, .12);
      --shadow-soft: 0 6px 14px rgba(10, 35, 70, .10);
      --radius: 14px;
      --radius-lg: 18px;
      --container: 1180px;
    }

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: "Segoe UI", Tahoma, Arial, sans-serif;
      background: radial-gradient(1200px 420px at 50% 0%, #dcecff 0%, #f5f8ff 40%, var(--bg) 100%);
      color:var(--text);
    }

    /* Top bar */
    .topbar{
      height:64px;
      background: linear-gradient(180deg, #0c4fa3 0%, #0a3f86 100%);
      color:#fff;
      border-bottom: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 8px 18px rgba(0,0,0,.18);
    }
    .wrap{
      max-width:var(--container);
      margin:0 auto;
      padding:0 18px;
    }
    .topbar .wrap{
      height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .brand{
      display:flex;
      align-items:center;
      /* gap:12px;
      min-width:260px; */
    }
    .logo{
      width:36px;
      height:36px;
      border-radius:8px;
      background: rgba(255,255,255,.16);
      display:grid;
      place-items:center;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    }
    /* .brand h1{
      font-size:18px;
      margin:0;
      font-weight:700;
      letter-spacing:.4px;
      text-transform:uppercase;
    } */

    .nav{
      display:flex;
      gap:18px;
      flex:1;
      justify-content:center;
      align-items:center;
      white-space:nowrap;
      overflow:auto;
      scrollbar-width:none;
    }
    .nav::-webkit-scrollbar{ display:none; }
    .nav a{
      color:rgba(255,255,255,.9);
      text-decoration:none;
      font-size:13px;
      font-weight:600;
      padding:8px 10px;
      border-radius:10px;
      transition:.15s ease;
    }
    .nav a:hover{ background:rgba(255,255,255,.10); }
    .nav a.active{
      background:rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    }

    .user{
      display:flex;
      align-items:center;
      gap:10px;
      /* min-width:220px; */
      justify-content:flex-end;
    }
    .avatar{
      width:32px;height:32px;border-radius:50%;
      background: linear-gradient(180deg,#ffd3a6,#ffb36b);
      box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
    }
    .user .name{
      font-size:13px;
      font-weight:700;
      opacity:.95;
      display:flex;
      align-items:center;
      gap:6px;
    }
    .caret{
      width:0;height:0;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-top:6px solid rgba(255,255,255,.92);
      margin-top:2px;
    }

    /* Hero */
    .hero{
      margin-top:18px;
      border-radius: 16px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(20, 80, 160, .20);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%),
        linear-gradient(90deg, #0f5fb8 0%, #1a7ad6 45%, #0f5fb8 100%);
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute; inset:-20px -30px auto -30px;
      height:180px;
      background:
        radial-gradient(260px 90px at 18% 70%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(320px 120px at 85% 40%, rgba(255,255,255,.16), transparent 62%);
      filter: blur(.2px);
      opacity:.9;
      pointer-events:none;
    }
    .hero-inner{
      padding:26px 26px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .hero-left{
      display:flex;
      align-items:flex-start;
      gap:16px;
      min-width:360px;
    }
    .hero-icon{
      width:54px;height:54px;
      border-radius:14px;
      background: rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
      display:grid;
      place-items:center;
    }
    .hero-title{
      color:#fff;
    }
    .hero-title h2{
      margin:0;
      font-size:44px;
      letter-spacing:1px;
      font-weight:900;
      text-transform:uppercase;
      line-height:1.05;
      text-shadow: 0 10px 18px rgba(0,0,0,.18);
    }
    .hero-title p{
      margin:8px 0 0;
      font-size:18px;
      font-weight:700;
      opacity:.95;
    }

    .hero-art{
      display:flex;
      gap:12px;
      align-items:center;
      opacity:.95;
    }
    .card-mini{
      width:86px;height:58px;
      border-radius:12px;
      background: rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
      position:relative;
    }
    .card-mini::after{
      content:"";
      position:absolute; inset:12px 12px auto 12px;
      height:8px;
      border-radius:6px;
      background: rgba(255,255,255,.65);
      opacity:.9;
    }
    .card-mini:nth-child(2){ width:96px;height:64px; }
    .bubble{
      width:46px;height:46px;border-radius:14px;
      background: rgba(255,255,255,.16);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
      display:grid; place-items:center;
    }

    /* Quick buttons row */
    .quick{
      margin-top:-14px;
      padding: 0 16px 14px;
    }
    .quickbar{
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(10, 35, 70, .10);
      border-radius: 14px;
      box-shadow: var(--shadow-soft);
      display:flex;
      gap:14px;
      align-items:center;
      justify-content:center;
      padding: 12px 14px;
      backdrop-filter: blur(6px);
    }
    .qbtn{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 12px;
      color: #17324f;
      text-decoration:none;
      font-weight:700;
      font-size:13px;
      transition:.15s ease;
      border:1px solid transparent;
    }
    .qbtn:hover{
      background: #f3f7ff;
      border-color: rgba(20, 90, 190, .18);
    }
    .qico{
      width:28px;height:28px;border-radius:10px;
      background: linear-gradient(180deg, #e8f2ff, #d7e9ff);
      display:grid; place-items:center;
      box-shadow: inset 0 0 0 1px rgba(30,110,220,.20);
    }

    /* Content grid */
    .content{
      margin-top:12px;
      padding-bottom:28px;
    }
    .grid{
      display:grid;
      grid-template-columns: 1.1fr 2fr 1.1fr;
      gap:18px;
      align-items:start;
    }

    .panel{
      background: var(--card);
      border: 1px solid rgba(10, 35, 70, .10);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .panel .head{
      padding:16px 18px 10px;
      font-weight:900;
      color:#1a3554;
      font-size:18px;
    }
    .panel .body{ padding: 0 18px 18px; }
    .muted{ color:var(--muted); font-size:13px; line-height:1.45; }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding: 10px 14px;
      border-radius: 12px;
      border:1px solid rgba(255,255,255,.0);
      background: linear-gradient(180deg, #1b73d2 0%, #145fb8 100%);
      color:#fff;
      font-weight:800;
      font-size:13px;
      text-decoration:none;
      box-shadow: 0 10px 18px rgba(20,90,190,.20);
      transition:.15s ease;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn.secondary{
      background: #f0f6ff;
      color:#15406e;
      box-shadow:none;
      border-color: rgba(20, 90, 190, .16);
      font-weight:800;
    }

    /* Modules panel */
    .modules{
      background:
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
        linear-gradient(180deg, #2a76d3, #1a60b9);
      border: 1px solid rgba(20, 90, 190, .20);
    }
    .modules .head{
      color:#fff;
      text-shadow: 0 10px 18px rgba(0,0,0,.14);
    }
    .tiles{
      padding: 0 18px 16px;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:14px;
    }
    .tile{
      border-radius: 14px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(10, 35, 70, .10);
      box-shadow: 0 8px 16px rgba(0,0,0,.12);
      overflow:hidden;
      position:relative;
      min-height:92px;
      display:flex;
      align-items:flex-end;
      padding:12px 12px;
      font-weight:900;
      color:#1a3554;
      font-size:13px;
    }
    .tile .tag{
      position:absolute;
      top:10px; left:10px;
      width:38px;height:38px;border-radius:12px;
      background: linear-gradient(180deg, #e8f2ff, #d7e9ff);
      box-shadow: inset 0 0 0 1px rgba(30,110,220,.20);
      display:grid; place-items:center;
    }
    .tile::before{
      content:"";
      position:absolute; right:-14px; top:-14px;
      width:92px;height:92px;border-radius:22px;
      background: radial-gradient(circle at 35% 35%, rgba(26,120,220,.18), transparent 60%);
      transform: rotate(12deg);
    }
    .tile.orange{
      background: linear-gradient(180deg, #fff2e7, #ffe7d6);
      border-color: rgba(220, 120, 40, .22);
      color:#6b2f00;
    }
    .tile.orange .tag{
      background: linear-gradient(180deg, #ffe2c8, #ffd3aa);
      box-shadow: inset 0 0 0 1px rgba(220, 120, 40, .22);
    }

    .modules .footer{
      padding: 0 18px 18px;
      display:flex;
      justify-content:center;
    }

    /* News panel */
    .news-item{
      display:flex;
      gap:12px;
      padding: 12px 0;
      border-bottom:1px solid rgba(10,35,70,.10);
    }
    .news-item:last-child{ border-bottom:0; padding-bottom:6px; }
    .nicon{
      width:34px;height:34px;border-radius:12px;
      background: #f0f6ff;
      border:1px solid rgba(20, 90, 190, .16);
      display:grid; place-items:center;
      flex:0 0 auto;
    }
    .news-title{ font-weight:900; margin:0; font-size:13px; color:#1a3554; }
    .news-text{ margin:4px 0 0; font-size:12px; color:var(--muted); line-height:1.35; }
    .panel .actions{
      display:flex;
      justify-content:flex-end;
      padding-top:10px;
    }

    /* Bottom 4 panels */
    .grid2{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:18px;
    }
    .mini .head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:16px 18px 12px;
    }
    .mini .head span{
      font-weight:900;
      font-size:20px;
      color:#1a3554;
    }
    .list{
      padding: 0 18px 16px;
      display:grid;
      gap:10px;
    }
    .li{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-radius: 12px;
      background:#f6f9ff;
      border:1px solid rgba(20,90,190,.12);
      font-weight:800;
      color:#1a3554;
      font-size:13px;
    }
    .li .dot{
      width:30px;height:30px;border-radius:12px;
      background: linear-gradient(180deg, #e8f2ff, #d7e9ff);
      box-shadow: inset 0 0 0 1px rgba(30,110,220,.18);
      display:grid; place-items:center;
      flex:0 0 auto;
    }

    /* Footer */
    .footerbar{
      margin-top:22px;
      padding: 14px 0 18px;
      border-top: 1px solid rgba(10,35,70,.10);
      color: var(--muted);
      font-size:12px;
    }
    .footerbar .wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .foot-links{
      display:flex;
      gap:18px;
      align-items:center;
      flex-wrap:wrap;
    }
    .foot-links a{
      color: var(--muted);
      text-decoration:none;
      font-weight:700;
    }
    .foot-links a:hover{ text-decoration:underline; }

    .stats{
      display:flex;
      align-items:center;
      gap:12px;
      font-weight:800;
      color:#4b5f77;
      white-space:nowrap;
    }
    .bar{
      width:110px;
      height:10px;
      border-radius:999px;
      background:#dfe9f7;
      overflow:hidden;
      border:1px solid rgba(20,90,190,.10);
    }
    .bar > i{
      display:block;
      height:100%;
      width:45%;
      background: linear-gradient(90deg, #3b88e6, #2b74cc);
    }

    /* Helpers */
    .svg{ width:18px;height:18px; display:block; }
    .svg.white{ filter: drop-shadow(0 6px 12px rgba(0,0,0,.14)); }
    .svg *{ vector-effect: non-scaling-stroke; }

    /* Responsive */
    @media (max-width: 1100px){
      .tiles{ grid-template-columns: repeat(2, 1fr); }
      .grid{ grid-template-columns: 1fr; }
      .hero-inner{ flex-direction:column; align-items:flex-start; }
      .hero-art{ align-self:stretch; justify-content:flex-end; }
      .grid2{ grid-template-columns: repeat(2, 1fr); }
      .brand{ min-width:auto; }
      .user{ min-width:auto; }
    }
    @media (max-width: 560px){
      .quickbar{ flex-wrap:wrap; justify-content:flex-start; }
      .grid2{ grid-template-columns: 1fr; }
      .hero-title h2{ font-size:34px; }
    }

/* =========================
   Inner pages (same style)
   ========================= */
.page-hero{
  margin-top:18px;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border: 1px solid rgba(20, 80, 160, .20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(90deg, #0f5fb8 0%, #1a7ad6 45%, #0f5fb8 100%);
  position:relative;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:-20px -30px auto -30px;
  height:150px;
  background:
    radial-gradient(260px 90px at 18% 70%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(320px 120px at 85% 40%, rgba(255,255,255,.16), transparent 62%);
  opacity:.9;
  pointer-events:none;
}
.page-hero .inner{
  padding: 18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.page-hero .title{
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
}
.page-hero .title h2{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  line-height:1.1;
  text-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.page-hero .title p{
  margin:6px 0 0;
  font-size:13px;
  font-weight:800;
  opacity:.95;
}
.crumbs{
  display:flex;
  gap:10px;
  align-items:center;
  color: rgba(255,255,255,.92);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.crumbs a{ color: rgba(255,255,255,.92); text-decoration:none; }
.crumbs a:hover{ text-decoration:underline; }

.page{
  margin-top:14px;
  padding-bottom:28px;
}
.page-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:start;
}
.card-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
}
.card{
  background: var(--card);
  border: 1px solid rgba(10, 35, 70, .10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card .head{
  padding:14px 16px 10px;
  font-weight:900;
  color:#1a3554;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.card .body{ padding: 10px; }
.progress { 
  display: block; 
  margin-bottom: 10px;
}
.meta{ display: block; margin-bottom: 10px;}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size:11px;
  border:1px solid rgba(20, 90, 190, .16);
  background:#f0f6ff;
  color:#15406e;
  white-space:nowrap;
}
.badge.ok{ background:#effaf3; border-color: rgba(20,130,70,.20); color:#1e6a3d; }
.badge.warn{ background:#fff6e9; border-color: rgba(220,120,40,.22); color:#6b2f00; }
.badge.muted{ background:#f4f6f9; border-color: rgba(10,35,70,.10); color:#55697f; }

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 14px;
  border:1px solid rgba(10,35,70,.10);
}
.table th, .table td{
  text-align:left;
  padding: 11px 12px;
  font-size:13px;
}
.table th{
  background:#f0f6ff;
  color:#1a3554;
  font-weight:900;
  border-bottom:1px solid rgba(10,35,70,.10);
}
.table td{
  background:#fff;
  color:#1b2a3a;
  border-bottom:1px solid rgba(10,35,70,.08);
}
.table tr:last-child td{ border-bottom:0; }

.progress{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background:#dfe9f7;
  border:1px solid rgba(20,90,190,.10);
  overflow:hidden;
}
.progress > i{
  display:block;
  height:100%;
  width: var(--p, 0%);
  background: linear-gradient(90deg, #3b88e6, #2b74cc);
}

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.field label{ display:block; font-weight:900; font-size:12px; color:#1a3554; margin: 10px 0 6px; }
.field input, .field select, .field textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(10,35,70,.12);
  background:#fff;
  outline:none;
  font-family:inherit;
  font-size:13px;
}
.field textarea{ min-height:92px; resize:vertical; }

.toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  padding: 0 0 12px;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid rgba(10,35,70,.12);
  background:#fff;
  min-width: 260px;
}
.search input{
  border:0;
  outline:none;
  width:100%;
  font-size:13px;
  font-family:inherit;
}

.chart{
  height:180px;
  border-radius: 14px;
  background: #fff;
  border:1px solid rgba(10,35,70,.10);
  overflow:hidden;
}
.chart canvas{ width:100%; height:100%; display:block; color:#1b66c2; }

@media (max-width: 1100px){
  .page-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .card-grid{ grid-template-columns: 1fr; }
  .form-row{ grid-template-columns: 1fr; }
  .search{ min-width: 100%; }
}