/* ==========================================================================
   JEE Advanced Analysis — page styles on top of base.css.
   Ported 1:1 from 03 Features/03 JEE Analysis/JEE Advanced Analysis/Jee Advanced Analysis.html. Rules are scoped to .jee-analysis (on <main>), the page's
   dark-mode overrides became [data-theme="dark"] and keyframes are prefixed.
   !important is kept: in these pages it decides same-specificity conflicts
   (the .mobile-only / .desktop-only helpers), so dropping it breaks layout.
   ========================================================================== */

.jee-analysis-page { overflow-x: hidden; background: #FFFBF5; }
/* The page's own background (the source's body rule) is painted here: fixed,
   behind everything, and inside <main> so it can read the page's tokens. */
.jee-analysis::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
[data-theme="dark"] .jee-analysis-page { background: #0E0E0E; }
.jee-analysis { padding: 0px; }   /* the Elementor container's padding on live (0 or 10, per page) */
/* Blocksy wrapped every page's content in a container with overflow: clip, so
   anything wider than the page was trimmed rather than scrollable — Connect's
   directory grid is wider than its box, and its tools dropdown bleeds 100vw.
   clip (not hidden) doesn't make <main> a scroll container. */
.jee-analysis { overflow-x: clip; }

/* The element baseline every page sat on in WordPress — measured on live by
   _migration/compare-baseline.py, not guessed. Anything the page doesn't
   style itself falls back to these, exactly as it did on live; the page's own
   rules below override them (same specificity, later in the file). */
/* Blocksy's element layer (its bundle/main.min.css), in its own order and at
   its own selector strength plus the scope — so a page's rules win or lose
   against it exactly as they did on live. Variables resolved to live values;
   sizes measured with _migration/compare-baseline.py. */
.jee-analysis :is(p, h1, h2, h3, h4, h5, h6, em, ol, ul, li, tr, th, td, dl, ins, sub, sup, big, cite, form, small, label, table, figure, button, legend, strike, address, caption, fieldset, blockquote) { margin: 0; padding: 0; border: none; font: inherit; }
.jee-analysis :is(b, strong) { font-weight: bold; }
.jee-analysis small { font-size: 80%; }
.jee-analysis hr { height: 1px; border: none; background-color: #E1E8ED; }
.jee-analysis img { height: auto; max-width: 100%; vertical-align: middle; }
.jee-analysis :is(figure, textarea) { display: block; }
.jee-analysis hr { margin: 0; }
.jee-analysis table { max-width: 100%; }
.jee-analysis :is(code, kbd, samp) { padding: 3px 6px; background: #F2F5F7; border-radius: 3px; }
.jee-analysis :is(table, th, td) { border: 1px solid #E1E8ED; }
.jee-analysis :is(th, td) { padding: 0.7em 1em; }
.jee-analysis th { font-weight: 600; }
.jee-analysis h1 { color: #FF6B4A; font-family: "Bricolage Grotesque", sans-serif; font-size: 40px; }
.jee-analysis h2 { color: #1A1A1A; font-family: "Bricolage Grotesque", sans-serif; font-size: 35px; }
.jee-analysis h3 { color: #1A1A1A; font-family: "Plus Jakarta Sans", sans-serif; font-size: 30px; }
.jee-analysis h4 { color: #FFFBF5; font-size: 25px; }
.jee-analysis h5 { color: #FFFBF5; font-size: 20px; }
.jee-analysis h6 { color: #FFFBF5; font-size: 16px; }
.jee-analysis :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; line-height: 1.5; }
.jee-analysis p { margin-block-end: 1.5em; }
.jee-analysis :is(ul, ol) { padding-inline-start: 2.5em; margin-block-end: 1.5em; }
.jee-analysis :is(h1, h2, h3, h4, h5, h6) { margin-block-end: calc(.3em + 10px); }
.jee-analysis :is(h1, h2, h3, h4, h5, h6):where(:last-child) { margin-block-end: 0; }
.jee-analysis ul:last-child, .jee-analysis ol:last-child, .jee-analysis ul li:last-child, .jee-analysis ol li:last-child, .jee-analysis label:last-child { margin-bottom: 0; }
.jee-analysis a { color: #FF6B4A; }
.jee-analysis select, .jee-analysis textarea, .jee-analysis input:is([type="url"], [type="tel"], [type="text"], [type="time"], [type="date"], [type="datetime"], [type="datetime-local"], [type="email"], [type="number"], [type="search"], [type="password"]) {
  appearance: none; width: 100%; height: 40px; padding: 0 15px; color: #1A1A1A;
  background-color: transparent; border: 1px solid #E1E8ED; border-radius: 3px;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: inherit;
  transition: color .12s, outline .12s, border-color .12s, background .12s; }
.jee-analysis select { padding-inline-end: 25px; }
.jee-analysis textarea { line-height: 1.5; resize: vertical; padding: 12px 15px; }
.jee-analysis label { font-size: 15px; line-height: inherit; cursor: pointer; margin: 0 0 0.5em; }
.jee-analysis blockquote:where(:not(.is-style-plain):not(.has-text-align-center):not(.has-text-align-right)) { padding-inline-start: 1.5em; border-inline-start: 4px solid #FF6B4A; }
.jee-analysis [type="submit"] { appearance: none; height: 40px; padding: 5px 20px; border: 0; border-radius: 3px; color: #fff; background-color: #FF6B4A; font-size: 15px; font-weight: 500; }

.jee-analysis { line-height: 1.65; color: #1A1A1A; color-scheme: normal; }
/* Inside Elementor's content area on live: <hr> without the theme's grey fill. */
.jee-analysis hr { background-color: transparent; }

.jee-analysis * {box-sizing:border-box;margin:0;padding:0}
.jee-analysis {
  --bg:#0C0C0C;--s1:#141414;--s2:#1A1A1A;--s3:#222;
  --b0:#202020;--b1:#2C2C2C;--b2:#383838;
  --t1:#F2F2F2;--t2:#848484;--t3:#484848;
  --orange:#FF6B4A;--peach:#FFD6A8;
  --green:#22C55E;--amber:#F59E0B;--red:#EF4444;--blue:#3B82F6;
  --font-d:'Bricolage Grotesque',sans-serif;
  --font-b:'Plus Jakarta Sans',sans-serif;
  --shadow-base: rgba(0,0,0,0.5);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.2);
  --hover-bg: rgba(255,255,255,0.03);
  --hover-border: rgba(255,255,255,0.08);
  --card-hover-text: #fff;
  --focus-bg: rgba(255,255,255,0.018);
  --vol-bar-base: 255, 255, 255;
  --accent: #FF6B4A;
  --accent-rgb: 255, 107, 74;
  --accent-grad: #FF8A66;
  --accent-text: var(--accent);
}
[data-subject="physics"] .jee-analysis {
  --accent: #3B82F6;
  --accent-rgb: 59, 130, 246;
  --accent-grad: #60A5FA;
}
[data-subject="chemistry"] .jee-analysis {
  --accent: #A855F7;
  --accent-rgb: 168, 85, 247;
  --accent-grad: #C084FC;
}
.light-mode .jee-analysis {
  --bg:#FFFBF5;--s1:#FFFFFF;--s2:#FAF9F6;--s3:#F0EDE5;
  --b0:#EDE6DC;--b1:#E0D9CD;--b2:#D1C9BD;
  --t1:#1A1A1A;--t2:#666666;--t3:#999999;
  --shadow-base: rgba(0,0,0,0.08);
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.04);
  --hover-bg: rgba(0,0,0,0.03);
  --hover-border: rgba(0,0,0,0.08);
  --card-hover-text: #1a1a1a;
  --focus-bg: rgba(0,0,0,0.018);
  --vol-bar-base: 0, 0, 0;
  --accent-text: #E6502E; 
}
.light-mode[data-subject="physics"] .jee-analysis {
  --accent-text: #2563EB;
}
.light-mode[data-subject="chemistry"] .jee-analysis {
  --accent-text: #7E22CE;
}
/* ── BASE LAYOUT ── */
html:has(> body.jee-analysis-page), body.jee-analysis-page { height: 100%; overflow: hidden; }
.jee-analysis {
  color: var(--t1) !important;
  font-family: var(--font-b);
  height: 100%;
  margin: 0;
  overflow: hidden;
  transition: background-color 0.3s, color 0.3s, background-image 0.3s;
}
.jee-analysis::before { background-color: var(--bg) !important; background-image: radial-gradient(circle at top left, rgba(255,255,255,0.03), transparent 50%) !important; }
.light-mode .jee-analysis::before { background-image: radial-gradient(circle at top left, rgba(0,0,0,0.03), transparent 50%) !important; }
/* ── WordPress page/post wrapper neutralisation ──
   Only clear the background on the DIRECT containers of our Custom HTML
   block (.wp-block-html, .entry-content, .page-content).
   We deliberately do NOT touch .wp-block-group, .is-layout-constrained,
   .has-global-padding, main, article etc. because those classes are also
   used by the site header and clearing them breaks it. ── */
.jee-analysis .wp-block-html, .jee-analysis .entry-content, .jee-analysis .page-content, .jee-analysis .post-content {
  background-color: transparent !important;
  background-image: none !important;
}
/* ── SHELL — solid background so WP containers can never bleed through ── */
.jee-analysis .shell {
  display: flex;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background-color: var(--bg) !important;
}
/* ── FLOATING GLASS SIDEBAR ── */
.jee-analysis .sidebar {
  width: 340px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--b0);
  border-radius: 24px;
  margin: 1.25rem 0 1.25rem 1.25rem;
  height: calc(100dvh - 2.5rem);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  transition: all 0.3s ease;
}
.light-mode .jee-analysis .sidebar {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%), var(--s1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
}
.jee-analysis .sidebar::-webkit-scrollbar { display: none; }
.jee-analysis .sb-head {padding:2rem 1.5rem .875rem}
.jee-analysis .eyebrow {display:flex;align-items:center;gap:5px;margin-bottom:.375rem}
.jee-analysis .eyebrow-dot {width:5px;height:5px;border-radius:50%;background:var(--accent); box-shadow: 0 0 8px var(--accent);}
.jee-analysis .eyebrow-text {font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
.jee-analysis .sb-title {font-family:var(--font-d);font-size:34px;font-weight:700;color:var(--t1);line-height:1.1;letter-spacing:-0.03em}
/* Glassy Subject Pills */
.jee-analysis .subj-row {display:flex;gap:6px;padding:0 1.5rem .875rem}
.jee-analysis .stab {
  font-size: 11px; font-weight: 600; padding: 6px 14px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s2);
  border: 1px solid var(--b0); color: var(--t2); cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--font-b);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 2px 4px rgba(0,0,0,0.05);
}
.light-mode .jee-analysis .stab {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.jee-analysis .stab:hover { color: var(--t1); border-color: var(--t3); }
.jee-analysis .stab.am { background: linear-gradient(135deg, #FF8A66, var(--orange)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3), inset 0 1px 1px rgba(255,255,255,0.3); }
.jee-analysis .stab.ap { background: linear-gradient(135deg, #60A5FA, #3B82F6); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), inset 0 1px 1px rgba(255,255,255,0.3); }
.jee-analysis .stab.ac { background: linear-gradient(135deg, #C084FC, #A855F7); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255,255,255,0.3); }
.light-mode .jee-analysis .stab.am { background: linear-gradient(135deg, #FF8A66, var(--orange)); color: #fff; box-shadow: 0 4px 12px rgba(255, 107, 74, 0.4); border-color: transparent; }
.light-mode .jee-analysis .stab.ap { background: linear-gradient(135deg, #60A5FA, #3B82F6); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); border-color: transparent; }
.light-mode .jee-analysis .stab.ac { background: linear-gradient(135deg, #C084FC, #A855F7); color: #fff; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4); border-color: transparent; }
/* Fading Separator */
.jee-analysis .sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--b0) 20%, var(--b0) 80%, transparent);
  margin: 0.5rem 1.5rem;
}
/* target */
.jee-analysis .sb-sec {padding:1.25rem 1.5rem}
.jee-analysis .sec-lbl {font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--t3);font-weight:700;margin-bottom:.875rem}
/* Interactive Target Displays */
.jee-analysis .target-displays { display:flex; align-items:baseline; gap:14px; margin-bottom:0.75rem; }
.jee-analysis .t-disp-item { cursor:pointer; transition:all 0.2s; user-select:none; }
.jee-analysis .t-disp-item.active { font-family:var(--font-d); font-size:42px; font-weight:700; color:var(--accent); line-height:1; }
.jee-analysis .t-disp-item.inactive { font-family:var(--font-d); font-size:18px; font-weight:600; color:var(--t3); }
.jee-analysis .t-disp-item.inactive:hover { color:var(--t2); }
.jee-analysis .t-disp-unit { font-family:var(--font-b); font-size:14px; font-weight:600; margin-left:2px; }
.jee-analysis .t-disp-item.inactive .t-disp-unit { font-size:12px; }
/* Slider & Checkpoints */
.jee-analysis .slider-wrap { position: relative; height: 6px; background: var(--s2); border-radius: 3px; margin: 1.5rem 9px 0.5rem 9px; display: flex; align-items: center; box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); border: 1px solid var(--b0); }
.jee-analysis .slider-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--accent-grad), var(--accent)); border-radius: 3px; z-index: 0; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.jee-analysis .chkpt { position: absolute; width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translateX(-50%); z-index: 1; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 0 6px rgba(255,255,255,0.4); }
.jee-analysis .chkpt.c1 { left: 10%; }
.jee-analysis .chkpt.c2 { left: 50%; }
.jee-analysis .chkpt.c3 { left: 100%; }
.jee-analysis input[type=range] { position: absolute; left: -10px; width: calc(100% + 20px); height: 24px; -webkit-appearance: none; background: transparent; outline: none; cursor: pointer; z-index: 2; margin: 0; }
.jee-analysis input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.6), 0 2px 10px rgba(0,0,0,0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}
.jee-analysis input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 20px rgba(var(--accent-rgb),0.8), 0 4px 12px rgba(0,0,0,0.7);
}
.light-mode .jee-analysis input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 12px rgba(var(--accent-rgb),0.3), 0 2px 8px rgba(0,0,0,0.1);
}
.light-mode .jee-analysis input[type=range]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 16px rgba(var(--accent-rgb),0.4), 0 2px 10px rgba(0,0,0,0.15);
}
.jee-analysis .anchors { position: relative; height: 15px; margin: 0.75rem 9px 0 9px; }
.jee-analysis .anc { position: absolute; font-size: 9.5px; color: var(--t3); cursor: pointer; font-weight: 700; white-space: nowrap; transition: color 0.2s; }
.jee-analysis .anc:hover { color: var(--t2); }
.jee-analysis .anc.a1 { left: 10%; transform: translateX(-50%); text-align: center; }
.jee-analysis .anc.a2 { left: 50%; transform: translateX(-50%); text-align: center; }
.jee-analysis .anc.a3 { right: 0; left: auto; transform: none; text-align: right; }
/* Glass Tiers */
.jee-analysis .tiers {display:flex;gap:5px;margin-top:.875rem}
.jee-analysis .tier {
  flex: 1; padding: 6px; border-radius: 10px; border: 1px solid var(--b1); color: var(--t2);
  font-size: 11px; font-weight: 600; cursor: pointer; text-align: center; transition: all .15s; font-family: var(--font-b);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 2px 4px rgba(0,0,0,0.05);
}
.light-mode .jee-analysis .tier {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.jee-analysis .tier:hover:not(.ton) { border-color: var(--t3); color: var(--t1); }
.jee-analysis .tier.ton {
  background: rgba(var(--accent-rgb),.09); color: var(--accent); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),0.2);
}
.light-mode .jee-analysis .tier.ton {
  background: rgba(var(--accent-rgb), 0.12); color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
/* Glass Strategy & Sorting Modes (Top Bar) */
.jee-analysis .mode-group {
  display: flex; gap: 4px; border-radius: 999px; padding: 4px; border: 1px solid var(--b0);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 2px 4px rgba(0,0,0,0.05);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.light-mode .jee-analysis .mode-group {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s1);
  border: 1px solid var(--b0);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.jee-analysis .mpill {
  font-size: 10.5px; font-weight: 700; padding: 8px 18px; border-radius: 999px; border: none;
  background: transparent; color: var(--t2); cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-b);
}
.jee-analysis .mpill:hover:not(.mon) { color: var(--t1); background: rgba(255,255,255,0.05); }
.light-mode .jee-analysis .mpill:hover:not(.mon) { color: var(--t1); background: rgba(0,0,0,0.05); }
.jee-analysis .mpill.mon {
  background: linear-gradient(135deg, var(--accent-grad), var(--accent)); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3), inset 0 1px 1px rgba(255,255,255,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.jee-analysis .easy-btn {
  font-size: 10.5px; font-weight: 700; padding: 8px 18px; border-radius: 999px; 
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--t2); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-b); white-space: nowrap;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%), var(--s1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.light-mode .jee-analysis .easy-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%), var(--s1);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.03);
  color: var(--t2);
}
.jee-analysis .easy-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--t1); transform: translateY(-1px); }
.light-mode .jee-analysis .easy-btn:hover { border-color: rgba(0,0,0,0.15); color: var(--t1); }
.jee-analysis .easy-btn.eon {
  background: rgba(var(--accent-rgb), 0.1); border-color: rgba(var(--accent-rgb), 0.4); color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 4px 12px rgba(var(--accent-rgb), 0.15);
}
.light-mode .jee-analysis .easy-btn.eon {
  background: rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.15), 0 4px 12px rgba(var(--accent-rgb), 0.1);
}
.jee-analysis .easy-btn svg { stroke: var(--accent); transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0; }
.jee-analysis .easy-btn.eon svg { stroke: currentColor; }
/* Theme Toggle & View Toggles */
.jee-analysis .theme-toggle-btn, .jee-analysis .view-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s1);
  border: 1px solid var(--b0);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 2px 4px rgba(0,0,0,0.05);
}
.light-mode .jee-analysis .theme-toggle-btn, .light-mode .jee-analysis .view-toggle {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.jee-analysis .theme-toggle-btn {
  border-radius: 999px; color: var(--t2); cursor: pointer; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0;
}
.jee-analysis .theme-toggle-btn:hover { color: var(--t1); border-color: var(--t3); }
.jee-analysis .theme-toggle-btn svg { width: 14px; height: 14px; }
.jee-analysis .view-toggle { display:flex; gap:3px; border-radius:999px; padding:3px; }
.jee-analysis .vbtn { font-size:10px; font-weight:600; padding:5px 12px; border-radius:999px; border:none; background:transparent; color:var(--t2); cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:4px; font-family:var(--font-b); }
.jee-analysis .vbtn svg { width:13px; height:13px; }
.jee-analysis .vbtn.von {
  background: linear-gradient(135deg, var(--accent-grad), var(--accent)); color: #fff;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3), inset 0 1px 1px rgba(255,255,255,0.2);
}
/* volatility & Years Group */
.jee-analysis .vol-item {margin-bottom:1rem}
.jee-analysis .vol-row {display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.jee-analysis .vol-name {font-size:11px;color:var(--t1);font-weight:500;max-width:152px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jee-analysis .vol-qs {font-size:11px;color:var(--accent);font-weight:700;font-family:var(--font-d)}
/* Glassy Year Buttons */
.jee-analysis .yr-group {display:flex;gap:3px}
.jee-analysis .yr-btn {
  font-size: 9.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--b1);
  color: var(--t2); cursor: pointer; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: var(--font-b);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 2px 4px rgba(0,0,0,0.05);
}
.light-mode .jee-analysis .yr-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.jee-analysis .yr-btn:hover:not(.yon) { color: var(--t1); border-color: var(--t3); }
.jee-analysis .yr-btn.yon {
  background: linear-gradient(135deg, var(--accent-grad), var(--accent)); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3), inset 0 1px 1px rgba(255,255,255,0.2);
}
.light-mode .jee-analysis .yr-btn.yon {
  background: linear-gradient(135deg, var(--accent-grad), var(--accent)); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
}
/* Glassy Info Boxes */
.jee-analysis .diff-legend-box, .jee-analysis .howbox {
  margin: 0 1.5rem 1.25rem; padding: .875rem 1rem; border: 1px solid var(--b0); border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.05);
}
.light-mode .jee-analysis .diff-legend-box, .light-mode .jee-analysis .howbox {
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.02);
}
.jee-analysis .dl-title {font-size:9px;text-transform:uppercase;letter-spacing:.11em;color:var(--t3);font-weight:700;margin-bottom:.75rem}
.jee-analysis .dl-row {display:flex;align-items:center;gap:.625rem;margin-bottom:.5rem}
.jee-analysis .dl-row:last-child {margin-bottom:0}
.jee-analysis .dl-bar {width:28px;height:5px;border-radius:3px;flex-shrink:0}
.jee-analysis .dl-text {font-size:11px;color:var(--t2);font-weight:500;line-height:1.45}
.jee-analysis .dl-text strong {color:var(--t1);font-weight:600}
.jee-analysis .howbox {margin-bottom: 1.5rem;}
.jee-analysis .how-lbl {font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:700;margin-bottom:.625rem}
.jee-analysis .how-item {display:flex;gap:.5rem;margin-bottom:.5rem;align-items:flex-start}
.jee-analysis .how-item:last-child {margin-bottom:0}
.jee-analysis .how-dot {width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}
.jee-analysis .how-text {font-size:10.5px;color:var(--t2);line-height:1.55}
.jee-analysis .how-text strong {color:var(--t1);font-weight:600}
.jee-analysis .click-instruction { font-size: 9.5px; color: var(--blue); font-style: italic; margin-top: 10px; text-align: center; font-weight: 600; }
/* ── MAIN ── */
.jee-analysis .main {
  flex:1;
  min-width:0;
  padding:1.25rem 1.75rem 1.25rem 1.5rem; /* Adjusted for floating sidebar */
  display:flex;
  flex-direction:column;
  height: 100%; 
  overflow-y:auto; 
  overflow-x:hidden; 
  position:relative;
}
/* Updated Top Bar for Desktop */
.jee-analysis .top-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:1.375rem;
  flex-wrap:wrap; 
  z-index:5;
}
.jee-analysis .top-bar-left {display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.jee-analysis .top-bar-actions {display:flex; gap:8px; align-items: center; flex-shrink:0;}
/* ── MOBILE MODAL BASE (Hidden on Desktop) ── */
.jee-analysis .mob-info-btn-text, .jee-analysis .mob-overlay, .jee-analysis .mob-close-handle, .jee-analysis .mob-weightage-btn { display: none; }
.jee-analysis .mobile-view-toggle { display: none; }
/* ── FOCUS STRIP (Hero Section) ── */
.jee-analysis .focus-section {
  position: relative;
  /* Solid dark base first, then accent tint on top — WP backgrounds can never bleed through */
  background: var(--s1) !important;                                          /* fallback */
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.04) 0%,
    rgba(var(--accent-rgb), 0.08) 100%), var(--s1) !important;               /* layered solid */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid rgba(var(--accent-rgb),0.15) !important;
  border-radius:26px;
  padding:1.75rem 2rem;
  margin-bottom:2rem;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  overflow: hidden;
}
.jee-analysis .focus-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.07), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.light-mode .jee-analysis .focus-section {
  background: var(--s1) !important;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.05) 0%,
    rgba(var(--accent-rgb), 0.10) 100%), var(--s1) !important;
  border-color: rgba(var(--accent-rgb), 0.20) !important;
}
.jee-analysis .focus-header {position:relative; z-index:1; display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem; flex-wrap: wrap; gap: 12px;}
.jee-analysis .focus-title {font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-text); text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.2);}
.jee-analysis .focus-sub {font-size:12px;color:var(--t1);margin-top:4px;font-weight:600;}
.jee-analysis .focus-header-right { display: flex; align-items: center; gap: 14px; }
.jee-analysis .focus-range-text { text-align: right; }
.jee-analysis .focus-range-lbl { font-size: 10px; color: var(--accent-text); opacity: 0.9; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 2px; }
.jee-analysis .focus-range-val { font-family: var(--font-d); font-size: 18px; font-weight: 700; color: var(--accent-text); line-height: 1; }
.jee-analysis .opt-badge {font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 14px;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-text);border:1px solid rgba(var(--accent-rgb),.3); white-space: nowrap; box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.1);}
.jee-analysis .focus-grid {position:relative; z-index:1; display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.jee-analysis .focus-card {
  display:flex;align-items:center;gap:12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s1);
  padding:1rem 1.25rem; border-radius:20px; border:1px solid var(--b0);
  cursor:pointer; transition:all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.1);
}
.light-mode .jee-analysis .focus-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 4px 12px rgba(0,0,0,0.03);
}
.jee-analysis .focus-card:hover {
  border-color:rgba(var(--accent-rgb),0.4);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
.jee-analysis .focus-num {
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent-grad), var(--accent));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-d);font-weight:700;font-size:14px;
  flex-shrink:0;border:none;box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}
.jee-analysis .focus-name {font-size:13px;font-weight:600;color:var(--t1);line-height:1.3;flex:1;min-width:0}
.jee-analysis .focus-marks-row {display:flex;align-items:center;gap:6px;margin-top:4px}
.jee-analysis .focus-exp {font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3)}
.jee-analysis .focus-val {font-size:12px;font-weight:700;color:var(--accent);font-family:var(--font-d)}
.jee-analysis .focus-chevron {color:var(--b1);flex-shrink:0;transition:transform 0.2s,color 0.2s}
.jee-analysis .focus-card:hover .focus-chevron {transform:translateX(3px);color:var(--t2)}
/* ── CARDS (Bento Style) - Premium Glass Updates ── */
.jee-analysis .cards-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.jee-analysis .chap-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%), var(--s1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--b0);
  border-radius: 24px;
  padding: 1.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05); 
  overflow: hidden;
}
.jee-analysis .chap-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
  transition: all 0.5s ease;
}
/* Ensure inner content sits above pseudo backgrounds */
.jee-analysis .card-top, .jee-analysis .bento-body, .jee-analysis .target-later-ribbon {
  position: relative;
  z-index: 1;
}
.jee-analysis .chap-card.unselected {
  border: 1px dashed rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.01);
  box-shadow: none;
  backdrop-filter: none;
}
.jee-analysis .chap-card.unselected .card-top, .jee-analysis .chap-card.unselected .bento-body {
  opacity: 0.35;
  filter: saturate(0.3);
  transition: all 0.4s ease;
}
.jee-analysis .chap-card:not(.unselected):hover, .jee-analysis .chap-card.unselected:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(var(--accent-rgb), 0.01) 100%), var(--s2);
  box-shadow: 0 20px 48px rgba(0,0,0,0.2), 0 0 20px rgba(var(--accent-rgb), 0.1), inset 0 1px 0 rgba(255,255,255,0.05);
}
.jee-analysis .chap-card:not(.unselected):hover::before, .jee-analysis .chap-card.unselected:hover::before {
  background: radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.12), transparent 60%);
}
.jee-analysis .chap-card.unselected:hover .card-top, .jee-analysis .chap-card.unselected:hover .bento-body {
  opacity: 0.8;
  filter: saturate(0.8);
}
.jee-analysis .chap-card.easy-glow {
  border-color: rgba(245,158,11,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 0 20px rgba(245,158,11,.08), inset 0 1px 0 rgba(255,255,255,0.05);
}
.jee-analysis .chap-card.easy-glow:not(.unselected):hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.2), 0 0 24px rgba(245,158,11,.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
/* Light mode overrides for cards */
.light-mode .jee-analysis .chap-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%), var(--s1);
  border: 1px solid var(--b0); 
  box-shadow: 0 8px 32px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.light-mode .jee-analysis .chap-card::before {
  background: radial-gradient(circle at top right, rgba(255,255,255,1), transparent 60%);
}
.light-mode .jee-analysis .chap-card.unselected {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
  box-shadow: none;
}
.light-mode .jee-analysis .chap-card:not(.unselected):hover, .light-mode .jee-analysis .chap-card.unselected:hover {
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.02) 0%, rgba(var(--accent-rgb), 0.06) 100%), var(--s2);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 20px 48px rgba(0,0,0,0.08), 0 0 20px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255,255,255,0.6);
}
.jee-analysis .target-later-ribbon {
  position: absolute;
  top: -1.5px;
  right: -1.5px;
  width: 85px;
  height: 85px;
  overflow: hidden;
  border-radius: 0 24px 0 0;
  pointer-events: none;
  z-index: 10;
}
.jee-analysis .ribbon-content {
  position: absolute;
  top: 18px;
  right: -28px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--accent-grad), var(--accent));
  color: #fff !important;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 30px;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.6);
  text-align: center;
  font-family: var(--font-b);
}
.jee-analysis .card-top {display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:1.125rem}
.jee-analysis .card-name {font-family:var(--font-d);font-size:16px;font-weight:600;color:var(--t1);line-height:1.3;flex:1;transition:color 0.3s;}
.jee-analysis .chap-card:not(.unselected):hover .card-name {color:var(--card-hover-text);}
.jee-analysis .verdict-badge {font-size:8px;font-weight:700;padding:4px 10px;border-radius:8px;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;white-space:nowrap}
.jee-analysis .vb-must {background:rgba(34,197,94,.1);color:#4ADE80;border:1px solid rgba(34,197,94,.18)}
.jee-analysis .vb-val {background:rgba(59,130,246,.08);color:#60A5FA;border:1px solid rgba(59,130,246,.18)}
.jee-analysis .vb-low {background:rgba(70,70,70,.18);color:var(--t3);border:1px solid var(--b0)}
.jee-analysis .bento-body {display:flex;gap:18px;align-items:center}
/* Donut Chart Block */
.jee-analysis .donut-container {
  width:100px;height:100px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15)); /* Premium 3D float */
}
.light-mode .jee-analysis .donut-container {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.06));
}
.jee-analysis .donut-ring {
  width:100%;height:100%;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:filter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jee-analysis .donut-hole {
  width:74px;height:74px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--s1) 0%, var(--s2) 100%);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  transition:all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(255,255,255,0.08); /* Premium glossy indent */
}
.light-mode .jee-analysis .donut-hole {
  background: linear-gradient(135deg, #fff 0%, var(--s2) 100%);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.05), 0 1px 2px rgba(255,255,255,1);
}
.jee-analysis .chap-card:not(.unselected):hover .donut-hole, .jee-analysis .chap-card.unselected:hover .donut-hole {
  width:60px;height:60px;
}
.jee-analysis .chap-card:not(.unselected):hover .donut-ring, .jee-analysis .chap-card.unselected:hover .donut-ring {
  filter:drop-shadow(0 0 12px var(--glow-color, rgba(255,255,255,0.1)));
}
.jee-analysis .donut-val {font-family:var(--font-d);font-weight:700;font-size:18px;color:var(--accent);line-height:1;transition:all 0.3s;}
.jee-analysis .chap-card:not(.unselected):hover .donut-val {font-size:15px;}
.jee-analysis .donut-lbl {font-size:8px;font-weight:700;color:var(--t3);margin-top:2px;letter-spacing:.06em;transition:color 0.3s;}
.jee-analysis .chap-card:not(.unselected):hover .donut-lbl {color:var(--t2);}
/* Stats Blocks */
.jee-analysis .bento-stats {flex:1;display:flex;flex-direction:row;gap:10px}
.jee-analysis .bento-box {
  flex: 1; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s2);
  border: 1px solid var(--b0);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px 10px;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.03), 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}
.jee-analysis .bento-box::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
  border-radius: inherit; pointer-events: none;
  transition: opacity 0.4s ease;
}
.light-mode .jee-analysis .bento-box {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 100%), var(--s2);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 2px 4px rgba(0,0,0,0.02);
}
.light-mode .jee-analysis .bento-box::after {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.04);
}
.jee-analysis .chap-card:not(.unselected):hover .bento-box, .jee-analysis .chap-card.unselected:hover .bento-box {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%), var(--s2);
  border-color: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.08), 0 6px 12px rgba(0,0,0,0.15);
}
.light-mode .jee-analysis .chap-card:not(.unselected):hover .bento-box, .light-mode .jee-analysis .chap-card.unselected:hover .bento-box {
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.4) 100%), var(--s2);
  border-color: rgba(0,0,0,0.05);
  box-shadow: inset 0 1px 1px rgba(255,255,255,1), 0 6px 12px rgba(0,0,0,0.05);
}
.jee-analysis .chap-card:not(.unselected):hover .bento-box::after, .jee-analysis .chap-card.unselected:hover .bento-box::after {
  opacity: 0;
}
.jee-analysis .bento-lbl {position:relative; z-index:1; font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:var(--t3);font-weight:700;margin-bottom:3px;transition:all 0.3s;}
.jee-analysis .chap-card:not(.unselected):hover .bento-lbl {color:var(--t2);}
.jee-analysis .bento-val {position:relative; z-index:1; font-family:var(--font-d);font-size:15px;font-weight:700;line-height:1.2;transition:all 0.3s;text-align:center;}
.jee-analysis .chap-card:not(.unselected):hover .bento-val {color:var(--card-hover-text) !important;}
/* Risk & Impact Themes updated for glassy feel */
.jee-analysis .risk-safe.bento-box { background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.01) 100%), var(--s2); border-color: rgba(34,197,94,0.2); }
.jee-analysis .risk-safe .bento-val {color:#4ADE80}
.jee-analysis .risk-med.bento-box { background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(245,158,11,0.01) 100%), var(--s2); border-color: rgba(245,158,11,0.2); }
.jee-analysis .risk-med .bento-val {color:#FCD34D}
.jee-analysis .risk-high.bento-box { background: linear-gradient(135deg, rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.01) 100%), var(--s2); border-color: rgba(239,68,68,0.2); }
.jee-analysis .risk-high .bento-val {color:#F87171}
.jee-analysis .marks-stat.bento-box { background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, rgba(59,130,246,0.01) 100%), var(--s2); border-color: rgba(59,130,246,0.2); }
.jee-analysis .marks-stat .bento-val {color:#60A5FA}
/* ── TABLE ── */
.jee-analysis .table-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%), var(--s1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:1px solid var(--b0);
  border-top-color: rgba(255,255,255,0.08);
  border-radius:24px;
  overflow-x:auto; 
  margin-bottom: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.light-mode .jee-analysis .table-wrap {
  background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%), var(--s1);
  border-top-color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.04);
}
/* High-specificity table resets to prevent WordPress theme leaks in advanced analysis */
.jee-analysis .table-wrap table, .jee-analysis .table-wrap table tr, .jee-analysis .table-wrap table th, .jee-analysis .table-wrap table td {
  border: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.jee-analysis .table-wrap table thead th {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.light-mode .jee-analysis .table-wrap table thead th {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.jee-analysis .table-wrap table tbody tr {
  border-bottom: 1px solid var(--b0) !important;
}
.jee-analysis .table-wrap table tbody tr:last-child {
  border-bottom: none !important;
}
.jee-analysis table {width:100%;border-collapse:collapse;font-size:12px; min-width: 600px;}
.jee-analysis thead {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
}
.jee-analysis th.sortable { cursor: pointer; transition: background 0.2s; user-select: none; }
.jee-analysis th.sortable:hover { background: rgba(255,255,255,0.05); }
.light-mode .jee-analysis th.sortable:hover { background: rgba(0,0,0,0.05); }
.jee-analysis thead th {
  padding:.75rem 1.125rem;text-align:left;
  font-size:9px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--t3);font-weight:700;
  border-bottom:1px solid rgba(255,255,255,0.05); white-space:nowrap;
  font-family:var(--font-b)
}
.light-mode .jee-analysis thead th { border-bottom: 1px solid rgba(0,0,0,0.05); }
.jee-analysis th.r {text-align:right}
.jee-analysis tbody tr {
  border-bottom:1px solid var(--b0); 
  cursor: pointer; 
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.jee-analysis tbody tr:last-child {border-bottom:none}
.jee-analysis tbody tr.unselected {opacity:.4;filter:saturate(0.5);}
.jee-analysis tbody tr:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(var(--accent-rgb), 0.02) 100%), var(--s2);
  transform: scale(1.002);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  position: relative;
  z-index: 10;
  border-color: transparent;
}
.light-mode .jee-analysis tbody tr:hover {
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.04) 0%, rgba(var(--accent-rgb), 0.01) 100%), var(--s2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.jee-analysis td {padding:.75rem 1.125rem;vertical-align:middle}
.jee-analysis td.r {text-align:right}
.jee-analysis .tbl-name {font-family:var(--font-d);font-weight:600;color:var(--t1);font-size:13px;margin-bottom:3px}
.jee-analysis .tbl-qs {font-family:var(--font-d);font-weight:700;color:var(--accent);font-size:13px}
.jee-analysis .tbl-blend {height:5px;width:96px;border-radius:3px;overflow:hidden;display:flex;margin-bottom:4px}
.jee-analysis .seg-e {background:var(--green);height:100%}
.jee-analysis .seg-m {background:var(--amber);height:100%}
.jee-analysis .seg-h {background:var(--red);height:100%}
.jee-analysis .tbl-pcts {font-size:9px;display:flex;gap:7px;font-weight:600}
.jee-analysis .pe {color:#4ADE80}
.jee-analysis .pm {color:#FCD34D}
.jee-analysis .ph {color:#F87171}
.jee-analysis .tbl-marks {font-family:var(--font-d);font-size:14px;font-weight:700;color:#60A5FA}
/* ── FOOTER ── */
.jee-analysis .disclaimer-footer {
  margin-top: auto;
  padding: 1.5rem;
  background: var(--s2);
  border: 1px solid var(--b0);
  border-radius: 16px;
  font-size: 10px;
  color: var(--t2);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.5rem;
}
.jee-analysis .disclaimer-footer strong { color: var(--t1); font-weight: 700; }
/* Adjusted Breakpoints for proper responsiveness */
@media(max-width:1400px) {
  .jee-analysis .cards-grid {grid-template-columns:repeat(2,1fr)}
  /* iPad landscape gets 2 cols for cards */
  .jee-analysis .focus-grid {grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1150px) {
  .jee-analysis .focus-grid {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px) {
  .jee-analysis .sidebar {width: 260px;}
  .jee-analysis .main {padding: 1.25rem;}
  .jee-analysis .cards-grid {gap: 16px;}
  .jee-analysis .focus-grid {gap: 8px;}
  .jee-analysis .chap-card {padding: 1.25rem;}
  .jee-analysis .bento-body {gap: 14px;}
  .jee-analysis .donut-container {width: 86px; height: 86px;}
  .jee-analysis .donut-hole {width: 64px; height: 64px;}
  .jee-analysis .donut-val {font-size: 16px;}
  .jee-analysis .chap-card:not(.unselected):hover .donut-hole, .jee-analysis .chap-card.unselected:hover .donut-hole {width: 52px; height: 52px;}
  .jee-analysis .bento-box {padding: 10px 8px;}
}
/* Mobile specific overrides */
@media(max-width:768px) {
  html:has(> body.jee-analysis-page), body.jee-analysis-page { height: auto; overflow: visible; min-height: 100vh; }
  .jee-analysis {
    height: auto;
    overflow: visible;
    min-height: 100vh;
  }
  .jee-analysis .shell { 
    flex-direction: column; 
    height: auto;
    overflow: visible;
  }
  .jee-analysis .sidebar {
    display: flex;
    width: auto;
    height: auto;
    position: relative;
    margin: 1rem 1rem 0;
    border-radius: 24px;
    padding-bottom: 1rem;
    top: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .jee-analysis .sb-head { 
    padding: 2.5rem 1.5rem 1.5rem; 
    justify-content: center !important; 
  }
  .jee-analysis .sb-head > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .jee-analysis .subj-row {
    justify-content: center;
    padding-bottom: 1rem;
  }
  /* Hide items in mobile sidebar card by default, we'll show them in modal */
  .jee-analysis .sidebar > .sep, .jee-analysis #volatilitySection, .jee-analysis #readmeModal {
    display: none;
  }
  /* ── MOBILE BOTTOM SHEET MODALS ── */
  .jee-analysis .mob-weightage-btn {
    display: inline-block;
    background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--accent); cursor: pointer; padding: 4px 10px; border-radius: 999px;
    font-family: var(--font-b); font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  }
  .jee-analysis .mob-info-btn-text {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.2); 
    color: var(--accent); font-family: var(--font-b); font-size: 11.5px; font-weight: 700; 
    text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; padding: 6px 12px; border-radius: 999px;
  }
  .jee-analysis .mob-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 9998; backdrop-filter: blur(4px);
  }
  .show-breakdown .jee-analysis .mob-overlay, .show-readme .jee-analysis .mob-overlay { display: block; }
  .jee-analysis .mob-close-handle {
    display: block; width: 36px; height: 4px; border-radius: 2px;
    background: var(--b2); margin: 0 auto 1.5rem auto; cursor: pointer;
  }
  .show-breakdown .jee-analysis #volatilitySection, .show-readme .jee-analysis #readmeModal {
    display: block !important; position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--bg); z-index: 9999; padding: 1.5rem 1.5rem 2.5rem;
    border-radius: 24px 24px 0 0; border: 1px solid var(--b0); border-bottom: none;
    max-height: 85vh; overflow-y: auto;
    animation: je-slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  }
  .show-readme .jee-analysis #readmeModal .diff-legend-box, .show-readme .jee-analysis #readmeModal .howbox {
    margin-left: 0; margin-right: 0; margin-bottom: 1.25rem;
  }
  .show-readme .jee-analysis #readmeModal .howbox:last-child { margin-bottom: 0; }
  @keyframes je-slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .jee-analysis .main { 
    height: auto;
    overflow: visible;
    padding: 1.25rem 1rem; 
  }
  .jee-analysis .top-bar { 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 1.25rem;
  }
  .jee-analysis .top-bar-left {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.25rem;
  }
  .jee-analysis .mode-group {
    flex-wrap: wrap;
    justify-content: center;
  }
  .jee-analysis .top-bar-actions.desktop-view-toggle { 
    display: none !important;
  }
  .jee-analysis .mobile-view-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    width: 100%;
  }
  .jee-analysis .focus-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .jee-analysis .focus-header-right {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .jee-analysis .focus-range-text {
    text-align: center;
  }
  .jee-analysis .cards-grid { grid-template-columns: 1fr; }
  .jee-analysis .focus-grid { grid-template-columns: 1fr; }
}