/* =========================================================
   UMV Khiribandh — Design tokens
   Theme: "ruled notebook meets terminal" — ink navy, warm
   marigold + teal dual accent, paper background, grotesk +
   mono type, with recurring dot-grid / ruled-line motifs.
   ========================================================= */
:root{
  --ink:            #16233D;
  --ink-2:          #202F52;
  --ink-soft:       #3B4A68;
  --paper:          #F5F4EF;
  --paper-raised:   #FFFFFF;
  --line:           #E4E1D8;
  --line-strong:    #CFCBBC;
  --marigold:       #D98E2B;
  --marigold-dark:  #9C6316;
  --marigold-tint:  #FBEDD8;
  --teal:           #1E7A63;
  --teal-dark:      #145948;
  --teal-tint:      #E2F2ED;
  --red:            #B4432E;
  --red-tint:       #FBE9E4;
  --font-display:   'Space Grotesk', 'Inter', sans-serif;
  --font-body:      'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;
  --radius:         10px;
  --shadow-card:    0 1px 2px rgba(22,35,61,.05), 0 8px 24px rgba(22,35,61,.06);
  --shadow-lift:    0 10px 30px rgba(22,35,61,.12);
  --dot-grid:       radial-gradient(circle, rgba(22,35,61,.14) 1px, transparent 1.4px);
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
a{ color: var(--marigold-dark); text-decoration: none; }
a:hover{ color: var(--ink); }
::selection{ background: var(--marigold-tint); }

/* -------------------- Navbar -------------------- */
.umv-navbar{
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .65rem 0;
  box-shadow: 0 1px 0 rgba(22,35,61,.02);
  position: relative;
}
.umv-navbar::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--marigold), var(--teal), var(--marigold));
  background-size: 200% 100%;
  animation: umv-navbar-shimmer 6s linear infinite;
}
@keyframes umv-navbar-shimmer{ 0%{ background-position: 0% 0; } 100%{ background-position: -200% 0; } }

.umv-brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; }
.umv-logo-mark{
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  background: linear-gradient(135deg, var(--marigold), #C2571E); color: #fff;
  padding: .4rem .55rem; border-radius: 7px; letter-spacing: .04em;
  box-shadow: 0 3px 10px rgba(217,142,43,.35);
}
.umv-logo-img{ height: 38px; max-width: 180px; object-fit: contain; }
.umv-footer .umv-logo-img{ height: 34px; }
.umv-brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.umv-brand-name{ font-family: var(--font-display); font-weight:700; color:var(--ink); font-size:1.02rem; }
.umv-brand-tagline{ font-size:.68rem; color: var(--marigold-dark); letter-spacing:.03em; }

.umv-navbar .nav-link{
  color: var(--ink-soft); font-weight:600; font-size:.93rem; padding:.55rem .9rem; position:relative;
  border-radius: 7px; transition: color .15s ease, background .15s ease;
}
.umv-navbar .nav-link:hover{ color: var(--ink); background: var(--marigold-tint); }
@media (min-width: 992px){
  .umv-navbar .nav-link::after{
    content:""; position:absolute; left:.9rem; right:.9rem; bottom:.15rem; height:2px;
    background: linear-gradient(90deg, var(--marigold), var(--teal));
    transform: scaleX(0); transform-origin:left; transition: transform .2s ease;
  }
  .umv-navbar .nav-link:hover{ background:none; }
  .umv-navbar .nav-link:hover::after{ transform: scaleX(1); }
}
.umv-nav-icon{ margin-right:.5rem; color: var(--marigold-dark); font-size:.9rem; }

.umv-btn-cta{
  background: linear-gradient(135deg, var(--marigold), #C2571E); color:#fff; border:none;
  font-weight:700; border-radius: 8px; padding:.55rem 1.25rem; display:inline-flex; align-items:center; gap:.45rem;
  box-shadow: 0 4px 14px rgba(217,142,43,.35); transition: transform .15s ease, box-shadow .15s ease;
}
.umv-btn-cta:hover{ color:#fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(217,142,43,.45); }

.umv-nav-search{ position:relative; display:flex; align-items:center; }
.umv-nav-search-icon{ position:absolute; left:.9rem; color: var(--ink-soft); font-size:.85rem; pointer-events:none; z-index:2; }
.umv-nav-search input{
  border-radius:20px; border:1.5px solid var(--line-strong); font-size:.85rem; width:190px;
  padding: .5rem .9rem .5rem 2.15rem; background: var(--paper); transition: all .2s ease;
}
.umv-nav-search input:focus{
  outline:none; border-color: var(--marigold); width:230px; background:#fff;
  box-shadow: 0 0 0 4px var(--marigold-tint);
}
@media (max-width: 991.98px){ .umv-nav-search input{ width:100%; } .umv-nav-search input:focus{ width:100%; } }

/* Custom animated hamburger */
.umv-navbar-toggler{
  border:none; background: var(--marigold-tint); width:42px; height:42px; border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.umv-toggler-bar{ display:block; width:20px; height:2.5px; border-radius:2px; background: var(--marigold-dark); transition: transform .25s ease, opacity .2s ease; }
.umv-navbar-toggler[aria-expanded="true"] .umv-toggler-bar:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.umv-navbar-toggler[aria-expanded="true"] .umv-toggler-bar:nth-child(2){ opacity:0; }
.umv-navbar-toggler[aria-expanded="true"] .umv-toggler-bar:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 991.98px){
  .navbar-collapse{
    background: var(--paper-raised); border:1px solid var(--line); border-radius: 12px;
    margin-top:.85rem; padding: 1rem 1.1rem 1.25rem; box-shadow: var(--shadow-lift);
  }
  .umv-navbar .nav-link{ padding: .7rem .8rem; }
  .umv-navbar .navbar-nav .nav-item + .nav-item{ border-top: 1px dashed var(--line); }
  .umv-navbar .navbar-nav .nav-item:has(.umv-nav-search),
  .umv-navbar .navbar-nav .nav-item:has(.umv-btn-cta){ border-top:none; }
}

/* -------------------- Hero -------------------- */
.umv-hero{
  background:
    linear-gradient(180deg, rgba(217,142,43,.06), transparent 60%),
    var(--dot-grid),
    var(--paper);
  background-size: auto, 18px 18px, auto;
  border-bottom: 1px solid var(--line);
  padding: 5rem 0 4rem;
  position: relative;
  overflow:hidden;
}
.umv-hero::after{
  content:"";
  position:absolute; top:-60px; right:-60px; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(30,122,99,.10), transparent 70%);
  pointer-events:none;
}
.umv-hero-ruled{
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image: repeating-linear-gradient(to bottom, transparent, transparent 38px, var(--line) 39px);
  mask-image: linear-gradient(to bottom, transparent, black 15%, transparent 90%);
}
.umv-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-mono); font-size:.78rem; color: var(--teal-dark);
  background: var(--teal-tint); border:1px solid #BEE0D3; border-radius: 20px; padding:.32rem .8rem; margin-bottom:1.4rem;
}
.umv-hero{ position:relative; }
.umv-hero .container{ position:relative; z-index:1; }
.umv-hero h1{
  font-size: clamp(2.3rem, 4.7vw, 3.6rem); line-height:1.06; margin-bottom:1.1rem; position:relative;
}
.umv-hero h1 .accent{
  color: var(--marigold); position:relative; display:inline-block;
}
.umv-hero h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M0 6 Q 10 0, 20 6 T 40 6 T 60 6 T 80 6 T 100 6 T 120 6' stroke='%23D98E2B' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") repeat-x;
  background-size: 60px 8px;
  opacity:.75;
}
.umv-hero-lead{ font-size:1.14rem; color: var(--ink-soft); max-width: 560px; margin-bottom:2.1rem; }
.umv-hero-search{ max-width: 520px; }
.umv-hero-search .input-group{ box-shadow: var(--shadow-card); border-radius: var(--radius); overflow:hidden; }
.umv-hero-search input{ border:1px solid var(--line-strong); border-right:none; padding: .85rem 1.1rem; font-size:1rem;}
.umv-hero-search button{ background: var(--ink); border-color: var(--ink); padding:0 1.4rem; }
.umv-hero-ctas{ display:flex; gap:.75rem; margin-top:1.85rem; flex-wrap:wrap; }

.umv-hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; padding: 1rem; }
.umv-hero-illustration{ width:100%; max-width:480px; height:auto; filter: drop-shadow(0 18px 30px rgba(22,35,61,.15)); animation: umv-hero-float 5s ease-in-out infinite; }
.umv-hero-photo{ width:100%; max-width:480px; height:auto; border-radius: 16px; box-shadow: var(--shadow-lift); object-fit:cover; }
@keyframes umv-hero-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.btn-umv-primary{
  background: var(--ink); color:#fff; border-radius:7px; font-weight:600; padding:.72rem 1.5rem; border:1px solid var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease; box-shadow: 0 2px 0 rgba(22,35,61,.15);
}
.btn-umv-primary:hover{ background: var(--marigold-dark); border-color:var(--marigold-dark); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn-umv-secondary{
  background: var(--paper-raised); color:var(--ink); border-radius:7px; font-weight:600; padding:.72rem 1.5rem; border:1px solid var(--line-strong);
  transition: transform .15s ease, border-color .15s ease;
}
.btn-umv-secondary:hover{ border-color:var(--ink); transform: translateY(-2px); }

/* -------------------- Section headings -------------------- */
.umv-section{ padding: 4rem 0; }
.umv-section-eyebrow{
  font-family:var(--font-mono); font-size:.78rem; color:var(--marigold-dark); text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:.6rem; display:inline-flex; align-items:center; gap:.5rem;
}
.umv-section-eyebrow::before{ content:""; width:22px; height:2px; background: var(--marigold); display:inline-block; }
.umv-section-title{ font-size:2rem; margin-bottom:.6rem; }
.umv-section-sub{ color: var(--ink-soft); margin-bottom:2.25rem; max-width:620px; }

/* -------------------- Cards -------------------- */
.umv-card{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; height:100%; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration:none; display:block; color:var(--ink); position:relative; overflow:hidden;
}
.umv-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--marigold), var(--teal));
  transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.umv-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); color:var(--ink); }
.umv-card:hover::before{ transform: scaleX(1); }
.umv-card-icon{
  width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: var(--marigold-tint); color: var(--marigold-dark); font-size:1.35rem; margin-bottom:1.1rem;
}
.col-lg-2:nth-of-type(2n) .umv-card-icon{ background: var(--teal-tint); color: var(--teal-dark); }
.umv-card h5{ font-size:1.06rem; margin-bottom:.4rem; }
.umv-card p{ font-size:.9rem; color: var(--ink-soft); margin:0; }

.umv-path-card{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.9rem; box-shadow: var(--shadow-card); position:relative; border-left: 3px solid var(--marigold);
}
.umv-path-step{ display:flex; align-items:center; gap:.75rem; padding: .7rem 0; border-bottom: 1px dashed var(--line); font-weight:500;}
.umv-path-step:last-child{ border-bottom:none; }
.umv-path-step i{ color: var(--marigold); font-size:1.1rem; }

.umv-path-timeline{ position:relative; padding-left:6px; }
.umv-path-timeline-step{ display:flex; gap:1.1rem; position:relative; padding-bottom:1.9rem; }
.umv-path-timeline-step:last-child{ padding-bottom:0; }
.umv-path-timeline-step::before{
  content:""; position:absolute; left:15px; top:34px; bottom:-4px; width:2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px);
}
.umv-path-timeline-step:last-child::before{ display:none; }
.umv-path-timeline-dot{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;
  font-size:.9rem; box-shadow: 0 3px 8px rgba(22,35,61,.25); position:relative; z-index:1;
}
.umv-path-timeline-step:nth-child(2n) .umv-path-timeline-dot{ background: var(--marigold-dark); }
.umv-path-timeline-step strong{ display:block; margin-bottom:.25rem; font-size:1.02rem; }
.umv-path-timeline-step p{ margin:0; font-size:.88rem; color: var(--ink-soft); }

.umv-path-highlight{
  background: linear-gradient(160deg, var(--ink), var(--ink-2)); color:#E8ECF7; border-radius: var(--radius);
  padding: 2rem 1.9rem; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.umv-path-highlight::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1.4px);
  background-size: 16px 16px;
}
.umv-path-highlight > *{ position:relative; z-index:1; }
.umv-path-highlight h4{ color:#fff; }
.umv-path-highlight .umv-hero-eyebrow{ background: rgba(255,255,255,.1); color:#BFE8DA; border-color: rgba(255,255,255,.15); }
.umv-path-highlight p.text-secondary{ color:#B7C0DA !important; }
.umv-path-stats{ display:flex; gap:1.5rem; padding:1.25rem 0; margin-bottom:.5rem; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.umv-path-stats .num{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:#fff; line-height:1; }
.umv-path-stats .label{ font-size:.76rem; color:#9FAAC4; margin-top:.3rem; text-transform:uppercase; letter-spacing:.04em; }

.umv-feature{ text-align:left; padding:1.6rem 1.5rem 1.5rem; position:relative; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); height:100%; transition: box-shadow .18s ease, transform .18s ease; }
.umv-feature:hover{ box-shadow: var(--shadow-card); transform: translateY(-3px); }
.row:has(.umv-feature){ counter-reset: umv-feature-counter; }
.umv-feature{ counter-increment: umv-feature-counter; }
.umv-feature::after{
  content: counter(umv-feature-counter, decimal-leading-zero);
  position:absolute; top:.9rem; right:1.1rem; font-family:var(--font-mono); font-weight:700;
  font-size:1.7rem; color: var(--line-strong);
}
.umv-feature-icon{
  font-size:1.5rem; color: var(--teal-dark); margin-bottom:.9rem; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; background: var(--teal-tint); border-radius:9px;
}

.umv-latest-card{ border:1px solid var(--line); border-radius: var(--radius); padding:1.3rem; background:var(--paper-raised); height:100%; transition: box-shadow .18s ease, transform .18s ease; }
.umv-latest-card:hover{ box-shadow: var(--shadow-card); transform: translateY(-3px); }
.umv-latest-meta{ font-family:var(--font-mono); font-size:.72rem; color: var(--teal-dark); text-transform:uppercase; letter-spacing:.04em; }
.umv-latest-card h6{ margin:.55rem 0 .4rem; font-size:1.02rem; }
.umv-latest-card p{ font-size:.87rem; color:var(--ink-soft); }

/* -------------------- Footer -------------------- */
.umv-footer{ background: linear-gradient(180deg, var(--ink), var(--ink-2)); color: #C9D0E0; padding: 4rem 0 1.5rem; margin-top: 2rem; position:relative; overflow:hidden;}
.umv-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--marigold), var(--teal)); z-index:2;
}
.umv-footer::after{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.4px);
  background-size: 20px 20px;
  mask-image: radial-gradient(ellipse at top right, black, transparent 70%);
}
.umv-footer .container{ position:relative; z-index:1; }
.umv-footer .umv-brand-name{ color:#fff; }
.umv-footer-about{ font-size:.87rem; color:#9FAAC4; max-width:280px; margin-top:.85rem; line-height:1.7;}
.umv-footer-heading{
  color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:1.1rem;
  position:relative; padding-bottom:.6rem;
}
.umv-footer-heading::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background: var(--marigold); }
.umv-footer-links{ list-style:none; padding:0; margin:0; }
.umv-footer-links li{ margin-bottom:.7rem; font-size:.87rem; color:#9FAAC4;}
.umv-footer-links a{ color:#C9D0E0; position:relative; padding-left:0; transition: padding-left .18s ease, color .18s ease; display:inline-block; }
.umv-footer-links a::before{ content:"›"; position:absolute; left:-14px; opacity:0; transition: all .18s ease; color: var(--marigold); }
.umv-footer-links a:hover{ color:#fff; padding-left:14px; }
.umv-footer-links a:hover::before{ left:0; opacity:1; }
.umv-footer-social a{
  display:inline-flex; width:36px;height:36px; border:1px solid #33405E; border-radius:50%;
  align-items:center; justify-content:center; color:#C9D0E0; margin-right:.5rem;
  transition: all .2s ease; background: rgba(255,255,255,.03);
}
.umv-footer-social a:hover{ background: var(--marigold); border-color: var(--marigold); color:#fff; transform: translateY(-3px); box-shadow: 0 6px 14px rgba(217,142,43,.35); }
.umv-footer-divider{ border-color:#2A3550; margin:2.5rem 0 1.25rem; }
.umv-footer-bottom{ font-size:.82rem; color:#7E8AAC; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* -------------------- Banners (admin-controlled ad/announcement slots) -------------------- */
.umv-banner-horizontal{
  display:flex; align-items:center; gap:1.5rem; background: var(--paper-raised); border:1px solid var(--line);
  border-radius: var(--radius); padding:1.25rem 1.5rem; margin: 1.75rem 0; box-shadow: var(--shadow-card);
  border-left: 4px solid var(--marigold);
}
.umv-banner-horizontal-lesson{ margin: 2rem 0; }
.umv-banner-image{ width:90px; height:90px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.umv-banner-text{ flex:1; min-width:0; }
.umv-banner-text h4{ font-size:1.05rem; margin-bottom:.25rem; }
.umv-banner-text p{ margin:0; font-size:.88rem; color: var(--ink-soft); }
@media (max-width: 575.98px){
  .umv-banner-horizontal{ flex-wrap:wrap; text-align:center; justify-content:center; }
  .umv-banner-image{ width:100%; height:140px; }
}

.umv-lesson-main-wrap{ display:flex; gap:2.5rem; align-items:flex-start; }
.umv-lesson-main-wrap .umv-lesson-content{ flex:1; min-width:0; }

.umv-lesson-right-rail{
  width:260px; flex-shrink:0; position:sticky; top:90px;
  display:flex; flex-direction:column; gap:1.25rem; max-height: calc(100vh - 110px); overflow-y:auto;
}
@media (max-width: 1199.98px){ .umv-lesson-right-rail{ display:none; } }

.umv-toc-box{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.1rem 1.25rem; box-shadow: var(--shadow-card);
}
.umv-toc-title{ font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color: var(--marigold-dark); margin-bottom:.75rem; display:flex; align-items:center; gap:.4rem; }
.umv-toc-box ul{ list-style:none; padding:0; margin:0; border-left:2px solid var(--line); }
.umv-toc-box li{ margin:0; }
.umv-toc-box li a{
  display:block; padding:.32rem .3rem .32rem .75rem; font-size:.83rem; color: var(--ink-soft);
  border-left:2px solid transparent; margin-left:-2px; transition: color .15s ease, border-color .15s ease;
}
.umv-toc-box li a:hover{ color: var(--ink); border-left-color: var(--marigold); }
.umv-toc-box li.umv-toc-sub a{ padding-left:1.4rem; font-size:.78rem; }

.umv-mobile-toc-btn{
  background: var(--paper-raised); color: var(--ink); border:1px solid var(--line-strong); border-radius:8px;
  font-size:.85rem; font-weight:600; padding:.5rem 1rem; margin-bottom:1.5rem;
}
.umv-mobile-toc-btn:hover{ border-color: var(--marigold); }
.umv-toc-mobile-list{ list-style:none; padding:0; margin:0; border-left:2px solid var(--line); }
.umv-toc-mobile-list li a{
  display:block; padding:.55rem .3rem .55rem .9rem; font-size:.92rem; color: var(--ink-soft);
  border-left:2px solid transparent; margin-left:-2px;
}
.umv-toc-mobile-list li a:hover{ color: var(--ink); border-left-color: var(--marigold); }
.umv-toc-mobile-list li.umv-toc-sub a{ padding-left:1.6rem; font-size:.87rem; }

.umv-banner-rail{
  background: var(--paper-raised); border:1px solid var(--line); border-radius: var(--radius);
  padding:1.25rem; box-shadow: var(--shadow-card); text-align:center;
}
.umv-banner-rail-image{ width:100%; border-radius:8px; margin-bottom:.85rem; object-fit:cover; }
.umv-banner-rail h6{ font-size:.95rem; margin-bottom:.4rem; }
.umv-banner-rail p{ font-size:.82rem; color: var(--ink-soft); margin-bottom:.9rem; }

.umv-back-to-top{
  position:fixed; bottom:1.75rem; right:1.75rem; width:46px; height:46px; border-radius:50%;
  background: var(--ink); color:#fff; border:none; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; box-shadow: var(--shadow-lift); opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease; z-index:1040;
}
.umv-back-to-top.visible{ opacity:1; visibility:visible; transform: translateY(0); }
.umv-back-to-top:hover{ background: var(--marigold-dark); }
@media (max-width: 575.98px){ .umv-back-to-top{ bottom:1rem; right:1rem; width:42px; height:42px; } }

/* -------------------- Tutorial layout -------------------- */
.umv-tutorial-layout{ display:grid; grid-template-columns: 270px 1fr; gap: 2.5rem; align-items:start; padding-top:1.75rem; }
@media (max-width: 991.98px){ .umv-tutorial-layout{ grid-template-columns: 1fr; } }

.umv-sidebar{ position: sticky; top: 78px; max-height: calc(100vh - 100px); overflow-y:auto; padding-right:.5rem; }
.umv-sidebar-inner{ border-right:1px solid var(--line); padding-right:1.25rem; }
.umv-sidebar-title{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color: var(--marigold-dark); margin-bottom:1rem; }
.umv-sidebar-list{ list-style:none; padding-left:0; margin:0; }
.umv-sidebar-list.depth-1{ padding-left: .9rem; border-left:1px dashed var(--line-strong); margin: .25rem 0 .5rem .3rem;}
.umv-sidebar-node{ margin-bottom:.15rem; }
.umv-sidebar-toggle{
  width:100%; text-align:left; background:none; border:none; padding:.4rem .3rem; font-size:.87rem; font-weight:600;
  color: var(--ink); display:flex; justify-content:space-between; align-items:center; border-radius:6px;
}
.umv-sidebar-toggle:hover{ background: var(--marigold-tint); }
.umv-sidebar-toggle i{ font-size:.75rem; transition: transform .15s ease; color: var(--ink-soft); }
.umv-sidebar-node.open > .umv-sidebar-toggle i{ transform: rotate(180deg); }
.umv-sidebar-node-label{ display:block; padding:.4rem .3rem; font-size:.87rem; font-weight:600; color:var(--ink-soft); }
.umv-sidebar-collapse{ display:none; padding-left:.5rem; }
.umv-sidebar-node.open > .umv-sidebar-collapse{ display:block; }
.umv-lesson-list{ list-style:none; padding-left:.6rem; margin:.2rem 0 .3rem; border-left:1px solid var(--line); }
.umv-lesson-link{ display:block; padding:.32rem .5rem; font-size:.85rem; color: var(--ink-soft); border-radius:6px; }
.umv-lesson-link:hover{ background: var(--marigold-tint); color: var(--ink); }
.umv-lesson-link.active{ background: var(--ink); color:#fff; font-weight:500; }

.umv-mobile-topics-btn{
  background: var(--ink); color:#fff; border-radius:8px; font-size:.85rem; font-weight:600;
  padding:.55rem 1rem; margin-bottom:1rem; border:none;
}
.umv-sidebar-offcanvas{ width: 300px; }
.umv-sidebar-offcanvas .offcanvas-body .umv-sidebar-toggle{ font-size:.92rem; padding:.55rem .3rem;}
.umv-sidebar-offcanvas .umv-lesson-link{ padding:.5rem;}

/* -------------------- Lesson content -------------------- */
.umv-breadcrumb-nav .breadcrumb{ font-size:.83rem; margin-bottom:1rem; }
.umv-breadcrumb-nav a{ color: var(--ink-soft); }
.umv-lesson-content{ max-width: 760px; }
.umv-lesson-content h2{ font-size:1.6rem; margin-top:2.1rem; margin-bottom:.9rem; padding-bottom:.55rem; border-bottom:2px solid var(--marigold-tint); position:relative; scroll-margin-top:95px; }
.umv-lesson-content h2:first-child{ margin-top:0; }
.umv-lesson-content h3{ font-size:1.22rem; margin-top:1.65rem; margin-bottom:.6rem; scroll-margin-top:95px; }
.umv-lesson-content p{ margin-bottom:1rem; color:#243250; }
.umv-lesson-content ul, .umv-lesson-content ol{ margin-bottom:1.2rem; padding-left:1.4rem; }
.umv-lesson-content li{ margin-bottom:.35rem; }
.umv-lesson-content table{
  width:100%; margin: 1.5rem 0; font-size:.92rem; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius: 10px; overflow:hidden; box-shadow: var(--shadow-card);
}
.umv-lesson-content table thead th{
  background: linear-gradient(180deg, var(--ink), var(--ink-2)); color:#fff; font-family:var(--font-display);
  font-weight:600; font-size:.85rem; letter-spacing:.02em; padding:.75rem 1rem; border:none; text-align:left;
}
.umv-lesson-content table tbody td{ padding:.7rem 1rem; border-top:1px solid var(--line); vertical-align:top; }
.umv-lesson-content table tbody tr:nth-child(even){ background: var(--paper); }
.umv-lesson-content table tbody tr:hover{ background: var(--marigold-tint); }
.umv-lesson-content table tbody tr:first-child td{ border-top:none; }
.umv-lesson-content table code{
  background:#EEF0F5; color: var(--ink-2); padding:.1rem .4rem; border-radius:4px; font-size:.85em;
}
.umv-lesson-title{ font-size: clamp(1.65rem, 3vw, 2.25rem); margin-bottom:.5rem; }
.umv-lesson-intro{ font-size:1.06rem; color: var(--ink-soft); margin-bottom:1.75rem; }

.note-box, .example-box, .output-box, .warning-box{
  border-radius:8px; padding:1.05rem 1.3rem; margin:1.3rem 0; font-size:.93rem; border:1px solid; border-left-width:4px;
}
.note-box{ background: var(--marigold-tint); border-color:#EFD2A0; border-left-color: var(--marigold); }
.example-box{ background: var(--teal-tint); border-color:#BEE0D3; border-left-color: var(--teal); }
.output-box{ background:#F0F1F4; border-color: var(--line-strong); border-left-color: var(--ink-soft); font-family: var(--font-mono); }
.warning-box{ background: var(--red-tint); border-color:#EAC0B4; border-left-color: var(--red); }

.code-block{
  position:relative; background: #1B2337; color:#E8ECF7; border-radius:10px; padding:1.2rem 1.3rem;
  font-family: var(--font-mono); font-size:.86rem; overflow-x:auto; margin:1.3rem 0; line-height:1.6;
  box-shadow: 0 8px 24px rgba(22,35,61,.18);
}
.code-block::before{
  content: attr(data-lang); position:absolute; top:.55rem; right:.9rem; font-size:.68rem; color:#7C89AD;
  text-transform:uppercase; letter-spacing:.05em; font-family: var(--font-mono);
}
.code-block .copy-btn{
  position:absolute; top:.45rem; right: 3.4rem; background:#2B3550; border:none; color:#C9D0E0;
  font-size:.7rem; padding:.25rem .55rem; border-radius:5px; cursor:pointer;
}
.code-block .copy-btn:hover{ background:#394469; color:#fff; }

/* -------------------- Progress + lesson nav -------------------- */
.umv-progress-indicator{ font-family:var(--font-mono); font-size:.78rem; color: var(--ink-soft); margin: 2rem 0 .4rem; }
.umv-progress-bar{ height:5px; background: var(--line); margin-bottom:2rem; border-radius:3px; overflow:hidden; }
.umv-progress-bar .progress-bar{ background: linear-gradient(90deg, var(--marigold), var(--teal)); }
.umv-lesson-nav{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin: 1rem 0 3rem; }
.umv-lesson-nav-link{
  border:1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; display:flex; flex-direction:column; gap:.25rem;
  color: var(--ink); background: var(--paper-raised); transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.umv-lesson-nav-link:hover{ border-color: var(--marigold); color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.umv-lesson-nav-link.next{ text-align:right; align-items:flex-end; }
.umv-lesson-nav-dir{ font-size:.75rem; color: var(--ink-soft); font-family: var(--font-mono); }
.umv-lesson-nav-title{ font-weight:600; }
@media (max-width: 575.98px){ .umv-lesson-nav{ grid-template-columns:1fr; } }

/* -------------------- Search / listing -------------------- */
.umv-search-result{ border-bottom:1px solid var(--line); padding: 1.15rem 0; }
.umv-search-result h5{ font-size:1.06rem; margin-bottom:.3rem; }
.umv-search-result .path{ font-family:var(--font-mono); font-size:.72rem; color: var(--teal-dark); margin-bottom:.3rem; }

/* -------------------- Admin -------------------- */
.umv-admin-body{ background: var(--paper); }
.umv-admin-sidebar{ background: linear-gradient(180deg, var(--ink), var(--ink-2)); min-height:100vh; color:#C9D0E0; }
.umv-admin-sidebar a{ color:#C9D0E0; display:block; padding:.6rem 1rem; border-radius:7px; font-size:.9rem; transition: background .15s ease, color .15s ease; }
.umv-admin-sidebar a:hover, .umv-admin-sidebar a.active{ background:#243052; color:#fff; }
.umv-admin-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.5rem; }

.umv-filter-bar{
  background: var(--marigold-tint); border:1px solid #EFD2A0; border-left: 4px solid var(--marigold);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-card);
}
.umv-filter-label{ color: var(--ink-soft); font-weight:600; display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem; }
.umv-filter-label i{ color: var(--marigold-dark); }
.umv-filter-input{
  border:1px solid var(--line-strong); background:#fff; color: var(--ink);
  border-radius:8px; transition: all .2s ease;
}
.umv-filter-input::placeholder{ color:#9AA3B8; }
.umv-filter-input:focus{
  border-color: var(--marigold); box-shadow: 0 0 0 3px rgba(217,142,43,.2); outline:none;
}
.umv-filter-input-wrap{ position:relative; }
.umv-filter-input-icon{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); color:#9AA3B8; font-size:.85rem; pointer-events:none; }
.umv-filter-input-wrap .umv-filter-input{ padding-left:2.3rem; }
.umv-filter-input-wrap:focus-within .umv-filter-input-icon{ color: var(--marigold-dark); }
.umv-stat{ background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.25rem; border-top:3px solid var(--marigold); }
.umv-stat .num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; }
.umv-stat .label{ font-size:.82rem; color: var(--ink-soft); }