:root{
    --navy:#0c2a63;
    --navy-dark:#081d47;
    --blue:#2f5fd8;
    --blue-light:#eaf0ff;
    --bg:#f4f6fb;
    --text:#1c2540;
    --muted:#7b859c;
    --radius:16px;
  }
  body{background:var(--bg);color:var(--text);}
 
  /* ===== Main content area ===== */
  /* .main-content{
    padding:24px 28px 60px;
  } */
 
  /* Hero banner */
  .hero-banner{
    background:linear-gradient(120deg,#dce7ff 0%,#c3d6ff 55%,#a9c4ff 100%);
    border-radius:var(--radius);
    padding:38px 34px;
    position:relative;
    overflow:hidden;
    margin-bottom: 26px;
  }
  .hero-banner h6{
    color:var(--muted);
    font-weight:500;
    margin-bottom:4px;
  }
  .hero-banner h2{
    font-weight:800;
    color:var(--navy-dark);
    line-height:1.25;
    margin-bottom:10px;
  }
  .hero-banner h2 span{color:var(--blue);}
  .hero-banner p{color:#4c5573;margin-bottom:18px;}
  .hero-underline{width:46px;height:4px;background:var(--navy-dark);border-radius:4px;}
  .hero-art{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    font-size:110px;
    color:rgba(12,42,99,0.15);
    display:none;
  }
  @media(min-width:768px){.hero-art{display:block;}}
 
  /* Stat cards as <a> */
  .stat-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-radius:14px;
    padding:20px 20px;
    text-decoration:none;
    border:1px solid transparent;
    transition:all .2s ease;
    height:100%;
  }
  .stat-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 24px rgba(20,30,60,0.10);
    text-decoration:none;
  }
  .stat-left{display:flex;align-items:center;gap:14px;}
  .stat-icon{
    width:46px;height:46px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:18px;
    flex-shrink:0;
  }
  .stat-label{
    font-weight:600;
    color:var(--text);
    font-size:15px;
    line-height:1.25;
  }
  .stat-value{
    font-weight:800;
    font-size:26px;
  }
  .stat-arrow{color:var(--blue);font-size:14px;}
 
  .card-blue{background:#eaf1ff;} .card-blue .stat-icon{background:#d3e2ff;color:#2f5fd8;}
  .card-orange{background:#fdeee0;} .card-orange .stat-icon{background:#fbdcbb;color:#e07d1c;} .card-orange .stat-value{color:#e07d1c;}
  .card-purple{background:#f1eafe;} .card-purple .stat-icon{background:#e2d4fc;color:#8a4fe0;} .card-purple .stat-value{color:#8a4fe0;}
  .card-yellow{background:#fdf6df;} .card-yellow .stat-icon{background:#faecb4;color:#d6a419;} .card-yellow .stat-value{color:#d6a419;}
  .card-green{background:#e7f8ee;} .card-green .stat-icon{background:#c9f0d9;color:#1fa956;} .card-green .stat-value{color:#1fa956;}
  .card-red{background:#fdecec;} .card-red .stat-icon{background:#fad2d2;color:#e0433f;} .card-red .stat-value{color:#e0433f;}
  .card-skyblue{background:#eaf3ff;} .card-skyblue .stat-icon{background:#cfe4ff;color:#2f7dd8;} .card-skyblue .stat-value{color:#2f7dd8;}
  .card-teal{background:#e7f7f4;} .card-teal .stat-icon{background:#c8ede5;color:#1c9a83;} .card-teal .stat-value{color:#1c9a83;}
 
  /* Table card */
  .table-card{
    background:#fff;
    border-radius:var(--radius);
    padding:22px 22px 8px;
    box-shadow:0 2px 10px rgba(20,30,60,0.04);
  }
  .table-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:18px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .table-card-title{display:flex;align-items:center;gap:12px;}
  .table-card-title .icon-box{
    width:38px;height:38px;border-radius:10px;
    background:#eaf1ff;color:#2f5fd8;
    display:flex;align-items:center;justify-content:center;
  }
  .table-card-title h5{margin:0;font-weight:700;font-size:17px;}
 
  table.manuscript-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    min-width:1000px;
  }
  .manuscript-table thead th{
    font-size:13px;
    font-weight:700;
    color:var(--navy-dark);
    border-bottom:2px solid #eef1f8;
    padding:10px 14px;
    white-space:nowrap;
    background:#fff;
    position:sticky;
    top:0;
  }
  .manuscript-table tbody td{
    padding:14px;
    font-size:13.5px;
    color:#3a4257;
    border-bottom:1px solid #f1f3f9;
    white-space:nowrap;
  }
  .manuscript-table tbody tr:hover{background:#f9fafd;}
 
  .badge-status{
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    display:inline-block;
  }
  .badge-submitted{background:#fdeee0;color:#e07d1c;}
  .badge-underreview{background:#f1eafe;color:#8a4fe0;}
  .badge-revision{background:#fdf6df;color:#c99b12;}
  .badge-accepted{background:#e7f8ee;color:#1fa956;}
  .badge-rejected{background:#fdecec;color:#e0433f;}
  .badge-galley{background:#eaf3ff;color:#2f7dd8;}
  .badge-published{background:#e7f7f4;color:#1c9a83;}
 
  .badge-pay{
    padding:4px 10px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:600;
  }
  .pay-paid{background:#e7f8ee;color:#1fa956;}
  .pay-pending{background:#fdecec;color:#e0433f;}
 
  .table-scroll{overflow-x:auto;padding-bottom:8px;}
 
  .avatar-name{display:flex;align-items:center;gap:8px;}
  .avatar-name img{width:28px;height:28px;border-radius:50%;object-fit:cover;}
 
  .action-btn{
    width:32px;height:32px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    background:#eaf1ff;color:#2f5fd8;border:none;font-size:13px;
    margin-right:4px;
  }
  .action-btn.danger{background:#fdecec;color:#e0433f;}
 
  /* Mobile tweaks */
  @media(max-width:576px){
    /* .main-content{padding:16px;} */
    .hero-banner{padding:26px 20px;}
    .hero-banner h2{font-size:22px;}
    .stat-card{padding:16px;}
    .stat-value{font-size:22px;}
    .table-card{padding:16px 14px 6px;}
    .table-card-header{flex-direction:column;align-items:flex-start;}
  }