/* ════════════════════════════════════════════════════════════════════════
   Daren Life Sciences — Specialty pharmaceutical distribution
   Brand tokens:
     – Magenta  #EC2682
     – Cyan     #5BC2E7
     – Grey     #808080
     – Navy     #0E1F38
   Typography: Moon (display), Nunito / Nunito Sans
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --magenta:#EC2682;
  --magenta-deep:#C81F70;
  --magenta-soft:rgba(236,38,130,0.10);
  --cyan:#5BC2E7;
  --cyan-deep:#2E9CC3;
  --cyan-soft:rgba(91,194,231,0.14);
  --navy:#0E1F38;
  --navy-deep:#08152A;
  --navy-mid:#1B3052;
  --grey:#808080;
  --ink:#000000;
  --char:#1A1F2A;
  --slate:#5B6470;
  --muted:#8A929E;
  --line:#D8DEE4;
  --line-soft:#EEF1F4;
  --paper:#FBFCFD;
  --surface:#F4F6F8;
  --white:#FFFFFF;
  --display:'Moon','Nunito',system-ui,sans-serif;
  --ui:'Nunito','Nunito Sans',system-ui,sans-serif;
  --body:'Nunito Sans','Nunito',system-ui,sans-serif;
  --container:1240px;
  --px:24px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  color:var(--char);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { max-width:100%; height:auto; display:block; }
a { color:var(--magenta); text-decoration:none; transition:color .2s; }
a:hover { color:var(--magenta-deep); }

*:focus-visible {
  outline:2px solid var(--magenta);
  outline-offset:3px;
}

.container { max-width:var(--container); margin:0 auto; padding:0 var(--px); }
.tight { padding:0 var(--px); max-width:1024px; margin:0 auto; }

.skip {
  position:absolute; left:-9999px; top:0;
  background:var(--navy); color:#fff;
  padding:12px 18px; font-weight:700;
  z-index:200;
}
.skip:focus { left:12px; top:12px; color:#fff; }

/* TOP BAR */
.top-bar {
  background:var(--navy);
  color:rgba(255,255,255,0.85);
  font-size:13px;
  font-weight:500;
  padding:9px 0;
}
.top-bar-inner {
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.top-bar a { color:rgba(255,255,255,0.85); }
.top-bar a:hover { color:var(--cyan); }
.top-bar-contact { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.top-bar-contact i { color:var(--magenta); margin-right:6px; }
.top-bar-social { display:flex; gap:6px; }
.top-bar-social a {
  width:28px; height:28px; display:inline-flex;
  align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  color:rgba(255,255,255,0.85);
  font-size:13px;
}
.top-bar-social a:hover { background:var(--magenta); color:#fff; }

/* HEADER */
.site-header {
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner {
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
}
.brand-logo {
  display:flex;
  flex-direction:column;
  line-height:1.1;
  text-decoration:none;
}
.brand-logo .logo-text {
  font-family:var(--display);
  font-size:26px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.5px;
}
.brand-logo .logo-text span { color:var(--magenta); }
.brand-logo .logo-sub {
  font-family:var(--ui);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-top:2px;
}
nav.primary ul {
  display:flex;
  list-style:none;
  gap:4px;
  align-items:center;
}
nav.primary > ul > li { position:relative; }
nav.primary a {
  display:block;
  padding:10px 14px;
  font-family:var(--ui);
  font-size:15px;
  font-weight:600;
  color:var(--char);
  border-radius:6px;
  transition:all .2s;
}
nav.primary a:hover,
nav.primary a.active { color:var(--magenta); }
nav.primary a.active { position:relative; }
nav.primary a.active::after {
  content:'';
  position:absolute;
  left:14px; right:14px; bottom:4px;
  height:2px;
  background:var(--magenta);
  border-radius:1px;
}
nav.primary li ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  min-width:230px;
  border-radius:8px;
  box-shadow:0 12px 40px rgba(14,31,56,0.12);
  padding:8px 0;
  border:1px solid var(--line-soft);
  z-index:50;
}
nav.primary li:hover > ul { display:block; }
nav.primary li ul a {
  padding:10px 18px;
  font-size:14px;
  font-weight:500;
}
nav.primary li ul a:hover {
  background:var(--magenta-soft);
  color:var(--magenta);
}

.hamburger {
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  width:32px;
  height:24px;
  position:relative;
  z-index:110;
}
.hamburger span {
  display:block;
  width:100%;
  height:2px;
  background:var(--navy);
  margin:5px 0;
  transition:all .3s;
  border-radius:1px;
}

/* HERO */
.hero {
  position:relative;
  min-height:620px;
  display:flex;
  align-items:center;
  background:var(--navy);
  overflow:hidden;
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, rgba(14,31,56,0.92) 0%, rgba(14,31,56,0.75) 45%, rgba(14,31,56,0.55) 100%);
  z-index:1;
}
.hero-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0.85;
}
.hero-content {
  position:relative;
  z-index:2;
  max-width:var(--container);
  margin:0 auto;
  padding:80px var(--px);
  color:#fff;
}
.hero-kicker {
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:18px;
}
.hero h1 {
  font-family:var(--display);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  font-weight:700;
  line-height:1.15;
  margin-bottom:20px;
  max-width:640px;
}
.hero p {
  font-size:18px;
  line-height:1.7;
  color:rgba(255,255,255,0.88);
  max-width:540px;
  margin-bottom:32px;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  font-family:var(--ui);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.4px;
  text-transform:uppercase;
  border-radius:6px;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .25s;
}
.btn-primary {
  background:var(--magenta);
  color:#fff;
  border-color:var(--magenta);
}
.btn-primary:hover {
  background:var(--magenta-deep);
  border-color:var(--magenta-deep);
  color:#fff;
}
.btn-outline {
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,0.5);
}
.btn-outline:hover {
  background:rgba(255,255,255,0.1);
  border-color:#fff;
  color:#fff;
}
.btn-primary-dark {
  background:var(--magenta);
  color:#fff;
  border-color:var(--magenta);
}
.btn-primary-dark:hover {
  background:var(--magenta-deep);
  color:#fff;
}

/* STATS */
.stats-bar {
  background:var(--navy-deep);
  color:#fff;
  padding:36px 0;
}
.stats-grid {
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.stat-item strong {
  display:block;
  font-family:var(--display);
  font-size:2.4rem;
  font-weight:700;
  color:var(--magenta);
  line-height:1.1;
}
.stat-item:nth-child(2) strong { color:var(--cyan); }
.stat-item:nth-child(3) strong { color:var(--magenta); }
.stat-item:nth-child(4) strong { color:var(--cyan); }
.stat-item span {
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.65);
  margin-top:6px;
}

/* SECTIONS */
.section { padding:90px 0; }
.section-header {
  text-align:center;
  max-width:720px;
  margin:0 auto 56px;
}
.section-header .kicker {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:12px;
}
.section-header h2 {
  font-family:var(--display);
  font-size:clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight:700;
  color:var(--navy);
  line-height:1.25;
  margin-bottom:16px;
}
.section-header p {
  font-size:17px;
  color:var(--slate);
}

/* THERAPY CARDS */
.therapy-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.therapy-card {
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:12px;
  overflow:hidden;
  transition:all .3s;
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
}
.therapy-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 50px rgba(14,31,56,0.1);
  border-color:transparent;
}
.therapy-card .card-top {
  height:160px;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display:flex;
  align-items:flex-end;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.therapy-card .card-top::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(14,31,56,0.75) 0%, rgba(14,31,56,0.2) 60%, transparent 100%);
  z-index:0;
}
.therapy-card .card-label {
  z-index:1;
}
.therapy-card .card-label {
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cyan);
}
.therapy-card .card-body {
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.therapy-card h3 {
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:10px;
}
.therapy-card p {
  font-size:14.5px;
  color:var(--slate);
  flex:1;
  margin-bottom:16px;
}
.therapy-card .more {
  font-size:13px;
  font-weight:700;
  color:var(--magenta);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* FEATURE SPLIT */
.feature-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:460px;
}
.feature-image {
  background:var(--navy) center/cover no-repeat;
  min-height:340px;
}
.feature-text {
  background:var(--surface);
  padding:70px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.feature-text .kicker {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:14px;
}
.feature-text h2 {
  font-family:var(--display);
  font-size:clamp(1.6rem, 3vw, 2.1rem);
  font-weight:700;
  color:var(--navy);
  line-height:1.3;
  margin-bottom:18px;
}
.feature-text p {
  font-size:16px;
  color:var(--slate);
  margin-bottom:14px;
}
.feature-text .btn { margin-top:18px; align-self:flex-start; }

/* CAPABILITIES */
.cap-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.cap-card {
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:12px;
  padding:32px 28px;
  transition:all .25s;
}
.cap-card:hover {
  border-color:var(--magenta);
  box-shadow:0 12px 36px rgba(236,38,130,0.08);
}
.cap-card .icon {
  width:48px;
  height:48px;
  background:var(--magenta-soft);
  color:var(--magenta);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  margin-bottom:20px;
}
.cap-card h3 {
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:10px;
}
.cap-card p {
  font-size:14.5px;
  color:var(--slate);
}

/* CTA */
.cta-band {
  background:var(--navy);
  color:#fff;
  padding:70px 0;
  text-align:center;
}
.cta-band h2 {
  font-family:var(--display);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  font-weight:700;
  margin-bottom:14px;
}
.cta-band p {
  font-size:17px;
  color:rgba(255,255,255,0.8);
  max-width:560px;
  margin:0 auto 28px;
}

/* PAGE HERO */
.page-hero {
  background:var(--navy);
  color:#fff;
  padding:70px 0 60px;
}
.page-hero .kicker {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:12px;
}
.page-hero h1 {
  font-family:var(--display);
  font-size:clamp(2rem, 4vw, 2.8rem);
  font-weight:700;
  line-height:1.2;
  margin-bottom:10px;
}
.breadcrumb {
  font-size:13px;
  color:rgba(255,255,255,0.6);
  margin-top:18px;
}
.breadcrumb a { color:rgba(255,255,255,0.75); }
.breadcrumb a:hover { color:#fff; }

/* CONTENT */
.content-block { padding:70px 0; }
.content-block h2 {
  font-family:var(--display);
  font-size:1.8rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:16px;
}
.content-block h3 {
  font-family:var(--display);
  font-size:1.25rem;
  font-weight:700;
  color:var(--navy);
  margin:28px 0 10px;
}
.content-block p { margin-bottom:14px; color:var(--slate); }
.content-block ul { margin:12px 0 20px 22px; color:var(--slate); }
.content-block li { margin-bottom:6px; }

.two-col {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:start;
}
.side-card {
  background:var(--surface);
  border-left:4px solid var(--magenta);
  border-radius:0 10px 10px 0;
  padding:28px;
}
.side-card .label {
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:16px;
}
.side-card dl { display:grid; gap:12px; }
.side-card dt {
  font-size:12px;
  font-weight:700;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:var(--muted);
}
.side-card dd {
  font-size:16px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:8px;
}

/* ROUTES */
.routes-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:50px;
}
.route-card {
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:10px;
  padding:24px;
  transition:all .2s;
}
.route-card:hover {
  border-color:var(--magenta);
  box-shadow:0 8px 24px rgba(236,38,130,0.08);
}
.route-card h4 {
  font-family:var(--display);
  font-size:1.1rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
}
.route-card p {
  font-size:14px;
  color:var(--slate);
  margin-bottom:14px;
}
.route-card a { font-size:13px; font-weight:700; }

/* CONTACT */
.contact-layout {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:48px;
}
.contact-details h3 {
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:20px;
}
.detail-item {
  display:flex;
  gap:14px;
  margin-bottom:22px;
}
.detail-item i {
  color:var(--magenta);
  font-size:18px;
  width:22px;
  margin-top:3px;
}
.detail-item strong {
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:2px;
}
.detail-item span, .detail-item a {
  font-size:14.5px;
  color:var(--slate);
}
.form-card {
  background:var(--surface);
  border-radius:12px;
  padding:36px;
}
.form-card h3 {
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:6px;
}
.form-card > p {
  font-size:14px;
  color:var(--slate);
  margin-bottom:24px;
}
.form-group { margin-bottom:18px; }
.form-group label {
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--navy);
  margin-bottom:6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--body);
  font-size:15px;
  color:var(--char);
  background:#fff;
  transition:border-color .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none;
  border-color:var(--magenta);
}
.form-group textarea { min-height:120px; resize:vertical; }

/* FOOTER */
.site-footer {
  background:var(--navy-deep);
  color:rgba(255,255,255,0.75);
  padding:60px 0 0;
  font-size:14.5px;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}
.footer-brand .logo-text {
  font-family:var(--display);
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin-bottom:4px;
}
.footer-brand .logo-text span { color:var(--magenta); }
.footer-brand .logo-sub {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:16px;
}
.footer-brand p {
  font-size:14px;
  line-height:1.65;
  max-width:280px;
}
.footer-col h4 {
  font-family:var(--ui);
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:10px; }
.footer-col a {
  color:rgba(255,255,255,0.7);
  transition:color .2s;
}
.footer-col a:hover { color:var(--cyan); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:rgba(255,255,255,0.5);
}

/* TABLES */
.product-table {
  width:100%;
  border-collapse:collapse;
  margin:24px 0 36px;
  font-size:14.5px;
}
.product-table th {
  background:var(--navy);
  color:#fff;
  text-align:left;
  padding:12px 16px;
  font-weight:600;
}
.product-table td {
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  color:var(--slate);
}
.product-table tr:hover td { background:var(--surface); }

/* AREA SECTIONS */
.area-section {
  padding:70px 0;
  border-bottom:1px solid var(--line-soft);
}
.area-section:last-of-type { border-bottom:none; }
.area-section .area-num {
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--magenta);
  margin-bottom:10px;
}
.area-section h2 {
  font-family:var(--display);
  font-size:1.9rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:16px;
}

/* RESPONSIVE */
@media (max-width:1024px) {
  .therapy-grid { grid-template-columns:repeat(2,1fr); }
  .cap-grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:28px; }
  .feature-split { grid-template-columns:1fr; }
  .feature-text { padding:50px 32px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .routes-grid { grid-template-columns:repeat(2,1fr); }
  .contact-layout { grid-template-columns:1fr; }
  .two-col { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .hamburger { display:block; }
  nav.primary {
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:#fff;
    border-bottom:1px solid var(--line-soft);
    padding:12px 0;
    box-shadow:0 12px 30px rgba(0,0,0,0.08);
  }
  nav.primary.open { display:block; }
  nav.primary ul {
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  nav.primary a { padding:12px 24px; }
  nav.primary li ul {
    position:static;
    box-shadow:none;
    border:none;
    padding-left:16px;
    display:none;
  }
  nav.primary li.open > ul { display:block; }
  .therapy-grid { grid-template-columns:1fr; }
  .cap-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .routes-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
  .hero { min-height:520px; }
  .top-bar-contact { gap:12px; font-size:12px; }
}

/* ═══════════════ DARK MODE ═══════════════ */
html.dark-mode {
  color-scheme: dark;
}
html.dark-mode body {
  background: #0B1220;
  color: #E8ECF1;
}
html.dark-mode .site-header {
  background: #111827;
  border-bottom-color: rgba(255,255,255,0.08);
}
html.dark-mode .brand-logo .logo-text { color: #F3F4F6; }
html.dark-mode nav.primary a { color: #D1D5DB; }
html.dark-mode nav.primary a:hover,
html.dark-mode nav.primary a.active { color: var(--magenta); }
html.dark-mode nav.primary li ul {
  background: #1F2937;
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
html.dark-mode nav.primary li ul a { color: #D1D5DB; }
html.dark-mode nav.primary li ul a:hover {
  background: var(--magenta-soft);
  color: var(--magenta);
}
html.dark-mode .hamburger span { background: #E5E7EB; }

html.dark-mode .section-header h2,
html.dark-mode .content-block h2,
html.dark-mode .content-block h3,
html.dark-mode .area-section h2,
html.dark-mode .therapy-card h3,
html.dark-mode .cap-card h3,
html.dark-mode .route-card h4,
html.dark-mode .contact-details h3,
html.dark-mode .form-card h3,
html.dark-mode .feature-text h2 {
  color: #F3F4F6;
}
html.dark-mode .section-header p,
html.dark-mode .content-block p,
html.dark-mode .content-block ul,
html.dark-mode .therapy-card p,
html.dark-mode .cap-card p,
html.dark-mode .route-card p,
html.dark-mode .feature-text p,
html.dark-mode .area-section p {
  color: #9CA3AF;
}
html.dark-mode .therapy-card,
html.dark-mode .cap-card,
html.dark-mode .route-card {
  background: #1F2937;
  border-color: rgba(255,255,255,0.08);
}
html.dark-mode .therapy-card:hover,
html.dark-mode .cap-card:hover,
html.dark-mode .route-card:hover {
  border-color: var(--magenta);
  box-shadow: 0 12px 36px rgba(0,0,0,0.35);
}
html.dark-mode .feature-text {
  background: #111827;
}
html.dark-mode .side-card {
  background: #1F2937;
}
html.dark-mode .side-card dd { color: #F3F4F6; }
html.dark-mode .form-card {
  background: #1F2937;
}
html.dark-mode .form-group label { color: #E5E7EB; }
html.dark-mode .form-group input,
html.dark-mode .form-group select,
html.dark-mode .form-group textarea {
  background: #111827;
  border-color: rgba(255,255,255,0.12);
  color: #E5E7EB;
}
html.dark-mode .product-table th { background: var(--navy); }
html.dark-mode .product-table td {
  border-bottom-color: rgba(255,255,255,0.08);
  color: #9CA3AF;
}
html.dark-mode .product-table tr:hover td { background: #1F2937; }
html.dark-mode .content-block[style*="surface"],
html.dark-mode section.content-block[style*="background:var(--surface)"] {
  background: #111827 !important;
}
html.dark-mode .detail-item strong { color: #F3F4F6; }
html.dark-mode .detail-item span,
html.dark-mode .detail-item a { color: #9CA3AF; }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--char);
  cursor: pointer;
  transition: all .2s;
  margin-left: 8px;
}
.theme-toggle:hover {
  background: var(--magenta-soft);
  color: var(--magenta);
}
html.dark-mode .theme-toggle {
  color: #D1D5DB;
}
html.dark-mode .theme-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: var(--cyan);
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
html.dark-mode .theme-toggle .icon-sun { display: inline; }
html.dark-mode .theme-toggle .icon-moon { display: none; }

@media (max-width: 768px) {
  html.dark-mode nav.primary {
    background: #111827;
    border-bottom-color: rgba(255,255,255,0.08);
  }
}

html.dark-mode {
  --surface: #111827;
  --paper: #0B1220;
  --line: rgba(255,255,255,0.12);
  --line-soft: rgba(255,255,255,0.08);
  --char: #E8ECF1;
  --slate: #9CA3AF;
  --white: #1F2937;
}