:root{
  color-scheme: light dark;
  --cg-primary:#6c5ce7;
  --cg-primary-dark:#5a4bd1;
  --cg-primary-soft:#eeeafe;
  --cg-bg:#f7f7fa;
  --cg-panel:#ffffff;
  --cg-panel-alt:#fafafc;
  --cg-border:#e9e9ef;
  --cg-divider:#f0f0f4;
  --cg-text:#0f1020;
  --cg-muted:#5e6079;
  --cg-muted-2:#9a9cae;
  --cg-on-primary:#ffffff;
  --cg-shadow:0 18px 48px rgba(15,16,32,.12);
  --cg-header-bg:rgba(247,247,250,.82);
  --cg-header-border:rgba(15,16,32,.06);
  --cg-shell-bg: #f7f7fa;
  --cg-shell-panel: #ffffff;
  --cg-shell-shadow: 0 24px 70px rgba(15,16,32,.10);
}
@media (prefers-color-scheme:dark){
  :root{
    --cg-bg:#12141a;
    --cg-panel:#171a22;
    --cg-panel-alt:#1d2130;
    --cg-border:rgba(232,234,240,.12);
    --cg-divider:rgba(232,234,240,.10);
    --cg-text:#e8eaf0;
    --cg-muted:rgba(232,234,240,.72);
    --cg-muted-2:rgba(232,234,240,.55);
    --cg-shadow:0 20px 60px rgba(0,0,0,.45);
    --cg-header-bg:rgba(18,20,26,.72);
    --cg-header-border:rgba(232,234,240,.10);
    --cg-shell-bg:#0f1117;
    --cg-shell-panel:#151821;
    --cg-shell-shadow:0 24px 70px rgba(0,0,0,.42);
  }
}

html.cg-force-light{
  --cg-bg:#f7f7fa;
  --cg-panel:#ffffff;
  --cg-panel-alt:#fafafc;
  --cg-border:#e9e9ef;
  --cg-divider:#f0f0f4;
  --cg-text:#0f1020;
  --cg-muted:#5e6079;
  --cg-muted-2:#9a9cae;
  --cg-shadow:0 18px 48px rgba(15,16,32,.12);
  --cg-header-bg:rgba(247,247,250,.82);
  --cg-header-border:rgba(15,16,32,.06);
}
html.cg-force-dark{
  --cg-bg:#12141a;
  --cg-panel:#171a22;
  --cg-panel-alt:#1d2130;
  --cg-border:rgba(232,234,240,.12);
  --cg-divider:rgba(232,234,240,.10);
  --cg-text:#e8eaf0;
  --cg-muted:rgba(232,234,240,.72);
  --cg-muted-2:rgba(232,234,240,.55);
  --cg-shadow:0 20px 60px rgba(0,0,0,.45);
  --cg-header-bg:rgba(18,20,26,.72);
  --cg-header-border:rgba(232,234,240,.10);
  --cg-shell-bg:#0f1117;
  --cg-shell-panel:#151821;
  --cg-shell-shadow:0 24px 70px rgba(0,0,0,.42);
}

body{
  min-height: 100vh;
  min-height: 100dvh;
  background:
    linear-gradient(180deg, rgba(108,92,231,.035), transparent 260px),
    var(--cg-shell-bg);
  color:var(--cg-text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.cg-shell-on body{
  padding-top: 78px;
}

/* Outer desktop shell container (added by JS). */
.cg-shell{
  background: transparent !important;
}
.cg-shell-body{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 24px;
  margin-top: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ==== Global shared header ==== */
.cg-app-header{
  position:fixed;
  left:0; right:0; top:0;
  z-index:99990;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--cg-header-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.cg-header-inner{
  max-width: 104rem;
  margin:0 auto;
  padding: 12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.cg-left{display:flex;align-items:center;gap:14px;min-width:220px}
.cg-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:inherit;flex-shrink:0;
}
.cg-brand-icon{
  width:38px;height:38px;border-radius:12px;
  background:#111418;border:1px solid rgba(15,16,32,.10);
  box-shadow: 0 12px 28px rgba(15,16,32,.14);
  object-fit: cover;
}
.cg-brand-name{font-weight:900;letter-spacing:-0.02em}
.cg-breadcrumb{display:flex;align-items:center;gap:10px;color:var(--cg-muted);font-weight:800;font-size:13px}
.cg-sep{opacity:.6}
.cg-crumb{color:var(--cg-text)}

.cg-top-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1;
  justify-content:center;
}
.cg-top-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--cg-muted);
  font-size:13px;
  font-weight:900;
  padding:11px 16px;
  border-radius:16px;
  border:1px solid transparent;
  background: transparent;
  box-shadow: none;
  transition: background .16s ease, transform .16s ease, color .16s ease, border-color .16s ease;
}
.cg-top-nav a:hover{transform:translateY(-1px);background:var(--cg-primary-soft);border-color:rgba(108,92,231,.16);color:var(--cg-text)}
.cg-top-nav a.cg-active{background:rgba(108,92,231,.10);border-color:rgba(108,92,231,.18);color:var(--cg-primary);box-shadow:0 12px 28px rgba(108,92,231,.10)}
.cg-nav-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:currentColor}
.cg-nav-svg{width:18px;height:18px}

.cg-actions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
  justify-content:flex-end;
}
.cg-app-header:not(.cg-ready) .cg-actions{
  visibility: hidden;
}
.cg-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:34px;
  border-radius:12px;
  border:1px solid var(--cg-border);
  background:var(--cg-panel);
  color:var(--cg-text);
  cursor:pointer;
  text-decoration:none;
  box-shadow: 0 10px 24px rgba(15,16,32,.06);
}
.cg-ico{
  width: 18px;
  height: 18px;
}
.cg-icon-btn:hover{ background: var(--cg-primary-soft); }
.cg-icon-btn:active{ transform: translateY(1px); }
.cg-link-btn{ line-height:1; }

.cg-user{display:flex;align-items:center;gap:12px}
.cg-user-email{font-size:12px;font-weight:900;color:var(--cg-muted);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cg-user-avatar{
  width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--cg-border);
  background: var(--cg-panel);
  font-weight: 900;
  color: var(--cg-text);
}
.cg-signout{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;
  border-radius:14px;
  background:#111418;
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  box-shadow: 0 14px 34px rgba(15,16,32,.18);
}
.cg-signout:hover{filter:brightness(1.05)}

.cg-menu-btn{ display:inline-flex; }

.cg-mobile-overlay[hidden]{ display:none; }
.cg-mobile-overlay{
  position:fixed;
  inset:0;
  display:block;
  background: rgba(15,16,32,.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index:99999;
}
.cg-mobile-sheet{
  margin: 88px auto 0;
  max-width: 520px;
  background: var(--cg-panel);
  border: 1px solid var(--cg-border);
  border-radius: 20px;
  box-shadow: var(--cg-shadow);
  padding: 14px;
}
.cg-mobile-title{
  font-size:14px;
  font-weight:900;
  padding: 8px 10px 10px;
}
.cg-mobile-links{
  display:grid;
  gap: 6px;
  padding: 0 6px 6px;
}
.cg-mobile-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel-alt);
  text-decoration:none;
  color: var(--cg-text);
  font-weight:800;
  font-size: 13px;
}
.cg-mobile-links a:hover{ background: var(--cg-primary-soft); border-color: rgba(108,92,231,.28); }
.cg-mobile-footer{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding: 10px 6px 6px;
}
.cg-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  font-weight:900;
  font-size: 12px;
  cursor:pointer;
  text-decoration:none;
  color: var(--cg-text);
}
.cg-pill:hover{ background: var(--cg-primary-soft); border-color: rgba(108,92,231,.28); }

/* Hide the Next-exported header: we replace it with cg-app-header. */
body > div[class*="min-h"][class*="flex-col"] > header[class*="border-b"]{
  display:none !important;
}

/* Keep the main content readable on wide screens while still "full screen". */
body > div[class*="min-h"][class*="flex-col"] > div[class*="mx-auto"][class*="w-full"]{
  max-width: 104rem !important;
}

/* Home mini cards (pending / completed) */
.cg-home-cards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 860px){
  .cg-home-cards{ grid-template-columns: 1fr; }
}
.cg-mini-card{
  display:flex;
  gap: 16px;
  align-items:center;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  box-shadow: 0 14px 38px rgba(15,16,32,.06);
}
.cg-mini-badge{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(15,16,32,.06);
  background: rgba(108,92,231,.08);
  color: var(--cg-primary);
  flex-shrink: 0;
}
.cg-mini-completed .cg-mini-badge{
  background: rgba(22,163,74,.10);
  color: #16a34a;
}
.cg-mini-ico{ width: 28px; height: 28px; }
.cg-mini-label{ font-size: 13px; font-weight: 800; color: var(--cg-muted); }
.cg-mini-value{ font-size: 34px; font-weight: 900; letter-spacing: -0.02em; margin-top: 4px; }
.cg-mini-sub{ font-size: 12px; font-weight: 700; color: var(--cg-muted-2); margin-top: 4px; }

/* Home header CTAs */
.cg-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-decoration:none !important;
  box-shadow: 0 14px 34px rgba(15,16,32,.10) !important;
}
.cg-cta-ico svg{ width: 18px; height: 18px; }
.cg-cta-secondary{
  border: 1px solid var(--cg-border) !important;
  background: var(--cg-panel) !important;
  color: var(--cg-text) !important;
}
.cg-cta-secondary:hover{ background: var(--cg-primary-soft) !important; border-color: rgba(108,92,231,.25) !important; }
.cg-cta-primary{
  border: 1px solid rgba(108,92,231,.35) !important;
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4bd1 100%) !important;
  color: #fff !important;
}
.cg-cta-primary:hover{ filter: brightness(1.03); }

.cg-view-all{
  color: var(--cg-primary);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.cg-view-all:hover{ text-decoration: underline; }

/* Sidebar (desktop) to feel like the app's navigation rail. */
aside{
  position: sticky;
  top: 102px;
  align-self: flex-start;
}
aside{width: 272px}
aside > div{
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px !important;
}
aside a{
  min-height: 48px;
  font-weight:900 !important;
  border-radius:14px !important;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left: 14px !important;
  padding-right: 14px !important;
}
aside a .cg-side-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--cg-muted)}
aside a.cg-active{background: rgba(108,92,231,.10) !important; color: var(--cg-primary) !important}
aside a.cg-active .cg-side-ico{color: var(--cg-primary)}
aside a:hover{
  background: var(--cg-primary-soft) !important;
  color: var(--cg-text) !important;
}

/* Upgrade card injected by JS */
.cg-upgrade-card{
  margin-top: 24px;
  border-radius: 18px;
  border: 1px solid var(--cg-border);
  background: linear-gradient(180deg, rgba(108,92,231,.08), rgba(108,92,231,.02));
  padding: 18px;
  box-shadow: 0 18px 48px rgba(15,16,32,.08);
}
.cg-upgrade-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cg-upgrade-badge{
  width:38px;height:38px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(108,92,231,.12);
  color: var(--cg-primary);
  border: 1px solid rgba(108,92,231,.18);
}
.cg-upgrade-title{font-weight:900;letter-spacing:-0.01em}
.cg-upgrade-sub{margin-top:4px;color:var(--cg-muted);font-weight:700;font-size:12px;line-height:1.4}
.cg-upgrade-cta{
  margin-top: 12px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6c5ce7 0%, #5a4bd1 100%);
  color: #fff;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 16px 44px rgba(108,92,231,.28);
}
.cg-upgrade-cta:hover{filter:brightness(1.03)}

/* If an app page already has the marketing nav, prefer the global app header. */
html.cg-shell-on nav#site-nav{ display:none; }

/* V2-ish card / typography tuning (applies cleanly on Tailwind-export pages). */
main h1{
  font-size: clamp(28px, 2.15vw, 38px) !important;
  letter-spacing:-0.02em !important;
  line-height:1.15 !important;
}
main p{
  color: var(--cg-muted) !important;
}

main{
  min-width: 0;
  overflow-x: clip;
}

main > div{
  width: 100%;
  min-width: 0;
}

main *{
  min-width: 0;
}

main a,
main button,
main div,
main p,
main span{
  overflow-wrap: anywhere;
}

main [class*="flex"][class*="items-center"][class*="justify-between"]{
  max-width: 100%;
}

main [class*="rounded"][class*="px-3"],
main [class*="rounded"][class*="p-2"],
main [class*="rounded"][class*="p-3"],
main [class*="rounded"][class*="p-4"],
main [class*="rounded"][class*="p-6"]{
  max-width: 100%;
}

main [class*="truncate"]{
  max-width: 100%;
}

main table{
  width: 100%;
  table-layout: fixed;
}

main th,
main td{
  white-space: normal !important;
  overflow-wrap: anywhere;
}

main .border,
main [class*="border-zinc"]{
  border-color: var(--cg-border) !important;
}

main [class*="bg-white"],
main [class*="dark:bg-zinc-950"]{
  background: color-mix(in srgb, var(--cg-panel) 94%, transparent) !important;
}

main [class*="bg-zinc-50"],
body > div[class*="bg-zinc-50"]{
  background: transparent !important;
}

main [class*="text-zinc-600"],
main [class*="text-zinc-500"],
main [class*="dark:text-zinc-400"]{
  color: var(--cg-muted) !important;
}

main .shadow-sm,
main [class*="shadow"]{
  box-shadow: 0 18px 48px rgba(15,16,32,.08) !important;
}

.cg-clickable{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}
.cg-clickable:hover{
  transform: translateY(-1px);
}
.cg-clickable:active{
  transform: translateY(0);
}

.cg-field{
  min-height: 44px;
  border-color: var(--cg-border) !important;
  background: var(--cg-panel) !important;
  color: var(--cg-text) !important;
}
.cg-field:focus{
  border-color: rgba(108,92,231,.45) !important;
  box-shadow: 0 0 0 4px rgba(108,92,231,.12) !important;
}

.cg-loading-line{
  position: relative;
  overflow: hidden;
  min-height: 44px;
  width: min(360px, 100%);
  color: transparent !important;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--cg-panel-alt), var(--cg-primary-soft), var(--cg-panel-alt));
  background-size: 220% 100%;
  animation: cg-shimmer 1.35s ease-in-out infinite;
}

.cg-list-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin: 10px 0 12px;
}
.cg-list-search{
  flex: 1;
  min-width: 220px;
  display:flex;
  align-items:center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--cg-border);
  border-radius: 14px;
  background: var(--cg-panel);
  box-shadow: 0 10px 26px rgba(15,16,32,.05);
}
.cg-list-search-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  color: var(--cg-muted);
}
.cg-list-search-ico svg{
  width: 18px;
  height: 18px;
}
.cg-list-search input{
  width: 100%;
  min-height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--cg-text);
  font-size: 13px;
  font-weight: 800;
}
.cg-list-pager{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--cg-muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.cg-list-pager button{
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  color: var(--cg-text);
  font-size: 12px;
  font-weight: 900;
  cursor:pointer;
}
.cg-list-pager button:disabled{
  cursor: default;
  opacity: .42;
}
@media (max-width: 700px){
  .cg-list-tools{
    align-items:stretch;
    flex-direction:column;
  }
  .cg-list-search{
    min-width: 0;
  }
  .cg-list-pager{
    justify-content:space-between;
  }
}
@keyframes cg-shimmer{
  from{ background-position: 120% 0; }
  to{ background-position: -120% 0; }
}

html.cg-auth-route body{
  padding-top: 0;
  background:
    radial-gradient(720px 480px at 22% 12%, rgba(108,92,231,.20), transparent 62%),
    radial-gradient(620px 420px at 80% 8%, rgba(244,114,182,.10), transparent 60%),
    var(--cg-shell-bg);
}

html.cg-auth-route .cg-app-header{
  position: absolute;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.cg-auth-route .cg-top-nav,
html.cg-auth-route .cg-user,
html.cg-auth-route .cg-signout,
html.cg-auth-route .cg-bottom-nav{
  display: none !important;
}

html.cg-auth-route .cg-header-inner{
  max-width: 1160px;
  padding-top: 22px;
}

html.cg-auth-route .cg-left{
  min-width: 0;
}

html.cg-auth-route .cg-breadcrumb{
  display: none;
}

html.cg-auth-route body > div[class*="items-center"][class*="justify-center"]{
  min-height: 100vh !important;
  background: transparent !important;
  padding-top: 110px !important;
  padding-bottom: 56px !important;
}

.cg-auth-card{
  position: relative;
  border-radius: 30px !important;
  border-color: rgba(108,92,231,.18) !important;
  box-shadow: 0 30px 90px rgba(15,16,32,.18) !important;
  padding: 30px !important;
}
.cg-auth-card::before{
  content: "Commitment intelligence";
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--cg-primary-soft);
  color: var(--cg-primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cg-google-dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background: #fff;
  color: #4285f4;
  border: 1px solid var(--cg-border);
  font-weight: 900;
}

.adsbygoogle{
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(108,92,231,.08), rgba(37,99,235,.06));
  border: 1px dashed rgba(108,92,231,.20);
}
.cg-ad-fallback{
  margin-top: auto;
  border-top: 1px solid var(--cg-border);
  background: rgba(255,255,255,.78);
}
.cg-ad-inner{
  width: min(104rem, 100%);
  margin: 0 auto;
  padding: 18px 24px 24px;
}
.cg-ad-label{
  margin-bottom: 10px;
  color: var(--cg-muted);
  font-size: 12px;
  font-weight: 900;
}

.cg-rc-root{
  display: grid;
  gap: 16px;
}
.cg-rc-card{
  display:flex;
  justify-content:space-between;
  gap: 18px;
  align-items:flex-start;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(108,92,231,.18);
  background:
    linear-gradient(135deg, rgba(108,92,231,.10), rgba(255,255,255,.88) 55%),
    var(--cg-panel);
  box-shadow: 0 18px 48px rgba(15,16,32,.08);
}
.cg-rc-kicker{
  color: var(--cg-primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cg-rc-card h2{
  margin: 8px 0 6px;
  color: var(--cg-text);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: 0;
}
.cg-rc-card p{
  margin: 0;
  max-width: 560px;
  color: var(--cg-muted);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}
.cg-rc-user{
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--cg-border);
  background: rgba(255,255,255,.78);
}
.cg-rc-user span{
  display:block;
  color: var(--cg-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.cg-rc-user strong{
  display:block;
  margin-top: 5px;
  overflow:hidden;
  text-overflow:ellipsis;
  color: var(--cg-text);
  font-size: 13px;
}
.cg-rc-status{
  border-radius: 16px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  padding: 14px 16px;
  color: var(--cg-muted);
  font-size: 13px;
  font-weight: 800;
}
.cg-rc-status.cg-rc-warn{
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.08);
  color: #92400e;
}
.cg-rc-status.cg-rc-error{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.08);
  color: #991b1b;
}
.cg-rc-plans{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cg-rc-plan{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  min-height: 112px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  color: var(--cg-text);
  box-shadow: 0 16px 42px rgba(15,16,32,.07);
  cursor: pointer;
  text-align: left;
}
.cg-rc-plan:hover{
  transform: translateY(-1px);
  border-color: rgba(108,92,231,.28);
  box-shadow: 0 20px 54px rgba(15,16,32,.10);
}
.cg-rc-plan:disabled{
  cursor: wait;
  opacity: .65;
}
.cg-rc-plan strong{
  display:block;
  font-size: 16px;
  font-weight: 900;
}
.cg-rc-plan small{
  display:block;
  margin-top: 6px;
  color: var(--cg-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}
.cg-rc-plan b{
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--cg-primary);
  color: #fff;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 900;
}
.rounded-2xl{ border-radius: 22px !important; }
.rounded-xl{ border-radius: 18px !important; }
.rounded-lg{ border-radius: 14px !important; }

/* Primary buttons */
a.bg-black,button.bg-black{ background: var(--cg-primary) !important; border-color: var(--cg-primary) !important; }
a.bg-black.text-white,button.bg-black.text-white{ color: var(--cg-on-primary) !important; }
a.dark\\:bg-white,button.dark\\:bg-white{ background: var(--cg-primary) !important; border-color: var(--cg-primary) !important; }
a.dark\\:text-black,button.dark\\:text-black{ color: var(--cg-on-primary) !important; }

/* Softer secondary buttons */
a.border-zinc-200:hover,button.border-zinc-200:hover{ background: var(--cg-primary-soft) !important; border-color: rgba(108,92,231,.28) !important; }

@media (max-width: 860px){
  .cg-top-nav{ display:none; }
  .cg-user{ display:none; }
  .cg-signout{ display:none; }
  .cg-breadcrumb{ display:none; }
  .cg-brand-name{ display:none; }
}

@media (min-width: 861px){ .cg-menu-btn{ display:none; } }

/* Accessibility */
:focus-visible{ outline: 2px solid var(--cg-primary); outline-offset: 2px; }

/* ==== Bottom tab bar (mobile) ==== */
.cg-bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99990;
  display: none;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.88);
  border-top: 1px solid var(--cg-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
@media (prefers-color-scheme: dark){
  .cg-bottom-nav{
    background: rgba(23,26,34,.78);
  }
}
.cg-bottom-nav a{
  text-decoration: none;
  color: var(--cg-muted-2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  width: 100%;
  font-weight: 800;
  font-size: 11px;
}
.cg-bottom-nav .cg-tab-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
}
.cg-tab-svg{ width: 18px; height: 18px; }
.cg-bottom-nav a.cg-active{
  color: var(--cg-primary);
}
.cg-bottom-nav a.cg-active .cg-tab-ico{
  background: var(--cg-primary-soft);
  border-color: rgba(108,92,231,.25);
}
.cg-bottom-nav .cg-tab-add{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  margin-top: -26px;
  background: var(--cg-primary);
  color: var(--cg-on-primary);
  border: 0;
  box-shadow: 0 18px 44px rgba(108,92,231,.28);
  font-size: 32px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cg-bottom-nav .cg-tab-add.cg-active{
  color: var(--cg-on-primary);
}

@media (max-width: 860px){
  .cg-bottom-nav{
    display:flex;
    gap: 6px;
    justify-content:space-between;
    align-items:flex-end;
  }
  body{
    padding-bottom: 84px;
  }
  .cg-shell-body{
    padding: 18px;
  }
  aside{
    width: auto;
  }
  .cg-rc-card{
    flex-direction:column;
  }
  .cg-rc-user{
    width: 100%;
    min-width: 0;
  }
  .cg-rc-plans{
    grid-template-columns: 1fr;
  }
}

/* ==== V2-like card grid for Home (JS injects) ==== */
.cg-stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 860px){
  .cg-stats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cg-stat-card{
  background: var(--cg-panel);
  border: 1px solid var(--cg-border);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(15,16,32,.08);
  padding: 18px 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-height: 104px;
}
.cg-stat-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.cg-stat-ico{
  width: 40px;
  height: 40px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel-alt);
  color: var(--cg-primary);
  font-weight: 900;
}
.cg-stat-label{ font-size: 13px; color: var(--cg-muted); font-weight: 800; }
.cg-stat-value{ font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }

/* ==== PHP static layout ==== */
.cg-page-body{
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 24px;
  padding: 32px 24px;
  box-sizing: border-box;
}

.cg-sidebar{
  width: 214px;
  flex-shrink: 0;
}
.cg-sidebar nav{
  position: sticky;
  top: 98px;
  background: var(--cg-panel);
  border: 1px solid var(--cg-border);
  border-radius: 22px;
  padding: 10px;
}
.cg-sidebar nav a{
  display: block;
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--cg-text);
  text-decoration: none;
  transition: background .14s, color .14s;
}
.cg-sidebar nav a:hover{
  background: var(--cg-primary-soft);
  color: var(--cg-text);
}
.cg-sidebar nav a.cg-active{
  background: var(--cg-primary-soft);
  color: var(--cg-primary);
}
.cg-sidebar-sep{
  height: 1px;
  background: var(--cg-divider);
  margin: 8px 4px;
}

.cg-main{
  flex: 1;
  min-width: 0;
}

.cg-auth-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 110px 24px 56px;
  box-sizing: border-box;
}

/* PHP page heading */
.cg-page-head{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.cg-page-head h1{
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}
.cg-page-head p{
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  color: var(--cg-muted) !important;
}
.cg-page-head-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Buttons */
.cg-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: filter .14s, transform .14s;
}
.cg-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.cg-btn-primary{ background: var(--cg-primary); color: var(--cg-on-primary); }
.cg-btn-outline{ background: var(--cg-panel); border-color: var(--cg-border); color: var(--cg-text); }
.cg-btn-outline:hover{ background: var(--cg-primary-soft); border-color: rgba(108,92,231,.28); }

/* Card */
.cg-card{
  background: var(--cg-panel);
  border: 1px solid var(--cg-border);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 14px 36px rgba(15,16,32,.07);
}

/* Empty / loading states */
.cg-empty{
  padding: 48px 24px;
  text-align: center;
  color: var(--cg-muted);
  font-size: 14px;
  font-weight: 700;
}
.cg-spinner{
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--cg-border);
  border-top-color: var(--cg-primary);
  border-radius: 50%;
  animation: cg-spin .7s linear infinite;
}
@keyframes cg-spin{ to{ transform: rotate(360deg); } }

/* Auth form */
.cg-auth-card{
  width: 100%;
  max-width: 420px;
}
.cg-auth-form{ display: grid; gap: 14px; }
.cg-auth-form label{
  font-size: 12px;
  font-weight: 900;
  color: var(--cg-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 5px;
}
.cg-auth-form input{
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--cg-border);
  border-radius: 14px;
  background: var(--cg-panel);
  color: var(--cg-text);
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.cg-auth-form input:focus{
  border-color: rgba(108,92,231,.45);
  box-shadow: 0 0 0 4px rgba(108,92,231,.12);
}
.cg-auth-form .cg-btn{ width: 100%; margin-top: 4px; }
.cg-auth-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cg-muted);
}
.cg-auth-links a{ color: var(--cg-primary); text-decoration: none; font-weight: 900; }
.cg-auth-msg{
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  display: none;
}
.cg-auth-msg.show{ display: block; }
.cg-auth-msg.ok{ background: rgba(16,185,129,.10); border: 1px solid rgba(16,185,129,.28); color: #065f46; }
.cg-auth-msg.err{ background: rgba(239,68,68,.10); border: 1px solid rgba(239,68,68,.28); color: #991b1b; }

@media (prefers-color-scheme: dark){
  .cg-auth-msg.ok{ color: #6ee7b7; }
  .cg-auth-msg.err{ color: #fca5a5; }
}

/* Recent commitments list */
.cg-recent-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 18px;
  border: 1px solid var(--cg-border);
  background: var(--cg-panel);
  text-decoration: none;
  color: var(--cg-text);
  font-weight: 800;
  font-size: 13px;
  transition: background .14s, border-color .14s;
}
.cg-recent-row:hover{
  background: var(--cg-primary-soft);
  border-color: rgba(108,92,231,.22);
}
.cg-recent-title{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cg-recent-meta{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cg-recent-due{
  font-size: 12px;
  color: var(--cg-muted);
}

@media (max-width: 860px){
  .cg-sidebar{ display: none; }
  .cg-page-body{ padding: 18px 16px; gap: 0; }
}
.cg-stat-sub{ font-size: 12px; color: var(--cg-muted-2); font-weight: 700; }