/* Bigjwet System - Cover + Starter App (Static, Cloudflare-ready) */
:root{
  --bg0:#07040f;
  --bg1:#0c0620;
  --p1:#7c3aed;
  --p2:#22d3ee;
  --w: rgba(255,255,255,.92);
  --m: rgba(255,255,255,.68);
  --b: rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--w);
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--b);
  background: rgba(255,255,255,.06);
  color: var(--w);
  cursor:pointer;
  font-weight:650;
  letter-spacing:.2px;
  backdrop-filter: blur(10px);
  text-decoration:none !important;
}
.btn:hover{transform: translateY(-1px); transition: .15s ease}
.btn:active{transform: translateY(0px)}

.btn.primary{
  border: 1px solid rgba(124,58,237,.6);
  background: linear-gradient(135deg, rgba(124,58,237,.90), rgba(34,211,238,.45));
  box-shadow: 0 14px 34px rgba(124,58,237,.22);
}
.btn.ghost{background: transparent;}
.hint{margin-top:10px; color:var(--m); font-size:13px}
.muted{color:var(--m)}

/* COVER */
.cover{background: #050212;}
.coverWrap{min-height:100vh; display:flex; flex-direction:column}
.coverTop{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:center;
  padding: 16px 14px 8px;
}
.coverBrand{display:flex; align-items:center; gap:12px; max-width:1100px; width:100%}
.brandLogo{
  width:44px; height:44px; border-radius:14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  object-fit:cover;
}
.brandName{font-weight:800; letter-spacing:.2px; font-size:20px}
.brandName .thin{font-weight:500}
.tm{font-size:12px; opacity:.8; vertical-align:top; margin-left:2px}
.brandTag{color:rgba(255,255,255,.72); font-size:13px; margin-top:2px}

.coverHero{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px 14px 32px;
}
.coverImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.coverOverlay{
  position:absolute; inset:0;
  background: radial-gradient(900px 500px at 50% 55%, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%),
              linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}
.coverContent{
  position:relative;
  z-index:2;
  max-width: 980px;
  width:100%;
  text-align:center;
  padding: 8px 8px 0;
}
.coverContent h1{
  margin:0 0 10px;
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.05;
}
.coverContent p{
  margin: 0 auto 18px;
  max-width: 760px;
  color: rgba(255,255,255,.78);
  line-height:1.5;
}
.coverCta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:14px}
.coverLinks{display:flex; gap:10px; justify-content:center; color:rgba(255,255,255,.70); font-size:13px}

/* APP */
.appTop{
  position:sticky; top:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background: rgba(5,2,18,.80);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.appBrand{display:flex; align-items:center; gap:12px}
.appLogo{width:40px;height:40px;border-radius:14px;border:1px solid rgba(255,255,255,.14);object-fit:cover}
.appName{font-weight:800}
.appSub{color:var(--m); font-size:13px}
.appActions{display:flex; gap:10px; flex-wrap:wrap}

.appLayout{
  display:grid;
  grid-template-columns: 250px 1fr;
  min-height: calc(100vh - 64px);
}
.side{
  border-right: 1px solid rgba(255,255,255,.10);
  padding: 12px 10px;
  background: rgba(0,0,0,.14);
}
.navItem{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.82);
  cursor:pointer;
  margin-bottom: 8px;
}
.navItem:hover{background: rgba(255,255,255,.05)}
.navItem.active{
  background: rgba(124,58,237,.18);
  border-color: rgba(124,58,237,.35);
  color: rgba(255,255,255,.95);
}

.content{
  padding: 16px 14px 40px;
  max-width: 1100px;
}
.tab{display:none}
.tab.show{display:block}
h2{margin: 8px 0 10px}

.card{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  padding: 14px;
  margin-top: 12px;
}
.cardTitle{font-weight:750; margin-bottom:10px}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.form input, .form select{
  flex:1;
  min-width: 180px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  outline:none;
}
.form input::placeholder{color: rgba(255,255,255,.45)}
.form select{min-width: 200px}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.list{display:grid; gap:8px}
.item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.item small{color:var(--m)}
.pill{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-weight:800;
}

.kpis{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; margin-top: 10px}
.kpi{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:16px; padding:12px}
.kpiLabel{color:var(--m); font-size:13px}
.kpiValue{font-weight:900; font-size:24px; margin-top:6px}

.tableWrap{overflow:auto}
table{width:100%; border-collapse: collapse; font-size: 13px}
th,td{padding:10px 10px; border-bottom:1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.86)}
th{color: rgba(255,255,255,.70); font-weight:700; text-align:left}

.paystubPreview{
  margin-top: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,.14);
}
.taxOut{margin-top:12px; color:rgba(255,255,255,.86); line-height:1.45}

@media (max-width: 980px){
  .appLayout{grid-template-columns: 1fr}
  .side{display:flex; gap:8px; overflow:auto; position:sticky; top:64px; z-index:9}
  .navItem{white-space:nowrap; margin-bottom:0}
  .grid2{grid-template-columns: 1fr}
  .kpis{grid-template-columns: repeat(2, minmax(0,1fr))}
}