/* ═══════════════════════════════════════════════════════════
   TutorialHub — main.css
   Theme system: data-theme="dark" | data-theme="light"
   ═══════════════════════════════════════════════════════════ */

/* ── Theme variables ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg:   #0f1117;
  --sf:   #181c27;
  --sf2:  #1f2435;
  --bd:   #2a2f45;
  --tx:   #e2e8f0;
  --txm:  #8892a4;
  --ac:   #6366f1;
  --ach:  #818cf8;
  --nav-bg: rgba(15,17,23,.92);
  --card-shadow: 0 4px 24px rgba(0,0,0,.35);
  --code-bg: #0d1117;
  --input-bg: #1f2435;
  --btn-login-bg: rgba(99,102,241,.15);
  --btn-login-color: #818cf8;
}

[data-theme="light"] {
  --bg:   #f5f6fa;
  --sf:   #ffffff;
  --sf2:  #f0f2f8;
  --bd:   #d4d8e8;
  --tx:   #1a1d2e;
  --txm:  #555d7a;
  --ac:   #4f46e5;
  --ach:  #6366f1;
  --nav-bg: rgba(255,255,255,.95);
  --card-shadow: 0 4px 20px rgba(0,0,0,.08);
  --code-bg: #1e1e2e;
  --input-bg: #f5f6fa;
  --btn-login-bg: rgba(79,70,229,.1);
  --btn-login-color: #4f46e5;
}

/* ── Base ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.7;font-size:16px;transition:background .25s,color .25s}
a{color:var(--ac);text-decoration:none;transition:color .2s}
a:hover{color:var(--ach)}
img{max-width:100%;height:auto;display:block}

/* ── Navbar ──────────────────────────────────────────────── */
.navbar{position:sticky;top:0;z-index:100;height:60px;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd);transition:background .25s}
.nav-container{max-width:1300px;margin:0 auto;padding:0 1.5rem;height:100%;display:flex;align-items:center;gap:1rem}
.nav-brand{display:flex;align-items:center;gap:.5rem;font-family:'Sora',sans-serif;font-weight:700;font-size:1.1rem;color:var(--tx);white-space:nowrap;flex-shrink:0}
.nav-brand:hover{color:var(--tx)}
.nav-topics{display:flex;gap:.25rem;overflow-x:auto;flex:1;scrollbar-width:none}
.nav-topics::-webkit-scrollbar{display:none}
.nav-topic-link{padding:.4rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500;color:var(--txm);white-space:nowrap;transition:all .2s;border:1px solid transparent}
.nav-topic-link:hover,.nav-topic-link.active{color:var(--tc,var(--ac));border-color:var(--tc,var(--ac));background:color-mix(in srgb,var(--tc,var(--ac)) 10%,transparent)}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.nav-mobile-toggle{display:none;background:none;border:none;color:var(--tx);font-size:1.2rem;cursor:pointer;padding:.5rem}

/* ── Theme toggle button ─────────────────────────────────── */
.theme-toggle{background:none;border:1px solid var(--bd);border-radius:6px;color:var(--txm);cursor:pointer;padding:.4rem .6rem;font-size:.9rem;transition:all .2s;line-height:1}
.theme-toggle:hover{background:var(--sf2);color:var(--tx)}

/* ── User menu ───────────────────────────────────────────── */
.user-menu{position:relative}
.user-btn{display:flex;align-items:center;gap:.5rem;background:none;border:1px solid var(--bd);border-radius:6px;color:var(--tx);cursor:pointer;padding:.35rem .75rem;font-size:.85rem;font-family:inherit;transition:all .2s}
.user-btn:hover{background:var(--sf2)}
.user-avatar{width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}
.user-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 6px);background:var(--sf);border:1px solid var(--bd);border-radius:10px;min-width:180px;padding:.5rem;box-shadow:var(--card-shadow);z-index:200}
.user-dropdown.open{display:block}
.user-dropdown a{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:6px;font-size:.86rem;color:var(--tx)}
.user-dropdown a:hover{background:var(--sf2)}
.user-dropdown a i{width:14px;color:var(--txm);font-size:.8rem}
.dropdown-divider{height:1px;background:var(--bd);margin:.35rem 0}
.btn-login{padding:.4rem .9rem;border-radius:6px;font-size:.85rem;font-weight:600;background:var(--btn-login-bg);color:var(--btn-login-color);border:1px solid currentColor;transition:all .2s}
.btn-login:hover{opacity:.8;color:var(--btn-login-color)}

/* ── Mobile nav ──────────────────────────────────────────── */
.mobile-nav{display:none;position:fixed;top:60px;left:0;right:0;background:var(--sf);border-bottom:1px solid var(--bd);padding:1rem;z-index:99;flex-direction:column;gap:.5rem}
.mobile-nav.open{display:flex}
.mobile-nav-link{color:var(--tx);padding:.6rem 1rem;border-radius:6px;font-size:.95rem}
.mobile-nav-link:hover{background:var(--sf2)}
.mobile-nav-divider{height:1px;background:var(--bd);margin:.25rem 0}

/* ── Messages ────────────────────────────────────────────── */
.messages{padding:.75rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;max-width:1200px;margin:0 auto}
.msg{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-radius:8px;font-size:.9rem;gap:1rem}
.msg-success{background:rgba(59,109,17,.15);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.msg-error{background:rgba(220,38,38,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.msg-warning{background:rgba(180,115,7,.12);color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.msg-close{background:none;border:none;color:inherit;cursor:pointer;font-size:1.1rem;opacity:.7}
.msg-close:hover{opacity:1}

/* ── Main ────────────────────────────────────────────────── */
.main-content{min-height:calc(100vh - 60px - 200px)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{position:relative;padding:5rem 2rem 4rem;text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(99,102,241,.18) 0%,transparent 70%);pointer-events:none}
.hero-content{position:relative;max-width:700px;margin:0 auto}
.hero-title{font-family:'Sora',sans-serif;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:700;line-height:1.15;margin-bottom:1.25rem}
.hero-accent{background:linear-gradient(135deg,#6366f1,#a855f7,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{color:var(--txm);font-size:1.1rem;max-width:580px;margin:0 auto 2rem}
.hero-stats{display:flex;justify-content:center;gap:3rem}
.stat{text-align:center}
.stat-n{display:block;font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:700;color:var(--ac)}
.stat-l{font-size:.85rem;color:var(--txm)}

/* ── Topics section ──────────────────────────────────────── */
.topics-section{padding:3rem 2rem 5rem}
.section-wrap{max-width:1200px;margin:0 auto}
.section-title{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:2rem;text-align:center}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}

/* ── Topic card ──────────────────────────────────────────── */
.topic-card{background:var(--sf);border:1px solid var(--bd);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column}
.topic-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);border-color:var(--cc,var(--ac))}

.tc-header {
  padding: 1.25rem 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════
   TOPIC CARD — COVER IMAGE LAYOUT
   Replace the existing .tc-header and .tc-icon rules
   in main.css with this block.
═══════════════════════════════════════════════════════════ */

/* ── Card header row: thumbnail left, count badge right ── */
.tc-header {
  padding: 1.25rem 1.25rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Thumbnail wrapper — fixed square, no overflow ─────── */
.tc-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cc, var(--ac)) 25%, transparent);
  background: color-mix(in srgb, var(--cc, var(--ac)) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Cover image fills the thumb exactly ────────────────── */
.tc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Emoji / icon fallback ──────────────────────────────── */
.tc-icon {
  font-size: 1.8rem;
  line-height: 1;
}

/* ── Tutorial count badge ───────────────────────────────── */
.tc-count {
  font-size: 0.76rem;
  color: var(--txm);
  background: var(--sf2);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  border: 1px solid var(--bd);
  white-space: nowrap;
  margin-left: auto;   /* push to right edge */
}

/* ── Card body: tighten top padding ────────────────────── */
.tc-body {
  padding: 0.85rem 1.25rem 0.25rem;
  flex: 1;
}

.tc-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.tc-body p {
  font-size: 0.875rem;
  color: var(--txm);
  line-height: 1.6;
  margin: 0;
}

/* ── Card footer ────────────────────────────────────────── */
.tc-footer {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}





.tc-body h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}
.tc-body h3 a{color:var(--tx)}
.tc-body h3 a:hover{color:var(--cc,var(--ac))}
.tc-body p{font-size:.9rem;color:var(--txm);line-height:1.6}
.tc-footer{padding:1rem 1.5rem 1.5rem;display:flex;gap:.75rem;align-items:center}
.btn-start{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;background:var(--cc,var(--ac));color:#fff;border-radius:6px;font-size:.87rem;font-weight:600;transition:opacity .2s}
.btn-start:hover{opacity:.85;color:#fff}
.btn-overview{font-size:.85rem;color:var(--txm);padding:.5rem}
.btn-overview:hover{color:var(--tx)}

/* ── Layout with sidebar ─────────────────────────────────── */
.layout{display:flex;min-height:calc(100vh - 60px);max-width:1400px;margin:0 auto}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{width:280px;flex-shrink:0;background:var(--sf);border-right:1px solid var(--bd);position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--bd) transparent;display:flex;flex-direction:column}
.sb-header{display:flex;align-items:center;gap:.75rem;padding:1.25rem 1rem;border-bottom:1px solid var(--bd);flex-shrink:0}
.sb-icon{font-size:1.6rem}
.sb-name{font-size:.95rem;font-weight:700;color:var(--tx);line-height:1.2}
.sb-name a{color:inherit}
.sb-name a:hover{color:var(--sc,var(--ac))}
.sb-count{font-size:.75rem;color:var(--txm)}
.sb-progress{padding:.75rem 1rem;border-bottom:1px solid var(--bd);flex-shrink:0}
.pb{height:4px;background:var(--sf2);border-radius:2px;overflow:hidden;margin-bottom:.4rem}
.pb-fill{height:100%;background:var(--sc,var(--ac));border-radius:2px;transition:width .5s ease}
.pb-label{font-size:.72rem;color:var(--txm)}
.sb-nav{flex:1;overflow-y:auto}
.sb-nav ul{list-style:none;padding:.5rem 0}
.sb-item{border-left:2px solid transparent}
.sb-item.active{border-left-color:var(--sc,var(--ac));background:color-mix(in srgb,var(--sc,var(--ac)) 8%,transparent)}
.sb-item.completed .sb-num{background:var(--sc,var(--ac));color:#fff;border-color:var(--sc,var(--ac))}
.sb-link{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;font-size:.84rem;color:var(--txm);transition:all .15s}
.sb-link:hover{color:var(--tx);background:var(--sf2)}
.sb-item.active .sb-link{color:var(--tx)}
.sb-num{width:22px;height:22px;border-radius:50%;background:var(--sf2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0;border:1px solid var(--bd);transition:all .2s}
.sb-title{flex:1;line-height:1.3}
.sb-time{font-size:.7rem;color:var(--txm);flex-shrink:0}
.sb-close{display:none;position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--txm);cursor:pointer;font-size:1rem}

/* ── Content area ────────────────────────────────────────── */
.content-area{flex:1;min-width:0;padding:2rem 2.5rem;max-width:900px}
.btn-open-sb{display:none;align-items:center;gap:.5rem;padding:.5rem 1rem;background:color-mix(in srgb,var(--tc,var(--ac)) 15%,transparent);border:1px solid var(--tc,var(--ac));color:var(--tc,var(--ac));border-radius:6px;font-size:.85rem;cursor:pointer;margin-bottom:1.5rem;font-family:inherit}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--txm);margin-bottom:1.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--txm)}
.breadcrumb a:hover{color:var(--tx)}
.breadcrumb [aria-current="page"]{color:var(--tx)}

/* ── Topic hero ──────────────────────────────────────────── */
.topic-hero{background:linear-gradient(135deg,color-mix(in srgb,var(--hc,var(--ac)) 15%,var(--sf)),var(--sf));border:1px solid color-mix(in srgb,var(--hc,var(--ac)) 30%,transparent);border-radius:10px;padding:2.5rem;margin-bottom:2rem}
.th-icon{font-size:2.5rem;margin-bottom:.75rem}
.topic-hero h1{font-family:'Sora',sans-serif;font-size:2rem;font-weight:700;margin-bottom:.5rem}
.topic-hero p{color:var(--txm);font-size:1.05rem;margin-bottom:1.5rem}
.th-actions{display:flex;align-items:center;gap:1.5rem}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;background:var(--hc,var(--ac));color:#fff;border-radius:6px;font-weight:600;transition:opacity .2s}
.btn-primary:hover{opacity:.85;color:#fff}
.th-meta{font-size:.85rem;color:var(--txm)}

/* ── Overview ────────────────────────────────────────────── */
.overview h2{font-family:'Sora',sans-serif;font-size:1.3rem;margin-bottom:1.25rem}
.overview-list{display:flex;flex-direction:column;gap:.75rem}
.ov-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--sf);border:1px solid var(--bd);border-radius:10px;color:var(--tx);transition:all .15s}
.ov-card:hover{border-color:var(--ac);background:var(--sf2);transform:translateX(4px);color:var(--tx)}
.ov-num{width:32px;height:32px;border-radius:50%;background:var(--sf2);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.ov-info{flex:1;min-width:0}
.ov-info h3{font-size:.95rem;font-weight:600;margin-bottom:.2rem}
.ov-info p{font-size:.82rem;color:var(--txm);line-height:1.4}
.ov-time{font-size:.75rem;color:var(--txm)}
.ov-arrow{color:var(--txm);flex-shrink:0}
.ov-featured{border-color:#f59e0b}
.ov-featured .ov-num{background:#f59e0b;color:#000;border-color:#f59e0b}

/* ── Article header ──────────────────────────────────────── */
.article-header{margin-bottom:2rem}
.art-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.75rem;font-size:.82rem}
.art-badge{padding:.25rem .65rem;border-radius:20px;color:#fff;font-size:.78rem;font-weight:600}
.art-meta time,.art-time{color:var(--txm)}
.article-header h1{font-family:'Sora',sans-serif;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;line-height:1.25;margin-bottom:.75rem}
.art-summary{font-size:1.05rem;color:var(--txm);border-left:3px solid var(--ac);padding-left:1rem;line-height:1.6}

/* ── Tutorial content ────────────────────────────────────── */
.tutorial-content{font-size:1rem;line-height:1.85;color:var(--tx)}
.tutorial-content h2{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--bd)}
.tutorial-content h3{font-size:1.2rem;font-weight:700;margin:2rem 0 .75rem}
.tutorial-content p{margin-bottom:1.25rem}
.tutorial-content ul,.tutorial-content ol{padding-left:1.5rem;margin-bottom:1.25rem}
.tutorial-content li{margin-bottom:.4rem}
.tutorial-content code{font-family:'JetBrains Mono',monospace;background:var(--sf2);padding:.15em .4em;border-radius:4px;font-size:.9em;color:#93c5fd}
.tutorial-content pre{background:var(--code-bg);border:1px solid var(--bd);border-radius:10px;padding:1.25rem 1.5rem;overflow-x:auto;margin-bottom:1.5rem;font-size:.88rem;line-height:1.65;position:relative}
.tutorial-content pre code{background:none;padding:0;color:#e2e8f0;font-size:inherit}
.tutorial-content blockquote{border-left:3px solid var(--ac);padding:.75rem 1rem;background:var(--sf);border-radius:0 6px 6px 0;margin-bottom:1.25rem;color:var(--txm)}
.tutorial-content table{width:100%;border-collapse:collapse;margin-bottom:1.5rem;font-size:.9rem}
.tutorial-content th,.tutorial-content td{padding:.65rem 1rem;border:1px solid var(--bd);text-align:left}
.tutorial-content th{background:var(--sf2);font-weight:700}
.tutorial-content img{border-radius:10px;margin:1.25rem 0;border:1px solid var(--bd)}

/* ── Prev/Next ───────────────────────────────────────────── */
.tut-pagination{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--bd)}
.pag-link{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;border:1px solid var(--bd);border-radius:10px;background:var(--sf);transition:all .2s;color:var(--tx)}
.pag-link:hover{border-color:var(--ac);background:var(--sf2);color:var(--tx)}
.pag-link--right{text-align:right}
.pag-dir{font-size:.78rem;color:var(--txm)}
.pag-title{font-size:.9rem;font-weight:600}

/* ── Auth pages ──────────────────────────────────────────── */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:2.5rem;width:100%;max-width:420px;text-align:center}
.auth-card--danger{border-color:rgba(239,68,68,.3)}
.auth-logo{font-size:2.5rem;margin-bottom:1rem}
.auth-title{font-family:'Sora',sans-serif;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}
.auth-sub{color:var(--txm);font-size:.9rem;margin-bottom:1.75rem}
.auth-form{text-align:left;display:flex;flex-direction:column;gap:1rem}
.auth-foot{margin-top:1.5rem;font-size:.83rem;color:var(--txm)}
.delete-icon{font-size:2.5rem;color:#f87171;margin-bottom:1rem}
.delete-info{text-align:left;background:var(--sf2);border-radius:8px;padding:1rem;margin-bottom:1rem;display:flex;flex-direction:column;gap:.6rem}
.delete-detail{display:flex;justify-content:space-between;font-size:.9rem}
.delete-label{color:var(--txm)}
.delete-value{font-weight:600}

/* ── Contributor dashboard ───────────────────────────────── */
.dash-wrap{max-width:1100px;margin:0 auto;padding:2rem 1.5rem;display:flex;flex-direction:column;gap:2rem}
.dash-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.dash-user{display:flex;align-items:center;gap:1rem}
.dash-avatar{width:52px;height:52px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;flex-shrink:0}
.dash-title{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;line-height:1.2}
.dash-empty{text-align:center;padding:4rem;color:var(--txm)}
.dash-empty i{font-size:3rem;margin-bottom:1rem;display:block}
.dash-empty h2{font-size:1.2rem;margin-bottom:.5rem;color:var(--tx)}

/* Role badges */
.role-badge{display:inline-block;padding:.2rem .65rem;border-radius:20px;font-size:.75rem;font-weight:600}
.role-reader{background:rgba(136,150,164,.15);color:var(--txm)}
.role-contributor{background:rgba(55,118,171,.15);color:#60a5fa}
.role-editor{background:rgba(224,92,0,.15);color:#fb923c}

/* Topic block */
.dash-topic{background:var(--sf);border:1px solid var(--bd);border-left:4px solid var(--tc,var(--ac));border-radius:10px;overflow:hidden}
.dash-topic-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;flex-wrap:wrap;gap:.75rem}
.dash-topic-info{display:flex;align-items:center;gap:.75rem}
.dash-topic-icon{font-size:1.6rem}
.dash-topic-name{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:.15rem}
.dash-topic-meta{font-size:.78rem;color:var(--txm)}
.dash-topic-actions{display:flex;gap:.5rem;flex-wrap:wrap}

/* Permission badges */
.perm-badges{padding:.5rem 1.5rem .75rem;display:flex;gap:.5rem}
.perm-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;padding:.2rem .55rem;border-radius:20px;font-weight:600}
.perm-on{background:rgba(74,222,128,.1);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.perm-off{background:var(--sf2);color:var(--txm);border:1px solid var(--bd)}

/* Tutorial table */
.tut-table-wrap{padding:0 1.5rem 1.5rem;overflow-x:auto}
.tut-table{width:100%;border-collapse:collapse;font-size:.87rem}
.tut-table th{text-align:left;padding:.6rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--txm);border-bottom:1px solid var(--bd)}
.tut-table td{padding:.7rem .75rem;border-bottom:1px solid var(--bd)}
.tut-table tr:last-child td{border-bottom:none}
.tut-table tr:hover td{background:var(--sf2)}
.tut-order{color:var(--txm);width:40px}
.tut-title-cell{font-weight:500}
.tut-star{margin-left:.3rem;font-size:.8rem}
.tut-time{color:var(--txm);white-space:nowrap}
.tut-empty{padding:1rem 1.5rem 1.5rem;color:var(--txm);font-size:.9rem}
.tut-actions{display:flex;gap:.4rem}
.tut-btn{width:28px;height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.75rem;border:1px solid var(--bd);background:none;color:var(--txm);cursor:pointer;transition:all .15s}
.tut-btn:hover{color:var(--tx)}
.tut-btn-view:hover{border-color:var(--ac);color:var(--ac)}
.tut-btn-edit:hover{border-color:#60a5fa;color:#60a5fa}
.tut-btn-delete:hover{border-color:#f87171;color:#f87171}

/* Status badges */
.status-badge{display:inline-block;padding:.15rem .55rem;border-radius:20px;font-size:.72rem;font-weight:600}
.status-pub{background:rgba(74,222,128,.1);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.status-draft{background:var(--sf2);color:var(--txm);border:1px solid var(--bd)}

/* Action buttons */
.btn-action{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:6px;font-size:.82rem;font-weight:600;transition:all .2s;border:1px solid transparent}
.btn-add{background:var(--tc,var(--ac));color:#fff}
.btn-add:hover{opacity:.85;color:#fff}
.btn-view{background:var(--sf2);color:var(--tx);border-color:var(--bd)}
.btn-view:hover{border-color:var(--ac);color:var(--ac)}
.btn-secondary{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;font-weight:600;background:var(--sf2);color:var(--tx);border:1px solid var(--bd);transition:all .2s}
.btn-secondary:hover{border-color:var(--ac);color:var(--ac)}

/* ── Contributor form ────────────────────────────────────── */
.form-wrap{max-width:800px;margin:0 auto;padding:2rem 1.5rem}
.form-header{margin-bottom:2rem}
.form-breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--txm);margin-bottom:.5rem;flex-wrap:wrap}
.form-breadcrumb a{color:var(--txm)}
.form-breadcrumb a:hover{color:var(--tx)}
.form-title{font-family:'Sora',sans-serif;font-size:1.8rem;font-weight:700;margin-bottom:.25rem}
.form-sub{color:var(--txm);font-size:.9rem}
.contrib-form{display:flex;flex-direction:column;gap:1.5rem}
.form-section{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:1.5rem}
.form-section--collapse{padding:1rem 1.5rem}
.form-section--collapse summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem}
.form-section--collapse summary::-webkit-details-marker{display:none}
.section-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txm);margin-bottom:1rem}
.field-group{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field-group:last-child{margin-bottom:0}
.field-label{font-size:.87rem;font-weight:600;color:var(--tx)}
.field-hint{font-size:.78rem;color:var(--txm)}
.field-error{font-size:.78rem;color:#f87171;margin-top:.25rem}
.required{color:#f87171}
.field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-weight:500;padding-top:.5rem}
.editor-tip{background:color-mix(in srgb,var(--ac) 10%,transparent);border:1px solid color-mix(in srgb,var(--ac) 25%,transparent);border-radius:6px;padding:.6rem .9rem;font-size:.8rem;color:var(--ac);margin-bottom:.5rem}

/* form inputs */
.form-input,.form-input select{width:100%;background:var(--input-bg);border:1px solid var(--bd);border-radius:6px;padding:.6rem .85rem;font-size:.9rem;color:var(--tx);font-family:inherit;transition:border-color .2s;resize:vertical}
.form-input:focus,.form-input select:focus{outline:none;border-color:var(--ac)}
.content-editor{font-family:'JetBrains Mono',monospace;font-size:.85rem;min-height:400px}

.form-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.btn-submit{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.5rem;background:var(--ac);color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:opacity .2s;font-family:inherit}
.btn-submit:hover{opacity:.85}
.btn-submit--danger{background:#dc2626}
.btn-cancel{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.1rem;background:var(--sf2);color:var(--tx);border:1px solid var(--bd);border-radius:6px;font-size:.9rem;font-weight:500;transition:all .2s}
.btn-cancel:hover{border-color:var(--ac);color:var(--ac)}

/* Profile */
.profile-info-row{display:flex;align-items:center;gap:1rem}
.profile-avatar-lg{width:56px;height:56px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}
.profile-username{font-size:1rem;font-weight:600;margin-bottom:.25rem}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--sf);border-top:1px solid var(--bd);padding:3rem 2rem 1.5rem;margin-top:4rem;transition:background .25s}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand{font-family:'Sora',sans-serif;font-size:1.1rem;font-weight:700}
.footer-brand p{font-size:.85rem;color:var(--txm);margin-top:.5rem;font-family:'Inter',sans-serif;font-weight:400}
.footer-col h4{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--txm);margin-bottom:.75rem}
.footer-col a{display:block;font-size:.85rem;color:var(--txm);padding:.2rem 0}
.footer-col a:hover{color:var(--tx)}
.footer-bottom{text-align:center;font-size:.82rem;color:var(--txm);border-top:1px solid var(--bd);padding-top:1.5rem}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state{grid-column:1/-1;text-align:center;padding:4rem;color:var(--txm);font-size:1.1rem}
.empty-state i{font-size:3rem;margin-bottom:1rem;display:block}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:900px){
  .nav-topics{display:none}
  .nav-mobile-toggle{display:block}
  .sidebar{position:fixed;top:0;left:-100%;height:100vh;width:min(280px,85vw);z-index:200;transition:left .25s ease;padding-top:1rem}
  .sidebar.open{left:0}
  .sb-close{display:block}
  .btn-open-sb{display:flex}
  .content-area{padding:1.5rem}
  .tut-pagination{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .dash-topic-header{flex-direction:column;align-items:flex-start}
  .field-row-3{grid-template-columns:1fr}
}
@media(max-width:600px){
  .hero{padding:3rem 1.5rem}
  .hero-stats{gap:1.5rem}
  .topics-grid{grid-template-columns:1fr}
  .topic-hero{padding:1.5rem}
  .dash-header{flex-direction:column;align-items:flex-start}
}

/* ── Sign up button (navbar) ─────────────────────────────── */
.btn-signup {
  padding: .4rem .9rem;
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 600;
  background: var(--ac);
  color: #fff;
  border: 1px solid var(--ac);
  transition: opacity .2s;
}
.btn-signup:hover { opacity: .85; color: #fff; }

/* ── Profile page ────────────────────────────────────────── */
.profile-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.profile-card-left { flex-shrink: 0; }
.profile-avatar-img {
  width: 80px; height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bd);
}
.profile-card-right { flex: 1; min-width: 200px; }
.profile-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.profile-name { font-family:'Sora',sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.profile-username { font-size: .85rem; color: var(--txm); }
.profile-bio { color: var(--txm); font-size: .95rem; margin: .75rem 0; line-height: 1.6; }
.profile-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: .83rem;
  color: var(--txm);
  margin-bottom: 1.25rem;
}
.profile-meta i { margin-right: .3rem; }
.profile-actions { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Profile sections */
.profile-section { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 1.5rem; }
.profile-section-title { font-family:'Sora',sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; }

/* Permissions grid on profile */
.perms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.perm-card {
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-left: 3px solid var(--tc, var(--ac));
  border-radius: 8px;
  padding: 1rem;
}
.perm-card-header { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.perm-topic-icon { font-size: 1.3rem; }
.perm-topic-name { font-weight: 600; font-size: .9rem; }

/* Signup name row */
.auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media(max-width:480px) { .auth-name-row { grid-template-columns: 1fr; } }

/* ── Sidebar group headings ───────────────────────────────── */
.sb-group-heading {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem 1rem .3rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--txm);
  margin-top: .5rem;
}
.sb-group-icon { font-size: .9rem; }
.sb-group-count {
  margin-left: auto;
  font-size: .68rem;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: .1rem .45rem;
}
.sb-list--indented .sb-link { padding-left: 1.5rem; }
.sb-list--indented .sb-title { font-size: .82rem; }

/* ── Topic overview grouped sections ─────────────────────── */
.ov-section-header {
  margin: 1.75rem 0 .6rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.ov-section-icon { font-size: 1.1rem; }
.ov-section-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tx);
}
.ov-section-desc {
  width: 100%;
  font-size: .83rem;
  color: var(--txm);
  margin-top: .2rem;
}
.overview-list--indented { margin-left: 1rem; }
.overview-list--indented .ov-card { background: var(--sf2); }

/* ── Dashboard sub-topic button ───────────────────────────── */
.btn-subtopic {
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  color: var(--ac);
  border-color: var(--ac);
}
.btn-subtopic:hover { background: var(--ac); color: #fff; }

/* ── Dashboard section label ──────────────────────────────── */
.dash-section-label {
  padding: .6rem 1rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txm);
  display: flex;
  align-items: center;
  gap: .4rem;
  border-top: 1px solid var(--bd);
  margin-top: .25rem;
}

/* ── Sub-topic chip in tutorial table ─────────────────────── */
.subtopic-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: .15rem .5rem;
  white-space: nowrap;
  color: var(--txm);
}

/* ── Sub-topic badge in article header ────────────────────── */
.art-subtopic-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 20px;
  padding: .2rem .6rem;
  color: var(--txm);
}

/* ── Dashboard button fix ────────────────────────────────────
   Ensures action buttons are always clickable.
   1. Remove overflow:hidden from dash-topic (was clipping click areas)
   2. Explicit pointer-events + z-index on all interactive elements
   3. Larger tap targets for tut-btn
   ─────────────────────────────────────────────────────────── */

/* Override the overflow:hidden that was blocking clicks */
.dash-topic {
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

/* Keep border-radius visual without overflow:hidden */
.dash-topic-header {
  border-radius: 9px 9px 0 0;
  overflow: hidden;
}

/* Ensure all anchor/button elements in dashboard are clickable */
.dash-topic a,
.dash-topic button,
.tut-btn,
.btn-action,
.btn-secondary {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 10;
}

/* Bigger tap target for icon buttons */
.tut-btn {
  width: 34px !important;
  height: 34px !important;
  font-size: .85rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Make sure table cells don't block clicks */
.tut-table td {
  position: relative;
  z-index: 2;
}

/* tut-actions cell needs higher z-index */
.tut-actions {
  position: relative;
  z-index: 5;
  display: flex;
  gap: .4rem;
  align-items: center;
}

/* Action buttons in topic header */
.dash-topic-actions {
  position: relative;
  z-index: 10;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Hover feedback so user knows buttons are clickable */
.tut-btn-view:hover  { background: color-mix(in srgb, var(--ac) 12%, transparent) !important; border-color: var(--ac) !important; color: var(--ac) !important; }
.tut-btn-edit:hover  { background: color-mix(in srgb, #60a5fa 12%, transparent) !important;  border-color: #60a5fa !important; color: #60a5fa !important; }
.tut-btn-delete:hover{ background: color-mix(in srgb, #f87171 12%, transparent) !important;  border-color: #f87171 !important; color: #f87171 !important; }

/* Make sure the entire tut-btn area is the link */
.tut-btn i {
  pointer-events: none; /* let click pass through icon to anchor */
}

.btn-action i {
  pointer-events: none;
}

/* ── Dashboard row action buttons ────────────────────────────
   Full text buttons instead of tiny icon-only squares.
   Much easier to click and clearly labelled.
   ─────────────────────────────────────────────────────────── */
.dash-row-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  align-items: center;
}

.dash-row-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .75rem;
  border-radius: 5px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--bd);
  background: var(--sf2);
  color: var(--tx);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  transition: all .15s;
  white-space: nowrap;
}

.dash-row-btn i {
  pointer-events: none;
  font-size: .7rem;
}

.dash-row-btn--view:hover {
  background: color-mix(in srgb, var(--ac) 12%, transparent);
  border-color: var(--ac);
  color: var(--ac);
}

.dash-row-btn--edit:hover {
  background: color-mix(in srgb, #60a5fa 12%, transparent);
  border-color: #60a5fa;
  color: #60a5fa;
}

.dash-row-btn--delete:hover {
  background: color-mix(in srgb, #f87171 12%, transparent);
  border-color: #f87171;
  color: #f87171;
}

/* ── Code block theme fixes ──────────────────────────────────
   Problem 1: inline code color #93c5fd (light blue) is
              invisible on the light theme's --sf2 background.
   Problem 2: pre code text must always be light since the
              code background is always dark (#1e1e2e).
   ─────────────────────────────────────────────────────────── */

/* Inline code — theme-aware colors */
[data-theme="dark"] .tutorial-content code {
  background: #1e2535;
  color: #93c5fd;        /* light blue — readable on dark bg */
  border: 1px solid #2a3a5c;
}

[data-theme="light"] .tutorial-content code {
  background: #1e2535;   /* keep dark bg so light text is readable */
  color: #93c5fd;
  border: 1px solid #2a3a5c;
}

/* pre block — always dark, always light text */
[data-theme="dark"] .tutorial-content pre,
[data-theme="light"] .tutorial-content pre {
  background: #1e1e2e;
  border: 1px solid #2d2d4e;
  color: #e2e8f0;
}

[data-theme="light"] .tutorial-content pre code {
  background: transparent;
  color: #e2e8f0;        /* always light inside the dark pre */
  border: none;
}

/* Blockquote — theme-aware */
[data-theme="light"] .tutorial-content blockquote {
  background: #f0f2f8;
  border-left-color: var(--ac);
  color: #555d7a;
}

/* Table — light theme border fix */
[data-theme="light"] .tutorial-content th {
  background: #e8eaf4;
  color: #1a1d2e;
}

[data-theme="light"] .tutorial-content td {
  color: #1a1d2e;
}

/* ═══════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════
   TUTORIAL SYSTEM — COMPLETE CSS  (single authoritative block)
   Theme: data-theme="dark" / data-theme="light"
   All .tut component styles — no hardcoded dark-only colors.
   Replace everything from line 746 onward in main.css with this.
═══════════════════════════════════════════════════════════════ */

/* ── Theme variables for .tut ─────────────────────────────── */
[data-theme="dark"] {
  --tut-border:       #2a3050;
  --tut-surface:      rgba(255,255,255,0.03);
  --tut-surface-2:    rgba(255,255,255,0.05);
  --tut-text:         #e2e8f0;
  --tut-text-muted:   #8892a4;
  --tut-code-bg:      #0d1117;
  --tut-code-border:  #2a3050;
  --tut-code-text:    #e2e8f0;
}

[data-theme="light"] {
  --tut-border:       #c8cde8;
  --tut-surface:      #f5f6fb;
  --tut-surface-2:    #eceef8;
  --tut-text:         #1a1d2e;
  --tut-text-muted:   #444d6b;
  --tut-code-bg:      #0d1117;
  --tut-code-border:  #2a3050;
  --tut-code-text:    #e2e8f0;
}

/* ── BASE ─────────────────────────────────────────────────── */
.tut {
  font-family: inherit;
  color: var(--tut-text);
  line-height: 1.8;
  font-size: 0.95rem;
}

.tut h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 2.4rem 0 0.8rem;
  border-left: 4px solid #f59e0b;
  padding-left: 14px;
  color: var(--tut-text);
}

.tut h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.8rem 0 0.6rem;
  color: var(--tut-text);
}

.tut p  { margin-bottom: 1rem; color: var(--tut-text); }
.tut ul { margin: 0.5rem 0 1rem 1.4rem; }
.tut ul li { margin-bottom: 6px; color: var(--tut-text); }
.tut strong { color: var(--tut-text); }
.tut em     { color: var(--tut-text); }

/* ── DIVIDER ─────────────────────────────────────────────── */
.tut hr.divider {
  border: none;
  border-top: 1px solid var(--tut-border);
  margin: 2.5rem 0;
}

/* ── SECTION NUMBER BADGE ────────────────────────────────── */
.tut .sec-num {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

[data-theme="dark"] .tut .sec-num {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.45);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245,158,11,0.18), inset 0 0 8px rgba(245,158,11,0.06);
  text-shadow: 0 0 8px rgba(251,191,36,0.4);
}

[data-theme="light"] .tut .sec-num {
  background: #7c3aed;
  border: 1px solid #6d28d9;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(124,58,237,0.30);
}

/* ── CODE BLOCK — always dark bg in both themes ──────────── */
.tut pre {
  background: var(--tut-code-bg);
  border: 1px solid var(--tut-code-border);
  border-left: 3px solid #f59e0b;
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 12px 0 18px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.83rem;
  line-height: 1.85;
  color: var(--tut-code-text);
}

.tut pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

/* Syntax colors — always readable on dark code bg */
.tut pre .kw { color: #60a5fa; }
.tut pre .fn { color: #34d399; }
.tut pre .st { color: #a78bfa; }
.tut pre .cm { color: #4a5568; font-style: italic; }
.tut pre .nm { color: #f59e0b; }
.tut pre .op { color: #f87171; }

/* Inline code term */
.tut .step-val {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.82em;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.22);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

[data-theme="dark"]  .tut .step-val { color: #f59e0b; }
[data-theme="light"] .tut .step-val { color: #92400e; background: rgba(180,115,7,0.10); border-color: rgba(180,115,7,0.25); }

/* ── OUTPUT BLOCK ────────────────────────────────────────── */
.tut .output-block {
  background: rgba(52,211,153,0.04);
  border: 1px solid rgba(52,211,153,0.20);
  border-left: 3px solid #34d399;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: -10px 0 20px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.82rem;
  line-height: 1.8;
  color: #6ee7b7;
  overflow-x: auto;
  white-space: pre;
}

.tut .output-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #34d399;
  margin-bottom: 6px;
  opacity: 0.75;
  white-space: normal;
}

[data-theme="light"] .tut .output-block {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #16a34a;
  color: #15803d;
}

[data-theme="light"] .tut .output-label { color: #15803d; opacity: 0.75; }

/* ── CALLOUT BOXES ───────────────────────────────────────── */
.tut .callout {
  display: flex;
  gap: 14px;
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 18px 0;
  align-items: flex-start;
}

.tut .callout.c-warn    { background: rgba(248,113,113,0.06); border-color: rgba(248,113,113,0.30); }
.tut .callout.c-info    { background: rgba(96,165,250,0.06);  border-color: rgba(96,165,250,0.30);  }
.tut .callout.c-success { background: rgba(52,211,153,0.06);  border-color: rgba(52,211,153,0.30);  }
.tut .callout.c-tip     { background: rgba(167,139,250,0.06); border-color: rgba(167,139,250,0.30); }

.tut .callout-icon  { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.tut .callout-body  { flex: 1; }
.tut .callout-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; }
.tut .callout-text  { font-size: 0.85rem; line-height: 1.7; margin: 0; }

.tut .c-warn    .callout-title { color: #f87171; }
.tut .c-info    .callout-title { color: #60a5fa; }
.tut .c-success .callout-title { color: #34d399; }
.tut .c-tip     .callout-title { color: #f59e0b; }

[data-theme="dark"]  .tut .callout-text            { color: #8892a4; }
[data-theme="dark"]  .tut .c-warn    .callout-text { color: #c9933a; }
[data-theme="dark"]  .tut .c-info    .callout-text { color: #7aaee8; }
[data-theme="dark"]  .tut .c-success .callout-text { color: #5bbf9a; }
[data-theme="dark"]  .tut .c-tip     .callout-text { color: #9585d8; }

[data-theme="light"] .tut .callout-text            { color: #1f2937; }
[data-theme="light"] .tut .c-warn    .callout-text { color: #7c2d12; }
[data-theme="light"] .tut .c-info    .callout-text { color: #1e3a5f; }
[data-theme="light"] .tut .c-success .callout-text { color: #14532d; }
[data-theme="light"] .tut .c-tip     .callout-text { color: #78350f; }

/* ── STORY CARD ──────────────────────────────────────────── */
.tut .story-card {
  border: 1px solid var(--tut-border);
  border-left: 4px solid #a78bfa;
  border-radius: 0 8px 8px 0;
  padding: 20px 22px;
  margin: 18px 0;
  background: var(--tut-surface);
}

.tut .story-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.tut .story-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.tut .story-text {
  font-size: 0.87rem;
  line-height: 1.75;
}

[data-theme="dark"]  .tut .story-label { color: #a78bfa; }
[data-theme="dark"]  .tut .story-title { color: #e2e8f0; }
[data-theme="dark"]  .tut .story-text  { color: #8892a4; }

[data-theme="light"] .tut .story-card  { background: #f0eeff; border-color: #c4b5fd; border-left-color: #7c3aed; }
[data-theme="light"] .tut .story-label { color: #6d28d9; }
[data-theme="light"] .tut .story-title { color: #1e1b4b; font-weight: 800; }
[data-theme="light"] .tut .story-text  { color: #2e2a50; opacity: 1; }

/* ── CHART WRAP ──────────────────────────────────────────── */
.tut .chart-wrap {
  margin: 20px 0;
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--tut-surface);
}

.tut .chart-head {
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f59e0b;
  background: var(--tut-surface-2);
  border-bottom: 1px solid var(--tut-border);
}

.tut .chart-body { padding: 16px; }

.tut .chart-note {
  font-size: 0.78rem;
  color: var(--tut-text-muted);
  margin: 10px 0 0;
  font-style: italic;
  opacity: 1;
}

/* ── LEGEND ROW ──────────────────────────────────────────── */
.tut .leg-row {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--tut-text-muted);
  flex-wrap: wrap;
}

/* ── CHART SUB-LABELS (above dual canvases) ──────────────── */
.tut .chart-sublabel {
  font-size: 11px;
  text-align: center;
  margin: 0 0 6px;
  font-weight: 600;
}
.tut .sublabel-blue  { color: #60a5fa; }
.tut .sublabel-green { color: #34d399; }
.tut .sublabel-red   { color: #f87171; }
.tut .sublabel-amber { color: #f59e0b; }

[data-theme="light"] .tut .sublabel-blue  { color: #1d4ed8; }
[data-theme="light"] .tut .sublabel-green { color: #15803d; }
[data-theme="light"] .tut .sublabel-red   { color: #b91c1c; }
[data-theme="light"] .tut .sublabel-amber { color: #b45309; }

/* ── TABLE ───────────────────────────────────────────────── */
.tut .table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border-radius: 8px;
  border: 1px solid var(--tut-border);
}

.tut table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.tut thead th {
  padding: 10px 14px;
  text-align: left;
  background: var(--tut-surface-2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f59e0b;
  border-bottom: 1px solid var(--tut-border);
}

.tut tbody tr  { border-bottom: 1px solid var(--tut-border); }
.tut tbody tr:last-child { border-bottom: none; }
.tut tbody tr:hover { background: rgba(0,0,0,0.02); }
.tut td { padding: 9px 14px; color: var(--tut-text); vertical-align: top; }

[data-theme="light"] .tut td,
[data-theme="light"] .tut th { color: #1a1d2e; }

.tut .bad   { color: #f87171; font-weight: 700; }
.tut .fixed { color: #34d399; font-weight: 700; }
.tut .warn  { color: #f59e0b; font-weight: 600; }
.tut .muted { color: var(--tut-text-muted); }

[data-theme="light"] .tut .bad   { color: #b91c1c; }
[data-theme="light"] .tut .fixed { color: #065f46; }
[data-theme="light"] .tut .warn  { color: #92400e; }

/* ── BADGE PILLS ─────────────────────────────────────────── */
.tut .rb {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.tut .rb-yes  { background: rgba(52,211,153,0.14);  color: #34d399; border: 1px solid rgba(52,211,153,0.30);  }
.tut .rb-no   { background: rgba(248,113,113,0.14); color: #f87171; border: 1px solid rgba(248,113,113,0.30); }
.tut .rb-warn { background: rgba(245,158,11,0.14);  color: #f59e0b; border: 1px solid rgba(245,158,11,0.30);  }

/* ── STEP BOX ────────────────────────────────────────────── */
.tut .step-box {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
}

.tut .step-box-head {
  padding: 9px 16px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #f59e0b;
  background: var(--tut-surface-2);
  border-bottom: 1px solid var(--tut-border);
}

.tut .step-box-body { padding: 4px 0; }

.tut .step-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tut-border);
}

.tut .step-row:last-child { border-bottom: none; }

.tut .step-tag {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
  flex-shrink: 0;
}

[data-theme="dark"]  .tut .step-tag { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.25); color: #f59e0b; }
[data-theme="light"] .tut .step-tag { background: rgba(79,70,229,0.10);  border: 1px solid rgba(79,70,229,0.30);  color: #3730a3; }

.tut .step-row > span { font-size: 0.85rem; color: var(--tut-text-muted); line-height: 1.6; }

/* ── FORMULA GRID ────────────────────────────────────────── */
.tut .formula-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
}

.tut .formula-card {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 16px 14px;
  background: var(--tut-surface);
  text-align: center;
}

.tut .formula-card .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 8px;
}

[data-theme="light"] .tut .formula-card .label { color: #6d28d9; }

.tut .formula-card .expr {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 8px;
}

.tut .formula-card .desc { font-size: 0.82rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── RULES BOX ───────────────────────────────────────────── */
.tut .rules-box {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 16px 0;
}

.tut .rules-title {
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  border-bottom: 1px solid var(--tut-border);
  letter-spacing: 0.3px;
}

[data-theme="dark"]  .tut .rules-title { color: #fbbf24; background: rgba(245,158,11,0.08); }
[data-theme="light"] .tut .rules-title { color: #6d28d9; background: #f5f3ff; }
[data-theme="light"] .tut .rules-box   { background: #f5f3ff; border-color: #c4b5fd; }

.tut .rule {
  display: flex;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--tut-border);
  align-items: flex-start;
}

.tut .rule:last-child { border-bottom: none; }

[data-theme="light"] .tut .rule { border-bottom-color: #ede9fe; }

.tut .rule-n {
  font-size: 0.75rem;
  font-weight: 800;
  border-radius: 4px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

[data-theme="dark"]  .tut .rule-n { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.40); color: #fbbf24; }
[data-theme="light"] .tut .rule-n { background: #7c3aed; border: 1px solid #6d28d9; color: #ffffff; box-shadow: 0 2px 6px rgba(124,58,237,0.25); }

.tut .rule-t { font-size: 0.88rem; line-height: 1.7; }

[data-theme="dark"]  .tut .rule-t { color: #cbd5e8; }
[data-theme="light"] .tut .rule-t { color: #1e2a45; }

[data-theme="light"] .tut .rule-t strong { color: #1e1b4b; }

/* ── BEFORE / AFTER GRID ─────────────────────────────────── */
.tut .ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.tut .ba-panel { border: 1px solid var(--tut-border); border-radius: 8px; overflow: hidden; }

.tut .ba-head {
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tut .ba-before .ba-head { background: rgba(248,113,113,0.10); color: #f87171; border-bottom: 1px solid rgba(248,113,113,0.25); }
.tut .ba-after  .ba-head { background: rgba(52,211,153,0.10);  color: #34d399; border-bottom: 1px solid rgba(52,211,153,0.25);  }

.tut .ba-panel table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-family: 'JetBrains Mono','Courier New',monospace; }
.tut .ba-panel td, .tut .ba-panel th { padding: 6px 10px; border-bottom: 1px solid var(--tut-border); color: var(--tut-text); }
.tut .ba-panel th { font-size: 0.7rem; font-weight: 700; background: var(--tut-surface-2); }

[data-theme="light"] .tut .ba-panel td,
[data-theme="light"] .tut .ba-panel th { color: #1a1d2e; }

/* ── MEASURE GRID (summary cards) ───────────────────────── */
.tut .measure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 16px 0;
}

.tut .m-card {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 18px 14px;
  background: var(--tut-surface);
  text-align: center;
}

.tut .m-mean   { border-top: 3px solid #60a5fa; }
.tut .m-median { border-top: 3px solid #34d399; }
.tut .m-mode   { border-top: 3px solid #a78bfa; }

.tut .m-sym   { font-size: 1.8rem; margin-bottom: 8px; }
.tut .m-title { font-weight: 700; font-size: 0.95rem; color: var(--tut-text); margin-bottom: 4px; }
.tut .m-val   { font-family: 'JetBrains Mono','Courier New',monospace; font-size: 0.8rem; color: #f59e0b; margin-bottom: 8px; }
.tut .m-desc  { font-size: 0.82rem; color: var(--tut-text-muted); line-height: 1.5; }

.tut .m-mean   .m-sym { color: #60a5fa; }
.tut .m-median .m-sym { color: #34d399; }
.tut .m-mode   .m-sym { color: #a78bfa; }

.tut .m-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; color: var(--tut-text); }
.tut .m-list { list-style: none; padding: 0; margin: 0; }
.tut .m-list li { font-size: 0.82rem; color: var(--tut-text-muted); padding: 2px 0; }
.tut .m-list li::before { content: '→ '; opacity: 0.4; }

/* ── CONFUSION MATRIX ────────────────────────────────────── */
.tut .cm-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 16px 0;
}

.tut .cm-box { border: 1px solid var(--tut-border); border-radius: 8px; overflow: hidden; }

.tut .cm-title {
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tut .cm-box.cm-naive .cm-title { background: rgba(248,113,113,0.10); color: #f87171; border-bottom: 1px solid rgba(248,113,113,0.2); }
.tut .cm-box.cm-good  .cm-title { background: rgba(52,211,153,0.10);  color: #34d399; border-bottom: 1px solid rgba(52,211,153,0.2); }

.tut .cm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 10px;
  background: var(--tut-surface);
}

.tut .cm-cell { padding: 10px 6px; text-align: center; border-radius: 5px; font-family: 'JetBrains Mono','Courier New',monospace; font-size: 0.82rem; }
.tut .cm-tp { background: rgba(52,211,153,0.15); }
.tut .cm-tn { background: rgba(52,211,153,0.08); }
.tut .cm-fp { background: rgba(248,113,113,0.08); }
.tut .cm-fn { background: rgba(248,113,113,0.18); }

.tut .cm-val { font-size: 1.1rem; font-weight: 800; display: block; margin-bottom: 2px; }
.tut .cm-lbl { font-size: 0.68rem; color: var(--tut-text-muted); font-family: inherit; display: block; margin-top: 2px; }
.tut .cm-summary { font-size: 0.75rem; padding: 8px 12px; margin: 0; color: var(--tut-text-muted); border-top: 1px solid var(--tut-border); }

/* ── GENERIC CARD GRIDS ──────────────────────────────────── */
.tut .card-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }
.tut .card-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }

.tut .card-item {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 16px 14px;
  background: var(--tut-surface);
}

.tut .ci-icon  { font-size: 1.4rem; margin-bottom: 7px; }
.tut .ci-title { font-size: 0.86rem; font-weight: 700; margin-bottom: 5px; }
.tut .ci-tag   { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.72rem; color: #f59e0b; margin-bottom: 8px; display: block; }
.tut .ci-desc  { font-size: 0.76rem; color: var(--tut-text-muted); line-height: 1.55; }
.tut .ci-pros  { font-size: 0.75rem; color: #34d399; margin-top: 6px; }
.tut .ci-cons  { font-size: 0.75rem; color: #f87171; }

/* ── IMBALANCE SEVERITY CARDS ────────────────────────────── */
.tut .imb-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }

.tut .imb-card {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 14px 10px;
  background: var(--tut-surface);
  text-align: center;
}

.tut .imb-card.mild   { border-top: 3px solid #34d399; }
.tut .imb-card.mod    { border-top: 3px solid #f59e0b; }
.tut .imb-card.severe { border-top: 3px solid #f87171; }
.tut .imb-card.ext    { border-top: 3px solid #a78bfa; }

.tut .imb-ratio { font-size: 1.1rem; font-weight: 800; font-family: 'JetBrains Mono','Courier New',monospace; margin-bottom: 4px; }
.tut .mild   .imb-ratio { color: #34d399; }
.tut .mod    .imb-ratio { color: #f59e0b; }
.tut .severe .imb-ratio { color: #f87171; }
.tut .ext    .imb-ratio { color: #a78bfa; }
.tut .imb-label { font-size: 0.72rem; font-weight: 700; margin-bottom: 6px; color: var(--tut-text); opacity: 0.75; }
.tut .imb-eg    { font-size: 0.71rem; color: var(--tut-text-muted); line-height: 1.5; }

/* ── STRATEGY CARDS (sc1–sc6) ────────────────────────────── */
.tut .strat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .strat-card {
  border: 1px solid var(--tut-border);
  border-radius: 8px;
  padding: 16px 14px;
  background: var(--tut-surface);
}

.tut .strat-card.sc1 { border-top: 3px solid #60a5fa; }
.tut .strat-card.sc2 { border-top: 3px solid #34d399; }
.tut .strat-card.sc3 { border-top: 3px solid #f59e0b; }
.tut .strat-card.sc4 { border-top: 3px solid #a78bfa; }
.tut .strat-card.sc5 { border-top: 3px solid #f87171; }
.tut .strat-card.sc6 { border-top: 3px solid #fb923c; }

.tut .sc-icon  { font-size: 1.3rem; margin-bottom: 7px; }
.tut .sc-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; }
.tut .strat-card.sc1 .sc-title { color: #60a5fa; }
.tut .strat-card.sc2 .sc-title { color: #34d399; }
.tut .strat-card.sc3 .sc-title { color: #f59e0b; }
.tut .strat-card.sc4 .sc-title { color: #a78bfa; }
.tut .strat-card.sc5 .sc-title { color: #f87171; }
.tut .strat-card.sc6 .sc-title { color: #fb923c; }
.tut .sc-desc { font-size: 0.76rem; color: var(--tut-text-muted); line-height: 1.55; }
.tut .sc-tag  { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.7rem; color: #f59e0b; margin-top: 6px; display: block; }

/* ── FEATURE ENGINEERING CARDS (fc1–fc6) ────────────────── */
.tut .fe-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .fe-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 16px 14px; background: var(--tut-surface); }
.tut .fe-card.fc1 { border-top: 3px solid #60a5fa; }
.tut .fe-card.fc2 { border-top: 3px solid #34d399; }
.tut .fe-card.fc3 { border-top: 3px solid #f59e0b; }
.tut .fe-card.fc4 { border-top: 3px solid #a78bfa; }
.tut .fe-card.fc5 { border-top: 3px solid #f87171; }
.tut .fe-card.fc6 { border-top: 3px solid #fb923c; }

.tut .fc-icon  { font-size: 1.3rem; margin-bottom: 7px; }
.tut .fc-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; }
.tut .fc1 .fc-title { color: #60a5fa; }
.tut .fc2 .fc-title { color: #34d399; }
.tut .fc3 .fc-title { color: #f59e0b; }
.tut .fc4 .fc-title { color: #a78bfa; }
.tut .fc5 .fc-title { color: #f87171; }
.tut .fc6 .fc-title { color: #fb923c; }
.tut .fc-desc { font-size: 0.76rem; color: var(--tut-text-muted); line-height: 1.55; }
.tut .fc-eg   { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.72rem; color: #f59e0b; margin-top: 6px; }

/* ── SCALER MINI CARDS (sm1–sm4) ─────────────────────────── */
.tut .scaler-compare-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 16px 0; }

.tut .sc-mini { border: 1px solid var(--tut-border); border-radius: 8px; padding: 14px 10px; background: var(--tut-surface); text-align: center; }
.tut .sc-mini.sm1 { border-top: 3px solid #60a5fa; }
.tut .sc-mini.sm2 { border-top: 3px solid #34d399; }
.tut .sc-mini.sm3 { border-top: 3px solid #f59e0b; }
.tut .sc-mini.sm4 { border-top: 3px solid #a78bfa; }

.tut .sm-name    { font-size: 0.8rem; font-weight: 700; margin-bottom: 4px; }
.tut .sm1 .sm-name { color: #60a5fa; }
.tut .sm2 .sm-name { color: #34d399; }
.tut .sm3 .sm-name { color: #f59e0b; }
.tut .sm4 .sm-name { color: #a78bfa; }
.tut .sm-formula { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.72rem; color: #f59e0b; margin-bottom: 6px; }
.tut .sm-range   { font-size: 0.7rem; font-weight: 700; margin-bottom: 4px; color: var(--tut-text); }
.tut .sm-use     { font-size: 0.72rem; color: var(--tut-text-muted); line-height: 1.45; }

/* ── ENCODING CARDS (ec1–ec6) ────────────────────────────── */
.tut .enc-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .enc-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 18px 16px; background: var(--tut-surface); text-align: center; }
.tut .enc-card.ec1 { border-top: 3px solid #60a5fa; }
.tut .enc-card.ec2 { border-top: 3px solid #34d399; }
.tut .enc-card.ec3 { border-top: 3px solid #f59e0b; }
.tut .enc-card.ec4 { border-top: 3px solid #a78bfa; }
.tut .enc-card.ec5 { border-top: 3px solid #f87171; }
.tut .enc-card.ec6 { border-top: 3px solid #fb923c; }

.tut .ec-icon { font-size: 1.5rem; margin-bottom: 8px; }
.tut .ec-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 5px; }
.tut .ec1 .ec-name { color: #60a5fa; }
.tut .ec2 .ec-name { color: #34d399; }
.tut .ec3 .ec-name { color: #f59e0b; }
.tut .ec4 .ec-name { color: #a78bfa; }
.tut .ec5 .ec-name { color: #f87171; }
.tut .ec6 .ec-name { color: #fb923c; }
.tut .ec-tag  { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.72rem; color: #f59e0b; margin-bottom: 8px; display: block; }
.tut .ec-desc { font-size: 0.77rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── FEATURE SELECTION METHOD CARDS (mc1–mc3) ────────────── */
.tut .method-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .method-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 18px 14px; background: var(--tut-surface); }
.tut .method-card.mc1 { border-top: 3px solid #60a5fa; }
.tut .method-card.mc2 { border-top: 3px solid #34d399; }
.tut .method-card.mc3 { border-top: 3px solid #f59e0b; }

.tut .mc-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 5px; }
.tut .mc1 .mc-title { color: #60a5fa; }
.tut .mc2 .mc-title { color: #34d399; }
.tut .mc3 .mc-title { color: #f59e0b; }
.tut .mc-tag  { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.72rem; color: #f59e0b; margin-bottom: 8px; display: block; }
.tut .mc-desc { font-size: 0.78rem; color: var(--tut-text-muted); line-height: 1.55; }
.tut .mc-pros { font-size: 0.75rem; color: #34d399; margin-top: 8px; }
.tut .mc-cons { font-size: 0.75rem; color: #f87171; }

/* ── OUTLIER METHOD CARDS (om1–om3) ──────────────────────── */
.tut .outlier-method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .om-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 16px; background: var(--tut-surface); text-align: center; }
.tut .om-card.om1 { border-top: 3px solid #60a5fa; }
.tut .om-card.om2 { border-top: 3px solid #f59e0b; }
.tut .om-card.om3 { border-top: 3px solid #a78bfa; }

.tut .om-icon    { font-size: 1.5rem; margin-bottom: 8px; }
.tut .om-name    { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; }
.tut .om-card.om1 .om-name { color: #60a5fa; }
.tut .om-card.om2 .om-name { color: #f59e0b; }
.tut .om-card.om3 .om-name { color: #a78bfa; }
.tut .om-formula { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.82rem; color: #f59e0b; margin-bottom: 8px; font-weight: 700; }
.tut .om-desc    { font-size: 0.77rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── INCONSISTENCY CARDS (ic1–ic6) ───────────────────────── */
.tut .incon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .incon-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 16px; background: var(--tut-surface); }
.tut .incon-card.ic1 { border-top: 3px solid #60a5fa; }
.tut .incon-card.ic2 { border-top: 3px solid #f59e0b; }
.tut .incon-card.ic3 { border-top: 3px solid #f87171; }
.tut .incon-card.ic4 { border-top: 3px solid #34d399; }
.tut .incon-card.ic5 { border-top: 3px solid #a78bfa; }
.tut .incon-card.ic6 { border-top: 3px solid #fb923c; }

.tut .ic-title { font-size: 0.82rem; font-weight: 700; margin-bottom: 6px; }
.tut .incon-card.ic1 .ic-title { color: #60a5fa; }
.tut .incon-card.ic2 .ic-title { color: #f59e0b; }
.tut .incon-card.ic3 .ic-title { color: #f87171; }
.tut .incon-card.ic4 .ic-title { color: #34d399; }
.tut .incon-card.ic5 .ic-title { color: #a78bfa; }
.tut .incon-card.ic6 .ic-title { color: #fb923c; }
.tut .ic-ex { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.75rem; color: var(--tut-text-muted); line-height: 1.7; }

/* ── ALGO NEED-TO-SCALE CARDS ────────────────────────────── */
.tut .algo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 16px 0; }

.tut .algo-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 14px 12px; background: var(--tut-surface); }
.tut .algo-name { font-size: 0.82rem; font-weight: 700; margin-bottom: 5px; color: var(--tut-text); }
.tut .algo-need { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 6px; }
.tut .need-yes  .algo-need { background: rgba(248,113,113,0.13); color: #f87171; }
.tut .need-no   .algo-need { background: rgba(52,211,153,0.13);  color: #34d399; }
.tut .need-opt  .algo-need { background: rgba(245,158,11,0.13);  color: #f59e0b; }
.tut .algo-why  { font-size: 0.74rem; color: var(--tut-text-muted); line-height: 1.5; }

/* ── MISSING DATA CARDS (mcar/mar/mnar) ──────────────────── */
.tut .miss-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .miss-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 18px 16px; background: var(--tut-surface); text-align: center; }
.tut .miss-card.mcar { border-top: 3px solid #60a5fa; }
.tut .miss-card.mar  { border-top: 3px solid #f59e0b; }
.tut .miss-card.mnar { border-top: 3px solid #f87171; }

.tut .miss-icon { font-size: 1.6rem; margin-bottom: 8px; }
.tut .miss-type { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 6px; font-family: 'JetBrains Mono','Courier New',monospace; }
.tut .mcar .miss-type { color: #60a5fa; }
.tut .mar  .miss-type { color: #f59e0b; }
.tut .mnar .miss-type { color: #f87171; }
.tut .miss-full { font-size: 0.75rem; font-weight: 600; margin-bottom: 8px; color: var(--tut-text); opacity: 0.75; }
.tut .miss-def  { font-size: 0.78rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── SKEW / DISTRIBUTION CARDS ───────────────────────────── */
.tut .skew-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .skew-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 16px 14px; background: var(--tut-surface); text-align: center; }
.tut .skew-card.sk-left  { border-top: 3px solid #60a5fa; }
.tut .skew-card.sk-none  { border-top: 3px solid #34d399; }
.tut .skew-card.sk-right { border-top: 3px solid #f87171; }

.tut .sk-icon  { font-size: 1.5rem; margin-bottom: 8px; }
.tut .sk-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.tut .skew-card.sk-left  .sk-title { color: #60a5fa; }
.tut .skew-card.sk-none  .sk-title { color: #34d399; }
.tut .skew-card.sk-right .sk-title { color: #f87171; }
.tut .sk-desc { font-size: 0.78rem; color: var(--tut-text-muted); line-height: 1.5; }

/* ── DTYPE CARDS ─────────────────────────────────────────── */
.tut .dtype-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0; }

.tut .dtype-card { border: 1px solid var(--tut-border); border-top: 3px solid transparent; border-radius: 8px; padding: 16px; background: var(--tut-surface); }
.tut .dtype-card.d-int   { border-top-color: #60a5fa; }
.tut .dtype-card.d-float { border-top-color: #f59e0b; }
.tut .dtype-card.d-obj   { border-top-color: #a78bfa; }
.tut .dtype-card.d-bool  { border-top-color: #34d399; }
.tut .dtype-card.d-dt    { border-top-color: #f87171; }
.tut .dtype-card.d-cat   { border-top-color: #fb923c; }

.tut .dtype-name { font-family:'JetBrains Mono','Courier New',monospace; font-size: 0.88rem; font-weight: 700; margin-bottom: 5px; }
.tut .dtype-card.d-int   .dtype-name { color: #60a5fa; }
.tut .dtype-card.d-float .dtype-name { color: #f59e0b; }
.tut .dtype-card.d-obj   .dtype-name { color: #a78bfa; }
.tut .dtype-card.d-bool  .dtype-name { color: #34d399; }
.tut .dtype-card.d-dt    .dtype-name { color: #f87171; }
.tut .dtype-card.d-cat   .dtype-name { color: #fb923c; }

.tut .dtype-alias { font-size: 0.72rem; color: var(--tut-text-muted); margin-bottom: 8px; font-family:'JetBrains Mono','Courier New',monospace; }
.tut .dtype-desc  { font-size: 0.8rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── STAT SHOWCASE CARDS ─────────────────────────────────── */
.tut .stat-showcase { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin: 16px 0; }

.tut .stat-card { border: 1px solid var(--tut-border); border-radius: 8px; padding: 20px 18px; background: var(--tut-surface); text-align: center; }
.tut .stat-icon { font-size: 1.5rem; margin-bottom: 8px; }
.tut .stat-name { font-weight: 700; font-size: 0.95rem; color: var(--tut-text); margin-bottom: 4px; }
.tut .stat-sym  { font-family:'JetBrains Mono','Courier New',monospace; font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.tut .stat-card.s-mean   .stat-sym { color: #60a5fa; }
.tut .stat-card.s-median .stat-sym { color: #34d399; }
.tut .stat-card.s-mode   .stat-sym { color: #a78bfa; }
.tut .stat-card.s-var    .stat-sym { color: #f59e0b; }
.tut .stat-card.s-std    .stat-sym { color: #f87171; }
.tut .stat-card.s-iqr    .stat-sym { color: #fb923c; }
.tut .stat-def { font-size: 0.78rem; color: var(--tut-text-muted); line-height: 1.55; }

/* ── PIPELINE STEPS ──────────────────────────────────────── */
.tut .pipeline { display: flex; flex-direction: column; gap: 0; margin: 16px 0; }
.tut .pipe-step { display: flex; gap: 16px; align-items: flex-start; }
.tut .pipe-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 36px; }

.tut .pipe-dot {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono','Courier New',monospace;
  font-size: 0.75rem; font-weight: 700; color: #f59e0b; flex-shrink: 0;
}

.tut .pipe-line { width: 1px; flex: 1; min-height: 24px; background: rgba(245,158,11,0.2); margin: 4px 0; }
.tut .pipe-content { flex: 1; padding: 6px 0 24px; }
.tut .pipe-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 4px; color: #f59e0b; }
.tut .pipe-text  { font-size: 0.85rem; color: var(--tut-text-muted); line-height: 1.6; }

/* ── THEME TOGGLE ICON COLORS ────────────────────────────── */
[data-theme="dark"] .theme-toggle .fa-sun {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.6), 0 0 16px rgba(245,158,11,0.3);
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.5));
}
[data-theme="light"] .theme-toggle .fa-sun  { color: #d97706; }
[data-theme="dark"]  .theme-toggle .fa-moon { color: #a78bfa; text-shadow: 0 0 8px rgba(167,139,250,0.5); }
[data-theme="light"] .theme-toggle .fa-moon { color: #6d28d9; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .tut .ba-grid,
  .tut .miss-grid,
  .tut .cm-wrap,
  .tut .strat-grid,
  .tut .fe-type-grid,
  .tut .incon-grid,
  .tut .outlier-method-grid,
  .tut .enc-type-grid,
  .tut .method-cards,
  .tut .card-grid-3,
  .tut .measure-grid,
  .tut .skew-grid,
  .tut .formula-grid,
  .tut .stat-showcase,
  .tut .dtype-grid     { grid-template-columns: 1fr; }

  .tut .algo-grid,
  .tut .imb-grid,
  .tut .card-grid-4,
  .tut .scaler-compare-grid { grid-template-columns: 1fr 1fr; }

  .tut pre { font-size: 0.76rem; padding: 12px 14px; }
}