/* =====================================================================
   STEAM MIND LEARNING HUB — Unit 2: Classification of Living Beings
   Stylesheet — dark UI shell replicating the reference design.
   ===================================================================== */

:root{
  --bg-app: #0b1120;
  --bg-panel: #0f1730;
  --bg-panel-2: #121b3a;
  --bg-card: #0d1530;
  --border-soft: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);
  --text-main: #e9ecf5;
  --text-dim: #9aa4c0;
  --accent-blue: #3b82f6;
  --accent-blue-dark: #1e3a8a;
  --accent-green: #10b981;
  --accent-green-dark: #065f46;
  --accent-red: #dc2626;
  --accent-red-dark: #7f1d1d;
  --accent-purple: #7c3aed;
  --accent-purple-dark: #4c1d95;
  --accent-orange: #f59e0b;
  --white: #ffffff;
  --radius-lg: 1rem;
  --radius-md: .65rem;
  --radius-sm: .4rem;
  --shadow-1: 0 .5rem 1.5rem rgba(0,0,0,.35);
  --shadow-2: 0 .2rem .6rem rgba(0,0,0,.3);
  --header-h: 6.2rem;
  --toolbar-h: 3.4rem;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0;
  width:100vw; height:100vh;
  overflow:hidden;
  background:var(--bg-app);
  color:var(--text-main);
  font-family:"Segoe UI","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}
img{max-width:100%; display:block;}
button{font-family:inherit;}

/* Devanagari fallback rendering for Nepali text blocks */
.np-text, [lang="ne"]{ font-family:"Noto Sans Devanagari","Mangal","Segoe UI",sans-serif; }

/* ===================== App Shell ===================== */
#app{
  width:100vw; height:100vh;
  display:flex; flex-direction:column;
  background:radial-gradient(120% 120% at 10% 0%, #101a38 0%, #070b18 60%, #05070f 100%);
}

/* ===================== Header ===================== */
header.top-header{
  display:flex; align-items:center; gap:.9rem;
  padding:.7rem 1rem;
  min-height:var(--header-h);
  background:linear-gradient(180deg,#0c1226,#0a0f20);
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.brand-box{
  background:linear-gradient(135deg,#3b3fa0,#2a2f7a);
  border-radius:var(--radius-md);
  padding:.9rem 1.3rem;
  box-shadow:var(--shadow-2);
  flex-shrink:0;
}
.brand-box h1{
  margin:0; font-size:1.35rem; line-height:1.15;
  font-weight:800; letter-spacing:.5px; color:#fff;
  text-transform:uppercase;
}
.header-pill{
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:.9rem 1.4rem;
  font-weight:700;
  font-size:1.05rem;
  color:#dfe3f5;
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-pill.unit-pill{ color:#7fb2ff; flex:1.4 1 auto; }
.header-right{
  display:flex; align-items:center; gap:.6rem;
  flex-shrink:0;
}
.lang-toggle{
  display:flex; align-items:center; gap:0;
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:.25rem; cursor:pointer; user-select:none;
  font-weight:700; font-size:.8rem;
}
.lang-toggle .lang-opt{
  padding:.4rem .7rem; border-radius:.4rem; color:#8890ac;
  transition:background .15s ease, color .15s ease;
}
.lang-toggle .lang-opt.active{ background:#1d2a56; color:#fff; }
.lang-toggle .lang-opt.en-label.active{ color:#34d399; }
.lang-toggle .lang-opt.np-label.active{ color:#7fb2ff; }
.icon-btn{
  width:2.7rem; height:2.7rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-panel-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  cursor:pointer; color:#dfe3f5; font-size:1.1rem;
  flex-shrink:0;
}
.icon-btn:hover{ background:#1a2550; }
.clock-widget{
  width:3.3rem; height:3.3rem; border-radius:50%;
  border:2px solid #3b4a86;
  display:flex; align-items:center; justify-content:center;
  position:relative; flex-shrink:0; background:#0c1330;
}
.clock-widget .hand{
  position:absolute; background:#dfe3f5; border-radius:2px;
  transform-origin:bottom center; bottom:50%; left:50%;
}
.clock-widget .hand.hour{ width:2px; height:.6rem; margin-left:-1px;}
.clock-widget .hand.min{ width:2px; height:.85rem; margin-left:-1px; background:#7fb2ff;}
.clock-widget .clock-num{
  position:absolute; font-size:.5rem; font-weight:800; color:#8fa0d4;
  line-height:1; user-select:none;
}
.clock-widget .n12{ top:.18rem; left:50%; transform:translateX(-50%); }
.clock-widget .n6{ bottom:.18rem; left:50%; transform:translateX(-50%); }
.clock-widget .n3{ right:.2rem; top:50%; transform:translateY(-50%); }
.clock-widget .n9{ left:.2rem; top:50%; transform:translateY(-50%); }

/* ===================== Toolbar ===================== */
.toolbar{
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  min-height:var(--toolbar-h);
  background:#0a0f22;
  border-bottom:1px solid var(--border-soft);
  flex-wrap:wrap;
  flex-shrink:0;
}
.toolbar .label{
  font-size:.68rem; letter-spacing:.08em; color:var(--text-dim);
  font-weight:700; margin-right:.15rem; text-transform:uppercase;
}
.seg-group{ display:flex; gap:.35rem; background:#0d1430; border-radius:var(--radius-md); padding:.25rem; }
.seg-btn{
  display:flex; align-items:center; gap:.35rem;
  padding:.42rem .8rem; border-radius:.5rem;
  background:transparent; border:1px solid transparent;
  color:#c7cbe6; font-size:.85rem; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.seg-btn.active{ background:#122246; border-color:#2f5ec7; color:#8fc0ff; box-shadow:0 0 0 1px #2f5ec7 inset; }
.seg-btn:hover:not(.active){ background:#151f42; }

.pen-size-group{ display:flex; gap:.3rem; }
.pen-size-btn{
  width:2.1rem; height:2.1rem; border-radius:.5rem;
  background:#0d1430; border:1px solid var(--border-soft);
  color:#c7cbe6; font-weight:700; cursor:pointer; font-size:.85rem;
}
.pen-size-btn.active{ background:#122246; border-color:#2f5ec7; color:#8fc0ff; }

.color-group{ display:flex; gap:.35rem; align-items:center; }
.color-swatch{
  width:1.5rem; height:1.5rem; border-radius:50%;
  border:2px solid rgba(255,255,255,.25); cursor:pointer;
}
.color-swatch.active{ border-color:#fff; box-shadow:0 0 0 2px #2f5ec7; }
.color-swatch.custom{
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
  position:relative; overflow:hidden;
}
.color-swatch.custom input[type="color"]{
  position:absolute; inset:-4px; opacity:0; cursor:pointer; width:200%; height:200%;
}

.toolbar .spacer{ flex:1 1 auto; }
.tool-btn{
  display:flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; border-radius:.55rem;
  border:1px solid var(--border-soft);
  background:#131d3d; color:#dfe3f5;
  font-weight:700; font-size:.82rem; cursor:pointer;
  white-space:nowrap;
}
.tool-btn.danger{ background:#3a1414; border-color:#7a2323; color:#ffb4b4; }
.tool-btn.warn{ background:#3a2a0c; border-color:#8a5f10; color:#ffd27f; }
.tool-btn.ok{ background:#0d3a26; border-color:#1f8a5a; color:#7fffc0; }
.tool-btn:hover{ filter:brightness(1.18); }
.tool-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ===================== Body Layout ===================== */
.body-wrap{ flex:1 1 auto; display:flex; min-height:0; }

/* ---- Sidebar ---- */
.sidebar{
  width:min(21vw, 270px);
  min-width:200px;
  flex-shrink:0;
  padding:.9rem;
  display:flex; flex-direction:column; gap:.75rem;
  background:#080c1a;
  border-right:1px solid var(--border-soft);
  overflow-y:auto;
}
.nav-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 1.15rem;
  border-radius:var(--radius-md);
  cursor:pointer; user-select:none;
  font-weight:800; font-size:1rem; color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-2);
  transition:transform .12s ease, filter .12s ease;
}
.nav-card:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.nav-card.active{ outline:2px solid #fff; outline-offset:-2px; }
.nav-card .icon-circle{
  width:2.1rem; height:2.1rem; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; margin-left:.6rem;
}
.nav-card span.txt{ line-height:1.25; }
.nav-card.card-achieve{ background:linear-gradient(135deg,#3d3fa8,#2a2c7d); }
.nav-card.card-contents{ background:linear-gradient(135deg,#0f7a63,#0a5b49); }
.nav-card.card-past{ background:linear-gradient(135deg,#c0293f,#8f1c2d); }
.nav-card.card-practice{ background:linear-gradient(135deg,#7b3fc4,#5a2a95); }

.sidebar-footer{
  margin-top:auto;
  padding-top:.9rem;
  border-top:1px solid var(--border-soft);
  text-align:center;
  font-size:.78rem;
  color:var(--text-dim);
  line-height:1.6;
}
.sidebar-footer .credit{ color:#34d399; font-weight:800; margin-bottom:.15rem; }
.sidebar-footer a{ color:#7fb2ff; text-decoration:none; }

/* ---- Main content ---- */
.main-area{
  flex:1 1 auto; min-width:0;
  padding:1.1rem 1.3rem;
  overflow:hidden;
  display:flex; flex-direction:column;
}
.content-card{
  flex:1 1 auto; min-height:0;
  background:#f7f8fc;
  color:#111528;
  border-radius:1.1rem;
  box-shadow:var(--shadow-1);
  display:flex; flex-direction:column;
  overflow:hidden;
  position:relative;
}
.content-scroll{
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  padding:1.5rem 1.9rem 2.2rem;
  position:relative;
}
.crumb-pill{
  display:inline-block;
  background:#dbe6ff; color:#1d4ed8;
  font-weight:800; font-size:.78rem; letter-spacing:.03em;
  padding:.5rem 1rem; border-radius:.5rem;
  margin-bottom:1rem; text-transform:uppercase;
}
.big-title{
  font-size:1.9rem; font-weight:900; margin:.2rem 0 1rem;
  color:#0c1330; line-height:1.25;
}
hr.rule{ border:none; border-top:1px solid #dfe3f0; margin:1rem 0 1.3rem; }

/* Achievements table */
.wt-table{ width:100%; border-collapse:collapse; border-radius:.6rem; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); margin-bottom:1.4rem;}
.wt-table th{ background:#2d3aa8; color:#fff; text-align:left; padding:.8rem 1rem; font-size:.85rem;}
.wt-table td{ padding:.9rem 1rem; border-bottom:1px solid #eceff7; font-size:.92rem; background:#fff;}
.wt-table td.center{ text-align:center; font-weight:800; color:#2d3aa8;}
.wt-table td.note{ color:#5a6070; font-size:.83rem;}

.objective-box{
  border:1px solid #e2e6f2; border-radius:.8rem;
  background:#fff; padding:1.1rem 1.3rem; margin-bottom:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.objective-box .code{ color:#1d4ed8; font-weight:900; margin-right:.35rem; }
.objective-box .np{ display:block; margin-bottom:.35rem; font-weight:600; }
.objective-box .en{ display:block; color:#3a4160; }

.hero-3d{
  width:100%; height:min(30vh, 230px);
  border-radius:.9rem; overflow:hidden;
  background:radial-gradient(120% 160% at 50% 0%, #16215a 0%, #0a0f24 80%);
  margin-bottom:1.2rem; position:relative;
}
.hero-3d canvas{ width:100%!important; height:100%!important; display:block; }
.hero-3d .hero-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.55rem .9rem;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  color:#fff; font-size:.8rem; font-weight:700; letter-spacing:.02em;
}

/* Notes gallery */
.notes-layout{ display:flex; gap:1.1rem; height:100%; }
.notes-list{
  width:230px; flex-shrink:0;
  overflow-y:auto; padding-right:.3rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.notes-list-item{
  padding:.55rem .7rem; border-radius:.55rem;
  background:#fff; border:1px solid #e5e8f2;
  font-size:.78rem; font-weight:700; color:#2c3350; cursor:pointer;
  display:flex; gap:.5rem; align-items:center;
}
.notes-list-item .num{
  width:1.5rem; height:1.5rem; border-radius:50%;
  background:#eef1fb; color:#2d3aa8; font-size:.72rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.notes-list-item.active{ background:#dbe6ff; border-color:#3b82f6; color:#1d4ed8; }
.notes-list-item:hover:not(.active){ background:#f1f3fb; }

.notes-viewer{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.notes-viewer .slide-title{ font-weight:900; font-size:1.15rem; margin-bottom:.6rem; color:#0c1330; }
.notes-image-wrap{
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border-radius:.7rem; border:1px solid #e5e8f2;
  overflow:hidden; position:relative;
}
.notes-image-wrap img{ max-width:100%; max-height:100%; object-fit:contain; }

/* Question viewer */
.qbar-wrap{ margin-bottom:1rem; }
.qbar-tabs{ display:flex; gap:.4rem; margin-bottom:.7rem; flex-wrap:wrap; }
.qbar-tab{
  padding:.45rem .95rem; border-radius:.55rem; font-weight:700; font-size:.82rem;
  background:#eef1fb; color:#33395a; cursor:pointer; border:1px solid transparent;
}
.qbar-tab.active{ background:#2d3aa8; color:#fff; }
.qnum-nav{ display:flex; gap:.35rem; flex-wrap:wrap; max-height:5.6rem; overflow-y:auto; padding:.2rem; }
.qnum-btn{
  width:2.1rem; height:2.1rem; border-radius:.5rem;
  background:#fff; border:1px solid #dfe3f0; color:#33395a;
  font-weight:700; font-size:.8rem; cursor:pointer; flex-shrink:0;
}
.qnum-btn.active{ background:#2d3aa8; border-color:#2d3aa8; color:#fff; }
.qnum-btn.answered::after{ content:''; }

.question-card{
  background:#fff; border:1px solid #e5e8f2; border-radius:.9rem;
  padding:1.3rem 1.4rem; box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.question-card .qsrc{
  display:inline-block; background:#fff4d6; color:#8a5f10;
  font-size:.72rem; font-weight:800; padding:.2rem .55rem; border-radius:.4rem;
  margin-bottom:.6rem;
}
.question-card .qtext{ font-size:1.02rem; line-height:1.65; color:#161b30; font-weight:600; }
.answer-toggle-btn{
  margin-top:1rem; padding:.6rem 1.1rem; border-radius:.55rem;
  background:#0d3a26; color:#7fffc0; border:none; font-weight:800; cursor:pointer; font-size:.85rem;
}
.answer-box{
  margin-top:1rem; padding:1rem 1.2rem; border-radius:.7rem;
  background:#eafff3; border:1px solid #b7f0d0; color:#0a3d26;
  line-height:1.6; font-size:.96rem; display:none;
}
.answer-box.show{ display:block; }
.answer-box .lbl{ font-weight:900; color:#0a7a4a; display:block; margin-bottom:.3rem;}

.qfig-row{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1rem; }
.qfig{
  background:#f7f8fc; border:1px solid #e5e8f2; border-radius:.6rem;
  padding:.6rem; text-align:center; max-width:180px;
}
.qfig img{ max-width:100%; max-height:130px; object-fit:contain; margin:0 auto; }
.qfig-caption{ font-size:.75rem; font-weight:700; color:#3a4160; margin-top:.4rem; }

.src-missing-note{
  margin-top:.7rem; font-size:.78rem; font-style:italic; color:#8a5f10;
  background:#fff8e6; border:1px solid #f0dca0; border-radius:.4rem;
  padding:.45rem .7rem; display:inline-block;
}

/* MCQ options — justified 2-column grid: i) ... ii) ...
                                            iii) ... iv) ... */
.mcq-options{
  display:grid; grid-template-columns:1fr 1fr;
  gap:.6rem 1.4rem; margin-top:1rem;
}
.mcq-opt{
  display:flex; gap:.5rem; align-items:baseline;
  background:#f7f8fc; border:1px solid #e5e8f2; border-radius:.5rem;
  padding:.55rem .8rem;
}
.opt-key{ font-weight:900; color:#1d4ed8; flex-shrink:0; }
.opt-text{ color:#161b30; line-height:1.5; }
@media (max-width: 640px){
  .mcq-options{ grid-template-columns:1fr; }
}

/* Content tables embedded in question/answer HTML */
.qtext table.content-table,
.answer-box table.content-table{
  width:100%; border-collapse:collapse; margin:.9rem 0;
  border-radius:.5rem; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  font-size:.92rem;
}
.qtext table.content-table th,
.answer-box table.content-table th{
  background:#2d3aa8; color:#fff; text-align:left;
  padding:.55rem .75rem; font-weight:700; font-size:.85rem;
}
.qtext table.content-table td,
.answer-box table.content-table td{
  padding:.55rem .75rem; border-bottom:1px solid #eceff7;
  border-right:1px solid #eceff7; background:#fff; vertical-align:top;
}
.qtext table.content-table td:last-child,
.answer-box table.content-table td:last-child{ border-right:none; }
.qtext table.content-table tr:last-child td,
.answer-box table.content-table tr:last-child td{ border-bottom:none; }
.qtext table.content-table tr:nth-child(even) td,
.answer-box table.content-table tr:nth-child(even) td{ background:#f7f8fc; }
.qtext p, .answer-box p{ margin:0 0 .6rem; }
.qtext p:last-child, .answer-box p:last-child{ margin-bottom:0; }

/* Annotation canvas overlay */
.annot-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:5;
  touch-action:none;
}
.annot-canvas.mode-select{ pointer-events:none; }
.annot-canvas.mode-pen, .annot-canvas.mode-highlight, .annot-canvas.mode-erase{ pointer-events:auto; cursor:crosshair; }
.annot-canvas.mode-move{ pointer-events:auto; cursor:grab; }

/* Footer status bar */
.status-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.5rem 1rem; font-size:.78rem; color:var(--text-dim);
  border-top:1px solid var(--border-soft);
  flex-shrink:0;
}
.status-bar .dot{
  width:.5rem; height:.5rem; border-radius:50%; background:#10b981;
  display:inline-block; margin-right:.4rem; box-shadow:0 0 6px #10b981;
}

/* Scrollbars */
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:#2a355e; border-radius:6px; }
::-webkit-scrollbar-track{ background:transparent; }

/* Responsive: tablets / phones */
@media (max-width: 900px){
  :root{ --header-h: 8.6rem; }
  header.top-header{ flex-wrap:wrap; }
  .brand-box h1{ font-size:1.05rem; }
  .header-pill{ font-size:.85rem; padding:.6rem .8rem; flex-basis:45%; }
  .body-wrap{ flex-direction:column; }
  .sidebar{
    width:100%; flex-direction:row; overflow-x:auto; overflow-y:hidden;
    border-right:none; border-bottom:1px solid var(--border-soft);
  }
  .nav-card{ flex-shrink:0; min-width:150px; font-size:.85rem; padding:.8rem .9rem; }
  .sidebar-footer{ display:none; }
  .notes-layout{ flex-direction:column; }
  .notes-list{ width:100%; flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .toolbar{ overflow-x:auto; flex-wrap:nowrap; }
}
@media (max-width: 560px){
  .brand-box{ padding:.6rem .8rem; }
  .brand-box h1{ font-size:.85rem; }
  .icon-btn, .clock-widget{ width:2.2rem; height:2.2rem; }
  .big-title{ font-size:1.3rem; }
  .main-area{ padding:.6rem; }
  .content-scroll{ padding:1rem; }
}

/* Fullscreen tweak */
#app:fullscreen{ background:var(--bg-app); }