:root {
  --blue:#1e3a8a; --blue-500:#2563eb; --blue-100:#eef2ff;
  --gray-950:#0b0f19; --gray-900:#111827; --gray-700:#374151; --gray-600:#6b7280;
  --gray-300:#d1d5db; --gray-200:#e5e7eb; --white:#ffffff;
  --green:#047857; --yellow:#b45309; --red:#b91c1c;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Base */
.lpap { font-family:var(--font); color:var(--gray-900); }
.lpap .header { position:sticky; top:0; z-index:3; padding:16px 18px; background:#fff; border-bottom:1px solid var(--gray-200);}
.lpap .header h1 { margin:0 0 6px; font-size:22px; }
.lpap .header p { margin:0; color:var(--gray-600); }
.lpap .container { padding:16px; max-width:1100px; margin:0 auto; }

/* Sticky bar */
.lpap .stickybar {
  position:sticky; top:68px; z-index:2; background:#fff; border:1px solid var(--gray-200);
  border-radius:14px; padding:10px; box-shadow:0 6px 16px rgba(0,0,0,0.05);
  margin-bottom:12px; display:flex; gap:12px; align-items:center; justify-content:space-between;
}
.lpap .left { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; overflow:auto; }
.lpap .overall-label { font-size:12px; color:var(--gray-600); text-align:center; margin-top:4px; }

/* Inputs & buttons */
.lpap input[type="search"], .lpap select {
  padding:10px 12px; border:1px solid var(--gray-200); border-radius:12px; background:#fff; min-width:200px;
}
.lpap .btn { padding:8px 12px; border:1px solid var(--gray-200); border-radius:12px; background:#fff; cursor:pointer; font-weight:600; white-space:nowrap; }
.lpap .btn.primary { background:var(--blue-500); color:#fff; border-color:var(--blue-500); }

/* Board & groups */
.lpap .board { display:grid; grid-template-columns:1fr; gap:14px; }
.lpap .group { background:#fff; border:1px solid var(--gray-200); border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.05); }
.lpap .group-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--blue-100); cursor:pointer; }
.lpap .group-title { font-weight:700; display:flex; align-items:center; gap:8px; font-size: 20px; }
.lpap .group-meta { display:flex; gap:10px; align-items:center; font-size:12px; color:var(--gray-700); }
.lpap .group-body { padding:12px; display:grid; gap:10px; }

/* Cards */
.lpap .card { border:1px solid var(--gray-200); border-radius:14px; padding:12px; background:#fff; transition:.1s; }
.lpap .card:hover { transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.06); }
.lpap .card-head { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; }
.lpap .card-title { font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; }
.lpap .card-badge { padding:3px 8px; border:1px solid var(--gray-200); border-radius:999px; background:#f8fafc; font-size:12px; margin-left:6px; }
.lpap .card-body { display:none; margin-top:8px; color:var(--gray-800); }
.lpap .meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:700px){ .lpap .meta-grid { grid-template-columns:1fr; } }

/* Notes */
.lpap textarea { width:100%; min-height:80px; padding:10px; border:1px solid var(--gray-300); border-radius:10px; resize:vertical; }
.lpap label.small { display:block; font-size:12px; color:var(--gray-600); margin-bottom:4px; }
.lpap .kpill { border:1px solid var(--gray-200); border-radius:999px; padding:6px 10px; background:#f8fafc; font-size:12px; }

/* Donuts */
.lpap .donut { width:80px; height:80px; }
.lpap .donut.big { width:120px; height:120px; }

.lpap .donut { width:80px; height:80px; position:relative; } /* ← add position */
.lpap .donut.big { width:120px; height:120px; }
.lpap .donut .donut-center {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#111827; font-size:1rem;
}

.lpap .donut { min-width:60px;display:inline-block;vertical-align:middle }
.lpap .bar { min-width:80px; height:20px; display:inline-block;vertical-align:middle }
@media (max-width:700px){ .lpap .group-meta{flex-direction:column;align-items:flex-start}.lpap .donut{margin-bottom:8px;} }

.donut svg {
  display: block;
  margin: 0 auto;
}

.donut text, .donut span {
  dominant-baseline: middle !important;
  alignment-baseline: middle !important;
  text-anchor: middle !important;
  line-height: 1 !important;
  font-family: inherit !important;
  vertical-align: middle !important;
}

.lpap .donut span {
  display: inline-block !important;
  width: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 60px;
  vertical-align: middle;
}


.lpap .donut {
  position: relative;
  width: 100%;
  height: 32px;
  min-width: 120px;
  margin: 0 auto 2px auto;
}


.lpap .bar {
  position: relative;
  width: 100%;
  height: 32px;
  min-width: 120px;
  margin: 0 auto 2px auto;
  border-radius: 8px;
}
.lpap .bar span {
  position: absolute;
  right: 8px;
  top: 0;
  height: 28px;
  display: flex;
  align-items: center;
  font-size:19px;
  font-weight:900;
  pointer-events: none;
  background:transparent;
}


.lpap .bar,
.lpap .bar.glass {
  position: relative;
  width: 100%;
  height: 36px;
  min-width: 120px;
  margin: 0 auto 8px auto;
  border-radius: 12px;
  overflow: visible;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px) saturate(1.5) brightness(1.05);
  box-shadow: 0 6px 32px 0 rgba(34,45,74,0.11), 0 1.5px 6px 0 rgba(16,16,46,0.12);
}
.lpap .bar.glass svg {
  border-radius: 12px;
  overflow: visible;
}

.lpap .bar, .lpap .bar.mini {
  position: relative;
  width: 100%;
  height: 16px;
  min-width: 90px;
  margin: 0 auto 2px auto;
  border-radius: 8px;
  background: none;
}
.lpap .bar svg {
  border-radius: 8px;
}

.lpap-toolbar {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 18px !important;
  margin-top: 0 !important;
}
.lpap-toolbar input[type="search"], .lpap-toolbar select {
  min-width: 170px !important;
  max-width: 260px !important;
  padding: 11px 16px !important;
  border-radius: 14px !important;
  border: 1.5px solid #e5e7eb !important;
  font-size: 1.07em !important;
  background: #fff !important;
  color: #1e3a8a !important;
}
@media (max-width:700px) {
  .lpap-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
}
.progressbar-row {
  width: 100%;
  margin-bottom: 28px !important;
  margin-top: 0 !important;
  padding: 0 0 8px 0;
}
.lpap-premium-barwrap {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
.lpap-premium-bar-bg {
  flex: 1 1 auto;
  height: 18px;
  border-radius: 12px;
  background: linear-gradient(90deg,#eef2ff,#dbeafe 60%,#a5b4fc 100%);
  overflow: hidden;
  box-shadow: 0 2px 16px #2563eb1a;
  position: relative;
}
.lpap-premium-bar-fill {
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(90deg,#2563eb 60%,#1e40af 100%);
  transition: width .3s cubic-bezier(.65,.05,.36,1);
}
.lpap-premium-bar-label {
  margin-left: 20px;
  font-size: 1.14em;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: .01em;
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}