:root {
  --ink: #111827;
  --muted: #64748b;
  --line: #e5e7eb;
  --panel: #ffffff;
  --soft: #f5f7fb;
  --sidebar: #0d1321;
  --blue: #2563eb;
  --green: #059669;
  --rose: #e11d48;
  --body-bg: #ffffff;
  --surface-bg: #f6f8fb;
  --panel-soft: #f8fafc;
  --nav-bg: rgba(255,255,255,.9);
  --topbar-bg: #ffffff;
  --shadow: rgba(15, 23, 42, .06);
  --shadow-strong: rgba(15, 23, 42, .12);
  --input-bg: #ffffff;
  --input-text: #111827;
}

[data-theme="dark"] {
  --ink: #e5edf7;
  --muted: #9aa8bd;
  --line: #243247;
  --panel: #111827;
  --soft: #0b1220;
  --sidebar: #060a12;
  --blue: #60a5fa;
  --green: #34d399;
  --rose: #fb7185;
  --body-bg: #080d18;
  --surface-bg: #0b1220;
  --panel-soft: #162033;
  --nav-bg: rgba(8,13,24,.92);
  --topbar-bg: #0d1424;
  --shadow: rgba(0, 0, 0, .28);
  --shadow-strong: rgba(0, 0, 0, .4);
  --input-bg: #0b1220;
  --input-text: #e5edf7;
}

* { letter-spacing: 0; }
body { margin: 0; color: var(--ink); background: var(--body-bg); font-family: "Inter", "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif; }
a { text-decoration: none; }
[id] { scroll-margin-top: 110px; }
.eyebrow { color: var(--blue); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.public-nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.public-footer { padding: 28px 0; border-top: 1px solid var(--line); color: #334155; background: var(--panel); font-weight: 650; }
.public-footer span { color: #334155; }
.footer-disclaimer { max-width: 1040px; color: #475569; font-size: .86rem; line-height: 1.65; margin: 14px 0 0; }
.personal-disclaimer { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 18px 20px; color: #334155; }
.personal-disclaimer strong { display: block; color: #0f172a; margin-bottom: 8px; }
.personal-disclaimer p { margin: 0; line-height: 1.7; }
.navbar-brand, .navbar-brand:hover, .nav-link { color: var(--ink); }
.public-nav .nav-link { color: #1f2937 !important; font-weight: 750; }
.public-nav .nav-link:hover, .public-nav .nav-link:focus { color: #0f172a !important; }
.public-nav .nav-link.active { color: var(--blue) !important; }
.public-nav .dropdown-toggle::after { margin-left: .45rem; vertical-align: .12em; border-top-width: .32em; }
.public-dropdown { min-width: 318px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 24px 70px var(--shadow-strong); }
.public-dropdown-sm { min-width: 230px; }
.public-dropdown .dropdown-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; border-radius: 8px; padding: 11px; color: var(--ink); white-space: normal; }
.public-dropdown .dropdown-item:hover, .public-dropdown .dropdown-item:focus, .public-dropdown .dropdown-item.active { background: var(--panel-soft); color: var(--ink); }
.public-dropdown .dropdown-item.active { box-shadow: inset 3px 0 0 var(--blue); }
.public-dropdown .dropdown-item i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.public-dropdown .dropdown-item.active i { color: #fff; background: linear-gradient(135deg, #2563eb, #10b981); }
.public-dropdown .dropdown-item strong { display: block; font-weight: 900; line-height: 1.2; }
.public-dropdown .dropdown-item small { display: block; margin-top: 3px; color: var(--muted); font-weight: 700; line-height: 1.35; }
.public-dropdown .dropdown-item.compact { grid-template-columns: 30px 1fr; padding: 9px 10px; font-weight: 850; }
.public-dropdown .dropdown-item.compact i { width: 30px; height: 30px; font-size: .88rem; }
.public-dropdown .dropdown-divider { border-color: var(--line); margin: 8px 4px; }

.hero-section { position: relative; overflow: hidden; padding: 94px 0 38px; background: linear-gradient(180deg, #f8fbff 0%, var(--body-bg) 72%); }
.hero-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px), linear-gradient(180deg, rgba(37,99,235,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, #000 0%, transparent 62%); pointer-events: none; }
.hero-section .container { position: relative; z-index: 1; }
.hero-premium-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(360px, .72fr); gap: 54px; align-items: center; }
.hero-copy-panel { max-width: 880px; }
.hero-kicker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.hero-kicker span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); color: #334155; padding: 8px 12px; font-size: .78rem; font-weight: 850; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.hero-section h1 { max-width: 900px; font-size: clamp(2.75rem, 5.6vw, 5.8rem); line-height: .96; font-weight: 900; letter-spacing: 0; }
.hero-copy { max-width: 780px; color: #475569; font-size: 1.16rem; line-height: 1.76; margin: 24px 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero { padding: 84px 0 56px; background: linear-gradient(180deg, var(--soft) 0%, var(--body-bg) 78%); border-bottom: 1px solid var(--line); }
.page-hero h1 { max-width: 960px; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 1; font-weight: 850; margin: 0; }
.page-hero p:not(.eyebrow) { max-width: 780px; color: #475569; font-size: 1.12rem; line-height: 1.78; margin-top: 22px; }
.legal-hero { background: linear-gradient(180deg, #f8fbff 0%, #fff 78%); }
.legal-layout { display: grid; grid-template-columns: minmax(240px, .34fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.legal-summary { position: sticky; top: 112px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 24px; }
.legal-summary span { display: block; color: var(--blue); font-size: .78rem; font-weight: 950; text-transform: uppercase; margin-bottom: 8px; }
.legal-summary strong { display: block; font-size: 1.2rem; margin-bottom: 14px; }
.legal-summary p { color: var(--muted); line-height: 1.68; margin: 0; }
.legal-content { display: grid; gap: 14px; }
.legal-content article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 26px; }
.legal-content h2 { font-size: 1.22rem; font-weight: 900; margin-bottom: 12px; }
.legal-content p { color: #334155; line-height: 1.82; margin: 0; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; color: #334155; font-size: .9rem; font-weight: 800; }
.hero-trust-row span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.72); padding: 9px 12px; }
.hero-trust-row i { color: var(--blue); }
.homepage-trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.homepage-trust-strip span { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); padding: 13px 14px; color: #334155; font-weight: 850; box-shadow: 0 12px 28px rgba(15,23,42,.05); }
.homepage-trust-strip i { color: var(--green); }
.hero-product { border: 1px solid rgba(148,163,184,.32); background: rgba(255,255,255,.82); border-radius: 8px; padding: 14px; box-shadow: 0 30px 90px rgba(15, 23, 42, .16); backdrop-filter: blur(18px); }
.hero-product-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 8px 14px; color: #334155; font-size: .84rem; }
.hero-product-toolbar strong { font-weight: 900; }
.hero-product-top { min-height: 220px; border-radius: 8px; background: radial-gradient(circle at 20% 20%, rgba(96,165,250,.38), transparent 30%), linear-gradient(135deg, #0f172a, #1d4ed8 56%, #10b981); margin-bottom: 14px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.hero-product-top::after { content: ""; position: absolute; inset: auto 18px 18px; height: 1px; background: rgba(255,255,255,.35); }
.hero-window-dots { display: flex; gap: 7px; }
.hero-window-dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.55); }
.hero-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; color: #fff; }
.hero-product-grid strong, .hero-product-grid span { border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 10px; background: rgba(255,255,255,.08); }
.hero-product-grid strong { font-size: .76rem; opacity: .82; }
.hero-product-grid span { font-size: 1.1rem; font-weight: 900; }
.hero-product-body { display: grid; gap: 10px; }
.hero-mini-chart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-items: end; height: 82px; margin-top: 24px; }
.hero-mini-chart span { display: block; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.18); }
.hero-mini-chart span:nth-child(1) { height: 34%; }
.hero-mini-chart span:nth-child(2) { height: 58%; }
.hero-mini-chart span:nth-child(3) { height: 46%; }
.hero-mini-chart span:nth-child(4) { height: 74%; }
.hero-mini-chart span:nth-child(5) { height: 92%; background: rgba(255,255,255,.46); }
.metric-row { display: flex; justify-content: space-between; padding: 14px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
.hero-product-body .metric-row { margin: 0; background: var(--panel-soft); }
.hero-product-body .metric-row strong { text-align: right; }
.kanban-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kanban-preview span, .pipeline span, .pipeline a { background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-weight: 700; text-align: center; color: var(--ink); }
.pipeline a:hover { background: #e0f2fe; color: #075985; }
.dashboard-preview { position: relative; overflow: hidden; }
.dashboard-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(37, 99, 235, .18), transparent 34%), radial-gradient(circle at 86% 34%, rgba(16, 185, 129, .16), transparent 30%); pointer-events: none; }
.dashboard-preview > * { position: relative; z-index: 1; }
.dashboard-preview-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 164px; border-radius: 8px; background: linear-gradient(135deg, #0f172a 0%, #1d4ed8 55%, #10b981 100%); padding: 18px; align-items: end; box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.dashboard-preview-top div { border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.1); padding: 14px; color: #fff; backdrop-filter: blur(8px); }
.dashboard-preview-top span, .dashboard-preview-top small { display: block; color: rgba(255,255,255,.74); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.dashboard-preview-top strong { display: block; margin: 8px 0 2px; font-size: clamp(1.22rem, 2.5vw, 1.7rem); line-height: 1; font-weight: 950; }
.dashboard-preview-main { display: grid; grid-template-columns: 1.08fr .92fr; gap: 12px; margin-top: 12px; }
.dashboard-preview-panel, .dashboard-module-list span, .dashboard-preview-footer span { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.dashboard-preview-panel { min-height: 184px; padding: 14px; }
.dashboard-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-size: .88rem; font-weight: 900; }
.dashboard-preview-head strong { color: var(--green); font-size: .76rem; text-transform: uppercase; }
.dashboard-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; align-items: end; height: 118px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.dashboard-bars span { display: block; min-height: 22px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #60a5fa, #2563eb); box-shadow: 0 12px 22px rgba(37, 99, 235, .16); }
.dashboard-bars span:nth-child(4), .dashboard-bars span:nth-child(5) { background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 12px 22px rgba(5, 150, 105, .14); }
.dashboard-module-list { display: grid; gap: 10px; }
.dashboard-module-list span { display: flex; align-items: center; gap: 10px; padding: 13px; color: var(--ink); font-weight: 850; }
.dashboard-module-list i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #1d4ed8; }
.dashboard-preview-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.dashboard-preview-footer span { padding: 12px 10px; color: #334155; font-size: .78rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 54px; }
.stats-strip div { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 16px 42px rgba(15,23,42,.07); backdrop-filter: blur(12px); }
.stats-strip i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #1d4ed8; margin-bottom: 12px; }
.stats-strip strong { display: block; font-size: 2rem; }
.stats-strip span { color: var(--muted); }
.premium-intro-panel { border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(135deg, #ffffff, #f8fbff); box-shadow: 0 18px 48px rgba(15,23,42,.08); padding: 34px; display: grid; grid-template-columns: minmax(280px, .5fr) 1fr; gap: 32px; align-items: start; }
.premium-intro-panel h2 { font-size: clamp(1.75rem, 3vw, 2.8rem); line-height: 1.08; font-weight: 900; margin: 0; }
.premium-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.premium-intro-grid article { min-height: 214px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 20px; box-shadow: 0 12px 28px rgba(15,23,42,.05); }
.premium-intro-grid span { color: var(--blue); font-size: .78rem; font-weight: 950; }
.premium-intro-grid strong { display: block; margin: 10px 0; font-size: 1rem; font-weight: 900; }
.premium-intro-grid p { color: var(--muted); line-height: 1.68; margin: 0; }
.premium-capability-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.premium-capability-strip a { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; border: 1px solid rgba(148, 163, 184, .32); border-radius: 8px; background: rgba(255,255,255,.82); padding: 16px; color: var(--ink); box-shadow: 0 14px 34px rgba(15,23,42,.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.premium-capability-strip a:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.32); box-shadow: 0 22px 52px rgba(15,23,42,.1); }
.premium-capability-strip i { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #1d4ed8; }
.premium-capability-strip strong { font-weight: 950; }
.premium-capability-strip span { color: var(--muted); font-size: .84rem; font-weight: 700; }
.project-kit-home-panel { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr); gap: 28px; align-items: center; }
.project-kit-home-panel h2 { max-width: 760px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; font-weight: 950; }
.project-kit-home-panel p:not(.eyebrow) { max-width: 720px; color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin: 18px 0 0; }
.project-kit-home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.project-kit-home-grid { display: grid; gap: 12px; }
.project-kit-home-grid a { display: grid; gap: 7px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); box-shadow: 0 16px 40px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.project-kit-home-grid a:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: 0 24px 60px var(--shadow-strong); }
.project-kit-home-grid span { color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.project-kit-home-grid strong { font-size: 1.15rem; font-weight: 950; }
.project-kit-home-grid small { color: var(--muted); font-weight: 850; }
.project-kit-admin-preview { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 10px; }
.project-kit-admin-preview img { width: 132px; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); }
.project-kit-admin-preview a { color: var(--blue); font-weight: 900; }
.about-split { display: grid; grid-template-columns: minmax(260px, .48fr) 1fr; gap: 34px; align-items: start; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 34px; }
.about-split h2 { font-size: clamp(1.7rem, 3vw, 2.7rem); font-weight: 850; margin: 0; }
.about-split p:not(.eyebrow) { color: #334155; font-size: 1.04rem; line-height: 1.8; margin-bottom: 14px; }
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.skills-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 24px; box-shadow: 0 14px 34px var(--shadow); min-height: 210px; }
.skills-grid i { color: var(--blue); font-size: 1.35rem; margin-bottom: 16px; }
.skills-grid h3 { font-size: 1.08rem; font-weight: 850; }
.skills-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
.technology-expertise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.technology-expertise-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 24px; box-shadow: 0 14px 34px var(--shadow); min-height: 230px; transition: transform .18s ease, box-shadow .18s ease; }
.technology-expertise-grid article:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(15, 23, 42, .12); }
.technology-expertise-grid i { color: var(--blue); font-size: 1.65rem; margin-bottom: 18px; }
.technology-expertise-grid h3 { font-size: 1.08rem; font-weight: 850; }
.technology-expertise-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
.experience-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.experience-timeline article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 22px; box-shadow: 0 14px 34px var(--shadow); }
.experience-timeline span { color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.experience-timeline h3 { font-size: 1.05rem; font-weight: 850; margin: 10px 0; }
.experience-timeline p { color: var(--muted); line-height: 1.65; margin: 0; }
.responsibility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.responsibility-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 24px; box-shadow: 0 14px 34px var(--shadow); min-height: 220px; }
.responsibility-grid i { color: var(--green); font-size: 1.35rem; margin-bottom: 16px; }
.responsibility-grid h3 { font-size: 1.08rem; font-weight: 850; }
.responsibility-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
.career-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 34px; display: grid; grid-template-columns: minmax(260px, .45fr) 1fr; gap: 28px; align-items: start; }
.career-panel h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 850; margin-bottom: 14px; }
.career-panel p:not(.eyebrow), .career-steps p { color: var(--muted); line-height: 1.72; margin: 0; }
.career-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.career-steps div { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 20px; }
.career-steps span { color: var(--blue); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.career-steps strong { display: block; margin: 8px 0; font-size: 1.1rem; }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 26px; box-shadow: 0 14px 34px var(--shadow); min-height: 230px; }
.testimonial-grid i { color: var(--blue); font-size: 1.45rem; margin-bottom: 18px; }
.testimonial-grid h3 { font-size: 1.12rem; font-weight: 850; }
.testimonial-grid p { color: var(--muted); line-height: 1.72; }
.testimonial-grid span { color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 10px 24px var(--shadow); padding: 18px 20px; }
.faq-list summary { cursor: pointer; color: var(--ink); font-weight: 850; }
.faq-list p { color: var(--muted); line-height: 1.75; margin: 14px 0 0; }
.logo-cloud { border-block: 1px solid var(--line); background: var(--panel); }
.logo-cloud .container { min-height: 76px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.logo-cloud span { color: #64748b; font-size: .86rem; font-weight: 850; text-transform: uppercase; }
.section-band { padding: 72px 0; background: var(--soft); }
.section-heading { max-width: 780px; margin-bottom: 28px; }
.section-heading h2 { font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 820; }
.premium-heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 22px; }
.premium-heading-row h2 { margin: 0; }
.feature-card, .price-card, .portfolio-grid article, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 34px var(--shadow); }
.premium-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.premium-service-card { min-height: 258px; padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.premium-service-card:hover { transform: translateY(-5px); border-color: rgba(37,99,235,.35); box-shadow: 0 26px 62px rgba(15,23,42,.13); }
.premium-service-card i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-size: 1.25rem; margin-bottom: 18px; }
.premium-service-card h3 { font-size: 1.16rem; font-weight: 900; margin-bottom: 12px; }
.premium-service-card p { color: var(--muted); line-height: 1.72; margin-bottom: 18px; }
.premium-service-card span { color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.feature-card { min-height: 220px; padding: 24px; transition: transform .18s ease, box-shadow .18s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(15, 23, 42, .12); }
.feature-card i { color: var(--blue); font-size: 1.5rem; margin-bottom: 18px; }
.feature-card h3, .portfolio-grid h3 { font-size: 1.1rem; font-weight: 800; }
.feature-card p, .portfolio-grid p, .price-card p { color: var(--muted); }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.process-grid article, .proof-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.process-grid article { padding: 26px; }
.process-grid span { color: var(--blue); font-weight: 900; font-size: .86rem; }
.process-grid h3 { font-size: 1.15rem; font-weight: 850; margin: 12px 0 10px; }
.process-grid p { color: var(--muted); margin: 0; line-height: 1.7; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.portfolio-grid article, .price-card { padding: 26px; }
.portfolio-grid article { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.portfolio-grid article:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.28); box-shadow: 0 24px 60px rgba(15,23,42,.12); }
.portfolio-grid span { color: var(--green); font-weight: 800; font-size: .8rem; }
.portfolio-grid small { display: block; color: #334155; font-weight: 800; margin-top: 12px; }
.portfolio-premium-card { position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; }
.portfolio-premium-card::before { content: ""; height: 3px; margin: -26px -26px 22px; background: linear-gradient(90deg, #2563eb, #10b981); opacity: .9; }
.portfolio-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.portfolio-card-meta strong { color: #64748b; font-size: .76rem; text-transform: uppercase; }
.portfolio-premium-card h3 { font-size: 1.22rem; line-height: 1.28; margin-bottom: 10px; }
.portfolio-tech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.portfolio-tech-chips small { margin: 0; border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: var(--panel-soft); color: #334155; font-size: .76rem; }
.portfolio-outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0 4px; }
.portfolio-outcome-grid div { border: 1px solid rgba(148, 163, 184, .32); border-radius: 8px; background: var(--panel-soft); padding: 12px; }
.portfolio-outcome-grid span { display: block; color: var(--blue); font-size: .68rem; font-weight: 950; text-transform: uppercase; margin-bottom: 6px; }
.portfolio-outcome-grid strong { display: block; color: var(--ink); font-size: .84rem; line-height: 1.42; font-weight: 850; }
.portfolio-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; }
.portfolio-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: #f8fafc; }
.portfolio-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, #eef6ff, #f8fbff); }
.portfolio-thumb-wrap .portfolio-thumb { height: 100%; border: 0; border-radius: 0; margin: 0; display: block; }
.portfolio-thumb-fallback { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 8px; padding: 18px; text-align: center; background: radial-gradient(circle at top left, rgba(37, 99, 235, .22), transparent 34%), linear-gradient(135deg, #0f172a, #1d4ed8 58%, #10b981); color: #fff; }
.portfolio-thumb-fallback span { color: #fff; font-size: clamp(1.7rem, 5vw, 2.35rem); line-height: 1; font-weight: 950; letter-spacing: 0; }
.portfolio-thumb-fallback small { display: block; color: rgba(255,255,255,.78); margin: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.portfolio-thumb-wrap.is-missing .portfolio-thumb-fallback { display: grid; }
.portfolio-hero { padding: 72px 0 42px; background: linear-gradient(180deg, #f8fbff 0%, #fff 75%); }
.portfolio-hero h1 { max-width: 920px; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1; font-weight: 850; }
.portfolio-hero p:not(.eyebrow) { max-width: 780px; color: #475569; font-size: 1.1rem; line-height: 1.75; margin-top: 18px; }
.portfolio-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 820px; margin-top: 32px; }
.portfolio-stat-row div, .case-facts div { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, .05); }
.portfolio-stat-row strong { display: block; font-size: 1.8rem; font-weight: 900; }
.portfolio-stat-row span, .case-facts span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.portfolio-filter-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.portfolio-filter-strip span, .tech-cloud span { border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 8px 12px; color: #334155; font-weight: 800; font-size: .86rem; }
.case-study-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 18px; }
.case-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; box-shadow: 0 14px 34px rgba(15, 23, 42, .06); transition: transform .18s ease, box-shadow .18s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(15, 23, 42, .12); }
.case-card a { color: var(--ink); display: block; height: 100%; }
.case-card .portfolio-thumb-wrap { border: 0; border-radius: 0; margin: 0; }
.case-card-body { padding: 22px; }
.case-card-body span { color: var(--green); font-weight: 850; font-size: .78rem; text-transform: uppercase; }
.case-card-body h2 { font-size: 1.25rem; font-weight: 850; margin: 10px 0; }
.case-card-body p { color: var(--muted); }
.case-card-body small { color: #334155; font-weight: 800; }
.case-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--blue); font-size: .9rem; }
.case-card-fallback { aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(135deg, #101827, #1d4ed8 55%, #10b981); color: #fff; }
.case-card-fallback span { font-size: 2rem; font-weight: 900; }
.case-detail-hero { padding: 72px 0 42px; background: #fff; }
.case-detail-hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr); gap: 34px; align-items: center; }
.case-detail-copy h1 { font-size: clamp(2.25rem, 5vw, 4.8rem); line-height: 1; font-weight: 850; }
.case-detail-copy p:not(.eyebrow) { max-width: 760px; color: #475569; font-size: 1.1rem; line-height: 1.75; margin: 18px 0 26px; }
.case-detail-media img, .case-detail-media .case-card-fallback { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(15, 23, 42, .12); }
.case-detail-media .portfolio-thumb-wrap { width: 100%; aspect-ratio: 16 / 10; margin: 0; box-shadow: 0 24px 70px rgba(15, 23, 42, .12); }
.case-detail-media .portfolio-thumb-wrap img { height: 100%; box-shadow: none; }
.case-detail-grid { display: grid; grid-template-columns: minmax(240px, .35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.case-facts { display: grid; gap: 12px; position: sticky; top: 112px; }
.case-facts strong { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.case-story { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 14px 34px rgba(15, 23, 42, .06); }
.case-story h2 { font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 850; }
.case-story p { color: #334155; line-height: 1.82; }
.case-section-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.case-section-row div { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 18px; }
.case-section-row span { color: var(--blue); font-size: .78rem; font-weight: 900; }
.case-section-row h3 { font-size: 1rem; font-weight: 850; }
.case-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-feature-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 24px; min-height: 220px; }
.case-feature-grid i { color: var(--blue); font-size: 1.45rem; margin-bottom: 18px; }
.case-feature-grid h3 { font-size: 1.08rem; font-weight: 850; }
.case-feature-grid p { color: var(--muted); line-height: 1.7; margin: 0; }
.case-delivery-panel { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 34px; display: grid; grid-template-columns: minmax(260px, .48fr) 1fr; gap: 28px; align-items: start; }
.case-delivery-panel h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 850; margin-bottom: 14px; }
.case-delivery-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.75; margin: 0; }
.case-delivery-list { display: grid; gap: 12px; }
.case-delivery-list div { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 16px; }
.case-delivery-list strong { display: block; margin-bottom: 6px; }
.case-delivery-list span { color: var(--muted); line-height: 1.62; }
.tech-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tech-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.tech-strip span { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: #334155; padding: 12px 14px; font-weight: 850; box-shadow: 0 10px 24px var(--shadow); }
.proof-panel { padding: 32px; display: grid; grid-template-columns: minmax(260px, .55fr) 1fr; gap: 28px; align-items: start; }
.premium-proof-panel { position: relative; overflow: hidden; background: linear-gradient(135deg, #ffffff, #f8fbff); }
.premium-proof-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(37,99,235,.06) 45%, transparent 72%); pointer-events: none; }
.premium-proof-panel > * { position: relative; z-index: 1; }
.proof-panel h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 850; margin: 0; }
.proof-intro { color: var(--muted); line-height: 1.72; margin: 16px 0 0; }
.proof-grid { display: grid; gap: 12px; }
.proof-grid div { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 16px; }
.proof-grid i { color: var(--blue); margin-bottom: 10px; font-size: 1.15rem; }
.proof-grid strong { display: block; font-weight: 850; margin-bottom: 6px; }
.proof-grid span { color: var(--muted); line-height: 1.6; }
.blog-detail { max-width: 920px; margin: 0 auto; }
.blog-detail h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 850; line-height: 1; }
.blog-hero-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin: 24px 0; }
.blog-content { font-size: 1.08rem; line-height: 1.85; color: #334155; }
.blog-content p { margin-bottom: 18px; }
.blog-detail-hero { background: radial-gradient(circle at 85% 10%, rgba(37,99,235,.12), transparent 34%), linear-gradient(180deg, #f8fbff, #fff); border-bottom: 1px solid var(--line); padding: 42px 0 64px; }
.blog-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: end; }
.blog-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.blog-detail-meta span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.86); color: #334155; padding: 9px 13px; font-size: .9rem; font-weight: 850; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.blog-detail-meta i { color: var(--blue); }
.blog-author-card { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.9); padding: 24px; box-shadow: 0 18px 48px rgba(15,23,42,.08); }
.blog-author-card span { display: block; color: var(--green); font-size: .76rem; font-weight: 950; text-transform: uppercase; margin-bottom: 10px; }
.blog-author-card strong { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 950; margin-bottom: 10px; }
.blog-author-card p { color: var(--muted); line-height: 1.68; margin-bottom: 18px; }
.blog-author-card a { color: var(--blue); font-weight: 900; text-decoration: none; }
.blog-reader-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 28px; box-shadow: 0 18px 44px var(--shadow); }
.blog-tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.blog-tag-row a { border: 1px solid rgba(37,99,235,.18); border-radius: 999px; background: #eff6ff; color: #1d4ed8; padding: 8px 12px; font-size: .82rem; font-weight: 900; text-decoration: none; }
.blog-tag-row a:hover { background: #dbeafe; color: #1e40af; }
.homepage-article-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 20px; }
.homepage-article-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 42px var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.homepage-article-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.28); box-shadow: 0 24px 60px rgba(15,23,42,.12); }
.homepage-article-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.homepage-article-body { padding: 24px; }
.homepage-article-body span { color: var(--green); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.homepage-article-body h3 { margin: 10px 0; font-size: 1.16rem; font-weight: 950; line-height: 1.22; }
.homepage-article-featured .homepage-article-body h3 { font-size: clamp(1.45rem, 2.4vw, 2.1rem); }
.homepage-article-body p { color: var(--muted); line-height: 1.72; margin-bottom: 18px; }
.homepage-article-body a { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 950; text-decoration: none; }
.homepage-article-body a:hover { color: #1d4ed8; }
.homepage-article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.homepage-article-meta small { border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: #334155; padding: 6px 10px; font-weight: 850; }
.premium-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.price-card { min-height: 260px; }
.price-card span { color: var(--blue); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.price-card h3 { font-size: 1.55rem; font-weight: 900; margin: 12px 0; }
.price-card strong { display: block; margin-top: 22px; font-size: .9rem; color: #334155; }
.price-card.featured { background: radial-gradient(circle at top right, rgba(37,99,235,.32), transparent 36%), #101827; color: #fff; transform: translateY(-10px); }
.price-card.featured span { color: #93c5fd; }
.price-card.featured strong { color: #e0f2fe; }
.price-card.featured p { color: #cbd5e1; }
.cta-panel { background: linear-gradient(135deg, #111827, #1d4ed8); color: #fff; border-radius: 8px; padding: 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta-panel .eyebrow { color: #93c5fd; }
.contact-panel { position: relative; overflow: hidden; background: radial-gradient(circle at 80% 0%, rgba(16,185,129,.28), transparent 34%), linear-gradient(135deg, #0f172a, #1d4ed8); color: #fff; border-radius: 8px; padding: 42px; display: grid; grid-template-columns: minmax(280px, .52fr) 1fr; gap: 34px; align-items: start; box-shadow: 0 24px 70px rgba(15, 23, 42, .18); }
.contact-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 42px 42px; opacity: .36; pointer-events: none; }
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel h2 { font-size: clamp(1.85rem, 3vw, 3rem); font-weight: 850; margin-bottom: 14px; }
.contact-panel p:not(.eyebrow) { color: #dbeafe; font-size: 1.04rem; line-height: 1.75; }
.contact-proof { display: grid; gap: 10px; margin-top: 24px; }
.contact-proof span { display: flex; align-items: center; gap: 10px; color: #e0f2fe; font-weight: 800; }
.contact-proof i { color: #34d399; }
.contact-mini-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 28px; }
.contact-mini-facts div { border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); padding: 14px; }
.contact-mini-facts strong { display: block; color: #93c5fd; font-size: .8rem; margin-bottom: 6px; }
.contact-mini-facts span { color: #eff6ff; font-size: .84rem; font-weight: 800; line-height: 1.4; }
.contact-form { border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.08); padding: 24px; backdrop-filter: blur(10px); }
.contact-form .form-label { color: #eff6ff; font-weight: 800; }
.contact-form .form-control, .contact-form .form-select { border-color: rgba(255,255,255,.18); background-color: rgba(255,255,255,.94); color: #0f172a; }
.contact-form .text-danger { color: #fecaca !important; font-weight: 800; }
.selected-kit-note { display: grid; gap: 5px; margin-bottom: 18px; padding: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.12); }
.selected-kit-note span { color: #bfdbfe; font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.selected-kit-note strong { color: #fff; font-size: 1.05rem; font-weight: 950; }
.selected-kit-note small { color: #dbeafe; font-weight: 750; line-height: 1.55; }
.project-kit-request-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 15px; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; background: rgba(255,255,255,.1); }
.contact-success-card { display: grid; gap: 8px; margin-bottom: 18px; padding: 16px; border: 1px solid rgba(52,211,153,.34); border-radius: 8px; background: rgba(6,95,70,.24); color: #ecfdf5; }
.contact-success-card span { display: inline-flex; align-items: center; gap: 8px; color: #bbf7d0; font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.contact-success-card strong { color: #fff; font-size: 1.06rem; font-weight: 950; }
.contact-success-card p { margin: 0; color: #dcfce7; line-height: 1.55; }
.contact-success-card ul { margin: 4px 0 0; padding-left: 1.15rem; color: #d1fae5; }
.contact-success-card li { margin-top: 5px; line-height: 1.5; font-weight: 750; }
.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.workspace-body { background: var(--surface-bg); min-height: 100vh; }
.workspace-sidebar { position: fixed; inset: 0 auto 0 0; width: 280px; background: var(--sidebar); color: #fff; padding: 22px; display: flex; flex-direction: column; overflow: hidden; }
.public-brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 28px; }
.brand-lockup:hover { color: #fff; }
.brand-mark { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #10b981); color: #fff; font-weight: 900; }
.brand-mark-sm { width: 32px; height: 32px; font-size: .76rem; }
.brand-logo { width: auto; max-width: 190px; height: 50px; border-radius: 0; object-fit: contain; background: transparent; border: 0; padding: 0; box-shadow: none; flex: 0 0 auto; }
.brand-logo-sm { max-width: 320px; height: 64px; }
.theme-logo-dark { display: none; }
[data-theme="dark"] .theme-logo-light.has-dark,
.workspace-sidebar .theme-logo-light.has-dark { display: none; }
[data-theme="dark"] .theme-logo-dark,
.workspace-sidebar .theme-logo-dark { display: block; }
.brand-lockup small { display: block; color: #94a3b8; }
.workspace-sidebar .brand-logo { max-width: 235px; height: 68px; }
.workspace-nav { display: grid; gap: 8px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #475569 transparent; }
.workspace-nav::-webkit-scrollbar { width: 8px; }
.workspace-nav::-webkit-scrollbar-thumb { background: #475569; border-radius: 999px; }
.workspace-nav a { color: #cbd5e1; padding: 12px 14px; border-radius: 8px; display: flex; align-items: center; gap: 12px; }
.workspace-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.workspace-nav a.active { background: linear-gradient(135deg, rgba(37, 99, 235, .24), rgba(16, 185, 129, .14)); color: #fff; box-shadow: inset 3px 0 0 #60a5fa; }
.workspace-nav a.active i { color: #93c5fd; }
.workspace-nav-group { border: 1px solid rgba(148, 163, 184, .12); border-radius: 8px; background: rgba(15, 23, 42, .16); }
.workspace-nav-group[open], .workspace-nav-group.active { background: rgba(255,255,255,.035); border-color: rgba(96, 165, 250, .24); }
.workspace-nav-group summary { list-style: none; cursor: pointer; color: #e2e8f0; padding: 11px 12px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; }
.workspace-nav-group summary::-webkit-details-marker { display: none; }
.workspace-nav-group summary span { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.workspace-nav-group summary i:first-child { color: #93c5fd; width: 18px; text-align: center; }
.workspace-nav-group summary > i:last-child { color: #94a3b8; font-size: .72rem; transition: transform .18s ease; }
.workspace-nav-group[open] summary > i:last-child { transform: rotate(180deg); }
.workspace-nav-items { display: grid; gap: 4px; padding: 0 8px 8px 8px; }
.workspace-nav-items a { padding: 10px 11px 10px 14px; font-size: .94rem; }
.workspace-nav-items a i { width: 18px; text-align: center; }
.workspace-shell { margin-left: 280px; }
.workspace-topbar, .portal-topbar { min-height: 88px; background: var(--topbar-bg); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 28px; }
.workspace-topbar h1 { font-size: 1.55rem; margin: 0; font-weight: 850; }
.workspace-content { padding: 28px; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 8px; }
.notification-bell { position: relative; display: grid; place-items: center; color: var(--ink); }
.notification-bell span { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: #e11d48; color: #fff; font-size: .7rem; font-weight: 900; border: 2px solid #fff; }
.user-chip { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-weight: 700; background: var(--panel); }
.user-chip-profile { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.user-chip-profile:hover { color: var(--ink); border-color: rgba(37, 99, 235, .36); transform: translateY(-1px); box-shadow: 0 12px 30px var(--shadow); }
.user-chip-avatar { width: 30px; height: 30px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #10b981); color: #fff; font-size: .72rem; font-weight: 900; flex: 0 0 auto; }
.user-chip-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-card { color: #fff; border-radius: 8px; padding: 22px; box-shadow: 0 16px 40px rgba(15, 23, 42, .12); }
.stat-card span, .stat-card small { opacity: .88; }
.stat-card strong { display: block; font-size: 2rem; margin: 8px 0; }
.gradient-blue { background: linear-gradient(135deg, #1d4ed8, #38bdf8); }
.gradient-rose { background: linear-gradient(135deg, #be123c, #fb7185); }
.gradient-green { background: linear-gradient(135deg, #047857, #34d399); }
.gradient-dark { background: linear-gradient(135deg, #111827, #475569); }
.panel { padding: 22px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-header h2 { font-size: 1.15rem; font-weight: 850; margin: 0; }
.panel-header span { color: var(--muted); font-size: .9rem; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 11px; font-size: .76rem; font-weight: 900; border: 1px solid transparent; }
.status-badge.success { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
.status-badge.danger { color: #991b1b; background: #fee2e2; border-color: #fecaca; }
.profile-grid { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 22px; align-items: start; }
.profile-summary-panel { position: sticky; top: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 50px var(--shadow); padding: 0 22px 22px; }
.profile-cover { height: 112px; margin: 0 -22px; background: linear-gradient(135deg, #0f172a 0%, #2563eb 48%, #10b981 100%); }
.profile-avatar-xl { width: 112px; height: 112px; margin: -56px auto 16px; border: 6px solid var(--panel); border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #0f172a); color: #fff; font-size: 1.8rem; font-weight: 950; box-shadow: 0 18px 40px rgba(15, 23, 42, .18); }
.profile-avatar-xl img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-summary-panel h2 { text-align: center; margin: 0; font-size: 1.35rem; font-weight: 950; }
.profile-summary-panel p { text-align: center; margin: 7px 0 14px; color: var(--muted); font-weight: 750; overflow-wrap: anywhere; }
.profile-badge-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.profile-facts { display: grid; gap: 10px; margin: 0; }
.profile-facts div { border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--panel-soft); }
.profile-facts dt { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.profile-facts dd { margin: 5px 0 0; color: var(--ink); font-weight: 850; }
.profile-workspace { display: grid; gap: 22px; }
.profile-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.upload-dropzone { min-height: 190px; cursor: pointer; border: 1px dashed rgba(37, 99, 235, .45); border-radius: 8px; background: linear-gradient(180deg, rgba(37, 99, 235, .08), rgba(16, 185, 129, .06)); display: grid; place-items: center; align-content: center; text-align: center; padding: 22px; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.upload-dropzone:hover { border-color: #2563eb; transform: translateY(-1px); background: linear-gradient(180deg, rgba(37, 99, 235, .12), rgba(16, 185, 129, .08)); }
.upload-dropzone i { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 8px; color: #2563eb; background: #eff6ff; font-size: 1.35rem; margin-bottom: 12px; }
.upload-dropzone span { display: block; color: var(--ink); font-weight: 950; }
.upload-dropzone small { display: block; color: var(--muted); margin-top: 4px; font-weight: 750; }
.upload-dropzone input { display: none; }
.brand-preview-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 170px; gap: 14px; }
.brand-preview-card { min-height: 112px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand-preview-card.dark-preview { background: #080d18; border-color: #243247; }
.brand-preview-card.dark-preview > span:first-child { color: #cbd5e1; }
.brand-preview-empty { color: #94a3b8; font-weight: 800; }
.brand-preview-card.compact { justify-content: center; flex-direction: column; }
.brand-preview-card > span:first-child { color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.brand-preview-image { max-width: min(230px, 60%); max-height: 74px; object-fit: contain; }
.brand-preview-favicon { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); padding: 5px; }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); gap: 10px; }
.timeline { display: grid; gap: 14px; }
.timeline-item { border-left: 3px solid var(--blue); padding-left: 14px; }
.timeline-item.success { border-color: var(--green); }
.timeline-item.warning { border-color: #d97706; }
.timeline-item.danger { border-color: var(--rose); }
.timeline-item p { margin: 4px 0; color: #475569; }
.timeline-item small { color: var(--muted); }
.modern-table th { color: var(--muted); font-size: .78rem; text-transform: uppercase; }
.renewal-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); color: var(--ink); padding: 8px 12px; font-size: .86rem; font-weight: 850; }
.filter-chip:hover, .filter-chip.active { border-color: rgba(37, 99, 235, .36); background: #eff6ff; color: #1d4ed8; }
.filter-chip span { min-width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(37, 99, 235, .12); color: #1d4ed8; font-size: .72rem; font-weight: 950; }
.renewal-sent-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.reminder-history-list { display: grid; gap: 14px; position: relative; }
.reminder-history-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
.reminder-history-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 5px rgba(37, 99, 235, .12); margin-top: 18px; }
.reminder-history-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 14px; }
.reminder-history-card p { margin: 12px 0 0; color: var(--ink); line-height: 1.6; white-space: pre-wrap; }
.followup-list { display: grid; gap: 12px; }
.followup-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 14px; }
.followup-card p { margin: 12px 0; color: var(--ink); line-height: 1.6; white-space: pre-wrap; }
.followup-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .86rem; font-weight: 800; }
.followup-meta span { display: inline-flex; align-items: center; gap: 6px; }
.client-account-search { position: relative; max-width: 560px; }
.client-account-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.client-account-search .form-control { min-height: 46px; padding-left: 44px; border-radius: 8px; font-weight: 700; }
.client-account-actions { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.client-account-actions .btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.client-account-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 28px; box-shadow: 0 14px 34px var(--shadow); }
.client-account-hero h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 950; line-height: 1; }
.client-account-generated { display: block; margin-top: 8px; color: var(--muted); font-weight: 800; }
.client-account-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; color: var(--muted); font-weight: 800; }
.client-account-contact span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 9px 12px; }
.client-account-hero-actions { display: grid; justify-items: end; gap: 14px; }
.client-account-filter-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); padding: 14px; margin-top: 16px; }
.client-account-filter-panel .client-account-search { flex: 1 1 auto; max-width: none; }
.client-account-filter-row { margin: 0 0 16px; }
.client-account-filter-row .filter-chip { border-radius: 8px; }
.client-account-share-grid { display: grid; grid-template-columns: minmax(280px, .45fr) 1fr; gap: 18px; align-items: start; }
.client-account-share-form { display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 16px; }
.client-account-share-list { display: grid; gap: 10px; }
.client-account-share-list article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 14px; }
.client-account-share-list article > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.client-account-share-list strong, .client-account-share-list small { display: block; }
.client-account-share-list p { margin: 8px 0; color: var(--muted); line-height: 1.55; }
.client-account-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.client-account-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.client-account-facts div { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 14px; }
.client-account-facts span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; }
.client-account-facts strong { display: block; margin-top: 6px; font-size: 1.4rem; }
.client-account-timeline { display: grid; gap: 10px; margin-top: 18px; }
.client-account-timeline a { position: relative; display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--ink); padding: 12px 12px 12px 34px; }
.client-account-timeline a strong, .client-account-timeline a small { display: block; }
.client-account-timeline a small { color: var(--muted); margin-top: 3px; font-weight: 750; }
.client-account-timeline-dot { position: absolute; left: 13px; top: 18px; width: 9px; height: 9px; border-radius: 999px; background: var(--blue); box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.client-account-note { max-width: 320px; color: var(--muted); font-weight: 700; white-space: normal; }
.print-only { display: none; }
.client-account-detail-row > td { padding-top: 0; border-top: 0; }
.client-project-standing { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 12px; }
.lead-summary { max-width: 360px; color: #475569; }
.admin-project-kit-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(245,158,11,.28); border-radius: 999px; background: #fffbeb; color: #92400e; padding: 5px 9px; font-size: .72rem; font-weight: 950; }
.lead-kit-preview { display: grid; gap: 6px; padding: 12px; border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: #eff6ff; color: #1e3a8a; }
.lead-kit-preview span { color: #2563eb; font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.lead-kit-preview strong { color: #0f172a; font-weight: 950; line-height: 1.35; }
.lead-kit-preview div { display: flex; flex-wrap: wrap; gap: 7px; }
.lead-kit-preview small { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(37,99,235,.14); border-radius: 999px; background: rgba(255,255,255,.7); color: #334155; padding: 4px 8px; font-weight: 850; }
.lead-quick-actions { display: flex; flex-wrap: wrap; gap: 5px; max-width: 210px; }
.lead-quick-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .46rem; --bs-btn-font-size: .72rem; font-weight: 850; }
.lead-source-insights { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; }
.lead-source-insights a,
.lead-source-dashboard a,
.lead-followup-metrics a,
.lead-followup-list a { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--ink); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lead-source-insights a:hover,
.lead-source-dashboard a:hover,
.lead-followup-metrics a:hover,
.lead-followup-list a:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.34); box-shadow: 0 16px 34px var(--shadow); }
.lead-source-insights a { display: grid; gap: 3px; padding: 12px; }
.lead-source-insights span,
.lead-source-dashboard span,
.lead-followup-metrics span,
.lead-followup-list span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.lead-source-insights strong,
.lead-source-dashboard strong,
.lead-followup-metrics strong,
.lead-followup-list strong { color: var(--ink); font-weight: 950; }
.lead-source-insights small,
.lead-source-dashboard small,
.lead-followup-list small { color: var(--muted); font-weight: 800; }
.lead-activity-summary { min-width: 220px; max-width: 280px; }
.lead-activity-summary span { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.lead-activity-summary small { display: block; color: var(--muted); font-weight: 800; margin-top: 4px; }
.lead-activity-summary p { color: #475569; line-height: 1.55; margin: 8px 0 0; }
.lead-followup-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lead-followup-metrics a { display: grid; gap: 4px; padding: 14px; }
.lead-followup-metrics strong { font-size: 1.75rem; line-height: 1; }
.lead-followup-list { display: grid; gap: 9px; }
.lead-followup-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; padding: 13px; }
.lead-followup-list span { grid-column: 1; }
.lead-followup-list small { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
.lead-source-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lead-source-dashboard a { display: grid; gap: 5px; padding: 14px; }
.lead-source-dashboard strong { font-size: 1.5rem; line-height: 1; }
.admin-lead-kit-panel { padding: 18px; border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(37,99,235,.12), transparent 34%), var(--panel-soft); }
.admin-lead-kit-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.admin-lead-kit-head span { display: inline-flex; align-items: center; gap: 8px; color: #2563eb; font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.admin-lead-kit-head strong { color: var(--ink); font-size: 1.1rem; font-weight: 950; }
.admin-lead-kit-head a { color: var(--blue); font-weight: 900; text-decoration: none; }
.admin-lead-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-lead-kit-grid div, .admin-lead-message { padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.admin-lead-kit-grid span, .admin-lead-message span { display: block; color: var(--muted); font-size: .72rem; font-weight: 950; text-transform: uppercase; margin-bottom: 5px; }
.admin-lead-kit-grid strong { display: block; color: var(--ink); font-weight: 900; line-height: 1.35; }
.admin-lead-message { margin-top: 10px; }
.admin-lead-message p { color: #334155; line-height: 1.65; margin: 0; white-space: pre-wrap; }
.lead-activity-panel { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.lead-template-panel { padding: 18px; border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(16,185,129,.1), transparent 34%), var(--panel-soft); }
.lead-template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lead-template-card { min-height: 132px; display: grid; gap: 8px; align-content: start; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); padding: 16px; box-shadow: 0 10px 24px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.lead-template-card:hover, .lead-template-card.is-active { transform: translateY(-3px); border-color: rgba(37,99,235,.34); box-shadow: 0 18px 42px var(--shadow-strong); }
.lead-template-card.is-active { outline: 3px solid rgba(37,99,235,.12); }
.lead-template-card i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.lead-template-card span { font-weight: 950; }
.lead-template-card small { color: var(--muted); font-weight: 750; line-height: 1.45; }
.lead-template-draft { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 14px; align-items: end; }
.lead-template-actions { display: grid; gap: 8px; }
.lead-settings-template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lead-settings-template-grid article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 16px; }
.lead-settings-template-grid article.is-editing { border-color: rgba(37,99,235,.42); box-shadow: 0 18px 42px var(--shadow); outline: 3px solid rgba(37,99,235,.1); }
.lead-settings-template-grid article > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lead-settings-template-grid span { display: inline-flex; align-items: center; gap: 7px; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.lead-settings-template-grid strong { color: var(--ink); font-weight: 950; }
.lead-settings-template-grid small { display: block; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.lead-settings-template-grid p { color: #475569; line-height: 1.65; white-space: pre-wrap; margin: 0 0 12px; }
.lead-template-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.lead-template-preview-panel { border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: radial-gradient(circle at 100% 0%, rgba(37,99,235,.08), transparent 32%), var(--panel-soft); padding: 16px; }
.lead-template-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.lead-template-preview-head span { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.lead-template-preview-head strong { display: block; color: var(--ink); font-weight: 950; margin-top: 3px; }
.lead-template-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lead-template-preview-output { display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.lead-template-preview-output > div { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 14px; }
.lead-template-preview-output span { display: block; color: var(--muted); font-size: .72rem; font-weight: 950; text-transform: uppercase; margin-bottom: 7px; }
.lead-template-preview-output strong { display: block; color: var(--ink); line-height: 1.55; }
.lead-template-preview-output p { color: #334155; line-height: 1.7; margin: 0; white-space: pre-wrap; }
.lead-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.lead-activity-head span { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.lead-activity-head strong { display: block; color: var(--ink); font-weight: 950; }
.lead-activity-head small { color: var(--muted); font-weight: 850; }
.lead-activity-form { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.lead-note-templates { display: flex; flex-wrap: wrap; gap: 7px; }
.lead-note-templates .btn { font-weight: 850; }
.lead-activity-timeline { position: relative; display: grid; gap: 14px; margin-top: 18px; }
.lead-activity-timeline article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.lead-activity-marker { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; background: #eff6ff; color: #2563eb; border: 1px solid rgba(37,99,235,.18); }
.lead-activity-card { position: relative; padding: 16px 48px 16px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 10px 24px var(--shadow); }
.lead-activity-card > div:first-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lead-activity-card span { color: var(--blue); font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.lead-activity-card small { color: var(--muted); font-weight: 800; }
.lead-activity-card p { color: #334155; line-height: 1.65; margin: 0; white-space: pre-wrap; }
.lead-activity-card em { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; border: 1px solid rgba(37,99,235,.18); border-radius: 999px; background: #eff6ff; color: #1d4ed8; padding: 6px 10px; font-style: normal; font-size: .82rem; font-weight: 850; }
.lead-activity-card .js-delete-lead-activity { position: absolute; top: 12px; right: 12px; }
.lead-activity-empty { display: grid; place-items: center; gap: 8px; min-height: 150px; padding: 24px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); text-align: center; background: var(--panel); }
.lead-activity-empty i { font-size: 1.6rem; color: var(--blue); }
.lead-activity-empty strong { color: var(--ink); font-weight: 950; }
.lead-print-profile { max-width: 1120px; margin: 0 auto; }
.lead-print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.lead-print-head h2 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; font-weight: 950; margin: 0 0 12px; }
.lead-print-head p:not(.eyebrow) { color: var(--muted); line-height: 1.7; margin: 0; }
.lead-print-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.lead-print-status { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.lead-print-section { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: 18px; }
.lead-print-copy { color: #334155; line-height: 1.78; white-space: pre-wrap; }
.lead-print-timeline { display: grid; gap: 12px; }
.lead-print-timeline article { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 16px; }
.lead-print-timeline article > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.lead-print-timeline strong { color: var(--blue); font-size: .82rem; font-weight: 950; text-transform: uppercase; }
.lead-print-timeline small { color: var(--muted); font-weight: 800; }
.lead-print-timeline p { color: #334155; line-height: 1.68; white-space: pre-wrap; margin: 0; }
.lead-print-timeline em { display: inline-flex; margin-top: 10px; color: #1d4ed8; background: #eff6ff; border: 1px solid rgba(37,99,235,.18); border-radius: 999px; padding: 6px 10px; font-style: normal; font-size: .82rem; font-weight: 850; }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 320px) minmax(180px, 240px) 1fr; gap: 14px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.project-progress { min-width: 140px; height: 18px; background: #e2e8f0; border-radius: 8px; }
.project-progress .progress-bar { background: linear-gradient(90deg, #2563eb, #10b981); font-size: .72rem; font-weight: 800; }
.project-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, #ffffff, #eff6ff); }
.project-hero h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 850; margin-bottom: 12px; }
.project-hero p:not(.eyebrow) { max-width: 820px; color: #475569; }
.project-progress-ring { width: 132px; height: 132px; border-radius: 50%; border: 12px solid #2563eb; display: grid; place-items: center; text-align: center; background: #fff; flex: 0 0 auto; }
.project-progress-ring strong { display: block; font-size: 1.7rem; }
.project-progress-ring span { display: block; color: var(--muted); font-size: .8rem; font-weight: 800; }
.project-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.project-facts div { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #f8fafc; }
.project-facts span { display: block; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.project-facts strong { display: block; margin-top: 6px; font-size: 1.05rem; }
.kanban-board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.kanban-column { min-height: 420px; background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
.kanban-column header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kanban-column header strong { font-weight: 850; }
.kanban-column header span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; font-weight: 800; color: #334155; }
.kanban-stack { display: grid; gap: 12px; }
.task-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px; box-shadow: 0 10px 24px rgba(15, 23, 42, .05); }
.task-card p { color: #475569; margin: 10px 0; font-size: .9rem; }
.task-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.task-mini-list { display: grid; gap: 10px; }
.task-mini-list a, .empty-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; color: var(--ink); }
.task-mini-list span { color: var(--muted); font-weight: 800; font-size: .84rem; }
.empty-state { color: var(--muted); justify-content: center; }
.invoice-items { display: grid; gap: 10px; }
.invoice-item-row { display: grid; grid-template-columns: 1fr 130px 160px 160px; gap: 10px; align-items: center; }
.invoice-item-head { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.invoice-total-box { margin-left: auto; max-width: 520px; display: grid; gap: 10px; }
.invoice-total-box div, .invoice-print-total div { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #f8fafc; }
.invoice-total-box span, .invoice-print-total span { color: var(--muted); font-weight: 800; }
.invoice-print-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.invoice-print-head h2 { font-size: 2rem; font-weight: 850; }
.invoice-print-total { margin-left: auto; width: min(420px, 100%); display: grid; gap: 8px; }
.support-note { display: flex; align-items: center; gap: 10px; border: 1px solid #bfdbfe; border-radius: 8px; background: #eff6ff; color: #1e40af; padding: 12px 14px; font-weight: 700; }
.rich-source { display: none; }
.rich-editor { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.rich-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.rich-toolbar button { min-width: 36px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-weight: 850; }
.rich-toolbar button:hover { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.rich-surface { padding: 16px; outline: none; line-height: 1.75; color: #334155; overflow: auto; }
.rich-surface:focus { box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .18); }
.rich-surface h2, .rich-surface h3, .blog-content h2, .blog-content h3, .case-story-body h2, .case-story-body h3 { color: var(--ink); font-weight: 850; margin: 18px 0 10px; }
.rich-surface blockquote, .blog-content blockquote, .case-story-body blockquote { border-left: 4px solid #2563eb; background: #eff6ff; color: #1e3a8a; padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.blog-content ul, .blog-content ol, .case-story-body ul, .case-story-body ol { padding-left: 22px; margin-bottom: 18px; }
.report-scorecard { min-height: 100%; }
.report-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.report-facts div, .report-list div { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.report-facts span, .report-list span { display: block; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; }
.report-facts strong { display: block; margin-top: 8px; font-size: 1.55rem; font-weight: 850; }
.report-list { display: grid; gap: 10px; }
.report-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-list span { display: inline; }
.report-list strong { font-size: 1.25rem; }
.notification-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.notification-summary div { border: 1px solid var(--line); background: #f8fafc; border-radius: 8px; padding: 16px; }
.notification-summary span { display: block; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.notification-summary strong { display: block; margin-top: 8px; font-size: 1.8rem; font-weight: 850; }
.notification-feed { display: grid; gap: 14px; }
.notification-card { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid #2563eb; border-radius: 8px; padding: 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, .05); }
.notification-card.critical { border-left-color: #e11d48; }
.notification-card.high { border-left-color: #f59e0b; }
.notification-card.medium { border-left-color: #2563eb; }
.notification-card.is-read { opacity: .68; }
.notification-icon { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: #f1f5f9; color: #0f172a; }
.notification-body strong { font-size: 1rem; }
.notification-body p { margin: 5px 0 0; color: #475569; }
.notification-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; color: var(--muted); font-size: .84rem; font-weight: 700; }
.notification-actions { display: flex; gap: 8px; align-items: center; }
.audit-timeline { display: grid; gap: 14px; }
.audit-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)) 110px; gap: 12px; align-items: end; }
.audit-filter-actions { display: flex; align-items: end; }
.audit-item { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 16px; box-shadow: 0 10px 26px rgba(15, 23, 42, .04); }
.audit-icon { width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; background: #eff6ff; color: #1d4ed8; }
.audit-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audit-title strong { font-size: 1rem; }
.audit-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .84rem; font-weight: 700; margin-top: 8px; }
.audit-network { margin-top: 10px; display: grid; gap: 4px; color: #334155; font-size: .84rem; }
.audit-network span { font-weight: 800; }
.audit-network small { color: var(--muted); overflow-wrap: anywhere; }
.audit-actions { display: flex; align-items: center; }
.audit-drawer { width: min(720px, 100%); }
.audit-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.audit-detail-grid div, .audit-detail-section { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.audit-detail-grid span, .audit-detail-section span { display: block; color: var(--muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; margin-bottom: 6px; }
.audit-detail-grid strong { overflow-wrap: anywhere; }
.audit-detail-section { margin-bottom: 12px; }
.audit-detail-section p { margin: 0; color: #334155; overflow-wrap: anywhere; }
.audit-detail-section pre { margin: 0; max-height: 260px; overflow: auto; color: #0f172a; white-space: pre-wrap; font-size: .82rem; }
.document-upload-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; }
.document-list { display: grid; gap: 10px; }
.document-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 12px; }
.document-row span { display: block; color: var(--muted); font-size: .84rem; font-weight: 700; margin-top: 4px; }
.narrow-panel { max-width: 980px; }
.portal-body { background: #f6f8fb; min-height: 100vh; }
.portal-topbar { position: sticky; top: 0; z-index: 20; }
.portal-topbar .brand-lockup { margin-bottom: 0; }
.portal-topbar .brand-logo { height: 44px; max-width: 210px; }
.portal-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.portal-nav form { margin: 0; }
.portal-nav .btn { white-space: nowrap; }
.client-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(135deg, #ffffff, #eef6ff); }
.client-hero h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 850; margin: 0 0 12px; }
.client-hero p:not(.eyebrow) { max-width: 760px; color: #475569; margin-bottom: 18px; }
.client-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.client-progress { width: 150px; height: 150px; border-radius: 50%; border: 12px solid #2563eb; display: grid; place-items: center; align-content: center; background: #fff; flex: 0 0 auto; text-align: center; }
.client-progress strong { display: block; font-size: 2rem; font-weight: 900; }
.client-progress span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.client-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 18px; align-items: start; }
.client-project-grid { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; }
.client-project-list, .client-list { display: grid; gap: 12px; }
.client-project-card, .client-list-row, .hosting-tile { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 16px; }
.client-project-card { display: grid; gap: 12px; }
.client-project-card h3 { font-size: 1.08rem; font-weight: 850; margin: 10px 0 4px; }
.client-project-card p, .hosting-tile p { color: var(--muted); margin: 0; }
.client-project-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: .86rem; font-weight: 800; }
.client-project-meta a, .hosting-tile a { color: #1d4ed8; font-weight: 850; }
.client-list-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.client-list a.client-list-row { color: var(--ink); transition: background .16s ease, border-color .16s ease; }
.client-list a.client-list-row:hover { background: #eff6ff; border-color: #bfdbfe; }
.client-list-row span { display: block; color: var(--muted); font-size: .84rem; font-weight: 700; margin-top: 4px; }
.hosting-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 12px; }
.hosting-tile span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; margin-bottom: 8px; }
.hosting-tile strong { display: block; margin-bottom: 8px; overflow-wrap: anywhere; }
.hosting-tile div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.client-ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .45fr); gap: 18px; align-items: start; }
.ticket-status-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ticket-status-strip div, .support-description { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.ticket-status-strip span, .support-description span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; margin-bottom: 6px; }
.ticket-status-strip strong { display: block; font-size: 1.05rem; }
.support-description p { color: #334155; line-height: 1.7; white-space: pre-wrap; margin: 0; }
.invoice-portal-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.invoice-portal-head h1 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 850; margin: 0 0 8px; }
.invoice-portal-head p:not(.eyebrow) { color: var(--muted); margin: 0; }
.invoice-portal-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .45fr); gap: 18px; align-items: start; }
.invoice-client-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.invoice-client-box div { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.invoice-client-box span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; margin-bottom: 6px; }
.invoice-client-box strong { display: block; overflow-wrap: anywhere; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .38fr); gap: 18px; align-items: start; }
.account-summary { display: grid; gap: 12px; }
.account-brand-logo { width: 54px; height: 54px; }
.account-summary h3 { font-size: 1.25rem; font-weight: 850; margin: 8px 0 0; }
.account-summary p { color: var(--muted); margin: 0; }
.account-summary div { border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; padding: 14px; }
.account-summary div span { display: block; color: var(--muted); font-size: .78rem; font-weight: 850; text-transform: uppercase; margin-bottom: 6px; }
.account-summary div strong { display: block; overflow-wrap: anywhere; }
.portal-error { width: min(760px, 100%); margin: 42px auto; text-align: center; }
.portal-error-icon { width: 64px; height: 64px; border-radius: 8px; display: grid; place-items: center; margin: 0 auto 18px; background: #eff6ff; color: #1d4ed8; font-size: 1.6rem; }
.portal-error h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 850; }
.portal-error p:not(.eyebrow) { color: var(--muted); max-width: 560px; margin: 0 auto 22px; line-height: 1.7; }
.portal-error .client-actions { justify-content: center; }
.auth-page { position: relative; overflow: hidden; background: linear-gradient(180deg, #f8fbff 0%, #f3f6fb 100%); }
.auth-page::before { content: ""; position: fixed; inset: 82px 0 0; pointer-events: none; background: linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(37,99,235,.05) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,251,255,.64)); background-size: 58px 58px, 58px 58px, auto; mask-image: linear-gradient(180deg, #000 0%, transparent 72%); }
.auth-page::after { content: ""; position: fixed; inset: 82px 0 0; pointer-events: none; background: linear-gradient(135deg, rgba(37,99,235,.08), transparent 28%, rgba(16,185,129,.08) 72%, transparent); opacity: .78; }
.auth-page .portal-topbar { min-height: 82px; padding: 0 38px; background: rgba(255,255,255,.92); border-bottom-color: #e5e7eb; backdrop-filter: blur(14px); box-shadow: 0 10px 32px rgba(15, 23, 42, .04); }
.auth-page .portal-topbar .brand-logo { height: 52px; max-width: 228px; }
.auth-page .portal-nav { gap: 8px; }
.auth-page .portal-nav .btn { min-height: 34px; padding: 6px 12px; font-size: .9rem; font-weight: 850; line-height: 1.1; }
.auth-page .theme-toggle { width: 36px; min-width: 36px; padding-inline: 0 !important; }
.auth-shell { position: relative; z-index: 1; height: calc(100vh - 82px); display: grid; place-items: center; padding: 16px 20px 28px; box-sizing: border-box; }
.auth-panel { position: relative; width: min(500px, 100%); overflow: hidden; background: rgba(255,255,255,.94); border: 1px solid rgba(148,163,184,.34); border-radius: 8px; box-shadow: 0 26px 90px rgba(15, 23, 42, .13); padding: 24px 34px 26px; }
.auth-page .auth-panel { transform: translateY(-22px); }
.auth-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #2563eb, #0ea5e9, #10b981); }
.auth-panel h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1; font-weight: 950; }
.auth-heading { display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: start; margin-bottom: 10px; }
.auth-heading .eyebrow { margin-bottom: 7px; }
.auth-heading p.text-muted { margin: 8px 0 0; line-height: 1.5; font-size: .95rem; }
.auth-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; border: 1px solid #dbeafe; }
.auth-demo-note { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: #f8fbff; color: #475569; padding: 8px 11px; margin-bottom: 14px; font-weight: 800; }
.auth-demo-note i { color: #2563eb; }
.auth-user-note { align-items: flex-start; }
.auth-user-note span { display: grid; gap: 2px; }
.auth-user-note small { color: var(--muted); font-weight: 700; }
.auto-lock-warning { position: fixed; right: 22px; bottom: 22px; z-index: 1100; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border-radius: 8px; background: rgba(15, 23, 42, .96); color: #e5edf8; border: 1px solid rgba(148, 163, 184, .35); box-shadow: 0 18px 60px rgba(15, 23, 42, .28); font-weight: 800; }
.auto-lock-warning i { color: #60a5fa; }
.renewal-action-row > td { border-top: 0 !important; background: rgba(248, 250, 252, .72); }
.renewal-inline-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; border-top: 1px solid var(--line); }
.renewal-inline-form { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; box-shadow: 0 14px 40px rgba(15, 23, 42, .06); }
.renewal-inline-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink); }
.renewal-inline-head i { color: #2563eb; }
.renewal-inline-head span { margin-left: auto; color: var(--muted); font-size: .84rem; font-weight: 750; }
.offline-shell { min-height: 68vh; display: grid; place-items: center; padding: 72px 20px; background: radial-gradient(circle at 20% 20%, rgba(37,99,235,.10), transparent 30%), radial-gradient(circle at 80% 10%, rgba(20,184,166,.10), transparent 34%), linear-gradient(180deg, var(--bg), rgba(248,250,252,.92)); }
.offline-card { width: min(720px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 28px 96px rgba(15,23,42,.14); padding: 36px; position: relative; overflow: hidden; }
.offline-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #2563eb, #0ea5e9, #10b981); }
.offline-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.offline-icon { width: 58px; height: 58px; display: inline-grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #2563eb; border: 1px solid #dbeafe; font-size: 1.35rem; }
.offline-status { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(245, 158, 11, .28); color: #92400e; background: rgba(245, 158, 11, .10); padding: 8px 12px; border-radius: 8px; font-weight: 850; font-size: .86rem; }
.offline-status i { font-size: .55rem; color: #f59e0b; }
.offline-card h1 { margin: 0 0 12px; max-width: 620px; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.02; font-weight: 950; }
.offline-card p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; line-height: 1.7; margin-bottom: 24px; max-width: 640px; }
.offline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.offline-actions .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 8px; font-weight: 850; }
.offline-hints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.offline-hints span { display: flex; align-items: center; gap: 9px; min-height: 52px; border: 1px solid var(--line); background: rgba(248, 250, 252, .72); padding: 10px 12px; border-radius: 8px; color: var(--muted); font-weight: 750; }
.offline-hints i { color: #16a34a; }
.pwa-update-toast { position: fixed; left: 50%; bottom: 22px; z-index: 1200; display: flex; align-items: center; gap: 16px; width: min(520px, calc(100vw - 32px)); transform: translateX(-50%); padding: 14px 14px 14px 16px; border-radius: 8px; background: rgba(15, 23, 42, .96); color: #e5edf8; border: 1px solid rgba(148, 163, 184, .35); box-shadow: 0 22px 70px rgba(15, 23, 42, .32); }
.pwa-update-toast div { display: grid; gap: 2px; flex: 1; }
.pwa-update-toast strong { font-weight: 900; }
.pwa-update-toast span { color: #bfdbfe; font-size: .9rem; }
.pwa-update-toast button { border: 0; border-radius: 8px; background: #e5edf8; color: #0f172a; font-weight: 900; padding: 9px 12px; }
.pwa-install-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.pwa-install-button.is-installed,
.pwa-install-button.is-standalone { opacity: .82; cursor: default; }
.pwa-install-button.icon-btn.is-installed,
.pwa-install-button.icon-btn.is-standalone { color: #16a34a; }
.public-nav .pwa-install-button.is-installed,
.portal-nav .pwa-install-button.is-installed { border-color: rgba(34, 197, 94, .35); color: #15803d; background: rgba(34, 197, 94, .08); }
[data-theme="dark"] .public-nav .pwa-install-button.is-installed,
[data-theme="dark"] .portal-nav .pwa-install-button.is-installed { color: #86efac; border-color: rgba(134, 239, 172, .24); background: rgba(22, 163, 74, .12); }
.cwp-standalone .public-nav,
.cwp-standalone .portal-topbar,
.cwp-standalone .workspace-topbar { -webkit-app-region: drag; }
.cwp-standalone .public-nav a,
.cwp-standalone .public-nav button,
.cwp-standalone .public-nav .dropdown-menu,
.cwp-standalone .portal-topbar a,
.cwp-standalone .portal-topbar button,
.cwp-standalone .workspace-topbar a,
.cwp-standalone .workspace-topbar button,
.cwp-standalone .workspace-topbar form { -webkit-app-region: no-drag; }
.cwp-standalone .public-nav { box-shadow: 0 18px 50px rgba(15, 23, 42, .08); }
.cwp-standalone .portal-topbar { box-shadow: 0 16px 44px rgba(15, 23, 42, .10); }
.cwp-standalone .workspace-body { background-attachment: fixed; }
.auth-panel .form-label { color: var(--ink); font-weight: 850; }
.auth-panel .form-control { min-height: 44px; border-radius: 8px; font-size: .98rem; }
.auth-panel .form-control-lg { padding: .54rem .85rem; }
.auth-panel .form-check { min-height: 22px; }
.auth-panel .btn-lg { min-height: 44px; padding-block: .5rem; font-size: 1rem; }

.auth-card { width: min(480px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 24px 90px var(--shadow-strong); padding: 34px; }
.theme-toggle { display: inline-grid; place-items: center; }
.form-control, .form-select { background-color: var(--input-bg); color: var(--input-text); border-color: var(--line); }
.form-control:focus, .form-select:focus { background-color: var(--input-bg); color: var(--input-text); border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14); }
.form-control::placeholder { color: var(--muted); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--ink); --bs-table-border-color: var(--line); color: var(--ink); }
.text-muted { color: var(--muted) !important; }
.btn-outline-dark { color: var(--ink); border-color: var(--line); }
.btn-outline-dark:hover { color: #fff; background: #111827; border-color: #111827; }
.btn-outline-secondary { color: var(--muted); border-color: var(--line); }
.badge.text-bg-light { background: var(--panel-soft) !important; color: var(--ink) !important; border: 1px solid var(--line); }

.project-kit-hero h1 { max-width: 980px; }
.project-kit-proof { display: flex; flex-wrap: wrap; gap: 10px; }
.project-kit-proof span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; color: var(--ink); background: var(--panel); box-shadow: 0 10px 26px var(--shadow); font-weight: 850; }
.project-kit-proof i { color: var(--green); }
.project-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-kit-card { display: flex; flex-direction: column; min-height: 310px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 46px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.project-kit-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.35); box-shadow: 0 26px 70px var(--shadow-strong); }
.project-kit-card > i { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-size: 1.25rem; }
.project-kit-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.project-kit-card span { color: var(--blue); font-size: .75rem; font-weight: 950; text-transform: uppercase; }
.project-kit-card h3 { margin: 10px 0; color: var(--ink); font-size: 1.22rem; font-weight: 950; }
.project-kit-card p { color: var(--muted); line-height: 1.7; }
.project-kit-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 14px; }
.project-kit-meta small { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); background: var(--panel-soft); font-weight: 850; }
.project-kit-card a { margin-top: auto; color: var(--blue); font-weight: 900; }
.project-kit-deliverables > div:first-child { margin-bottom: 20px; max-width: 760px; }
.project-kit-deliverables p { color: var(--muted); line-height: 1.7; }
.project-kit-disclaimer { margin: 0; }
.project-kit-detail-hero h1 { max-width: 900px; }
.project-kit-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr); gap: 34px; align-items: start; }
.project-kit-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.project-kit-access-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(37,99,235,.18); border-radius: 8px; background: var(--panel); color: var(--muted); font-weight: 850; box-shadow: 0 12px 28px var(--shadow); }
.project-kit-access-note i { color: var(--blue); }
.project-kit-snapshot { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 24px 70px var(--shadow); }
.project-kit-snapshot img, .project-kit-snapshot-fallback { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(135deg, #172554, #2563eb 54%, #10b981); }
.project-kit-snapshot-fallback { display: grid; place-items: center; color: #fff; text-align: center; }
.project-kit-snapshot-fallback i { font-size: 2rem; }
.project-kit-snapshot-fallback span { display: block; margin-top: 8px; font-weight: 900; }
.project-kit-snapshot div:not(.project-kit-snapshot-fallback) { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.project-kit-snapshot span { display: block; color: var(--muted); font-size: .76rem; font-weight: 950; text-transform: uppercase; margin-bottom: 6px; }
.project-kit-snapshot strong { display: block; color: var(--ink); line-height: 1.45; }
.project-kit-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .35fr); gap: 22px; align-items: start; }
.project-kit-content { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 46px var(--shadow); }
.project-kit-content p:not(.eyebrow), .rich-content { color: var(--muted); line-height: 1.75; }
.project-kit-learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-kit-learning-grid .project-kit-content { min-height: 100%; }
.project-kit-learning-grid h2, .project-kit-content h2 { font-size: clamp(1.45rem, 2.5vw, 2.15rem); font-weight: 950; margin-bottom: 18px; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { color: var(--ink); font-weight: 950; margin: 1.1em 0 .45em; }
.rich-content ul, .rich-content ol { padding-left: 1.25rem; }
.project-kit-detail-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.project-kit-detail-panels article { padding: 26px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 46px var(--shadow); }
.project-kit-detail-panels h2 { font-size: clamp(1.5rem, 2.5vw, 2.2rem); font-weight: 950; margin-bottom: 18px; }
.premium-check-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.premium-check-list li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; color: var(--muted); line-height: 1.6; font-weight: 750; }
.premium-check-list i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; color: #047857; background: #d1fae5; font-size: .78rem; }
.project-kit-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project-kit-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.project-kit-module-grid article { min-height: 220px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 18px 46px var(--shadow); }
.project-kit-module-grid span { color: var(--blue); font-size: .78rem; font-weight: 950; }
.project-kit-module-grid h3 { margin: 12px 0; color: var(--ink); font-size: 1.1rem; font-weight: 950; line-height: 1.35; }
.project-kit-module-grid p { color: var(--muted); line-height: 1.68; margin: 0; }
.project-kit-ethics-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1fr); gap: 24px; align-items: center; padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(circle at 90% 0%, rgba(16,185,129,.16), transparent 35%), var(--panel); box-shadow: 0 20px 60px var(--shadow); }
.project-kit-ethics-panel h2 { font-size: clamp(1.65rem, 3vw, 2.6rem); font-weight: 950; }
.project-kit-ethics-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.75; margin: 0; }
.project-kit-ethics-list { display: grid; gap: 12px; }
.project-kit-ethics-list span { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: #334155; font-weight: 850; line-height: 1.55; }
.project-kit-ethics-list i { margin-top: 3px; color: var(--green); }
.project-kit-ethics-list .fa-xmark { color: #dc2626; }
.project-kit-faq { max-width: 960px; }

.learning-filter-bar { display: grid; grid-template-columns: 150px 190px 190px minmax(220px, 1fr) auto; gap: 14px; align-items: end; padding: 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.learning-filter-actions { display: flex; gap: 10px; align-items: center; }
.public-learning-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; align-items: end; padding: 18px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.public-learning-filter-actions { display: flex; gap: 10px; align-items: center; }
.learning-type-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; font-size: .78rem; font-weight: 900; letter-spacing: .02em; }
.learning-type-badge.type-course { color: #1d4ed8; background: #dbeafe; }
.learning-type-badge.type-tutorial { color: #047857; background: #d1fae5; }
.learning-type-badge.type-note { color: #92400e; background: #fef3c7; }
.learning-status-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 11px; font-size: .76rem; font-weight: 900; }
.learning-status-badge.status-draft { color: #475569; background: #e2e8f0; }
.learning-status-badge.status-review { color: #92400e; background: #fef3c7; }
.learning-status-badge.status-published { color: #047857; background: #d1fae5; }
.learning-status-badge.status-archived { color: #991b1b; background: #fee2e2; }
.quality-warning-list { display: flex; flex-wrap: wrap; gap: 6px; max-width: 260px; }
.quality-warning-list span { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 9px; color: #92400e; background: #fef3c7; font-size: .74rem; font-weight: 900; }
.quality-warning-list.wide { max-width: 620px; }
.quality-pass { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 10px; color: #047857; background: #d1fae5; font-size: .78rem; font-weight: 900; }
.quality-score-pill { display: inline-flex; align-items: baseline; gap: 5px; margin-bottom: 8px; border-radius: 999px; padding: 6px 10px; font-weight: 900; }
.quality-score-pill strong { font-size: .95rem; }
.quality-score-pill span { font-size: .72rem; text-transform: uppercase; }
.quality-score-pill.score-good { color: #047857; background: #d1fae5; }
.quality-score-pill.score-warn { color: #92400e; background: #fef3c7; }
.quality-score-pill.score-bad { color: #991b1b; background: #fee2e2; }
.seo-preview-panel { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.seo-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.seo-preview-head span:first-child { display: block; color: var(--green); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.seo-preview-head strong { display: block; color: var(--ink); font-weight: 900; }
.seo-preview-score { display: inline-flex; border-radius: 999px; padding: 7px 12px; font-size: .78rem; font-weight: 900; }
.seo-preview-score.is-good { color: #047857; background: #d1fae5; }
.seo-preview-score.is-warn { color: #92400e; background: #fef3c7; }
.seo-preview-score.is-bad { color: #991b1b; background: #fee2e2; }
.seo-google-preview { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.seo-google-preview small { color: #166534; font-weight: 700; }
.seo-google-preview h3 { margin: 6px 0; color: #1a0dab; font-size: 1.15rem; font-weight: 500; }
.seo-google-preview p { margin: 0; color: var(--muted); line-height: 1.55; }
.seo-social-preview { display: grid; grid-template-columns: 180px 1fr; gap: 16px; margin-top: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.seo-social-image { display: grid; place-items: center; min-height: 118px; background: var(--panel-soft); background-position: center; background-size: cover; color: var(--muted); font-weight: 900; }
.seo-social-image.has-image span { display: none; }
.seo-social-preview > div:last-child { padding: 16px 16px 16px 0; }
.seo-social-preview small { color: var(--muted); font-weight: 800; }
.seo-social-preview strong { display: block; margin: 5px 0; color: var(--ink); font-weight: 900; }
.seo-social-preview p { margin: 0; color: var(--muted); line-height: 1.5; }
.seo-preview-checklist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.seo-preview-checklist span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: var(--panel); font-size: .78rem; font-weight: 900; }
.seo-preview-checklist span.is-ok { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.learning-analytics-quality { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; align-items: center; }
.quality-meter { --score: 0; width: 180px; height: 180px; display: grid; place-items: center; border-radius: 999px; background: conic-gradient(#2563eb calc(var(--score) * 1%), #e5e7eb 0); position: relative; }
.quality-meter::after { content: ""; position: absolute; inset: 16px; border-radius: inherit; background: var(--panel); }
.quality-meter strong, .quality-meter span { position: relative; z-index: 1; display: block; text-align: center; }
.quality-meter strong { color: var(--ink); font-size: 2rem; font-weight: 950; line-height: 1; }
.quality-meter span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.learning-analytics-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.learning-analytics-facts div, .analytics-placeholder-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.learning-analytics-facts span, .analytics-placeholder-grid span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.learning-analytics-facts strong, .analytics-placeholder-grid strong { display: block; margin-top: 5px; color: var(--ink); font-size: 1.4rem; font-weight: 950; }
.learning-analytics-facts small, .analytics-placeholder-grid p { color: var(--muted); font-weight: 800; }
.analytics-placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analytics-placeholder-grid i { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 12px; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.analytics-placeholder-grid p { margin: 8px 0 0; line-height: 1.6; font-size: .9rem; }
.analytics-rank-list { display: grid; gap: 10px; }
.analytics-rank-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.analytics-rank-list span { color: var(--ink); font-weight: 900; }
.analytics-rank-list strong { color: var(--blue); font-size: 1.1rem; }
.analytics-rank-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--ink); }
.analytics-rank-list a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.insight-list span strong { display: block; color: var(--ink); font-size: .98rem; }
.insight-list span small { display: block; margin-top: 3px; color: var(--muted); font-weight: 800; line-height: 1.4; }
.insight-list em { min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 8px; background: #eff6ff; color: #1d4ed8; font-style: normal; font-weight: 950; }
.analytics-chip-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.analytics-chip-cloud span { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; color: var(--muted); background: var(--panel-soft); font-weight: 850; }
.analytics-chip-cloud strong { color: var(--ink); }
.learning-dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.learning-dashboard-grid a { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--ink); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.learning-dashboard-grid a:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .35); }
.learning-dashboard-grid span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.learning-dashboard-grid strong { display: block; margin-top: 6px; font-size: 1.65rem; font-weight: 900; }
.learning-quick-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.learning-recent-list { display: grid; gap: 10px; }
.learning-recent-list a { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-soft); text-decoration: none; }
.learning-recent-list strong { font-weight: 900; }
.learning-recent-list small { grid-column: 2; color: var(--muted); font-weight: 800; }
.admin-chip-row, .learning-tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-chip-row span, .learning-tag-row small, .learning-tag-row a { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); background: var(--panel-soft); font-size: .78rem; font-weight: 800; }
.learning-tag-row a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.learning-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.learning-card-meta span { color: var(--green); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.learning-card-meta small { color: var(--muted); font-weight: 800; }
.learning-feature-card { display: flex; flex-direction: column; }
.learning-feature-card .learning-tag-row { margin-top: auto; padding-top: 4px; }
.learning-card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--blue); font-weight: 900; text-decoration: none; }
.learning-card-link:hover { color: var(--ink); }
.homepage-learning-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.homepage-learning-column { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); }
.homepage-learning-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.homepage-learning-head i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.homepage-learning-head span { display: block; color: var(--green); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.homepage-learning-head strong { display: block; color: var(--ink); font-weight: 900; }
.homepage-learning-item { display: block; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.homepage-learning-item:hover strong { color: var(--blue); }
.homepage-learning-item span { display: block; color: var(--green); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.homepage-learning-item strong { display: block; margin: 4px 0; font-weight: 900; transition: color .18s ease; }
.homepage-learning-item small, .homepage-learning-empty { color: var(--muted); font-weight: 800; }
.homepage-learning-empty { padding: 14px 0; border-top: 1px solid var(--line); line-height: 1.6; }
.learning-hub-hero { padding-bottom: 64px; }
.learning-hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .52fr); gap: 48px; align-items: center; }
.learning-hub-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.learning-hub-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.84); box-shadow: 0 30px 90px rgba(15,23,42,.12); backdrop-filter: blur(16px); }
.learning-hub-panel div { padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.learning-hub-panel span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.learning-hub-panel strong { display: block; margin-top: 6px; color: var(--ink); font-size: 2rem; line-height: 1; font-weight: 950; }
.learning-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.learning-result-summary span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.learning-result-summary strong { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.learning-result-counts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.learning-result-counts a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: .84rem; font-weight: 850; }
.learning-result-counts a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.learning-result-counts strong { color: var(--ink); font-size: .9rem; }
.learning-results-grid { align-items: stretch; }
.premium-learning-card { position: relative; display: flex; flex-direction: column; gap: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.premium-learning-card:hover { transform: translateY(-4px); border-color: rgba(37,99,235,.34); box-shadow: 0 24px 60px var(--shadow-strong); }
.learning-progress-chip { align-self: flex-start; display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 10px; border: 1px solid var(--line); color: var(--muted); background: var(--panel-soft); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.learning-progress-chip.is-started, [data-learning-status].is-started { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.learning-progress-chip.is-completed, [data-learning-status].is-completed { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
.learning-progress-chip.is-new, [data-learning-status].is-new { color: var(--muted); background: var(--panel-soft); border-color: var(--line); }
.learning-card-media { display: block; color: inherit; }
.learning-card-placeholder { aspect-ratio: 16 / 9; display: grid; place-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 18px; color: #e5edf7; background: radial-gradient(circle at 20% 10%, rgba(96,165,250,.38), transparent 30%), linear-gradient(135deg, #0f172a, #1d4ed8 58%, #10b981); }
.learning-card-placeholder i { font-size: 2rem; }
.learning-card-placeholder span { display: block; font-size: .78rem; font-weight: 950; text-transform: uppercase; }
.premium-learning-card h3 { margin: 0; font-weight: 950; }
.premium-learning-card h3 a { color: var(--ink); }
.premium-learning-card h3 a:hover { color: var(--blue); }
.premium-learning-card p { color: var(--muted); line-height: 1.68; }
.learning-card-detail-row { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: .84rem; font-weight: 850; }
.learning-card-detail-row span { display: inline-flex; align-items: center; gap: 7px; }
.topic-strip { display: grid; grid-template-columns: minmax(220px, .35fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 0 0 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.topic-strip span, .topic-index-head span, .topic-card span, .topic-detail-stats span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.topic-strip strong, .topic-index-head strong { display: block; color: var(--ink); font-weight: 900; }
.topic-strip > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.topic-strip a { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: var(--muted); background: var(--panel-soft); font-size: .84rem; font-weight: 850; }
.topic-strip a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.topic-index-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.topic-card { display: flex; flex-direction: column; min-height: 230px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); box-shadow: 0 16px 40px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.topic-card:hover { color: var(--ink); transform: translateY(-4px); border-color: rgba(37,99,235,.34); box-shadow: 0 24px 60px var(--shadow-strong); }
.topic-card h2 { margin: 10px 0; font-size: 1.28rem; font-weight: 950; }
.topic-card p { color: var(--muted); line-height: 1.7; }
.topic-card div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.topic-card small { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); background: var(--panel-soft); font-weight: 850; }
.topic-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); gap: 12px; margin-top: 28px; }
.topic-detail-stats div { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 14px 34px var(--shadow); }
.topic-detail-stats strong { display: block; margin-top: 4px; color: var(--ink); font-size: 1.8rem; line-height: 1; font-weight: 950; }
.topic-sort-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.topic-sort-bar > div { min-width: 240px; }
.topic-next-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.topic-next-actions a { display: flex; align-items: center; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); box-shadow: 0 14px 34px var(--shadow); font-weight: 900; }
.topic-next-actions a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.topic-next-actions i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.topic-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.roadmap-index-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.roadmap-index-head span, .roadmap-card span, .roadmap-detail-stats span, .roadmap-stage-head span, .roadmap-stage-items span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.roadmap-index-head strong { display: block; color: var(--ink); font-weight: 900; }
.roadmap-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.roadmap-card { display: flex; flex-direction: column; min-height: 290px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel); box-shadow: 0 16px 40px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.roadmap-card:hover { color: var(--ink); transform: translateY(-4px); border-color: rgba(37,99,235,.34); box-shadow: 0 24px 60px var(--shadow-strong); }
.roadmap-card > i { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-size: 1.35rem; }
.roadmap-card h2 { margin: 10px 0; font-size: 1.34rem; font-weight: 950; }
.roadmap-card p { color: var(--muted); line-height: 1.7; }
.roadmap-card div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.roadmap-card small { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted); background: var(--panel-soft); font-weight: 850; }
.roadmap-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); gap: 12px; margin-top: 28px; }
.roadmap-detail-stats div { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 14px 34px var(--shadow); }
.roadmap-detail-stats strong { display: block; margin-top: 4px; color: var(--ink); font-size: 1.18rem; line-height: 1.2; font-weight: 950; }
.roadmap-progress-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 860px; margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.roadmap-progress-panel > div { flex: 1; min-width: 240px; }
.roadmap-progress-track, .roadmap-stage-progress { overflow: hidden; height: 8px; margin-top: 12px; border-radius: 999px; background: var(--panel-soft); border: 1px solid var(--line); }
.roadmap-progress-track span, .roadmap-stage-progress span { display: block; height: 100%; width: 0%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #10b981); transition: width .22s ease; }
.roadmap-stage-list { display: grid; gap: 20px; position: relative; }
.roadmap-stage { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.roadmap-stage-marker { position: sticky; top: 110px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(135deg, #0f172a, #2563eb); box-shadow: 0 18px 40px rgba(37,99,235,.22); font-weight: 950; }
.roadmap-stage-body { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); }
.roadmap-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.roadmap-stage-head h2 { margin: 5px 0 0; font-size: 1.35rem; font-weight: 950; }
.roadmap-stage-head small { color: var(--muted); font-weight: 850; white-space: nowrap; }
.roadmap-stage-progress { height: 6px; margin-top: 14px; }
.roadmap-stage-body > p { color: var(--muted); line-height: 1.7; margin: 14px 0 0; }
.roadmap-keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.roadmap-keywords a { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); background: var(--panel-soft); font-size: .78rem; font-weight: 850; }
.roadmap-keywords a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.roadmap-stage-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.roadmap-stage-items a { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-soft); }
.roadmap-stage-items a:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.roadmap-stage-items em { display: inline-flex; margin-bottom: 8px; border-radius: 999px; padding: 4px 8px; border: 1px solid var(--line); font-style: normal; color: var(--muted); background: var(--panel); font-size: .7rem; font-weight: 950; text-transform: uppercase; }
.roadmap-stage.is-completed .roadmap-stage-marker { background: linear-gradient(135deg, #047857, #10b981); }
.roadmap-stage-items strong { display: block; margin: 4px 0; font-weight: 900; }
.roadmap-stage-items small, .roadmap-stage-empty { color: var(--muted); font-weight: 800; }
.roadmap-stage-empty { margin-top: 18px; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-soft); }
.roadmap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.roadmap-grid article, .roadmap-grid > a { display: block; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); box-shadow: 0 16px 40px var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.roadmap-grid > a:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); box-shadow: 0 24px 60px var(--shadow-strong); }
.roadmap-grid span { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 16px; border-radius: 8px; color: #fff; background: #0f172a; font-weight: 900; }
.roadmap-grid h3 { font-size: 1.08rem; font-weight: 900; }
.roadmap-grid p { color: var(--muted); line-height: 1.7; }
.roadmap-grid div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.roadmap-grid small { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; color: var(--muted); background: var(--panel-soft); font-weight: 900; }
.learning-empty-state { grid-column: 1 / -1; padding: 42px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); }
.learning-empty-state i { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 8px; color: #1d4ed8; background: #eff6ff; font-size: 1.35rem; }
.learning-empty-state span { color: var(--green); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.learning-empty-state h3 { margin-top: 8px; font-weight: 900; }
.learning-empty-state p { color: var(--muted); }
.learning-progress-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 860px; margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.learning-progress-panel span, .roadmap-progress-panel span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.learning-progress-panel strong, .roadmap-progress-panel strong { display: block; color: var(--ink); font-size: 1.2rem; font-weight: 950; }
.learning-progress-panel small, .roadmap-progress-panel small { display: block; color: var(--muted); font-weight: 800; }
.learning-progress-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.learning-feedback-panel { display: grid; grid-template-columns: minmax(220px, .34fr) minmax(0, 1fr); gap: 18px; margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.learning-feedback-panel span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.learning-feedback-panel strong { display: block; color: var(--ink); font-size: 1.18rem; font-weight: 950; }
.learning-feedback-panel small { display: block; color: var(--muted); font-weight: 800; }
.learning-feedback-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.learning-feedback-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-soft); font-weight: 900; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.learning-feedback-actions button:hover { transform: translateY(-2px); border-color: rgba(37,99,235,.35); }
.learning-feedback-actions button.is-selected { color: #047857; border-color: #a7f3d0; background: #d1fae5; }
.my-learning-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 12px; margin-top: 28px; }
.my-learning-summary div { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.78); box-shadow: 0 14px 34px var(--shadow); }
.my-learning-summary span, .my-learning-toolbar span, .my-learning-item span { display: block; color: var(--blue); font-size: .76rem; font-weight: 950; text-transform: uppercase; }
.my-learning-summary strong { display: block; color: var(--ink); font-size: 1.8rem; line-height: 1; font-weight: 950; }
.my-learning-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.my-learning-toolbar strong { display: block; color: var(--ink); font-weight: 900; }
.my-learning-toolbar > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.my-learning-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.my-learning-panel { padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); }
.my-learning-list { display: grid; gap: 10px; }
.my-learning-item { display: block; padding: 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-soft); }
.my-learning-item:hover { color: var(--blue); border-color: rgba(37,99,235,.35); }
.my-learning-item strong { display: block; margin: 4px 0; font-weight: 900; }
.my-learning-item small, .my-learning-list-empty { color: var(--muted); font-weight: 800; }
.my-learning-list-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel-soft); }
.my-learning-empty { margin-top: 20px; }
.learning-recommendations { margin-top: 24px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 16px 40px var(--shadow); }
.compact-heading { margin-bottom: 18px; }
.compact-heading h2 { font-size: 1.55rem; }
.recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.recommendation-card { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--panel-soft); transition: transform .18s ease, border-color .18s ease; }
.recommendation-card:hover { color: var(--blue); border-color: rgba(37,99,235,.35); transform: translateY(-2px); }
.recommendation-card.is-completed { display: none; }
.recommendation-card span { display: block; color: var(--blue); font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.recommendation-card strong { display: block; margin: 6px 0; font-weight: 950; }
.recommendation-card small { color: var(--muted); font-weight: 850; }
.website-health-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.website-health-summary a { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px 12px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); color: var(--ink); transition: transform .18s ease, border-color .18s ease; }
.website-health-summary a:hover { transform: translateY(-3px); border-color: rgba(37,99,235,.35); }
.website-health-summary i { grid-row: span 2; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: #1d4ed8; background: #eff6ff; }
.website-health-summary span { font-weight: 950; }
.website-health-summary strong { font-size: 1.55rem; font-weight: 950; text-align: right; }
.website-health-summary small { grid-column: 2 / -1; color: var(--muted); font-weight: 800; }
.website-health-filter-row { display: flex; flex-wrap: wrap; gap: 10px; }
.website-health-filter-row .btn.active { background: #111827; border-color: #111827; color: #fff; }
.health-issue-chip { border-radius: 999px; }
.health-issue-chip b { font-weight: 950; }
.website-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.system-health-list { display: grid; gap: 10px; }
.system-health-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.system-health-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; color: #2563eb; background: #eff6ff; }
.system-health-item strong { display: block; font-weight: 950; }
.system-health-item small { display: block; color: var(--muted); font-weight: 750; line-height: 1.45; }
.system-health-item .badge { justify-self: end; }
.rendered-seo-meta { max-width: 420px; }
.rendered-seo-meta strong { display: block; max-width: 100%; color: var(--ink); font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rendered-seo-meta small { display: -webkit-box; color: var(--muted); font-weight: 750; line-height: 1.45; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.link-image-target { max-width: 440px; }
.link-image-target span { display: block; color: var(--muted); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-issue-critical { color: #991b1b !important; background: #fee2e2 !important; }
.health-issue-high { color: #92400e !important; background: #fef3c7 !important; }
.health-issue-medium { color: #075985 !important; background: #e0f2fe !important; }
.health-issue-low { color: #475569 !important; background: #e2e8f0 !important; }
.website-health-report { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: .86rem; line-height: 1.6; }
.js-health-row.is-hidden { display: none; }
.recommendation-empty { margin-top: 12px; }
.learning-card-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-bottom: 18px; background: var(--panel-soft); }
.admin-learning-thumb { width: 82px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); margin-right: 12px; vertical-align: middle; }
.learning-image-preview { display: inline-flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); }
.learning-image-preview img { width: 160px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; }
.learning-image-preview span { color: var(--muted); font-weight: 800; }
.learning-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--muted); font-size: .92rem; font-weight: 800; }
.learning-breadcrumb a { color: var(--muted); text-decoration: none; }
.learning-breadcrumb a:hover { color: var(--blue); }
.learning-breadcrumb strong { color: var(--ink); }
.learning-reader-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.learning-reader-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.learning-author-card, .learning-toc, .learning-meta-strip, .learning-prev-next a { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 14px 34px var(--shadow); }
.learning-author-card { padding: 20px; }
.learning-author-card span, .learning-meta-strip span, .learning-prev-next span { display: block; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.learning-author-card strong { display: block; margin-top: 6px; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.learning-author-card small { color: var(--muted); font-weight: 800; }
.learning-toc { padding: 18px; }
.learning-toc strong { display: block; margin-bottom: 12px; color: var(--ink); font-size: .95rem; font-weight: 900; }
.learning-toc a { display: block; padding: 8px 0; color: var(--muted); text-decoration: none; font-weight: 800; border-top: 1px solid var(--line); }
.learning-toc a:hover { color: var(--blue); }
.learning-toc a.is-sub { padding-left: 14px; font-size: .9rem; }
.learning-reader-main { max-width: none; min-width: 0; }
.learning-meta-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 22px 0; overflow: hidden; }
.learning-meta-strip div { padding: 16px; border-right: 1px solid var(--line); }
.learning-meta-strip div:last-child { border-right: 0; }
.learning-meta-strip strong { display: block; margin-top: 4px; color: var(--ink); font-weight: 900; }
.learning-prev-next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.learning-prev-next a { display: block; padding: 18px; color: var(--ink); text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.learning-prev-next a:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, .35); }
.learning-prev-next strong { display: block; margin-top: 6px; font-weight: 900; }
.code-copy-wrap { position: relative; margin: 22px 0; }
.code-copy-wrap pre { margin: 0; padding-top: 48px; border-radius: 8px; }
.code-copy-button { position: absolute; top: 10px; right: 10px; z-index: 1; border: 1px solid rgba(148, 163, 184, .34); border-radius: 6px; padding: 6px 10px; background: rgba(15, 23, 42, .88); color: #fff; font-size: .82rem; font-weight: 900; }
.code-copy-button:hover { background: #2563eb; }

[data-theme="dark"] .auth-panel,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .case-story,
[data-theme="dark"] .case-card,
[data-theme="dark"] .portfolio-stat-row div,
[data-theme="dark"] .case-facts div,
[data-theme="dark"] .case-feature-grid article,
[data-theme="dark"] .case-delivery-panel,
[data-theme="dark"] .rich-editor,
[data-theme="dark"] .rich-toolbar button {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: 0 14px 34px var(--shadow);
}

[data-theme="dark"] .auth-page {
  --ink: #e5edf7;
  --muted: #9aa8bd;
  --line: #243247;
  --panel: #111827;
  --panel-soft: #162033;
  --topbar-bg: #0d1424;
  --input-bg: #0b1220;
  --input-text: #e5edf7;
  background: linear-gradient(180deg, #080d18 0%, #0b1220 100%);
}

[data-theme="dark"] .auth-page::before {
  background: linear-gradient(90deg, rgba(96,165,250,.08) 1px, transparent 1px), linear-gradient(180deg, rgba(96,165,250,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15,23,42,.8), rgba(8,13,24,.58));
  background-size: 58px 58px, 58px 58px, auto;
}

[data-theme="dark"] .auth-page .portal-topbar,
[data-theme="dark"] .auth-page .auth-panel,
[data-theme="dark"] .auth-page .auth-card {
  background: rgba(17,24,39,.92);
  border-color: #243247;
  color: #e5edf7;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .32);
}

[data-theme="dark"] .auth-page .auth-demo-note,
[data-theme="dark"] .auth-page .auth-icon {
  background: rgba(96,165,250,.1);
  border-color: rgba(147,197,253,.2);
  color: #cbd5e1;
}

[data-theme="dark"] .auth-page .btn-dark {
  background: #e5edf7;
  border-color: #e5edf7;
  color: #0b1220;
}

[data-theme="dark"] .offline-shell { background: radial-gradient(circle at 18% 18%, rgba(37,99,235,.18), transparent 32%), radial-gradient(circle at 82% 8%, rgba(20,184,166,.14), transparent 34%), linear-gradient(180deg, #090f1c, #0d1628); }
[data-theme="dark"] .offline-card { background: rgba(15, 23, 42, .92); border-color: rgba(148, 163, 184, .22); box-shadow: 0 30px 100px rgba(0,0,0,.34); }
[data-theme="dark"] .offline-icon { background: rgba(37,99,235,.14); border-color: rgba(96,165,250,.25); color: #93c5fd; }
[data-theme="dark"] .offline-status { background: rgba(245,158,11,.12); border-color: rgba(251,191,36,.25); color: #fde68a; }
[data-theme="dark"] .offline-hints span { background: rgba(15,23,42,.68); border-color: rgba(148,163,184,.18); }

[data-theme="dark"] .hero-copy,
[data-theme="dark"] .page-hero p:not(.eyebrow),
[data-theme="dark"] .feature-card p,
[data-theme="dark"] .portfolio-grid p,
[data-theme="dark"] .price-card p,
[data-theme="dark"] .project-hero p:not(.eyebrow),
[data-theme="dark"] .client-hero p:not(.eyebrow),
[data-theme="dark"] .case-detail-copy p:not(.eyebrow),
[data-theme="dark"] .case-story p,
[data-theme="dark"] .case-feature-grid p,
[data-theme="dark"] .case-delivery-panel p:not(.eyebrow),
[data-theme="dark"] .case-delivery-list span,
[data-theme="dark"] .blog-content,
[data-theme="dark"] .blog-author-card p,
[data-theme="dark"] .homepage-article-body p,
[data-theme="dark"] .lead-summary,
[data-theme="dark"] .lead-activity-card p,
[data-theme="dark"] .lead-activity-summary p,
[data-theme="dark"] .lead-print-copy,
[data-theme="dark"] .lead-print-timeline p,
[data-theme="dark"] .lead-settings-template-grid p,
[data-theme="dark"] .lead-template-preview-output p,
[data-theme="dark"] .admin-lead-message p,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .timeline-item p,
[data-theme="dark"] .support-description p,
[data-theme="dark"] .client-project-card p,
[data-theme="dark"] .hosting-tile p {
  color: #b6c3d6;
}

[data-theme="dark"] .section-band,
[data-theme="dark"] .portfolio-hero,
[data-theme="dark"] .case-detail-hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .blog-detail-hero,
[data-theme="dark"] .hero-section {
  background: var(--soft);
}

[data-theme="dark"] .logo-cloud,
[data-theme="dark"] .hero-kicker span,
[data-theme="dark"] .hero-trust-row span,
[data-theme="dark"] .homepage-trust-strip span,
[data-theme="dark"] .stats-strip div,
[data-theme="dark"] .premium-intro-panel,
[data-theme="dark"] .premium-intro-grid article,
[data-theme="dark"] .about-split,
[data-theme="dark"] .skills-grid article,
[data-theme="dark"] .technology-expertise-grid article,
[data-theme="dark"] .experience-timeline article,
[data-theme="dark"] .responsibility-grid article,
[data-theme="dark"] .career-panel,
[data-theme="dark"] .career-steps div,
[data-theme="dark"] .testimonial-grid article,
[data-theme="dark"] .faq-list details,
[data-theme="dark"] .process-grid article,
[data-theme="dark"] .tech-strip span,
[data-theme="dark"] .premium-service-card,
[data-theme="dark"] .proof-panel {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .logo-cloud span,
[data-theme="dark"] .about-split p:not(.eyebrow),
[data-theme="dark"] .skills-grid p,
[data-theme="dark"] .technology-expertise-grid p,
[data-theme="dark"] .experience-timeline p,
[data-theme="dark"] .responsibility-grid p,
[data-theme="dark"] .career-panel p:not(.eyebrow),
[data-theme="dark"] .career-steps p,
[data-theme="dark"] .testimonial-grid p,
[data-theme="dark"] .faq-list p,
[data-theme="dark"] .process-grid p,
[data-theme="dark"] .premium-service-card p,
[data-theme="dark"] .premium-intro-grid p,
[data-theme="dark"] .proof-grid span {
  color: #b6c3d6;
}

[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .page-hero h1,
[data-theme="dark"] .about-split h2,
[data-theme="dark"] .career-panel h2,
[data-theme="dark"] .faq-list summary,
[data-theme="dark"] .hero-trust-row span,
[data-theme="dark"] .hero-kicker span,
[data-theme="dark"] .tech-strip span {
  color: var(--ink);
}

[data-theme="dark"] .hero-product {
  background: rgba(17, 24, 39, .86);
  border-color: var(--line);
}

[data-theme="dark"] .hero-product-toolbar,
[data-theme="dark"] .portfolio-card-meta strong,
[data-theme="dark"] .portfolio-tech-chips small,
[data-theme="dark"] .proof-intro {
  color: #b6c3d6;
}

[data-theme="dark"] .hero-product-body .metric-row,
[data-theme="dark"] .portfolio-tech-chips small,
[data-theme="dark"] .learning-filter-bar,
[data-theme="dark"] .public-learning-filter,
[data-theme="dark"] .learning-author-card,
[data-theme="dark"] .learning-toc,
[data-theme="dark"] .learning-meta-strip,
[data-theme="dark"] .learning-prev-next a,
[data-theme="dark"] .learning-dashboard-grid a,
[data-theme="dark"] .learning-recent-list a,
[data-theme="dark"] .homepage-learning-column,
[data-theme="dark"] .project-kit-home-grid a,
[data-theme="dark"] .learning-hub-panel,
[data-theme="dark"] .learning-hub-panel div,
[data-theme="dark"] .learning-result-summary,
[data-theme="dark"] .learning-result-counts a,
[data-theme="dark"] .topic-strip,
[data-theme="dark"] .topic-strip a,
[data-theme="dark"] .topic-index-head,
[data-theme="dark"] .topic-card,
[data-theme="dark"] .topic-card small,
[data-theme="dark"] .topic-detail-stats div,
[data-theme="dark"] .topic-sort-bar,
[data-theme="dark"] .topic-next-actions a,
[data-theme="dark"] .roadmap-index-head,
[data-theme="dark"] .roadmap-card,
[data-theme="dark"] .roadmap-card small,
[data-theme="dark"] .roadmap-detail-stats div,
[data-theme="dark"] .roadmap-progress-panel,
[data-theme="dark"] .roadmap-stage-body,
[data-theme="dark"] .roadmap-keywords a,
[data-theme="dark"] .roadmap-stage-items a,
[data-theme="dark"] .roadmap-stage-items em,
[data-theme="dark"] .roadmap-stage-empty,
[data-theme="dark"] .roadmap-grid article,
[data-theme="dark"] .roadmap-grid > a,
[data-theme="dark"] .roadmap-grid small,
[data-theme="dark"] .learning-empty-state,
[data-theme="dark"] .seo-preview-panel,
[data-theme="dark"] .seo-google-preview,
[data-theme="dark"] .seo-social-preview,
[data-theme="dark"] .seo-preview-checklist span,
[data-theme="dark"] .learning-analytics-facts div,
[data-theme="dark"] .analytics-placeholder-grid article,
[data-theme="dark"] .analytics-rank-list div,
[data-theme="dark"] .analytics-rank-list a,
[data-theme="dark"] .analytics-chip-cloud span,
[data-theme="dark"] .admin-chip-row span,
[data-theme="dark"] .learning-tag-row small,
[data-theme="dark"] .learning-tag-row a,
[data-theme="dark"] .learning-progress-panel,
[data-theme="dark"] .learning-feedback-panel,
[data-theme="dark"] .learning-feedback-actions button,
[data-theme="dark"] .my-learning-summary div,
[data-theme="dark"] .my-learning-toolbar,
[data-theme="dark"] .my-learning-panel,
[data-theme="dark"] .my-learning-item,
[data-theme="dark"] .my-learning-list-empty,
[data-theme="dark"] .learning-recommendations,
[data-theme="dark"] .recommendation-card,
[data-theme="dark"] .website-health-summary a,
[data-theme="dark"] .system-health-item,
[data-theme="dark"] .project-kit-proof span,
[data-theme="dark"] .project-kit-card,
[data-theme="dark"] .project-kit-snapshot,
[data-theme="dark"] .project-kit-snapshot div:not(.project-kit-snapshot-fallback),
[data-theme="dark"] .project-kit-content,
[data-theme="dark"] .project-kit-module-grid article,
[data-theme="dark"] .project-kit-ethics-panel,
[data-theme="dark"] .project-kit-ethics-list span,
[data-theme="dark"] .project-kit-detail-panels article,
[data-theme="dark"] .learning-image-preview,
[data-theme="dark"] .lead-kit-preview,
[data-theme="dark"] .lead-kit-preview small,
[data-theme="dark"] .admin-lead-kit-panel,
[data-theme="dark"] .admin-lead-kit-grid div,
[data-theme="dark"] .admin-lead-message,
[data-theme="dark"] .blog-author-card,
[data-theme="dark"] .blog-reader-card,
[data-theme="dark"] .blog-detail-meta span,
[data-theme="dark"] .homepage-article-card,
[data-theme="dark"] .homepage-article-meta small {
  background: var(--panel-soft);
  border-color: var(--line);
}

[data-theme="dark"] .admin-chip-row span,
[data-theme="dark"] .learning-tag-row small,
[data-theme="dark"] .learning-tag-row a,
[data-theme="dark"] .learning-breadcrumb,
[data-theme="dark"] .learning-breadcrumb a,
[data-theme="dark"] .learning-card-meta small,
[data-theme="dark"] .learning-image-preview span,
[data-theme="dark"] .learning-author-card span,
[data-theme="dark"] .learning-author-card small,
[data-theme="dark"] .learning-meta-strip span,
[data-theme="dark"] .learning-prev-next span,
[data-theme="dark"] .learning-toc a,
[data-theme="dark"] .learning-dashboard-grid span,
[data-theme="dark"] .learning-recent-list small,
[data-theme="dark"] .homepage-learning-item small,
[data-theme="dark"] .homepage-learning-empty,
[data-theme="dark"] .project-kit-home-panel p:not(.eyebrow),
[data-theme="dark"] .project-kit-home-grid small,
[data-theme="dark"] .learning-hub-panel span,
[data-theme="dark"] .learning-result-counts a,
[data-theme="dark"] .premium-learning-card p,
[data-theme="dark"] .learning-card-detail-row,
[data-theme="dark"] .learning-progress-panel small,
[data-theme="dark"] .roadmap-progress-panel small,
[data-theme="dark"] .learning-feedback-panel small,
[data-theme="dark"] .my-learning-item small,
[data-theme="dark"] .my-learning-list-empty,
[data-theme="dark"] .recommendation-card small,
[data-theme="dark"] .website-health-summary small,
[data-theme="dark"] .website-health-report,
[data-theme="dark"] .project-kit-card p,
[data-theme="dark"] .project-kit-deliverables p,
[data-theme="dark"] .project-kit-content p:not(.eyebrow),
[data-theme="dark"] .project-kit-content .rich-content,
[data-theme="dark"] .project-kit-module-grid p,
[data-theme="dark"] .project-kit-ethics-panel p:not(.eyebrow),
[data-theme="dark"] .project-kit-ethics-list span,
[data-theme="dark"] .premium-check-list li,
[data-theme="dark"] .topic-strip a,
[data-theme="dark"] .topic-card p,
[data-theme="dark"] .topic-card small,
[data-theme="dark"] .roadmap-card p,
[data-theme="dark"] .roadmap-card small,
[data-theme="dark"] .roadmap-stage-head small,
[data-theme="dark"] .roadmap-stage-body > p,
[data-theme="dark"] .roadmap-keywords a,
[data-theme="dark"] .roadmap-stage-items small,
[data-theme="dark"] .roadmap-stage-items em,
[data-theme="dark"] .roadmap-stage-empty,
[data-theme="dark"] .roadmap-grid p,
[data-theme="dark"] .roadmap-grid small,
[data-theme="dark"] .learning-empty-state p,
[data-theme="dark"] .seo-google-preview p,
[data-theme="dark"] .seo-social-preview small,
[data-theme="dark"] .seo-social-preview p,
[data-theme="dark"] .seo-preview-checklist span,
[data-theme="dark"] .learning-analytics-facts small,
[data-theme="dark"] .analytics-placeholder-grid p,
[data-theme="dark"] .analytics-chip-cloud span,
[data-theme="dark"] .homepage-article-meta small,
[data-theme="dark"] .lead-kit-preview small,
[data-theme="dark"] .admin-lead-message p {
  color: #b6c3d6;
}

[data-theme="dark"] .insight-list span strong { color: #f8fafc; }
[data-theme="dark"] .insight-list span small { color: #b6c3d6; }
[data-theme="dark"] .insight-list em { background: rgba(37,99,235,.18); color: #93c5fd; }
[data-theme="dark"] .blog-author-card strong,
[data-theme="dark"] .homepage-article-body h3,
[data-theme="dark"] .project-kit-module-grid h3,
[data-theme="dark"] .project-kit-content h2,
[data-theme="dark"] .project-kit-ethics-panel h2,
[data-theme="dark"] .lead-kit-preview strong,
[data-theme="dark"] .admin-lead-kit-grid strong,
[data-theme="dark"] .admin-lead-kit-head strong { color: var(--ink); }
[data-theme="dark"] .admin-project-kit-pill { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.28); color: #fbbf24; }
[data-theme="dark"] .blog-tag-row a { background: rgba(37,99,235,.14); border-color: rgba(147,197,253,.2); color: #93c5fd; }

[data-theme="dark"] .premium-service-card i {
  background: #0f2748;
  color: #93c5fd;
}

[data-theme="dark"] .stats-strip i {
  background: #0f2748;
  color: #93c5fd;
}

[data-theme="dark"] .premium-intro-panel {
  background: linear-gradient(135deg, #111827, #0b1220);
}

[data-theme="dark"] .price-card strong {
  color: #b6c3d6;
}

[data-theme="dark"] .premium-proof-panel {
  background: linear-gradient(135deg, #111827, #0b1220);
}

[data-theme="dark"] .project-hero,
[data-theme="dark"] .client-hero {
  background: linear-gradient(135deg, #111827, #0f2748);
}

[data-theme="dark"] .project-facts div,
[data-theme="dark"] .kanban-column,
[data-theme="dark"] .task-card,
[data-theme="dark"] .task-mini-list a,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .invoice-total-box div,
[data-theme="dark"] .invoice-print-total div,
[data-theme="dark"] .report-facts div,
[data-theme="dark"] .report-list div,
[data-theme="dark"] .notification-summary div,
[data-theme="dark"] .audit-detail-grid div,
[data-theme="dark"] .audit-detail-section,
[data-theme="dark"] .document-row,
[data-theme="dark"] .client-project-card,
[data-theme="dark"] .client-list-row,
[data-theme="dark"] .hosting-tile,
[data-theme="dark"] .ticket-status-strip div,
[data-theme="dark"] .support-description,
[data-theme="dark"] .invoice-client-box div,
[data-theme="dark"] .account-summary div,
[data-theme="dark"] .case-section-row div,
[data-theme="dark"] .case-delivery-list div,
[data-theme="dark"] .brand-preview-card,
[data-theme="dark"] .rich-toolbar {
  background: var(--panel-soft);
  border-color: var(--line);
}

[data-theme="dark"] .notification-card,
[data-theme="dark"] .audit-item {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .support-note {
  background: #0f2748;
  border-color: #1d4ed8;
  color: #bfdbfe;
}

[data-theme="dark"] .brand-lockup.text-dark,
[data-theme="dark"] .brand-lockup.text-dark:hover,
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-brand:hover,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .btn-outline-dark {
  color: var(--ink) !important;
}

[data-theme="dark"] .public-footer,
[data-theme="dark"] .public-footer span,
[data-theme="dark"] .footer-disclaimer {
  color: #b6c3d6;
}

[data-theme="dark"] .premium-footer {
  background: #060a12;
}

[data-theme="dark"] .legal-content article,
[data-theme="dark"] .legal-summary {
  background: var(--panel);
  border-color: var(--line);
}

[data-theme="dark"] .legal-content p {
  color: #b6c3d6;
}

[data-theme="dark"] .personal-disclaimer {
  background: var(--panel);
  border-color: var(--line);
  color: #b6c3d6;
}

[data-theme="dark"] .personal-disclaimer strong {
  color: var(--ink);
}

[data-theme="dark"] .btn-dark {
  background: #e5edf7;
  border-color: #e5edf7;
  color: #0b1220;
}

[data-theme="dark"] .btn-dark:hover {
  background: #cbd5e1;
  border-color: #cbd5e1;
  color: #0b1220;
}

/* Premium public website refinement layer */
.public-nav {
  min-height: 82px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .04);
}

.public-nav .navbar {
  min-height: 82px;
}

.public-nav .nav-link {
  position: relative;
  padding: 10px 8px !important;
}

.public-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #10b981);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.public-nav .nav-link:hover::after,
.public-nav .nav-link:focus::after,
.public-nav .nav-link.active::after {
  transform: scaleX(1);
}

.btn {
  border-radius: 8px;
  font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .24);
}

.btn-dark {
  background: #111827;
  border-color: #111827;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.hero-section {
  padding-bottom: 58px;
}

.hero-copy-panel {
  padding-top: 12px;
}

.hero-section h1 {
  text-wrap: balance;
}

.hero-copy {
  text-wrap: pretty;
}

.hero-product {
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  transition: transform .24s ease, box-shadow .24s ease;
}

.hero-product:hover {
  transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px);
  box-shadow: 0 36px 110px rgba(15, 23, 42, .2);
}

.stats-strip {
  margin-top: 64px;
}

.stats-strip div::after,
.premium-service-card::after,
.portfolio-premium-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.38), transparent 38%);
  opacity: .56;
}

.section-band {
  background: linear-gradient(180deg, var(--soft), #ffffff);
}

.section-heading {
  margin-bottom: 34px;
}

.section-heading h2,
.about-split h2,
.career-panel h2,
.proof-panel h2,
.contact-panel h2 {
  text-wrap: balance;
}

.about-split,
.career-panel,
.proof-panel,
.premium-intro-panel,
.contact-panel {
  border-color: rgba(148, 163, 184, .28);
}

.about-split {
  position: relative;
  overflow: hidden;
}

.about-split::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #2563eb, #10b981);
}

.skills-grid article,
.technology-expertise-grid article,
.experience-timeline article,
.responsibility-grid article,
.testimonial-grid article,
.process-grid article,
.premium-service-card,
.portfolio-grid article,
.price-card {
  border-color: rgba(148, 163, 184, .28);
}

.skills-grid article:hover,
.technology-expertise-grid article:hover,
.experience-timeline article:hover,
.responsibility-grid article:hover,
.testimonial-grid article:hover,
.process-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(15, 23, 42, .11);
}

.skills-grid article,
.experience-timeline article,
.responsibility-grid article,
.testimonial-grid article,
.process-grid article {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.premium-service-card {
  position: relative;
  overflow: hidden;
}

.premium-service-card:nth-child(1),
.premium-service-card:nth-child(5) {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
}

.portfolio-grid {
  align-items: stretch;
}

.portfolio-grid article {
  border-color: rgba(148, 163, 184, .3);
}

.portfolio-thumb-wrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.portfolio-card-actions .btn {
  flex: 0 0 auto;
}

.premium-price-grid .price-card {
  position: relative;
  overflow: hidden;
}

.premium-price-grid .price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #10b981);
}

.contact-form {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 70px rgba(0, 0, 0, .16);
}

.contact-form .form-control,
.contact-form .form-select {
  min-height: 48px;
  border-radius: 8px;
}

.contact-form textarea.form-control {
  min-height: 134px;
}

.public-footer {
  background: linear-gradient(180deg, var(--panel), var(--panel-soft));
}

.premium-footer {
  padding: 0;
  border-top: 0;
  background: #0b1220;
  color: #cbd5e1;
}

.footer-cta {
  position: relative;
  overflow: hidden;
  padding: 82px 0;
  background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, .32), transparent 34%), linear-gradient(135deg, rgba(6, 10, 18, .94), rgba(15, 23, 42, .9)), #0b1220;
  border-top: 1px solid rgba(148, 163, 184, .18);
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}

.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
  pointer-events: none;
}

.footer-cta .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.footer-cta h2 {
  max-width: 920px;
  color: #f8fafc;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: 1;
  font-weight: 950;
  margin: 0;
  text-wrap: balance;
}

.footer-cta p:not(.eyebrow) {
  max-width: 760px;
  color: #cbd5e1;
  font-size: 1.12rem;
  line-height: 1.72;
  margin: 18px 0 0;
}

.footer-main {
  padding: 44px 0 28px;
}

.footer-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}

.footer-logo {
  width: min(240px, 56vw);
  max-height: 70px;
  object-fit: contain;
  object-position: left center;
}

.premium-footer .theme-logo-light.has-dark {
  display: none;
}

.premium-footer .theme-logo-dark {
  display: block;
}

.premium-footer .footer-logo:not(.theme-logo-dark) {
  filter: brightness(0) invert(1);
}

.footer-brand strong {
  color: #f8fafc;
  font-size: 1.3rem;
}

.footer-brand p {
  max-width: 560px;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0;
  text-align: right;
}

.footer-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  padding: 34px 0;
}

.footer-link-grid h3 {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 950;
  margin-bottom: 16px;
}

.footer-link-grid a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  color: #a8b4c7;
  font-weight: 700;
  margin: 0 0 12px;
  transition: color .16s ease, transform .16s ease;
}

.footer-link-grid a:hover {
  color: #f8fafc;
  transform: translateX(3px);
}

.footer-link-grid i {
  width: 18px;
  color: #dbeafe;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(148, 163, 184, .18);
}

.premium-footer span,
.footer-bottom span {
  color: #94a3b8;
}

[data-theme="dark"] .public-nav {
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
}

[data-theme="dark"] .public-nav .nav-link {
  color: #dbeafe !important;
}

[data-theme="dark"] .public-nav .nav-link:hover,
[data-theme="dark"] .public-nav .nav-link:focus,
[data-theme="dark"] .public-nav .nav-link.active {
  color: #ffffff !important;
}

[data-theme="dark"] .public-dropdown {
  background: #0f172a;
  border-color: var(--line);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

[data-theme="dark"] .public-dropdown .dropdown-item {
  color: #e5edf7;
}

[data-theme="dark"] .public-dropdown .dropdown-item:hover,
[data-theme="dark"] .public-dropdown .dropdown-item:focus,
[data-theme="dark"] .public-dropdown .dropdown-item.active {
  background: #162033;
  color: #ffffff;
}

[data-theme="dark"] .public-dropdown .dropdown-item i {
  background: rgba(96, 165, 250, .14);
  color: #93c5fd;
}

[data-theme="dark"] .public-dropdown .dropdown-item.active i {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #10b981);
}

[data-theme="dark"] .section-band {
  background: linear-gradient(180deg, var(--soft), var(--body-bg));
}

[data-theme="dark"] .premium-service-card:nth-child(1),
[data-theme="dark"] .premium-service-card:nth-child(5) {
  background: linear-gradient(180deg, #111827, #0b1220);
}

[data-theme="dark"] .premium-capability-strip a {
  background: rgba(17, 24, 39, .82);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .dashboard-preview-footer span {
  color: #cbd5e1;
}

[data-theme="dark"] .dashboard-module-list i,
[data-theme="dark"] .premium-capability-strip i,
[data-theme="dark"] .website-health-summary i,
[data-theme="dark"] .system-health-icon {
  background: rgba(96, 165, 250, .14);
  color: #93c5fd;
}

[data-theme="dark"] .stats-strip div::after,
[data-theme="dark"] .premium-service-card::after,
[data-theme="dark"] .portfolio-premium-card::after {
  opacity: .1;
}

@media (max-width: 992px) {
  .workspace-sidebar { position: static; width: auto; }
  .workspace-shell { margin-left: 0; }
  .profile-grid, .profile-two-column { grid-template-columns: 1fr; }
  .profile-summary-panel { position: static; }
  .metric-grid, .stats-strip, .homepage-trust-strip, .portfolio-grid, .case-study-grid, .portfolio-stat-row, .about-split, .skills-grid, .technology-expertise-grid, .experience-timeline, .responsibility-grid, .career-panel, .career-steps, .testimonial-grid, .case-feature-grid, .case-delivery-panel, .process-grid, .premium-service-grid, .premium-price-grid, .premium-intro-panel, .premium-intro-grid, .proof-panel, .contact-panel, .hero-premium-grid, .premium-capability-strip, .project-kit-home-panel, .project-kit-request-fields, .project-kit-admin-preview, .dashboard-preview-main, .legal-layout, .footer-link-grid, .learning-filter-bar, .public-learning-filter, .learning-reader-layout, .learning-meta-strip, .learning-prev-next, .analytics-grid, .learning-analytics-quality, .learning-analytics-facts, .analytics-placeholder-grid, .learning-dashboard-grid, .homepage-learning-stack, .homepage-article-grid, .blog-detail-grid, .learning-hub-hero-grid, .learning-hub-panel, .learning-feedback-panel, .learning-feedback-actions, .my-learning-summary, .my-learning-grid, .recommendation-grid, .website-health-summary, .website-system-grid, .topic-strip, .topic-grid, .topic-detail-stats, .topic-next-actions, .roadmap-card-grid, .roadmap-detail-stats, .roadmap-stage, .roadmap-stage-items, .roadmap-grid, .seo-social-preview, .project-kit-grid, .project-kit-detail-grid, .project-kit-content-grid, .project-kit-learning-grid, .project-kit-module-grid, .project-kit-ethics-panel, .project-kit-detail-panels, .admin-lead-kit-grid, .filter-bar, .lead-source-insights, .lead-source-dashboard, .lead-followup-metrics, .lead-template-grid, .lead-template-draft, .lead-settings-template-grid, .lead-template-preview-grid, .lead-template-preview-output, .client-account-detail-grid, .client-account-share-grid { grid-template-columns: 1fr; }
  .lead-template-preview-head { align-items: flex-start; flex-direction: column; }
  .client-account-hero, .client-account-hero-actions { align-items: flex-start; flex-direction: column; justify-items: start; }
  .client-account-filter-panel { align-items: stretch; flex-direction: column; }
  .learning-progress-panel, .roadmap-progress-panel { align-items: flex-start; flex-direction: column; }
  .my-learning-toolbar { align-items: flex-start; flex-direction: column; }
  .my-learning-toolbar > div:last-child { justify-content: flex-start; }
  .learning-progress-actions { justify-content: flex-start; }
  .learning-result-summary { align-items: flex-start; flex-direction: column; }
  .learning-result-counts { justify-content: flex-start; }
  .topic-index-head { align-items: flex-start; flex-direction: column; }
  .topic-strip > div:last-child { justify-content: flex-start; }
  .roadmap-index-head, .roadmap-stage-head { align-items: flex-start; flex-direction: column; }
  .roadmap-stage-marker { position: static; }
  .seo-social-preview > div:last-child { padding: 16px; }
  .learning-reader-aside { position: static; }
  .public-dropdown, .public-dropdown-sm { min-width: 100%; padding: 8px 0 8px 12px; border: 0; box-shadow: none; background: transparent; }
  .public-dropdown .dropdown-item { grid-template-columns: 30px 1fr; }
  .public-dropdown .dropdown-item i { width: 30px; height: 30px; }
  .pipeline { grid-template-columns: repeat(2, 1fr); }
  .kanban-board { grid-template-columns: repeat(5, 260px); }
  .invoice-item-row { grid-template-columns: 1fr; }
  .notification-summary { grid-template-columns: repeat(2, 1fr); }
  .notification-card { grid-template-columns: 1fr; }
  .notification-actions { justify-content: flex-start; }
  .audit-filter-grid { grid-template-columns: 1fr; }
  .audit-item { grid-template-columns: 1fr; }
  .audit-title { align-items: flex-start; flex-direction: column; }
  .audit-detail-grid { grid-template-columns: 1fr; }
  .document-upload-form { grid-template-columns: 1fr; }
  .document-row { align-items: flex-start; flex-direction: column; }
  .client-hero { align-items: flex-start; flex-direction: column; }
  .client-dashboard-grid, .client-project-grid, .hosting-grid, .client-ticket-layout, .ticket-status-strip, .invoice-portal-grid, .invoice-client-box, .account-layout { grid-template-columns: 1fr; }
  .invoice-portal-head { align-items: flex-start; flex-direction: column; }
  .project-hero { align-items: flex-start; flex-direction: column; }
  .project-facts { grid-template-columns: 1fr; }
  .cta-panel { align-items: flex-start; flex-direction: column; }
  .case-detail-hero .container, .case-detail-grid, .case-section-row { grid-template-columns: 1fr; }
  .case-facts { position: static; }
  .portal-topbar { align-items: flex-start; flex-direction: column; padding: 14px 16px; }
  .renewal-inline-actions { grid-template-columns: 1fr; }
  .auth-page .portal-topbar { min-height: auto; align-items: center; flex-direction: row; padding: 12px 16px; }
  .auth-page .portal-topbar .brand-logo { height: 42px; max-width: 190px; }
  .auth-page .portal-nav { width: auto; }
  .auth-page .portal-nav .btn { min-height: 34px; }
  .auth-shell { height: auto; min-height: calc(100vh - 66px); padding: 16px 14px 22px; }
  .auth-panel { padding: 22px 20px 24px; }
  .auth-page .auth-panel { transform: none; }
  .auth-heading { grid-template-columns: 1fr; }
  .portal-nav { justify-content: flex-start; width: 100%; }
  .portal-nav .btn, .portal-nav form { flex: 1 1 auto; }
  .portal-nav form .btn { width: 100%; }
  .brand-lockup { margin-bottom: 0; }
  .brand-preview-row { grid-template-columns: 1fr; }
  .brand-preview-card { align-items: flex-start; flex-direction: column; }
  .brand-preview-image { max-width: 100%; }
  .panel-header { align-items: flex-start; flex-direction: column; }
  .client-list-row { align-items: flex-start; flex-direction: column; }
  .hero-section { padding-top: 62px; }
  .hero-product { max-width: 680px; transform: none; }
  .hero-product:hover { transform: translateY(-2px); }
  .contact-mini-facts { grid-template-columns: 1fr; }
  .premium-heading-row { align-items: flex-start; flex-direction: column; }
  .price-card.featured { transform: none; }
  .dashboard-preview-top { grid-template-columns: 1fr; min-height: auto; }
  .dashboard-preview-footer { grid-template-columns: 1fr; }
  .portfolio-outcome-grid { grid-template-columns: 1fr; }
  .legal-summary { position: static; }
  .footer-cta .container, .footer-brand, .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-brand p { text-align: left; }
  .footer-cta { padding: 58px 0; }
  .offline-card { padding: 28px 22px; }
  .offline-card-head { align-items: flex-start; flex-direction: column; }
  .offline-hints { grid-template-columns: 1fr; }
  .system-health-item { grid-template-columns: 42px minmax(0, 1fr); }
  .system-health-item .badge, .system-health-item .btn { justify-self: start; grid-column: 2; }
}

@media print {
  .portal-topbar, .invoice-portal-head .client-actions, .invoice-portal-grid > aside, .workspace-sidebar, .workspace-topbar, .lead-print-actions { display: none !important; }
  .portal-body, .workspace-shell, body { background: #fff; margin: 0 !important; }
  .workspace-main { padding: 0 !important; }
  main.container { width: 100%; max-width: none; padding: 0 !important; }
  .invoice-portal-grid { display: block; }
  .panel { box-shadow: none; border: 0; }
  .no-print, .statement-actions, .client-account-actions, .client-account-hero .client-account-generated { display: none !important; }
  .print-only { display: flex !important; }
  .client-account-print-head { align-items: flex-start; justify-content: space-between; gap: 18px; padding: 0 0 16px; margin-bottom: 18px; border-bottom: 2px solid #111827; color: #111827; }
  .client-account-print-head h1 { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 950; }
  .client-account-print-head span, .client-account-print-head strong { display: block; color: #334155; font-size: 12px; margin-top: 6px; }
  .client-account-print-head strong { color: #111827; font-size: 18px; text-align: right; }
  .client-account-hero { box-shadow: none; border: 1px solid #d1d5db; padding: 16px; break-inside: avoid; }
  .client-account-hero h1 { font-size: 28px; color: #111827; }
  .client-account-contact span { border-color: #d1d5db; background: #fff; color: #111827; padding: 5px 8px; }
  .client-account-hero-actions { display: block; }
  .client-account-print-section, .client-account-statement-panel, .stat-card { break-inside: avoid; }
  .client-account-detail-grid { display: block; }
  .client-account-detail-grid aside { margin-top: 14px; }
  .client-account-facts { grid-template-columns: repeat(4, 1fr); }
  .client-account-facts div, .client-account-timeline a { background: #fff; border-color: #d1d5db; box-shadow: none; }
  .client-account-timeline a { color: #111827; text-decoration: none; }
  .client-account-timeline-dot { background: #111827; box-shadow: none; }
  .stat-card { min-height: auto; box-shadow: none; background: #fff !important; border: 1px solid #d1d5db; color: #111827; padding: 12px; }
  .stat-card span, .stat-card small, .stat-card strong { color: #111827 !important; }
  .modern-table { font-size: 11px; color: #111827; }
  .modern-table th, .modern-table td { padding: 7px 8px; border-color: #d1d5db; }
  .table-responsive { overflow: visible !important; }
  .badge { border: 1px solid #111827; color: #111827 !important; background: #fff !important; }
  .client-account-note { max-width: none; color: #111827; }
  .client-account-print-footer { display: block !important; margin-top: 18px; padding-top: 10px; border-top: 1px solid #d1d5db; color: #334155; font-size: 11px; }
  .client-account-print-footer strong { display: block; color: #111827; }
  .lead-print-profile { max-width: none; }
  .lead-print-head { break-inside: avoid; }
  .lead-print-section, .lead-print-timeline article { break-inside: avoid; background: #fff; }
}