/* ==========================================================================
   Soft Skill Zone — Free Student Tools
   Hub grid + shared tool-page layout (calculator panel + result panel).
   ========================================================================== */

/* ---------------- Hub ---------------- */
.tool-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: var(--t-base);
}
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--border-default); }
.tool-card__icon {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  color: #fff;
  margin-bottom: var(--sp-4);
}
.tool-card__icon svg { width: 23px; height: 23px; }
.tool-card :is(h2,h3) { font-size: var(--fs-md); margin-bottom: .4rem; }
.tool-card p { font-size: var(--fs-sm); flex: 1; margin-bottom: var(--sp-4); }
.tool-card__go { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand); display: flex; align-items: center; gap: .35rem; }

/* ---------------- Tool page shell ---------------- */
.tool-layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) { .tool-layout { grid-template-columns: 1fr 1fr; } }
.tool-layout--wide { grid-template-columns: 1fr; }

.tool-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tool-panel__head {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.tool-panel__body { padding: var(--sp-6); }
@media (max-width: 576px) { .tool-panel__body { padding: var(--sp-5) var(--sp-4); } }

/* Result readouts */
.result-hero {
  text-align: center;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
  margin-bottom: var(--sp-5);
}
.result-hero__label { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: .85; }
.result-hero__value {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-top: .25rem;
  word-break: break-word;
}
.result-hero__sub { font-size: var(--fs-sm); opacity: .9; margin-top: .4rem; }

.result-row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.result-row:last-child { border-bottom: none; }
.result-row dt { color: var(--text-muted); }
.result-row dd { margin: 0; font-weight: var(--fw-semibold); color: var(--text-primary); text-align: right; font-variant-numeric: tabular-nums; }
.result-row--total { border-top: 2px solid var(--border-default); margin-top: var(--sp-2); padding-top: var(--sp-4); }
.result-row--total dd { font-size: var(--fs-md); color: var(--brand); }

/* Segmented control (inclusive/exclusive, calc modes) */
.segment {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.segment button {
  flex: 1;
  min-width: fit-content;
  padding: .55rem .9rem;
  border: none;
  border-radius: var(--r-sm);
  background: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--t-fast);
}
.segment button:hover { color: var(--text-primary); }
.segment button.is-active { background: var(--bg-surface); color: var(--brand); box-shadow: var(--shadow-xs); }

/* Rate chips */
.rate-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------------- GST quiz ---------------- */
.quiz-progress { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); }
.quiz-option {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  text-align: left;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: var(--t-fast);
}
.quiz-option:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.quiz-option__key {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-surface-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}
.quiz-option.is-right { border-color: var(--success); background: var(--success-soft); }
.quiz-option.is-right .quiz-option__key { background: var(--success); color: #fff; }
.quiz-option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.quiz-option.is-wrong .quiz-option__key { background: var(--danger); color: #fff; }
.quiz-explain {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--info-soft);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-top: var(--sp-4);
}

/* ---------------- Invoice / resume printable sheets ---------------- */
.sheet {
  background: #fff;
  color: #0f172a;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  font-size: .85rem;
}
.sheet * { color: inherit; }
.sheet table { width: 100%; border-collapse: collapse; }
.sheet th, .sheet td { padding: 8px 6px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.sheet th { background: #f1f5f9; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sheet .num { text-align: right; font-variant-numeric: tabular-nums; }

.item-row {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
  padding: var(--sp-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
@media (min-width: 640px) { .item-row { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: end; } }

/* ---------------- Typing test ---------------- */
.typing-text {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-md);
  line-height: 2;
  letter-spacing: .01em;
  margin-bottom: var(--sp-5);
  user-select: none;
}
/* Devanagari me matraayein akshar ke upar-neeche lagti hain, isliye aam line
   height me wo aapas me chipak jaati hain aur padhna mushkil ho jaata hai.
   Hindi mode me thoda bada font aur zyada khuli line. */
.typing-text.is-hindi { font-size: 1.15rem; line-height: 2.4; letter-spacing: 0; }
.textarea-ssz.is-hindi { font-size: 1.05rem; line-height: 1.9; }

.typing-text span { border-radius: 3px; padding: 1px 0; }
.typing-text .ok { color: var(--success); }
.typing-text .bad { color: var(--danger-ink); background: var(--danger-soft); text-decoration: underline wavy; }
.typing-text .cur { background: var(--brand-solid); color: #fff; }
.typing-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sp-3); }
.typing-stat {
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
}
.typing-stat__value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-extrabold); line-height: 1; }
.typing-stat__label { font-size: var(--fs-xs); color: var(--text-muted); margin-top: .25rem; }

/* ---------------- QR ---------------- */
.qr-box {
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--border-subtle);
  min-height: 260px;
}
.qr-box canvas { max-width: 100%; height: auto; image-rendering: pixelated; border-radius: 6px; }

/* ---------------- HSN table ---------------- */
.hsn-code { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--brand); }

/* ---------------- Disclaimer ---------------- */
.tool-note {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--sp-6);
}
.tool-note svg { width: 17px; height: 17px; color: var(--warning); flex-shrink: 0; margin-top: 1px; }

@media print {
  .tool-panel__head, .tool-note, .segment, .btn-ssz { display: none !important; }
  .sheet { box-shadow: none; padding: 0; }
}

/* ==========================================================================
   Flashcards — Shortcut Trainer aur Interview Q&A
   ========================================================================== */
.flash-card {
  position: relative;
  min-height: 190px;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-surface-2);
  border: 1.5px solid var(--border-default);
  text-align: center;
  cursor: pointer;
  transition: var(--t-base);
}
.flash-card:hover { border-color: var(--brand); }
/* Palatne par rang badalta hai — nazar turant samajh jaati hai ki ab jawab
   saamne hai. Asli 3D flip jaanbujh kar nahi rakha: mobile par wo dheema
   lagta hai aur padhne me rukawat banta hai. */
.flash-card.is-flipped {
  background: var(--brand-soft);
  border-color: var(--brand);
  cursor: default;
}
.flash-card--qa { min-height: 220px; }

.flash-card__tag {
  position: absolute; top: var(--sp-3); left: var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.flash-card__q {
  font-size: clamp(1.05rem, 3.5vw, 1.3rem);
  font-weight: var(--fw-semibold);
  line-height: 1.5;
  margin: var(--sp-4) 0 var(--sp-3);
  color: var(--text-primary);
}
.flash-card__a {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  font-weight: var(--fw-extrabold);
  color: var(--brand);
  margin: 0;
  word-break: break-word;
}
/* Interview ke jawab lambe hote hain — unhe bade display font me dikhana
   padhne layak nahi rehta. */
.flash-card__a--long {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.75;
  color: var(--text-primary);
  text-align: left;
}
.flash-card__hint { font-size: var(--fs-xs); color: var(--text-muted); margin: 0; }

.flash-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.flash-actions .btn-ssz { width: 100%; justify-content: center; }

/* ==========================================================================
   Excel Formula Practice
   ========================================================================== */
.excel-scenario {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  border-left: 3px solid var(--brand);
  font-size: var(--fs-md);
  line-height: 1.65;
  margin: 0 0 var(--sp-5);
}
.excel-form { display: flex; gap: var(--sp-2); align-items: stretch; }
.excel-form .btn-ssz { flex-shrink: 0; }
/* Formula monospace me hi padhna chahiye — warna I aur l, O aur 0 me farq
   nahi dikhta. iOS par 16px se chhota font zoom karwa deta hai. */
.excel-input {
  flex: 1; min-width: 0;
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 16px;
  letter-spacing: .02em;
}
.excel-answer {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: .88rem;
  padding: .3rem .55rem;
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  margin-top: .35rem;
  word-break: break-all;
}

/* ==========================================================================
   Subject-wise marks (Percentage Calculator ka 4th mode)
   ========================================================================== */
.subj-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.subj-row {
  display: grid;
  grid-template-columns: 1fr 78px 78px 34px;
  gap: var(--sp-2);
  align-items: center;
}
.subj-row .input-ssz { padding: .5rem .6rem; font-size: var(--fs-sm); }
.subj-row--head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  padding: 0 .1rem;
}
.subj-del {
  width: 32px; height: 32px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  transition: var(--t-fast);
}
.subj-del:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
@media (max-width: 400px) {
  .subj-row { grid-template-columns: 1fr 62px 62px 30px; }
  .subj-del { width: 28px; height: 28px; }
}

/* ==========================================================================
   FORMULA EXPLAINER (js/tools/formula-explainer.js)
   ========================================================================== */
.fx-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--card-lift);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.fx-card h3 {
  font-family: var(--font-display);
  font-size: .95rem;
  margin: 0 0 .7rem;
  letter-spacing: -.01em;
}
.fx-card--bad { border-color: rgba(225, 29, 72, .35); }

.fx-summary { margin: 0 0 .75rem; font-size: .95rem; line-height: 1.65; }

/* Formula hamesha ek hi chaudai wale font me — tabhi bracket aur colon
   ginne me aasaani hoti hai. */
.fx-formula, .fx-point {
  font-family: var(--font-mono);
  font-size: .82rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: .6rem .7rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.5;
}
.fx-point { margin-top: .7rem; color: var(--danger); }

.fx-chip {
  font-family: var(--font-mono);
  font-size: .74rem;
  background: var(--brand-soft);
  color: var(--brand-ink);
  border-radius: var(--r-pill);
  padding: .25rem .6rem;
  white-space: nowrap;
}

/* ---- kadam ---- */
.fx-steps { margin: 0; padding-left: 1.35rem; display: grid; gap: .8rem; }
.fx-steps li { font-size: .88rem; line-height: 1.6; }
.fx-steps__code {
  display: block;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--brand-ink);
  background: var(--bg-surface-2);
  border-radius: var(--r-sm);
  padding: .3rem .5rem;
  margin-bottom: .3rem;
  overflow-x: auto;
  white-space: pre;
}
.fx-steps__say { color: var(--text-secondary); }

/* ---- dhyan dein ---- */
.fx-warns { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.fx-warn {
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .86rem; line-height: 1.6;
  padding: .7rem .8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-2);
}
.fx-warn__icon { flex-shrink: 0; display: flex; margin-top: .1rem; }
.fx-warn--danger { border-color: rgba(225,29,72,.3);  background: rgba(225,29,72,.06); }
.fx-warn--warn   { border-color: rgba(180,83,9,.3);   background: rgba(245,158,11,.08); }

/* ---- function cards ---- */
.fx-fn {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: .85rem .95rem;
  background: var(--bg-surface);
  margin-bottom: .7rem;
}
.fx-fn:last-child { margin-bottom: 0; }
.fx-fn__sig {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--brand-ink);
  margin-bottom: .4rem;
  overflow-x: auto;
  white-space: pre;
}
.fx-fn__one { margin: 0 0 .35rem; font-size: .87rem; font-weight: 600; }
.fx-fn__how { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.65; }
.fx-fn__tip {
  margin: .5rem 0 0; font-size: .8rem; line-height: 1.6;
  color: var(--text-secondary);
  border-left: 3px solid var(--warning, #f59e0b);
  padding-left: .6rem;
}

/* ---- poori list ---- */
.fx-group {
  font-family: var(--font-display);
  font-size: .9rem;
  margin: 0 0 .75rem;
  display: flex; align-items: center; gap: .5rem;
}
.fx-group__n {
  font-family: var(--font-sans);
  font-size: .68rem; font-weight: 700;
  background: var(--bg-surface-2); color: var(--text-muted);
  border-radius: var(--r-pill); padding: .15rem .5rem;
}
.fx-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .fx-grid { grid-template-columns: 1fr 1fr; } }

/* Mobile par formula ka input hamesha mono font me — student ko wahi
   dikhna chahiye jo Excel me dikhta hai. */
#fxInput { font-family: var(--font-mono); font-size: .88rem; }

/* ==========================================================================
   EXCEL ERROR DECODER (js/tools/excel-errors.js)
   ========================================================================== */
.xe-item {
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--card-lift);
  margin-bottom: .7rem;
  overflow: hidden;
}
.xe-item.is-open { border-color: var(--brand); }

.xe-head {
  width: 100%;
  display: flex; align-items: center; gap: .8rem;
  padding: .9rem 1rem;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  color: inherit;
  /* 52px se kam ka tap target phone par miss ho jaata hai */
  min-height: 56px;
}
.xe-code {
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: var(--r-sm);
  padding: .3rem .55rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.xe-head__text { flex: 1; min-width: 0; display: block; }
.xe-head__text strong { display: block; font-size: .9rem; }
.xe-head__one {
  display: block; font-size: .8rem; color: var(--text-muted);
  line-height: 1.5; margin-top: .1rem;
}
.xe-head__arrow {
  flex-shrink: 0; display: flex; color: var(--text-muted);
  transition: transform var(--dur-base) var(--ease-out);
}
.xe-head.is-open .xe-head__arrow { transform: rotate(180deg); }

.xe-body { padding: 0 1rem 1.1rem; }

.xe-demo {
  font-family: var(--font-mono);
  font-size: .78rem;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: .6rem .7rem;
  margin: 0 0 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--text-secondary);
  line-height: 1.55;
}

.xe-why { margin: 0; padding-left: 1.3rem; display: grid; gap: 1rem; }
.xe-why li { font-size: .87rem; }
.xe-why__cause { margin: 0 0 .4rem; font-weight: 600; line-height: 1.55; }
.xe-why__fix {
  margin: 0; font-size: .84rem; line-height: 1.65;
  color: var(--text-secondary);
  background: var(--bg-surface-2);
  border-left: 3px solid var(--success, #16a34a);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .55rem .7rem;
}
.xe-why__tag {
  display: inline-block;
  font-size: .66rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--success, #16a34a);
  margin-right: .45rem;
}

/* ==========================================================================
   EXCEL PRACTICE DATA (js/tools/excel-datasets.js)
   ========================================================================== */
.ds-item {
  border: 1px solid var(--card-border);
  border-radius: var(--r-lg);
  background: var(--card-bg);
  box-shadow: var(--card-lift);
  margin-bottom: .7rem;
  overflow: hidden;
}
.ds-item.is-open { border-color: var(--brand); }

.ds-head {
  width: 100%; display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem; min-height: 62px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit;
}
.ds-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.ds-head__text { flex: 1; min-width: 0; }
.ds-head__text strong { display: block; font-size: .93rem; }
.ds-head__desc { display: block; font-size: .8rem; color: var(--text-muted); line-height: 1.5; margin-top: .12rem; }
.ds-head__arrow { flex-shrink: 0; display: flex; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.ds-head.is-open .ds-head__arrow { transform: rotate(180deg); }

.ds-body { padding: 0 1rem 1.1rem; }

.ds-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--text-muted); margin-bottom: .7rem; }
.ds-meta span::before { content: "•"; margin-right: .4rem; opacity: .5; }
.ds-meta span:first-child::before { content: none; }

.ds-learn { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .85rem; }
.ds-tag {
  font-family: var(--font-mono); font-size: .7rem;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: var(--r-pill); padding: .2rem .5rem;
}

.ds-note { font-size: .8rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 .8rem; }

/* Preview me sirf jhalak chahiye — isliye chhota font aur seemit unchai. */
.ds-preview { max-height: 300px; overflow: auto; margin-bottom: 1rem; }
.ds-preview table { font-size: .76rem; }
.ds-preview th, .ds-preview td { white-space: nowrap; }
.ds-blank {
  color: var(--brand); font-style: italic; font-size: .72rem;
  background: var(--brand-soft);
}

.ds-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.ds-tasks summary {
  cursor: pointer; font-size: .85rem; font-weight: 600;
  padding: .5rem 0; color: var(--brand-ink);
}
.ds-tasks ol { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.ds-tasks li { font-size: .85rem; line-height: 1.6; }
.ds-task__what { display: block; }
.ds-task__hint {
  display: inline-block; margin-top: .2rem;
  font-family: var(--font-mono); font-size: .72rem;
  background: var(--bg-surface-2); color: var(--text-muted);
  border-radius: var(--r-sm); padding: .18rem .45rem;
}

/* ==========================================================================
   MINI EXCEL (js/tools/mini-excel.js)
   ========================================================================== */
.mx-wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
/* Zaroori: grid ke bachche ki default min-width "auto" hoti hai, yaani wo
   apne content se chhota ho hi nahi sakta. Andar ka table 750px chauda hai,
   isliye poora column 750px ka ho jaata tha aur 390px ke phone par saara
   page dayein-bayein khiskne lagta tha. min-width:0 se column sikud jaata
   hai aur scroll sirf grid ke andar rehta hai. */
.mx-wrap > * { min-width: 0; }
@media (min-width: 1000px) { .mx-wrap { grid-template-columns: 1fr 340px; align-items: start; } }

/* ---- formula bar ---- */
.mx-bar {
  display: flex; align-items: stretch; gap: .4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: .35rem;
  /* Phone par ye upar chipka rehta hai — scroll karte waqt bhi dikhta rahe */
  position: sticky; top: .5rem; z-index: 5;
  box-shadow: var(--shadow-sm);
}
.mx-name {
  flex-shrink: 0; min-width: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: var(--r-sm);
}
.mx-bar input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--font-mono); font-size: .87rem;
  color: var(--text-primary);
  padding: .45rem .3rem;
}
.mx-out {
  align-self: center; flex-shrink: 0;
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--success, #16a34a);
  background: var(--bg-surface-2);
  border-radius: var(--r-sm); padding: .25rem .5rem;
  max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-out.is-err { color: var(--danger); }

/* ---- quick keys (phone) ---- */
.mx-keys { display: flex; gap: .3rem; overflow-x: auto; padding: .5rem 0; }
.mx-keys button {
  flex-shrink: 0;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  background: var(--bg-surface); color: var(--brand-ink);
  border: 1px solid var(--border-default); border-radius: var(--r-sm);
  /* 40px se chhota button ungli se miss ho jaata hai */
  min-width: 40px; min-height: 40px; padding: 0 .55rem; cursor: pointer;
}
.mx-keys button:active { background: var(--brand-soft); }

/* ---- grid ---- */
.mx-grid { min-width: 0; overflow: auto; max-height: 62vh; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--bg-surface); }
.mx-table { border-collapse: separate; border-spacing: 0; font-size: .8rem; width: max-content; }
.mx-table th, .mx-table td { border-right: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

.mx-corner, .mx-colhead, .mx-rowhead {
  background: var(--bg-surface-2); color: var(--text-muted);
  font-size: .72rem; font-weight: 700; text-align: center;
  position: sticky; z-index: 2;
}
.mx-colhead { top: 0; min-width: 88px; height: 30px; }
.mx-rowhead { left: 0; min-width: 34px; z-index: 3; }
.mx-corner  { top: 0; left: 0; z-index: 4; }
.mx-colhead.is-sel, .mx-rowhead.is-sel { background: var(--brand-soft); color: var(--brand-ink); }

.mx-cell {
  min-width: 88px; max-width: 190px; height: 30px;
  padding: 0 .45rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  outline: none; cursor: cell;
  background: var(--bg-surface);
}
/* Number dayein, text bayein — Excel ka yahi niyam hai, aur isi se student
   ko pata chalta hai ki uska "number" asal me text to nahi ban gaya. */
.mx-cell.is-num { text-align: right; font-variant-numeric: tabular-nums; }
.mx-cell.is-formula { color: var(--brand-ink); }
.mx-cell.is-err { color: var(--danger); font-weight: 600; }
.mx-cell.is-task { background: rgba(245, 158, 11, .10); }
.mx-cell.is-ok   { background: rgba(22, 163, 74, .12); }
.mx-cell.is-sel {
  box-shadow: inset 0 0 0 2px var(--brand);
  background: var(--bg-surface);
}
.mx-cell.is-sel.is-ok { background: rgba(22, 163, 74, .12); }

/* ---- tasks ---- */
.mx-panel {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r-lg); box-shadow: var(--card-lift);
  padding: 1rem;
}
.mx-prog { height: 7px; background: var(--bg-surface-2); border-radius: var(--r-pill); overflow: hidden; margin: .5rem 0 1rem; }
.mx-prog__fill { height: 100%; background: var(--grad-brand); border-radius: var(--r-pill); transition: width .3s var(--ease-out); }

.mx-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.mx-task {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .6rem .65rem; border-radius: var(--r-md);
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  cursor: pointer; font-size: .83rem; line-height: 1.55;
}
.mx-task.is-done { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.07); }
.mx-task__mark { flex-shrink: 0; display: flex; margin-top: .1rem; color: var(--success, #16a34a); }
.mx-ring { width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--border-default); display: block; }
.mx-task__body { flex: 1; min-width: 0; }
.mx-task__say code {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 700;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: 3px; padding: .05rem .3rem;
}
.mx-task__why { display: block; font-size: .76rem; color: var(--warning, #b45309); margin-top: .25rem; }
.mx-task__say { display: block; }
.mx-task__hint {
  /* block rakhna zaroori hai — inline rehne par ye task ke text se chipak
     jaata tha ("...nikaalein.Ishaara dekhein") */
  display: block; margin-top: .4rem;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .76rem; font-weight: 600; color: var(--brand);
  text-decoration: underline; text-underline-offset: 2px;
}
.mx-task__hintbox {
  display: block; margin-top: .3rem;
  font-family: var(--font-mono); font-size: .75rem;
  background: var(--bg-surface-2); color: var(--text-secondary);
  border-radius: var(--r-sm); padding: .35rem .5rem;
  overflow-x: auto; white-space: pre;
}
.mx-done-note {
  margin-top: .9rem; padding: .7rem .8rem; border-radius: var(--r-md);
  background: rgba(22,163,74,.10); border: 1px solid rgba(22,163,74,.3);
  font-size: .84rem; line-height: 1.6;
}
.chip.is-done { border-color: rgba(22,163,74,.45); }

/* ==========================================================================
   Journal Entry Practice — Dr/Cr
   ==========================================================================
   Do dropdown saath-saath: bade parde par ek line me, phone par upar-neeche.
   Dono ka naap barabar rakha hai, warna "Debit" wala chhota dikhta hai aur
   nazar usi par atak jaati hai. */
.je-pair {
  display: grid; gap: var(--sp-3);
  grid-template-columns: 1fr 1fr;
  margin: var(--sp-4) 0;
}
@media (max-width: 575.98px) { .je-pair { grid-template-columns: 1fr; } }

/* Sahi entry — wahi dhaancha jo copy me likha jaata hai:
     Purchases A/c            Dr
        To Cash A/c              Cr           */
.je-answer {
  font-family: ui-monospace, "Courier New", monospace;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.je-line {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .25rem 0;
}
.je-line b { flex: 1; font-family: inherit; }
.je-line span:last-child { font-size: .78rem; opacity: .7; }
.je-to { padding-inline-start: 1.5rem; opacity: .7; }
/* Jo khaata student ne sahi chuna wo hara, jo galat wo laal — do rang me
   turant dikh jaata hai ki galti kis taraf hui. */
.je-line.is-right b { color: var(--success); }
.je-line.is-wrong b { color: var(--danger); }

/* Paanch niyam — panel ke neeche, hamesha saamne. Student inhe padhta hua
   hi practice karta hai; yahi is tool ka asli padhaai wala hissa hai. */
.je-rules {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--brand-soft);
  border-radius: var(--r-lg);
}
.je-rules h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-3); }
.je-rules ul { margin: 0; padding-inline-start: 1.1rem; }
.je-rules li { margin-bottom: .5rem; font-size: .9rem; line-height: 1.6; }
.je-rules li:last-child { margin-bottom: 0; }
/* Galat taraf par student ne kya chuna tha — chhote akshar me saath hi,
   taaki laal rang "ye khaata galat hai" na lage. Galti apni pasand me thi,
   khaate me nahi. */
.je-mine { font-size: .74rem; color: var(--danger); opacity: .95; margin-inline-start: .5rem; font-family: var(--font-body, inherit); }
.je-mine b { font-weight: var(--fw-semibold); font-family: inherit; }