@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --pf-font:"Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --pf-font-display:"Space Grotesk","Manrope","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --p-navy-900:#070B1C;
  --p-navy-800:#0B1224;
  --p-navy-700:#18223F;
  --p-blue-600:#2563EB;
  --p-blue-700:#1D4ED8;
  --p-cyan-600:#0EA5E9;
  --p-teal-500:#14B8A6;
  --p-gray-300:#CBD5E1;
  --p-gray-200:#E2E8F0;
  --p-gray-100:#F1F5F9;
  --p-surface:#EEF2FF;
  --p-bg:#F8FAFC;
  --white:#FFFFFF;
  --black:#0B1020;
  --shadow-sm:0 10px 30px rgba(15,23,42,.10);
  --shadow-md:0 18px 48px rgba(15,23,42,.16);
}
  
  /* Layout */
  body{
    margin:0;
    background:var(--p-bg);
    color:var(--black);
    font-family: var(--pf-font, "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif);
    font-size: var(--pf-font-size, 17px);
    line-height: var(--pf-line, 1.55);
  }
  .app{
    display:grid;
    grid-template-columns:360px 1fr;
    min-height: calc(100vh - var(--pf-topbar-h, 88px));
    height: calc(100vh - var(--pf-topbar-h, 88px));
    align-items:stretch;
    gap:0;
    background:var(--p-bg);
  }
  .app > .sidebar,
  .app > .main{
    min-height: 100%;
    height: 100%;
  }
  .main{
    background:var(--p-bg);
  }
  
  /* Sidebar */
  .sidebar{
    background:radial-gradient(120% 120% at 0% 0%, #151B34 0%, #0B1020 55%, #070B16 100%);
    color:var(--white);
    padding:20px 16px;
    box-shadow:inset -1px 0 0 rgba(255,255,255,.06);
  }
  .sidebar .brand{display:flex;align-items:center;gap:12px;margin:4px 4px 20px}
  .sidebar .brand img{height:56px}
  .sidebar .section{margin:18px 4px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
  .sidebar a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    color:#DCE4FF;
    text-decoration:none;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .sidebar a:hover{background:rgba(255,255,255,.10);color:#fff;transform:translateX(2px)}
  .sidebar a.active{background:rgba(255,255,255,.18);color:var(--white)}
  
  /* Top bar + content */
  .header{
    padding:20px 28px 14px;
    border-bottom:1px solid var(--p-gray-200);
    background:var(--white);
    position:sticky;
    top:0;
    z-index:5;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
  }
  .h1{font-size:28px;margin:0 0 8px;font-weight:700;letter-spacing:-.02em}
  .content{padding:24px 30px 36px}
  
  /* Filters row */
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
  .btn{
    border:1px solid var(--p-gray-300);
    background:var(--white);
    color:var(--black);
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
    font-weight:600;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  }
  .btn:disabled{opacity:.6;cursor:not-allowed}
  .btn-primary{
    background:linear-gradient(135deg, var(--p-blue-600), var(--p-teal-500));
    border-color:var(--p-blue-600);
    color:var(--white);
    box-shadow:var(--shadow-sm);
  }
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(15,23,42,.12)}
  .btn-primary:hover{background:linear-gradient(135deg, var(--p-blue-700), var(--p-teal-500));border-color:var(--p-blue-700)}
  .badge{background:var(--p-surface);border:1px solid var(--p-gray-200);color:var(--p-navy-700);padding:2px 8px;border-radius:999px}
  
  /* Cards / tables */
  .card{
    background:var(--white);
    border:1px solid var(--p-gray-200);
    border-radius:16px;
    padding:18px;
    box-shadow:var(--shadow-sm);
  }
  .table{width:100%;border-collapse:collapse}
  .table th,.table td{border-top:1px solid var(--p-gray-200);padding:12px 10px;text-align:left}
  .table th{font-weight:700;background:var(--p-gray-100);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
  .table tr:hover td{background:#F8FAFF}

  /* Inputs */
  input, select, textarea{
    border:1px solid var(--p-gray-300);
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    color:var(--black);
    outline:none;
    transition:border-color .12s ease, box-shadow .12s ease;
  }
  input:focus, select:focus, textarea:focus{
    border-color:rgba(37,99,235,.65);
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
  }
  /* Utility accents (optional) */
  .text-cyan{color:var(--p-cyan-600)} .text-teal{color:var(--p-teal-500)}

  /* Click-anywhere file zones */
.drop{position:relative}
.drop input[type="file"]{
  position:absolute; inset:0; opacity:0; cursor:pointer; z-index:2;
}
.drop .btn.secondary{position:relative; z-index:1}

  
.pf-logo{
  height: 64px;
  max-height: 72px;
  width: auto;
  display: block;
}

/* Typography lift for premium feel */
body{
  font-size: 17px;
}
button, input, select, textarea{
  font-size: 16px;
}
.muted, .help, .hint, .subtle{
  font-size: 14.5px;
}

.sidebar .brand img{height:64px;width:auto;max-height:72px}
.sidebar .brand img.pf-logo{height:64px;width:auto;max-height:72px}

@media (max-width: 1100px){
  .app{
    grid-template-columns:1fr;
    height:auto;
  }
  .sidebar{
    position:sticky;
    top:0;
    z-index:6;
    padding:14px 12px;
  }
}



h1, h2, h3, .h1{
  font-family: var(--pf-font-display, var(--pf-font));
  letter-spacing:-.02em;
}