:root{
  --bg-left:#20235c;
  --bg-mid:#031126;
  --bg-right:#0f4f2f;
  --panel:rgba(11,23,48,0.82);
  --panel-2:rgba(8,18,37,0.72);
  --line:rgba(110,150,210,0.22);
  --text:#eef4ff;
  --muted:#b8c7e6;
  --button:#13345f;
  --button-primary-start:#78a7ff;
  --button-primary-end:#6cd0b0;
  --footer-bg:#031126;
}

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  color:var(--text);
  background:linear-gradient(90deg,var(--bg-left) 0%, var(--bg-mid) 52%, var(--bg-right) 100%);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

a{
  color:#8bc2ff;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

.site-header{
  padding:32px 32px 0 32px;
}

.site-header-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0 18px 0;
  border-bottom:1px solid var(--line);
}

.brand-wrap{
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--text);
  text-decoration:none;
}

.brand-logo{
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:50%;
  background:#ffffffee;
}

.brand-title{
  font-weight:800;
  font-size:1.1rem;
  line-height:1.1;
}

.brand-subtitle{
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.2;
}

.site-nav{
  display:flex;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}

.site-nav a{
  color:var(--text);
  font-weight:600;
}

.theme-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.theme-switch input{
  display:none;
}

.theme-slider{
  width:56px;
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.12);
  position:relative;
  display:inline-block;
  cursor:pointer;
}

.theme-slider::after{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  background:#dfe6f7;
  position:absolute;
  top:3px;
  left:4px;
  transition:all .2s ease;
}

.theme-switch input:checked + .theme-slider::after{
  left:28px;
}

.portal-shell{
  max-width:1100px;
  margin:0 auto;
  padding:18px 32px 80px 32px;
}

.portal-wrap{
  min-height:520px;
}

.portal-page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.portal-page-title{
  margin:0 0 8px 0;
  font-size:2rem;
  font-weight:800;
}

.portal-client-name{
  margin:0 0 8px 0;
  color:var(--text);
  font-weight:700;
}

.portal-page-subtitle{
  margin:0;
  color:var(--muted);
  font-size:1.05rem;
}

.portal-toolbar{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.portal-toolbar-buttons{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.portal-toolbar-meta{
  text-align:right;
  font-size:14px;
  color:var(--muted);
}

.portal-btn,
button.portal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
}

.portal-btn.primary{
  background:linear-gradient(90deg,var(--button-primary-start),var(--button-primary-end));
  color:#081528;
  border:none;
}

.portal-btn:hover{
  text-decoration:none;
  filter:brightness(1.05);
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-bottom:28px;
}

.summary-card,
.table-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,0.20);
}

.summary-card h3,
.section-title{
  margin-top:0;
}

.summary-value{
  font-size:2.2rem;
  font-weight:800;
  margin:6px 0;
}

.summary-sub,
.muted,
.info-stack p{
  color:var(--muted);
}

.quick-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.site-footer{
  background:var(--footer-bg);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:14px 20px;
}

.site-footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  color:#e7eefc;
  font-size:0.92rem;
  font-weight:600;
}

.footer-dot{
  opacity:0.65;
}

@media (max-width: 900px){
  .site-header-inner,
  .portal-page-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .portal-toolbar,
  .portal-toolbar-meta{
    align-items:flex-start;
    text-align:left;
  }

  .summary-grid{
    grid-template-columns:1fr;
  }
}

body.light-theme{
  --bg-left:#eef3ff;
  --bg-mid:#f6f9ff;
  --bg-right:#e9f7ef;
  --panel:rgba(255,255,255,0.92);
  --panel-2:rgba(248,250,255,0.96);
  --line:rgba(40,70,120,0.14);
  --text:#10233f;
  --muted:#50627f;
  --button:#dfe8ff;
  --button-primary-start:#78a7ff;
  --button-primary-end:#6cd0b0;
  --footer-bg:#edf3ff;
}

body.light-theme .site-nav a,
body.light-theme .brand-wrap,
body.light-theme .brand-title{
  color:var(--text);
}

body.light-theme .portal-btn{
  background:rgba(255,255,255,0.75);
  color:var(--text);
}

body.light-theme .portal-btn.primary{
  color:#081528;
}

body.light-theme .theme-slider{
  background:rgba(16,35,63,0.14);
  border:1px solid rgba(16,35,63,0.12);
}

/* ===== template-level theme binding ===== */

:root{
  --header-bg: transparent;
  --header-line: rgba(110,150,210,0.22);
  --footer-text: #e7eefc;
}

body.light-theme{
  --header-bg: transparent;
  --header-line: rgba(40,70,120,0.14);
  --footer-text: #10233f;
}

/* header must follow page theme, not force dark mode */
.site-header{
  background: var(--header-bg) !important;
}

.site-header-inner{
  background: transparent !important;
  border-bottom: 1px solid var(--header-line) !important;
}

/* footer follows theme too */
.site-footer{
  color: var(--footer-text);
}

.site-footer-inner{
  color: var(--footer-text);
}

/* light mode readability */
body.light-theme .brand-subtitle{
  color: var(--muted);
}

body.light-theme .site-nav a{
  color: var(--text);
}

body.light-theme .portal-toolbar-meta{
  color: var(--muted);
}