:root{
  --bg:#f5f8fd;
  --sidebar:#ffffff;
  --panel:#ffffff;
  --panel-2:#f9fbff;
  --ink:#071832;
  --ink-2:#17294a;
  --muted:#64748b;
  --line:#dce7f5;
  --accent:#135df5;
  --accent-2:#4f8cff;
  --accent-3:#7ec8ff;
  --success:#10b981;
  --success-soft:#e9fbf5;
  --warning:#fff7e6;
  --shadow-sm:0 8px 22px rgba(15, 46, 93, .07);
  --shadow-md:0 18px 50px rgba(15, 46, 93, .12);
  --shadow-lg:0 30px 70px rgba(15, 46, 93, .16);
  --radius:22px;
  --radius-sm:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at 82% 8%, rgba(79,140,255,.12), transparent 32%),
    radial-gradient(circle at 20% 92%, rgba(126,200,255,.12), transparent 30%),
    var(--bg);
  color:var(--ink);
  font:16px/1.62 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}

/* Left navigation */
.sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  width:294px;
  padding:22px 18px;
  overflow:auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-right:1px solid var(--line);
  box-shadow:8px 0 34px rgba(15,46,93,.06);
  z-index:50;
}
.brand{
  display:flex;align-items:center;gap:12px;
  padding:2px 6px 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.brand-mark{
  width:48px;height:48px;border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  display:grid;place-items:center;color:#fff;
  box-shadow:0 16px 34px rgba(19,93,245,.25);
}
.brand-mark svg{width:24px;height:24px}
.brand-copy strong{display:block;font-size:18px;letter-spacing:-.02em;line-height:1.12}
.brand-copy span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.menu-search{margin:0 0 16px}
.menu-search input,.toolbar input,.toolbar select{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  border-radius:16px;
  padding:12px 14px;
  font:inherit;
  outline:none;
  transition:.18s ease;
}
.menu-search input:focus,.toolbar input:focus,.toolbar select:focus{
  border-color:#9bbcff;
  box-shadow:0 0 0 4px rgba(19,93,245,.10);
}
.menu-section{margin:18px 0}
.menu-title{
  padding:0 9px;margin:0 0 8px;
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:#8090a7;
}
.side-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 13px;
  border-radius:15px;
  color:var(--ink-2);
  font-weight:760;font-size:14px;
  border:1px solid transparent;
  transition:background .18s ease, transform .18s ease, border-color .18s ease, color .18s ease;
}
.side-link:hover,.side-link.active{
  background:linear-gradient(135deg,#eef4ff,#f8fbff);
  border-color:#d2e1ff;
  color:var(--accent);
  text-decoration:none;
  transform:translateX(2px);
}
.module-link{align-items:flex-start;flex-direction:column;gap:5px}
.module-name{line-height:1.25}
.module-days{
  display:inline-flex;
  border-radius:999px;
  padding:4px 9px;
  background:#edf4ff;
  color:#4165dd;
  font-size:11px;
  font-weight:900;
}

/* Layout */
.main{
  margin-left:294px;
  min-height:100vh;
  padding:26px 30px 58px;
}
.mobile-topbar{display:none}
.page{scroll-margin-top:28px;margin:0 0 42px}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  padding:38px;
  border:1px solid #d8e7fb;
  border-radius:32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,247,255,.96) 52%, rgba(232,246,255,.96)),
    radial-gradient(circle at 80% 22%, rgba(19,93,245,.14), transparent 28%);
  box-shadow:var(--shadow-lg);
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 78% 28%, rgba(126,200,255,.25), transparent 18%),
    radial-gradient(circle at 92% 8%, rgba(19,93,245,.11), transparent 16%);
  pointer-events:none;
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 470px;
  gap:30px;
  align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;width:max-content;
  border-radius:999px;
  padding:7px 11px;
  background:#eef5ff;
  border:1px solid #d6e6ff;
  color:#315bd8;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
}
.hero h1{
  margin:16px 0 14px;
  font-size:clamp(38px,5vw,66px);
  line-height:1.02;
  letter-spacing:-.055em;
}
.hero p{
  margin:0;
  max-width:760px;
  color:#425b77;
  font-size:18px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;
  padding:12px 18px;
  border:1px solid #d7e4f4;
  background:white;
  color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  font-weight:850;
  text-decoration:none;
}
.button:hover{text-decoration:none;transform:translateY(-1px)}
.button.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  border-color:transparent;
  box-shadow:0 16px 36px rgba(19,93,245,.22);
}
.hero-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hero-mini-grid .visual-card svg{height:158px}
.hero-mini-grid .visual-card figcaption{padding:12px 14px}

/* Cards and visual sections */
.section-heading{display:flex;flex-direction:column;gap:8px;margin:0 0 18px}
.section-heading h2{
  margin:0;
  color:var(--ink);
  font-size:clamp(28px,4vw,46px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.section-heading p{margin:0;max-width:920px;color:var(--muted);font-size:16px}
.visual-section{margin:26px 0}
.visual-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.visual-card{
  margin:0;
  background:rgba(255,255,255,.95);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.visual-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.visual-card svg{display:block;width:100%;height:210px}
.visual-card figcaption{
  padding:15px 16px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:4px;
}
.visual-card figcaption strong{font-size:15px;color:var(--ink)}
.visual-card figcaption span{font-size:13px;color:var(--muted)}
.card,.web-card{
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:25px;
  margin:18px 0;
}
.card:hover,.web-card:hover{box-shadow:var(--shadow-md)}
.quick-nav{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.quick-nav a{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:white;
  color:#3f536f;
  padding:9px 13px;
  font-weight:780;
  font-size:14px;
  text-decoration:none;
}
.quick-nav a:hover{border-color:#bed4ff;color:var(--accent);box-shadow:var(--shadow-sm)}
.two-col{display:grid;grid-template-columns:minmax(0,1.12fr) 360px;gap:20px;align-items:start}
.resource-highlights{display:grid;gap:16px;position:sticky;top:22px}
.aside-card{
  background:white;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  padding:20px;
}
.aside-card h3{margin:0 0 9px;font-size:18px}
.aside-card p{margin:0;color:var(--muted)}

/* Study plan toolbar */
.toolbar{
  position:sticky;
  top:18px;
  z-index:30;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border:1px solid var(--line);
  border-radius:26px;
  box-shadow:var(--shadow-md);
  padding:18px;
  margin:0 0 20px;
}
.toolbar-head h2{margin:0;font-size:30px;letter-spacing:-.025em}
.toolbar-head p{margin:6px 0 0;color:var(--muted)}
.toolbar-grid{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(170px,1fr) minmax(230px,1.2fr) 140px;
  gap:11px;
  margin-top:15px;
}
.toolbar-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.toolbar-actions button,.copy-btn{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  font:inherit;
  font-size:13px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(19,93,245,.18);
}
.toolbar-actions button.secondary{
  background:white;color:var(--ink-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.toolbar-actions button:hover,.copy-btn:hover{filter:brightness(1.04);transform:translateY(-1px)}

.module-banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px;
  border-radius:26px;
  background:linear-gradient(135deg,#ffffff,#edf5ff);
  border:1px solid #d5e5fb;
  box-shadow:var(--shadow-sm);
  margin:20px 0 12px;
}
.module-banner h3{margin:6px 0 4px;font-size:25px;letter-spacing:-.02em}
.module-banner p{margin:0;color:var(--muted)}
.module-pill{
  display:inline-flex;border-radius:999px;padding:6px 10px;
  background:#eaf2ff;border:1px solid #d3e3ff;
  color:#315bd8;
  font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
}
.module-jump{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:112px;
  border-radius:999px;
  padding:10px 14px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;
  font-weight:850;
  box-shadow:0 12px 28px rgba(19,93,245,.18);
}
.module-jump:hover{text-decoration:none;filter:brightness(1.05)}

/* Harmonize inherited generated-content styles */
h2{margin-top:0;color:var(--ink)}
h3{margin-top:0;color:var(--ink)}
h4{color:var(--ink)}
.muted{color:var(--muted)}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
thead th{background:#f3f7fe;color:#29405f;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.callout{border-radius:17px;border:1px solid var(--line)}
.callout.green{background:var(--success-soft)!important;border-color:#bcebd9!important}
.callout.warn{background:var(--warning)!important;border-color:#ffe0a6!important}
.day-card{
  border:1px solid var(--line)!important;
  border-radius:24px!important;
  background:white!important;
  box-shadow:var(--shadow-sm)!important;
  margin:15px 0!important;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.day-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)!important}
.day-summary{
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
  padding:18px!important;
}
.day-title{font-weight:900;color:var(--ink);letter-spacing:-.02em}
.day-num{
  background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;
  color:white!important;
  box-shadow:0 12px 28px rgba(19,93,245,.18);
}
.tag,.tag.phase,.tag.track{
  border-radius:999px!important;
  background:#eef5ff!important;
  color:#315bd8!important;
  border:1px solid #d8e6ff!important;
  font-weight:850!important;
}
.day-grid{gap:17px}
.prompt-box,pre{
  border-radius:16px!important;
  background:#f7faff!important;
  border:1px solid var(--line)!important;
}
.video-resource-box,.daily-system,.lab-completion-guide,.prompt-pack,.day-resource-library{
  border-radius:20px!important;
  border:1px solid var(--line)!important;
  background:#fbfdff!important;
}

/* Ensure all progress tracker UI is removed/hidden */
#interactive-dashboard,.interactive-day-panel,
.progress-wrap,.progress-label,.progress-fill,[data-day-fill],[data-day-label],
.day-note,[data-note-key],.saved-toast,#checkedItems,#completeDays,#overallPercent,
.day-card .checklist,#overallFill,#overallLabel{display:none!important}

/* Footer and utility */
.site-footer{padding:18px 4px 8px;text-align:center;color:var(--muted)}
.back-top{
  position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:999px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:white;text-decoration:none;
  box-shadow:var(--shadow-md);
  z-index:35;
}
.back-top:hover{text-decoration:none;filter:brightness(1.05)}

/* Mobile */
@media (max-width:1200px){
  .hero-grid,.two-col{grid-template-columns:1fr}
  .resource-highlights{position:static}
  .toolbar-grid{grid-template-columns:1fr 1fr}
  .visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:920px){
  .sidebar{transform:translateX(-105%);transition:transform .24s ease}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main{margin-left:0;padding:14px 14px 42px}
  .mobile-topbar{
    display:block;
    position:sticky;top:0;z-index:45;
    margin:0 -14px 16px;
    padding:12px 14px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .mobile-topbar .inner{display:flex;align-items:center;gap:12px}
  .menu-toggle{
    border:1px solid var(--line);
    background:white;
    border-radius:13px;
    padding:10px 12px;
    box-shadow:var(--shadow-sm);
    cursor:pointer;
  }
  .backdrop{
    position:fixed;inset:0;background:rgba(7,24,50,.30);
    opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40;
  }
  body.sidebar-open .backdrop{opacity:1;pointer-events:auto}
  .hero{padding:25px}
  .hero-mini-grid,.visual-grid,.toolbar-grid,.module-banner{grid-template-columns:1fr}
  .module-banner{display:grid}
}
@media (max-width:640px){
  .hero h1{font-size:36px}
  .toolbar{position:relative;top:auto}
  .visual-card svg{height:180px}
  .card,.web-card{padding:18px}
}
@media print{
  .sidebar,.mobile-topbar,.toolbar,.back-top,.backdrop{display:none!important}
  .main{margin:0;padding:0}
  body{background:white}
  .page,.day-card,.visual-card{break-inside:avoid}
}

/* Exact clean dashboard style inspired by the selected preview */
:root{
  --bg:#f7faff;
  --sidebar:#ffffff;
  --panel:#ffffff;
  --ink:#071832;
  --ink-2:#142748;
  --muted:#5f7191;
  --line:#dfe9f7;
  --accent:#145ff5;
  --accent-2:#5c96ff;
  --accent-soft:#eef5ff;
  --green:#0eb981;
  --shadow-sm:0 8px 24px rgba(35, 69, 116, .08);
  --shadow-md:0 18px 52px rgba(35, 69, 116, .12);
  --radius:24px;
}
body{
  background:#f7faff;
  color:var(--ink);
}
.sidebar{
  width:288px;
  background:#fff;
  border-right:1px solid #dbe6f4;
  box-shadow:6px 0 26px rgba(19,48,91,.06);
  padding:28px 20px;
}
.main{margin-left:288px;padding:26px 32px 52px}
.brand{padding-bottom:28px;margin-bottom:24px;border-bottom:none}
.brand-mark{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#0b56f0,#6da1ff)}
.brand-copy strong{font-size:20px}
.brand-copy span{font-size:13px;color:#5a6c8b}
.menu-section{display:grid;gap:14px;margin:0}
.side-link{
  justify-content:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  font-size:17px;
  font-weight:760;
  color:#102242;
}
.side-link:hover,.side-link.active{
  background:#eef5ff;
  border-color:transparent;
  color:#075ff0;
  transform:none;
}
.nav-ico{
  width:22px;
  display:inline-flex;
  justify-content:center;
  color:#426187;
}
.module-link{flex-direction:row;align-items:center}
.module-link .module-days{display:none}
.sidebar-coach{
  position:absolute;
  left:20px;right:20px;bottom:26px;
  background:white;
  border:1px solid #dfe9f7;
  border-radius:22px;
  padding:18px;
  box-shadow:0 14px 36px rgba(35,69,116,.08);
}
.coach-icon{
  width:74px;height:74px;border-radius:16px;
  display:grid;place-items:center;
  background:#eef5ff;
  font-size:36px;
  margin-bottom:14px;
}
.sidebar-coach strong{display:block;color:#0645c5;line-height:1.35}
.sidebar-coach p{margin:6px 0 16px;color:#2862d6}
.mini-progress{height:8px;border-radius:999px;background:#e7eef9;overflow:hidden;margin-bottom:8px}
.mini-progress span{display:block;height:100%;border-radius:999px;background:#145ff5}
.sidebar-coach small{color:#315eae;display:block;margin-bottom:16px}
.sidebar-coach a{font-weight:800;text-decoration:none}

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 20px;
}
.top-search{
  width:min(440px,48vw);
  height:56px;
  border:1px solid #dfe9f7;
  background:white;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(35,69,116,.04);
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 18px;
  color:#526989;
}
.top-search input{
  border:none;outline:none;background:transparent;width:100%;
  font:inherit;color:#142748;
}
.top-search input::placeholder{color:#8292ac}
.top-actions{
  display:flex;align-items:center;gap:13px;
  color:#17294a;
}
.bell{position:relative;color:#145ff5;font-size:14px}
.avatar{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#ffcfb0,#7ba6ff);
  color:white;font-weight:900;
}

/* Hero */
.hero.dashboard-hero{
  border-radius:24px;
  border:1px solid #dfe9f7;
  padding:0;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 58%,#edf5ff 100%);
  box-shadow:0 14px 40px rgba(35,69,116,.08);
  overflow:hidden;
}
.dashboard-hero .hero-grid{
  display:grid;
  grid-template-columns:minmax(430px,1fr) 570px;
  gap:10px;
  align-items:center;
  padding:52px 52px 42px;
}
.hero-copy h1{
  font-size:56px;
  letter-spacing:-.055em;
  line-height:1.08;
  margin:0 0 20px;
}
.hero-copy p{
  max-width:620px;
  color:#526989;
  font-size:19px;
  line-height:1.55;
}
.hero-copy .hero-actions{margin-top:30px}
.button{
  min-height:52px;
  padding:13px 28px;
  border-radius:12px;
  font-weight:850;
}
.button.primary{
  background:#145ff5;
  box-shadow:0 12px 28px rgba(20,95,245,.24);
}
.hero-illustration svg{width:100%;height:auto;display:block}

/* Stat bar */
.stats-strip{
  margin:-6px 22px 26px;
  position:relative;
  z-index:2;
  background:white;
  border:1px solid #dfe9f7;
  border-radius:24px;
  box-shadow:0 14px 40px rgba(35,69,116,.08);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  overflow:hidden;
}
.stats-strip article{
  display:grid;
  grid-template-columns:76px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:14px;
  padding:24px 30px;
  position:relative;
}
.stats-strip article:not(:last-child):after{
  content:"";
  position:absolute;right:0;top:18px;bottom:18px;
  width:1px;background:#e3ebf7;
}
.stat-icon{
  grid-row:1/3;
  width:56px;height:56px;border-radius:50%;
  background:#eef5ff;
  color:#145ff5;
  display:grid;place-items:center;
  font-size:28px;
}
.stats-strip b{
  font-size:32px;
  line-height:1;
  letter-spacing:-.04em;
}
.stats-strip small{color:#526989;font-size:15px}

/* Journey cards */
.journey-section{margin:8px 18px 24px}
.journey-section h2{font-size:24px;margin:0 0 4px}
.journey-section>p{color:#60718b;margin:0 0 18px}
.journey-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.journey-card{
  background:white;
  border:1px solid #dfe9f7;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 28px rgba(35,69,116,.05);
  display:grid;
  grid-template-columns:132px 1fr 34px;
  gap:16px;
  align-items:center;
  color:inherit;
  text-decoration:none;
  transition:.18s ease;
}
.journey-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(35,69,116,.10);
  text-decoration:none;
}
.journey-art{
  height:116px;
  border-radius:18px;
  display:grid;
  place-items:center;
  font-size:54px;
}
.journey-art.purple{background:linear-gradient(135deg,#f4efff,#e5dcff)}
.journey-art.blue{background:linear-gradient(135deg,#eef7ff,#dcecff)}
.journey-art.green{background:linear-gradient(135deg,#effdf6,#d8f8e9)}
.journey-art.violet{background:linear-gradient(135deg,#f2f0ff,#e4e1ff)}
.journey-art.cyan{background:linear-gradient(135deg,#eefbff,#dcefff)}
.journey-art.orange{background:linear-gradient(135deg,#fff3e8,#ffe0c5)}
.journey-card h3{font-size:19px;margin:0 0 8px}
.journey-card p{font-size:14px;color:#526989;margin:0 0 12px;line-height:1.45}
.journey-card strong{color:#145ff5}
.journey-card:nth-child(3) strong{color:#07966f}
.journey-card:nth-child(6) strong{color:#ef6c00}
.journey-card>span{
  width:34px;height:34px;border-radius:50%;
  border:1px solid #dfe9f7;
  display:grid;place-items:center;
  color:#145ff5;
}

/* Feature strip */
.feature-strip{
  margin:18px 10px 26px;
  background:linear-gradient(135deg,#f2f7ff,#ffffff);
  border-radius:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  padding:18px 24px;
}
.feature-strip article{
  display:flex;
  gap:14px;
  align-items:center;
}
.feature-strip article>span{
  width:52px;height:52px;border-radius:50%;
  background:white;
  display:grid;place-items:center;
  color:#145ff5;
  font-size:26px;
}
.feature-strip b{display:block}
.feature-strip small{display:block;color:#526989;line-height:1.35}

.compact-quick-nav{margin:22px 10px 8px}

/* Preserve deeper content but make it match */
.visual-section{display:none}
.card,.web-card{
  border-radius:20px;
  border-color:#dfe9f7;
  box-shadow:0 10px 28px rgba(35,69,116,.06);
}
.toolbar{border-radius:22px;background:white}
.module-banner{border-radius:20px}
.day-card{border-radius:18px!important}
.back-top{background:#145ff5}

/* Mobile */
@media(max-width:1280px){
  .dashboard-hero .hero-grid{grid-template-columns:1fr}
  .hero-illustration{max-width:680px}
  .journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-strip{grid-template-columns:repeat(2,1fr)}
  .feature-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:920px){
  .main{margin-left:0;padding:14px}
  .topbar{display:none}
  .sidebar{transform:translateX(-105%);transition:transform .24s ease}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .dashboard-hero .hero-grid{padding:28px}
  .hero-copy h1{font-size:40px}
  .stats-strip{margin:16px 0;grid-template-columns:1fr}
  .stats-strip article:not(:last-child):after{display:none}
  .journey-grid{grid-template-columns:1fr}
  .journey-card{grid-template-columns:96px 1fr 34px}
  .journey-art{height:96px}
  .feature-strip{grid-template-columns:1fr;margin:16px 0}
  .sidebar-coach{position:static;margin-top:28px}
}
@media(max-width:620px){
  .dashboard-hero .hero-grid{padding:22px}
  .hero-copy h1{font-size:34px}
  .journey-card{grid-template-columns:1fr}
  .journey-card>span{display:none}
}


/* Final redesign: clean course dashboard style, no blue bars, readable non-bold sidebar */
body{
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  letter-spacing:0;
  color:#0a1933;
  background:#f7faff;
}

/* Sidebar typography and spacing */
.sidebar{
  width:288px;
  padding:30px 20px;
  background:#fff;
  border-right:1px solid #dfe8f6;
}
.main{margin-left:288px;}
.brand-copy strong{
  font-weight:650;
  font-size:20px;
}
.brand-copy span{font-weight:400;}
.side-link{
  font-weight:500 !important;
  font-size:16px;
  letter-spacing:0;
  color:#172946;
  border-radius:14px;
}
.side-link.active,
.side-link:hover{
  font-weight:600 !important;
  color:#145ff5;
  background:#eef5ff;
}
.nav-ico{opacity:.82;}
.sidebar-coach strong{font-weight:650;}
.sidebar-coach p,
.sidebar-coach small,
.sidebar-coach a{font-weight:500;}

/* Study Plan main panel */
.study-page{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.toolbar{
  display:block;
  border-radius:26px;
  background:#ffffff;
  border:1px solid #dfe8f6;
  box-shadow:0 14px 38px rgba(31,65,114,.07);
}
.toolbar-head h2{
  font-weight:650;
}
.toolbar input,
.toolbar select{
  font-weight:400;
}
.toolbar-actions button,
.copy-btn{
  font-weight:600;
}

/* Remove any inherited blue-bar accordion styling */
.day-card{
  background:#fff !important;
  border:1px solid #dfe8f6 !important;
  border-radius:26px !important;
  box-shadow:0 16px 44px rgba(31,65,114,.08) !important;
  overflow:hidden !important;
  margin:24px 0 !important;
}
.day-card:hover{
  transform:none !important;
  box-shadow:0 20px 52px rgba(31,65,114,.10) !important;
}
.day-card[open]{
  box-shadow:0 24px 64px rgba(31,65,114,.11) !important;
}
.day-card > summary{
  list-style:none;
}
.day-card > summary::-webkit-details-marker{
  display:none;
}
.clean-day-summary{
  display:block !important;
  background:#fff !important;
  padding:0 !important;
  cursor:pointer;
}
.clean-day-shell{
  padding:34px 42px 0;
}
.clean-day-top{
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:flex-start;
  margin-bottom:28px;
}
.clean-day-kicker{
  font-size:30px;
  line-height:1.1;
  font-weight:650;
  color:#071832;
  letter-spacing:-.025em;
}
.clean-day-phase{
  margin-top:8px;
  color:#64748b;
  font-size:15px;
  font-weight:500;
}
.clean-day-status{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.level-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 22px;
  border-radius:14px;
  color:#0b986f;
  background:#e9fbf5;
  border:1px solid #b9ead9;
  font-size:14px;
  font-weight:650;
}
.time-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#3d506b;
  font-size:14px;
  font-weight:550;
}
.clean-day-shell h2{
  margin:0 0 12px !important;
  color:#071832;
  font-size:30px !important;
  line-height:1.16;
  letter-spacing:-.025em;
  font-weight:650;
}
.clean-day-subtitle{
  margin:0 0 34px;
  color:#5f7191;
  font-size:16px;
  font-weight:400;
}
.clean-tabs{
  display:grid;
  grid-template-columns:repeat(5, minmax(110px,1fr));
  gap:0;
  border-bottom:1px solid #e5edf8;
}
.clean-tabs span{
  position:relative;
  text-align:center;
  color:#526784;
  font-weight:500;
  padding:17px 10px 18px;
  font-size:15px;
}
.clean-tabs span.active{
  color:#145ff5;
  font-weight:600;
}
.clean-tabs span.active:after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-1px;
  height:3px;
  border-radius:999px;
  background:#145ff5;
}

/* Day content */
.day-content{
  padding:30px 42px 38px !important;
  background:#fff;
}
.day-target-card{
  margin:0 0 30px;
  padding:22px 24px;
  border-radius:18px;
  background:#eafbf5;
  border:1px solid #c2efde;
  color:#163e32;
  line-height:1.65;
}
.day-target-card h3{
  margin:0 0 8px;
  color:#0a8f6b;
  font-size:18px;
  font-weight:650;
}
.day-target-card p{
  margin:0;
  color:#1c3d35;
  font-weight:400;
}

/* At a glance */
.at-glance-row{
  margin:0 0 32px;
}
.at-glance-row h3{
  color:#145ff5;
  font-size:20px;
  font-weight:650;
  margin:0 0 14px;
}
.glance-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.glance-grid article{
  min-height:102px;
  display:grid;
  grid-template-columns:40px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:13px;
  padding:18px;
  background:#fff;
  border:1px solid #dfe8f6;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(31,65,114,.05);
}
.glance-icon{
  grid-row:1/3;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:18px;
}
.glance-icon.blue{color:#145ff5;background:#edf4ff;}
.glance-icon.indigo{color:#4f46e5;background:#eef2ff;}
.glance-icon.green{color:#0b986f;background:#e9fbf5;}
.glance-icon.orange{color:#f59e0b;background:#fff7e6;}
.glance-grid b{
  color:#173153;
  font-size:14px;
  font-weight:600;
}
.glance-grid small{
  color:#40556f;
  font-size:15px;
  font-weight:400;
}

/* Content should read like a website, not a raw document */
.day-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
.day-grid > section{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.day-grid h4,
.day-content h4{
  color:#081832;
  font-size:20px;
  font-weight:650;
  margin:0 0 16px !important;
}
.day-grid li{
  margin:8px 0;
  color:#233a59;
  line-height:1.65;
}
.day-grid ul li::marker{
  color:#0b8f71;
}
.day-grid table,
.resource-mini{
  border:1px solid #dfe8f6;
  border-radius:16px;
  overflow:hidden;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
}
.day-grid th,
.day-grid td,
.resource-mini th,
.resource-mini td{
  border-bottom:1px solid #e5edf8;
  padding:13px 15px;
  font-weight:400;
}
.day-grid thead th,
.resource-mini thead th{
  background:#f5f8fe !important;
  color:#173153;
  font-weight:600;
  font-size:13px;
}
.video-resource-box,
.daily-system,
.lab-completion-guide,
.prompt-pack,
.day-resource-library{
  border-radius:18px !important;
  border:1px solid #dfe8f6 !important;
  background:#fbfdff !important;
  padding:22px !important;
  margin:24px 0 !important;
}
.prompt-card{
  border:1px solid #dfe8f6 !important;
  border-radius:16px !important;
  background:#fff !important;
}
.prompt-card header b{
  font-weight:600;
}
pre,
.prompt-box{
  font-family:"Segoe UI", Roboto, Arial, sans-serif !important;
  font-size:14px !important;
  line-height:1.6 !important;
  color:#1a2d48 !important;
  background:#f7faff !important;
  border:1px solid #dfe8f6 !important;
  border-radius:16px !important;
}

/* Hide all old/unwanted blue bar and progress artifacts */
.day-num,
.day-tags,
.tag,
.progress-wrap,
.progress-label,
.progress-fill,
.interactive-day-panel,
.day-card .checklist,
.day-note,
[data-note-key],
.saved-toast{
  display:none !important;
}

/* Keep home polished but not overly bold */
.topbar,
.dashboard-hero,
.stats-strip,
.journey-section,
.feature-strip{
  font-weight:400;
}
.journey-card h3,
.feature-strip b,
.stats-strip b{
  font-weight:650;
}

/* Responsive */
@media(max-width:920px){
  .main{margin-left:0;}
  .clean-day-shell{padding:24px 20px 0;}
  .day-content{padding:24px 20px 30px !important;}
  .clean-day-top{display:grid;}
  .clean-tabs{grid-template-columns:1fr;border-bottom:0;}
  .clean-tabs span{text-align:left;border-bottom:1px solid #e5edf8;}
  .glance-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:620px){
  .clean-day-kicker{font-size:24px;}
  .clean-day-shell h2{font-size:24px !important;}
  .glance-grid{grid-template-columns:1fr;}
}


/* Requested update: wider Study Plan and picture-rich pages */
.study-page{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.study-page > .toolbar{
  max-width:none !important;
  width:100% !important;
}
#daily-plan{
  width:100% !important;
  max-width:none !important;
}
.day-card{
  max-width:none !important;
  width:100% !important;
}
.clean-day-shell,
.day-content{
  max-width:none !important;
}
.toolbar-grid{
  grid-template-columns:minmax(360px,2.4fr) minmax(180px,.9fr) minmax(240px,1.15fr) 150px !important;
}

/* More visual pictures, not additional small icons */
.photo-gallery-section{
  margin:26px 0 30px;
  padding:26px;
  background:linear-gradient(135deg,#ffffff,#f4f8ff);
  border:1px solid #dfe8f6;
  border-radius:28px;
  box-shadow:0 16px 44px rgba(31,65,114,.07);
}
.photo-section-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-end;
  margin-bottom:18px;
}
.photo-section-head h2{
  margin:0;
  color:#071832;
  font-size:30px;
  line-height:1.1;
  font-weight:650;
  letter-spacing:-.025em;
}
.photo-section-head p{
  margin:0;
  max-width:760px;
  color:#5f7191;
}
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.photo-tile{
  margin:0;
  border:1px solid #dfe8f6;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 34px rgba(31,65,114,.06);
  transition:transform .18s ease, box-shadow .18s ease;
}
.photo-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 48px rgba(31,65,114,.10);
}
.photo-tile svg{
  display:block;
  width:100%;
  height:230px;
  object-fit:cover;
}
.photo-tile figcaption{
  padding:16px 18px 18px;
  background:#fff;
  border-top:1px solid #edf2f9;
}
.photo-tile figcaption strong{
  display:block;
  color:#071832;
  font-size:16px;
  font-weight:650;
  margin-bottom:4px;
}
.photo-tile figcaption span{
  display:block;
  color:#5f7191;
  font-size:14px;
  line-height:1.45;
}

/* Module banner pictures */
.module-banner{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 260px !important;
  align-items:center !important;
  gap:20px !important;
}
.module-picture .photo-tile{
  box-shadow:none;
  border-radius:18px;
}
.module-picture .photo-tile svg{
  height:150px;
}
.module-picture .photo-tile figcaption{
  display:none;
}

/* Make existing icon-heavy visual cards less dominant compared with picture galleries */
.visual-section{
  display:none !important;
}

/* Prevent green/target cards from touching edge to edge */
.day-target-card,
.day-content > .callout.green{
  margin-left:0 !important;
  margin-right:0 !important;
  border-radius:18px !important;
}

/* Wider, cleaner day content columns where useful */
.day-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start;
}
.day-grid > section:nth-child(1),
.day-grid > section:nth-child(2),
.day-grid > section:nth-child(3){
  grid-column:auto;
}
.day-grid > section:has(table){
  grid-column:1 / -1;
}
.day-content .daily-system,
.day-content .prompt-pack,
.day-content .day-resource-library,
.day-content .lab-completion-guide{
  grid-column:1 / -1;
}

/* Keep menu readable and not over-bold */
.side-link{
  font-weight:500 !important;
}
.side-link.active,
.side-link:hover{
  font-weight:600 !important;
}

/* Responsive */
@media(max-width:1280px){
  .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .toolbar-grid{grid-template-columns:1fr 1fr !important;}
  .module-banner{grid-template-columns:1fr !important;}
  .module-picture .photo-tile svg{height:210px;}
  .day-grid{grid-template-columns:1fr !important;}
}
@media(max-width:720px){
  .photo-gallery-section{padding:18px;}
  .photo-section-head{display:block;}
  .photo-section-head p{margin-top:8px;}
  .photo-grid{grid-template-columns:1fr;}
  .toolbar-grid{grid-template-columns:1fr !important;}
}


/* Functional inside day tabs */
.clean-tabs{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(110px, 1fr)) !important;
  gap:0 !important;
  border-bottom:1px solid #e5edf8 !important;
}
.clean-tabs .day-tab{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  position:relative;
  text-align:center;
  color:#526784;
  font:inherit;
  font-weight:500;
  padding:17px 10px 18px;
  font-size:15px;
}
.clean-tabs .day-tab:hover{
  color:#145ff5;
  background:#f7faff;
}
.clean-tabs .day-tab.active{
  color:#145ff5;
  font-weight:650;
}
.clean-tabs .day-tab.active:after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:-1px;
  height:3px;
  border-radius:999px;
  background:#145ff5;
}
.tab-panels{
  width:100%;
}
.tab-panel{
  display:none;
  animation:fadeTab .18s ease;
}
.tab-panel.active{
  display:block;
}
@keyframes fadeTab{
  from{opacity:.4; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}
.notes-panel-card{
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:#fbfdff;
  padding:22px;
  margin:0 0 18px;
}
.notes-panel-card h4{
  margin-top:0 !important;
}
.tab-note{
  width:100%;
  min-height:180px;
  resize:vertical;
  border:1px solid #dfe8f6;
  border-radius:16px;
  padding:16px;
  font:inherit;
  color:#1a2d48;
  background:#fff;
  outline:none;
}
.tab-note:focus{
  border-color:#9bbcff;
  box-shadow:0 0 0 4px rgba(20,95,245,.10);
}
@media(max-width:920px){
  .clean-tabs{grid-template-columns:1fr !important; border-bottom:0 !important;}
  .clean-tabs .day-tab{text-align:left; border-bottom:1px solid #e5edf8;}
  .clean-tabs .day-tab.active:after{left:0; right:auto; width:4px; top:10px; bottom:10px; height:auto;}
}


/* Hands-On Tasks Workflow added to Overview for all 365 pages */
.hands-on-workflow{
  margin:0 0 34px;
}
.workflow-head{
  margin:0 0 14px;
}
.workflow-head h3{
  margin:0 0 6px !important;
  color:#145ff5;
  font-size:20px;
  font-weight:650;
}
.workflow-head p{
  margin:0;
  color:#5f7191;
  line-height:1.55;
}
.workflow-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
}
.workflow-card{
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff, #fbfdff);
  box-shadow:0 10px 28px rgba(31,65,114,.05);
  padding:18px;
}
.workflow-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  padding:6px 10px;
  border-radius:999px;
  background:#eef5ff;
  color:#145ff5;
  font-size:12px;
  font-weight:650;
  letter-spacing:.02em;
  margin-bottom:12px;
}
.workflow-card h4{
  margin:0 0 10px !important;
  color:#081832;
  font-size:16px !important;
  font-weight:650;
  line-height:1.35;
}
.workflow-card ul{
  margin:0;
  padding-left:18px;
}
.workflow-card li{
  margin:7px 0;
  color:#243b5a;
  line-height:1.55;
}
.workflow-chip-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.workflow-chip{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:#f4f8fe;
  border:1px solid #dfe8f6;
  color:#23405f;
  font-size:13px;
}
.workflow-note{
  margin:0;
  color:#60718b;
  font-size:14px;
  line-height:1.5;
}
.workflow-checklist li::marker,
.workflow-card li::marker{
  color:#0b8f71;
}
@media(max-width:1280px){
  .workflow-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media(max-width:720px){
  .workflow-grid{
    grid-template-columns:1fr;
  }
}


/* Layout polish: prevent lines/content overflow, smaller copy buttons, inner padding */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
*{
  box-sizing:border-box;
}
.main,
.page,
.card,
.web-card,
.day-card,
.day-content,
.tab-panel,
.tab-panels,
.day-grid,
.photo-gallery-section,
.toolbar,
#daily-plan{
  max-width:100%;
  overflow-wrap:anywhere;
}

/* Keep all content at least ~3mm inside borders */
.day-card,
.card,
.web-card,
.toolbar,
.photo-gallery-section,
.module-banner,
.video-resource-box,
.daily-system,
.lab-completion-guide,
.prompt-pack,
.day-resource-library,
.notes-panel-card,
.workflow-card,
.day-target-card,
.at-glance-row,
.prompt-card{
  overflow:hidden;
}
.day-content{
  padding-left:12px !important;
  padding-right:12px !important;
}
.day-content > *,
.tab-panel > *,
.day-grid > section,
.daily-system,
.video-resource-box,
.lab-completion-guide,
.prompt-pack,
.day-resource-library,
.notes-panel-card,
.workflow-card,
.prompt-card,
.day-target-card{
  margin-left:12px !important;
  margin-right:12px !important;
}
.clean-day-shell{
  padding-left:42px !important;
  padding-right:42px !important;
}

/* Stop tables / long links / prompts from pushing outside the card */
table,
.mini,
.resource-mini{
  width:100% !important;
  max-width:100% !important;
  table-layout:fixed;
  display:table;
}
th, td{
  word-break:break-word;
  overflow-wrap:anywhere;
}
td a,
.day-content a,
.resource-mini a{
  overflow-wrap:anywhere;
  word-break:break-word;
}
pre,
.prompt-box,
.prompt-card pre{
  white-space:pre-wrap !important;
  word-break:break-word !important;
  overflow-wrap:anywhere !important;
  overflow-x:auto;
  max-width:100% !important;
}

/* Fix any decorative lines or tab underline extending beyond cards */
.clean-tabs{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden;
}
.clean-tabs .day-tab{
  min-width:0;
}
.clean-tabs .day-tab.active:after{
  left:22% !important;
  right:22% !important;
}

/* Make Copy buttons compact and professional */
.copy-btn,
.prompt-card header .copy-btn,
.toolbar-actions button,
.module-jump{
  min-width:auto !important;
}
.copy-btn,
.prompt-card header .copy-btn{
  padding:5px 9px !important;
  font-size:12px !important;
  line-height:1.15 !important;
  border-radius:999px !important;
  height:auto !important;
  box-shadow:0 6px 14px rgba(20,95,245,.12) !important;
}
.prompt-card header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.prompt-card header b{
  min-width:0;
  overflow-wrap:anywhere;
}

/* Keep workflow and glance cards inside page width */
.workflow-grid,
.glance-grid,
.photo-grid,
.journey-grid,
.stats-strip,
.feature-strip{
  max-width:100%;
}
.workflow-card,
.glance-grid article,
.photo-tile,
.journey-card,
.stats-strip article,
.feature-strip article{
  min-width:0;
}

/* Better spacing in the inner border areas */
.day-target-card,
.workflow-card,
.notes-panel-card,
.daily-system,
.video-resource-box,
.lab-completion-guide,
.prompt-pack,
.day-resource-library{
  padding:20px !important;
}
.prompt-card{
  padding:0 !important;
}
.prompt-card pre{
  margin:0 12px 12px !important;
}
.prompt-card header{
  padding:12px 12px 8px !important;
}

/* Mobile: keep the 3mm padding feel while avoiding overflow */
@media(max-width:920px){
  .clean-day-shell{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  .day-content{
    padding-left:8px !important;
    padding-right:8px !important;
  }
  .day-content > *,
  .tab-panel > *,
  .day-grid > section,
  .daily-system,
  .video-resource-box,
  .lab-completion-guide,
  .prompt-pack,
  .day-resource-library,
  .notes-panel-card,
  .workflow-card,
  .prompt-card,
  .day-target-card{
    margin-left:8px !important;
    margin-right:8px !important;
  }
  .clean-tabs .day-tab.active:after{
    left:0 !important;
    right:auto !important;
  }
}


/* Final border polish based on uploaded examples */

/* 1) Picture/illustration cards: remove hard horizontal clipping lines and use soft contained borders */
.photo-tile,
.visual-card,
.module-picture .photo-tile{
  border:1px solid #dfe8f6 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 10px 28px rgba(31,65,114,.06) !important;
}
.photo-tile svg,
.visual-card svg,
.module-picture .photo-tile svg{
  display:block !important;
  border:0 !important;
  outline:0 !important;
  margin:0 !important;
}
.photo-tile figcaption,
.visual-card figcaption{
  border-top:1px solid #edf2f9 !important;
}

/* 2) Quality gate / safety guardrail: proper rounded cards with inner padding */
.day-content .grid.two{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:20px 12px 28px !important;
}
.day-content .grid.two > .callout{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:16px 18px !important;
  border-radius:16px !important;
  border:1px solid #dfe8f6 !important;
  background:#ffffff !important;
  box-shadow:0 8px 22px rgba(31,65,114,.05) !important;
  line-height:1.55 !important;
  overflow:hidden !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
}
.day-content .grid.two > .callout b{
  display:inline !important;
  font-weight:650 !important;
}
.day-content .grid.two > .callout.warn{
  background:#fffaf0 !important;
  border-color:#f8dfaa !important;
}

/* 3) Prompt boxes: stop text touching/crossing the border, make border visibly clean */
.prompt-box,
.prompt-card pre,
pre{
  display:block !important;
  width:calc(100% - 24px) !important;
  max-width:calc(100% - 24px) !important;
  margin:12px !important;
  padding:16px 18px !important;
  border:1px solid #dfe8f6 !important;
  border-radius:16px !important;
  background:#f8fbff !important;
  color:#1a2d48 !important;
  line-height:1.65 !important;
  white-space:pre-wrap !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  overflow-x:hidden !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65) !important;
}

/* Prompt section wrapper spacing */
.prompt-pack,
.prompt-card{
  border:1px solid #dfe8f6 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#ffffff !important;
}
.prompt-card header{
  padding:12px 14px 0 !important;
  border:0 !important;
}

/* 4) General inner borders: keep content away from card edges */
.day-target-card,
.notes-panel-card,
.workflow-card,
.video-resource-box,
.daily-system,
.lab-completion-guide,
.day-resource-library{
  border:1px solid #dfe8f6 !important;
  border-radius:18px !important;
  padding:18px 20px !important;
  overflow:hidden !important;
}
.day-target-card{
  border-color:#bfeedd !important;
  background:#eafbf5 !important;
}

/* 5) Table boundaries: no overflow lines past rounded border */
.day-grid table,
.resource-mini,
table.mini{
  border:1px solid #dfe8f6 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}
.day-grid table th,
.day-grid table td,
.resource-mini th,
.resource-mini td,
table.mini th,
table.mini td{
  border-right:0 !important;
  border-left:0 !important;
}
.day-grid table tr:last-child td,
.resource-mini tr:last-child td,
table.mini tr:last-child td{
  border-bottom:0 !important;
}

/* 6) Copy buttons: small, clean, aligned */
.copy-btn,
.prompt-card header .copy-btn{
  padding:4px 8px !important;
  font-size:11px !important;
  line-height:1.1 !important;
  min-width:46px !important;
  height:24px !important;
  border-radius:999px !important;
  box-shadow:none !important;
}

/* 7) Mobile and narrower widths */
@media(max-width:920px){
  .day-content .grid.two{
    grid-template-columns:1fr !important;
  }
  .prompt-box,
  .prompt-card pre,
  pre{
    width:calc(100% - 16px) !important;
    max-width:calc(100% - 16px) !important;
    margin:8px !important;
  }
}


/* FINAL BORDER FIX: remove edge-to-edge bars and contain module illustrations cleanly */

/* Result count should be a small rounded pill, not a full-width green bar touching edges */
#resultCount,
.callout.green#resultCount{
  display:inline-flex !important;
  align-items:center !important;
  width:auto !important;
  max-width:max-content !important;
  margin:16px 0 18px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  background:#eef9f4 !important;
  border:1px solid #c7efdc !important;
  color:#0b5f45 !important;
  box-shadow:none !important;
  line-height:1.25 !important;
  overflow:hidden !important;
}

/* Module banner: keep a real bordered card, but do not place a huge inner bordered rectangle */
.module-banner{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 260px !important;
  gap:22px !important;
  align-items:center !important;
  padding:22px 24px !important;
  border:1px solid #d8e6f7 !important;
  border-radius:24px !important;
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 100%) !important;
  box-shadow:0 12px 34px rgba(31,65,114,.07) !important;
  overflow:hidden !important;
}

/* Module picture: remove the extra white box/border causing the visual line issue */
.module-picture{
  justify-self:end !important;
  align-self:center !important;
  width:240px !important;
  max-width:240px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.module-picture .photo-tile{
  width:240px !important;
  height:150px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
}
.module-picture .photo-tile svg{
  width:240px !important;
  height:150px !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:18px !important;
}
.module-picture .photo-tile figcaption{
  display:none !important;
}

/* Main photo tiles elsewhere keep borders, but no stray outer lines */
.photo-gallery-section{
  border:1px solid #d8e6f7 !important;
  border-radius:26px !important;
  overflow:hidden !important;
}
.photo-grid .photo-tile{
  border:1px solid #dfe8f6 !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#fff !important;
}
.photo-grid .photo-tile svg{
  border:0 !important;
  outline:0 !important;
  margin:0 !important;
  display:block !important;
}

/* Keep all cards away from the browser edge */
.study-page,
.resource-page,
.milestone-page,
#daily-plan{
  padding-left:14px !important;
  padding-right:14px !important;
}

/* Do not let any long lines or tables escape their rounded borders */
.day-card,
.card,
.web-card,
.toolbar,
.module-banner,
.photo-gallery-section,
.day-content,
.tab-panel,
.prompt-card,
.prompt-box,
pre,
table,
.resource-mini,
.mini{
  max-width:100% !important;
  overflow-x:hidden !important;
}
table,
.resource-mini,
.mini{
  table-layout:fixed !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

/* Text stays inside borders with a consistent inner gutter */
.day-target-card,
.workflow-card,
.notes-panel-card,
.video-resource-box,
.daily-system,
.lab-completion-guide,
.prompt-pack,
.day-resource-library,
.day-content .grid.two > .callout{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Copy buttons remain compact */
.copy-btn,
.prompt-card header .copy-btn{
  width:auto !important;
  min-width:42px !important;
  max-width:56px !important;
  height:23px !important;
  padding:3px 7px !important;
  font-size:11px !important;
  line-height:1 !important;
  border-radius:999px !important;
}

/* Responsive: if narrow, hide module picture instead of making a giant bordered rectangle */
@media(max-width:1280px){
  .module-banner{
    grid-template-columns:minmax(0,1fr) 220px !important;
  }
  .module-picture,
  .module-picture .photo-tile,
  .module-picture .photo-tile svg{
    width:220px !important;
    max-width:220px !important;
    height:136px !important;
  }
}
@media(max-width:900px){
  .module-banner{
    grid-template-columns:1fr !important;
  }
  .module-picture{
    display:none !important;
  }
  .study-page,
  .resource-page,
  .milestone-page,
  #daily-plan{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}


/* Compact workflow style for requested visual sections */
.compact-workflow-section{
  padding:16px 18px !important;
  margin:18px 0 22px !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,#ffffff,#f7fbff) !important;
  border:1px solid #d8e6f7 !important;
  box-shadow:0 10px 28px rgba(31,65,114,.06) !important;
}
.compact-workflow-section .photo-section-head{
  margin-bottom:12px !important;
  display:block !important;
}
.compact-workflow-section .photo-section-head h2{
  font-size:22px !important;
  line-height:1.2 !important;
  margin:0 0 4px !important;
  font-weight:650 !important;
}
.compact-workflow-section .photo-section-head p{
  font-size:14px !important;
  line-height:1.45 !important;
  max-width:980px !important;
  color:#5f7191 !important;
}
.compact-workflow-section .photo-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
.compact-workflow-section .workflow-mini-tile{
  display:grid !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  align-items:center !important;
  min-height:112px !important;
  border-radius:18px !important;
  box-shadow:0 8px 22px rgba(31,65,114,.05) !important;
  overflow:hidden !important;
}
.compact-workflow-section .workflow-mini-tile svg{
  width:92px !important;
  height:112px !important;
  border-radius:0 !important;
}
.compact-workflow-section .workflow-mini-tile figcaption{
  padding:12px 13px !important;
  border-top:0 !important;
}
.compact-workflow-section .workflow-mini-tile figcaption strong{
  font-size:14px !important;
  line-height:1.25 !important;
  margin-bottom:4px !important;
}
.compact-workflow-section .workflow-mini-tile figcaption span:not(.workflow-step-label){
  font-size:12px !important;
  line-height:1.35 !important;
}
.workflow-step-label{
  display:inline-flex !important;
  width:max-content !important;
  padding:4px 8px !important;
  margin-bottom:7px !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  border:1px solid #d7e5ff !important;
  color:#145ff5 !important;
  font-size:11px !important;
  font-weight:650 !important;
}
.compact-workflow-section .workflow-mini-tile:not(:last-child){
  position:relative;
}
.compact-workflow-section .workflow-mini-tile:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-8px;
  top:50%;
  width:14px;
  height:2px;
  background:#b9cff5;
  z-index:2;
}
@media(max-width:1400px){
  .compact-workflow-section .photo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .compact-workflow-section .workflow-mini-tile:not(:last-child)::after{
    display:none !important;
  }
}
@media(max-width:720px){
  .compact-workflow-section{
    padding:14px !important;
  }
  .compact-workflow-section .photo-grid{
    grid-template-columns:1fr !important;
  }
  .compact-workflow-section .workflow-mini-tile{
    grid-template-columns:82px minmax(0,1fr) !important;
  }
  .compact-workflow-section .workflow-mini-tile svg{
    width:82px !important;
    height:104px !important;
  }
}


/* Compact workflow applied to "How to use each daily page" */
.compact-workflow-section .photo-section-head h2{
  letter-spacing:-.015em;
}


/* Multi-page site shell using the established website style plus Web1-style menu/submenu */
body{overflow-x:hidden}
.site-shell{display:flex;min-height:100vh}
.sidebar{
  position:fixed; inset:0 auto 0 0; width:292px; min-width:292px; z-index:300;
  background:#fff; border-right:1px solid #e2e8f0; box-shadow:1px 0 8px rgba(0,0,0,.06);
  overflow-y:auto; padding:0;
}
.sb-hd{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);padding:20px 18px;color:#fff}
.sb-hd-logo{display:flex;align-items:center;gap:10px}
.logo-icon{background:rgba(255,255,255,.2);border-radius:8px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.2em}
.sb-hd h2{font-size:.9em;font-weight:800;line-height:1.3;margin:0;color:#fff}
.sb-hd p{font-size:.72em;color:rgba(255,255,255,.82);margin:4px 0 0}
.sb-srch{padding:12px 14px;border-bottom:1px solid #e2e8f0;background:#fff}
.sb-srch-inner{display:flex;align-items:center;gap:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:7px 12px}
.sb-srch-inner input{border:none;background:transparent;font-size:.82em;outline:none;flex:1;color:#374151}
.sb-nav{padding-bottom:24px}
.sb-link,.sb-home{display:flex;align-items:center;gap:9px;padding:11px 16px;font-size:.84em;font-weight:600;color:#374151;border-bottom:1px solid #e2e8f0;text-decoration:none}
.sb-link:hover,.sb-home:hover,.sb-link.active{background:#f1f5f9;color:#4f46e5;text-decoration:none}
.ph-group{border-bottom:1px solid #e2e8f0}
.ph-hd{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;font-size:.79em;font-weight:700;color:#1e293b;background:#f8fafc}
.ph-hd-left{display:flex;align-items:center;gap:7px}
.ph-count{font-size:.68em;color:#6b7280;font-weight:500;margin-right:6px}
.ph-arrow{font-size:.68em;color:#6b7280;transition:.2s}
.ph-group.open .ph-arrow{transform:rotate(180deg)}
.day-items{display:none;background:#fff}
.ph-group.open .day-items{display:block}
.dl{display:block;padding:7px 14px 7px 32px;font-size:.78em;color:#6b7280;text-decoration:none;border-left:3px solid transparent;line-height:1.45}
.dl:hover{background:#f1f5f9;color:#374151;text-decoration:none}
.dl.active{background:#ede9fe;color:#4f46e5;border-left-color:#4f46e5;font-weight:600}
.dl-num{font-size:.68em;color:#94a3b8;margin-right:4px}
.main-area{margin-left:292px;min-height:100vh;width:calc(100% - 292px);background:#f7faff}
.top-strip{background:#fff;border-bottom:1px solid #e2e8f0;padding:0 24px;height:58px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:200}
.top-strip h3{font-size:.9em;margin:0;color:#1e293b}
.top-strip span{font-size:.72em;color:#64748b}
.page-container{padding:28px;max-width:1280px;margin:0 auto}
.page-card{background:#fff;border:1px solid #dfe8f6;border-radius:26px;box-shadow:0 14px 40px rgba(31,65,114,.07);padding:24px;margin-bottom:22px}
.page-title{font-size:40px;line-height:1.05;letter-spacing:-.035em;margin:0 0 10px;font-weight:650;color:#071832}
.page-subtitle{color:#5f7191;max-width:900px;margin:0}
.module-workflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.workflow-plan-card{border:1px solid #dfe8f6;border-radius:18px;background:#fff;padding:18px;box-shadow:0 10px 28px rgba(31,65,114,.05)}
.workflow-plan-card h3{font-size:18px;margin:0 0 8px;color:#071832}
.workflow-plan-card p{color:#5f7191;font-size:14px;margin:0 0 10px}
.workflow-plan-card a{font-weight:700;text-decoration:none}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tool-card{border:1px solid #dfe8f6;border-radius:14px;padding:14px;background:#fff}
.tool-card strong{display:block;color:#071832}
.tool-card span{display:block;font-size:13px;color:#5f7191;margin-top:4px}
.contact-email-card{text-align:center;padding:60px 24px}
.contact-email-card a{display:inline-flex;margin-top:18px;padding:14px 22px;border-radius:999px;background:#145ff5;color:#fff;font-weight:700;text-decoration:none}
.contact-email-card a:hover{text-decoration:none;filter:brightness(1.05)}
/* Day page style adapted from Web1 right pane */
.day-wrap{max-width:1180px;margin:0 auto;padding:28px}
.day-hd{border-radius:20px;padding:30px;margin-bottom:20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.10)}
.day-hd h1{font-size:1.8em;font-weight:800;line-height:1.25;margin:8px 0 10px;position:relative;z-index:1}
.day-hd .ov{font-size:.95em;opacity:.95;line-height:1.7;max-width:850px;position:relative;z-index:1}
.day-badge-row,.day-meta-row{display:flex;gap:7px;flex-wrap:wrap;position:relative;z-index:1}
.d-badge,.meta-chip{background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:4px 12px;font-size:.76em;font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.one-col{margin-bottom:16px}
.card{background:#fff;border-radius:14px;padding:20px;box-shadow:0 1px 4px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.05);border:1px solid #e2e8f0}
.card-title{font-size:.92em;font-weight:700;color:#4f46e5;padding-bottom:12px;border-bottom:1px solid #f1f5f9;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.obj-list,.steps-list,.check-list{list-style:none;margin:0;padding:0}
.obj-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f8fafc;font-size:.9em;line-height:1.6;align-items:flex-start}
.obj-check{background:#dcfce7;color:#16a34a;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:900;flex-shrink:0;margin-top:2px}
.study-item{padding:11px;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:9px;background:#fff}
.study-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.study-title{font-size:.88em;font-weight:600;flex:1;color:#1e293b;line-height:1.4}
.study-badge{font-size:.68em;padding:2px 8px;border-radius:10px;font-weight:700;flex-shrink:0;background:#dbeafe;color:#1e40af}
.study-url{font-size:.75em;color:#64748b;margin-bottom:3px;word-break:break-all}
.study-dur{font-size:.72em;color:#64748b}
.step-item{display:flex;gap:13px;padding:11px 0;border-bottom:1px solid #f8fafc;align-items:flex-start}
.step-num{min-width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.74em;font-weight:800;flex-shrink:0;margin-top:1px;color:#fff;background:#4f46e5}
.step-text{font-size:.9em;line-height:1.65;color:#1e293b;padding-top:3px}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:11px}
.res-card{background:#fafbff;border-left:3px solid #4f46e5;border-radius:8px;padding:13px;transition:all .18s;border:1px solid #e2e8f0}
.res-tag{display:inline-block;font-size:.65em;font-weight:700;padding:2px 8px;border-radius:9px;margin-bottom:6px;background:#4f46e5;color:#fff}
.res-card h4{font-size:.82em;font-weight:700;color:#1e293b;margin-bottom:4px;line-height:1.4}
.res-card p{font-size:.74em;color:#64748b;margin-bottom:6px;line-height:1.4}
.prompt-box{background:#fafbff;border:1px solid #e0e7ff;border-radius:9px;padding:16px;position:relative;margin-bottom:10px}
.prompt-box pre{white-space:pre-wrap;font-size:.86em;line-height:1.8;color:#1e293b;font-family:Inter,system-ui,sans-serif;padding-right:58px}
.copy-btn{position:absolute;top:10px;right:10px;background:#4f46e5;color:#fff;border:none;padding:4px 10px;border-radius:6px;font-size:.72em;font-weight:700;cursor:pointer}
.check-item{display:flex;align-items:flex-start;gap:11px;padding:9px 0;border-bottom:1px solid #f8fafc;font-size:.9em;cursor:pointer;line-height:1.55}
.check-item input{width:17px;height:17px;cursor:pointer;accent-color:#16a34a;flex-shrink:0;margin-top:2px}
.check-item.done label{text-decoration:line-through;color:#94a3b8}
.comp-btn{width:100%;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;border:none;padding:13px;border-radius:9px;font-size:.93em;font-weight:800;cursor:pointer;margin-bottom:8px}
.notes-ta{width:100%;min-height:140px;border:1.5px solid #e2e8f0;border-radius:9px;padding:12px;font-size:.9em;line-height:1.65;color:#1e293b;resize:vertical;background:#fff}
.save-btn{background:#4f46e5;color:#fff;border:none;padding:7px 20px;border-radius:7px;cursor:pointer;font-size:.82em;font-weight:700;margin-top:10px}
.bot-nav{display:flex;gap:10px;margin-top:20px;padding-bottom:40px}
.bot-nav a{flex:1;padding:12px;font-size:.85em;text-align:center;background:#4f46e5;color:#fff;border-radius:8px;text-decoration:none;font-weight:700}
.bot-nav a.ghost{background:#fff;color:#4f46e5;border:1px solid #4f46e5}
@media(max-width:900px){
  .sidebar{transform:translateX(-292px)}
  .sidebar.show{transform:translateX(0)}
  .main-area{margin-left:0;width:100%}
  .top-strip{padding:0 16px}
  .page-container,.day-wrap{padding:16px}
  .two-col{grid-template-columns:1fr}
}


/* Final polish: larger readable font + clean sidebar style + updated structure */
:root{
  --site-font-scale:1.06;
}
html{font-size:17px;}
body{
  font-size:16.5px !important;
  line-height:1.72 !important;
}
p, li, td, th, input, select, textarea, button{
  font-size:1rem;
}
.page-subtitle,
.card p,
.res-card p,
.study-url,
.study-dur,
.tool-card span{
  font-size:.96rem !important;
}
.card-title,
.study-title,
.step-text,
.obj-item,
.check-item{
  font-size:.98rem !important;
}
.page-title{
  font-size:2.65rem !important;
}

/* Clean left menu based on provided reference */
.sidebar{
  width:310px !important;
  min-width:310px !important;
  padding:22px 18px !important;
  background:#ffffff !important;
  border-right:1px solid #dbe6f4 !important;
  box-shadow:8px 0 30px rgba(31,65,114,.06) !important;
}
.main-area{
  margin-left:310px !important;
  width:calc(100% - 310px) !important;
}
.sb-hd{
  background:#ffffff !important;
  color:#071832 !important;
  padding:0 6px 28px !important;
  border-bottom:0 !important;
}
.sb-hd-logo{
  gap:14px !important;
}
.logo-icon{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#145ff5,#5c96ff) !important;
  color:#fff !important;
  box-shadow:0 16px 34px rgba(20,95,245,.22) !important;
  font-size:1.3rem !important;
}
.sb-hd h2{
  color:#071832 !important;
  font-size:1.26rem !important;
  font-weight:700 !important;
  letter-spacing:-.02em !important;
}
.sb-hd p{
  color:#64748b !important;
  font-size:.86rem !important;
  margin-top:2px !important;
}
.sb-srch{
  display:none !important;
}
.sb-nav{
  padding:4px 0 24px !important;
}
.sb-link,
.sb-home{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  min-height:56px !important;
  padding:14px 18px !important;
  margin:7px 0 !important;
  border:0 !important;
  border-radius:16px !important;
  color:#172946 !important;
  background:transparent !important;
  font-size:1.02rem !important;
  font-weight:500 !important;
  line-height:1.3 !important;
}
.sb-link span:first-child,
.sb-home span:first-child,
.ph-hd-left span:first-child{
  width:22px !important;
  display:inline-flex !important;
  justify-content:center !important;
  color:#3b5f8f !important;
  opacity:.86 !important;
  font-size:1rem !important;
}
.sb-link:hover,
.sb-home:hover,
.sb-link.active,
.sb-home.active{
  background:#eef5ff !important;
  color:#075ff0 !important;
  text-decoration:none !important;
}
.ph-group{
  border:0 !important;
  margin:7px 0 !important;
}
.ph-hd{
  min-height:56px !important;
  padding:14px 18px !important;
  border-radius:16px !important;
  background:transparent !important;
  color:#172946 !important;
  font-size:1.02rem !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
}
.ph-hd:hover,
.ph-group.open > .ph-hd{
  background:#eef5ff !important;
  color:#075ff0 !important;
}
.ph-hd-left{
  gap:16px !important;
}
.ph-count{
  display:none !important;
}
.ph-arrow{
  color:#075ff0 !important;
  font-size:.8rem !important;
}
.day-items{
  padding:4px 0 8px 44px !important;
  background:#ffffff !important;
}
.dl{
  padding:8px 10px 8px 10px !important;
  margin:2px 0 !important;
  border:0 !important;
  border-radius:10px !important;
  color:#64748b !important;
  font-size:.94rem !important;
  line-height:1.45 !important;
  font-weight:400 !important;
}
.dl:hover{
  background:#f3f7ff !important;
  color:#145ff5 !important;
}
.dl.active{
  background:#eef2ff !important;
  color:#145ff5 !important;
  border:0 !important;
  font-weight:600 !important;
}
.dl-num{
  font-size:.8rem !important;
  color:#94a3b8 !important;
}

/* Increase day page readability */
.day-hd h1{
  font-size:2rem !important;
}
.day-hd .ov{
  font-size:1.02rem !important;
}
.d-badge,.meta-chip{
  font-size:.86rem !important;
}
.study-item,
.res-card,
.workflow-plan-card,
.tool-card{
  font-size:1rem !important;
}
.notes-ta{
  font-size:1rem !important;
}

/* root/day responsive */
@media(max-width:900px){
  .sidebar{
    transform:translateX(-310px);
  }
  .sidebar.show{
    transform:translateX(0);
  }
  .main-area{
    margin-left:0 !important;
    width:100% !important;
  }
}


/* Final menu/search fixes */
.sb-srch{
  display:block !important;
  padding:0 0 14px !important;
  margin:0 0 10px !important;
  border-bottom:0 !important;
  background:transparent !important;
}
.sb-srch-inner{
  height:42px !important;
  border-radius:14px !important;
  background:#f8fafc !important;
  border:1px solid #dbe6f4 !important;
  padding:0 14px !important;
  color:#64748b !important;
}
.sb-srch-inner input{
  font-size:.95rem !important;
  color:#172946 !important;
}
.sb-srch-inner input::placeholder{
  color:#8493a8 !important;
}

/* Clean, centered submenu hierarchy */
.ph-group{
  position:relative;
}
.ph-hd{
  justify-content:space-between !important;
}
.ph-hd-left{
  min-width:0 !important;
}
.ph-hd-left span:last-child{
  white-space:normal !important;
}

/* IMPORTANT: nested groups must only open their own direct day list */
.ph-group > .day-items{
  display:none !important;
}
.ph-group.open > .day-items{
  display:block !important;
}

/* Keep All 365 Days menu clean */
#menu-all > .day-items{
  padding:6px 0 8px !important;
}
#menu-all > .day-items > .ph-group{
  margin:6px 0 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd{
  min-height:48px !important;
  margin:0 10px !important;
  padding:12px 14px !important;
  border-radius:14px !important;
  background:#ffffff !important;
}
#menu-all > .day-items > .ph-group.open > .ph-hd,
#menu-all > .day-items > .ph-group > .ph-hd:hover{
  background:#f3f7ff !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-hd-left{
  flex:1 !important;
  justify-content:center !important;
  text-align:center !important;
  gap:10px !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-arrow{
  margin-left:8px !important;
}

/* Day links are now centered under each submenu, not shifted too far right */
#menu-all > .day-items > .ph-group > .day-items{
  padding:4px 18px 10px !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl{
  max-width:190px !important;
  margin:3px auto !important;
  padding:7px 10px !important;
  text-align:left !important;
  font-size:.96rem !important;
  line-height:1.45 !important;
}

/* By Phase / By Month submenu links centered cleanly */
#menu-phase > .day-items,
#menu-month > .day-items{
  padding:4px 18px 10px !important;
}
#menu-phase .dl,
#menu-month .dl{
  max-width:220px !important;
  margin:3px auto !important;
  padding:8px 10px !important;
  font-size:.96rem !important;
}

/* Search results behavior */
.ph-group.search-open > .day-items{
  display:block !important;
}
.sidebar.searching .ph-group:not(.search-hit):not(.search-open){
  display:none !important;
}
.sidebar.searching .dl:not(.search-hit){
  display:none !important;
}
.sidebar.searching .sb-link:not(.search-hit),
.sidebar.searching .sb-home:not(.search-hit){
  display:none !important;
}
.search-empty{
  margin:12px 16px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  font-size:.9rem;
}


/* Refined All 365 Days submenu style: compact, readable, and professional */
#menu-all{
  margin-top:8px !important;
}
#menu-all > .ph-hd{
  background:#eef5ff !important;
  color:#075ff0 !important;
  border-radius:16px !important;
  font-weight:600 !important;
}
#menu-all > .day-items{
  padding:4px 0 12px !important;
  background:#ffffff !important;
}

/* Module headers inside All 365 Days */
#menu-all > .day-items > .ph-group{
  margin:0 !important;
  border-bottom:1px solid #eef2f7 !important;
}
#menu-all > .day-items > .ph-group:last-child{
  border-bottom:0 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd{
  min-height:38px !important;
  margin:0 !important;
  padding:9px 12px 9px 14px !important;
  border-radius:0 !important;
  background:#ffffff !important;
  color:#172946 !important;
  font-size:.86rem !important;
  font-weight:600 !important;
}
#menu-all > .day-items > .ph-group.open > .ph-hd{
  background:#f4f7ff !important;
  color:#145ff5 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd:hover{
  background:#f7faff !important;
  color:#145ff5 !important;
}

/* Do not center module headers anymore; keep a clear left-title / right-count layout */
#menu-all > .day-items > .ph-group > .ph-hd .ph-hd-left{
  justify-content:flex-start !important;
  text-align:left !important;
  gap:8px !important;
  flex:1 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-hd-left span:first-child{
  width:18px !important;
  font-size:.9rem !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-count{
  display:inline-flex !important;
  font-size:.68rem !important;
  color:#64748b !important;
  font-weight:500 !important;
  margin-right:6px !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-arrow{
  font-size:.66rem !important;
  color:#64748b !important;
}

/* Day links under module: readable, lightly indented, compact */
#menu-all > .day-items > .ph-group > .day-items{
  padding:2px 0 10px !important;
  background:#ffffff !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl{
  max-width:none !important;
  margin:0 !important;
  padding:6px 12px 6px 30px !important;
  border-radius:0 !important;
  text-align:left !important;
  color:#64748b !important;
  font-size:.88rem !important;
  line-height:1.42 !important;
  font-weight:400 !important;
  border-left:3px solid transparent !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl:hover{
  background:#f8fafc !important;
  color:#172946 !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl.active{
  background:#ede9fe !important;
  color:#4f46e5 !important;
  border-left-color:#4f46e5 !important;
  font-weight:600 !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl-num{
  font-size:.72rem !important;
  color:#94a3b8 !important;
  margin-right:4px !important;
}

/* Keep By Phase and By Month clean but separate from All Days style */
#menu-phase > .day-items,
#menu-month > .day-items{
  padding:6px 0 10px !important;
}
#menu-phase .dl,
#menu-month .dl{
  max-width:none !important;
  margin:0 !important;
  padding:7px 12px 7px 30px !important;
  border-radius:0 !important;
  text-align:left !important;
}


/* Final navigation style: All 365 Days clean pill + functional submenu layout */
#menu-all{
  margin:14px 0 8px !important;
}

/* Main All 365 Days row exactly as a clean large menu pill */
#menu-all > .ph-hd{
  min-height:58px !important;
  margin:8px 0 !important;
  padding:15px 18px !important;
  border-radius:16px !important;
  background:#eef5ff !important;
  color:#075ff0 !important;
  font-size:1.02rem !important;
  font-weight:600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
#menu-all > .ph-hd:hover{
  background:#e8f1ff !important;
}
#menu-all > .ph-hd .ph-hd-left{
  justify-content:flex-start !important;
  gap:16px !important;
  text-align:left !important;
}
#menu-all > .ph-hd .ph-hd-left span:first-child{
  width:22px !important;
  font-size:1rem !important;
  color:#3b5f8f !important;
}
#menu-all > .ph-hd .ph-arrow{
  color:#075ff0 !important;
  font-size:.9rem !important;
}

/* Only direct child list opens/closes, preventing nested menu bugs */
#menu-all > .day-items{
  display:none !important;
  padding:2px 0 8px !important;
  background:#ffffff !important;
}
#menu-all.open > .day-items{
  display:block !important;
}

/* Nested module rows under All 365 Days */
#menu-all > .day-items > .ph-group{
  margin:0 !important;
  border:0 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd{
  min-height:42px !important;
  margin:0 !important;
  padding:9px 12px 9px 22px !important;
  border-radius:10px !important;
  background:#ffffff !important;
  color:#172946 !important;
  font-size:.88rem !important;
  font-weight:600 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
#menu-all > .day-items > .ph-group > .ph-hd:hover,
#menu-all > .day-items > .ph-group.open > .ph-hd{
  background:#f4f7ff !important;
  color:#145ff5 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-hd-left{
  justify-content:flex-start !important;
  text-align:left !important;
  gap:8px !important;
  flex:1 !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-hd-left span:first-child{
  width:18px !important;
  font-size:.9rem !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-count{
  display:inline-flex !important;
  font-size:.68rem !important;
  color:#64748b !important;
  font-weight:500 !important;
  margin-right:6px !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-arrow{
  color:#64748b !important;
  font-size:.72rem !important;
}

/* Critical nested list behavior */
#menu-all > .day-items > .ph-group > .day-items{
  display:none !important;
  padding:0 0 10px !important;
  background:#ffffff !important;
}
#menu-all > .day-items > .ph-group.open > .day-items{
  display:block !important;
}

/* Compact day links below each module */
#menu-all > .day-items > .ph-group > .day-items .dl{
  max-width:none !important;
  margin:0 !important;
  padding:6px 12px 6px 34px !important;
  border-radius:0 !important;
  text-align:left !important;
  color:#64748b !important;
  font-size:.88rem !important;
  line-height:1.42 !important;
  font-weight:400 !important;
  border-left:3px solid transparent !important;
  display:block;
}
#menu-all > .day-items > .ph-group > .day-items .dl:hover{
  background:#f8fafc !important;
  color:#172946 !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl.active{
  background:#ede9fe !important;
  color:#4f46e5 !important;
  border-left-color:#4f46e5 !important;
  font-weight:600 !important;
}
#menu-all > .day-items > .ph-group > .day-items .dl-num{
  font-size:.72rem !important;
  color:#94a3b8 !important;
  margin-right:4px !important;
}

/* By Phase / By Month still function with same clean expand/collapse logic */
#menu-phase > .day-items,
#menu-month > .day-items{
  display:none !important;
}
#menu-phase.open > .day-items,
#menu-month.open > .day-items{
  display:block !important;
}

/* Search mode must still open matching groups */
.sidebar.searching .ph-group.search-open > .day-items,
.sidebar.searching .ph-group.search-hit > .day-items{
  display:block !important;
}


/* FINAL FIX: ensure arrows visibly rotate and are clickable */
.ph-hd{
  cursor:pointer !important;
  user-select:none !important;
}
.ph-arrow{
  pointer-events:none !important;
  display:inline-flex !important;
  transition:transform .18s ease !important;
}
.ph-group.open > .ph-hd .ph-arrow{
  transform:rotate(180deg) !important;
}
#menu-all > .day-items > .ph-group > .ph-hd .ph-arrow,
#menu-phase > .ph-hd .ph-arrow,
#menu-month > .ph-hd .ph-arrow,
#menu-all > .ph-hd .ph-arrow{
  pointer-events:none !important;
}

/* make sure nested groups do not inherit wrong display state */
#menu-all > .day-items{
  display:none !important;
}
#menu-all.open > .day-items{
  display:block !important;
}
#menu-all > .day-items > .ph-group > .day-items{
  display:none !important;
}
#menu-all > .day-items > .ph-group.open > .day-items{
  display:block !important;
}
#menu-phase > .day-items,
#menu-month > .day-items{
  display:none !important;
}
#menu-phase.open > .day-items,
#menu-month.open > .day-items{
  display:block !important;
}


/* Top header menu + sidebar-only learning library */
.site-top-header{
  position:sticky;
  top:0;
  z-index:450;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:14px 28px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #dfe8f6;
  box-shadow:0 8px 24px rgba(31,65,114,.06);
}
.top-brand a{
  color:#071832;
  text-decoration:none;
  font-weight:800;
  font-size:1.22rem;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.top-brand span{
  color:#145ff5;
  font-weight:650;
}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}
.top-nav-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:9px 13px;
  border-radius:999px;
  color:#172946;
  text-decoration:none;
  font-size:.94rem;
  font-weight:600;
  line-height:1;
}
.top-nav-link:hover{
  background:#eef5ff;
  color:#075ff0;
  text-decoration:none;
}
.top-nav-link.active{
  background:#145ff5;
  color:#fff;
  box-shadow:0 10px 22px rgba(20,95,245,.18);
}
.mobile-nav-toggle{
  display:none;
  border:1px solid #dbe6f4;
  background:#fff;
  color:#172946;
  border-radius:12px;
  width:44px;
  height:42px;
  font-size:1.25rem;
  cursor:pointer;
}
.learning-sidebar .learning-sidebar-title{
  padding:22px 18px 16px;
  border-bottom:1px solid #edf2f9;
}
.learning-sidebar .learning-sidebar-title strong{
  display:block;
  color:#071832;
  font-size:1.12rem;
  font-weight:750;
}
.learning-sidebar .learning-sidebar-title span{
  display:block;
  color:#64748b;
  font-size:.86rem;
  margin-top:2px;
}
.learning-sidebar .sb-nav > .sb-link,
.learning-sidebar .sb-nav > .sb-home{
  display:none!important;
}
.main-area{
  padding-top:0!important;
}
.top-strip{
  top:72px!important;
}
.site-footer{
  margin:34px 28px 0;
  padding:24px 22px;
  border-top:1px solid #dfe8f6;
  background:#fff;
  border-radius:22px 22px 0 0;
  text-align:center;
  box-shadow:0 -8px 24px rgba(31,65,114,.04);
}
.footer-nav{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-bottom:14px;
}
.footer-nav a{
  color:#145ff5;
  text-decoration:none;
  font-weight:650;
  font-size:.94rem;
}
.footer-nav a:hover{text-decoration:underline}
.footer-copy,.footer-powered{
  margin:4px 0;
  color:#64748b;
  font-size:.9rem;
}
.footer-powered{
  color:#071832;
  font-weight:650;
}

/* Certifications page */
.cert-flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
}
.cert-flow article{
  border:1px solid #dfe8f6;
  border-radius:18px;
  padding:18px;
  background:#fbfdff;
}
.cert-flow span{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#145ff5;
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
}
.cert-flow strong,.cert-flow small{
  display:block;
}
.cert-flow small{
  color:#64748b;
  margin-top:5px;
}
.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:16px;
}
.cert-grid article{
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:#fff;
  padding:20px;
  box-shadow:0 8px 22px rgba(31,65,114,.05);
}
.cert-grid h3{
  margin:0 0 8px;
  color:#071832;
  font-size:1.08rem;
}
.cert-grid p{
  color:#53647d;
}
.cert-grid li{
  margin:8px 0;
}
.cert-sequence li{
  margin:10px 0;
}

/* Keep only All 365 Days on left, styled as the learning library */
#menu-all{
  margin:0!important;
}
#menu-all > .ph-hd{
  margin:12px 12px 6px!important;
}

/* Responsive top navigation */
@media(max-width:1180px){
  .site-top-header{
    align-items:center;
    flex-wrap:wrap;
  }
  .mobile-nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .top-nav{
    display:none;
    width:100%;
    justify-content:flex-start;
    padding-top:10px;
    border-top:1px solid #edf2f9;
  }
  .top-nav.open{
    display:flex;
  }
}
@media(max-width:900px){
  .site-top-header{
    padding:12px 16px;
  }
  .top-brand a{
    font-size:1.04rem;
  }
  .site-footer{
    margin-left:16px;
    margin-right:16px;
  }
}


/* FINAL APPLY: centered top menu, full-width pages, breadcrumbs, and reliable left menu */
.site-top-header{
  position:sticky !important;
  top:0 !important;
  z-index:600 !important;
  min-height:74px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:18px !important;
  padding:14px 28px !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(14px) !important;
  border-bottom:1px solid #dfe8f6 !important;
  box-shadow:0 8px 24px rgba(31,65,114,.06) !important;
}
.top-brand{
  justify-self:start !important;
}
.top-brand a{
  color:#071832 !important;
  text-decoration:none !important;
  font-weight:800 !important;
  font-size:1.2rem !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
}
.top-brand span{
  color:#145ff5 !important;
  font-weight:650 !important;
}
.top-nav{
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}
.top-nav-link{
  display:inline-flex !important;
  align-items:center !important;
  min-height:40px !important;
  padding:9px 14px !important;
  border-radius:999px !important;
  color:#172946 !important;
  text-decoration:none !important;
  font-size:.94rem !important;
  font-weight:600 !important;
  line-height:1 !important;
}
.top-nav-link:hover{
  background:#eef5ff !important;
  color:#075ff0 !important;
  text-decoration:none !important;
}
.top-nav-link.active{
  background:#145ff5 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(20,95,245,.18) !important;
}
.mobile-nav-toggle{
  justify-self:end !important;
}

/* Breadcrumb on every page */
.breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:18px 30px 0 !important;
  color:#64748b !important;
  font-size:.92rem !important;
}
.breadcrumb a{
  color:#145ff5 !important;
  font-weight:600 !important;
  text-decoration:none !important;
}
.breadcrumb a:hover{
  text-decoration:underline !important;
}
.breadcrumb span{
  color:#94a3b8 !important;
}
.breadcrumb strong{
  color:#071832 !important;
  font-weight:650 !important;
}

/* Expand pages away from boxed feeling */
.page-container,
.day-wrap{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding-left:30px !important;
  padding-right:30px !important;
}
.hero,
.dashboard-hero,
.hero-full,
.day-hd{
  border-radius:0 !important;
  margin-left:-30px !important;
  margin-right:-30px !important;
  border-left:0 !important;
  border-right:0 !important;
}
.page-card{
  max-width:none !important;
}
.main-area{
  min-width:0 !important;
}

/* Left menu arrow fix */
.ph-hd{
  cursor:pointer !important;
  user-select:none !important;
}
.ph-arrow{
  pointer-events:none !important;
  display:inline-flex !important;
  transition:transform .18s ease !important;
}
.ph-group.open > .ph-hd .ph-arrow{
  transform:rotate(180deg) !important;
}
#menu-all > .day-items{
  display:none !important;
}
#menu-all.open > .day-items{
  display:block !important;
}
#menu-all > .day-items > .ph-group > .day-items{
  display:none !important;
}
#menu-all > .day-items > .ph-group.open > .day-items{
  display:block !important;
}

/* Responsive hamburger */
@media(max-width:1180px){
  .site-top-header{
    grid-template-columns:auto auto !important;
    justify-content:space-between !important;
  }
  .mobile-nav-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .top-nav{
    display:none !important;
    grid-column:1 / -1 !important;
    width:100% !important;
    justify-content:flex-start !important;
    padding-top:12px !important;
    border-top:1px solid #edf2f9 !important;
  }
  .top-nav.open{
    display:flex !important;
  }
}
@media(max-width:900px){
  .site-top-header{
    padding:12px 16px !important;
  }
  .top-brand a{
    font-size:1.04rem !important;
  }
  .page-container,
  .day-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .hero,
  .dashboard-hero,
  .hero-full,
  .day-hd{
    margin-left:-16px !important;
    margin-right:-16px !important;
  }
  .breadcrumb{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* PREVIEW UPDATE: clean, no-payment version with interactive workflow cards */

/* top menu: Home label and clean centered nav retained */
.top-nav-link{
  white-space:nowrap;
}

/* stronger, reliable breadcrumbs */
.breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  padding:18px 30px 0 !important;
  color:#64748b !important;
  font-size:.92rem !important;
}
.breadcrumb a{
  color:#145ff5 !important;
  font-weight:650 !important;
  text-decoration:none !important;
}
.breadcrumb a:hover{text-decoration:underline !important}
.breadcrumb span{color:#94a3b8 !important}
.breadcrumb strong{color:#071832 !important;font-weight:700 !important}

/* fixed left navigation arrows */
.ph-hd{
  cursor:pointer !important;
  user-select:none !important;
}
.ph-arrow{
  pointer-events:none !important;
  display:inline-flex !important;
  transition:transform .18s ease !important;
}
.ph-group.open > .ph-hd .ph-arrow{
  transform:rotate(180deg) !important;
}
#menu-all > .day-items{
  display:none !important;
}
#menu-all.open > .day-items{
  display:block !important;
}
#menu-all > .day-items > .ph-group > .day-items{
  display:none !important;
}
#menu-all > .day-items > .ph-group.open > .day-items{
  display:block !important;
}

/* Convert selected homepage sections to process/card workflow style */
.interactive-workflow-section{
  border-radius:24px !important;
  border:1px solid #dfe8f6 !important;
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%) !important;
  box-shadow:0 16px 44px rgba(31,65,114,.08) !important;
  padding:26px !important;
  overflow:hidden !important;
}
.interactive-workflow-section > h2{
  font-size:1.65rem !important;
  letter-spacing:-.02em !important;
  margin-bottom:8px !important;
}
.interactive-workflow-section > p,
.interactive-workflow-section .muted{
  max-width:920px;
  color:#53647d !important;
}
.process-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;
  gap:16px !important;
  margin-top:18px !important;
}
.process-card{
  position:relative !important;
  border:1px solid #dfe8f6 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  padding:18px 18px 18px !important;
  box-shadow:0 10px 28px rgba(31,65,114,.055) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  overflow:hidden !important;
}
.process-card:hover{
  transform:translateY(-3px) !important;
  border-color:#b9cff5 !important;
  box-shadow:0 18px 42px rgba(31,65,114,.10) !important;
}
.process-card:after{
  content:"" !important;
  position:absolute !important;
  right:-38px !important;
  top:-38px !important;
  width:110px !important;
  height:110px !important;
  border-radius:50% !important;
  background:rgba(20,95,245,.07) !important;
}
.process-number{
  display:inline-grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  border-radius:10px !important;
  background:#2563eb !important;
  color:#fff !important;
  font-size:.82rem !important;
  font-weight:850 !important;
  margin-bottom:12px !important;
  box-shadow:0 10px 18px rgba(37,99,235,.18) !important;
}
.process-card h3{
  margin:0 0 8px !important;
  font-size:1.05rem !important;
  color:#071832 !important;
  font-weight:750 !important;
}
.process-card p,
.process-card li{
  color:#31445f !important;
  font-size:.94rem !important;
  line-height:1.62 !important;
}
.process-card ul{
  margin-top:8px !important;
  padding-left:18px !important;
}
.phase-card-grid .process-card:nth-child(2n) .process-number{background:#0f9f75 !important}
.phase-card-grid .process-card:nth-child(3n) .process-number{background:#f59e0b !important}
.operating-card-grid .process-card,
.evidence-card-grid .process-card{
  min-height:100%;
}
.interactive-workflow-section .callout{
  margin-top:18px !important;
  border-radius:18px !important;
  border:1px solid #f8dfaa !important;
  background:#fffaf0 !important;
}

/* More card-like treatment for option groups across pages */
.module-workflow,
.tools-grid,
.cert-flow,
.cert-grid,
.resource-grid,
.grid.three,
.grid.two{
  gap:16px !important;
}
.module-workflow > *,
.tools-grid > *,
.cert-flow > *,
.cert-grid > *,
.grid.three > *,
.grid.two > *{
  border-radius:18px !important;
}
.page-card,
.card.web-card{
  border-radius:24px !important;
}

/* no payment pages/nav in preview */
.account-access-link,
.top-actions,
a[href*="pricing.html"],
a[href*="login.html"],
a[href*="dashboard.html"],
a[href*="checkout.html"]{
  display:none !important;
}

@media(max-width:900px){
  .breadcrumb{padding-left:16px !important;padding-right:16px !important}
  .interactive-workflow-section{padding:20px !important}
  .process-card-grid{grid-template-columns:1fr !important}
}


/* Card color/shade enhancement inspired by process-flow examples */
.card,
.page-card,
.web-card,
.workflow-plan-card,
.tool-card,
.res-card,
.cert-grid article,
.member-main,
.member-sidebar,
.day-content section,
.prompt-card,
.notes-panel-card,
.workflow-card,
.process-card,
.lesson-card,
.study-item{
  position:relative;
  overflow:hidden;
}
.card::before,
.page-card::before,
.web-card::before,
.workflow-plan-card::before,
.tool-card::before,
.res-card::before,
.cert-grid article::before,
.process-card::before,
.lesson-card::before,
.study-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
  opacity:.95;
}
.card:nth-of-type(2n)::before,
.page-card:nth-of-type(2n)::before,
.web-card:nth-of-type(2n)::before,
.workflow-plan-card:nth-of-type(2n)::before,
.tool-card:nth-of-type(2n)::before,
.res-card:nth-of-type(2n)::before,
.cert-grid article:nth-of-type(2n)::before,
.process-card:nth-of-type(2n)::before,
.lesson-card:nth-of-type(2n)::before,
.study-item:nth-of-type(2n)::before{
  background:linear-gradient(180deg,#34d399,#10b981);
}
.card:nth-of-type(3n)::before,
.page-card:nth-of-type(3n)::before,
.web-card:nth-of-type(3n)::before,
.workflow-plan-card:nth-of-type(3n)::before,
.tool-card:nth-of-type(3n)::before,
.res-card:nth-of-type(3n)::before,
.cert-grid article:nth-of-type(3n)::before,
.process-card:nth-of-type(3n)::before,
.lesson-card:nth-of-type(3n)::before,
.study-item:nth-of-type(3n)::before{
  background:linear-gradient(180deg,#facc15,#f59e0b);
}
.card:nth-of-type(4n)::before,
.page-card:nth-of-type(4n)::before,
.web-card:nth-of-type(4n)::before,
.workflow-plan-card:nth-of-type(4n)::before,
.tool-card:nth-of-type(4n)::before,
.res-card:nth-of-type(4n)::before,
.cert-grid article:nth-of-type(4n)::before,
.process-card:nth-of-type(4n)::before,
.lesson-card:nth-of-type(4n)::before,
.study-item:nth-of-type(4n)::before{
  background:linear-gradient(180deg,#a78bfa,#7c3aed);
}

/* Soft colored card backgrounds without changing the site layout */
.process-card,
.workflow-plan-card,
.cert-grid article,
.tool-card,
.res-card,
.lesson-card,
.study-item{
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
}
.process-card:nth-of-type(2n),
.workflow-plan-card:nth-of-type(2n),
.cert-grid article:nth-of-type(2n),
.tool-card:nth-of-type(2n),
.res-card:nth-of-type(2n),
.lesson-card:nth-of-type(2n),
.study-item:nth-of-type(2n){
  background:linear-gradient(135deg,#ffffff 0%,#f2fff9 100%) !important;
}
.process-card:nth-of-type(3n),
.workflow-plan-card:nth-of-type(3n),
.cert-grid article:nth-of-type(3n),
.tool-card:nth-of-type(3n),
.res-card:nth-of-type(3n),
.lesson-card:nth-of-type(3n),
.study-item:nth-of-type(3n){
  background:linear-gradient(135deg,#ffffff 0%,#fffdf0 100%) !important;
}
.process-card:nth-of-type(4n),
.workflow-plan-card:nth-of-type(4n),
.cert-grid article:nth-of-type(4n),
.tool-card:nth-of-type(4n),
.res-card:nth-of-type(4n),
.lesson-card:nth-of-type(4n),
.study-item:nth-of-type(4n){
  background:linear-gradient(135deg,#ffffff 0%,#f7f4ff 100%) !important;
}

/* Certification official links */
.cert-link-row{
  margin:12px 0 4px;
}
.cert-official-link{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #d7e5ff;
  color:#145ff5;
  font-weight:750;
  font-size:.88rem;
  text-decoration:none;
}
.cert-official-link:hover{
  background:#145ff5;
  color:#fff;
  text-decoration:none;
}

/* Interactive Suggested Certification Sequence */
.cert-sequence-workflow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:18px;
}
.cert-sequence-card{
  position:relative;
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  padding:18px;
  box-shadow:0 10px 28px rgba(31,65,114,.055);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.cert-sequence-card:hover{
  transform:translateY(-3px);
  border-color:#b9cff5;
  box-shadow:0 18px 42px rgba(31,65,114,.10);
}
.cert-sequence-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
}
.cert-sequence-card:nth-child(2)::before{background:linear-gradient(180deg,#34d399,#10b981)}
.cert-sequence-card:nth-child(3)::before{background:linear-gradient(180deg,#facc15,#f59e0b)}
.cert-sequence-card:nth-child(4)::before{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.cert-sequence-card:nth-child(5)::before{background:linear-gradient(180deg,#fb7185,#e11d48)}
.sequence-number{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:12px;
  background:#2563eb;
  color:#fff;
  font-weight:850;
  margin-bottom:12px;
  box-shadow:0 10px 18px rgba(37,99,235,.18);
}
.cert-sequence-card:nth-child(2) .sequence-number{background:#10b981}
.cert-sequence-card:nth-child(3) .sequence-number{background:#f59e0b}
.cert-sequence-card:nth-child(4) .sequence-number{background:#7c3aed}
.cert-sequence-card:nth-child(5) .sequence-number{background:#e11d48}
.cert-sequence-card h3{
  margin:0 0 8px;
  color:#071832;
  font-size:1.05rem;
}
.cert-sequence-card p{
  color:#31445f;
  margin:0 0 10px;
}
.cert-sequence-card small{
  display:block;
  color:#64748b;
  font-weight:650;
  background:#f8fafc;
  border:1px solid #edf2f7;
  border-radius:12px;
  padding:8px 10px;
}

/* Process-flow feel for homepage workflows */
.process-card-grid .process-card:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-13px;
  top:50%;
  transform:translateY(-50%);
  color:#2563eb;
  font-weight:900;
  z-index:3;
}
@media(max-width:1000px){
  .process-card-grid .process-card:not(:last-child)::after{
    display:none;
  }
}


/* FINAL SHADE FIX: remove left shades from outer/wrapper cards, keep shades on inner cards only */

/* Outer page containers should NOT have colored left bars */
.page-card::before,
.card::before,
.web-card::before,
.interactive-workflow-section::before,
.cert-grid-card::before,
.cert-hero-card::before,
.photo-gallery-section::before,
.toolbar::before,
.day-card::before,
.day-wrap::before,
.membership-section::before,
.member-main::before,
.member-sidebar::before{
  display:none !important;
  content:none !important;
}

/* Outer cards keep clean borders and spacing */
.page-card,
.card,
.web-card,
.interactive-workflow-section,
.cert-grid-card,
.cert-hero-card,
.photo-gallery-section,
.toolbar,
.day-card{
  border-left:1px solid #dfe8f6 !important;
}

/* Inner cards keep tasteful left shade bars */
.process-card::before,
.workflow-plan-card::before,
.tool-card::before,
.res-card::before,
.cert-grid article::before,
.cert-sequence-card::before,
.lesson-card::before,
.study-item::before,
.payment-card::before,
.dashboard-stats article::before,
.member-dashboard-grid article::before,
.cert-flow article::before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:5px !important;
  border-radius:18px 0 0 18px !important;
  background:linear-gradient(180deg,#60a5fa,#2563eb) !important;
  opacity:.95 !important;
}

.process-card:nth-of-type(2n)::before,
.workflow-plan-card:nth-of-type(2n)::before,
.tool-card:nth-of-type(2n)::before,
.res-card:nth-of-type(2n)::before,
.cert-grid article:nth-of-type(2n)::before,
.cert-sequence-card:nth-of-type(2n)::before,
.lesson-card:nth-of-type(2n)::before,
.study-item:nth-of-type(2n)::before,
.payment-card:nth-of-type(2n)::before,
.dashboard-stats article:nth-of-type(2n)::before,
.member-dashboard-grid article:nth-of-type(2n)::before,
.cert-flow article:nth-of-type(2n)::before{
  background:linear-gradient(180deg,#34d399,#10b981) !important;
}

.process-card:nth-of-type(3n)::before,
.workflow-plan-card:nth-of-type(3n)::before,
.tool-card:nth-of-type(3n)::before,
.res-card:nth-of-type(3n)::before,
.cert-grid article:nth-of-type(3n)::before,
.cert-sequence-card:nth-of-type(3n)::before,
.lesson-card:nth-of-type(3n)::before,
.study-item:nth-of-type(3n)::before,
.payment-card:nth-of-type(3n)::before,
.dashboard-stats article:nth-of-type(3n)::before,
.member-dashboard-grid article:nth-of-type(3n)::before,
.cert-flow article:nth-of-type(3n)::before{
  background:linear-gradient(180deg,#facc15,#f59e0b) !important;
}

.process-card:nth-of-type(4n)::before,
.workflow-plan-card:nth-of-type(4n)::before,
.tool-card:nth-of-type(4n)::before,
.res-card:nth-of-type(4n)::before,
.cert-grid article:nth-of-type(4n)::before,
.cert-sequence-card:nth-of-type(4n)::before,
.lesson-card:nth-of-type(4n)::before,
.study-item:nth-of-type(4n)::before,
.payment-card:nth-of-type(4n)::before,
.dashboard-stats article:nth-of-type(4n)::before,
.member-dashboard-grid article:nth-of-type(4n)::before,
.cert-flow article:nth-of-type(4n)::before{
  background:linear-gradient(180deg,#a78bfa,#7c3aed) !important;
}

/* Ensure inner cards have enough padding so shade does not touch text */
.process-card,
.workflow-plan-card,
.tool-card,
.res-card,
.cert-grid article,
.cert-sequence-card,
.lesson-card,
.study-item,
.payment-card,
.dashboard-stats article,
.member-dashboard-grid article,
.cert-flow article{
  position:relative !important;
  padding-left:22px !important;
  overflow:hidden !important;
}

/* Specific fix for nested workflow sections: outer container clean, inner cards accented */
.interactive-workflow-section{
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%) !important;
}
.interactive-workflow-section > .process-card-grid > .process-card{
  border-left:1px solid #dfe8f6 !important;
}

/* Remove any accidental large outer vertical lines caused by earlier rules */
.page-container > .page-card,
.day-wrap > .card,
.main-area > .page-card{
  box-shadow:0 14px 40px rgba(31,65,114,.07) !important;
}


/* Numbered day-page section headings */
.day-wrap .numbered-day-section{
  margin:0 0 24px !important;
  border-radius:18px !important;
  border:1px solid #dfe8f6 !important;
  background:#ffffff !important;
  box-shadow:0 10px 28px rgba(31,65,114,.055) !important;
  padding:0 !important;
  overflow:hidden !important;
}
.numbered-section-title{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  padding:18px 24px 12px !important;
  border-bottom:0 !important;
}
.section-number-badge{
  display:inline-grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  border-radius:8px !important;
  background:#2563eb !important;
  color:#ffffff !important;
  font-size:.9rem !important;
  font-weight:850 !important;
  box-shadow:0 8px 18px rgba(37,99,235,.20) !important;
  flex-shrink:0 !important;
}
.numbered-section-title h2{
  margin:0 !important;
  font-size:1.28rem !important;
  line-height:1.25 !important;
  color:#071832 !important;
  font-weight:800 !important;
}
.numbered-day-section > :not(.numbered-section-title){
  margin-left:24px !important;
  margin-right:24px !important;
}
.numbered-day-section > :last-child{
  margin-bottom:22px !important;
}
.numbered-day-section .obj-list,
.numbered-day-section .steps-list,
.numbered-day-section .check-list{
  margin-top:4px !important;
}
.numbered-day-section .res-grid{
  margin-top:6px !important;
  margin-bottom:22px !important;
}
.numbered-day-section .prompt-box{
  margin-top:8px !important;
  margin-bottom:14px !important;
}
.numbered-day-section .notes-ta{
  margin-top:6px !important;
  margin-bottom:12px !important;
}
.numbered-day-section .save-btn{
  margin-bottom:22px !important;
}
.day-wrap > .numbered-day-section:nth-of-type(2n) .section-number-badge{
  background:#0f9f75 !important;
  box-shadow:0 8px 18px rgba(15,159,117,.20) !important;
}
.day-wrap > .numbered-day-section:nth-of-type(3n) .section-number-badge{
  background:#f59e0b !important;
  box-shadow:0 8px 18px rgba(245,158,11,.20) !important;
}
.day-wrap > .numbered-day-section:nth-of-type(4n) .section-number-badge{
  background:#7c3aed !important;
  box-shadow:0 8px 18px rgba(124,58,237,.20) !important;
}

/* All seven sections full-width and ordered like the provided example */
.day-wrap .two-col{
  display:block !important;
}
.day-wrap .numbered-day-section.card.one-col{
  width:100% !important;
}

/* Remove older card-title styling on day pages after numbering */
.day-wrap .numbered-day-section .card-title{
  display:none !important;
}

/* Resource section enrichment */
.auto-resource-card{
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%) !important;
}
@media(max-width:760px){
  .numbered-section-title{
    padding:16px 18px 10px !important;
  }
  .numbered-day-section > :not(.numbered-section-title){
    margin-left:18px !important;
    margin-right:18px !important;
  }
  .numbered-section-title h2{
    font-size:1.1rem !important;
  }
}


/* FINAL LAYOUT FIX: full-width top header, sidebar below header, back-to-top */

/* Header stretches from very left to very right */
.site-top-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:1000 !important;
  min-height:76px !important;
  margin:0 !important;
  border-radius:0 !important;
  padding-left:34px !important;
  padding-right:34px !important;
  box-shadow:0 8px 24px rgba(31,65,114,.07) !important;
}

/* Body gets top room because header is fixed */
body{
  padding-top:76px !important;
}

/* Sidebar begins under the top header */
.sidebar,
.learning-sidebar{
  top:76px !important;
  height:calc(100vh - 76px) !important;
  padding-top:0 !important;
}

/* Keep sidebar title slightly below header edge */
.learning-sidebar-title{
  padding-top:22px !important;
}

/* Main area begins under header and stays next to sidebar */
.main-area{
  padding-top:0 !important;
}

/* Remove sticky top offset conflicts */
.top-strip{
  top:76px !important;
}

/* Breadcrumb should sit neatly below header */
.breadcrumb{
  padding-top:22px !important;
}

/* When page has fixed header, top anchor should not hide behind it */
html{
  scroll-padding-top:94px !important;
  scroll-behavior:smooth !important;
}

/* Back to Top button */
.back-to-top{
  position:fixed !important;
  right:24px !important;
  bottom:24px !important;
  z-index:1200 !important;
  width:48px !important;
  height:48px !important;
  border:0 !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#145ff5,#5c96ff) !important;
  color:#ffffff !important;
  font-size:1.35rem !important;
  font-weight:900 !important;
  cursor:pointer !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:0 16px 34px rgba(20,95,245,.24) !important;
  opacity:0 !important;
  transform:translateY(12px) !important;
  pointer-events:none !important;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.back-to-top.show{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}
.back-to-top:hover{
  box-shadow:0 20px 44px rgba(20,95,245,.34) !important;
  transform:translateY(-3px) !important;
}

/* Mobile layout */
@media(max-width:900px){
  .site-top-header{
    min-height:70px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  body{
    padding-top:70px !important;
  }
  .sidebar,
  .learning-sidebar{
    top:70px !important;
    height:auto !important;
  }
  .back-to-top{
    right:16px !important;
    bottom:16px !important;
    width:44px !important;
    height:44px !important;
  }
}


/* Home link fixes and interactive month map */
.journey-card span:last-child{
  min-width:max-content;
  color:#145ff5;
  font-weight:800;
}
.card-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  margin-top:14px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:#eef5ff;
  border:1px solid #d7e5ff;
  color:#145ff5 !important;
  font-weight:750;
  font-size:.88rem;
  text-decoration:none !important;
  position:relative;
  z-index:5;
}
.card-action-link:hover{
  background:#145ff5;
  color:#fff !important;
}
.interactive-month-map{
  border-radius:24px !important;
  border:1px solid #dfe8f6 !important;
  background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%) !important;
  box-shadow:0 16px 44px rgba(31,65,114,.08) !important;
  padding:26px !important;
  overflow:hidden;
}
.month-timeline-chart{
  margin:18px 0 20px;
  padding:18px;
  border:1px solid #dfe8f6;
  border-radius:20px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  box-shadow:0 10px 28px rgba(31,65,114,.05);
}
.month-chart-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:14px;
}
.month-chart-head strong{
  color:#071832;
  font-size:1.08rem;
}
.month-chart-head span{
  color:#64748b;
  font-size:.92rem;
}
.month-bars{
  height:150px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:end;
  gap:8px;
  padding-top:10px;
}
.month-bars span{
  height:var(--h);
  min-height:34px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 0 8px;
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(180deg,#5c96ff,#145ff5);
  color:#fff;
  font-size:.78rem;
  font-weight:850;
  box-shadow:0 10px 22px rgba(20,95,245,.16);
}
.month-bars span:nth-child(2n){
  background:linear-gradient(180deg,#34d399,#0f9f75);
}
.month-bars span:nth-child(3n){
  background:linear-gradient(180deg,#facc15,#f59e0b);
}
.month-bars span:nth-child(4n){
  background:linear-gradient(180deg,#a78bfa,#7c3aed);
}
.month-map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:18px;
}
.month-map-card{
  position:relative;
  overflow:hidden;
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  padding:18px;
  box-shadow:0 10px 28px rgba(31,65,114,.055);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.month-map-card:hover{
  transform:translateY(-3px);
  border-color:#b9cff5;
  box-shadow:0 18px 42px rgba(31,65,114,.10);
}
.month-map-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
}
.month-map-card:nth-child(2n):before{background:linear-gradient(180deg,#34d399,#10b981)}
.month-map-card:nth-child(3n):before{background:linear-gradient(180deg,#facc15,#f59e0b)}
.month-map-card:nth-child(4n):before{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.month-number{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:#145ff5;
  color:#fff;
  font-weight:850;
  box-shadow:0 10px 18px rgba(20,95,245,.18);
  margin-bottom:12px;
}
.month-map-card:nth-child(2n) .month-number{background:#0f9f75}
.month-map-card:nth-child(3n) .month-number{background:#f59e0b}
.month-map-card:nth-child(4n) .month-number{background:#7c3aed}
.month-map-card h3{
  margin:0 0 6px;
  color:#071832;
  font-size:1.12rem;
}
.month-days{
  margin:0 0 8px;
  color:#145ff5;
  font-weight:750;
}
.month-focus{
  color:#31445f;
  line-height:1.55;
}
.month-level{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dfe8f6;
  color:#64748b;
  font-size:.82rem;
  font-weight:700;
}
@media(max-width:760px){
  .month-chart-head{display:block}
  .month-bars{height:120px;gap:5px}
  .month-bars span{font-size:.68rem}
}


/* FINAL FIX: Start Your Journey overlap + light Progress Rhythm */

/* Start Your Journey: prevent overlap between CTA and adjacent cards/images */
.journey-section{
  overflow:hidden !important;
}
.journey-grid{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
.journey-card{
  display:grid !important;
  grid-template-columns:132px minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;
  min-width:0 !important;
  overflow:hidden !important;
  padding:20px !important;
}
.journey-card > span{
  display:none !important;
}
.journey-card > div:not(.journey-art){
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}
.journey-card h3,
.journey-card p{
  max-width:100% !important;
  overflow-wrap:break-word !important;
}
.journey-card p{
  margin-bottom:12px !important;
}
.journey-art{
  width:132px !important;
  height:132px !important;
  flex:0 0 132px !important;
  display:grid !important;
  place-items:center !important;
  font-size:2.2rem !important;
}
.journey-cta-row{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:8px !important;
  margin-top:auto !important;
  width:100% !important;
}
.journey-days-badge,
.journey-open-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
}
.journey-days-badge{
  color:#145ff5 !important;
  background:#f8fbff !important;
  border:1px solid #dfe8f6 !important;
}
.journey-open-btn{
  color:#145ff5 !important;
  background:#eef5ff !important;
  border:1px solid #d7e5ff !important;
}
.journey-card:hover .journey-open-btn{
  background:#145ff5 !important;
  color:#fff !important;
}

/* Never allow two CTA/buttons to appear on the same line in journey cards */
.journey-cta-row > *{
  width:max-content !important;
  max-width:100% !important;
}

/* Light progress rhythm: replace dark bars with a soft timeline */
.month-timeline-chart{
  background:linear-gradient(135deg,#ffffff,#fbfdff) !important;
  border:1px solid #dfe8f6 !important;
  border-radius:20px !important;
  box-shadow:0 10px 28px rgba(31,65,114,.045) !important;
  padding:20px !important;
  overflow:hidden !important;
}
.month-chart-head{
  align-items:flex-start !important;
}
.month-chart-head strong{
  display:inline-flex !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:#eef5ff !important;
  color:#145ff5 !important;
  font-size:1rem !important;
}
.soft-progress-track{
  position:relative !important;
  padding:24px 4px 4px !important;
}
.soft-progress-line{
  position:absolute !important;
  left:28px !important;
  right:28px !important;
  top:48px !important;
  height:6px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,#dbeafe,#dcfce7,#fef3c7,#ede9fe,#e0f2fe) !important;
  border:1px solid rgba(148,163,184,.20) !important;
}
.soft-months{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(12,minmax(82px,1fr)) !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding-bottom:8px !important;
}
.soft-months span{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  min-width:82px !important;
  text-align:center !important;
}
.soft-months b{
  width:48px !important;
  height:48px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  color:#145ff5 !important;
  background:#ffffff !important;
  border:2px solid #bfdbfe !important;
  box-shadow:0 8px 18px rgba(31,65,114,.08) !important;
}
.soft-months span:nth-child(2n) b{
  color:#0f766e !important;
  border-color:#bbf7d0 !important;
}
.soft-months span:nth-child(3n) b{
  color:#b45309 !important;
  border-color:#fde68a !important;
}
.soft-months span:nth-child(4n) b{
  color:#6d28d9 !important;
  border-color:#ddd6fe !important;
}
.soft-months small{
  color:#64748b !important;
  font-weight:650 !important;
  font-size:.76rem !important;
  line-height:1.25 !important;
}

@media(max-width:900px){
  .journey-grid{
    grid-template-columns:1fr !important;
  }
  .journey-card{
    grid-template-columns:104px minmax(0,1fr) !important;
    padding:16px !important;
  }
  .journey-art{
    width:104px !important;
    height:104px !important;
    flex-basis:104px !important;
  }
}
@media(max-width:560px){
  .journey-card{
    grid-template-columns:1fr !important;
  }
  .journey-art{
    width:100% !important;
    height:96px !important;
  }
}


/* Enhanced About Us page */
.about-us-page{
  max-width:none !important;
}
.about-hero-card,
.about-section-card,
.about-final-card{
  position:relative;
  overflow:hidden;
}
.about-hero-card{
  background:linear-gradient(135deg,#ffffff 0%,#f4f8ff 65%,#eaf3ff 100%) !important;
}
.about-hero-card .eyebrow{
  display:inline-flex;
  padding:6px 11px;
  border-radius:999px;
  background:#eef5ff;
  color:#145ff5;
  border:1px solid #d7e5ff;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.about-hero-card p,
.about-section-card p,
.about-final-card p{
  color:#31445f;
  line-height:1.78;
  font-size:1.02rem;
}
.about-section-card h2,
.about-final-card h2{
  color:#071832;
  font-size:1.75rem;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 14px;
}
.about-focus-grid,
.about-audience-grid,
.about-difference-grid,
.about-approach-flow{
  display:grid;
  gap:16px;
  margin:20px 0;
}
.about-focus-grid{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.about-focus-grid article,
.about-audience-grid article,
.about-difference-grid article,
.about-approach-flow article{
  position:relative;
  border:1px solid #dfe8f6;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
  padding:18px;
  box-shadow:0 10px 28px rgba(31,65,114,.055);
  overflow:hidden;
}
.about-focus-grid article:before,
.about-audience-grid article:before,
.about-difference-grid article:before,
.about-approach-flow article:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
}
.about-focus-grid article:nth-child(2n):before,
.about-audience-grid article:nth-child(2n):before,
.about-difference-grid article:nth-child(2n):before,
.about-approach-flow article:nth-child(2n):before{
  background:linear-gradient(180deg,#34d399,#10b981);
}
.about-focus-grid article:nth-child(3n):before,
.about-audience-grid article:nth-child(3n):before,
.about-difference-grid article:nth-child(3n):before,
.about-approach-flow article:nth-child(3n):before{
  background:linear-gradient(180deg,#facc15,#f59e0b);
}
.about-focus-grid h3{
  margin:0 0 8px;
  color:#071832;
  font-size:1.08rem;
}
.about-focus-grid p{
  margin:0;
  font-size:.96rem;
}
.about-audience-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.about-audience-grid span,
.about-approach-flow span{
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:34px;
  border-radius:10px;
  background:#145ff5;
  color:#fff;
  font-weight:850;
  margin-bottom:10px;
}
.about-audience-grid p,
.about-approach-flow p{
  margin:0;
}
.about-difference-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.about-difference-grid article{
  font-weight:700;
  color:#172946;
}
.about-approach-flow{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.about-final-card{
  background:linear-gradient(135deg,#eafbf5 0%,#ffffff 100%) !important;
  border-color:#c7efdc !important;
}
@media(max-width:720px){
  .about-section-card h2,
  .about-final-card h2{
    font-size:1.42rem;
  }
}

/* Contact page update: email CTA + sticky footer */
.contact-main-area{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.contact-main-area .page-container{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
}
.contact-main-area .contact-email-card{
  width:min(100%,760px);
}
.contact-email-intro{
  margin:22px 0 0;
  color:#31445f;
  font-weight:700;
}
.contact-email-card .contact-email-link{
  font-size:1.02rem;
  letter-spacing:.01em;
}
.contact-main-area .site-footer{
  margin-top:auto;
}
@media(max-width:720px){
  .contact-main-area .page-container{
    align-items:flex-start;
  }
  .contact-main-area .contact-email-card{
    padding:42px 18px;
  }
  .contact-email-card .contact-email-link{
    width:100%;
    justify-content:center;
    overflow-wrap:anywhere;
  }
}


/* SysAiCloud v1.2.0: two learning paths and top-right path selector */
.site-top-header{
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
}
.learning-path-selector{
  justify-self:end !important;
  display:flex !important;
  align-items:center !important;
  min-width:176px !important;
}
.learning-path-selector select{
  width:100% !important;
  min-height:40px !important;
  border-radius:999px !important;
  border:1px solid #dbe6f4 !important;
  background:#ffffff !important;
  color:#172946 !important;
  padding:8px 36px 8px 14px !important;
  font-weight:800 !important;
  font-size:.9rem !important;
  box-shadow:0 8px 22px rgba(31,65,114,.08) !important;
  cursor:pointer !important;
}
.learning-path-selector select:focus{
  outline:none !important;
  border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(20,95,245,.12) !important;
}
.site-shell.coding-path{
  --accent:#7c3aed;
  --accent-2:#a855f7;
  --accent-3:#c084fc;
}
.coding-path .top-brand span,
.coding-path .breadcrumb a,
.coding-path a{color:#7c3aed !important}
.coding-path .top-nav-link:hover{background:#f5f3ff !important;color:#6d28d9 !important}
.coding-path .top-nav-link.active,
.coding-path .button.primary,
.coding-path .contact-email-card a,
.coding-path .comp-btn,
.coding-path .save-btn{
  background:#7c3aed !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(124,58,237,.20) !important;
}
.coding-path .sb-hd,
.coding-path .brand-mark,
.coding-path .coding-day-hd{
  background:linear-gradient(135deg,#7c3aed 0%,#a855f7 100%) !important;
}
.coding-path .dl.active{
  background:#f3e8ff !important;
  color:#7c3aed !important;
  border-left-color:#7c3aed !important;
}
.coding-path .section-number-badge,
.coding-path .step-num{
  background:#7c3aed !important;
}
.coding-path .eyebrow{
  background:#f5f3ff !important;
  border-color:#ddd6fe !important;
  color:#6d28d9 !important;
}
.coding-path .hero{
  border-color:#ddd6fe !important;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(250,245,255,.96) 52%,rgba(245,243,255,.96)) !important;
}
@media(max-width:980px){
  .site-top-header{grid-template-columns:1fr auto !important;}
  .learning-path-selector{grid-column:1 / -1 !important;width:100% !important;}
  .learning-path-selector select{width:100% !important;}
}


/* SysAiCloud v1.3.0: same blue color scheme for both paths + Light/Dark toggle */
.site-shell.coding-path{
  --accent:#145ff5 !important;
  --accent-2:#4f8cff !important;
  --accent-3:#7ec8ff !important;
}
.coding-path .top-brand span,
.coding-path .breadcrumb a,
.coding-path a{color:#145ff5 !important}
.coding-path .top-nav-link:hover{background:#eef5ff !important;color:#075ff0 !important}
.coding-path .top-nav-link.active,
.coding-path .button.primary,
.coding-path .contact-email-card a,
.coding-path .comp-btn,
.coding-path .save-btn{
  background:#145ff5 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(20,95,245,.20) !important;
}
.coding-path .sb-hd,
.coding-path .brand-mark,
.coding-path .coding-day-hd{
  background:linear-gradient(135deg,#145ff5 0%,#4f8cff 100%) !important;
}
.coding-path .dl.active{
  background:#eaf2ff !important;
  color:#145ff5 !important;
  border-left-color:#145ff5 !important;
}
.coding-path .section-number-badge,
.coding-path .step-num,
.coding-path .res-tag,
.coding-path .copy-btn{
  background:#145ff5 !important;
}
.coding-path .eyebrow{
  background:#eef5ff !important;
  border-color:#d6e6ff !important;
  color:#145ff5 !important;
}
.coding-path .hero{
  border-color:#d6e6ff !important;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(240,247,255,.96) 52%,rgba(232,246,255,.96)) !important;
}

.site-top-header{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  grid-template-columns:none !important;
}
.top-brand{flex:0 0 auto !important;}
.mobile-nav-toggle{flex:0 0 auto !important;}
.top-nav{flex:1 1 auto !important;justify-content:center !important;}
.theme-mode-toggle{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  white-space:nowrap !important;
  color:#172946 !important;
  font-size:.82rem !important;
  font-weight:800 !important;
}
.theme-toggle-button{
  width:50px !important;
  height:28px !important;
  border:1px solid #bfdbfe !important;
  border-radius:999px !important;
  background:#145ff5 !important;
  padding:3px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  cursor:pointer !important;
  box-shadow:0 8px 18px rgba(20,95,245,.18) !important;
}
.theme-toggle-button.is-dark{justify-content:flex-end !important;background:#145ff5 !important;}
.theme-toggle-knob{
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  display:block !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(15,23,42,.22) !important;
}
.learning-path-selector{
  flex:0 0 auto !important;
  justify-self:end !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:auto !important;
  white-space:nowrap !important;
}
.learning-path-label{
  color:#172946 !important;
  font-size:.82rem !important;
  font-weight:800 !important;
}
.learning-path-selector select{
  min-width:164px !important;
  width:auto !important;
  min-height:40px !important;
  border-radius:14px !important;
  border:1px solid #dbe6f4 !important;
  background:#ffffff !important;
  color:#172946 !important;
  padding:8px 36px 8px 14px !important;
  font-weight:800 !important;
  font-size:.88rem !important;
  box-shadow:0 8px 22px rgba(31,65,114,.08) !important;
  cursor:pointer !important;
}
.learning-path-selector select:focus{
  outline:none !important;
  border-color:#145ff5 !important;
  box-shadow:0 0 0 4px rgba(20,95,245,.12) !important;
}

body.sysaicloud-theme-dark{
  background:#07111f !important;
  color:#e5eefb !important;
}
body.sysaicloud-theme-dark .site-shell,
body.sysaicloud-theme-dark .main-area{
  background:#0b1220 !important;
  color:#e5eefb !important;
}
body.sysaicloud-theme-dark .site-top-header{
  background:rgba(8,17,30,.96) !important;
  border-bottom-color:#1f2b3d !important;
  box-shadow:0 8px 24px rgba(0,0,0,.22) !important;
}
body.sysaicloud-theme-dark .top-brand a,
body.sysaicloud-theme-dark .top-nav-link,
body.sysaicloud-theme-dark .theme-mode-toggle,
body.sysaicloud-theme-dark .learning-path-label{
  color:#e5eefb !important;
}
body.sysaicloud-theme-dark .top-brand span,
body.sysaicloud-theme-dark .breadcrumb a,
body.sysaicloud-theme-dark a{
  color:#38bdf8 !important;
}
body.sysaicloud-theme-dark .top-nav-link:hover{
  background:#12233a !important;
  color:#7dd3fc !important;
}
body.sysaicloud-theme-dark .top-nav-link.active{
  background:#145ff5 !important;
  color:#fff !important;
}
body.sysaicloud-theme-dark .sidebar,
body.sysaicloud-theme-dark .learning-sidebar,
body.sysaicloud-theme-dark .page-card,
body.sysaicloud-theme-dark .card,
body.sysaicloud-theme-dark .workflow-plan-card,
body.sysaicloud-theme-dark .tool-card,
body.sysaicloud-theme-dark .cert-grid article,
body.sysaicloud-theme-dark .about-focus-grid article,
body.sysaicloud-theme-dark .about-audience-grid article,
body.sysaicloud-theme-dark .about-difference-grid article,
body.sysaicloud-theme-dark .about-approach-flow article,
body.sysaicloud-theme-dark .site-footer{
  background:#0f1a2b !important;
  color:#e5eefb !important;
  border-color:#1f2b3d !important;
  box-shadow:0 14px 40px rgba(0,0,0,.18) !important;
}
body.sysaicloud-theme-dark .learning-sidebar-title,
body.sysaicloud-theme-dark .sb-srch,
body.sysaicloud-theme-dark .ph-group,
body.sysaicloud-theme-dark .top-strip{
  background:#0f1a2b !important;
  border-color:#1f2b3d !important;
}
body.sysaicloud-theme-dark .sb-srch-inner,
body.sysaicloud-theme-dark .ph-hd,
body.sysaicloud-theme-dark .day-items,
body.sysaicloud-theme-dark .study-item,
body.sysaicloud-theme-dark .res-card,
body.sysaicloud-theme-dark .prompt-box,
body.sysaicloud-theme-dark .notes-ta,
body.sysaicloud-theme-dark .learning-path-selector select,
body.sysaicloud-theme-dark .mobile-nav-toggle,
body.sysaicloud-theme-dark .menu-search input,
body.sysaicloud-theme-dark .toolbar input,
body.sysaicloud-theme-dark .toolbar select{
  background:#111f33 !important;
  color:#dbeafe !important;
  border-color:#243650 !important;
}
body.sysaicloud-theme-dark .page-title,
body.sysaicloud-theme-dark .section-heading h2,
body.sysaicloud-theme-dark .top-strip h3,
body.sysaicloud-theme-dark .card-title,
body.sysaicloud-theme-dark .study-title,
body.sysaicloud-theme-dark .tool-card strong,
body.sysaicloud-theme-dark .cert-grid h3,
body.sysaicloud-theme-dark .learning-sidebar-title strong,
body.sysaicloud-theme-dark .ph-hd,
body.sysaicloud-theme-dark .step-text,
body.sysaicloud-theme-dark .res-card h4,
body.sysaicloud-theme-dark .prompt-box pre{
  color:#f8fbff !important;
}
body.sysaicloud-theme-dark .page-subtitle,
body.sysaicloud-theme-dark .section-heading p,
body.sysaicloud-theme-dark .learning-sidebar-title span,
body.sysaicloud-theme-dark .top-strip span,
body.sysaicloud-theme-dark .study-url,
body.sysaicloud-theme-dark .study-dur,
body.sysaicloud-theme-dark .footer-copy,
body.sysaicloud-theme-dark .footer-powered,
body.sysaicloud-theme-dark .tool-card span,
body.sysaicloud-theme-dark .cert-grid p,
body.sysaicloud-theme-dark .dl,
body.sysaicloud-theme-dark .ph-count{
  color:#b6c6dc !important;
}
body.sysaicloud-theme-dark .dl:hover{
  background:#15243a !important;
  color:#e5eefb !important;
}
body.sysaicloud-theme-dark .dl.active{
  background:#0b3b78 !important;
  color:#ffffff !important;
  border-left-color:#38bdf8 !important;
}
body.sysaicloud-theme-dark .breadcrumb{
  color:#cbd5e1 !important;
}
body.sysaicloud-theme-dark .hero,
body.sysaicloud-theme-dark .day-hd{
  background:linear-gradient(135deg,#0f1a2b,#12233a 55%,#0b3b78) !important;
  border-color:#243650 !important;
}
body.sysaicloud-theme-dark .button:not(.primary),
body.sysaicloud-theme-dark .bot-nav a.ghost{
  background:#111f33 !important;
  color:#e5eefb !important;
  border-color:#243650 !important;
}
@media(max-width:1180px){
  .site-top-header{flex-wrap:wrap !important;}
  .top-nav{order:5 !important;flex-basis:100% !important;justify-content:flex-start !important;}
  .theme-mode-toggle{margin-left:auto !important;}
}
@media(max-width:720px){
  .theme-mode-toggle,
  .learning-path-selector{width:100% !important;justify-content:space-between !important;}
  .learning-path-selector select{width:100% !important;min-width:0 !important;}
}


/* SysAiCloud v1.4.0: path-aware menus and compact header */
.site-top-header{
  min-height:56px !important;
  padding:8px 22px !important;
  gap:10px !important;
}
.top-brand a{
  font-size:1.04rem !important;
}
.top-nav{
  gap:3px !important;
}
.top-nav-link{
  min-height:32px !important;
  padding:7px 9px !important;
  font-size:.82rem !important;
}
.theme-mode-toggle{
  gap:6px !important;
  font-size:.74rem !important;
}
.theme-toggle-button{
  width:42px !important;
  height:23px !important;
  padding:2px !important;
}
.theme-toggle-knob{
  width:17px !important;
  height:17px !important;
}
.learning-path-label{
  font-size:.74rem !important;
}
.learning-path-selector{
  gap:6px !important;
}
.learning-path-selector select{
  min-width:142px !important;
  min-height:32px !important;
  padding:6px 28px 6px 10px !important;
  border-radius:11px !important;
  font-size:.78rem !important;
}
.top-strip{
  top:56px !important;
  height:50px !important;
  padding:0 20px !important;
}
.coding-support-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
}
.coding-support-page .hero{
  margin-bottom:18px !important;
}
@media(max-width:1180px){
  .site-top-header{padding:9px 16px !important;}
  .top-nav{order:5 !important;flex-basis:100% !important;justify-content:flex-start !important;}
}


/* SysAiCloud v1.4.1 fixes: synchronized header height, shorter hero, and full coding sidebar layout */
:root{--sac-header-height:58px;}
.site-top-header{
  min-height:var(--sac-header-height) !important;
  height:var(--sac-header-height) !important;
  padding:8px 28px !important;
  gap:12px !important;
  box-sizing:border-box !important;
}
body{padding-top:var(--sac-header-height) !important;}
.sidebar,
.learning-sidebar{
  top:var(--sac-header-height) !important;
  height:calc(100vh - var(--sac-header-height)) !important;
}
.top-strip{top:var(--sac-header-height) !important;}
.breadcrumb{padding-top:18px !important;}
html{scroll-padding-top:calc(var(--sac-header-height) + 18px) !important;}
.learning-sidebar-title{padding-top:22px !important;}

/* Keep the header compact but normal: no left/top blank gap */
.top-brand a{font-size:1.08rem !important;}
.top-nav-link{min-height:36px !important;padding:8px 11px !important;font-size:.86rem !important;}
.theme-toggle-button{width:46px !important;height:25px !important;}
.theme-toggle-knob{width:18px !important;height:18px !important;}
.learning-path-selector select{min-height:34px !important;font-size:.8rem !important;}

/* Reduce the large homepage/path hero height for both websites */
.hero,
.dashboard-hero,
.hero-full,
.day-hd{
  margin-top:0 !important;
}
.dashboard-hero .hero-grid{
  padding:34px 52px 30px !important;
  min-height:0 !important;
}
.hero-copy h1,
.dashboard-hero h1,
.hero h1{
  font-size:clamp(34px,4.2vw,52px) !important;
  line-height:1.05 !important;
  margin-top:0 !important;
  margin-bottom:14px !important;
}
.hero-copy p,
.hero p{
  font-size:17px !important;
  line-height:1.45 !important;
}
.hero-copy .hero-actions,
.hero-actions{margin-top:18px !important;}
.button{min-height:44px !important;padding:10px 22px !important;}
.stats-strip{margin-top:-2px !important;}

/* Coding support pages: make left menu match No Coding Path expanded library style */
.coding-support-page .learning-sidebar .sb-nav,
.coding-path .learning-sidebar .sb-nav{padding-bottom:28px !important;}
.coding-support-page .learning-sidebar #menu-all > .day-items,
.coding-path .learning-sidebar #menu-all > .day-items{padding-top:2px !important;}
.coding-support-page .learning-sidebar .ph-group,
.coding-path .learning-sidebar .ph-group{width:100% !important;}
.coding-support-page .learning-sidebar .dl,
.coding-path .learning-sidebar .dl{display:flex !important;align-items:flex-start !important;gap:8px !important;}

@media(max-width:1180px){
  :root{--sac-header-height:64px;}
  .site-top-header{height:auto !important;min-height:var(--sac-header-height) !important;}
}
@media(max-width:760px){
  .dashboard-hero .hero-grid{padding:26px 24px 24px !important;}
  .hero-copy h1,.dashboard-hero h1,.hero h1{font-size:34px !important;}
}


/* SysAiCloud v1.4.2: logo, synced header, fixed Coding Path sidebar, and added path sections */
:root{--sac-header-height:66px;--sac-sidebar-width:340px;}
body{padding-top:var(--sac-header-height) !important;}
.site-top-header{
  position:fixed !important;
  top:0 !important;left:0 !important;right:0 !important;width:100% !important;
  min-height:var(--sac-header-height) !important;height:var(--sac-header-height) !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto auto !important;
  align-items:center !important;
  gap:14px !important;
  padding:8px 24px !important;
  margin:0 !important;border-radius:0 !important;box-sizing:border-box !important;
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid #dfe8f6 !important;
  box-shadow:0 8px 22px rgba(31,65,114,.07) !important;
}
.top-brand{display:flex !important;align-items:center !important;min-width:210px !important;}
.top-brand a{display:flex !important;align-items:center !important;text-decoration:none !important;line-height:1 !important;}
.top-brand .site-logo{display:block !important;width:auto !important;height:42px !important;max-width:220px !important;object-fit:contain !important;}
.top-brand span{display:none !important;}
.top-nav{justify-content:center !important;gap:4px !important;flex-wrap:nowrap !important;overflow:hidden !important;}
.top-nav-link{min-height:34px !important;padding:8px 10px !important;font-size:.84rem !important;white-space:nowrap !important;}
.theme-mode-toggle{gap:6px !important;font-size:.72rem !important;white-space:nowrap !important;}
.theme-toggle-button{width:42px !important;height:23px !important;}
.theme-toggle-knob{width:17px !important;height:17px !important;}
.learning-path-selector{gap:6px !important;white-space:nowrap !important;}
.learning-path-label{font-size:.72rem !important;}
.learning-path-selector select{min-height:32px !important;min-width:142px !important;padding:6px 28px 6px 10px !important;font-size:.78rem !important;border-radius:10px !important;}
.sidebar,.learning-sidebar{top:var(--sac-header-height) !important;height:calc(100vh - var(--sac-header-height)) !important;width:var(--sac-sidebar-width) !important;min-width:var(--sac-sidebar-width) !important;padding-top:0 !important;}
.main-area{margin-left:var(--sac-sidebar-width) !important;width:calc(100% - var(--sac-sidebar-width)) !important;padding-top:0 !important;}
.top-strip{top:var(--sac-header-height) !important;height:52px !important;}
.breadcrumb{padding-top:18px !important;}
html{scroll-padding-top:calc(var(--sac-header-height) + 22px) !important;}
.learning-sidebar-title{padding:22px 20px 16px !important;}

/* Compact hero height on both paths */
.dashboard-hero .hero-grid{padding:32px 52px 28px !important;min-height:0 !important;}
.hero h1,.dashboard-hero h1,.hero-copy h1{font-size:clamp(34px,4vw,50px) !important;line-height:1.05 !important;margin:0 0 12px !important;}
.hero p,.hero-copy p{font-size:17px !important;line-height:1.45 !important;margin-bottom:0 !important;}
.hero-actions{margin-top:18px !important;}
.button{min-height:44px !important;padding:10px 22px !important;}

/* Fixed left menu readability for Coding Path support pages */
.coding-path .learning-sidebar .sb-nav,
.coding-support-page .learning-sidebar .sb-nav{padding:0 18px 30px !important;}
.coding-path .learning-sidebar .ph-group,
.coding-support-page .learning-sidebar .ph-group{width:100% !important;min-width:0 !important;}
.coding-path .learning-sidebar .ph-hd,
.coding-support-page .learning-sidebar .ph-hd{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:12px !important;
  min-height:44px !important;
  padding:10px 12px !important;
}
.coding-path .learning-sidebar .ph-hd-left,
.coding-support-page .learning-sidebar .ph-hd-left{display:grid !important;grid-template-columns:24px minmax(0,1fr) !important;align-items:center !important;gap:9px !important;min-width:0 !important;}
.coding-path .learning-sidebar .ph-hd-left span:last-child,
.coding-support-page .learning-sidebar .ph-hd-left span:last-child{display:block !important;min-width:0 !important;overflow-wrap:anywhere !important;line-height:1.25 !important;font-size:.88rem !important;}
.coding-path .learning-sidebar .ph-hd > div:last-child,
.coding-support-page .learning-sidebar .ph-hd > div:last-child{display:flex !important;align-items:center !important;gap:8px !important;white-space:nowrap !important;}
.coding-path .learning-sidebar .ph-count,
.coding-support-page .learning-sidebar .ph-count{font-size:.72rem !important;min-width:48px !important;text-align:right !important;margin:0 !important;color:#64748b !important;}
.coding-path .learning-sidebar #menu-all > .ph-hd,
.coding-support-page .learning-sidebar #menu-all > .ph-hd{margin:12px 0 8px !important;background:#eaf2ff !important;border-radius:16px !important;padding:16px 14px !important;}
.coding-path .learning-sidebar #menu-all > .ph-hd .ph-hd-left span:last-child,
.coding-support-page .learning-sidebar #menu-all > .ph-hd .ph-hd-left span:last-child{font-size:1rem !important;color:#145ff5 !important;font-weight:800 !important;}
.coding-path .learning-sidebar .dl,
.coding-support-page .learning-sidebar .dl{display:flex !important;align-items:flex-start !important;gap:9px !important;padding:8px 10px !important;font-size:.82rem !important;line-height:1.35 !important;}
.coding-path .learning-sidebar .dl-num,
.coding-support-page .learning-sidebar .dl-num{min-width:28px !important;flex:0 0 28px !important;text-align:right !important;}

/* Added Coding Path missing-section cards */
.coding-missing-section-grid,.coding-phase-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;}
.coding-journey-section,.coding-method-section,.coding-architecture-section,.coding-map-section{border-color:#d8e6ff !important;background:linear-gradient(135deg,#ffffff 0%,#f7fbff 100%) !important;}
.coding-month-map{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;gap:10px !important;margin-top:16px !important;}
.coding-month-map span{display:block !important;background:#eef6ff !important;border:1px solid #cfe0ff !important;border-radius:14px !important;padding:12px !important;color:#071832 !important;font-weight:700 !important;text-align:center !important;line-height:1.35 !important;}

body.sysaicloud-theme-dark .site-top-header{background:rgba(15,26,43,.97) !important;border-bottom-color:#1f2b3d !important;}
body.sysaicloud-theme-dark .coding-month-map span{background:#111f33 !important;border-color:#243650 !important;color:#e5eefb !important;}
body.sysaicloud-theme-dark .coding-journey-section,
body.sysaicloud-theme-dark .coding-method-section,
body.sysaicloud-theme-dark .coding-architecture-section,
body.sysaicloud-theme-dark .coding-map-section{background:#0f1a2b !important;border-color:#1f2b3d !important;}

@media(max-width:1260px){
  :root{--sac-sidebar-width:320px;}
  .site-top-header{grid-template-columns:auto auto auto !important;height:auto !important;min-height:var(--sac-header-height) !important;}
  .top-nav{grid-column:1/-1 !important;justify-content:flex-start !important;flex-wrap:wrap !important;padding-top:6px !important;}
}
@media(max-width:900px){
  body{padding-top:0 !important;}
  .site-top-header{position:sticky !important;height:auto !important;grid-template-columns:1fr auto !important;padding:10px 16px !important;}
  .top-nav{display:none !important;}
  .top-nav.open{display:flex !important;}
  .theme-mode-toggle,.learning-path-selector{grid-column:1/-1 !important;justify-content:space-between !important;}
  .sidebar,.learning-sidebar{position:relative !important;top:0 !important;width:100% !important;min-width:0 !important;height:auto !important;}
  .main-area{margin-left:0 !important;width:100% !important;}
  .top-strip{top:0 !important;}
}


/* SysAiCloud v1.5.0 Recovery
   Built from stable v1.4.2. Controlled changes only:
   - CSS text logo replaces problematic PNG header logo
   - clean favicon/icon assets
   - scoped dark-mode contrast fixes for known affected areas
*/

/* Header text-logo system */
.top-brand a{
  display:flex !important;
  align-items:center !important;
  gap:0 !important;
  text-decoration:none !important;
  min-width:260px !important;
}
.top-brand a::before{
  content:"SysAiCloud | Learning Hub";
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  font-size:1.2rem !important;
  line-height:1 !important;
  color:#071936 !important;
}
.top-brand .site-logo{
  display:none !important;
}
body.sysaicloud-theme-dark .top-brand a::before{
  color:#ffffff !important;
}
body.sysaicloud-theme-dark .top-brand a::after{
  content:"";
}

/* Light mode: add subtle brand accent by keeping header clean */
.site-top-header .top-brand a::before{
  text-shadow:none !important;
}

/* Compact but safe header layout */
.site-top-header{
  overflow:visible !important;
}
.top-brand{
  min-width:260px !important;
}

/* Scoped dark mode palette */
body.sysaicloud-theme-dark{
  --sac-v150-bg:#07111f;
  --sac-v150-header:#0b1524;
  --sac-v150-strip:#0a1728;
  --sac-v150-card:#102033;
  --sac-v150-card-2:#12243a;
  --sac-v150-border:#29415f;
  --sac-v150-border-2:#365574;
  --sac-v150-text:#f8fafc;
  --sac-v150-muted:#cbd5e1;
  --sac-v150-muted-2:#b8c5d6;
  --sac-v150-link:#38bdf8;
  --sac-v150-primary:#0b63f6;
  background:#07111f !important;
  color:#f8fafc !important;
}

/* Base page surfaces */
body.sysaicloud-theme-dark .site-shell,
body.sysaicloud-theme-dark .main-area,
body.sysaicloud-theme-dark .page-container{
  background:#07111f !important;
  color:#f8fafc !important;
}

/* Header/sidebar/footer */
body.sysaicloud-theme-dark .site-top-header,
body.sysaicloud-theme-dark .sidebar,
body.sysaicloud-theme-dark .learning-sidebar,
body.sysaicloud-theme-dark .site-footer{
  background:#0b1524 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}

/* Top content strip */
body.sysaicloud-theme-dark .top-strip,
body.sysaicloud-theme-dark .learning-sidebar-title{
  background:#0a1728 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}

/* Known affected left menu structures only */
body.sysaicloud-theme-dark .learning-sidebar .ph-group{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
body.sysaicloud-theme-dark .learning-sidebar .ph-hd{
  background:#12243a !important;
  color:#f8fafc !important;
  border:1px solid #29415f !important;
  box-shadow:none !important;
}
body.sysaicloud-theme-dark .learning-sidebar #menu-all > .ph-hd{
  background:#102a4c !important;
  border-color:#0b63f6 !important;
}
body.sysaicloud-theme-dark .learning-sidebar .day-items{
  background:transparent !important;
  border-color:transparent !important;
}
body.sysaicloud-theme-dark .learning-sidebar .dl{
  background:#12243a !important;
  color:#f8fafc !important;
  border:1px solid #29415f !important;
  opacity:1 !important;
}
body.sysaicloud-theme-dark .learning-sidebar .dl:hover,
body.sysaicloud-theme-dark .learning-sidebar .dl.active{
  background:#173252 !important;
  color:#ffffff !important;
  border-color:#3b82f6 !important;
}
body.sysaicloud-theme-dark .learning-sidebar .ph-hd-left,
body.sysaicloud-theme-dark .learning-sidebar .ph-hd-left *,
body.sysaicloud-theme-dark .learning-sidebar .dl,
body.sysaicloud-theme-dark .learning-sidebar .dl *{
  color:#f8fafc !important;
  opacity:1 !important;
}
body.sysaicloud-theme-dark .learning-sidebar .ph-count,
body.sysaicloud-theme-dark .learning-sidebar .dl-num,
body.sysaicloud-theme-dark .learning-sidebar .caret{
  color:#cbd5e1 !important;
  opacity:1 !important;
}

/* Known affected visual roadmap and image-caption cards only */
body.sysaicloud-theme-dark .visual-section,
body.sysaicloud-theme-dark .visual-grid,
body.sysaicloud-theme-dark .hero-mini-grid{
  background:transparent !important;
}
body.sysaicloud-theme-dark .visual-card,
body.sysaicloud-theme-dark .visual-card figcaption{
  background:#102033 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
  box-shadow:none !important;
}
body.sysaicloud-theme-dark .visual-card figcaption strong,
body.sysaicloud-theme-dark .visual-card strong{
  color:#ffffff !important;
  opacity:1 !important;
}
body.sysaicloud-theme-dark .visual-card figcaption span,
body.sysaicloud-theme-dark .visual-card span{
  color:#cbd5e1 !important;
  opacity:1 !important;
}

/* Main standard cards, not aggressive global selectors */
body.sysaicloud-theme-dark .card,
body.sysaicloud-theme-dark .web-card,
body.sysaicloud-theme-dark .aside-card,
body.sysaicloud-theme-dark .res-card,
body.sysaicloud-theme-dark .study-item,
body.sysaicloud-theme-dark .tool-card,
body.sysaicloud-theme-dark .cert-grid article{
  background:#102033 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
  box-shadow:none !important;
}
body.sysaicloud-theme-dark .card h2,
body.sysaicloud-theme-dark .card h3,
body.sysaicloud-theme-dark .web-card h2,
body.sysaicloud-theme-dark .web-card h3,
body.sysaicloud-theme-dark .res-card h4,
body.sysaicloud-theme-dark .study-title,
body.sysaicloud-theme-dark .tool-card strong,
body.sysaicloud-theme-dark .cert-grid h3{
  color:#ffffff !important;
}
body.sysaicloud-theme-dark .card p,
body.sysaicloud-theme-dark .web-card p,
body.sysaicloud-theme-dark .res-card p,
body.sysaicloud-theme-dark .study-dur,
body.sysaicloud-theme-dark .study-url,
body.sysaicloud-theme-dark .tool-card span,
body.sysaicloud-theme-dark .cert-grid p{
  color:#cbd5e1 !important;
}

/* Hero and big headings */
body.sysaicloud-theme-dark .hero,
body.sysaicloud-theme-dark .dashboard-hero,
body.sysaicloud-theme-dark .day-hd{
  background:linear-gradient(135deg,#0d1b2d 0%,#10233a 58%,#0b3b78 100%) !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}
body.sysaicloud-theme-dark h1,
body.sysaicloud-theme-dark h2,
body.sysaicloud-theme-dark h3,
body.sysaicloud-theme-dark h4,
body.sysaicloud-theme-dark .section-heading h2,
body.sysaicloud-theme-dark .page-title,
body.sysaicloud-theme-dark .hero h1{
  color:#ffffff !important;
}
body.sysaicloud-theme-dark p,
body.sysaicloud-theme-dark li,
body.sysaicloud-theme-dark .section-heading p,
body.sysaicloud-theme-dark .page-subtitle,
body.sysaicloud-theme-dark .hero p,
body.sysaicloud-theme-dark .top-strip span,
body.sysaicloud-theme-dark .learning-sidebar-title span{
  color:#cbd5e1 !important;
}

/* Controls */
body.sysaicloud-theme-dark a,
body.sysaicloud-theme-dark .breadcrumb a{
  color:#38bdf8 !important;
}
body.sysaicloud-theme-dark .button.primary,
body.sysaicloud-theme-dark .top-nav-link.active,
body.sysaicloud-theme-dark .learning-path-selector select{
  background:#0b63f6 !important;
  color:#ffffff !important;
  border-color:#0b63f6 !important;
}
body.sysaicloud-theme-dark .button:not(.primary),
body.sysaicloud-theme-dark .bot-nav a.ghost{
  background:#102033 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}
body.sysaicloud-theme-dark input,
body.sysaicloud-theme-dark textarea,
body.sysaicloud-theme-dark select,
body.sysaicloud-theme-dark .sb-srch,
body.sysaicloud-theme-dark .sb-srch-inner,
body.sysaicloud-theme-dark .menu-search input,
body.sysaicloud-theme-dark .toolbar input,
body.sysaicloud-theme-dark .toolbar select,
body.sysaicloud-theme-dark .notes-ta{
  background:#0f1e31 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}
body.sysaicloud-theme-dark input::placeholder,
body.sysaicloud-theme-dark textarea::placeholder{
  color:#93a4b8 !important;
  opacity:1 !important;
}

/* Tables and code blocks */
body.sysaicloud-theme-dark table,
body.sysaicloud-theme-dark th,
body.sysaicloud-theme-dark td{
  background:#102033 !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}
body.sysaicloud-theme-dark pre,
body.sysaicloud-theme-dark code,
body.sysaicloud-theme-dark .prompt-box,
body.sysaicloud-theme-dark .prompt-box pre{
  background:#07111f !important;
  color:#f8fafc !important;
  border-color:#29415f !important;
}


/* SysAiCloud v1.5.1: LIGHT MODE ONLY
   Dark mode has been removed completely from the UI.
   This final layer hides the toggle and neutralizes any old cached dark-mode class. */

.theme-mode-toggle,
#sysaicloudThemeToggle,
.theme-toggle-button,
.theme-toggle-knob,
.theme-mode-label {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* If a browser/cache still adds sysaicloud-theme-dark, force the whole site back to light mode. */
body.sysaicloud-theme-dark,
html.sysaicloud-theme-dark,
body.sysaicloud-theme-dark .site-shell,
body.sysaicloud-theme-dark .main-area,
body.sysaicloud-theme-dark .page-container,
body.sysaicloud-theme-dark .page-main,
body.sysaicloud-theme-dark .content,
body.sysaicloud-theme-dark .day-content {
  background:
    radial-gradient(circle at 82% 8%, rgba(79,140,255,.12), transparent 32%),
    radial-gradient(circle at 20% 92%, rgba(126,200,255,.12), transparent 30%),
    #f5f8fd !important;
  color: #071832 !important;
}

/* Restore light-mode header/sidebar/footer if old dark class remains. */
body.sysaicloud-theme-dark .site-top-header,
body.sysaicloud-theme-dark .sidebar,
body.sysaicloud-theme-dark .learning-sidebar,
body.sysaicloud-theme-dark .site-footer {
  background: rgba(255,255,255,.96) !important;
  color: #071832 !important;
  border-color: #dce7f5 !important;
}

/* Restore normal light cards if old dark class remains. */
body.sysaicloud-theme-dark .page-card,
body.sysaicloud-theme-dark .card,
body.sysaicloud-theme-dark .web-card,
body.sysaicloud-theme-dark .day-card,
body.sysaicloud-theme-dark .process-card,
body.sysaicloud-theme-dark .journey-card,
body.sysaicloud-theme-dark .workflow-plan-card,
body.sysaicloud-theme-dark .tool-card,
body.sysaicloud-theme-dark .res-card,
body.sysaicloud-theme-dark .visual-card,
body.sysaicloud-theme-dark .visual-card figcaption,
body.sysaicloud-theme-dark .resource-card,
body.sysaicloud-theme-dark .resource-map,
body.sysaicloud-theme-dark .visual-roadmap,
body.sysaicloud-theme-dark .roadmap-card,
body.sysaicloud-theme-dark .step-card,
body.sysaicloud-theme-dark .day-target-card,
body.sysaicloud-theme-dark .notes-panel-card,
body.sysaicloud-theme-dark .workflow-card,
body.sysaicloud-theme-dark .prompt-card,
body.sysaicloud-theme-dark .daily-system,
body.sysaicloud-theme-dark .video-resource-box,
body.sysaicloud-theme-dark .lab-completion-guide,
body.sysaicloud-theme-dark .prompt-pack,
body.sysaicloud-theme-dark .day-resource-library,
body.sysaicloud-theme-dark .check-item,
body.sysaicloud-theme-dark .study-item,
body.sysaicloud-theme-dark .aside-card,
body.sysaicloud-theme-dark .cert-grid article,
body.sysaicloud-theme-dark .about-focus-grid article,
body.sysaicloud-theme-dark .about-audience-grid article,
body.sysaicloud-theme-dark .about-difference-grid article,
body.sysaicloud-theme-dark .about-approach-flow article {
  background: rgba(255,255,255,.96) !important;
  color: #071832 !important;
  border-color: #dce7f5 !important;
  box-shadow: 0 8px 22px rgba(15, 46, 93, .07) !important;
}

/* Restore light-mode sidebar menu if old dark class remains. */
body.sysaicloud-theme-dark .learning-sidebar .ph-group {
  background: transparent !important;
  box-shadow: none !important;
}
body.sysaicloud-theme-dark .learning-sidebar .ph-hd,
body.sysaicloud-theme-dark .learning-sidebar .dl,
body.sysaicloud-theme-dark .learning-sidebar .day-items {
  background: #ffffff !important;
  color: #17294a !important;
  border-color: #dce7f5 !important;
}
body.sysaicloud-theme-dark .learning-sidebar #menu-all > .ph-hd,
body.sysaicloud-theme-dark .learning-sidebar .dl:hover,
body.sysaicloud-theme-dark .learning-sidebar .dl.active {
  background: linear-gradient(135deg,#eef4ff,#f8fbff) !important;
  color: #135df5 !important;
  border-color: #d2e1ff !important;
}

/* Restore light-mode text colors if old dark class remains. */
body.sysaicloud-theme-dark h1,
body.sysaicloud-theme-dark h2,
body.sysaicloud-theme-dark h3,
body.sysaicloud-theme-dark h4,
body.sysaicloud-theme-dark h5,
body.sysaicloud-theme-dark h6,
body.sysaicloud-theme-dark strong,
body.sysaicloud-theme-dark b,
body.sysaicloud-theme-dark .page-title,
body.sysaicloud-theme-dark .hero h1,
body.sysaicloud-theme-dark .dashboard-hero h1,
body.sysaicloud-theme-dark .hero-copy h1,
body.sysaicloud-theme-dark .section-heading h2,
body.sysaicloud-theme-dark .card-title,
body.sysaicloud-theme-dark .study-title,
body.sysaicloud-theme-dark .tool-card strong,
body.sysaicloud-theme-dark .cert-grid h3,
body.sysaicloud-theme-dark .learning-sidebar .ph-hd-left *,
body.sysaicloud-theme-dark .learning-sidebar .dl-title,
body.sysaicloud-theme-dark .visual-card figcaption strong {
  color: #071832 !important;
  opacity: 1 !important;
}

body.sysaicloud-theme-dark p,
body.sysaicloud-theme-dark li,
body.sysaicloud-theme-dark span,
body.sysaicloud-theme-dark .page-subtitle,
body.sysaicloud-theme-dark .hero p,
body.sysaicloud-theme-dark .dashboard-hero p,
body.sysaicloud-theme-dark .hero-copy p,
body.sysaicloud-theme-dark .section-heading p,
body.sysaicloud-theme-dark .card p,
body.sysaicloud-theme-dark .web-card p,
body.sysaicloud-theme-dark .res-card p,
body.sysaicloud-theme-dark .visual-card figcaption span,
body.sysaicloud-theme-dark .learning-sidebar .ph-count,
body.sysaicloud-theme-dark .learning-sidebar .dl-num,
body.sysaicloud-theme-dark .learning-sidebar .caret {
  color: #64748b !important;
  opacity: 1 !important;
}

/* Restore light hero if old dark class remains. */
body.sysaicloud-theme-dark .hero,
body.sysaicloud-theme-dark .dashboard-hero,
body.sysaicloud-theme-dark .day-hd {
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,247,255,.96) 52%, rgba(232,246,255,.96)),
    radial-gradient(circle at 80% 22%, rgba(19,93,245,.14), transparent 28%) !important;
  color: #071832 !important;
  border-color: #d8e7fb !important;
}

/* Restore forms/tables/code if old dark class remains. */
body.sysaicloud-theme-dark input,
body.sysaicloud-theme-dark textarea,
body.sysaicloud-theme-dark select,
body.sysaicloud-theme-dark .sb-srch,
body.sysaicloud-theme-dark .sb-srch-inner,
body.sysaicloud-theme-dark .menu-search input,
body.sysaicloud-theme-dark .toolbar input,
body.sysaicloud-theme-dark .toolbar select,
body.sysaicloud-theme-dark .notes-ta,
body.sysaicloud-theme-dark table,
body.sysaicloud-theme-dark th,
body.sysaicloud-theme-dark td {
  background: #ffffff !important;
  color: #071832 !important;
  border-color: #dce7f5 !important;
}

body.sysaicloud-theme-dark pre,
body.sysaicloud-theme-dark code,
body.sysaicloud-theme-dark .prompt-box,
body.sysaicloud-theme-dark .prompt-box pre {
  background: #f8fbff !important;
  color: #071832 !important;
  border-color: #dce7f5 !important;
}


/* SysAiCloud v1.5.2: Updated uploaded logo in light-mode-only header */
.top-brand a::before,
.top-brand a::after{
  content:none !important;
  display:none !important;
}
.top-brand a{
  display:flex !important;
  align-items:center !important;
  min-width:260px !important;
  text-decoration:none !important;
}
.top-brand .site-logo{
  display:block !important;
  height:42px !important;
  max-width:285px !important;
  width:auto !important;
  object-fit:contain !important;
}
.site-top-header{
  overflow:visible !important;
}


/* SysAiCloud v1.5.3: Mobile and tablet responsive layout fix
   Fixes horizontal overflow, off-screen sidebar, squished cards, and header wrapping
   on phones/tablets. Dark mode remains removed. */

/* Global overflow guard */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

img,
svg,
video,
canvas {
  max-width: 100% !important;
  height: auto;
}

/* Tablet and small laptop layout */
@media (max-width: 1180px) {
  .site-top-header,
  .top-header-inner,
  .topbar,
  .site-header-inner {
    max-width: 100% !important;
    width: 100% !important;
  }

  .top-brand {
    min-width: 0 !important;
  }

  .top-brand .site-logo {
    max-width: 230px !important;
    height: 38px !important;
    object-fit: contain !important;
  }

  .top-nav,
  .desktop-nav,
  .main-nav {
    gap: 10px !important;
  }

  .top-nav a,
  .desktop-nav a,
  .main-nav a,
  .top-nav-link {
    font-size: 0.86rem !important;
    padding: 8px 9px !important;
    white-space: nowrap !important;
  }

  .learning-path-selector,
  .path-selector,
  .choose-path {
    max-width: 240px !important;
  }

  .site-shell,
  .learning-shell,
  .page-shell,
  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr) !important;
  }

  .learning-sidebar,
  .sidebar {
    width: 300px !important;
    min-width: 0 !important;
  }

  .main-area,
  .page-main,
  .content-area {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* Tablet portrait and phone: convert to one-column layout */
@media (max-width: 900px) {
  body {
    overflow-x: hidden !important;
  }

  .site-top-header,
  .top-header-inner,
  .topbar,
  .site-header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 14px !important;
  }

  .top-brand,
  .brand-wrap {
    flex: 1 1 auto !important;
    min-width: 190px !important;
    max-width: calc(100% - 64px) !important;
  }

  .top-brand a {
    min-width: 0 !important;
  }

  .top-brand .site-logo {
    display: block !important;
    max-width: 220px !important;
    width: 100% !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
  }

  .mobile-nav-toggle,
  .hamburger,
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
  }

  .top-nav,
  .desktop-nav,
  .main-nav {
    display: none !important;
  }

  .learning-path-selector,
  .path-selector,
  .choose-path,
  .path-switcher {
    order: 5 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 6px !important;
  }

  .learning-path-selector select,
  .path-selector select,
  .choose-path select,
  .path-switcher select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .site-shell,
  .learning-shell,
  .page-shell,
  .app-shell,
  .layout,
  .page-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .learning-sidebar,
  .sidebar {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid #dce7f5 !important;
    padding: 18px 16px !important;
  }

  .learning-sidebar-title,
  .sidebar-title {
    margin-bottom: 12px !important;
  }

  .sidebar .menu-search,
  .learning-sidebar .menu-search,
  .sb-srch,
  .sb-srch-inner {
    width: 100% !important;
    max-width: 100% !important;
  }

  .phase-menu,
  .ph-list,
  .learning-sidebar .ph-list,
  .learning-sidebar nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .learning-sidebar .ph-hd,
  .learning-sidebar .dl,
  .sidebar .ph-hd,
  .sidebar .dl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .learning-sidebar .day-items,
  .sidebar .day-items {
    max-height: 260px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }

  .main-area,
  .page-main,
  .content-area,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .top-strip,
  .breadcrumb-strip,
  .page-breadcrumb {
    padding: 16px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero,
  .dashboard-hero,
  .day-hd {
    display: block !important;
    min-height: 0 !important;
    padding: 34px 22px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-grid,
  .dashboard-hero-grid,
  .hero-inner {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .hero h1,
  .dashboard-hero h1,
  .hero-copy h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.055em !important;
    max-width: 100% !important;
  }

  .hero p,
  .dashboard-hero p,
  .hero-copy p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .hero-actions,
  .button-row,
  .cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .hero-actions .button,
  .button-row .button,
  .cta-row .button,
  .button {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .hero-visual,
  .hero-graphic,
  .hero-art {
    margin-top: 22px !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .visual-roadmap,
  .resource-map,
  .page-card,
  .card,
  .web-card {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .visual-grid,
  .roadmap-grid,
  .resource-grid,
  .card-grid,
  .web-grid,
  .journey-grid,
  .phase-grid,
  .tools-grid,
  .cert-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .visual-card,
  .resource-card,
  .process-card,
  .journey-card,
  .workflow-plan-card,
  .tool-card,
  .res-card,
  .study-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .visual-card figcaption,
  .visual-card .caption {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .visual-card h3,
  .visual-card h4,
  .visual-card strong,
  .web-card h3,
  .card h3 {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }

  .visual-card p,
  .visual-card span,
  .web-card p,
  .card p {
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}

/* Phone-specific polish */
@media (max-width: 560px) {
  .site-top-header,
  .top-header-inner,
  .site-header-inner {
    padding: 10px 12px !important;
  }

  .top-brand .site-logo {
    max-width: 205px !important;
    max-height: 44px !important;
  }

  .learning-path-selector,
  .path-selector,
  .choose-path,
  .path-switcher {
    grid-template-columns: 1fr !important;
  }

  .learning-path-selector label,
  .path-selector label,
  .choose-path label,
  .path-switcher label {
    margin-bottom: -4px !important;
  }

  .learning-sidebar,
  .sidebar {
    padding: 16px 14px !important;
  }

  .learning-sidebar .day-items,
  .sidebar .day-items {
    max-height: 220px !important;
  }

  .top-strip,
  .breadcrumb-strip,
  .page-breadcrumb {
    padding: 14px 16px !important;
  }

  .hero,
  .dashboard-hero,
  .day-hd {
    padding: 30px 18px !important;
  }

  .hero h1,
  .dashboard-hero h1,
  .hero-copy h1 {
    font-size: clamp(1.9rem, 10vw, 2.55rem) !important;
  }

  .visual-roadmap,
  .resource-map,
  .page-card,
  .card,
  .web-card {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    border-radius: 20px !important;
  }

  .visual-card,
  .resource-card,
  .process-card,
  .journey-card,
  .workflow-plan-card,
  .tool-card,
  .res-card,
  .study-item {
    padding: 16px !important;
  }
}


/* SysAiCloud v1.5.4: Mobile / Tablet HARD FIX
   Problem observed in Pic2:
   - desktop left sidebar still consumes layout width on phone
   - page creates horizontal/offset blank area
   - header/content appear after a large shifted region
   Solution:
   - force true mobile viewport width
   - reset desktop grid/flex widths
   - hide desktop learning sidebar on phone/tablet
   - show content full-width
   - keep header, logo, path selector, hero and cards readable
*/

/* Prevent any element from expanding the viewport */
html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body {
  position: relative !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img, svg, video, canvas, iframe {
  max-width: 100% !important;
}

/* Tablet safety */
@media (max-width: 1024px) {
  .site-shell,
  .learning-shell,
  .app-shell,
  .page-shell,
  .page-layout,
  .layout,
  .content-layout,
  .main-layout,
  .hub-shell {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .main-area,
  .page-main,
  .content-area,
  .main-content,
  .site-main,
  .learning-main,
  .hub-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
    overflow: visible !important;
  }
}

/* Phone/tablet portrait: hard reset sidebar + header */
@media (max-width: 820px) {
  html,
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  #page,
  .site,
  .site-wrapper,
  .site-shell,
  .learning-shell,
  .app-shell,
  .page-shell,
  .page-layout,
  .layout,
  .content-layout,
  .main-layout,
  .hub-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    overflow-x: hidden !important;
  }

  /* Critical fix: remove desktop sidebar from mobile flow.
     The screenshot shows the sidebar is the source of the left offset/blank space. */
  .learning-sidebar,
  .sidebar,
  aside.learning-sidebar,
  aside.sidebar,
  .left-sidebar,
  .path-sidebar,
  .days-sidebar,
  .desktop-sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
  }

  /* Make the header the first visible section and keep it full-width. */
  .site-top-header,
  .top-header-inner,
  .site-header,
  .site-header-inner,
  .topbar,
  header {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    z-index: 10 !important;
  }

  .top-brand,
  .brand-wrap,
  .site-branding {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: calc(100vw - 76px) !important;
    width: auto !important;
    margin: 0 !important;
  }

  .top-brand a,
  .site-branding a {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .top-brand .site-logo,
  .site-logo,
  .custom-logo {
    display: block !important;
    width: auto !important;
    max-width: min(260px, calc(100vw - 96px)) !important;
    height: auto !important;
    max-height: 52px !important;
    object-fit: contain !important;
  }

  .mobile-nav-toggle,
  .hamburger,
  .menu-toggle,
  button.menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin-left: auto !important;
    border-radius: 14px !important;
  }

  .top-nav,
  .desktop-nav,
  .main-nav,
  .nav-menu,
  .top-menu {
    display: none !important;
  }

  .learning-path-selector,
  .path-selector,
  .choose-path,
  .path-switcher {
    order: 9 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
  }

  .learning-path-selector label,
  .path-selector label,
  .choose-path label,
  .path-switcher label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #071832 !important;
    font-weight: 800 !important;
  }

  .learning-path-selector select,
  .path-selector select,
  .choose-path select,
  .path-switcher select {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    border-radius: 14px !important;
  }

  /* Main content starts immediately after header */
  .main-area,
  .page-main,
  .content-area,
  .main-content,
  .site-main,
  .learning-main,
  .hub-main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    left: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .top-strip,
  .breadcrumb-strip,
  .page-breadcrumb,
  .learning-sidebar-title {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .hero,
  .dashboard-hero,
  .day-hd {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 30px 20px !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: hidden !important;
  }

  .hero-grid,
  .dashboard-hero-grid,
  .hero-inner,
  .hero-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
  }

  .hero h1,
  .dashboard-hero h1,
  .hero-copy h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 9.5vw, 2.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.055em !important;
    overflow-wrap: normal !important;
  }

  .hero p,
  .dashboard-hero p,
  .hero-copy p {
    max-width: 100% !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .hero-actions,
  .button-row,
  .cta-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .button,
  .hero-actions .button,
  .button-row .button,
  .cta-row .button {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }

  .hero-visual,
  .hero-graphic,
  .hero-art {
    display: block !important;
    margin: 20px auto 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Cards / visual roadmap: no squeezed columns */
  .visual-roadmap,
  .resource-map,
  .page-card,
  .card,
  .web-card,
  .daily-system,
  .prompt-pack,
  .day-resource-library {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .visual-grid,
  .roadmap-grid,
  .resource-grid,
  .card-grid,
  .web-grid,
  .journey-grid,
  .phase-grid,
  .tools-grid,
  .cert-grid,
  .day-grid,
  .process-grid,
  .workflow-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .visual-card,
  .resource-card,
  .process-card,
  .journey-card,
  .workflow-plan-card,
  .tool-card,
  .res-card,
  .study-item,
  .day-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .visual-card figcaption,
  .visual-card .caption {
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  .visual-card h3,
  .visual-card h4,
  .visual-card strong,
  .web-card h3,
  .card h3,
  .day-card summary {
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }

  .visual-card p,
  .visual-card span,
  .web-card p,
  .card p {
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* Very small phones */
@media (max-width: 430px) {
  .top-brand .site-logo,
  .site-logo,
  .custom-logo {
    max-width: min(235px, calc(100vw - 88px)) !important;
    max-height: 48px !important;
  }

  .hero,
  .dashboard-hero,
  .day-hd {
    padding: 28px 18px !important;
  }

  .hero h1,
  .dashboard-hero h1,
  .hero-copy h1 {
    font-size: clamp(1.85rem, 10vw, 2.5rem) !important;
  }
}


/* SysAiCloud v1.5.5-preview: pre-final Coding Path content enhancements */
.bot-nav a.next-day-btn,
.bot-nav a.next-day-btn:visited,
.bot-nav a.next-day-btn:hover,
.bot-nav a.next-day-btn:focus,
.bot-nav a:not(.ghost):last-child,
.bot-nav a:not(.ghost):last-child:visited {
  color: #ffffff !important;
  background: #0b63f6 !important;
  border-color: #0b63f6 !important;
}

.coding-month-progress-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.coding-month-progress-map article {
  background: #ffffff;
  border: 1px solid #dce7f5;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(15, 46, 93, .07);
}
.coding-month-progress-map span {
  display: block;
  color: #0b63f6;
  font-weight: 900;
  font-size: .82rem;
  margin-bottom: 5px;
}
.coding-month-progress-map strong {
  display: block;
  color: #071832;
  margin-bottom: 10px;
}
.progress-track {
  height: 9px;
  background: #eaf2ff;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.progress-track i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #0b63f6, #38bdf8);
  border-radius: 999px;
}
.coding-month-progress-map a,
.coding-method-section .workflow-plan-card a,
.coding-architecture-section .workflow-plan-card a {
  color: #0b63f6;
  font-weight: 900;
  text-decoration: none;
}
.coding-month-progress-map a:hover,
.coding-method-section .workflow-plan-card a:hover,
.coding-architecture-section .workflow-plan-card a:hover {
  text-decoration: underline;
}
.challenge-project-card {
  border-left: 6px solid #0b63f6 !important;
}
.coding-day-expanded .numbered-day-section {
  scroll-margin-top: 110px;
}

@media (max-width: 900px) {
  .coding-month-progress-map {
    grid-template-columns: 1fr !important;
  }
}


/* SysAiCloud v1.5.6-preview: Coding Path day header readability fix
   Fixes Pic3: white/pale text on white background in Day 001–365 header. */
.coding-day-expanded .day-hd,
.coding-path .day-hd {
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,247,255,.98) 52%, rgba(232,246,255,.98)),
    radial-gradient(circle at 82% 18%, rgba(19,93,245,.13), transparent 30%) !important;
  color: #071832 !important;
  border: 1px solid #d8e7fb !important;
  box-shadow: 0 16px 44px rgba(15,46,93,.10) !important;
}

.coding-day-expanded .day-hd h1,
.coding-path .day-hd h1,
.coding-day-expanded .day-hd h2,
.coding-path .day-hd h2 {
  color: #071832 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.coding-day-expanded .day-hd .ov,
.coding-path .day-hd .ov,
.coding-day-expanded .day-hd p,
.coding-path .day-hd p {
  color: #425b77 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.coding-day-expanded .day-hd .d-badge,
.coding-path .day-hd .d-badge,
.coding-day-expanded .day-hd .meta-chip,
.coding-path .day-hd .meta-chip,
.coding-day-expanded .day-meta-row .meta-chip,
.coding-path .day-meta-row .meta-chip {
  background: #eef5ff !important;
  color: #0b63f6 !important;
  border: 1px solid #d2e1ff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.coding-day-expanded .day-meta-row,
.coding-path .day-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

@media (max-width: 820px) {
  .coding-day-expanded .day-hd,
  .coding-path .day-hd {
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    padding: 30px 18px !important;
  }

  .coding-day-expanded .day-hd h1,
  .coding-path .day-hd h1 {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
    line-height: 1.08 !important;
  }
}


/* SysAiCloud v1.6.0-preview: direct rendered Choose Path + Search fix */

/* Old top-right path selector is not used anymore; hide any leftover legacy instance */
.site-top-header .learning-path-selector,
.site-top-header .path-selector,
.site-top-header .choose-path,
.site-top-header .path-switcher,
.top-header-inner .learning-path-selector,
.top-header-inner .path-selector,
.top-header-inner .choose-path,
.top-header-inner .path-switcher {
  display: none !important;
}

/* Left sidebar path selector replaces old "No Coding Path / Browse..." title area */
.sidebar-path-selector.sysaicloud-v160-marker,
.sidebar-path-selector {
  background: linear-gradient(135deg, #eef5ff, #f8fbff) !important;
  border: 1px solid #d2e1ff !important;
  border-radius: 18px !important;
  padding: 16px !important;
  margin: 0 0 18px !important;
  box-shadow: 0 8px 22px rgba(15, 46, 93, .06) !important;
}

.sidebar-path-selector label {
  display: block !important;
  color: #071832 !important;
  font-weight: 900 !important;
  font-size: .95rem !important;
  margin-bottom: 8px !important;
}

.sidebar-path-selector select {
  width: 100% !important;
  min-height: 44px !important;
  border: 1px solid #c8dcff !important;
  border-radius: 14px !important;
  padding: 8px 12px !important;
  color: #071832 !important;
  background: #ffffff !important;
  font-weight: 800 !important;
}

.sidebar-path-selector small {
  display: block !important;
  margin-top: 8px !important;
  color: #52637a !important;
  font-weight: 700 !important;
}

/* Top-right keyword search */
.top-keyword-search.sysaicloud-v160-marker,
.top-keyword-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: auto !important;
  max-width: 420px !important;
  flex: 0 1 420px !important;
}

.top-keyword-search input {
  width: 100% !important;
  min-width: 220px !important;
  height: 42px !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 999px !important;
  padding: 0 15px !important;
  color: #071832 !important;
  background: #ffffff !important;
  box-shadow: 0 5px 16px rgba(15, 46, 93, .06) !important;
}

.top-keyword-search button {
  height: 42px !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 0 16px !important;
  background: #0b63f6 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.global-search-results {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 9999 !important;
  width: min(440px, 92vw) !important;
  max-height: 360px !important;
  overflow: auto !important;
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(15, 46, 93, .16) !important;
  padding: 8px !important;
  display: none;
}

.global-search-results.is-open { display: block !important; }

.global-search-results a {
  display: block !important;
  padding: 11px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #071832 !important;
  font-weight: 800 !important;
}

.global-search-results a:hover {
  background: #eef5ff !important;
  color: #0b63f6 !important;
}

.global-search-results small {
  display: block !important;
  margin-top: 2px !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

/* Top menu visibility */
.top-nav a,
.desktop-nav a,
.main-nav a,
.nav-menu a,
.top-nav-link {
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

/* Tablet/iPad polish */
@media (min-width: 821px) and (max-width: 1180px) {
  .site-top-header,
  .top-header-inner,
  .site-header-inner {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 18px !important;
    height: auto !important;
  }

  .top-keyword-search {
    order: 3 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .top-keyword-search input {
    min-width: 0 !important;
  }

  .site-shell,
  .learning-shell,
  .app-shell,
  .page-shell {
    display: grid !important;
    grid-template-columns: 310px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .learning-sidebar,
  .sidebar {
    display: block !important;
    width: 310px !important;
    max-width: 310px !important;
    min-width: 0 !important;
    padding: 18px 16px !important;
    overflow-x: hidden !important;
  }

  .main-area,
  .page-main,
  .content-area {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .visual-grid,
  .roadmap-grid,
  .resource-grid,
  .card-grid,
  .web-grid,
  .journey-grid,
  .phase-grid,
  .tools-grid,
  .cert-grid,
  .day-grid,
  .process-grid,
  .workflow-grid,
  .coding-month-progress-map {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 820px) {
  .top-keyword-search {
    order: 8 !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  .top-keyword-search input {
    min-width: 0 !important;
  }

  .global-search-results {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
  }
}


/* SysAiCloud v1.6.1: Option A Mega Menu, redesigned footer, FAQ/contact polish */

/* Top nav is now normal/semi-bold rather than heavy. */
.top-nav.sysaicloud-v161-marker,
.top-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-nav a,
.top-nav .mega-trigger,
.desktop-nav a,
.main-nav a,
.nav-menu a,
.top-nav-link {
  font-size: .96rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: #071832;
  text-decoration: none;
}

.top-nav a:hover,
.top-nav .mega-trigger:hover {
  color: #0b63f6;
}

.mega-nav-item {
  position: relative;
}

.mega-trigger {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px 0;
  font-family: inherit;
}

.mega-trigger[aria-expanded="true"],
.mega-nav-item:hover .mega-trigger {
  color: #0b63f6;
}

.mega-panel {
  position: absolute;
  left: 50%;
  top: calc(100% + 12px);
  transform: translateX(-28%);
  z-index: 9999;
  width: min(1120px, 86vw);
  background: #ffffff;
  border: 1px solid #d2dae8;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(15,46,93,.18);
  padding: 28px 0;
  display: none;
}

.mega-nav-item:hover .mega-panel,
.mega-nav-item.is-open .mega-panel {
  display: grid;
}

.mega-doc-columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mega-resources-panel {
  width: min(860px, 84vw);
}

.mega-pointer {
  position: absolute;
  top: -12px;
  left: 130px;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border-left: 1px solid #d2dae8;
  border-top: 1px solid #d2dae8;
  transform: rotate(45deg);
}

.mega-col {
  padding: 0 32px 24px;
  border-right: 1px solid #e5eaf2;
  min-height: 170px;
}

.mega-col:nth-child(3n) {
  border-right: 0;
}

.mega-col h3 {
  color: #071832;
  font-size: .98rem;
  font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #cdd5e2;
}

.mega-col a {
  display: block;
  color: #6b7280;
  font-size: .92rem !important;
  font-weight: 400 !important;
  margin: 0 0 13px;
  text-decoration: none;
}

.mega-col a:hover,
.mega-col a.mega-accent {
  color: #0b63f6;
}

/* Slight visual gap between top header/menu and left Choose Path. */
.learning-sidebar {
  padding-top: 24px !important;
}

.sidebar-path-selector {
  margin-top: 10px !important;
}

/* Footer redesign */
.site-footer-v161 {
  background: #071936;
  color: #b7c5db;
  margin-top: 48px;
}

.site-footer-v161 .footer-accent {
  height: 5px;
  background: #0b63f6;
}

.site-footer-v161 .footer-grid {
  display: grid;
  grid-template-columns: 2.1fr repeat(4, 1fr);
  gap: 34px;
  padding: 42px 44px 34px;
}

.site-footer-v161 h2 {
  color: #ffffff;
  font-size: 1.65rem;
  margin: 0 0 14px;
}

.site-footer-v161 .brand-blue {
  color: #38bdf8;
}

.site-footer-v161 p {
  color: #b7c5db;
  line-height: 1.6;
  margin: 0;
}

.site-footer-v161 h3 {
  color: #ffffff;
  font-size: .98rem;
  margin: 0 0 15px;
}

.site-footer-v161 a {
  display: block;
  color: #b7c5db;
  text-decoration: none;
  margin: 0 0 10px;
  font-size: .92rem;
}

.site-footer-v161 a:hover {
  color: #ffffff;
}

.site-footer-v161 .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid #1d355d;
  padding: 18px 44px 24px;
  color: #93a4bc;
  font-size: .82rem;
}

/* FAQ */
.simple-page-hero {
  background: linear-gradient(135deg, #ffffff, #f0f7ff);
  border: 1px solid #dce7f5;
  border-radius: 24px;
  padding: 48px;
}

.simple-page-hero .eyebrow {
  color: #0b63f6;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.simple-page-hero h1 {
  color: #071832;
  font-size: clamp(2.3rem, 4vw, 4rem);
  margin: 14px 0;
}

.simple-page-hero p {
  color: #52637a;
  max-width: 820px;
  font-size: 1.05rem;
}

.faq-page-card details {
  border: 1px solid #dce7f5;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: #ffffff;
}

.faq-page-card summary {
  color: #071832;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
}

.faq-page-card p {
  color: #52637a;
  line-height: 1.65;
  margin: 14px 0 0;
}

/* Contact */
.contact-redesign-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr);
  gap: 24px;
}

.contact-info-card ul {
  margin: 18px 0;
  padding-left: 20px;
}

.contact-info-card li {
  margin-bottom: 11px;
  color: #071832;
  font-weight: 650;
}

.contact-ui-form {
  display: grid;
  gap: 14px;
}

.contact-ui-form label {
  display: grid;
  gap: 7px;
  color: #071832;
  font-weight: 700;
}

.contact-ui-form input,
.contact-ui-form select,
.contact-ui-form textarea {
  width: 100%;
  border: 1px solid #dce7f5;
  border-radius: 14px;
  padding: 13px 14px;
  background: #f8fbff;
  color: #071832;
  font: inherit;
}

.contact-ui-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-ui-form button {
  width: fit-content;
  border: 0;
  border-radius: 16px;
  padding: 14px 24px;
  background: #0b63f6;
  color: #ffffff;
  font-weight: 800;
}

/* Mobile/tablet mega menu fallback */
@media (max-width: 1180px) {
  .top-nav.sysaicloud-v161-marker {
    flex-wrap: wrap;
    gap: 12px;
  }
  .mega-panel {
    left: 0;
    transform: none;
    width: min(720px, 92vw);
  }
  .mega-doc-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .top-nav.sysaicloud-v161-marker {
    display: none;
  }
  .mega-panel {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
  }
  .mega-doc-columns {
    grid-template-columns: 1fr;
  }
  .mega-col {
    border-right: 0;
    border-bottom: 1px solid #e5eaf2;
  }
  .site-footer-v161 .footer-grid {
    grid-template-columns: 1fr;
    padding: 34px 24px;
  }
  .site-footer-v161 .footer-bottom {
    display: grid;
    padding: 18px 24px 24px;
  }
  .contact-redesign-grid {
    grid-template-columns: 1fr;
  }
}


/* SysAiCloud v1.6.2-preview: footer/menu/contact troubleshooting */

/* Header/menu layout fix from Pic8 */
.site-top-header-v162,
.site-top-header {
  overflow: visible !important;
}

.brand-v162 img,
.site-top-header .brand img {
  max-width: 210px !important;
  max-height: 54px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.top-nav-v162 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  margin: 0 28px !important;
}

.top-nav-v162 a,
.top-nav-v162 .mega-trigger-v162 {
  color: #071832 !important;
  font-size: .98rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

.top-nav-v162 a:hover,
.top-nav-v162 .mega-trigger-v162:hover {
  color: #0b63f6 !important;
}

.mega-nav-item-v162 {
  position: relative !important;
}

.mega-trigger-v162 {
  border: 0 !important;
  background: transparent !important;
  padding: 10px 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.mega-panel-v162 {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 14px) !important;
  transform: translateX(-34%) !important;
  z-index: 99999 !important;
  width: min(1120px, 88vw) !important;
  background: #ffffff !important;
  border: 1px solid #d2dae8 !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 70px rgba(15,46,93,.18) !important;
  padding: 28px 0 12px !important;
  display: none !important;
}

.mega-nav-item-v162:hover .mega-panel-v162,
.mega-nav-item-v162.is-open .mega-panel-v162 {
  display: grid !important;
}

.mega-doc-columns-v162 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mega-resources-panel-v162 {
  width: min(860px, 84vw) !important;
}

.mega-pointer-v162 {
  position: absolute !important;
  top: -12px !important;
  left: 130px !important;
  width: 24px !important;
  height: 24px !important;
  background: #ffffff !important;
  border-left: 1px solid #d2dae8 !important;
  border-top: 1px solid #d2dae8 !important;
  transform: rotate(45deg) !important;
}

.mega-col-v162 {
  padding: 0 32px 20px !important;
  border-right: 1px solid #e5eaf2 !important;
  min-height: 160px !important;
}

.mega-col-v162:nth-child(3n) {
  border-right: 0 !important;
}

.mega-col-v162 h3 {
  color: #071832 !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #cdd5e2 !important;
}

.mega-col-v162 a {
  display: block !important;
  color: #6b7280 !important;
  font-size: .92rem !important;
  font-weight: 400 !important;
  margin: 0 0 13px !important;
  text-decoration: none !important;
}

.mega-col-v162 a:hover,
.mega-col-v162 a.mega-accent-v162 {
  color: #0b63f6 !important;
}

/* Search field remains on the right but does not crush menu */
.top-keyword-search {
  flex: 0 0 360px !important;
  max-width: 360px !important;
}

/* Footer back to Pic6-style light/centered design */
.site-footer-v161 {
  display: none !important;
}

.site-footer-v162 {
  background: #ffffff !important;
  border-top: 1px solid #dce7f5 !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 30px 24px 28px !important;
  text-align: center !important;
  box-shadow: 0 -8px 24px rgba(15, 46, 93, .05) !important;
  margin-top: 42px !important;
}

.footer-links-v162 {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px 24px !important;
  margin-bottom: 18px !important;
}

.footer-links-v162 a {
  color: #0b63f6 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  font-size: .96rem !important;
}

.footer-links-v162 a:hover {
  text-decoration: underline !important;
}

.footer-copy-v162 {
  color: #52637a !important;
  margin: 0 0 10px !important;
  font-size: .95rem !important;
}

.footer-powered-v162 {
  color: #071832 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: .95rem !important;
}

/* Contact page fix from Pic7 */
.contact-page-v162 .page-container,
.contact-container-v162 {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 28px 24px 48px !important;
}

.contact-hero-v162 {
  background: linear-gradient(135deg, #ffffff, #f0f7ff) !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 24px !important;
  padding: 48px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.contact-hero-v162 .eyebrow {
  color: #0b63f6 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.contact-hero-v162 h1 {
  color: #071832 !important;
  font-size: clamp(2.25rem, 4vw, 4rem) !important;
  margin: 14px 0 !important;
  line-height: 1.05 !important;
}

.contact-hero-v162 p {
  color: #52637a !important;
  max-width: 840px !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
}

.contact-grid-v162 {
  display: grid !important;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.contact-grid-v162 .page-card {
  margin: 0 !important;
}

.sidebar-note-card {
  background: #ffffff;
  border: 1px solid #dce7f5;
  border-radius: 16px;
  padding: 14px;
  color: #52637a;
}

.sidebar-note-card strong {
  display: block;
  color: #071832;
  margin-bottom: 6px;
}

.legal-page-v162 .page-container {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 42px 24px !important;
}

@media (max-width: 1280px) {
  .top-nav-v162 {
    gap: 16px !important;
    margin: 0 18px !important;
  }
  .top-keyword-search {
    flex-basis: 300px !important;
    max-width: 300px !important;
  }
}

@media (max-width: 1180px) {
  .top-nav-v162 {
    order: 3 !important;
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    margin: 10px 0 0 !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }
  .top-keyword-search {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  .mega-panel-v162 {
    left: 0 !important;
    transform: none !important;
    width: min(720px, 92vw) !important;
  }
  .mega-doc-columns-v162 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  .top-nav-v162 {
    display: none !important;
  }
  .contact-grid-v162 {
    grid-template-columns: 1fr !important;
  }
  .contact-hero-v162 {
    padding: 32px 22px !important;
    border-radius: 0 !important;
  }
  .footer-links-v162 {
    gap: 12px 16px !important;
  }
}


/* SysAiCloud v1.6.2-preview-about-footer: move About Us to footer to reduce top menu tightness */
.top-nav-v162 {
  gap: 30px !important;
}

@media (max-width: 1280px) {
  .top-nav-v162 {
    gap: 20px !important;
  }
}


/* SysAiCloud v1.6.3-preview: hard fix for Contact/FAQ/Legal pages and footer page routing */

/* Prevent oversized logo/header issue on Contact and generated pages */
.sysaicloud-v163-page-shell .site-top-header-v163,
.site-top-header-v163 {
  min-height: 72px !important;
  height: auto !important;
  padding: 10px 22px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  overflow: visible !important;
  background: #ffffff !important;
}

.sysaicloud-v163-page-shell .brand-v163,
.site-top-header-v163 .brand-v163 {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  max-width: 230px !important;
  overflow: hidden !important;
}

.sysaicloud-v163-page-shell .brand-v163 img,
.site-top-header-v163 .brand-v163 img,
.contact-page-v163 .brand img,
.contact-page-v163 .site-top-header img {
  width: auto !important;
  max-width: 210px !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Page shell stability */
.sysaicloud-v163-page-shell {
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

.sysaicloud-v163-page-shell .main-area {
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.v163-sidebar {
  padding-top: 24px !important;
  background: #ffffff !important;
  border-right: 1px solid #dce7f5 !important;
}

/* Contact page fixed design */
.contact-container-v163 {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 28px 24px 52px !important;
}

.contact-hero-v163,
.simple-page-hero-v163 {
  background: linear-gradient(135deg, #ffffff, #f0f7ff) !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 24px !important;
  padding: 44px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.contact-hero-v163 .eyebrow,
.simple-page-hero-v163 .eyebrow {
  color: #0b63f6 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

.contact-hero-v163 h1,
.simple-page-hero-v163 h1 {
  color: #071832 !important;
  font-size: clamp(2.1rem, 4vw, 3.7rem) !important;
  line-height: 1.05 !important;
  margin: 12px 0 16px !important;
}

.contact-hero-v163 p,
.simple-page-hero-v163 p {
  color: #52637a !important;
  max-width: 820px !important;
  font-size: 1.05rem !important;
  line-height: 1.65 !important;
}

.contact-grid-v163 {
  display: grid !important;
  grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.contact-info-card-v163,
.contact-form-card-v163 {
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 22px !important;
  padding: 24px !important;
  margin: 0 !important;
  box-shadow: 0 10px 28px rgba(15, 46, 93, .06) !important;
}

.contact-info-card-v163 h2,
.contact-form-card-v163 h2 {
  color: #071832 !important;
  margin: 0 0 18px !important;
}

.contact-info-card-v163 li {
  color: #071832 !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
}

.contact-info-card-v163 p {
  color: #52637a !important;
  line-height: 1.6 !important;
}

.contact-ui-form-v163 {
  display: grid !important;
  gap: 14px !important;
}

.contact-ui-form-v163 label {
  display: grid !important;
  gap: 7px !important;
  color: #071832 !important;
  font-weight: 700 !important;
}

.contact-ui-form-v163 input,
.contact-ui-form-v163 select,
.contact-ui-form-v163 textarea {
  width: 100% !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
  background: #f8fbff !important;
  color: #071832 !important;
  font: inherit !important;
  box-sizing: border-box !important;
}

.contact-ui-form-v163 textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

.contact-ui-form-v163 button {
  width: fit-content !important;
  border: 0 !important;
  border-radius: 16px !important;
  padding: 14px 24px !important;
  background: #0b63f6 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* FAQ / Legal */
.faq-page-card-v163 details {
  border: 1px solid #dce7f5 !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
  background: #ffffff !important;
}

.faq-page-card-v163 summary {
  color: #071832 !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}

.faq-page-card-v163 p,
.legal-card-v163 p {
  color: #52637a !important;
  line-height: 1.65 !important;
}

.legal-container-v163 {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 42px 24px !important;
}

.legal-card-v163 h1 {
  color: #071832 !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

.legal-card-v163 h2 {
  color: #071832 !important;
  margin-top: 26px !important;
}

/* Make footer page links reliable */
.site-footer-v162 a[href*="privacy-policy"],
.site-footer-v162 a[href*="terms"],
.site-footer-v162 a[href*="faq"],
.site-footer-v162 a[href*="contact"] {
  color: #0b63f6 !important;
}

/* Tablet/phone */
@media (max-width: 900px) {
  .sysaicloud-v163-page-shell {
    display: block !important;
  }
  .v163-sidebar {
    display: none !important;
  }
  .contact-grid-v163 {
    grid-template-columns: 1fr !important;
  }
  .contact-hero-v163,
  .simple-page-hero-v163 {
    padding: 32px 22px !important;
    border-radius: 0 !important;
  }
  .site-top-header-v163 {
    flex-wrap: wrap !important;
  }
}


/* SysAiCloud v1.6.3-preview-menu-hover-fix:
   1) Top menu semi-bold
   2) Mega menu hover gap fixed
   3) Mega menu arrow aligned and hover-safe
*/

/* Top menu: semi-bold, clear, not overly heavy */
.top-nav-v162 a,
.top-nav-v162 .mega-trigger-v162,
.top-nav a,
.top-nav .mega-trigger,
.nav-link-v162 {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}

/* Keep each mega parent hoverable from trigger down into panel */
.mega-nav-item-v162 {
  position: relative !important;
  padding-bottom: 16px !important; /* invisible hover runway below the menu item */
  margin-bottom: -16px !important;
}

/* Remove the gap that caused mouse hover to drop before reaching panel */
.mega-panel-v162 {
  top: calc(100% - 1px) !important;
  margin-top: 0 !important;
  pointer-events: auto !important;
}

/* Add an invisible hover bridge between trigger and dropdown */
.mega-panel-v162::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: -18px !important;
  height: 18px !important;
  background: transparent !important;
  display: block !important;
}

/* Make dropdown remain open while hovering panel or parent */
.mega-nav-item-v162:hover .mega-panel-v162,
.mega-nav-item-v162:focus-within .mega-panel-v162,
.mega-nav-item-v162.is-open .mega-panel-v162 {
  display: grid !important;
}

/* Arrow/pointer alignment: place pointer directly under menu trigger area */
.mega-pointer-v162 {
  left: 54px !important;
  top: -12px !important;
  transform: rotate(45deg) !important;
  pointer-events: none !important;
}

/* Learning Paths panel has a wider panel; align pointer near trigger */
.top-nav-v162 .mega-nav-item-v162:first-of-type .mega-pointer-v162 {
  left: 72px !important;
}

/* Resources panel pointer aligns with Resources trigger */
.top-nav-v162 .mega-nav-item-v162:nth-of-type(2) .mega-pointer-v162 {
  left: 60px !important;
}

/* Improve clickable link area inside mega menu */
.mega-col-v162 a {
  padding: 3px 0 !important;
  border-radius: 6px !important;
}

.mega-col-v162 a:hover {
  background: #f3f8ff !important;
  padding-left: 6px !important;
}


/* SysAiCloud v1.6.3-preview-mobile-tablet-mega-fix:
   Make mega menus work on tablets and phones as tap-friendly accordions.
*/

/* Desktop remains dropdown, but improves alignment containment */
@media (min-width: 1181px) {
  .site-top-header,
  .site-top-header-v163 {
    overflow: visible !important;
  }

  .top-nav-v162 {
    position: relative !important;
    overflow: visible !important;
  }

  .mega-nav-item-v162 {
    position: relative !important;
  }

  .mega-panel-v162 {
    max-width: calc(100vw - 56px) !important;
  }
}

/* Tablet: menu becomes a full-width second row, mega panel becomes contained and tap-open */
@media (min-width: 821px) and (max-width: 1180px) {
  .site-top-header,
  .site-top-header-v163 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 12px 18px !important;
  }

  .brand-v163,
  .site-top-header .brand {
    flex: 0 0 auto !important;
    max-width: 230px !important;
  }

  .top-keyword-search {
    order: 2 !important;
    flex: 1 1 360px !important;
    max-width: none !important;
    min-width: 240px !important;
  }

  .top-nav-v162 {
    order: 3 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px 18px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #e8eef7 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .top-nav-v162 .nav-link-v162,
  .top-nav-v162 .mega-trigger-v162 {
    font-size: .95rem !important;
    font-weight: 600 !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    border: 1px solid #e1ecfb !important;
  }

  .mega-nav-item-v162 {
    position: static !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .mega-panel-v162 {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    top: auto !important;
    margin-top: 10px !important;
    padding: 18px 0 8px !important;
    box-shadow: 0 14px 38px rgba(15,46,93,.12) !important;
    border-radius: 16px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    order: 99 !important;
  }

  .mega-panel-v162::before,
  .mega-pointer-v162 {
    display: none !important;
  }

  .mega-col-v162 {
    border-right: 0 !important;
    border-bottom: 1px solid #e5eaf2 !important;
    min-height: 0 !important;
    padding: 0 22px 18px !important;
  }

  .mega-col-v162:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }
}

/* Phone: nav becomes stacked accordion; no hover panel; no misalignment */
@media (max-width: 820px) {
  .site-top-header,
  .site-top-header-v163 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 12px 16px !important;
  }

  .brand-v163,
  .site-top-header .brand {
    flex: 1 1 100% !important;
    max-width: 220px !important;
  }

  .brand-v163 img,
  .site-top-header .brand img {
    max-width: 190px !important;
    max-height: 48px !important;
  }

  .top-keyword-search {
    order: 2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .top-keyword-search input {
    min-width: 0 !important;
  }

  .top-nav-v162 {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
    margin: 6px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #e8eef7 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .top-nav-v162 .nav-link-v162,
  .top-nav-v162 .mega-trigger-v162 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 14px !important;
    border-radius: 14px !important;
    background: #f8fbff !important;
    border: 1px solid #e1ecfb !important;
    font-size: .98rem !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
  }

  .mega-nav-item-v162 {
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-panel-v162 {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 14px 0 4px !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }

  .mega-panel-v162::before,
  .mega-pointer-v162 {
    display: none !important;
  }

  .mega-col-v162 {
    border-right: 0 !important;
    border-bottom: 1px solid #e5eaf2 !important;
    min-height: 0 !important;
    padding: 0 16px 14px !important;
  }

  .mega-col-v162:last-child {
    border-bottom: 0 !important;
  }

  .mega-col-v162 h3 {
    font-size: .95rem !important;
    margin: 0 0 10px !important;
  }

  .mega-col-v162 a {
    font-size: .92rem !important;
    padding: 4px 0 !important;
    margin-bottom: 8px !important;
  }
}

/* Mobile/tablet: JS class controls visibility; hover should not be required */
@media (max-width: 1180px) {
  .mega-panel-v162 {
    display: none !important;
  }

  .mega-nav-item-v162.is-open .mega-panel-v162 {
    display: grid !important;
  }

  .mega-nav-item-v162:hover .mega-panel-v162 {
    display: none !important;
  }

  .mega-nav-item-v162.is-open:hover .mega-panel-v162 {
    display: grid !important;
  }

  .mega-trigger-v162[aria-expanded="true"] {
    background: #eef5ff !important;
    color: #0b63f6 !important;
    border-color: #cfe0ff !important;
  }
}


/* SysAiCloud v1.6.4-preview: alignment + menu height + footer order + tablet stability */

/* 1) Align FAQ / Contact / Terms / Privacy cards toward the left after sidebar */
.legal-page-v163 .legal-container-v164,
.faq-page-v163 .faq-container-v164,
.contact-page-v163 .contact-container-v164 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 28px 32px 52px 34px !important;
  box-sizing: border-box !important;
}

.legal-page-v163 .legal-card-v163 {
  width: min(980px, calc(100vw - 410px)) !important;
  max-width: 980px !important;
  margin: 0 !important;
}

.faq-page-v163 .simple-page-hero-v163,
.faq-page-v163 .faq-page-card-v163,
.contact-page-v163 .contact-hero-v163,
.contact-page-v163 .contact-grid-v163 {
  width: min(1120px, calc(100vw - 410px)) !important;
  max-width: 1120px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Ensure the left area does not create an oversized blank gap */
.sysaicloud-v163-page-shell {
  grid-template-columns: 320px minmax(0, 1fr) !important;
}

.sysaicloud-v163-page-shell .main-area {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 2) Align menu/header height consistently on generated pages */
.site-top-header,
.site-top-header-v163 {
  min-height: 86px !important;
  height: 86px !important;
  padding: 0 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid #dce7f5 !important;
  background: #ffffff !important;
}

.site-top-header-v163 .brand-v163,
.site-top-header .brand {
  height: 86px !important;
  display: flex !important;
  align-items: center !important;
}

.site-top-header-v163 .brand-v163 img,
.site-top-header .brand img {
  max-width: 210px !important;
  max-height: 54px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

.top-strip-v164,
.top-strip-v163,
.top-strip {
  min-height: 62px !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 10px 32px !important;
  box-sizing: border-box !important;
}

/* Keep nav centered vertically and prevent squeezing */
.top-nav-v162 {
  align-items: center !important;
  min-height: 86px !important;
  gap: 28px !important;
}

.top-nav-v162 a,
.top-nav-v162 .mega-trigger-v162 {
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Search button should not wrap into two lines */
.top-keyword-search {
  flex: 0 0 390px !important;
  max-width: 390px !important;
  align-items: center !important;
}

.top-keyword-search button {
  min-width: 92px !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* 3) Footer link order is controlled in PHP; keep layout centered and stable */
.site-footer-v162 .footer-links-v162 {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4) Tablet troubleshooting: prevent blank/non-loading feel from overflow or huge panels */
@media (min-width: 821px) and (max-width: 1180px) {
  body,
  html {
    overflow-x: hidden !important;
  }

  .site-shell,
  .sysaicloud-v163-page-shell {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .learning-sidebar,
  .v163-sidebar {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .main-area {
    min-width: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 280px) !important;
    overflow-x: hidden !important;
  }

  .site-top-header,
  .site-top-header-v163 {
    height: auto !important;
    min-height: 86px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    padding: 12px 16px !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163 {
    height: 56px !important;
  }

  .top-keyword-search {
    order: 2 !important;
    flex: 1 1 320px !important;
    max-width: none !important;
  }

  .top-nav-v162 {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 14px !important;
    border-top: 1px solid #e8eef7 !important;
    padding-top: 10px !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .mega-panel-v162 {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    box-sizing: border-box !important;
  }

  .mega-pointer-v162 {
    display: none !important;
  }

  .legal-page-v163 .legal-container-v164,
  .faq-page-v163 .faq-container-v164,
  .contact-page-v163 .contact-container-v164 {
    padding: 24px 22px 46px !important;
  }

  .legal-page-v163 .legal-card-v163,
  .faq-page-v163 .simple-page-hero-v163,
  .faq-page-v163 .faq-page-card-v163,
  .contact-page-v163 .contact-hero-v163,
  .contact-page-v163 .contact-grid-v163 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone: single-column stable layout */
@media (max-width: 820px) {
  .sysaicloud-v163-page-shell,
  .site-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .learning-sidebar,
  .v163-sidebar {
    display: none !important;
  }

  .main-area {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-top-header,
  .site-top-header-v163 {
    height: auto !important;
    min-height: 72px !important;
    flex-wrap: wrap !important;
    padding: 12px 16px !important;
  }

  .top-nav-v162 {
    min-height: 0 !important;
    gap: 10px !important;
  }

  .legal-page-v163 .legal-container-v164,
  .faq-page-v163 .faq-container-v164,
  .contact-page-v163 .contact-container-v164 {
    padding: 18px 14px 34px !important;
  }

  .legal-page-v163 .legal-card-v163,
  .faq-page-v163 .simple-page-hero-v163,
  .faq-page-v163 .faq-page-card-v163,
  .contact-page-v163 .contact-hero-v163,
  .contact-page-v163 .contact-grid-v163 {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* SysAiCloud v1.6.4-preview-contact-email: Contact page email line */
.contact-email-line {
  margin-top: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 14px !important;
  background: #f8fbff !important;
  color: #071832 !important;
  font-weight: 700 !important;
}

.contact-email-line a {
  color: #0b63f6 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.contact-email-line a:hover {
  text-decoration: underline !important;
}


/* SysAiCloud v1.6.5-preview: iPad alignment + 65px header + mega pointer alignment */

/* Global desktop header/menu height reduced to 65px */
@media (min-width: 1181px) {
  .site-top-header,
  .site-top-header-v163 {
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    overflow: visible !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163 {
    height: 65px !important;
    max-height: 65px !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img,
  .brand-v162 img {
    max-height: 42px !important;
    max-width: 190px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .top-nav-v162 {
    min-height: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    margin: 0 22px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .top-nav-v162 a,
  .top-nav-v162 .mega-trigger-v162 {
    font-size: .94rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  .top-keyword-search {
    flex: 0 0 390px !important;
    max-width: 390px !important;
    height: 40px !important;
    align-items: center !important;
  }

  .top-keyword-search input {
    height: 40px !important;
  }

  .top-keyword-search button {
    height: 40px !important;
    min-width: 88px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
}

/* Mega menu arrow alignment and hover reliability on desktop */
@media (min-width: 1181px) {
  .mega-nav-item-v162 {
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: -12px !important;
  }

  .mega-panel-v162 {
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    transform: none !important;
    left: -48px !important;
    pointer-events: auto !important;
  }

  .mega-resources-panel-v162 {
    left: -42px !important;
  }

  .mega-panel-v162::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -16px !important;
    height: 16px !important;
    background: transparent !important;
    display: block !important;
  }

  .mega-pointer-v162 {
    left: 84px !important;
    top: -12px !important;
    width: 24px !important;
    height: 24px !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
  }

  .mega-resources-panel-v162 .mega-pointer-v162 {
    left: 76px !important;
  }

  .mega-nav-item-v162:hover .mega-panel-v162,
  .mega-nav-item-v162:focus-within .mega-panel-v162,
  .mega-nav-item-v162.is-open .mega-panel-v162 {
    display: grid !important;
  }
}

/* iPad/tablet alignment fix:
   Pic13 shows a large blank left offset. On tablets and iPads, remove the
   sidebar column and let content use the full viewport width.
*/
@media (min-width: 821px) and (max-width: 1180px) {
  html,
  body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .site-shell,
  .learning-shell,
  .app-shell,
  .page-shell,
  .sysaicloud-v163-page-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .learning-sidebar,
  .sidebar,
  .v163-sidebar {
    display: none !important;
  }

  .main-area,
  .page-main,
  .content-area {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .site-top-header,
  .site-top-header-v163 {
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 65px !important;
    height: auto !important;
    padding: 10px 18px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163 {
    height: 52px !important;
    max-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img {
    max-width: 190px !important;
    max-height: 42px !important;
  }

  .top-keyword-search {
    order: 2 !important;
    flex: 1 1 340px !important;
    max-width: none !important;
    min-width: 260px !important;
    height: 38px !important;
    margin: 0 !important;
  }

  .top-keyword-search input,
  .top-keyword-search button {
    height: 38px !important;
  }

  .top-keyword-search button {
    min-width: 88px !important;
    white-space: nowrap !important;
  }

  .top-nav-v162 {
    order: 3 !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px 12px !important;
    padding: 10px 0 0 !important;
    margin: 0 !important;
    border-top: 1px solid #e8eef7 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .top-nav-v162 .nav-link-v162,
  .top-nav-v162 .mega-trigger-v162 {
    font-size: .94rem !important;
    font-weight: 600 !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    border: 1px solid #e1ecfb !important;
  }

  .breadcrumb,
  .breadcrumb-v163,
  .top-strip,
  .top-strip-v163,
  .top-strip-v164 {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }

  .page-container,
  .home-container,
  .content-container,
  .legal-container-v164,
  .faq-container-v164,
  .contact-container-v164 {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 22px !important;
    box-sizing: border-box !important;
  }

  .hero-section,
  .hero,
  .page-hero,
  .simple-page-hero-v163,
  .contact-hero-v163,
  .legal-card-v163,
  .faq-page-card-v163,
  .contact-grid-v163,
  .visual-roadmap,
  .roadmap-section,
  .page-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .mega-nav-item-v162 {
    position: static !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-panel-v162 {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    box-shadow: 0 12px 32px rgba(15,46,93,.12) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mega-pointer-v162,
  .mega-panel-v162::before {
    display: none !important;
  }
}

/* Phone remains single-column and compact */
@media (max-width: 820px) {
  .site-top-header,
  .site-top-header-v163 {
    min-height: 65px !important;
    height: auto !important;
    padding: 10px 14px !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img {
    max-width: 180px !important;
    max-height: 42px !important;
  }

  .top-keyword-search button {
    min-width: 82px !important;
    white-space: nowrap !important;
  }

  .page-container,
  .home-container,
  .content-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }
}


/* SysAiCloud v1.6.6: generated pages redesign + iPad nav overlap fix + menu simplification */

/* New top menu is shorter: Home, Learning Paths, Resources, Study Plan, Tools */
@media (min-width: 1181px) {
  .site-top-header,
  .site-top-header-v163,
  .site-top-header-v166 {
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    display: grid !important;
    grid-template-columns: 230px minmax(520px, 1fr) 380px !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 0 24px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163,
  .site-top-header-v166 .brand-v166 {
    width: 220px !important;
    max-width: 220px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img,
  .site-top-header-v166 .brand-v166 img {
    max-width: 205px !important;
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .top-nav-v162 {
    min-height: 65px !important;
    height: 65px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 2vw, 34px) !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .top-nav-v162 a,
  .top-nav-v162 .mega-trigger-v162 {
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .top-keyword-search {
    width: 100% !important;
    max-width: 380px !important;
    min-width: 0 !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-self: end !important;
  }

  .top-keyword-search input {
    height: 40px !important;
    min-width: 0 !important;
  }

  .top-keyword-search button {
    height: 40px !important;
    min-width: 88px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }
}

/* Mega pointer alignment now works with shorter nav */
@media (min-width: 1181px) {
  .mega-nav-item-v162 {
    position: relative !important;
    padding-bottom: 12px !important;
    margin-bottom: -12px !important;
  }

  .mega-panel-v162 {
    top: calc(100% - 1px) !important;
    margin-top: 0 !important;
    transform: none !important;
    left: -52px !important;
    pointer-events: auto !important;
  }

  .mega-resources-panel-v162 {
    left: -50px !important;
  }

  .mega-panel-v162::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -16px !important;
    height: 16px !important;
    background: transparent !important;
    display: block !important;
  }

  .mega-pointer-v162 {
    left: 86px !important;
    top: -12px !important;
    width: 24px !important;
    height: 24px !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
  }

  .mega-resources-panel-v162 .mega-pointer-v162 {
    left: 78px !important;
  }
}

/* iPad Pro / tablet landscape overlap fix: make header wrap instead of logo/nav overlap */
@media (min-width: 821px) and (max-width: 1366px) {
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .site-shell,
  .sysaicloud-v166-page-shell,
  .sysaicloud-v163-page-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .learning-sidebar,
  .v163-sidebar,
  .sidebar {
    display: none !important;
  }

  .main-area {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .site-top-header,
  .site-top-header-v163,
  .site-top-header-v166 {
    height: auto !important;
    min-height: 65px !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(190px, 230px) minmax(280px, 1fr) !important;
    grid-template-areas:
      "brand search"
      "nav nav" !important;
    align-items: center !important;
    gap: 8px 16px !important;
    padding: 10px 18px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163,
  .site-top-header-v166 .brand-v166 {
    grid-area: brand !important;
    height: 48px !important;
    max-height: 48px !important;
    width: 220px !important;
    max-width: 220px !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img,
  .site-top-header-v166 .brand-v166 img {
    max-width: 205px !important;
    max-height: 42px !important;
  }

  .top-keyword-search {
    grid-area: search !important;
    justify-self: end !important;
    width: min(390px, 100%) !important;
    max-width: 390px !important;
    min-width: 240px !important;
    height: 38px !important;
  }

  .top-keyword-search input,
  .top-keyword-search button {
    height: 38px !important;
  }

  .top-keyword-search button {
    min-width: 86px !important;
    white-space: nowrap !important;
  }

  .top-nav-v162 {
    grid-area: nav !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 9px 12px !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #e8eef7 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .top-nav-v162 .nav-link-v162,
  .top-nav-v162 .mega-trigger-v162 {
    font-size: .94rem !important;
    font-weight: 600 !important;
    min-height: 36px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    border: 1px solid #e1ecfb !important;
  }

  .mega-nav-item-v162 {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-panel-v162 {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    box-shadow: 0 12px 32px rgba(15,46,93,.12) !important;
    margin-top: 8px !important;
  }

  .mega-pointer-v162,
  .mega-panel-v162::before {
    display: none !important;
  }
}

/* Phone remains stacked and compact */
@media (max-width: 820px) {
  .site-top-header,
  .site-top-header-v163,
  .site-top-header-v166 {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "brand brand"
      "search search"
      "nav nav" !important;
    min-height: 65px !important;
    height: auto !important;
    padding: 10px 14px !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163,
  .site-top-header-v166 .brand-v166 {
    grid-area: brand !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img,
  .site-top-header-v166 .brand-v166 img {
    max-width: 190px !important;
    max-height: 42px !important;
  }

  .top-keyword-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
  }

  .top-nav-v162 {
    grid-area: nav !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* Redesigned generated pages: FAQ, Terms, Privacy Policy, Contact */
.sysaicloud-v166-page-shell {
  display: block !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  background: #f5f8fd !important;
}

.generated-page-v166 {
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

.generated-titlebar-v166 {
  background: #ffffff !important;
  border-bottom: 1px solid #dce7f5 !important;
  padding: 14px clamp(18px, 4vw, 64px) !important;
}

.generated-titlebar-v166 h3 {
  margin: 4px 0 !important;
  color: #071832 !important;
  font-size: 1rem !important;
}

.generated-titlebar-v166 span {
  color: #52637a !important;
  font-size: .9rem !important;
}

.generated-page-wrap-v166 {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 34px 24px 58px !important;
  box-sizing: border-box !important;
}

.generated-hero-v166 {
  background: linear-gradient(135deg, #ffffff, #f0f7ff) !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 24px !important;
  padding: clamp(30px, 5vw, 58px) !important;
  margin: 0 0 24px !important;
  box-shadow: 0 12px 32px rgba(15,46,93,.06) !important;
}

.generated-hero-v166 .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 999px !important;
  background: #eef5ff !important;
  color: #0b63f6 !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  padding: 8px 12px !important;
  text-transform: uppercase !important;
}

.generated-hero-v166 h1 {
  color: #071832 !important;
  font-size: clamp(2.2rem, 5vw, 4.3rem) !important;
  line-height: 1.04 !important;
  margin: 20px 0 16px !important;
}

.generated-hero-v166 p {
  color: #52637a !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.7 !important;
  max-width: 850px !important;
}

.legal-grid-v166,
.faq-grid-v166 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.legal-grid-v166 article,
.faq-grid-v166 details,
.contact-info-v166,
.contact-form-v166 {
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 26px rgba(15,46,93,.055) !important;
}

.legal-grid-v166 h2,
.contact-info-v166 h2,
.contact-form-v166 h2 {
  color: #071832 !important;
  margin: 0 0 12px !important;
  font-size: 1.35rem !important;
}

.legal-grid-v166 p,
.faq-grid-v166 p,
.contact-info-v166 p {
  color: #52637a !important;
  line-height: 1.65 !important;
}

.faq-grid-v166 summary {
  color: #071832 !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
}

.contact-layout-v166 {
  display: grid !important;
  grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

.contact-info-v166 ul {
  margin: 0 0 18px !important;
  padding-left: 20px !important;
}

.contact-info-v166 li {
  color: #071832 !important;
  font-weight: 700 !important;
  margin-bottom: 12px !important;
}

.contact-plugin-notice-v166 {
  border: 1px dashed #b9d3ff !important;
  background: #f8fbff !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
}

.contact-plugin-notice-v166 p {
  margin: 0 !important;
  color: #52637a !important;
}

@media (max-width: 900px) {
  .generated-page-wrap-v166 {
    padding: 24px 16px 46px !important;
  }

  .contact-layout-v166 {
    grid-template-columns: 1fr !important;
  }
}


/* SysAiCloud v1.6.7 final override: iPad top menu + mega alignment */
@media (min-width: 821px) and (max-width: 1366px) {
  .site-top-header,
  .site-top-header-v163,
  .site-top-header-v166 {
    display: grid !important;
    grid-template-columns: 230px minmax(280px, 1fr) !important;
    grid-template-areas:
      "brand search"
      "nav nav" !important;
    align-items: center !important;
    column-gap: 18px !important;
    row-gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 118px !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 18px 12px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dce7f5 !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163,
  .site-top-header-v166 .brand-v166 {
    grid-area: brand !important;
    width: 220px !important;
    max-width: 220px !important;
    min-width: 0 !important;
    height: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
  }

  .site-top-header .brand img,
  .site-top-header-v163 .brand-v163 img,
  .site-top-header-v166 .brand-v166 img {
    display: block !important;
    max-width: 205px !important;
    max-height: 42px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .top-keyword-search {
    grid-area: search !important;
    justify-self: end !important;
    align-self: center !important;
    width: min(430px, 100%) !important;
    max-width: 430px !important;
    min-width: 260px !important;
    height: 40px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .top-keyword-search input,
  .top-keyword-search button {
    height: 40px !important;
  }

  .top-keyword-search input {
    min-width: 0 !important;
  }

  .top-keyword-search button {
    min-width: 88px !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .top-nav-v162 {
    grid-area: nav !important;
    position: relative !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    border-top: 1px solid #e8eef7 !important;
    overflow: visible !important;
    white-space: normal !important;
  }

  .top-nav-v162 .nav-link-v162,
  .top-nav-v162 .mega-trigger-v162 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 13px !important;
    border-radius: 999px !important;
    background: #f8fbff !important;
    border: 1px solid #e1ecfb !important;
    color: #071832 !important;
    font-size: .94rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .mega-nav-item-v162 {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .mega-panel-v162,
  .mega-resources-panel-v162 {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 18px 0 8px !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 42px rgba(15,46,93,.16) !important;
    z-index: 9999 !important;
  }

  .mega-pointer-v162,
  .mega-panel-v162::before {
    display: none !important;
  }

  .mega-panel-v162 {
    display: none !important;
  }

  .mega-nav-item-v162.is-open .mega-panel-v162 {
    display: grid !important;
  }

  .mega-nav-item-v162:hover .mega-panel-v162 {
    display: none !important;
  }

  .mega-nav-item-v162.is-open:hover .mega-panel-v162 {
    display: grid !important;
  }
}

/* SysAiCloud v1.6.7 final override: narrow iPad portrait stacking */
@media (min-width: 821px) and (max-width: 980px) {
  .site-top-header,
  .site-top-header-v163,
  .site-top-header-v166 {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "search"
      "nav" !important;
    min-height: 170px !important;
  }

  .site-top-header .brand,
  .site-top-header-v163 .brand-v163,
  .site-top-header-v166 .brand-v166 {
    justify-self: center !important;
  }

  .top-keyword-search {
    justify-self: center !important;
    width: min(520px, 100%) !important;
    max-width: 520px !important;
  }

  .top-nav-v162 {
    justify-content: center !important;
  }
}


/* SysAiCloud v1.6.8: clean non-repeating mega menu */
.mega-doc-columns-v162 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.mega-col-v162 {
  min-height: 0 !important;
}

.mega-col-v162 a {
  white-space: normal !important;
}

@media (min-width: 1181px) {
  .mega-panel-v162 {
    width: min(980px, calc(100vw - 72px)) !important;
  }

  .mega-resources-panel-v162 {
    width: min(920px, calc(100vw - 72px)) !important;
  }
}

@media (max-width: 1366px) {
  .mega-panel-v162 {
    width: 100% !important;
  }
}

/* SysAiCloud v1.8.1-preview: four-page header vertical alignment fix from v1.6.8 base.
   Targets only the stable v166 header on FAQ, Contact, Privacy Policy, and Terms. */
.sysaicloud-four-page-align-v181 .site-top-header-v166 { box-sizing: border-box !important; }

@media (min-width: 1181px) {
  .sysaicloud-four-page-align-v181 .site-top-header-v166 {
    height: 65px !important; min-height: 65px !important; max-height: 65px !important;
    display: grid !important; grid-template-columns: 250px minmax(600px, 1fr) 390px !important;
    align-items: center !important; column-gap: 22px !important; padding: 0 24px !important; overflow: visible !important;
  }
  .sysaicloud-four-page-align-v181 .brand-v166 {
    grid-column: 1 !important; height: 65px !important; min-height: 65px !important; max-height: 65px !important;
    display: flex !important; align-items: center !important; justify-content: flex-start !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important;
  }
  .sysaicloud-four-page-align-v181 .brand-v166 img {
    display: block !important; width: auto !important; height: auto !important; max-width: 215px !important; max-height: 44px !important;
    object-fit: contain !important; margin: 0 !important; padding: 0 !important; vertical-align: middle !important;
  }
  .sysaicloud-four-page-align-v181 .top-nav-v162 {
    grid-column: 2 !important; height: 65px !important; min-height: 65px !important; max-height: 65px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    align-self: center !important; justify-self: center !important; gap: clamp(18px, 1.7vw, 34px) !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important; white-space: nowrap !important;
  }
  .sysaicloud-four-page-align-v181 .top-nav-v162 > a,
  .sysaicloud-four-page-align-v181 .top-nav-v162 > .mega-menu-v162 > .mega-trigger-v162 {
    display: inline-flex !important; align-items: center !important; height: 65px !important; min-height: 65px !important;
    margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-weight: 600 !important;
  }
  .sysaicloud-four-page-align-v181 .top-keyword-search {
    grid-column: 3 !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important;
    display: flex !important; align-items: center !important; align-self: center !important; justify-self: end !important;
    gap: 10px !important; width: 100% !important; max-width: 390px !important; margin: 0 !important; padding: 0 !important;
  }
  .sysaicloud-four-page-align-v181 .top-keyword-search input,
  .sysaicloud-four-page-align-v181 .top-keyword-search button {
    height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 !important;
    box-sizing: border-box !important; line-height: 1 !important;
  }
  .sysaicloud-four-page-align-v181 .top-keyword-search button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding-top: 0 !important; padding-bottom: 0 !important; white-space: nowrap !important;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .sysaicloud-four-page-align-v181 .site-top-header-v166 {
    display: grid !important; grid-template-columns: minmax(190px, 230px) minmax(280px, 1fr) !important;
    grid-template-areas: "brand search" "nav nav" !important;
    height: auto !important; min-height: 65px !important; max-height: none !important;
    align-items: center !important; gap: 8px 16px !important; padding: 10px 18px !important; overflow: visible !important;
  }
  .sysaicloud-four-page-align-v181 .brand-v166 { grid-area: brand !important; height: 48px !important; display: flex !important; align-items: center !important; }
  .sysaicloud-four-page-align-v181 .top-keyword-search { grid-area: search !important; justify-self: end !important; align-self: center !important; height: 40px !important; margin: 0 !important; }
  .sysaicloud-four-page-align-v181 .top-nav-v162 {
    grid-area: nav !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important;
    gap: 10px 12px !important; width: 100% !important; margin: 0 !important; padding: 10px 0 0 !important; border-top: 1px solid #e8eef7 !important;
  }
}

@media (max-width: 820px) {
  .sysaicloud-four-page-align-v181 .site-top-header-v166 {
    display: grid !important; grid-template-columns: 1fr !important; grid-template-areas: "brand" "search" "nav" !important;
    height: auto !important; min-height: 65px !important; gap: 10px !important; padding: 10px 14px !important;
  }
  .sysaicloud-four-page-align-v181 .brand-v166 { grid-area: brand !important; height: 46px !important; display: flex !important; align-items: center !important; }
  .sysaicloud-four-page-align-v181 .top-keyword-search { grid-area: search !important; width: 100% !important; margin: 0 !important; }
  .sysaicloud-four-page-align-v181 .top-nav-v162 { grid-area: nav !important; width: 100% !important; display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important; }
}

/* v1.8.1 four-page content layout */
.four-page-wrap-v181 { max-width: 1180px !important; margin: 0 auto !important; padding-top: 34px !important; padding-bottom: 58px !important; box-sizing: border-box !important; }
.four-page-titlebar-v181 { background: #ffffff !important; border-bottom: 1px solid #dce7f5 !important; }
.four-page-hero-v181 {
  background: linear-gradient(135deg, #ffffff, #f0f7ff) !important; border: 1px solid #dce7f5 !important;
  border-radius: 24px !important; padding: clamp(30px, 5vw, 58px) !important; margin: 0 0 24px !important;
  box-shadow: 0 12px 32px rgba(15,46,93,.06) !important;
}
.four-page-hero-v181 .eyebrow {
  display: inline-flex !important; align-items: center !important; border: 1px solid #cfe0ff !important;
  border-radius: 999px !important; background: #eef5ff !important; color: #0b63f6 !important;
  font-size: .78rem !important; font-weight: 800 !important; letter-spacing: .08em !important; padding: 8px 12px !important; text-transform: uppercase !important;
}
.four-page-hero-v181 h1 { color: #071832 !important; font-size: clamp(2.2rem, 5vw, 4.3rem) !important; line-height: 1.04 !important; margin: 20px 0 16px !important; max-width: 900px !important; }
.four-page-hero-v181 p { color: #52637a !important; font-size: clamp(1rem, 2vw, 1.15rem) !important; line-height: 1.7 !important; max-width: 850px !important; }
.legal-grid-v181, .faq-grid-v181 { display: grid !important; grid-template-columns: 1fr !important; gap: 16px !important; }
.legal-grid-v181 article, .faq-grid-v181 details, .contact-info-v181, .contact-form-v181 {
  background: #ffffff !important; border: 1px solid #dce7f5 !important; border-radius: 20px !important; padding: 24px !important;
  box-shadow: 0 10px 26px rgba(15,46,93,.055) !important; box-sizing: border-box !important;
}
.legal-grid-v181 h2, .contact-info-v181 h2, .contact-form-v181 h2 { color: #071832 !important; margin: 0 0 12px !important; font-size: 1.35rem !important; }
.legal-grid-v181 p, .faq-grid-v181 p, .contact-info-v181 p { color: #52637a !important; line-height: 1.65 !important; }
.faq-grid-v181 summary { color: #071832 !important; cursor: pointer !important; font-weight: 800 !important; font-size: 1.05rem !important; }
.contact-layout-v181 { display: grid !important; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr) !important; gap: 24px !important; align-items: start !important; }
.contact-info-v181 li { color: #071832 !important; font-weight: 700 !important; margin-bottom: 12px !important; }
@media (max-width: 900px) {
  .four-page-wrap-v181 { padding-top: 24px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .contact-layout-v181 { grid-template-columns: 1fr !important; }
}


/* SysAiCloud v1.8.3: Mega menu overlap fix on four pages.
   Keep top-level header alignment, but reset mega-menu dropdown links/cards so they do not inherit 65px top-nav height. */
.sysaicloud-four-page-align-v181 .mega-panel-v162,
.sysaicloud-four-page-align-v181 .mega-panel-v162 *,
.sysaicloud-four-page-align-v181 .mega-grid-v162,
.sysaicloud-four-page-align-v181 .mega-column-v162,
.sysaicloud-four-page-align-v181 .mega-link-v162 {
  max-height: none !important;
  line-height: normal !important;
}

.sysaicloud-four-page-align-v181 .mega-panel-v162 {
  height: auto !important;
  min-height: 0 !important;
  display: none;
  align-items: stretch !important;
  justify-content: initial !important;
  white-space: normal !important;
  z-index: 9999 !important;
}

.sysaicloud-four-page-align-v181 .mega-menu-v162:hover .mega-panel-v162,
.sysaicloud-four-page-align-v181 .mega-menu-v162:focus-within .mega-panel-v162,
.sysaicloud-four-page-align-v181 .mega-menu-v162.is-open .mega-panel-v162 {
  display: block !important;
}

.sysaicloud-four-page-align-v181 .mega-panel-v162 a,
.sysaicloud-four-page-align-v181 .mega-panel-v162 .mega-link-v162 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.sysaicloud-four-page-align-v181 .mega-panel-v162 h3,
.sysaicloud-four-page-align-v181 .mega-panel-v162 h4,
.sysaicloud-four-page-align-v181 .mega-panel-v162 p {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

@media (min-width: 1181px) {
  .sysaicloud-four-page-align-v181 .top-nav-v162 > a,
  .sysaicloud-four-page-align-v181 .top-nav-v162 > .mega-menu-v162 > .mega-trigger-v162 {
    height: 65px !important;
    min-height: 65px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .sysaicloud-four-page-align-v181 .mega-panel-v162 {
    position: absolute !important;
    top: calc(100% + 10px) !important;
  }
}


/* SysAiCloud v1.8.3: Blog page fix */
.blog-wrap-v183 {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding-top: 34px !important;
  padding-bottom: 58px !important;
}

.blog-hero-v183 {
  background: linear-gradient(135deg, #ffffff, #f0f7ff) !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 24px !important;
  padding: clamp(30px, 5vw, 58px) !important;
  margin: 0 0 24px !important;
  box-shadow: 0 12px 32px rgba(15,46,93,.06) !important;
}

.blog-hero-v183 h1 {
  color: #071832 !important;
  font-size: clamp(2.2rem, 5vw, 4.3rem) !important;
  line-height: 1.04 !important;
  margin: 20px 0 16px !important;
  max-width: 900px !important;
}

.blog-hero-v183 p {
  color: #52637a !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.7 !important;
  max-width: 850px !important;
}

.blog-card-grid-v183 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.blog-card-v183 {
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 26px rgba(15,46,93,.055) !important;
}

.blog-card-v183 a {
  color: inherit !important;
  text-decoration: none !important;
}

.blog-card-v183 span {
  display: inline-flex !important;
  color: #0b63f6 !important;
  background: #eef5ff !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.blog-card-v183 h2 {
  color: #071832 !important;
  font-size: 1.2rem !important;
  margin: 14px 0 10px !important;
}

.blog-card-v183 p {
  color: #52637a !important;
  line-height: 1.65 !important;
}

@media (max-width: 1100px) {
  .blog-card-grid-v183 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .blog-card-grid-v183 {
    grid-template-columns: 1fr !important;
  }
}


/* SysAiCloud v1.8.4: Blog page header vertical alignment fix.
   Targets Blog page only. Keeps v1.8.3 four-page and mega-menu fixes intact. */
.sysaicloud-blog-align-v184 .site-top-header-v166 {
  box-sizing: border-box !important;
}

@media (min-width: 1181px) {
  .sysaicloud-blog-align-v184 .site-top-header-v166 {
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    display: grid !important;
    grid-template-columns: 250px minmax(600px, 1fr) 390px !important;
    align-items: center !important;
    column-gap: 22px !important;
    padding: 0 24px !important;
    overflow: visible !important;
  }

  .sysaicloud-blog-align-v184 .brand-v166 {
    grid-column: 1 !important;
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  .sysaicloud-blog-align-v184 .brand-v166 img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 215px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }

  .sysaicloud-blog-align-v184 .top-nav-v162 {
    grid-column: 2 !important;
    height: 65px !important;
    min-height: 65px !important;
    max-height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
    gap: clamp(18px, 1.7vw, 34px) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .sysaicloud-blog-align-v184 .top-nav-v162 > a,
  .sysaicloud-blog-align-v184 .top-nav-v162 > .mega-menu-v162 > .mega-trigger-v162 {
    display: inline-flex !important;
    align-items: center !important;
    height: 65px !important;
    min-height: 65px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-weight: 600 !important;
  }

  .sysaicloud-blog-align-v184 .top-keyword-search {
    grid-column: 3 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    justify-self: end !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .sysaicloud-blog-align-v184 .top-keyword-search input,
  .sysaicloud-blog-align-v184 .top-keyword-search button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
  }

  .sysaicloud-blog-align-v184 .top-keyword-search button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    white-space: nowrap !important;
  }
}

/* Keep mega-menu dropdown links normal on Blog page too. */
.sysaicloud-blog-align-v184 .mega-panel-v162,
.sysaicloud-blog-align-v184 .mega-panel-v162 *,
.sysaicloud-blog-align-v184 .mega-grid-v162,
.sysaicloud-blog-align-v184 .mega-column-v162,
.sysaicloud-blog-align-v184 .mega-link-v162 {
  max-height: none !important;
  line-height: normal !important;
}

.sysaicloud-blog-align-v184 .mega-panel-v162 a,
.sysaicloud-blog-align-v184 .mega-panel-v162 .mega-link-v162 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

@media (min-width: 821px) and (max-width: 1180px) {
  .sysaicloud-blog-align-v184 .site-top-header-v166 {
    display: grid !important;
    grid-template-columns: minmax(190px, 230px) minmax(280px, 1fr) !important;
    grid-template-areas:
      "brand search"
      "nav nav" !important;
    height: auto !important;
    min-height: 65px !important;
    max-height: none !important;
    align-items: center !important;
    gap: 8px 16px !important;
    padding: 10px 18px !important;
    overflow: visible !important;
  }

  .sysaicloud-blog-align-v184 .brand-v166 {
    grid-area: brand !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  .sysaicloud-blog-align-v184 .top-keyword-search {
    grid-area: search !important;
    justify-self: end !important;
    align-self: center !important;
    height: 40px !important;
    margin: 0 !important;
  }

  .sysaicloud-blog-align-v184 .top-nav-v162 {
    grid-area: nav !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #e8eef7 !important;
  }
}

@media (max-width: 820px) {
  .sysaicloud-blog-align-v184 .site-top-header-v166 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "search"
      "nav" !important;
    height: auto !important;
    min-height: 65px !important;
    gap: 10px !important;
    padding: 10px 14px !important;
  }

  .sysaicloud-blog-align-v184 .brand-v166 {
    grid-area: brand !important;
    height: 46px !important;
    display: flex !important;
    align-items: center !important;
  }

  .sysaicloud-blog-align-v184 .top-keyword-search {
    grid-area: search !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .sysaicloud-blog-align-v184 .top-nav-v162 {
    grid-area: nav !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }
}

.blog-editable-content-v184 {
  color: #52637a !important;
  font-size: clamp(1rem, 2vw, 1.15rem) !important;
  line-height: 1.7 !important;
  max-width: 850px !important;
}


/* SysAiCloud v1.8.5: Blog front-end builder */
.blog-builder-blocks-v185 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  margin: 0 0 24px !important;
}

.blog-builder-text-v185,
.blog-builder-tile-v185,
.blog-builder-editor-v185 {
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(15,46,93,.055) !important;
}

.blog-builder-text-v185 {
  grid-column: 1 / -1 !important;
  padding: clamp(24px, 4vw, 42px) !important;
}

.blog-builder-tile-v185 {
  padding: 24px !important;
}

.blog-builder-text-v185 h2,
.blog-builder-tile-v185 h2,
.blog-builder-editor-v185 h2 {
  color: #071832 !important;
  margin: 10px 0 12px !important;
  line-height: 1.15 !important;
}

.blog-builder-text-v185 h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
}

.blog-builder-tile-v185 h2 {
  font-size: 1.22rem !important;
}

.blog-builder-tile-v185 > span,
.blog-builder-saved-v185 {
  display: inline-flex !important;
  color: #0b63f6 !important;
  background: #eef5ff !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.blog-builder-rich-v185 {
  color: #52637a !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.blog-builder-rich-v185 p:last-child {
  margin-bottom: 0 !important;
}

.blog-builder-link-v185,
.blog-builder-admin-link-v185,
.blog-builder-button-v185,
.blog-builder-mini-button-v185 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.blog-builder-link-v185,
.blog-builder-admin-link-v185 {
  color: #0b63f6 !important;
  margin-top: 14px !important;
}

.blog-builder-link-v185:hover,
.blog-builder-admin-link-v185:hover,
.blog-builder-button-v185:hover,
.blog-builder-mini-button-v185:hover {
  transform: translateY(-1px) !important;
}

.blog-builder-editor-v185 {
  margin: 0 0 24px !important;
  padding: clamp(22px, 4vw, 34px) !important;
}

.blog-builder-saved-v185 {
  color: #087f5b !important;
  background: #e9fbf4 !important;
  border-color: #b8efd9 !important;
  margin-bottom: 18px !important;
}

.blog-builder-editor-heading-v185 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
}

.blog-builder-editor-heading-v185 p {
  color: #52637a !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

.blog-builder-admin-link-v185 {
  background: #eef5ff !important;
  border: 1px solid #cfe0ff !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}

.blog-builder-editor-rows-v185 {
  display: grid !important;
  gap: 16px !important;
}

.blog-builder-editor-row-v185 {
  border: 1px solid #dce7f5 !important;
  background: #f8fbff !important;
  border-radius: 18px !important;
  padding: 18px !important;
}

.blog-builder-editor-row-head-v185,
.blog-builder-editor-footer-v185 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.blog-builder-editor-row-head-v185 {
  margin-bottom: 14px !important;
}

.blog-builder-editor-actions-v185,
.blog-builder-editor-footer-v185 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.blog-builder-editor-grid-v185 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.blog-builder-editor-v185 label {
  display: grid !important;
  gap: 6px !important;
  color: #071832 !important;
  font-weight: 800 !important;
}

.blog-builder-editor-v185 label span {
  font-size: .82rem !important;
}

.blog-builder-editor-v185 input,
.blog-builder-editor-v185 select,
.blog-builder-editor-v185 textarea {
  width: 100% !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #071832 !important;
  font: inherit !important;
  padding: 11px 12px !important;
  box-sizing: border-box !important;
}

.blog-builder-editor-body-v185 {
  margin-top: 14px !important;
}

.blog-builder-button-v185,
.blog-builder-mini-button-v185 {
  border: 1px solid #cfe0ff !important;
  background: #eef5ff !important;
  color: #0b63f6 !important;
  padding: 10px 14px !important;
}

.blog-builder-primary-v185 {
  background: #0b63f6 !important;
  border-color: #0b63f6 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(11, 99, 246, .18) !important;
}

.blog-builder-danger-v185 {
  color: #b42318 !important;
  background: #fff1f0 !important;
  border-color: #ffd0cc !important;
}

@media (max-width: 1100px) {
  .blog-builder-blocks-v185 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .blog-builder-blocks-v185,
  .blog-builder-editor-grid-v185 {
    grid-template-columns: 1fr !important;
  }

  .blog-builder-editor-heading-v185 {
    display: grid !important;
  }

  .blog-builder-admin-link-v185 {
    justify-self: flex-start !important;
    white-space: normal !important;
  }
}

/* SysAiCloud v1.8.7: shared secure Page Builder */
.page-builder-blocks-v187 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  width: min(1120px, calc(100% - 32px)) !important;
  margin: clamp(22px, 4vw, 42px) auto 24px !important;
}

.page-builder-text-v187,
.page-builder-tile-v187,
.page-builder-editor-v187 {
  background: #ffffff !important;
  border: 1px solid #dce7f5 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 26px rgba(15,46,93,.055) !important;
}

.page-builder-text-v187 {
  grid-column: 1 / -1 !important;
  padding: clamp(24px, 4vw, 42px) !important;
}

.page-builder-tile-v187 {
  padding: 24px !important;
}

.page-builder-text-v187 h2,
.page-builder-tile-v187 h2,
.page-builder-editor-v187 h2 {
  color: #071832 !important;
  margin: 10px 0 12px !important;
  line-height: 1.15 !important;
}

.page-builder-text-v187 h2 {
  font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
}

.page-builder-tile-v187 h2 {
  font-size: 1.22rem !important;
}

.page-builder-tile-v187 > span,
.page-builder-saved-v187 {
  display: inline-flex !important;
  color: #0b63f6 !important;
  background: #eef5ff !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.page-builder-rich-v187 {
  color: #52637a !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
}

.page-builder-rich-v187 p:last-child {
  margin-bottom: 0 !important;
}

.page-builder-link-v187,
.page-builder-button-v187,
.page-builder-mini-button-v187 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.page-builder-link-v187 {
  color: #0b63f6 !important;
  margin-top: 14px !important;
}

.page-builder-link-v187:hover,
.page-builder-button-v187:hover,
.page-builder-mini-button-v187:hover {
  transform: translateY(-1px) !important;
}

.page-builder-editor-v187 {
  width: min(1120px, calc(100% - 32px)) !important;
  margin: 0 auto clamp(22px, 4vw, 42px) !important;
  padding: clamp(22px, 4vw, 34px) !important;
}

.page-builder-saved-v187 {
  color: #087f5b !important;
  background: #e9fbf4 !important;
  border-color: #b8efd9 !important;
  margin-bottom: 18px !important;
}

.page-builder-editor-heading-v187 {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
}

.page-builder-editor-heading-v187 p {
  color: #52637a !important;
  margin: 0 !important;
  line-height: 1.65 !important;
}

.page-builder-editor-rows-v187 {
  display: grid !important;
  gap: 16px !important;
}

.page-builder-editor-row-v187 {
  border: 1px solid #dce7f5 !important;
  background: #f8fbff !important;
  border-radius: 18px !important;
  padding: 18px !important;
}

.page-builder-editor-row-head-v187,
.page-builder-editor-footer-v187 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.page-builder-editor-row-head-v187 {
  margin-bottom: 14px !important;
}

.page-builder-editor-actions-v187,
.page-builder-editor-footer-v187 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.page-builder-editor-grid-v187 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.page-builder-editor-v187 label {
  display: grid !important;
  gap: 6px !important;
  color: #071832 !important;
  font-weight: 800 !important;
}

.page-builder-editor-v187 label span {
  font-size: .82rem !important;
}

.page-builder-editor-v187 input,
.page-builder-editor-v187 select,
.page-builder-editor-v187 textarea {
  width: 100% !important;
  border: 1px solid #cfe0ff !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #071832 !important;
  font: inherit !important;
  padding: 11px 12px !important;
  box-sizing: border-box !important;
}

.page-builder-editor-body-v187 {
  margin-top: 14px !important;
}

.page-builder-button-v187,
.page-builder-mini-button-v187 {
  border: 1px solid #cfe0ff !important;
  background: #eef5ff !important;
  color: #0b63f6 !important;
  padding: 10px 14px !important;
}

.page-builder-primary-v187 {
  background: #0b63f6 !important;
  border-color: #0b63f6 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(11, 99, 246, .18) !important;
}

.page-builder-danger-v187 {
  color: #b42318 !important;
  background: #fff1f0 !important;
  border-color: #ffd0cc !important;
}

@media (max-width: 1100px) {
  .page-builder-blocks-v187 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .page-builder-blocks-v187,
  .page-builder-editor-grid-v187 {
    grid-template-columns: 1fr !important;
  }

  .page-builder-editor-heading-v187 {
    display: grid !important;
  }
}


/* SysAiCloud v1.8.8 existing page text editor */
.inplace-text-editor-v188 {
    margin: 48px auto 32px;
    max-width: 1120px;
    padding: 26px;
    border: 1px solid rgba(19, 93, 245, 0.18);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(234,243,255,0.92));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}
.inplace-text-editor-head-v188 h2 {
    margin: 6px 0 8px;
    color: #0f172a;
}
.inplace-text-editor-head-v188 p {
    margin: 0 0 22px;
    color: #475569;
    max-width: 780px;
}
.inplace-text-saved-v188 {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #dcfce7;
    color: #166534;
    font-weight: 800;
}
.inplace-text-grid-v188 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-height: 720px;
    overflow: auto;
    padding-right: 6px;
}
.inplace-text-field-v188 {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
}
.inplace-text-field-v188 span {
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #135df5;
}
.inplace-text-field-v188 textarea {
    width: 100%;
    min-height: 82px;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.55);
    border-radius: 14px;
    padding: 11px 12px;
    font: inherit;
    color: #0f172a;
    background: #fff;
}
.inplace-text-field-v188 small {
    color: #64748b;
    line-height: 1.4;
}
.inplace-text-actions-v188 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}
.inplace-text-button-v188 {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 900;
    cursor: pointer;
}
.inplace-text-primary-v188 {
    background: #135df5;
    color: #fff;
}
.inplace-text-danger-v188 {
    background: #fee2e2;
    color: #991b1b;
}
@media (max-width: 780px) {
    .inplace-text-editor-v188 {
        padding: 18px;
        border-radius: 22px;
    }
    .inplace-text-grid-v188 {
        grid-template-columns: 1fr;
        max-height: 680px;
    }
}

/* SysAiCloud v1.8.9 top-right Edit buttons */
.sysaicloud-editable-unit-v189 {
    position: relative !important;
}

.sysaicloud-editable-unit-v189:hover {
    outline: 2px dashed rgba(16, 185, 129, 0.35) !important;
    outline-offset: 4px !important;
}

.sysaicloud-inline-edit-btn-v189 {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 25 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 16px !important;
    background: #dcfce7 !important;
    color: #047857 !important;
    box-shadow: 0 10px 22px rgba(4, 120, 87, 0.12) !important;
    font: inherit !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

.sysaicloud-inline-edit-btn-v189:hover,
.sysaicloud-inline-edit-btn-v189:focus {
    transform: translateY(-1px) !important;
    background: #bbf7d0 !important;
    box-shadow: 0 14px 28px rgba(4, 120, 87, 0.18) !important;
    outline: 3px solid rgba(16, 185, 129, 0.25) !important;
    outline-offset: 2px !important;
}

.sysaicloud-inline-saved-v189 {
    position: fixed !important;
    right: 22px !important;
    bottom: 22px !important;
    z-index: 99998 !important;
    padding: 13px 18px !important;
    border-radius: 999px !important;
    background: #dcfce7 !important;
    color: #166534 !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
    font-weight: 900 !important;
}

.sysaicloud-inline-modal-v189[hidden],
.sysaicloud-inline-panel-v189[hidden] {
    display: none !important;
}

.sysaicloud-inline-modal-v189 {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 22px !important;
}

.sysaicloud-inline-modal-backdrop-v189 {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.56) !important;
    backdrop-filter: blur(8px) !important;
}

.sysaicloud-inline-modal-card-v189 {
    position: relative !important;
    z-index: 1 !important;
    width: min(760px, calc(100vw - 28px)) !important;
    max-height: min(760px, calc(100vh - 28px)) !important;
    overflow: auto !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
    box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28) !important;
    padding: clamp(20px, 4vw, 30px) !important;
}

.sysaicloud-inline-modal-head-v189 {
    display: flex !important;
    justify-content: space-between !important;
    gap: 18px !important;
    align-items: flex-start !important;
    margin-bottom: 18px !important;
}

.sysaicloud-inline-kicker-v189 {
    display: inline-flex !important;
    margin-bottom: 8px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: #135df5 !important;
    padding: 7px 11px !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

.sysaicloud-inline-modal-head-v189 h2 {
    margin: 0 0 8px !important;
    color: #071832 !important;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important;
}

.sysaicloud-inline-modal-head-v189 p {
    margin: 0 !important;
    color: #475569 !important;
    line-height: 1.6 !important;
}

.sysaicloud-inline-close-v189 {
    flex: 0 0 auto !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid #dbe7f7 !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.sysaicloud-inline-panel-v189 h3 {
    margin: 0 0 14px !important;
    color: #0f172a !important;
}

.sysaicloud-inline-fields-v189 {
    display: grid !important;
    gap: 14px !important;
}

.sysaicloud-inline-field-v189 {
    display: grid !important;
    gap: 8px !important;
    padding: 14px !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.86) !important;
}

.sysaicloud-inline-field-v189 span {
    color: #135df5 !important;
    font-size: .78rem !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.sysaicloud-inline-field-v189 textarea {
    min-height: 108px !important;
    width: 100% !important;
    resize: vertical !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(148, 163, 184, 0.65) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    padding: 12px 13px !important;
    font: inherit !important;
    line-height: 1.55 !important;
}

.sysaicloud-inline-field-v189 small {
    color: #64748b !important;
    line-height: 1.45 !important;
}

.sysaicloud-inline-actions-v189 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.sysaicloud-inline-save-v189,
.sysaicloud-inline-cancel-v189,
.sysaicloud-inline-reset-v189 {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 12px 17px !important;
    font: inherit !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

.sysaicloud-inline-save-v189 {
    background: #135df5 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(19, 93, 245, 0.22) !important;
}

.sysaicloud-inline-cancel-v189 {
    background: #eef5ff !important;
    color: #135df5 !important;
}

.sysaicloud-inline-reset-v189 {
    margin-left: auto !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.sysaicloud-inline-modal-open-v189 {
    overflow: hidden !important;
}

@media (max-width: 760px) {
    .sysaicloud-inline-edit-btn-v189 {
        top: 10px !important;
        right: 10px !important;
        padding: 8px 13px !important;
        font-size: .88rem !important;
    }

    .sysaicloud-inline-modal-v189 {
        padding: 12px !important;
        align-items: end !important;
    }

    .sysaicloud-inline-modal-card-v189 {
        border-radius: 24px 24px 18px 18px !important;
        max-height: calc(100vh - 24px) !important;
    }

    .sysaicloud-inline-modal-head-v189 {
        gap: 12px !important;
    }

    .sysaicloud-inline-reset-v189 {
        margin-left: 0 !important;
    }
}

/* SysAiCloud v1.8.11 redesigned owner controls: Edit/Delete/Move/Add */
.sysaicloud-inline-toolbar-v1811 {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 35 !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    max-width: min(92%, 560px) !important;
    padding: 6px !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
    backdrop-filter: blur(14px) !important;
}

.sysaicloud-inline-toolbar-v1811 .sysaicloud-inline-action-form-v1811 {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sysaicloud-inline-action-v1811,
.sysaicloud-add-section-btn-v1811 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 8px 13px !important;
    font: inherit !important;
    font-size: .82rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease !important;
}

.sysaicloud-inline-action-v1811:hover,
.sysaicloud-inline-action-v1811:focus,
.sysaicloud-add-section-btn-v1811:hover,
.sysaicloud-add-section-btn-v1811:focus {
    transform: translateY(-1px) !important;
    outline: 3px solid rgba(19, 93, 245, 0.16) !important;
    outline-offset: 2px !important;
}

.sysaicloud-inline-action-v1811[disabled] {
    opacity: .42 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.sysaicloud-inline-action-edit-v1811 {
    background: #dcfce7 !important;
    color: #047857 !important;
    box-shadow: 0 8px 20px rgba(4, 120, 87, 0.10) !important;
}

.sysaicloud-inline-action-delete-v1811 {
    background: #fee2e2 !important;
    color: #991b1b !important;
    box-shadow: 0 8px 20px rgba(153, 27, 27, 0.10) !important;
}

.sysaicloud-inline-action-move-v1811 {
    background: #eef5ff !important;
    color: #135df5 !important;
    box-shadow: 0 8px 20px rgba(19, 93, 245, 0.10) !important;
}

.sysaicloud-add-section-wrap-v1811 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    clear: both !important;
    margin: 14px 0 24px !important;
    padding: 0 12px !important;
}

.sysaicloud-add-section-btn-v1811 {
    min-height: 40px !important;
    padding: 10px 18px !important;
    border: 1px dashed rgba(19, 93, 245, 0.42) !important;
    background: linear-gradient(135deg, #eef5ff, #ffffff) !important;
    color: #135df5 !important;
    box-shadow: 0 12px 26px rgba(19, 93, 245, 0.10) !important;
}

.sysaicloud-custom-section-v1811 {
    margin: clamp(22px, 4vw, 38px) 0 !important;
    padding: clamp(24px, 5vw, 42px) !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #ffffff, #f8fbff) !important;
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.08) !important;
}

.sysaicloud-custom-section-inner-v1811 {
    max-width: 820px !important;
}

.sysaicloud-custom-section-inner-v1811 h2 {
    margin: 0 0 12px !important;
    color: #071832 !important;
    font-size: clamp(1.45rem, 3vw, 2.25rem) !important;
}

.sysaicloud-custom-section-inner-v1811 p {
    margin: 0 !important;
    color: #475569 !important;
    font-size: 1.04rem !important;
    line-height: 1.7 !important;
}

.sysaicloud-custom-section-link-v1811 {
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 18px !important;
    border-radius: 999px !important;
    padding: 12px 18px !important;
    background: #135df5 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 12px 24px rgba(19, 93, 245, 0.22) !important;
}

@media (max-width: 760px) {
    .sysaicloud-inline-toolbar-v1811 {
        top: 8px !important;
        right: 8px !important;
        left: auto !important;
        gap: 5px !important;
        border-radius: 18px !important;
        max-width: calc(100% - 16px) !important;
    }
    .sysaicloud-inline-action-v1811 {
        min-height: 31px !important;
        padding: 7px 10px !important;
        font-size: .74rem !important;
    }
    .sysaicloud-add-section-wrap-v1811 {
        margin: 10px 0 18px !important;
    }
    .sysaicloud-add-section-btn-v1811 {
        width: 100% !important;
    }
}

/* SysAiCloud v1.8.12 clean icon-menu editor UI */
.sysaicloud-inline-menu-toolbar-v1812 {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 45 !important;
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.sysaicloud-inline-menu-trigger-v1812 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border: 1px solid rgba(203, 213, 225, 0.82) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #334155 !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    font: inherit !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

.sysaicloud-inline-menu-trigger-v1812:hover,
.sysaicloud-inline-menu-trigger-v1812:focus,
.sysaicloud-inline-menu-toolbar-v1812.is-open .sysaicloud-inline-menu-trigger-v1812 {
    transform: translateY(-1px) !important;
    background: #ffffff !important;
    color: #135df5 !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16) !important;
    outline: 3px solid rgba(19, 93, 245, 0.14) !important;
    outline-offset: 2px !important;
}

.sysaicloud-inline-menu-v1812[hidden] {
    display: none !important;
}

.sysaicloud-inline-menu-v1812 {
    position: absolute !important;
    top: 42px !important;
    right: 0 !important;
    z-index: 46 !important;
    display: grid !important;
    gap: 4px !important;
    min-width: 166px !important;
    padding: 8px !important;
    border: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 22px 52px rgba(15, 23, 42, 0.2) !important;
    backdrop-filter: blur(18px) !important;
}

.sysaicloud-inline-menu-v1812::before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    right: 13px !important;
    width: 10px !important;
    height: 10px !important;
    transform: rotate(45deg) !important;
    border-left: 1px solid rgba(203, 213, 225, 0.9) !important;
    border-top: 1px solid rgba(203, 213, 225, 0.9) !important;
    background: rgba(255, 255, 255, 0.97) !important;
}

.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-form-v1811 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sysaicloud-inline-menu-item-v1812,
.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-v1811 {
    width: 100% !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    border-radius: 11px !important;
    padding: 10px 11px !important;
    background: transparent !important;
    color: #0f172a !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: .9rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background .14s ease, color .14s ease, transform .14s ease !important;
}

.sysaicloud-inline-menu-item-v1812:hover,
.sysaicloud-inline-menu-item-v1812:focus,
.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-v1811:hover,
.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-v1811:focus {
    transform: none !important;
    background: #eef5ff !important;
    color: #135df5 !important;
    outline: none !important;
}

.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-delete-v1811:hover,
.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-delete-v1811:focus {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.sysaicloud-inline-menu-v1812 .sysaicloud-inline-action-v1811[disabled] {
    opacity: .38 !important;
    background: transparent !important;
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

.sysaicloud-add-section-wrap-v1811 {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    clear: both !important;
    margin: 18px 0 28px !important;
    padding: 0 clamp(14px, 4vw, 34px) !important;
}

.sysaicloud-add-section-wrap-v1811::before,
.sysaicloud-add-section-wrap-v1811::after {
    content: "" !important;
    height: 1px !important;
    flex: 1 1 auto !important;
    min-width: 28px !important;
    background: linear-gradient(90deg, transparent, rgba(148, 163, 184, .48), transparent) !important;
}

.sysaicloud-add-section-btn-v1811 {
    width: auto !important;
    min-height: 34px !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(203, 213, 225, 0.74) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #135df5 !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
    backdrop-filter: blur(10px) !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
}

.sysaicloud-add-section-btn-v1811:hover,
.sysaicloud-add-section-btn-v1811:focus {
    background: #ffffff !important;
    color: #0b45c6 !important;
    border-color: rgba(19, 93, 245, .36) !important;
    box-shadow: 0 14px 30px rgba(19, 93, 245, 0.12) !important;
}

@media (max-width: 760px) {
    .sysaicloud-inline-menu-toolbar-v1812 {
        top: 8px !important;
        right: 8px !important;
    }

    .sysaicloud-inline-menu-trigger-v1812 {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 20px !important;
    }

    .sysaicloud-inline-menu-v1812 {
        top: 39px !important;
        min-width: 156px !important;
        max-width: calc(100vw - 32px) !important;
    }

    .sysaicloud-add-section-wrap-v1811 {
        margin: 12px 0 20px !important;
        padding: 0 10px !important;
    }

    .sysaicloud-add-section-btn-v1811 {
        width: auto !important;
    }
}