/* CPD Portal Hub — dual-theme (white-executive default, dark-executive toggle) */

:root, [data-theme="white"]{
  --navy:#0A1628;--navy-2:#122843;--navy-3:#1E3A5F;
  --teal:#2BA3A3;--teal-soft:#1d8080;--teal-50:#E1F5F5;
  --orange:#E85D3B;--orange-50:#FEEDE7;
  --gold:#B8963E;--gold-50:#FBF5E3;
  --purple:#7C3AED;--purple-50:#F1ECFF;
  --green:#065F46;--green-50:#E3F5EF;
  --cyan:#0077B6;--rose:#BE185D;

  /* Rich layered background with brand accents */
  --bg:#F6F8FB;
  --bg-elev:#FFFFFF;
  --bg-soft:#EEF2F7;
  --bg-hero-from:#FFFFFF;
  --bg-hero-to:#F4F7FB;
  --bg-hero-accent:rgba(184,150,62,0.12);

  --ink:#0A1628;
  --ink-2:#334155;
  --muted:#64748B;

  --border:rgba(10,22,40,0.10);
  --border-soft:rgba(10,22,40,0.06);
  --border-hover:rgba(43,163,163,0.45);

  --shadow-sm:0 1px 3px rgba(10,22,40,0.06);
  --shadow-md:0 6px 20px rgba(10,22,40,0.10);
  --shadow-lg:0 16px 48px rgba(10,22,40,0.14);
  --shadow-colored:0 10px 30px -8px rgba(43,163,163,0.28);

  --font-head:'Playfair Display',serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  --nav-bg:rgba(255,255,255,0.92);
  --nav-border:rgba(10,22,40,0.08);

  --pill-bg:#FFFFFF;
  --pill-border:rgba(10,22,40,0.10);
  --pill-active-bg:linear-gradient(135deg,var(--navy),var(--navy-3));
  --pill-active-border:var(--navy);
  --pill-active-fg:#FFFFFF;
  --pill-count-bg:rgba(43,163,163,0.14);
  --pill-count-fg:var(--teal);

  --card-bg-from:#FFFFFF;
  --card-bg-to:#FAFCFE;
  --card-bg-hover-from:#FFFFFF;
  --card-bg-hover-to:#FFFFFF;

  --hero-title-color:var(--navy);
  --hero-title-gradient:linear-gradient(135deg,var(--navy) 0%,#1E3A5F 55%,var(--teal) 100%);
  --cyan-accent:var(--teal);
}

[data-theme="dark"]{
  --bg:#0A1628;
  --bg-elev:#122843;
  --bg-soft:#0D1B2A;
  --bg-hero-from:rgba(18,40,67,0.7);
  --bg-hero-to:rgba(10,22,40,0.4);
  --bg-hero-accent:rgba(184,150,62,0.14);

  --ink:#E0F2FE;
  --ink-2:#B0C4D8;
  --muted:#8AABBF;

  --border:rgba(43,163,163,0.18);
  --border-soft:rgba(138,171,191,0.12);
  --border-hover:rgba(43,163,163,0.45);

  --shadow-sm:0 1px 3px rgba(0,0,0,0.45);
  --shadow-md:0 8px 22px rgba(0,0,0,0.45);
  --shadow-lg:0 18px 50px rgba(0,0,0,0.6);

  --nav-bg:rgba(10,22,40,0.82);
  --nav-border:rgba(43,163,163,0.18);

  --pill-bg:transparent;
  --pill-border:rgba(138,171,191,0.12);
  --pill-active-bg:rgba(43,163,163,0.16);
  --pill-active-border:rgba(43,163,163,0.5);
  --pill-count-bg:rgba(0,200,255,0.1);
  --pill-count-fg:#00C8FF;

  --card-bg-from:rgba(18,40,67,0.55);
  --card-bg-to:rgba(10,22,40,0.55);
  --card-bg-hover-from:rgba(18,40,67,0.75);
  --card-bg-hover-to:rgba(10,22,40,0.7);

  --hero-title-color:#fff;
  --cyan-accent:#00C8FF;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}

body.hub-body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background 0.25s ease, color 0.25s ease;
}

.bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 18% 6%, rgba(43,163,163,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 28%, rgba(232,93,59,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 55% 35% at 65% 92%, rgba(184,150,62,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 5% 80%, rgba(124,58,237,0.08) 0%, transparent 70%),
    var(--bg);
}
[data-theme="dark"] .bg{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(43,163,163,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 75%, rgba(232,93,59,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(184,150,62,0.05) 0%, transparent 45%),
    var(--bg);
}
.bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(10,22,40,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,22,40,0.035) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 30%, black 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, black 10%, transparent 75%);
}
[data-theme="dark"] .bg::after{
  background-image:
    linear-gradient(rgba(43,163,163,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,163,163,0.035) 1px, transparent 1px);
}

.hub-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:blur(16px);border-bottom:1px solid var(--nav-border);}
.hub-nav-inner{max-width:1320px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hub-brand{display:flex;align-items:center;gap:12px;}
.hub-brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--teal),var(--navy));display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(43,163,163,0.4);}
.hub-brand-mark svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;}
.hub-brand-line1{font-size:11px;font-weight:700;letter-spacing:0.12em;color:var(--ink);}
.hub-brand-line2{font-size:10px;color:var(--gold);letter-spacing:0.06em;margin-top:2px;}

.hub-nav-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hub-nav-filters{display:flex;gap:6px;flex-wrap:wrap;}
.hub-filter{background:var(--pill-bg);border:1px solid var(--pill-border);color:var(--ink-2);font:600 11px/1 var(--font-body);padding:9px 16px;border-radius:100px;cursor:pointer;letter-spacing:0.03em;transition:all 0.18s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm);}
.hub-filter:hover{border-color:var(--border-hover);color:var(--ink);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.hub-filter.active{background:var(--pill-active-bg);border-color:var(--pill-active-border);color:var(--pill-active-fg,#FFFFFF);box-shadow:var(--shadow-colored);}
.hub-filter.active .count{background:rgba(255,255,255,0.18);color:#FFFFFF;}
.hub-filter .count{font-family:var(--font-mono);font-size:10px;background:var(--pill-count-bg);color:var(--pill-count-fg);padding:2px 8px;border-radius:100px;font-weight:700;transition:all 0.18s;}

.theme-toggle{background:var(--pill-bg);border:1px solid var(--pill-border);color:var(--muted);width:36px;height:36px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;}
.theme-toggle:hover{border-color:var(--border-hover);color:var(--ink);transform:translateY(-1px);}
.theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.theme-toggle .sun{display:none;}
.theme-toggle .moon{display:block;}
[data-theme="dark"] .theme-toggle .sun{display:block;}
[data-theme="dark"] .theme-toggle .moon{display:none;}

.archive-toggle{background:var(--pill-bg);border:1px dashed var(--pill-border);color:var(--muted);font:500 10px/1 var(--font-body);padding:8px 12px;border-radius:100px;cursor:pointer;letter-spacing:0.04em;transition:all 0.15s;}
.archive-toggle:hover{border-color:var(--border-hover);color:var(--ink);border-style:solid;}
.archive-toggle.on{border-style:solid;background:var(--pill-active-bg);border-color:var(--pill-active-border);color:var(--ink);}

.hub-main{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:40px 28px 80px;}

.hub-hero{
  margin-bottom:40px;
  padding:48px 44px;
  background:
    radial-gradient(ellipse 70% 80% at 85% 0%, rgba(43,163,163,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,119,182,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 100% 100%, rgba(184,150,62,0.18) 0%, transparent 65%),
    linear-gradient(135deg, #0A1628 0%, #122843 45%, #1E3A5F 100%);
  border:1px solid rgba(43,163,163,0.3);
  border-radius:24px;
  position:relative;
  overflow:hidden;
  box-shadow:0 24px 60px -16px rgba(10,22,40,0.35), 0 0 0 1px rgba(43,163,163,0.15);
  color:#fff;
}
.hub-hero::before{
  content:'';position:absolute;top:-45%;right:-8%;width:620px;height:620px;
  background:radial-gradient(circle, rgba(184,150,62,0.22) 0%, transparent 65%);
  pointer-events:none;
}
.hub-hero::after{
  content:'';position:absolute;left:-2px;right:-2px;top:0;height:4px;
  background:linear-gradient(90deg,var(--teal) 0%,var(--orange) 40%,var(--gold) 65%,var(--purple) 100%);
  opacity:1;
}

.hub-hero-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;
  background:rgba(184,150,62,0.18);
  border:1px solid rgba(184,150,62,0.5);
  border-radius:100px;
  font-size:10px;font-weight:700;
  color:#F5EAC8;
  letter-spacing:0.14em;
  margin-bottom:18px;
  position:relative;
  backdrop-filter:blur(8px);
}
.hub-hero-chip svg{stroke:#F5EAC8 !important;}

.hub-hero-title{
  font-family:var(--font-head);font-size:46px;font-weight:800;
  line-height:1.08;margin-bottom:16px;max-width:780px;
  letter-spacing:-0.02em;position:relative;
  color:#FFFFFF;
  background:linear-gradient(135deg,#FFFFFF 0%,#E0F2FE 50%,#8FE3E3 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hub-hero-sub{
  font-size:15px;
  color:#B0C4D8;
  line-height:1.75;max-width:720px;margin-bottom:28px;position:relative;
}

.hub-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:820px;position:relative;}
.hub-stat{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform 0.15s, background 0.15s;backdrop-filter:blur(10px);}
.hub-stat:hover{background:rgba(255,255,255,0.1);}
.hub-stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stat-accent,var(--teal));opacity:1;box-shadow:0 0 14px var(--stat-accent,var(--teal));}
.hub-stat:nth-child(1){--stat-accent:#00C8FF;}
.hub-stat:nth-child(2){--stat-accent:#FDA4AF;}
.hub-stat:nth-child(3){--stat-accent:#FCD34D;}
.hub-stat:nth-child(4){--stat-accent:#C4B5FD;}
.hub-stat:hover{transform:translateY(-2px);}
.hub-stat-v{display:block;font-family:var(--font-mono);font-size:28px;font-weight:700;color:var(--stat-accent,#00C8FF);line-height:1;letter-spacing:-0.02em;}
.hub-stat-l{display:block;font-size:10px;color:rgba(224,242,254,0.65);letter-spacing:0.09em;margin-top:8px;text-transform:uppercase;font-weight:600;}

.hub-search-wrap{margin-bottom:22px;}
.hub-search{width:100%;padding:14px 20px;background:var(--bg-elev);border:1px solid var(--border);border-radius:12px;color:var(--ink);font:500 14px/1 var(--font-body);outline:none;transition:border 0.15s, box-shadow 0.15s;box-shadow:var(--shadow-sm);}
.hub-search::placeholder{color:var(--muted);}
.hub-search:focus{border-color:var(--border-hover);box-shadow:var(--shadow-md);}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}

.portal-card{
  background:linear-gradient(135deg, var(--card-bg-from) 0%, var(--card-bg-to) 100%);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px 24px 20px;
  text-decoration:none;
  color:inherit;
  display:flex;flex-direction:column;gap:14px;
  transition:transform 0.2s cubic-bezier(.4,0,.2,1), border-color 0.2s, background 0.2s, box-shadow 0.25s;
  position:relative;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
/* Accent bar on the left edge */
.portal-card::after{
  content:'';position:absolute;left:0;top:16px;bottom:16px;width:3px;
  background:var(--c-strong,var(--teal));
  border-radius:0 3px 3px 0;
  opacity:0.9;
}
.portal-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%, var(--c, rgba(43,163,163,0.10)) 0%, transparent 55%);
  opacity:0.7;pointer-events:none;transition:opacity 0.25s;
}
.portal-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-hover);
  background:linear-gradient(135deg, var(--card-bg-hover-from) 0%, var(--card-bg-hover-to) 100%);
  box-shadow:0 18px 36px -10px var(--c-shadow,rgba(43,163,163,0.28)), var(--shadow-md);
}
.portal-card:hover::before{opacity:1;}
.portal-card:hover::after{width:4px;}

.portal-card .cat-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:0.1em;width:fit-content;}
.portal-card .dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,0.02);}

.portal-card .ptitle{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-0.01em;}
.portal-card .psub{font-size:12.5px;color:var(--ink-2);line-height:1.6;min-height:40px;}

.portal-card .pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-soft);}
.portal-card .pfoot .open{font-size:11px;font-weight:700;color:var(--c-strong,var(--teal));letter-spacing:0.08em;display:inline-flex;align-items:center;gap:6px;}
.portal-card .pfoot .open::after{content:'→';transition:transform 0.18s;}
.portal-card:hover .pfoot .open::after{transform:translateX(4px);}

.portal-card .featured-badge{position:absolute;top:14px;right:14px;background:linear-gradient(135deg,var(--gold),#D4AF5C);color:#fff;font-size:9px;font-weight:800;padding:5px 11px;border-radius:100px;letter-spacing:0.12em;box-shadow:var(--shadow-sm),0 0 0 3px rgba(184,150,62,0.1);}
.portal-card .tech{font-family:var(--font-mono);font-size:9px;color:var(--muted);letter-spacing:0.04em;}
.portal-card.hidden{display:none;}

.portal-card[data-cat="archive"]{opacity:0.75;}
.portal-card[data-cat="archive"]:hover{opacity:1;}

.portal-card.locked{opacity:0.55;filter:saturate(0.6);}
.portal-card.locked:hover{opacity:0.85;filter:saturate(0.85);transform:translateY(-2px);}
.portal-card.locked::after{background:#991B1B !important;opacity:0.5;}
.portal-card.locked .ptitle{color:var(--muted);}
.portal-card.locked .pfoot .open{color:#991B1B;font-weight:600;}
.portal-card.locked .pfoot .open::after{content:' ·';}
.portal-card .lock-badge{position:absolute;top:12px;right:12px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(153,27,27,0.1);border:1px solid rgba(153,27,27,0.22);border-radius:50%;font-size:12px;}

.portal-card .ext-badge{position:absolute;top:12px;right:12px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(43,163,163,0.12);border:1px solid rgba(43,163,163,0.35);border-radius:50%;font-size:12px;color:var(--teal);font-weight:700;}
.portal-card.external .pfoot .open::after{content:'';}

.portal-card[data-cat="strategy"]{--c:rgba(43,163,163,0.14);--c-strong:var(--teal);--c-shadow:rgba(43,163,163,0.28);}
.portal-card[data-cat="strategy"] .cat-chip{background:linear-gradient(135deg,var(--teal-50),#FFFFFF);color:var(--teal);border:1px solid rgba(43,163,163,0.2);}
.portal-card[data-cat="strategy"] .dot{background:var(--teal);}

.portal-card[data-cat="product"]{--c:rgba(232,93,59,0.14);--c-strong:var(--orange);--c-shadow:rgba(232,93,59,0.28);}
.portal-card[data-cat="product"] .cat-chip{background:linear-gradient(135deg,var(--orange-50),#FFFFFF);color:var(--orange);border:1px solid rgba(232,93,59,0.22);}
.portal-card[data-cat="product"] .dot{background:var(--orange);}

.portal-card[data-cat="archive"]{--c:rgba(107,114,128,0.12);--c-strong:var(--muted);--c-shadow:rgba(107,114,128,0.2);}
.portal-card[data-cat="archive"] .cat-chip{background:rgba(107,114,128,0.08);color:var(--muted);border:1px solid rgba(107,114,128,0.18);}
.portal-card[data-cat="archive"] .dot{background:var(--muted);}

.hub-footer-note{margin-top:48px;padding:22px 24px;background:var(--bg-soft);border:1px dashed var(--border);border-radius:14px;}
.hub-footer-title{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:0.12em;margin-bottom:12px;}
.hub-footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--muted);}
.hub-footer-grid .dep{padding:4px 0;}
.hub-footer-grid .dep .arrow{color:var(--teal);}

@media (max-width:720px){
  .hub-nav-inner{padding:12px 16px;}
  .hub-main{padding:24px 16px 60px;}
  .hub-hero{padding:24px 22px;}
  .hub-hero-title{font-size:28px;}
  .hub-hero-stats{grid-template-columns:repeat(2,1fr);}
}