:root {
  --bg: #031020;
  --bg-2: #06182f;
  --panel: rgba(8, 28, 53, 0.92);
  --panel-2: rgba(12, 38, 69, 0.84);
  --line: #17385f;
  --line-soft: rgba(100, 154, 211, 0.2);
  --text: #eef6ff;
  --muted: #9eb2c8;
  --blue: #1684ee;
  --cyan: #26d5f5;
  --green: #21d49b;
  --purple: #9e72ff;
  --gold: #f4b52d;
  --sidebar: 248px;
  --gap: 14px;
  --radius: 8px;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(36, 114, 194, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(36, 114, 194, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 80% 0%, rgba(20, 103, 192, 0.18), transparent 34%),
    linear-gradient(145deg, #030c19 0%, #061831 55%, #030c19 100%);
  background-size: 48px 48px, 48px 48px, auto, auto;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
a { color: inherit; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  height: 100dvh;
  min-height: 760px;
  overflow: hidden;
}

.sidebar {
  height: 100dvh;
  min-height: 760px;
  padding: 18px 15px;
  border-right: 1px solid var(--line);
  background: rgba(3, 14, 29, 0.95);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.brand-block {
  height: 74px;
  display: flex;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.brand-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(60, 156, 250, 0.5);
  background: radial-gradient(circle at 35% 28%, #f4d44d 0 13%, #135fd0 14% 55%, #06244c 56% 100%);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgba(18, 83, 178, 0.35), inset 0 0 20px rgba(41, 175, 255, 0.3);
}
.brand-block strong, .brand-block b { display: block; font-size: 22px; line-height: 1.05; letter-spacing: 0; }
.brand-block b { font-size: 15px; font-weight: 600; color: #d7e6f5; }

.nav-list {
  display: grid;
  gap: 5px;
  padding: 14px 0 12px;
}
.nav-list a {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 8px 13px;
  color: #d7e3ef;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1;
}
.nav-list a svg { width: 21px; height: 21px; color: #bdd4ed; }
.nav-list a.active {
  background: linear-gradient(90deg, #136fe0, #0b56ad);
  color: #fff;
  border-color: rgba(69, 156, 255, 0.5);
}
.nav-list a.active svg { color: #fff; }
.pill {
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(33, 212, 155, 0.16);
  color: #2ee1a7;
  font-size: 11px;
  font-weight: 800;
}

.research-card {
  margin-top: 10px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(12, 39, 72, 0.86), rgba(8, 27, 51, 0.78));
}
.research-card h3 { margin: 0 0 10px; font-size: 16px; }
.info-line {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  margin: 11px 0;
  color: #bfcede;
  font-size: 12px;
  line-height: 1.35;
}
.info-line .nav-ico {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(126, 170, 214, 0.12);
  color: #a9cff7;
  font-size: 10px;
  font-weight: 800;
}
.info-line b { color: #eef6ff; font-size: 12px; font-weight: 600; }
.about-card {
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(12, 39, 72, 0.86);
  color: #e6f1fd;
  text-decoration: none;
  font-weight: 700;
}
.about-card svg { width: 22px; height: 22px; color: #b8d6f4; }

.main-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 72px 108px minmax(286px, 0.78fr) minmax(344px, 1fr);
  gap: var(--gap);
  padding: 18px 30px 16px;
  overflow: hidden;
}
.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.topbar h1 {
  margin: 0 0 4px;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0;
}
.topbar p {
  margin: 0;
  color: #c7d6e8;
  font-size: 14px;
}
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.icon-only, .action-btn {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(12, 38, 69, 0.86);
  color: #edf7ff;
  text-decoration: none;
  cursor: pointer;
}
.icon-only { width: 36px; padding: 0; position: relative; }
.icon-only svg { width: 19px; height: 19px; }
.notify i {
  position: absolute;
  right: -6px;
  top: -7px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1a80f2;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.action-btn {
  min-width: 146px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}
.action-btn svg { width: 18px; height: 18px; color: #bddcff; }
.user-chip {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  color: #f4f9ff;
}
.avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #dfb679, #6d86a6);
  color: #071223;
  font-weight: 900;
}
.user-chip b, .user-chip small { display: block; line-height: 1.1; }
.user-chip small { color: #bfd0e2; font-size: 12px; }

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  min-height: 0;
}
.metric-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(140deg, rgba(14, 45, 84, 0.96), rgba(9, 31, 58, 0.96));
  overflow: hidden;
}
.metric-card.green { background: linear-gradient(140deg, rgba(11, 68, 63, 0.8), rgba(9, 37, 56, 0.96)); }
.metric-card.purple { background: linear-gradient(140deg, rgba(42, 37, 91, 0.88), rgba(10, 31, 58, 0.95)); }
.metric-card.gold { background: linear-gradient(140deg, rgba(86, 61, 16, 0.82), rgba(13, 38, 62, 0.95)); }
.metric-card.cyan { background: linear-gradient(140deg, rgba(7, 72, 87, 0.78), rgba(9, 34, 58, 0.95)); }
.metric-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.2);
  color: #56b5ff;
  border: 1px solid rgba(79, 156, 255, 0.28);
}
.metric-card.green .metric-icon { color: var(--green); background: rgba(33, 212, 155, 0.15); }
.metric-card.purple .metric-icon { color: #b996ff; background: rgba(158, 114, 255, 0.15); }
.metric-card.gold .metric-icon { color: var(--gold); background: rgba(244, 181, 45, 0.17); }
.metric-card.cyan .metric-icon { color: var(--cyan); background: rgba(38, 213, 245, 0.16); }
.metric-icon svg { width: 30px; height: 30px; }
.metric-card span:not(.metric-icon) {
  display: block;
  color: #79befc;
  font-size: 13px;
  font-weight: 600;
}
.metric-card.green span:not(.metric-icon) { color: #4ce3b4; }
.metric-card.purple span:not(.metric-icon) { color: #bd9fff; }
.metric-card.gold span:not(.metric-icon) { color: #f6c44b; }
.metric-card.cyan span:not(.metric-icon) { color: #68e6fb; }
.metric-card strong {
  display: block;
  margin: 2px 0 3px;
  color: #fff;
  font-size: 24px;
  line-height: 1.08;
}
.metric-card small {
  display: block;
  color: #c3d1e1;
  font-size: 12px;
  line-height: 1.25;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(8, 30, 57, 0.94), rgba(6, 24, 46, 0.94));
  min-height: 0;
}
.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(400px, 0.98fr);
  gap: 12px;
  min-height: 0;
}
.analysis-panel, .quick-panel {
  padding: 18px 17px 12px;
  overflow: hidden;
}
.panel h2 {
  margin: 0;
  color: #f0f7ff;
  font-size: 18px;
  line-height: 1.2;
}
.flow-steps {
  height: calc(100% - 78px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  padding: 17px 6px 4px;
}
.step {
  position: relative;
  min-width: 0;
  text-align: center;
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 35px;
  left: calc(50% + 43px);
  width: calc(100% - 74px);
  border-top: 2px solid rgba(185, 208, 232, 0.7);
}
.step-badge {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgba(37, 95, 159, 0.78), rgba(11, 31, 57, 0.92));
}
.step-badge svg { width: 34px; height: 34px; }
.step.blue { color: #51a8ff; }
.step.green { color: #2edaa7; }
.step.purple { color: #b18cff; }
.step.gold { color: #f4b52d; }
.step.cyan { color: #29d7f5; }
.step h3 {
  margin: 0 0 7px;
  color: currentColor;
  font-size: 13px;
  line-height: 1.25;
}
.step p {
  margin: 0 auto;
  max-width: 125px;
  color: #cbd8e8;
  font-size: 11px;
  line-height: 1.42;
}
.summary-strip {
  min-height: 64px;
  display: grid;
  grid-template-columns: 31px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 36, 67, 0.82);
}
.spark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(158, 114, 255, 0.18);
  color: #b492ff;
}
.summary-strip b { color: #85c9ff; font-size: 13px; }
.summary-strip p {
  margin: 4px 0 0;
  color: #d6e5f3;
  font-size: 12px;
  line-height: 1.35;
}

.quick-grid {
  height: calc(100% - 30px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 46px;
  gap: 12px;
  padding-top: 14px;
}
.quick-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(12, 39, 72, 0.7);
  color: #ecf6ff;
  text-decoration: none;
}
.quick-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.18);
  color: #73c1ff;
}
.quick-card:nth-child(2) span { color: #d5e3f5; background: rgba(148, 164, 184, 0.14); }
.quick-card:nth-child(3) span { color: #45e1b1; background: rgba(33, 212, 155, 0.12); }
.quick-card:nth-child(4) span { color: #bc8dff; background: rgba(158, 114, 255, 0.14); }
.quick-card svg { width: 29px; height: 29px; }
.quick-card b {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  line-height: 1.14;
}
.quick-card small {
  display: block;
  color: #bfd0df;
  font-size: 12px;
  line-height: 1.35;
}
.wide-link {
  grid-column: 1 / -1;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #1d5d9b;
  border-radius: var(--radius);
  background: rgba(13, 53, 94, 0.72);
  color: #73caff;
  text-decoration: none;
  font-size: 15px;
}
.wide-link svg { width: 22px; height: 22px; }

.question-panel {
  position: relative;
  display: grid;
  grid-template-rows: 50px 45px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 16px 0;
}
.question-head h2 {
  margin: 0;
  font-size: 18px;
}
.question-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-wrap {
  width: 224px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 18, 35, 0.76);
  color: #849bb5;
}
.search-wrap svg { width: 17px; height: 17px; }
.search-wrap input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf7ff;
  font-size: 12px;
}
.question-toolbar select {
  width: 162px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 18, 35, 0.76);
  color: #e6f0fa;
  font-size: 12px;
}
.tab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.tab-pill {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(7, 27, 52, 0.9);
  color: #b8cce0;
  cursor: pointer;
  font-size: 12px;
}
.tab-pill.active {
  color: #fff;
  background: #0f67c9;
  border-color: #1b82ee;
}
.question-list {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 10px 0 16px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
  scrollbar-width: thin;
}
.question-list::-webkit-scrollbar {
  width: 9px;
}
.question-list::-webkit-scrollbar-track {
  background: rgba(7, 26, 50, 0.78);
  border-radius: 999px;
}
.question-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.question-row {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 270px 192px 24px;
  align-items: center;
  gap: 12px;
  padding: 6px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(9, 34, 64, 0.7);
  color: #edf7ff;
  text-align: left;
  cursor: pointer;
}
.row-num {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #1c80eb;
  background: rgba(22, 132, 238, 0.2);
  color: #9ed4ff;
  font-weight: 800;
  font-size: 13px;
}
.question-title {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tag-group {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  overflow: hidden;
}
.tag {
  min-width: 0;
  max-width: 118px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(22, 132, 238, 0.15);
  color: #70bfff;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag.alt {
  background: rgba(158, 114, 255, 0.16);
  color: #c6aaff;
}
.confidence {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #bdcad8;
  font-size: 12px;
  white-space: nowrap;
}
.confidence b {
  min-width: 58px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(33, 212, 155, 0.16);
  color: #2ee1a7;
  font-size: 11px;
}
.confidence b.medium {
  background: rgba(244, 181, 45, 0.17);
  color: #f7bd38;
}
.row-arrow {
  color: #9fb7cf;
  font-size: 18px;
  text-align: center;
}
.answer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(1, 8, 18, 0.62);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.answer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.answer-modal {
  position: relative;
  width: min(720px, calc(100vw - 44px));
  max-height: min(78dvh, 720px);
  overflow: auto;
  padding: 28px 30px 26px;
  border: 1px solid #2f85d8;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.18s ease;
}
.answer-backdrop.open .answer-modal {
  transform: scale(1) translateY(0);
}
.answer-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #2ee1a7, #59b7ff, #b18cff);
}
.answer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 35, 64, 0.9);
  color: #dbeafe;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}
.answer-category {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(46, 225, 167, 0.28);
  border-radius: 8px;
  background: rgba(46, 225, 167, 0.12);
  color: #64f0bf;
  font-size: 12px;
  font-weight: 700;
}
.answer-modal h3 {
  margin: 15px 42px 12px 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.28;
}
.answer-modal p {
  margin: 0;
  color: #d9ebff;
  font-size: 15px;
  line-height: 1.62;
}
.answer-modal small {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 202, 255, 0.18);
  color: #a7bdd4;
  line-height: 1.45;
}
.answer-detail-link {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 16px;
  border: 1px solid #1684ee;
  border-radius: 7px;
  background: rgba(22, 132, 238, 0.16);
  color: #7ed0ff;
  text-decoration: none;
  font-weight: 800;
}

.analysis-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 88px 82px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 30px 22px;
  overflow: hidden;
}
#statSection {
  min-height: 0;
  display: grid;
  grid-template-rows: 172px minmax(318px, 1fr) 132px;
  gap: 12px;
}
#statSection[hidden] { display: none; }
#rawSection[hidden] { display: none; }
.analysis-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #bed3ea;
  text-decoration: none;
  font-size: 13px;
}
.back-link span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(130, 165, 204, 0.18);
}
.analysis-title h1 {
  margin: 10px 0 4px;
  font-size: 27px;
  line-height: 1;
}
.analysis-title p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.analysis-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.analysis-filterbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr)) 118px;
  gap: 18px;
  align-items: end;
  padding: 14px 18px;
}
.filter-field {
  min-width: 0;
  display: grid;
  gap: 7px;
}
.filter-field span {
  color: #8fa7c0;
  font-size: 11px;
}
.select-control {
  width: 100%;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 18, 35, 0.78);
  color: #edf7ff;
  padding: 0 10px;
  font-size: 12px;
}
.analysis-metrics {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 1.08fr 1fr;
  gap: 10px;
  min-height: 0;
}
.analysis-card {
  min-width: 0;
  padding: 16px 18px;
  overflow: hidden;
}
.analysis-card h2, .chart-panel h2, .interpret-panel h2 {
  margin: 0;
  color: #f4f9ff;
  font-size: 15px;
  line-height: 1.2;
}
.metric-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.metric-pair small {
  display: block;
  color: #d0deec;
  font-size: 12px;
}
.metric-pair strong {
  display: block;
  margin-top: 6px;
  font-size: 27px;
  line-height: 1;
}
.metric-pair .blue-value { color: #34a8ff; }
.metric-pair .green-value { color: #35e2a8; }
.metric-pair .gold-value { color: #ffb12d; }
.vs-chip {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(116, 144, 179, 0.16);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 800;
}
.sparkline {
  height: 48px;
  margin-top: 5px;
}
.sparkline svg, .chart-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.delta-text {
  margin-top: 2px;
  color: #d9e7f6;
  text-align: center;
  font-size: 12px;
}
.reliability-icon {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  margin: 14px auto 8px;
  border-radius: 50%;
  background: rgba(158, 114, 255, 0.18);
  color: #b88cff;
  font-size: 28px;
}
.card-note {
  color: #b98cff;
  text-align: center;
  font-size: 12px;
}
.significance-curve {
  width: 82px;
  height: 48px;
  margin: 12px auto 4px;
  border-bottom: 2px solid rgba(244, 181, 45, 0.7);
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(244, 181, 45, 0.24), transparent 68%);
}
.p-note {
  color: #f4b52d;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.effect-value {
  margin: 18px 0 12px;
  color: #37e3b0;
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.effect-track {
  position: relative;
  height: 28px;
  margin: 0 22px;
  border-top: 2px solid rgba(144, 171, 204, 0.42);
}
.effect-track i {
  position: absolute;
  top: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #35e2a8;
  box-shadow: 0 0 16px rgba(53, 226, 168, 0.6);
}
.effect-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #9db3ca;
  font-size: 11px;
}
.analysis-charts {
  min-height: 0;
  display: grid;
  grid-template-columns: 1.08fr 0.98fr 1.38fr;
  gap: 10px;
}
.chart-panel {
  min-width: 0;
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr) auto;
  padding: 16px 18px;
  overflow: hidden;
}
.chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.legend {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #c9d8e8;
  font-size: 12px;
}
.legend i {
  width: 22px;
  height: 4px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.legend .blue { background: #34a8ff; }
.legend .green { background: #35e2a8; }
.chart-svg {
  min-height: 0;
}
.chart-panel small {
  color: #b6c6d8;
  font-size: 12px;
}
.axis, .axis-tick {
  stroke: rgba(168, 192, 221, 0.38);
  stroke-width: 1;
  fill: none;
}
.axis-label, .radar-label, .y-tick {
  fill: #b6c6d8;
  font-size: 12px;
}
.radar-label {
  font-size: 10px;
  font-weight: 700;
}
.rotate {
  transform: rotate(-90deg);
  transform-origin: center;
}
.grid-line {
  stroke: rgba(138, 164, 195, 0.14);
  stroke-width: 1;
}
.line-blue, .line-green {
  fill: none;
  stroke-width: 3;
}
.line-blue { stroke: #2ea8ff; }
.line-green { stroke: #35e2a8; }
.area-blue { fill: rgba(46, 168, 255, 0.18); stroke: none; }
.area-green { fill: rgba(53, 226, 168, 0.16); stroke: none; }
.distribution-table, .paired-stats {
  display: grid;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(7, 25, 47, 0.62);
}
.distribution-table div {
  display: grid;
  grid-template-columns: 62px repeat(4, 1fr);
  gap: 10px;
  color: #9fb4ca;
  font-size: 11px;
}
.distribution-table b { color: #50b9ff; }
.distribution-table div:nth-child(2) b { color: #35e2a8; }
.radar-ring, .radar-axis {
  fill: none;
  stroke: rgba(134, 164, 196, 0.22);
  stroke-width: 1;
}
.radar-formal {
  fill: rgba(46, 168, 255, 0.14);
  stroke: #2ea8ff;
  stroke-width: 2;
}
.radar-genz {
  fill: rgba(53, 226, 168, 0.13);
  stroke: #35e2a8;
  stroke-width: 2;
}
.dot-blue { fill: #2ea8ff; }
.dot-green { fill: #35e2a8; }
.scatter-dot {
  fill: #35e2a8;
  opacity: 0.64;
}
.mean-line {
  stroke: #e5f4ff;
  stroke-width: 2;
}
.limit-line {
  stroke: #f4a62d;
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.mean-label {
  fill: #ffd080;
  font-size: 12px;
  font-weight: 800;
}
.limit-label {
  fill: #f4a62d;
  font-size: 12px;
  font-weight: 800;
}
.paired-stats {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.paired-stats span {
  text-align: center;
  border-right: 1px solid var(--line-soft);
}
.paired-stats span:last-child { border-right: 0; }
.paired-stats b {
  display: block;
  color: #9fb4ca;
  font-size: 11px;
  font-weight: 500;
}
.paired-stats strong {
  color: #fff;
  font-size: 14px;
}
.analysis-interpretation {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 12px;
}
.interpret-panel {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
}
.interpret-icon, .conclusion-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.18);
  color: #73caff;
  font-size: 28px;
}
.interpret-panel p {
  margin: 8px 0 0;
  color: #cbd9e7;
  font-size: 13px;
  line-height: 1.55;
}
.conclusion-box {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(46, 225, 167, 0.32);
  border-radius: var(--radius);
  background: rgba(6, 55, 58, 0.55);
}
.conclusion-icon {
  background: rgba(46, 225, 167, 0.14);
  color: #35e2a8;
}
.conclusion-box b {
  display: block;
  color: #48e7bc;
  margin-bottom: 6px;
}
.conclusion-box p {
  margin: 0;
  color: #a9f3dd;
  font-size: 13px;
  line-height: 1.45;
}

.method-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  gap: 12px;
  padding: 16px 28px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.method-content::-webkit-scrollbar { width: 9px; }
.method-content::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.method-content::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.method-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.method-title h1 {
  margin: 0 0 8px;
  font-size: 25px;
  line-height: 1;
  letter-spacing: 0;
}
.method-title p {
  margin: 0;
  color: #c5d4e4;
  font-size: 14px;
}
.method-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
}
.method-tab {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 28, 53, 0.72);
  color: #c9d7e7;
  text-decoration: none;
  font-size: 13px;
}
.method-tab svg {
  width: 18px;
  height: 18px;
}
.method-tab.active {
  color: #fff;
  border-color: #1b82ee;
  background: linear-gradient(90deg, #1174dc, #0d5bb0);
}
.methodology-flow-panel {
  min-height: 0;
  padding: 12px 16px 10px;
  overflow: hidden;
}
.method-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.method-section-head h2,
.method-detail-section h2,
.method-explain h2,
.profile-panel h2 {
  margin: 0;
  color: #eff7ff;
  font-size: 17px;
  line-height: 1.2;
}
.method-section-head h2 span,
.profile-panel h2 span {
  color: #b5c7db;
  font-weight: 500;
}
.method-flow-cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.method-flow-cards::before {
  content: "";
  position: absolute;
  top: 29px;
  left: 42px;
  right: 42px;
  border-top: 2px dashed rgba(68, 183, 246, 0.42);
}
.method-step {
  position: relative;
  min-width: 0;
  min-height: 164px;
  display: grid;
  grid-template-rows: 18px 32px 30px 1fr;
  gap: 5px;
  justify-items: center;
  padding: 14px 9px 9px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(10, 35, 64, 0.76);
  text-align: center;
}
.method-step.blue { color: #37a8ff; }
.method-step.green { color: #35e2a8; }
.method-step.purple { color: #b18cff; }
.method-step.gold { color: #f4b52d; }
.step-number {
  position: absolute;
  top: -19px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #09213f;
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
}
.method-step b {
  color: currentColor;
  font-size: 12px;
}
.method-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: currentColor;
}
.method-icon svg {
  width: 28px;
  height: 28px;
}
.method-step strong {
  align-self: center;
  color: #fff;
  font-size: 15px;
  line-height: 1.15;
}
.method-step p {
  margin: 0;
  color: #c7d5e5;
  font-size: 10px;
  line-height: 1.32;
}
.flow-legend {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  color: #c1d0e2;
  font-size: 11px;
}
.flow-legend i {
  width: 32px;
  height: 3px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.flow-legend .cyan { background: #29d7f5; }
.flow-legend .green { background: #35e2a8; }
.flow-legend .purple { background: #b18cff; }
.flow-legend .blue { background: #37a8ff; }
.method-middle {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr);
  gap: 12px;
}
.method-explain,
.profile-panel {
  min-height: 0;
  padding: 14px 18px;
  overflow: hidden;
}
.method-explain h2,
.profile-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.method-explain h2 svg,
.profile-panel h2 svg {
  width: 22px;
  height: 22px;
  color: #47d9c0;
}
.method-explain > p {
  margin: 11px 0 12px;
  color: #cbd9e8;
  font-size: 13px;
  line-height: 1.38;
}
.method-warning {
  padding: 10px 14px;
  border: 1px solid rgba(244, 181, 45, 0.42);
  border-left-width: 6px;
  border-radius: 7px;
  background: rgba(63, 45, 10, 0.52);
}
.method-warning b {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f4b52d;
  font-size: 13px;
}
.method-warning svg {
  width: 18px;
  height: 18px;
}
.method-warning p {
  margin: 6px 0 0;
  color: #d9e2ee;
  font-size: 11px;
  line-height: 1.28;
}
.profile-grid {
  display: grid;
  grid-template-columns: 176px 1fr;
  gap: 16px;
  align-items: center;
  height: calc(100% - 28px);
}
.profile-ring {
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: conic-gradient(#2d8bea 0 230deg, #9e72ff 230deg 290deg, #f4b52d 290deg 325deg, #35e2a8 325deg 360deg);
}
.profile-ring > div {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #08213d;
  text-align: center;
}
.profile-ring strong {
  color: #29d7f5;
  font-size: 26px;
  line-height: 1;
}
.profile-ring span {
  color: #d5e2ef;
  font-size: 12px;
}
.gender-mini-ring {
  width: 22px;
  height: 22px;
  display: inline-block;
  margin-bottom: 8px;
  border-radius: 50%;
  background: conic-gradient(#c95f9b 0 245deg, #2d8bea 245deg 360deg);
}
.profile-facts {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.profile-facts li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  color: #c8d8e7;
  font-size: 11px;
}
.profile-facts b {
  color: #9fb4cb;
  font-weight: 600;
}
.method-detail-section {
  min-height: 0;
  overflow: hidden;
}
.method-detail-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
  height: calc(100% - 31px);
}
.method-detail {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 9px 8px;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.76);
}
.method-detail.blue { color: #37a8ff; }
.method-detail.green { color: #35e2a8; }
.method-detail.purple { color: #b18cff; }
.method-detail.gold { color: #f4b52d; }
.method-detail span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  color: currentColor;
  font-weight: 900;
}
.method-detail h3 {
  margin: 7px 0 7px;
  color: currentColor;
  font-size: 11px;
  line-height: 1.15;
}
.method-detail b,
.method-detail p {
  display: block;
  margin: 0;
  color: #dbe7f3;
  font-size: 10px;
  line-height: 1.25;
}
.method-detail p {
  margin-top: 5px;
  color: #bfcfe0;
}
.method-footnote {
  margin: 0;
  color: #8fa5bc;
  font-size: 12px;
}
.flow-hidden .methodology-flow-panel {
  display: none;
}
.flow-hidden .method-content {
  grid-template-rows: 70px minmax(330px, 1fr) minmax(200px, 0.68fr) 18px;
}

.theory-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 70px 54px minmax(360px, 0.96fr) minmax(270px, 1fr);
  gap: 10px;
  padding: 16px 30px 18px;
  overflow: hidden;
}
.theory-map-panel {
  min-height: 0;
  padding: 14px 18px 12px;
  overflow: hidden;
}
.concept-map {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(188px, 1fr) 104px;
  gap: 14px;
}
.concept-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.concept-link {
  align-self: center;
  height: 2px;
  border-top: 2px dashed rgba(77, 177, 241, 0.46);
}
.concept-node {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 22px 42px 24px 22px minmax(52px, 1fr);
  justify-items: center;
  gap: 5px;
  padding: 12px 12px 11px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.82);
  color: #37a8ff;
  text-align: center;
  cursor: pointer;
}
.concept-node.green { color: #35e2a8; }
.concept-node.purple { color: #b18cff; }
.concept-node.gold { color: #f4b52d; }
.concept-node.cyan { color: #29d7f5; }
.concept-node.active {
  background: linear-gradient(180deg, rgba(26, 119, 220, 0.32), rgba(9, 33, 62, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 1px currentColor;
}
.concept-order {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #09213f;
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
}
.concept-node svg {
  width: 38px;
  height: 38px;
}
.concept-node b {
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.concept-node small {
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
}
.concept-node p {
  margin: 0;
  color: #c9d8e8;
  font-size: 11px;
  line-height: 1.32;
}
.concept-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.outcome-card {
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.74);
}
.outcome-card.blue { color: #37a8ff; }
.outcome-card.green { color: #35e2a8; }
.outcome-card.gold { color: #f4b52d; }
.outcome-card span {
  display: block;
  color: currentColor;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.outcome-card strong {
  display: block;
  margin: 4px 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.05;
}
.outcome-card p {
  margin: 0;
  color: #c9d8e8;
  font-size: 12px;
  line-height: 1.28;
}
.concept-legend {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 9px;
  color: #c1d0e2;
  font-size: 11px;
}
.concept-legend i {
  width: 32px;
  height: 3px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 999px;
  vertical-align: middle;
}
.concept-legend .blue { background: #37a8ff; }
.concept-legend .purple { background: #b18cff; }
.concept-legend .gold { background: #f4b52d; }
.concept-legend .green { background: #35e2a8; }
.theory-bottom {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
}
.theory-support-panel,
.theory-position-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  padding: 16px 18px;
  overflow: hidden;
}
.theory-position-panel {
  grid-template-rows: 30px minmax(0, 1fr) 76px;
}
.theory-support-panel h2,
.theory-position-panel h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #eff7ff;
  font-size: 17px;
  line-height: 1.2;
}
.theory-support-panel h2 svg,
.theory-position-panel h2 svg {
  width: 21px;
  height: 21px;
  color: #47d9c0;
}
.support-list {
  min-height: 0;
  display: grid;
  gap: 8px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.support-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
}
.support-item > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(48, 146, 237, 0.18);
  color: #6ac7ff;
  font-weight: 900;
}
.support-item h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 14px;
}
.support-item p,
.support-item small {
  display: block;
  margin: 0;
  color: #c7d6e6;
  font-size: 11px;
  line-height: 1.35;
}
.support-item small {
  margin-top: 4px;
  color: #78d6ff;
}
.theory-matrix {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.theory-matrix table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 12px;
}
.theory-matrix th,
.theory-matrix td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(100, 154, 211, 0.18);
  color: #cbd9e8;
  text-align: center;
}
.theory-matrix th:first-child {
  text-align: left;
}
.theory-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #09213f;
  color: #89cfff;
  font-weight: 800;
}
.check {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.16);
  color: #35e2a8;
  font-weight: 900;
}
.dash {
  color: #59728c;
}
.concept-insight {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(38, 213, 245, 0.28);
  border-radius: 7px;
  background: rgba(6, 55, 58, 0.38);
}
.concept-insight b {
  display: block;
  color: #64d9ff;
  font-size: 13px;
}
.concept-insight p,
.concept-insight small {
  display: block;
  margin: 4px 0 0;
  color: #cbd9e8;
  font-size: 11px;
  line-height: 1.3;
}

.question-detail-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 30px 18px;
  overflow: hidden;
}
.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.detail-kicker {
  display: block;
  margin-bottom: 6px;
  color: #99badb;
  font-size: 13px;
  text-transform: uppercase;
}
.detail-topbar h1 {
  margin: 0 0 7px;
  color: #f4f9ff;
  font-size: 25px;
  line-height: 1;
}
.detail-topbar p {
  margin: 0;
  color: #c2d2e3;
  font-size: 13px;
}
.detail-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
}
.detail-main {
  min-height: 0;
  display: grid;
  grid-template-rows: 108px 242px 86px minmax(210px, 1fr) 62px;
  gap: 10px;
}
.detail-side {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 210px;
  gap: 12px;
}
.detail-question-card {
  padding: 14px 18px;
  overflow: hidden;
}
.detail-question-head {
  display: grid;
  grid-template-columns: 38px auto 1fr auto;
  gap: 12px;
  align-items: center;
}
.detail-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #47a9ff;
  border-radius: 50%;
  background: rgba(28, 119, 220, 0.48);
  color: #bce1ff;
  font-weight: 900;
}
.detail-count {
  justify-self: end;
  color: #a9bdd2;
  font-size: 12px;
}
.detail-question-card h2 {
  margin: 12px 0 0;
  color: #f5f9ff;
  font-size: 19px;
  line-height: 1.25;
}
.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: rgba(55, 108, 166, 0.22);
  color: #d2e0ef;
  font-size: 12px;
}
.detail-meta b {
  color: #33dba2;
}
.detail-meta b.medium {
  color: #f4b52d;
}
.detail-visual-panel {
  padding: 14px 16px;
  overflow: hidden;
}
.detail-visual-panel h2,
.related-panel h2,
.detail-safe-panel h2 {
  margin: 0;
  color: #f2f8ff;
  font-size: 15px;
}
.detail-flow {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}
.detail-arrow {
  align-self: center;
  color: #c5dbef;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
}
.detail-flow-card {
  min-width: 0;
  display: grid;
  grid-template-rows: 28px 38px 18px 34px minmax(42px, 1fr);
  justify-items: center;
  gap: 5px;
  padding: 12px 10px 10px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.76);
  color: #37a8ff;
  text-align: center;
}
.detail-flow-card.green { color: #35e2a8; }
.detail-flow-card.purple { color: #b18cff; }
.detail-flow-card.gold { color: #f4b52d; }
.detail-flow-card.cyan { color: #29d7f5; }
.detail-flow-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: currentColor;
  font-weight: 900;
}
.detail-flow-card svg {
  width: 34px;
  height: 34px;
  color: currentColor;
}
.detail-flow-card b {
  color: currentColor;
  font-size: 12px;
}
.detail-flow-card strong {
  color: #fff;
  font-size: 13px;
  line-height: 1.15;
}
.detail-flow-card p {
  margin: 0;
  color: #c8d7e8;
  font-size: 10px;
  line-height: 1.32;
}
.detail-neutral-card {
  display: grid;
  grid-template-columns: 46px 1fr 150px;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  overflow: hidden;
}
.detail-neutral-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(53, 226, 168, 0.14);
  color: #35e2a8;
  font-size: 21px;
}
.detail-neutral-card h2 {
  margin: 0 0 5px;
  color: #f4f9ff;
  font-size: 15px;
}
.detail-neutral-card p {
  margin: 0;
  color: #c8d8e7;
  font-size: 12px;
  line-height: 1.35;
}
.detail-neutral-card b {
  justify-self: end;
  padding: 10px 14px;
  border: 1px solid rgba(33, 212, 155, 0.28);
  border-radius: 7px;
  background: rgba(6, 55, 58, 0.46);
  color: #35e2a8;
}
.detail-answer-card {
  min-height: 0;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr);
  overflow: hidden;
}
.detail-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line-soft);
}
.detail-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-right: 1px solid var(--line-soft);
  background: transparent;
  color: #c7d6e6;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
}
.detail-tab.active {
  background: rgba(17, 112, 214, 0.26);
  color: #fff;
  box-shadow: inset 0 -2px 0 #1684ee;
}
.detail-panels {
  min-height: 0;
  overflow: hidden;
}
.detail-answer-panel {
  display: none;
  height: 100%;
  padding: 16px 18px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.detail-answer-panel.active {
  display: block;
}
.detail-answer-panel h3 {
  margin: 0 0 12px;
  color: #35e2a8;
  font-size: 15px;
}
.detail-answer-panel h3 span {
  color: #9bc5d5;
  font-weight: 600;
}
.detail-answer-panel p {
  margin: 0;
  color: #e3effb;
  font-size: 14px;
  line-height: 1.55;
}
.answer-qualities {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.answer-qualities span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #cfe0ef;
  font-size: 11px;
  font-weight: 700;
}
.answer-qualities svg {
  color: #35e2a8;
  font-size: 17px;
}
.detail-data-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.detail-data-grid span {
  display: grid;
  gap: 6px;
  padding: 13px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  text-align: center;
}
.detail-data-grid b {
  color: #7ed0ff;
  font-size: 20px;
}
.detail-data-grid small {
  color: #aabdd1;
  font-size: 11px;
}
.detail-theory-list,
.detail-note-list {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.detail-theory-list li,
.detail-note-list li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #c9d8e8;
  font-size: 12px;
}
.detail-note-list li {
  display: block;
}
.detail-theory-list b {
  color: #b18cff;
}
.detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.detail-nav-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(12, 38, 69, 0.86);
  color: #e4f1ff;
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}
.detail-nav-btn.primary {
  border-color: #1684ee;
  background: linear-gradient(90deg, #1174dc, #0d5bb0);
}
.detail-nav-btn.disabled {
  pointer-events: none;
  opacity: .42;
}
.related-panel,
.detail-safe-panel {
  min-height: 0;
  padding: 16px;
  overflow: hidden;
}
.related-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  margin-top: 14px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.related-question {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #d5e5f5;
  text-decoration: none;
}
.related-question span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #a9d8ff;
  font-weight: 900;
}
.related-question p {
  margin: 0;
  color: #d5e5f5;
  font-size: 11px;
  line-height: 1.35;
}
.detail-safe-panel ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: #c9d8e8;
  font-size: 12px;
  line-height: 1.35;
}
.detail-safe-panel li {
  padding-left: 20px;
  position: relative;
}
.detail-safe-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #35e2a8;
}

.simulation-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 76px 46px minmax(0, 1fr);
  gap: 12px;
  padding: 18px 30px 18px;
  overflow: hidden;
}
.simulation-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.simulation-topbar h1 {
  margin: 0 0 8px;
  color: #f4f9ff;
  font-size: 24px;
  line-height: 1;
}
.simulation-topbar p {
  margin: 0;
  color: #c2d2e3;
  font-size: 14px;
}
.simulation-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.simulation-chip {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(12, 38, 69, 0.82);
  color: #cbd9e8;
}
.simulation-chip b {
  color: #35e2a8;
}
.simulation-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 12px;
}
.simulation-main {
  min-height: 0;
  display: grid;
  grid-template-rows: 176px 204px minmax(0, 1fr) 66px;
  gap: 12px;
}
.simulation-side {
  min-height: 0;
  display: grid;
  grid-template-rows: 120px 250px 172px minmax(0, 1fr);
  gap: 12px;
}
.simulation-question-panel {
  padding: 20px;
  overflow: hidden;
}
.simulation-position {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c994ff;
  font-weight: 800;
  font-size: 14px;
}
.simulation-question-panel h2 {
  margin: 22px 0;
  color: #f3f8ff;
  font-size: 20px;
  line-height: 1.35;
}
.simulation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.simulation-tags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 6px;
  background: rgba(55, 108, 166, 0.22);
  color: #d2e0ef;
  font-size: 12px;
}
.simulation-tags b {
  color: #35e2a8;
}
.simulation-support-panel,
.simulation-answer-panel,
.simulation-timer-card,
.simulation-confidence-card,
.simulation-note-card,
.simulation-examiner-card {
  padding: 16px 18px;
  overflow: hidden;
}
.simulation-support-panel h2,
.simulation-answer-panel h2,
.simulation-timer-card h2,
.simulation-confidence-card h2,
.simulation-note-card h2,
.simulation-examiner-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f3f8ff;
  font-size: 15px;
}
.simulation-support-panel h2 svg,
.simulation-answer-panel h2 svg,
.simulation-timer-card h2 svg,
.simulation-confidence-card h2 svg,
.simulation-note-card h2 svg,
.simulation-examiner-card h2 svg {
  width: 20px;
  height: 20px;
  color: #58b8ff;
}
.simulation-support-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 38px;
  margin-top: 14px;
}
.simulation-support-card {
  position: relative;
  min-width: 0;
  min-height: 144px;
  display: grid;
  grid-template-rows: 34px 36px 1fr;
  justify-items: center;
  gap: 8px;
  padding: 14px 12px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.76);
  color: #37a8ff;
  text-align: center;
}
.simulation-support-card.green { color: #35e2a8; }
.simulation-support-card.purple { color: #b18cff; }
.simulation-support-card.gold { color: #f4b52d; }
.simulation-support-card svg {
  width: 32px;
  height: 32px;
}
.simulation-support-card b {
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
}
.simulation-support-card p {
  margin: 0;
  color: #c7d6e6;
  font-size: 11px;
  line-height: 1.35;
}
.simulation-support-card i {
  position: absolute;
  right: -27px;
  top: 50%;
  color: #c7d6e6;
  font-style: normal;
  font-size: 24px;
  font-weight: 900;
  transform: translateY(-50%);
}
.simulation-answer-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 30px;
}
.simulation-answer-panel h2 span {
  color: #35e2a8;
}
.simulation-answer-panel p {
  margin: 12px 0;
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #e4effb;
  font-size: 15px;
  line-height: 1.55;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.simulation-answer-panel a {
  justify-self: end;
  color: #58b8ff;
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
}
.simulation-nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 12px;
}
.simulation-timer-card {
  position: relative;
}
.simulation-timer-card span {
  display: block;
  margin-top: 12px;
  color: #aabdd1;
  font-size: 12px;
}
.simulation-timer-card strong {
  display: block;
  margin-top: 4px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.simulation-timer-card button {
  position: absolute;
  right: 18px;
  bottom: 16px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(232, 75, 103, 0.55);
  border-radius: 7px;
  background: rgba(232, 75, 103, 0.08);
  color: #ff7187;
  cursor: pointer;
  font-weight: 800;
}
.simulation-confidence-card {
  display: grid;
  grid-template-rows: 28px 132px 42px 18px;
}
.confidence-gauge {
  --confidence: 136deg;
  position: relative;
  width: 176px;
  height: 94px;
  display: grid;
  place-items: end center;
  justify-self: center;
  margin-top: 8px;
  border-radius: 176px 176px 0 0;
  background:
    radial-gradient(circle at 50% 100%, #08213d 0 54%, transparent 55%),
    conic-gradient(from 270deg at 50% 100%, #ff5f3d 0 42deg, #f4b52d 42deg 96deg, #cce44b 96deg 132deg, #35e2a8 132deg var(--confidence), rgba(36, 87, 120, .55) var(--confidence) 180deg, transparent 180deg 360deg);
}
.confidence-gauge strong {
  margin-bottom: 16px;
  color: #fff;
  font-size: 28px;
}
.confidence-gauge span {
  position: absolute;
  margin-top: 78px;
  color: #35e2a8;
  font-size: 12px;
  font-weight: 800;
}
.simulation-confidence-card label {
  display: grid;
  gap: 8px;
  color: #aabdd1;
  font-size: 12px;
}
.simulation-confidence-card input {
  width: 100%;
  accent-color: #1684ee;
}
.confidence-scale {
  display: flex;
  justify-content: space-between;
  color: #8fa7c0;
  font-size: 10px;
}
.simulation-note-card {
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 30px;
  gap: 10px;
}
.simulation-note-card textarea {
  width: 100%;
  min-height: 0;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(5, 18, 35, 0.7);
  color: #e4effb;
  padding: 12px;
  font-size: 12px;
}
.simulation-note-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  color: #8fa7c0;
  font-size: 11px;
}
.simulation-note-card button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(12, 38, 69, 0.86);
  color: #dcecff;
  cursor: pointer;
}
.simulation-examiner-card {
  display: grid;
  grid-template-rows: 26px 88px 1fr;
  gap: 12px;
}
.examiner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.examiner-card {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #d9e7f6;
  cursor: pointer;
}
.examiner-card.active {
  border-color: #21d49b;
  background: rgba(10, 74, 72, 0.52);
}
.examiner-card svg {
  width: 28px;
  height: 28px;
  color: #35e2a8;
}
.examiner-card span {
  font-size: 11px;
  line-height: 1.2;
}
.simulation-tip {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #c7d6e6;
  font-size: 12px;
  line-height: 1.35;
}

.presentation-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 74px 158px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 30px 24px;
  overflow: hidden;
}
.presentation-topbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.presentation-topbar h1 {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1;
}
.presentation-topbar p {
  margin: 0;
  color: #c4d4e5;
  font-size: 14px;
}
.presentation-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 88px 38px;
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
}
.presentation-stat {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: 18px 1fr 16px;
  column-gap: 13px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(10, 35, 64, 0.76);
}
.presentation-stat svg {
  grid-row: 1 / -1;
  width: 34px;
  height: 34px;
}
.presentation-stat.blue svg { color: #37a8ff; }
.presentation-stat.cyan svg { color: #29d7f5; }
.presentation-stat.green svg { color: #35e2a8; }
.presentation-stat.gold svg { color: #f4b52d; }
.presentation-stat.purple svg { color: #b18cff; }
.presentation-stat span {
  color: #b7c8dc;
  font-size: 12px;
}
.presentation-stat strong {
  min-width: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.13;
}
.presentation-stat small {
  color: #9fb1c6;
  font-size: 12px;
}
.presentation-advice {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(7, 27, 52, 0.72);
  color: #cbd9e9;
  font-size: 12px;
}
.presentation-advice svg {
  color: #37a8ff;
}
.presentation-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr) 318px;
  gap: 12px;
}
.slide-list-panel,
.slide-viewer-panel,
.presentation-side {
  min-height: 0;
}
.slide-list-panel {
  display: grid;
  grid-template-rows: 36px minmax(0, 1fr);
  padding: 14px 12px;
  overflow: hidden;
}
.slide-list-panel h2,
.points-panel h2,
.notes-panel h2 {
  margin: 0;
  color: #f1f7ff;
  font-size: 14px;
}
.slide-list-panel h2 span {
  color: #a8b9cd;
  font-weight: 500;
}
.slide-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.slide-list-item {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 24px 72px 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px 9px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.72);
  color: #dbe8f7;
  cursor: pointer;
  text-align: left;
}
.slide-list-item.active {
  border-color: #1684ee;
  background: rgba(18, 89, 167, 0.34);
  box-shadow: inset 0 0 0 1px rgba(49, 146, 238, 0.35);
}
.slide-list-item span {
  grid-row: 1 / -1;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(126, 170, 214, 0.14);
  color: #9ed4ff;
  font-weight: 900;
  font-size: 11px;
}
.slide-list-item img {
  grid-row: 1 / -1;
  width: 72px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  background: #dbeafe;
}
.slide-list-item b {
  color: #58b8ff;
  font-size: 12px;
}
.slide-list-item small {
  min-width: 0;
  color: #c2cfde;
  font-size: 10px;
  line-height: 1.25;
}
.slide-viewer-panel {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr) 26px 48px 40px;
  padding: 14px 18px 12px;
  overflow: hidden;
}
.slide-viewer-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.slide-badge {
  min-width: 128px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12, 47, 83, 0.84);
  color: #9ed4ff;
  font-weight: 800;
}
.slide-viewer-head strong {
  font-size: 18px;
}
.slide-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: rgba(3, 13, 27, 0.46);
}
.slide-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.current-slide-title {
  min-width: 0;
  margin: 6px 0 0;
  overflow: hidden;
  color: #dcecff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.slide-controls {
  display: grid;
  grid-template-columns: 150px 1fr 120px 170px;
  gap: 14px;
  align-items: center;
}
.slide-controls .action-btn {
  min-height: 34px;
}
.slide-controls .primary {
  justify-content: center;
  background: linear-gradient(90deg, #136fe0, #0b56ad);
}
.slide-progress-track {
  height: 5px;
  border-radius: 999px;
  background: rgba(114, 144, 180, 0.2);
  overflow: hidden;
}
.slide-progress-track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #1684ee;
}
.slide-controls span {
  color: #d8e7f6;
  text-align: center;
  font-size: 12px;
}
.section-jump-row {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 12px;
  align-items: center;
  color: #d8e7f6;
  font-size: 12px;
}
.section-jump {
  display: flex;
  gap: 9px;
  overflow: hidden;
}
.section-chip {
  height: 32px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(8, 30, 57, 0.78);
  color: #9ed4ff;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
}
.section-chip.green { color: #35e2a8; }
.section-chip.purple { color: #b18cff; }
.section-chip.gold { color: #f4b52d; }
.section-chip.cyan { color: #29d7f5; }
.presentation-side {
  display: grid;
  grid-template-rows: 1fr 0.9fr;
  gap: 12px;
}
.points-panel,
.notes-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: 32px minmax(0, 1fr);
  padding: 16px;
  overflow: hidden;
}
.talking-points,
.speaker-notes {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  color: #cbd9e9;
  font-size: 12px;
  line-height: 1.45;
}
.talking-points li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
}
.talking-points span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.18);
  color: #35e2a8;
  font-size: 11px;
  font-weight: 900;
}
.speaker-notes {
  padding-left: 16px;
  list-style: disc;
}
.notes-hidden .notes-panel {
  display: none;
}
.notes-hidden .presentation-side {
  grid-template-rows: 1fr;
}

.thesis-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 70px 194px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 30px 24px;
  overflow: hidden;
}
.thesis-topbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.thesis-topbar h1 {
  margin: 0 0 7px;
  font-size: 23px;
  line-height: 1;
}
.thesis-topbar p {
  margin: 0;
  color: #c4d4e5;
  font-size: 14px;
}
.thesis-flow-panel {
  display: grid;
  grid-template-rows: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}
.chapter-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
}
.chapter-flow::before {
  content: "";
  position: absolute;
  left: 70px;
  right: 70px;
  top: 50%;
  border-top: 2px dashed rgba(47, 154, 255, 0.65);
}
.chapter-node {
  position: relative;
  z-index: 1;
  height: 60px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(9, 31, 59, 0.96);
  color: #37a8ff;
  text-align: left;
  cursor: pointer;
}
.chapter-node.green { color: #35e2a8; }
.chapter-node.purple { color: #b18cff; }
.chapter-node.gold { color: #f4b52d; }
.chapter-node.cyan { color: #29d7f5; }
.chapter-node.active {
  box-shadow: inset 0 0 0 1px rgba(49, 146, 238, 0.45), 0 0 20px rgba(22, 132, 238, 0.14);
}
.chapter-node span {
  grid-row: 1 / -1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.22);
  color: currentColor;
  font-weight: 900;
  font-size: 18px;
}
.chapter-node b {
  color: #fff;
  font-size: 13px;
}
.chapter-node small {
  color: #c2d2e5;
  font-size: 12px;
}
.thesis-safe-strip {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 180px 126px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #1684ee;
  border-radius: 8px;
  background: rgba(7, 30, 58, 0.78);
}
.safe-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.2);
  color: #78caff;
  font-size: 28px;
}
.thesis-safe-strip b {
  color: #f3f9ff;
}
.thesis-safe-strip p {
  margin: 5px 0 0;
  color: #c7d7e8;
  font-size: 13px;
  line-height: 1.4;
}
.structure-score {
  padding-left: 22px;
  border-left: 1px solid var(--line-soft);
}
.structure-score small {
  display: block;
  color: #9fb4ca;
  margin-bottom: 5px;
}
.structure-score strong {
  color: #2ee1a7;
  font-size: 26px;
}
.status-box {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(33, 212, 155, 0.28);
  border-radius: 7px;
  background: rgba(33, 212, 155, 0.12);
  color: #2ee1a7;
}
.status-box svg {
  width: 23px;
  height: 23px;
}
.thesis-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(420px, 0.62fr) minmax(0, 1fr);
  gap: 14px;
}
.thesis-pdf-panel,
.breakdown-panel {
  min-height: 0;
  display: grid;
  overflow: hidden;
}
.thesis-pdf-panel {
  grid-template-rows: 45px minmax(0, 1fr);
}
.thesis-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.thesis-panel-head h2 {
  margin: 0;
  color: #eef7ff;
  font-size: 15px;
}
#pdfFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #eaf1f8;
}
.thesis-breakdown-side {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 98px;
  gap: 12px;
}
.breakdown-panel {
  grid-template-rows: 50px minmax(0, 1fr) 82px;
}
.breakdown-actions {
  display: flex;
  gap: 8px;
}
.breakdown-table-wrap {
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
}
.breakdown-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  color: #d7e6f6;
  table-layout: fixed;
}
.breakdown-table th {
  height: 38px;
  color: #b9cbe0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
}
.breakdown-table td {
  padding: 9px 8px;
  border-top: 1px solid var(--line-soft);
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.32;
}
.breakdown-table th:nth-child(1),
.breakdown-table td:nth-child(1) { width: 18%; }
.breakdown-table th:nth-child(2),
.breakdown-table td:nth-child(2) { width: 42%; }
.breakdown-table th:nth-child(3),
.breakdown-table td:nth-child(3) { width: 23%; }
.breakdown-table th:nth-child(4),
.breakdown-table td:nth-child(4) { width: 17%; }
.break-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(22, 132, 238, 0.18);
  color: #78caff;
  font-weight: 900;
}
.break-icon.green { color: #35e2a8; background: rgba(33, 212, 155, 0.14); }
.break-icon.purple { color: #b18cff; background: rgba(158, 114, 255, 0.14); }
.break-icon.gold { color: #f4b52d; background: rgba(244, 181, 45, 0.13); }
.link-chip {
  display: inline-flex;
  padding: 8px 10px;
  border: 1px solid rgba(33, 212, 155, 0.18);
  border-radius: 7px;
  background: rgba(33, 212, 155, 0.09);
  color: #b9e8db;
}
.alignment-good {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.14);
  color: #2ee1a7;
  font-weight: 900;
}
.breakdown-table td:last-child b {
  color: #2ee1a7;
  font-size: 12px;
}
.breakdown-table td:last-child small {
  display: block;
  margin-left: 36px;
  color: #d7e6f6;
}
.insight-box {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 12px 12px;
  padding: 14px;
  border: 1px solid rgba(158, 114, 255, 0.42);
  border-radius: 8px;
  background: rgba(32, 25, 75, 0.48);
}
.insight-box span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #b18cff;
  font-size: 30px;
}
.insight-box p {
  margin: 5px 0 0;
  color: #cbd9e9;
  font-size: 12px;
  line-height: 1.42;
}
.thesis-score-panel {
  display: grid;
  grid-template-columns: 1fr 260px;
  align-items: center;
  padding: 14px 18px;
  overflow: hidden;
}
.legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  color: #aebfd3;
  font-size: 11px;
}
.legend-row b {
  flex-basis: 100%;
  color: #9fb4ca;
}
.legend-row i {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.legend-row .good { background: #21d49b; }
.legend-row .ok { background: #2d8bea; }
.legend-row .warn { background: #f4b52d; }
.legend-row .bad { background: #e84b67; }
.overall-score {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding-left: 18px;
  border-left: 1px solid var(--line-soft);
}
.overall-score > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#21d49b 0 360deg, rgba(126,170,214,.16) 0);
}
.overall-score > span b {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #08213d;
  color: #2ee1a7;
  font-size: 13px;
}
.overall-score b {
  color: #2ee1a7;
}
.overall-score p {
  margin: 4px 0 0;
  color: #cbd9e9;
  font-size: 11px;
}

.report-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 78px 198px 132px minmax(0, 1fr);
  gap: 12px;
  padding: 20px 30px 24px;
  overflow: hidden;
}
.report-topbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.report-topbar h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1;
}
.report-topbar p {
  margin: 0;
  color: #c3d3e4;
  font-size: 14px;
}
.report-executive {
  padding: 16px;
  overflow: hidden;
}
.report-executive h2,
.report-finding h2,
.report-period h2,
.report-options h2,
.report-preview-head h2 {
  margin: 0;
  color: #eff7ff;
  font-size: 15px;
}
.report-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.report-metric {
  min-height: 116px;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 30px 20px 1fr;
  column-gap: 13px;
  align-items: center;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.76);
}
.report-metric.blue { color: #37a8ff; }
.report-metric.green { color: #35e2a8; }
.report-metric.purple { color: #b18cff; }
.report-metric.gold { color: #f4b52d; }
.report-metric svg {
  grid-row: 1 / -1;
  width: 42px;
  height: 42px;
  color: currentColor;
}
.report-metric strong {
  color: #fff;
  font-size: 23px;
  line-height: 1;
}
.report-metric span {
  color: currentColor;
  font-weight: 800;
  font-size: 12px;
}
.report-metric p {
  grid-column: 2;
  margin: 6px 0 0;
  color: #c5d4e5;
  font-size: 11px;
  line-height: 1.35;
}
.report-summary-row {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
}
.report-finding,
.report-period {
  padding: 16px 18px;
  overflow: hidden;
}
.report-finding p {
  margin: 10px 0 0;
  color: #cbd9e9;
  font-size: 13px;
  line-height: 1.48;
}
.report-period {
  display: grid;
  align-content: start;
  gap: 16px;
}
.report-period p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #cbd9e9;
  font-size: 13px;
}
.report-main-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: 12px;
}
.report-options,
.report-preview-panel {
  min-height: 0;
  overflow: hidden;
}
.report-options {
  display: grid;
  grid-template-rows: 28px 188px minmax(0, 1fr) 28px;
  gap: 12px;
  padding: 16px;
}
.export-option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.export-option {
  display: grid;
  grid-template-rows: 30px 1fr 36px;
  gap: 8px;
  padding: 14px;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: rgba(9, 33, 62, 0.74);
}
.export-option.pdf { color: #ff5f7d; }
.export-option.ppt { color: #f4b52d; }
.export-option.html { color: #35e2a8; }
.export-option b {
  color: #fff;
  font-size: 14px;
}
.export-option p {
  margin: 0;
  color: #cbd9e9;
  font-size: 11px;
  line-height: 1.35;
}
.export-option button {
  border: 1px solid currentColor;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: currentColor;
  cursor: pointer;
  font-weight: 800;
}
.report-contents {
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(7, 27, 52, 0.58);
}
.report-contents h3 {
  margin: 0 0 12px;
  color: #f0f7ff;
  font-size: 13px;
}
.report-contents ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #cbd9e9;
  font-size: 12px;
}
.report-contents li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
}
.report-contents span {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.16);
  color: #35e2a8;
  font-size: 11px;
  font-weight: 900;
}
.report-note {
  margin: 0;
  color: #a8bbd0;
  font-size: 12px;
}
.report-preview-panel {
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr);
}
.report-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.report-preview-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d7e6f6;
  font-size: 12px;
}
.report-preview-controls button {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(8, 30, 57, 0.78);
  color: #d7e6f6;
  cursor: pointer;
}
.report-preview {
  min-height: 0;
  overflow: auto;
  padding: 18px;
  background: rgba(2, 10, 20, 0.38);
}
.report-paper {
  width: min(760px, 100%);
  min-height: 980px;
  margin: 0 auto;
  padding: 36px 48px;
  background: #fff;
  color: #172033;
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  font-family: Inter, Arial, sans-serif;
}
.report-paper header {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: center;
}
.report-logo {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0d5bb0;
  color: #fff;
  font-weight: 900;
}
.report-paper h1 {
  margin: 0 0 8px;
  color: #0b2445;
  font-size: 20px;
}
.report-paper h2 {
  margin: 0;
  color: #27364a;
  font-size: 13px;
  line-height: 1.35;
}
.report-paper dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 28px 0;
  font-size: 12px;
  line-height: 1.55;
}
.report-paper dt {
  font-weight: 800;
}
.report-paper dd {
  margin: 0;
}
.report-paper section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #cfd8e3;
}
.report-paper h3 {
  margin: 0 0 10px;
  color: #0b2445;
  font-size: 13px;
}
.report-paper p,
.report-paper li {
  color: #334155;
  font-size: 12px;
  line-height: 1.55;
}
.paper-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.paper-metrics span {
  display: grid;
  gap: 4px;
  padding: 12px 8px;
  border: 1px solid #d8e0ea;
  border-radius: 6px;
  text-align: center;
  font-size: 10px;
}
.paper-metrics b {
  color: #0d5bb0;
  font-size: 18px;
}

.soft-mode {
  --text: #102033;
  --muted: #53677d;
}

@media (min-width: 1181px) {
  body { overflow: hidden; }
}

@media (max-height: 880px) and (min-width: 1181px) {
  .app-shell { min-height: 700px; }
  .sidebar { min-height: 700px; padding-top: 14px; padding-bottom: 12px; }
  .main-content {
    min-height: 700px;
    grid-template-rows: 64px 98px minmax(260px, 1fr) minmax(248px, 0.84fr);
    gap: 11px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .brand-block { height: 66px; }
  .brand-mark { width: 50px; height: 50px; }
  .brand-block strong { font-size: 20px; }
  .brand-block b { font-size: 14px; }
  .nav-list { gap: 3px; padding: 11px 0 8px; }
  .nav-list a { min-height: 38px; font-size: 13px; }
  .research-card { padding: 12px 14px; }
  .info-line { margin: 8px 0; }
  .metric-card { padding: 12px; grid-template-columns: 52px 1fr; }
  .metric-icon { width: 52px; height: 52px; }
  .metric-card strong { font-size: 22px; }
  .analysis-panel, .quick-panel { padding: 14px; }
  .flow-steps { padding-top: 15px; height: calc(100% - 74px); }
  .step-badge { width: 64px; height: 64px; }
  .summary-strip { min-height: 64px; padding: 10px 12px; }
  .quick-grid { gap: 10px; }
  .quick-card { padding: 10px; min-height: 0; }
  .quick-card span { width: 46px; height: 46px; }
  .question-row { min-height: 39px; }
  .theory-content {
    min-height: 700px;
    grid-template-rows: 64px 52px minmax(320px, 0.96fr) minmax(244px, 1fr);
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .concept-map {
    grid-template-rows: minmax(164px, 1fr) 92px;
    gap: 10px;
  }
  .concept-node {
    grid-template-rows: 20px 32px 22px 20px minmax(44px, 1fr);
    padding: 10px 10px 9px;
  }
  .concept-node svg { width: 30px; height: 30px; }
  .concept-node b { font-size: 16px; }
  .concept-node p { font-size: 10px; line-height: 1.25; }
  .outcome-card { padding: 10px 12px; }
  .outcome-card strong { font-size: 19px; }
  .support-item { padding: 8px 10px; }
  .concept-insight { padding: 8px 10px; }
  .question-detail-content {
    min-height: 700px;
    grid-template-rows: 76px minmax(0, 1fr);
    gap: 10px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .detail-main {
    grid-template-rows: 98px 216px 76px minmax(184px, 1fr) 50px;
    gap: 8px;
  }
  .detail-flow-card {
    grid-template-rows: 24px 30px 16px 28px minmax(38px, 1fr);
    padding: 9px 8px 8px;
  }
  .detail-flow-card svg { width: 28px; height: 28px; }
  .detail-question-card h2 { font-size: 17px; }
  .detail-answer-panel { padding: 12px 14px; }
  .simulation-content {
    min-height: 700px;
    grid-template-rows: 66px 40px minmax(0, 1fr);
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 12px;
  }
  .simulation-main {
    grid-template-rows: 148px 178px minmax(0, 1fr) 52px;
    gap: 8px;
  }
  .simulation-side {
    grid-template-rows: 104px 218px 154px minmax(0, 1fr);
    gap: 8px;
  }
  .simulation-question-panel h2 {
    margin: 14px 0;
    font-size: 18px;
  }
  .simulation-support-card {
    min-height: 120px;
    padding: 10px 9px;
  }
  .simulation-support-card svg { width: 26px; height: 26px; }
  .simulation-answer-panel p {
    padding: 12px;
    font-size: 13px;
  }
  .simulation-timer-card strong { font-size: 24px; }
  .confidence-gauge {
    width: 150px;
    height: 80px;
  }
}

@media (max-width: 1180px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .app-shell {
    display: block;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .sidebar {
    height: auto;
    min-height: auto;
    position: relative;
  }
  .brand-block { height: auto; padding-bottom: 16px; }
  .nav-list {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .main-content {
    height: auto;
    min-height: auto;
    display: grid;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .topbar, .question-head { flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid { grid-template-columns: 1fr; }
  .analysis-panel, .quick-panel, .question-panel { overflow: visible; }
  .flow-steps { height: auto; grid-template-columns: 1fr; gap: 12px; }
  .step {
    display: grid;
    grid-template-columns: 78px 1fr;
    text-align: left;
  }
  .step:not(:last-child)::after { display: none; }
  .step-badge { margin: 0; }
  .step p { max-width: none; margin: 0; }
  .quick-grid { height: auto; }
  .question-panel { grid-template-rows: auto; }
  .question-list {
    max-height: 420px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .question-row {
    grid-template-columns: 34px 1fr;
    min-height: 52px;
  }
  .tag-group, .confidence, .row-arrow { grid-column: 2; justify-content: flex-start; }
  .analysis-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .analysis-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }
  .analysis-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .analysis-filterbar,
  .analysis-metrics,
  .analysis-charts,
  .analysis-interpretation,
  .presentation-summary,
  .presentation-workspace,
  .report-metrics,
  .report-summary-row,
  .report-main-grid,
  .export-option-grid,
  .thesis-flow-panel,
  .chapter-flow,
  .thesis-safe-strip,
  .thesis-workspace,
  .thesis-score-panel,
  .method-tabs,
  .method-flow-cards,
  .method-middle,
  .method-detail-grid,
  .concept-track,
  .concept-outcomes,
  .theory-bottom,
  .detail-layout,
  .detail-flow,
  .answer-qualities,
  .detail-data-grid,
  .simulation-layout,
  .simulation-support-grid,
  .simulation-nav,
  .examiner-grid {
    grid-template-columns: 1fr;
  }
  .question-detail-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .simulation-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .theory-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .method-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .presentation-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .thesis-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .report-content {
    height: auto;
    min-height: auto;
    grid-template-rows: auto;
    overflow: visible;
    padding: 18px;
  }
  .report-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .detail-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }
  .simulation-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }
  .simulation-filter-row {
    flex-wrap: wrap;
  }
  .report-executive,
  .report-options,
  .report-preview-panel {
    overflow: visible;
  }
  .report-options {
    grid-template-rows: auto;
  }
  .report-preview {
    max-height: 720px;
  }
  .report-contents ul,
  .paper-metrics {
    grid-template-columns: 1fr;
  }
  .thesis-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }
  .thesis-flow-panel {
    grid-template-rows: auto;
  }
  .chapter-flow::before { display: none; }
  .chapter-node { min-height: 64px; }
  .thesis-pdf-panel {
    min-height: 620px;
  }
  .thesis-breakdown-side {
    grid-template-rows: auto;
  }
  .breakdown-table-wrap {
    overflow-x: auto;
  }
  .breakdown-table {
    min-width: 860px;
  }
  .presentation-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 14px;
  }
  .presentation-summary {
    grid-template-rows: auto;
  }
  .presentation-workspace,
  .presentation-side,
  .slide-viewer-panel {
    min-height: 0;
  }
  .slide-list-panel {
    max-height: 420px;
  }
  .slide-stage {
    min-height: 320px;
  }
  .slide-controls,
  .section-jump-row,
  .detail-nav {
    grid-template-columns: 1fr;
  }
  .section-jump {
    flex-wrap: wrap;
  }
  .method-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .methodology-flow-panel,
  .method-explain,
  .profile-panel,
  .method-detail-section,
  .theory-map-panel,
  .theory-support-panel,
  .theory-position-panel {
    overflow: visible;
  }
  .detail-main,
  .detail-side,
  .detail-answer-card,
  .simulation-main,
  .simulation-side,
  .simulation-confidence-card,
  .simulation-note-card,
  .simulation-examiner-card,
  .simulation-answer-panel {
    grid-template-rows: auto;
  }
  .detail-question-card,
  .detail-visual-panel,
  .detail-neutral-card,
  .detail-answer-card,
  .related-panel,
  .detail-safe-panel,
  .simulation-question-panel,
  .simulation-support-panel,
  .simulation-answer-panel,
  .simulation-timer-card,
  .simulation-confidence-card,
  .simulation-note-card,
  .simulation-examiner-card {
    overflow: visible;
  }
  .simulation-support-card i {
    display: none;
  }
  .detail-flow .detail-arrow { display: none; }
  .detail-neutral-card {
    grid-template-columns: 1fr;
  }
  .detail-neutral-card b {
    justify-self: start;
  }
  .concept-map,
  .theory-position-panel {
    grid-template-rows: auto;
  }
  .concept-link { display: none; }
  .concept-legend { flex-wrap: wrap; }
  .method-flow-cards::before { display: none; }
  .method-step { min-height: 170px; }
  .profile-grid { grid-template-columns: 1fr; height: auto; }
  .profile-facts li { grid-template-columns: 1fr; gap: 3px; }
  .chart-panel {
    min-height: 340px;
  }
  .paired-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 8px;
  }
}

@media (max-width: 680px) {
  .metric-grid, .quick-grid { grid-template-columns: 1fr; }
  .quick-grid { grid-template-rows: auto; }
  .top-actions, .question-toolbar { width: 100%; justify-content: flex-start; }
  .search-wrap, .question-toolbar select { width: 100%; }
  .analysis-actions .action-btn,
  .analysis-actions .user-chip,
  .filter-field,
  .analysis-filterbar .action-btn {
    width: 100%;
  }
  .distribution-table div,
  .paired-stats,
  .detail-question-head,
  .detail-tabs,
  .detail-theory-list li {
    grid-template-columns: 1fr;
  }
  .detail-question-head .action-btn,
  .detail-nav-btn {
    width: 100%;
  }
  .answer-backdrop { padding: 16px; }
  .answer-modal {
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    padding: 24px 20px 22px;
  }
  .answer-modal h3 {
    margin-right: 34px;
    font-size: 18px;
  }
  .answer-modal p { font-size: 14px; }
}


/* ================================================================
   PENYUSUN JAWABAN AMAN (mockup #9)
   ================================================================ */
.safe-builder-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 92px auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px 30px 18px;
  overflow: hidden;
  min-width: 0;
}
.safe-question-card {
  display: grid;
  gap: 10px;
  padding: 14px 18px 16px;
  min-height: 0;
}
.safe-question-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.safe-risk-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 28, 53, 0.7);
  font-weight: 700;
  font-size: 12px;
  color: #cfe1f6;
}
.safe-risk-chip svg { width: 14px; height: 14px; }
.safe-risk-chip.risk-tinggi { color: #ff8c8c; border-color: rgba(255, 110, 110, 0.45); }
.safe-risk-chip.risk-sedang { color: #f4b52d; border-color: rgba(244, 181, 45, 0.45); }
.safe-risk-chip.risk-aman { color: #21d49b; border-color: rgba(33, 212, 155, 0.45); }
.safe-picker {
  display: grid;
  gap: 8px;
}
.safe-picker-label {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 700;
}
.safe-picker-controls {
  display: grid;
  grid-template-columns: 1.1fr 2fr 1fr;
  gap: 10px;
}
.safe-picker-controls .search-wrap { width: 100%; }
.safe-picker-controls select {
  appearance: none;
  background: rgba(8, 28, 53, 0.85);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 0 12px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
}
.safe-question-card h2 {
  font-size: 20px;
  line-height: 1.3;
  color: #f3f9ff;
  margin: 0;
}
.safe-question-basis {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.safe-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: var(--gap);
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
}
.safe-builder-main {
  display: grid;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.safe-builder-main::-webkit-scrollbar { width: 9px; }
.safe-builder-main::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.safe-builder-main::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.safe-builder-side {
  display: grid;
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
  align-content: start;
}
.safe-builder-side::-webkit-scrollbar { width: 9px; }
.safe-builder-side::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.safe-builder-side::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

.safe-step-card {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  border-left: 3px solid var(--blue);
}
.safe-step-card.green { border-left-color: var(--green); }
.safe-step-card.purple { border-left-color: var(--purple); }
.safe-step-card.gold { border-left-color: var(--gold); }
.safe-step-card.cyan { border-left-color: var(--cyan); }

.safe-step-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: start;
}
.safe-step-num {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 132, 238, 0.18);
  color: #6fbfff;
  font-weight: 900;
  font-size: 18px;
  border: 1px solid rgba(22, 132, 238, 0.45);
}
.safe-step-card.green .safe-step-num { background: rgba(33, 212, 155, 0.18); color: #35e2a8; border-color: rgba(33, 212, 155, 0.45); }
.safe-step-card.purple .safe-step-num { background: rgba(158, 114, 255, 0.18); color: #b18cff; border-color: rgba(158, 114, 255, 0.45); }
.safe-step-card.gold .safe-step-num { background: rgba(244, 181, 45, 0.18); color: #f4b52d; border-color: rgba(244, 181, 45, 0.45); }
.safe-step-card.cyan .safe-step-num { background: rgba(38, 213, 245, 0.18); color: #29d7f5; border-color: rgba(38, 213, 245, 0.45); }
.safe-step-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 4px;
}
.safe-step-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  color: #f6fbff;
  line-height: 1.3;
}
.safe-step-head p {
  margin: 0;
  color: #b8cae0;
  font-size: 13px;
  line-height: 1.55;
}
.safe-step-fill {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 28, 53, 0.85);
  color: #cfe1f6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.safe-step-fill:hover { background: rgba(22, 132, 238, 0.2); border-color: rgba(22, 132, 238, 0.55); color: #fff; }
.safe-step-fill svg { width: 14px; height: 14px; }

.safe-step-input {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  background: rgba(3, 16, 32, 0.85);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: 500 14px/1.55 "Inter", sans-serif;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.safe-step-input:focus {
  outline: none;
  border-color: rgba(22, 132, 238, 0.65);
  box-shadow: 0 0 0 3px rgba(22, 132, 238, 0.18);
}

.safe-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.safe-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(100, 154, 211, 0.4);
  background: rgba(8, 28, 53, 0.45);
  color: #cfe1f6;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  max-width: 100%;
}
.safe-suggest-chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.safe-suggest-chip:hover { background: rgba(22, 132, 238, 0.18); border-color: rgba(22, 132, 238, 0.55); color: #fff; }

.safe-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}
.safe-data-cell {
  background: rgba(3, 16, 32, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.safe-data-cell span {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.safe-data-cell strong {
  font-size: 18px;
  color: #f6fbff;
  font-weight: 800;
}
.safe-data-cell small {
  font-size: 11px;
  color: #9eb2c8;
}

.safe-theory-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.safe-theory-chip {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(8, 28, 53, 0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.safe-theory-chip svg { width: 18px; height: 18px; color: var(--purple); }
.safe-theory-chip b { font-size: 14px; color: #fff; }
.safe-theory-chip span { font-size: 12px; color: #b8cae0; line-height: 1.45; }
.safe-theory-chip:hover,
.safe-theory-chip.active {
  border-color: rgba(158, 114, 255, 0.55);
  background: rgba(158, 114, 255, 0.12);
}

.safe-warn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.safe-warn-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #f9d6c0;
  background: rgba(212, 84, 84, 0.08);
  border: 1px solid rgba(212, 84, 84, 0.25);
  padding: 8px 10px;
  border-radius: 8px;
  line-height: 1.5;
}
.safe-warn-list svg { width: 14px; height: 14px; flex: 0 0 auto; color: #ff8c8c; margin-top: 2px; }

.safe-preview-card {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}
.safe-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.safe-preview-meta {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.safe-preview-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.safe-preview-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 0.25s ease;
}
.safe-preview-body {
  display: grid;
  gap: 10px;
  background: rgba(3, 16, 32, 0.65);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  min-height: 180px;
  font-size: 13px;
  color: #e3edf9;
  line-height: 1.55;
}
.safe-preview-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}
.safe-preview-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
}
.safe-preview-step b {
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.safe-preview-step p {
  margin: 2px 0 0;
  color: #f3f9ff;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.safe-preview-num {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 132, 238, 0.2);
  color: #6fbfff;
  font-weight: 800;
  font-size: 12px;
  border: 1px solid rgba(22, 132, 238, 0.45);
}
.safe-preview-step.step-1 .safe-preview-num { background: rgba(33, 212, 155, 0.2); color: #35e2a8; border-color: rgba(33, 212, 155, 0.45); }
.safe-preview-step.step-2 .safe-preview-num { background: rgba(158, 114, 255, 0.2); color: #b18cff; border-color: rgba(158, 114, 255, 0.45); }
.safe-preview-step.step-3 .safe-preview-num { background: rgba(244, 181, 45, 0.2); color: #f4b52d; border-color: rgba(244, 181, 45, 0.45); }
.safe-preview-step.step-4 .safe-preview-num { background: rgba(38, 213, 245, 0.2); color: #29d7f5; border-color: rgba(38, 213, 245, 0.45); }
.safe-preview-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.safe-preview-actions .action-btn { min-width: 0; width: 100%; padding: 0 12px; font-size: 12px; }

.safe-confidence-card {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}
.safe-confidence-meter {
  display: flex;
  align-items: center;
  gap: 12px;
}
.safe-confidence-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.safe-confidence-track span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 0.25s ease;
}
.safe-confidence-track span.low { background: linear-gradient(90deg, #ff6e6e, var(--gold)); }
.safe-confidence-track span.mid { background: linear-gradient(90deg, var(--gold), var(--blue)); }
.safe-confidence-track span.high { background: linear-gradient(90deg, var(--green), var(--cyan)); }
.safe-confidence-card strong {
  font-size: 22px;
  font-weight: 900;
  color: #f6fbff;
  min-width: 64px;
  text-align: right;
}
.safe-confidence-checks {
  display: grid;
  gap: 6px;
}
.safe-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #b8cae0;
}
.safe-check svg { width: 14px; height: 14px; color: #ff8c8c; }
.safe-check.ok { color: #d6f3e3; }
.safe-check.ok svg { color: #35e2a8; }

.safe-tips-card,
.safe-related-card { padding: 16px 18px 18px; display: grid; gap: 10px; }
.safe-tips-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 12.5px;
  color: #cfe1f6;
}
.safe-tips-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.safe-tips-card svg { width: 14px; height: 14px; color: #35e2a8; margin-top: 2px; flex: 0 0 auto; }
.safe-tips-card li:last-child svg { color: #ff8c8c; }

.safe-related-card .related-question {
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  text-align: left;
  color: var(--text);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.safe-related-card .related-question:hover { background: rgba(22, 132, 238, 0.12); border-color: rgba(22, 132, 238, 0.45); }
.safe-related-card .related-question span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(22, 132, 238, 0.45);
  color: #6fbfff;
  font-weight: 800;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.safe-related-card .related-question p { margin: 0; font-size: 12.5px; color: #cfe1f6; line-height: 1.5; }
.safe-empty { font-style: italic; color: var(--muted); font-size: 12.5px; margin: 0; }

@media (max-width: 1180px) {
  .safe-builder-content { overflow: auto; height: auto; min-height: 0; padding: 16px 18px 24px; }
  .safe-builder-layout { grid-template-columns: 1fr; overflow: visible; }
  .safe-builder-main, .safe-builder-side { overflow: visible; padding-right: 0; }
  .safe-picker-controls { grid-template-columns: 1fr 1fr; }
  .safe-theory-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .safe-builder-content { padding: 16px 14px 24px; }
  .safe-step-head { grid-template-columns: 36px 1fr; }
  .safe-step-fill { grid-column: 1 / -1; justify-self: end; }
  .safe-picker-controls { grid-template-columns: 1fr; }
  .safe-preview-actions { grid-template-columns: 1fr; }
}


/* ================================================================
   FIT FULLSCREEN AUDIT - sidebar scroll & main shell consistency
   ================================================================ */
.sidebar .brand-block { flex: 0 0 auto; }
.sidebar .nav-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.sidebar .nav-list::-webkit-scrollbar { width: 8px; }
.sidebar .nav-list::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.sidebar .nav-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.sidebar .research-card,
.sidebar .about-card { flex: 0 0 auto; }

/* Topbar action wrapping safety so headers tidak overflow keluar */
.top-actions,
.analysis-actions { row-gap: 8px; }

/* Pastikan elemen <main> turunan app-shell selalu min-width 0 agar grid item tidak melebar */
.app-shell > main { min-width: 0; }


/* ================================================================
   TESIS VIEWER - perbaikan scroll ganda & teks bertumpuk
   ================================================================ */
.thesis-content { padding: 18px 24px 18px; }

/* Tabel breakdown: scroll vertikal hanya satu, tidak bocor ke body */
.breakdown-table-wrap {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.breakdown-table-wrap::-webkit-scrollbar { width: 8px; }
.breakdown-table-wrap::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.breakdown-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.breakdown-table {
  height: auto;
  table-layout: fixed;
}
.breakdown-table th,
.breakdown-table td {
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.breakdown-table th { padding: 10px 8px; }
.breakdown-table td { padding: 10px 8px; font-size: 11.5px; line-height: 1.4; }

/* Kolom 1: Bagian Penting -- ikon + teks rapi tidak tumpuk */
.cell-part {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: start;
}
.cell-part-text {
  color: #f1f7ff;
  font-weight: 700;
  line-height: 1.3;
}
.break-icon {
  margin: 0;
  flex: 0 0 auto;
}

/* Kolom 2: Ringkasan Isi -- supaya bisa wrap rapi */
.cell-summary {
  color: #d6e4f4;
  line-height: 1.45;
}

/* Kolom 3: Keterkaitan -- chip wrap */
.link-chip {
  display: inline-block;
  padding: 6px 10px;
  white-space: normal;
  line-height: 1.35;
  font-size: 11.5px;
}

/* Kolom 4: Alignment -- "Sangat Baik" dan persen tidak tumpuk */
.cell-alignment {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
}
.alignment-good { margin: 0; flex: 0 0 auto; }
.cell-alignment-text { display: flex; flex-direction: column; min-width: 0; }
.cell-alignment-text b { color: #2ee1a7; font-size: 12px; line-height: 1.2; }
.cell-alignment-text small { display: block; color: #a8bdd1; font-size: 11px; margin-top: 2px; }
/* Override aturan lama yang membuat persen ke baris bawah bertumpuk */
.breakdown-table td:last-child small { margin-left: 0; color: #a8bdd1; }

/* PDF iframe -- tidak boleh ada double scroll dari container */
.thesis-pdf-panel { overflow: hidden; }
#pdfFrame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #eaf1f8;
}


/* ================================================================
   ANALISIS DATA - container chart untuk ECharts
   ================================================================ */
.analysis-charts .chart-svg {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.analysis-charts .chart-panel { position: relative; }
#meanSparkline { width: 100%; height: 54px; }
#distributionChart,
#radarChart,
#pairedChart { width: 100%; height: 100%; min-height: 200px; }
.chart-panel canvas { display: block; }


/* ================================================================
   ANALISIS DATA - Raw Data Explorer (CUQ - Raw Data Responden)
   ================================================================ */
.raw-explorer {
  display: grid;
  gap: 12px;
  min-height: 0;
}
.raw-filterbar {
  padding: 14px 18px;
  display: grid;
  gap: 12px;
}
.raw-filter-row {
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(6, minmax(140px, 1fr)) auto;
  gap: 10px;
  align-items: center;
}
.raw-filter-row .raw-search-wrap { width: 100%; height: 36px; padding: 0 12px; }
.raw-filter-row .raw-search-wrap input { font-size: 13px; }
.raw-filter-row .select-control { height: 36px; }
.raw-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.raw-pill {
  flex: 1 1 130px;
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.78);
}
.raw-pill b { color: #f6fbff; font-size: 18px; font-weight: 800; }
.raw-pill small { color: var(--muted); font-size: 11px; line-height: 1.3; }

.raw-charts {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr;
  gap: 12px;
}
.raw-chart-panel {
  padding: 14px 16px 18px;
  display: grid;
  gap: 10px;
  min-height: 320px;
}
.raw-chart-panel h2 { margin: 0; color: #eef7ff; font-size: 15px; line-height: 1.2; }
.raw-chart-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 280px;
}
.raw-donut {
  width: 100%;
  height: 100%;
  min-height: 220px;
}
.raw-heatmap {
  width: 100%;
  height: 220px;
  min-height: 220px;
}

.raw-table-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 14px 16px 14px;
  min-height: 0;
}
.raw-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.raw-table-head h2 { margin: 0; color: #eef7ff; font-size: 15px; }
.raw-table-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.raw-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.raw-toggle input { accent-color: #1684ee; }
.raw-table-wrap {
  min-height: 0;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.raw-table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.raw-table-wrap::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.raw-table-wrap::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.raw-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  color: #d7e6f6;
}
.raw-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(7, 25, 47, 0.96);
  color: #b9cbe0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.raw-table th.sortable { cursor: pointer; user-select: none; }
.raw-table th.sortable::after {
  content: " \2195";
  color: rgba(184, 202, 224, 0.45);
  font-weight: 700;
}
.raw-table th.sortable.asc::after { content: " \25B2"; color: #6fbfff; }
.raw-table th.sortable.desc::after { content: " \25BC"; color: #6fbfff; }
.raw-table th.num, .raw-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.raw-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  vertical-align: middle;
}
.raw-table tbody tr { cursor: pointer; transition: background 0.12s ease; }
.raw-table tbody tr:hover { background: rgba(22, 132, 238, 0.1); }
.raw-id-cell { display: flex; flex-direction: column; line-height: 1.25; }
.raw-id-cell b { color: #f3f9ff; font-size: 12.5px; font-weight: 700; }
.raw-id-cell small { color: var(--muted); font-size: 11px; }
.raw-table .diff-pos { color: #35e2a8; font-weight: 700; }
.raw-table .diff-neg { color: #ff8c8c; font-weight: 700; }
.raw-table .diff-zero { color: #b8cae0; font-weight: 600; }
.raw-empty {
  margin: 16px 0 8px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
  font-size: 12.5px;
}

.raw-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(2, 10, 22, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.raw-detail-backdrop[hidden] { display: none; }
.raw-detail-modal {
  width: min(820px, 100%);
  max-height: 86dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid #2f85d8;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.raw-detail-modal header {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  gap: 14px;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
}
.raw-detail-avatar {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(22, 132, 238, 0.55);
  color: #6fbfff;
  font-weight: 800;
  font-size: 16px;
}
.raw-detail-modal header h3 { margin: 0; color: #f6fbff; font-size: 18px; }
.raw-detail-modal header p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.raw-detail-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.85);
  color: #cfe1f6;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.raw-detail-close:hover { background: rgba(212, 84, 84, 0.18); border-color: rgba(212, 84, 84, 0.5); color: #fff; }
.raw-detail-body {
  display: grid;
  gap: 14px;
  padding: 20px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.raw-detail-body::-webkit-scrollbar { width: 9px; }
.raw-detail-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.raw-detail-body::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.raw-detail-context {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.raw-detail-context > div {
  background: rgba(7, 25, 47, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.raw-detail-context b { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; }
.raw-detail-context span { color: #f3f9ff; font-size: 12.5px; font-weight: 600; }
.raw-detail-totals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.raw-total-cell {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.78);
}
.raw-total-cell small { color: var(--muted); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; }
.raw-total-cell strong { color: #f6fbff; font-size: 22px; font-weight: 800; }
.raw-total-cell.formal strong { color: #6fbfff; }
.raw-total-cell.genz strong { color: #35e2a8; }
.raw-total-cell.diff.pos strong { color: #35e2a8; }
.raw-total-cell.diff.neg strong { color: #ff8c8c; }
.raw-total-cell.diff.zero strong { color: #b8cae0; }
.raw-detail-chart {
  width: 100%;
  height: 280px;
  min-height: 260px;
}

@media (max-width: 1280px) {
  .raw-filter-row { grid-template-columns: 1fr 1fr 1fr; }
  .raw-filter-row .action-btn { grid-column: 1 / -1; justify-self: end; }
  .raw-charts { grid-template-columns: 1fr; }
  .raw-chart-row { grid-template-columns: 1fr 1fr; height: auto; }
  .raw-donut { height: 240px; }
  .raw-detail-context { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .raw-filter-row { grid-template-columns: 1fr; }
  .raw-chart-row { grid-template-columns: 1fr; }
  .raw-detail-context { grid-template-columns: 1fr; }
  .raw-detail-totals { grid-template-columns: 1fr; }
}

/* analisis-content default fixed grid pakai overflow:hidden -- saat raw mode aktif,
   beri ruang scroll vertikal karena explorer lebih panjang */
.analysis-content:has(#rawSection:not([hidden])) {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
  grid-template-rows: auto auto auto;
}


/* ================================================================
   ANALISIS DATA - kompak fit untuk layar 1366-1500 (zoom 100% laptop)
   Mengembalikan tampilan ideal yang setara dengan zoom 90%, tanpa
   user perlu mengubah zoom browser.
   ================================================================ */
.analysis-content {
  padding: 14px 20px 16px;
  gap: 10px;
}
.analysis-topbar { gap: 14px; padding-bottom: 8px; }
.analysis-title h1 { font-size: 22px; margin-top: 8px; }
.analysis-title p { font-size: 13px; line-height: 1.4; }

.analysis-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.analysis-actions .action-btn { min-width: auto; padding: 0 12px; height: 34px; font-size: 12.5px; }
.analysis-actions .icon-only { width: 34px; height: 34px; }
.analysis-actions .user-chip { height: 34px; padding: 0 8px; gap: 8px; }
.analysis-actions .user-chip .avatar { width: 28px; height: 28px; font-size: 13px; }
.analysis-actions .user-chip small { font-size: 11px; }

/* Filterbar -- 5 select + tombol Reset */
.analysis-filterbar {
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 12px;
  padding: 10px 14px;
}
.analysis-filterbar .filter-field span { font-size: 10.5px; letter-spacing: 0.4px; }
.analysis-filterbar .select-control { height: 32px; font-size: 12px; padding: 0 8px; }
.analysis-filterbar .action-btn { min-width: auto; padding: 0 12px; height: 32px; font-size: 12px; }

/* Metric cards 4 kolom -- kurangi padding & font */
.analysis-metrics { gap: 10px; }
.analysis-card { padding: 12px 14px; }
.analysis-card h2 { font-size: 13.5px; }
.metric-pair { gap: 10px; margin-top: 12px; }
.metric-pair strong { font-size: 22px; }
.metric-pair small { font-size: 11px; }
.delta-text, .card-note, .p-note { font-size: 11.5px; }
.effect-value { font-size: 28px; margin: 12px 0 8px; }
.effect-track { margin: 0 16px; height: 22px; }
.effect-ticks { font-size: 10.5px; margin-top: 6px; }
.sparkline { height: 42px; }

/* Charts area */
.analysis-charts { gap: 10px; }
.chart-panel { padding: 12px 14px; }
.chart-panel h2 { font-size: 13.5px; }
.legend { font-size: 11.5px; gap: 12px; }
.distribution-table, .paired-stats { padding: 7px 10px; }
.distribution-table div { grid-template-columns: 56px repeat(4, 1fr); gap: 8px; font-size: 10.5px; }
.paired-stats b { font-size: 10.5px; }
.paired-stats strong { font-size: 13px; }

/* Interpretation -- baris terakhir */
.analysis-interpretation { gap: 10px; }
.interpret-panel, .conclusion-box { padding: 12px 16px; }
.interpret-panel h2 { font-size: 13.5px; }
.interpret-panel p { font-size: 12.5px; line-height: 1.45; margin-top: 6px; }
.conclusion-box b { font-size: 13px; }
.conclusion-box p { font-size: 12px; line-height: 1.4; }

/* Grid baris untuk #statSection di-shrink agar muat di 720-768 tinggi laptop */
#statSection {
  grid-template-rows: minmax(140px, auto) minmax(0, 1fr) minmax(110px, auto);
}

/* Update analysis-content baris ke-2/3 agar lebih responsif terhadap shrink */
.analysis-content {
  grid-template-rows: 78px 70px minmax(0, 1fr);
}

/* Filterbar di layar lebih sempit (<1280px): 3 kolom */
@media (max-width: 1280px) {
  .analysis-filterbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 10px;
  }
  .analysis-filterbar .action-btn {
    grid-column: 1 / -1;
    justify-self: end;
    width: auto;
  }
  .analysis-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .analysis-charts {
    grid-template-columns: 1fr 1fr;
  }
  .analysis-charts > .chart-panel:nth-child(3) { grid-column: 1 / -1; }
}

/* Layar ekstra sempit (<960px): semua 1 kolom */
@media (max-width: 960px) {
  .analysis-filterbar { grid-template-columns: 1fr 1fr; }
  .analysis-metrics { grid-template-columns: 1fr; }
  .analysis-charts { grid-template-columns: 1fr; }
  .analysis-charts > .chart-panel:nth-child(3) { grid-column: auto; }
}


/* ================================================================
   ANALISIS DATA - Lampiran Olah Data Reader (CUQ - Lampiran)
   ================================================================ */
#lampiranSection[hidden] { display: none; }
.lampiran-explorer {
  display: grid;
  gap: 12px;
  min-height: 0;
}
.lampiran-toolbar {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.lampiran-toolbar h2 { margin: 0; color: #f3f9ff; font-size: 17px; font-weight: 800; }
.lampiran-toolbar p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; }
.lampiran-toolbar-right { display: flex; gap: 10px; flex-wrap: wrap; }
.lampiran-toolbar-right .action-btn { min-width: auto; padding: 0 14px; height: 34px; font-size: 12.5px; }

.lampiran-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lampiran-stage-list {
  padding: 14px 12px 14px;
  position: sticky;
  top: 12px;
  max-height: calc(100dvh - 220px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.lampiran-stage-list::-webkit-scrollbar { width: 8px; }
.lampiran-stage-list::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.lampiran-stage-list::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.lampiran-stage-list h3 { margin: 0 0 10px; color: #eef7ff; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 700; }
.lampiran-stage-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: stage; }

.lampiran-stage-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.7);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lampiran-stage-btn:hover { background: rgba(22, 132, 238, 0.14); border-color: rgba(22, 132, 238, 0.4); }
.lampiran-stage-btn.active {
  background: linear-gradient(90deg, rgba(22,132,238,0.22), rgba(22,132,238,0.08));
  border-color: rgba(79, 156, 255, 0.55);
}
.lampiran-stage-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(79, 156, 255, 0.3);
  color: #6fbfff;
}
.lampiran-stage-icon svg { width: 16px; height: 16px; }
.lampiran-stage-btn b { display: block; color: #f3f9ff; font-size: 12.5px; line-height: 1.3; font-weight: 700; }
.lampiran-stage-btn small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.lampiran-content {
  padding: 16px 18px 18px;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.lampiran-content-head {
  display: grid;
  gap: 6px;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}
.lampiran-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.lampiran-content-head p { margin: 0; color: #cfdcec; font-size: 13.5px; line-height: 1.55; }

.lampiran-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.lampiran-highlight {
  background: rgba(7, 25, 47, 0.72);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.lampiran-highlight span {
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 700;
}
.lampiran-highlight strong {
  color: #f3f9ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

.lampiran-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.lampiran-charts:has(article + article) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lampiran-chart-panel {
  padding: 12px 12px 14px;
  display: grid;
  gap: 8px;
  min-width: 0;
}
.lampiran-chart-canvas {
  width: 100%;
  height: 280px;
  min-height: 260px;
}
.lampiran-chart-note {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
}

.lampiran-article {
  background: rgba(3, 16, 32, 0.55);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  color: #d6e4f4;
  line-height: 1.6;
  max-height: calc(100dvh - 240px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.lampiran-article::-webkit-scrollbar { width: 9px; }
.lampiran-article::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.lampiran-article::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.lampiran-article h1, .lampiran-article h2, .lampiran-article h3, .lampiran-article h4 {
  color: #f6fbff;
  margin: 22px 0 10px;
  line-height: 1.25;
}
.lampiran-article h1 { font-size: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.lampiran-article h2 { font-size: 16px; }
.lampiran-article h3 { font-size: 14.5px; color: #c6d8ec; }
.lampiran-article p { margin: 0 0 10px; font-size: 13px; }
.lampiran-article ul, .lampiran-article ol { padding-left: 22px; margin: 0 0 12px; }
.lampiran-article li { margin: 4px 0; font-size: 13px; line-height: 1.55; }
.lampiran-article strong { color: #f3f9ff; }
.lampiran-article em { color: #b9cbe0; }
.lampiran-article code {
  background: rgba(22, 132, 238, 0.14);
  border: 1px solid rgba(22, 132, 238, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
  color: #cce4ff;
}
.lampiran-article pre {
  background: rgba(7, 25, 47, 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  color: #cfe1f6;
}
.lampiran-article pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.lampiran-article blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid #1684ee;
  background: rgba(22, 132, 238, 0.08);
  color: #d8e8f8;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}
.lampiran-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12.5px;
}
.lampiran-article thead th {
  background: rgba(22, 132, 238, 0.16);
  color: #f3f9ff;
  border-bottom: 1px solid var(--line);
  text-align: left;
  padding: 8px 10px;
  font-weight: 700;
}
.lampiran-article tbody td {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 10px;
  vertical-align: top;
  color: #d6e4f4;
}
.lampiran-article tbody tr:hover { background: rgba(22, 132, 238, 0.06); }
.lampiran-article hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 20px 0;
}
.lampiran-error { color: #ff8c8c; font-style: italic; }

@media (max-width: 1180px) {
  .lampiran-grid { grid-template-columns: 1fr; }
  .lampiran-stage-list { position: static; max-height: none; }
  .lampiran-charts:has(article + article) { grid-template-columns: 1fr; }
  .lampiran-article { max-height: none; }
}

/* analisis-content saat lampiran aktif: izinkan scroll halaman */
.analysis-content:has(#lampiranSection:not([hidden])) {
  height: auto;
  min-height: 100dvh;
  overflow-y: auto;
}


/* ================================================================
   TESIS VIEWER - fix overflow Ringkasan Aman & Insight Keterkaitan
   ================================================================ */
/* Thesis safe strip: kompres kolom 3 & 4, izinkan wrap pada layar sempit */
.thesis-safe-strip {
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  min-width: 0;
  flex-wrap: nowrap;
}
.thesis-safe-strip > div { min-width: 0; }
.thesis-safe-strip > div:nth-child(2) { overflow: hidden; }
.thesis-safe-strip > div:nth-child(2) p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.structure-score {
  padding-left: 16px;
  text-align: left;
  white-space: nowrap;
}
.structure-score small {
  font-size: 11px;
  margin-bottom: 2px;
  line-height: 1.25;
}
.structure-score strong { font-size: 22px; line-height: 1; }
.status-box {
  height: 42px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.status-box svg { width: 18px; height: 18px; }

/* Breakdown panel: izinkan baris insight tumbuh sesuai konten */
.breakdown-panel {
  grid-template-rows: 50px minmax(0, 1fr) auto;
}

/* Insight box: padding lebih kecil, align top, line-height rapat */
.insight-box {
  margin: 10px 12px 12px;
  padding: 10px 12px;
  align-items: start;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
}
.insight-box span {
  width: 36px;
  height: 36px;
  font-size: 22px;
}
.insight-box svg { width: 18px; height: 18px; }
.insight-box b { font-size: 13px; line-height: 1.2; }
.insight-box p {
  margin: 4px 0 0;
  color: #cbd9e9;
  font-size: 12px;
  line-height: 1.4;
}
.insight-box > div { min-width: 0; }
.insight-box > div p { word-break: break-word; }

/* Layar sempit (<1100px): biarkan strip wrap turun ke baris kedua */
@media (max-width: 1100px) {
  .thesis-safe-strip {
    grid-template-columns: 46px minmax(0, 1fr);
    grid-auto-flow: row;
    gap: 10px;
  }
  .structure-score {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 8px;
  }
  .status-box {
    grid-column: 1 / -1;
    width: 100%;
  }
}


/* ================================================================
   PRESENTASI - fix overflow card "Metode Kuantitatif within-subject"
   ================================================================ */
/* Card stat: tinggi adaptif, font value lebih kompak supaya teks panjang
   seperti "Kuantitatif within-subject" tetap terkurung di dalam box */
.presentation-summary {
  grid-template-rows: minmax(96px, auto) auto;
  align-items: stretch;
}
.presentation-stat {
  min-height: 96px;
  height: 100%;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  padding: 10px 12px;
  overflow: hidden;
}
.presentation-stat svg {
  width: 28px;
  height: 28px;
  align-self: start;
  margin-top: 2px;
}
.presentation-stat span {
  font-size: 11px;
  letter-spacing: 0.3px;
  line-height: 1.25;
  word-break: break-word;
}
.presentation-stat strong {
  display: block;
  align-self: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
}
.presentation-stat small {
  font-size: 11px;
  line-height: 1.2;
  align-self: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layar < 1280px: 3 kolom × 2 baris untuk 6 card */
@media (max-width: 1280px) {
  .presentation-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
}
@media (max-width: 720px) {
  .presentation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ================================================================
   TEORI & KONSEP - fix Subjek / Outcome / Batas Klaim terpotong
   ================================================================ */
/* Beri ruang adaptif pada baris outcomes; sebelumnya dipatok 104px
   sehingga konten 3 kartu (label + value 22px + paragraf 2 baris) terpotong */
.concept-map {
  grid-template-rows: minmax(188px, 1fr) auto;
  gap: 12px;
}
.concept-outcomes {
  gap: 10px;
  align-items: stretch;
}
.outcome-card {
  min-height: 116px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: 10px 14px 12px;
}
.outcome-card span {
  font-size: 10.5px;
  letter-spacing: 0.4px;
  line-height: 1.25;
}
.outcome-card strong {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.15;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.outcome-card p {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}


/* ================================================================
   TEORI & KONSEP - rebuild layout map panel agar legend & 3 kartu
   (Subjek/Outcome/Batas Klaim) tidak tertutup
   ================================================================ */
/* Map panel jadi 2 baris eksplisit: header (judul+legend+reset) + map area */
.theory-map-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px 18px 14px;
  overflow: hidden;
}
.theory-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.theory-map-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Legend pindah ke header kanan: inline compact, tidak makan baris vertikal */
.theory-map-head .concept-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #b9cbe0;
  font-size: 11px;
}
.theory-map-head .concept-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.theory-map-head .concept-legend i {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 3px;
  vertical-align: middle;
}

/* Concept map: 2 baris (track + outcomes) yang share tinggi parent */
.concept-map {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(180px, 1.5fr) minmax(120px, 1fr);
  gap: 10px;
  overflow: hidden;
}
.concept-track {
  min-height: 0;
}
.concept-outcomes {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.outcome-card {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: 10px 14px 12px;
  overflow: hidden;
}
.outcome-card span {
  font-size: 10.5px;
  letter-spacing: 0.4px;
  line-height: 1.25;
}
.outcome-card strong {
  margin: 2px 0 0;
  font-size: 18px;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.outcome-card p {
  margin: 4px 0 0;
  color: #c9d8e8;
  font-size: 11.5px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Layar < 1180px: legend turun ke bawah judul */
@media (max-width: 1180px) {
  .theory-map-head { flex-direction: column; align-items: flex-start; }
  .theory-map-head-right { width: 100%; justify-content: space-between; }
  .concept-map { grid-template-rows: minmax(170px, auto) auto; }
}


/* ================================================================
   IMPLIKASI & SARAN page
   ================================================================ */
.implikasi-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 12px;
  padding: 18px 28px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.implikasi-content::-webkit-scrollbar { width: 9px; }
.implikasi-content::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.implikasi-content::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

.implikasi-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.implikasi-topbar h1 { margin: 4px 0 4px; font-size: 22px; line-height: 1.2; color: #f6fbff; }
.implikasi-topbar p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }

.implikasi-banner {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}
.implikasi-banner-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(22, 132, 238, 0.18);
  color: #6fbfff;
  border: 1px solid rgba(79, 156, 255, 0.4);
}
.implikasi-banner-icon.green {
  background: rgba(33, 212, 155, 0.16);
  color: #35e2a8;
  border-color: rgba(33, 212, 155, 0.4);
}
.implikasi-banner-icon svg { width: 22px; height: 22px; }
.implikasi-banner b { color: #f6fbff; font-size: 13px; letter-spacing: 0.4px; }
.implikasi-banner p { margin: 4px 0 0; color: #cfdcec; font-size: 13px; line-height: 1.5; }
.implikasi-banner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.implikasi-stat-pill {
  display: grid;
  gap: 2px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 25, 47, 0.7);
  text-align: center;
  min-width: 76px;
}
.implikasi-stat-pill b { color: #f3f9ff; font-size: 14px; font-weight: 800; }
.implikasi-stat-pill small { color: var(--muted); font-size: 10.5px; line-height: 1.2; }

.implikasi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  align-items: start;
}
.implikasi-section {
  padding: 16px 18px 18px;
  display: grid;
  gap: 12px;
  min-height: 0;
}
.implikasi-section header {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: start;
}
.implikasi-section header h2 { margin: 0; color: #f3f9ff; font-size: 15.5px; line-height: 1.25; }
.implikasi-section header p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.implikasi-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(22, 132, 238, 0.18);
  color: #6fbfff;
  border: 1px solid rgba(79, 156, 255, 0.35);
}
.implikasi-icon.blue { color: #6fbfff; background: rgba(22,132,238,0.18); border-color: rgba(79,156,255,0.35); }
.implikasi-icon.green { color: #35e2a8; background: rgba(33,212,155,0.18); border-color: rgba(33,212,155,0.4); }
.implikasi-icon.gold { color: #f4b52d; background: rgba(244,181,45,0.18); border-color: rgba(244,181,45,0.4); }
.implikasi-icon.purple { color: #b18cff; background: rgba(158,114,255,0.18); border-color: rgba(158,114,255,0.4); }
.implikasi-icon svg { width: 20px; height: 20px; }

.implikasi-list, .implikasi-numbered {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.implikasi-list li {
  background: rgba(7, 25, 47, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
}
.implikasi-list li header {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.implikasi-list li header b { font-size: 13px; color: #f3f9ff; }
.implikasi-list li p { margin: 6px 0 0; color: #cfdcec; font-size: 12.5px; line-height: 1.5; }
.implikasi-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(22, 132, 238, 0.16);
  color: #6fbfff;
  border: 1px solid rgba(22, 132, 238, 0.35);
  white-space: nowrap;
}

.implikasi-numbered {
  counter-reset: pr;
}
.implikasi-numbered li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  background: rgba(7, 25, 47, 0.7);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.implikasi-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(33, 212, 155, 0.18);
  color: #35e2a8;
  font-weight: 800;
  font-size: 13px;
  border: 1px solid rgba(33, 212, 155, 0.4);
}
.implikasi-numbered b { color: #f3f9ff; font-size: 13.5px; }
.implikasi-numbered p { margin: 4px 0 0; color: #cfdcec; font-size: 12.5px; line-height: 1.5; }
.implikasi-numbered small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(33, 212, 155, 0.1);
  border: 1px solid rgba(33, 212, 155, 0.3);
  color: #aef0d4;
  font-size: 11px;
  font-weight: 600;
}
.implikasi-numbered small svg { width: 12px; height: 12px; color: #35e2a8; }

.implikasi-warn-item, .implikasi-bulb-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}
.implikasi-warn-item span, .implikasi-bulb-item span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.implikasi-warn-item span {
  background: rgba(244, 181, 45, 0.16);
  color: #f4b52d;
  border: 1px solid rgba(244, 181, 45, 0.4);
}
.implikasi-bulb-item span {
  background: rgba(158, 114, 255, 0.18);
  color: #b18cff;
  border: 1px solid rgba(158, 114, 255, 0.4);
}
.implikasi-warn-item svg, .implikasi-bulb-item svg { width: 14px; height: 14px; }
.implikasi-warn-item p, .implikasi-bulb-item p { margin: 0; color: #cfdcec; font-size: 12.5px; line-height: 1.5; }

.implikasi-conclusion {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-color: rgba(33, 212, 155, 0.45);
  background: linear-gradient(90deg, rgba(33, 212, 155, 0.08), rgba(8, 30, 57, 0.94));
}
.implikasi-conclusion b { color: #aef0d4; font-size: 13px; letter-spacing: 0.3px; }
.implikasi-conclusion p { margin: 4px 0 0; color: #d6e4f4; font-size: 13px; line-height: 1.55; }

@media (max-width: 1180px) {
  .implikasi-banner { grid-template-columns: 56px 1fr; }
  .implikasi-banner-stats { grid-column: 1 / -1; justify-content: flex-start; }
  .implikasi-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .implikasi-content { padding: 14px 14px 18px; }
}


/* ================================================================
   TEORI & KONSEP - rebuild sesuai mockup #6
   1 panel utama (header + 2 kolom: support list & posisi matrix)
   ================================================================ */
.theory-content {
  height: 100dvh;
  min-height: 760px;
  display: grid;
  grid-template-rows: 70px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 28px 18px;
  overflow: hidden;
}

.theory-map-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 18px 18px;
  overflow: hidden;
}

.theory-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 10px;
}
.theory-map-head h2 {
  margin: 0;
  color: #f3f9ff;
  font-size: 16px;
  font-weight: 800;
}
.theory-map-head h2 span {
  color: var(--muted);
  font-weight: 500;
  font-size: 13px;
}
.theory-map-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.theory-map-head .concept-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #b9cbe0;
  font-size: 11.5px;
}
.theory-map-head .concept-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.theory-map-head .concept-legend i {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 3px;
  vertical-align: middle;
}
.theory-map-head .concept-legend .blue { background: #2ea8ff; }
.theory-map-head .concept-legend .purple { background: #b18cff; }
.theory-map-head .concept-legend .gold { background: #f4b52d; }
.theory-map-head .concept-legend .green { background: #35e2a8; }

.theory-map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}
.theory-support-col,
.theory-position-col {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(7, 25, 47, 0.62);
  overflow: hidden;
}
.theory-support-col h3,
.theory-position-col h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f3f9ff;
  font-size: 14.5px;
  font-weight: 800;
}
.theory-support-col h3 svg,
.theory-position-col h3 svg {
  width: 18px;
  height: 18px;
  color: #6fbfff;
}

.support-list {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.support-list::-webkit-scrollbar { width: 8px; }
.support-list::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.support-list::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

.support-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.support-item:hover {
  background: rgba(22, 132, 238, 0.12);
  border-color: rgba(22, 132, 238, 0.45);
}
.support-item.active {
  background: linear-gradient(90deg, rgba(22, 132, 238, 0.22), rgba(22, 132, 238, 0.06));
  border-color: rgba(79, 156, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(79, 156, 255, 0.25);
}
.support-num {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(79, 156, 255, 0.35);
  color: #6fbfff;
  font-weight: 800;
  font-size: 13px;
}
.support-item h4 {
  margin: 2px 0 4px;
  color: #f3f9ff;
  font-size: 14px;
  font-weight: 800;
}
.support-item p {
  margin: 0 0 6px;
  color: #cfdcec;
  font-size: 12.5px;
  line-height: 1.5;
}
.support-item small {
  display: inline-block;
  color: #6fbfff;
  font-size: 11.5px;
  font-weight: 600;
  border-bottom: 1px dashed rgba(111, 191, 255, 0.45);
  line-height: 1.4;
}

.theory-position-col {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.theory-matrix {
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.theory-matrix::-webkit-scrollbar { width: 8px; height: 8px; }
.theory-matrix::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.theory-matrix::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }
.theory-matrix table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.theory-matrix thead th {
  position: sticky;
  top: 0;
  background: rgba(7, 25, 47, 0.96);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  color: #b9cbe0;
  text-align: left;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.theory-matrix thead th:first-child { color: #6fbfff; }
.theory-matrix tbody th {
  padding: 11px 12px;
  text-align: left;
  font-weight: 800;
  color: #f3f9ff;
  font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.theory-matrix tbody td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.theory-matrix tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
.theory-matrix tbody tr:hover {
  background: rgba(22, 132, 238, 0.08);
}
.theory-matrix tbody tr.active {
  background: rgba(22, 132, 238, 0.16);
}
.theory-matrix .check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.2);
  border: 1px solid rgba(33, 212, 155, 0.45);
  color: #35e2a8;
  font-weight: 900;
  font-size: 12px;
}
.theory-matrix .dash {
  color: #56708c;
  font-weight: 700;
}

.concept-insight {
  padding: 12px 14px;
  border: 1px solid rgba(33, 212, 155, 0.4);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(33, 212, 155, 0.08), rgba(8, 30, 57, 0.6));
}
.concept-insight b {
  display: block;
  color: #35e2a8;
  font-size: 13px;
  font-weight: 800;
}
.concept-insight p {
  margin: 6px 0 0;
  color: #cfdcec;
  font-size: 12.5px;
  line-height: 1.5;
}
.concept-insight small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .theory-map-body { grid-template-columns: 1fr; }
  .theory-map-head { flex-direction: column; align-items: flex-start; }
  .theory-map-head-right { width: 100%; justify-content: space-between; }
}


/* ================================================================
   TEORI & KONSEP - kembalikan concept map (5 node + 3 outcome card)
   di atas, lalu support+matrix 2 kolom di bawah
   ================================================================ */
.theory-map-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#conceptMap {
  display: grid;
  grid-template-rows: minmax(160px, auto) auto;
  gap: 10px;
  min-height: 0;
}
.concept-track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.concept-link {
  align-self: center;
  height: 2px;
  border-top: 2px dashed rgba(77, 177, 241, 0.46);
}
.concept-node {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: 22px 38px 24px 18px minmax(48px, 1fr);
  justify-items: center;
  gap: 4px;
  padding: 12px 10px 11px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(9, 33, 62, 0.82);
  color: #37a8ff;
  text-align: center;
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.concept-node.green { color: #35e2a8; }
.concept-node.purple { color: #b18cff; }
.concept-node.gold { color: #f4b52d; }
.concept-node.cyan { color: #29d7f5; }
.concept-node:hover {
  background: rgba(22, 132, 238, 0.14);
}
.concept-node.active {
  background: linear-gradient(180deg, rgba(26, 119, 220, 0.32), rgba(9, 33, 62, 0.86));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 0 0 1px currentColor;
}
.concept-order {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #09213f;
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
}
.concept-node svg { width: 28px; height: 28px; }
.concept-node b {
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-weight: 800;
}
.concept-node small {
  color: currentColor;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.2;
}
.concept-node p {
  margin: 0;
  color: #c9d8e8;
  font-size: 10.5px;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.concept-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.outcome-card {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 4px;
  padding: 10px 14px 12px;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(8, 30, 57, 0.74);
}
.outcome-card.blue { color: #37a8ff; }
.outcome-card.green { color: #35e2a8; }
.outcome-card.gold { color: #f4b52d; }
.outcome-card span {
  display: block;
  color: currentColor;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.outcome-card strong {
  display: block;
  margin: 2px 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.outcome-card p {
  margin: 4px 0 0;
  color: #c9d8e8;
  font-size: 11.5px;
  line-height: 1.4;
  word-break: break-word;
}

/* Body 2 kolom di bawah concept map: support list + posisi matrix */
.theory-map-body {
  min-height: 0;
}

@media (max-width: 1180px) {
  .concept-track {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .concept-link { display: none; }
  .concept-outcomes { grid-template-columns: 1fr; }
}


/* ================================================================
   METODOLOGI - perbaiki tumpang tindih: tinggi adaptif + scroll halaman
   ================================================================ */
/* Panel alur: tinggi mengikuti card 10 step + legend, tidak dipaksa */
.methodology-flow-panel {
  min-height: 0;
  height: auto;
  padding: 14px 16px 14px;
  overflow: visible;
}
.method-flow-cards {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}
.method-flow-cards::before {
  top: 30px;
}
.method-step {
  min-height: 180px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  padding: 14px 9px 10px;
  align-items: center;
  justify-items: center;
}
.method-step b { font-size: 11.5px; line-height: 1.2; }
.method-step strong { font-size: 13px; line-height: 1.2; }
.method-step p { font-size: 10.5px; line-height: 1.35; }
.flow-legend { margin-top: 10px; }

/* Method middle (penjelasan + profil): hilangkan overflow:hidden agar konten utuh */
.method-middle {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(360px, 1fr);
  gap: 12px;
  height: auto;
  min-height: 0;
}
.method-explain,
.profile-panel {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 14px 18px 16px;
}
.method-explain > p { font-size: 13px; line-height: 1.55; }
.method-warning {
  margin-top: 10px;
  padding: 10px 12px;
}
.method-warning p { font-size: 12px; line-height: 1.45; }
.profile-grid {
  height: auto;
  align-items: start;
}
.profile-ring { width: 132px; height: 132px; }
.profile-ring > div { width: 84px; height: 84px; }
.profile-ring strong { font-size: 22px; }
.profile-facts li { font-size: 12px; line-height: 1.45; }

/* Detail section: 10 card horizontal */
.method-detail-section {
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 14px 18px 14px;
}
.method-detail-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  height: auto;
}
.method-detail {
  min-height: 132px;
  height: auto;
  padding: 10px 9px 11px;
  overflow: hidden;
}
.method-detail h3 { font-size: 11.5px; line-height: 1.2; }
.method-detail b, .method-detail p { font-size: 10.5px; line-height: 1.35; }

.method-footnote { margin-top: 4px; }

/* Layar < 1280px: detail card jadi 5 kolom × 2 baris, alur juga */
@media (max-width: 1280px) {
  .method-content { padding: 14px 18px 16px; }
  .method-flow-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .method-flow-cards::before { display: none; }
  .method-detail-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .method-middle { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .method-flow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ================================================================
   METODOLOGI - kompak fit untuk laptop zoom 100%
   (setara tampilan zoom 90% sebelumnya tanpa user perlu zoom out)
   ================================================================ */
.method-content {
  padding: 14px 22px 16px;
  gap: 10px;
}
.method-topbar { padding-bottom: 6px; }
.method-title h1 { font-size: 22px; margin-bottom: 6px; }
.method-title p { font-size: 12.5px; line-height: 1.4; }
.method-content .analysis-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.method-content .analysis-actions .action-btn { min-width: auto; padding: 0 12px; height: 34px; font-size: 12.5px; }
.method-content .analysis-actions .icon-only { width: 34px; height: 34px; }
.method-content .analysis-actions .user-chip { height: 34px; padding: 0 8px; gap: 8px; }
.method-content .analysis-actions .user-chip .avatar { width: 28px; height: 28px; font-size: 13px; }
.method-content .analysis-actions .user-chip small { font-size: 11px; }

/* Panel header section */
.methodology-flow-panel { padding: 12px 14px 12px; }
.methodology-flow-panel .method-section-head h2 { font-size: 15px; }
.methodology-flow-panel .method-section-head .action-btn { min-width: auto; padding: 0 12px; height: 32px; font-size: 12px; }

/* Alur card 10 step: kompak */
.method-flow-cards { gap: 8px; }
.method-flow-cards::before { top: 26px; left: 36px; right: 36px; }
.method-step {
  min-height: 158px;
  grid-template-rows: auto auto auto 1fr;
  padding: 12px 7px 9px;
  gap: 4px;
}
.method-step .step-number { width: 26px; height: 26px; top: -16px; font-size: 12px; }
.method-step .method-icon { width: 28px; height: 28px; }
.method-step .method-icon svg { width: 22px; height: 22px; }
.method-step b { font-size: 11px; line-height: 1.15; }
.method-step strong { font-size: 12px; line-height: 1.18; }
.method-step p { font-size: 10px; line-height: 1.32; }
.flow-legend { gap: 14px; font-size: 10.5px; margin-top: 8px; }
.flow-legend i { width: 24px; }

/* Middle: penjelasan + profil kompak */
.method-middle { gap: 10px; }
.method-explain, .profile-panel { padding: 12px 14px 14px; }
.method-explain h2, .profile-panel h2 { font-size: 14.5px; }
.method-explain > p { margin: 8px 0 10px; font-size: 12px; line-height: 1.5; }
.method-warning { padding: 8px 11px; border-left-width: 5px; }
.method-warning b { font-size: 12px; }
.method-warning svg { width: 14px; height: 14px; }
.method-warning p { margin-top: 4px; font-size: 11px; line-height: 1.4; }
.profile-grid { grid-template-columns: 138px 1fr; gap: 12px; }
.profile-ring { width: 120px; height: 120px; }
.profile-ring > div { width: 78px; height: 78px; }
.profile-ring strong { font-size: 20px; }
.profile-ring span { font-size: 11px; }
.profile-facts { gap: 5px; }
.profile-facts li { grid-template-columns: 116px 1fr; gap: 8px; font-size: 11px; line-height: 1.35; }

/* Rincian 10 tahapan kompak */
.method-detail-section { padding: 12px 14px 14px; }
.method-detail-section h2 { font-size: 14.5px; }
.method-detail-grid { gap: 7px; margin-top: 8px; }
.method-detail {
  min-height: 116px;
  padding: 9px 8px 10px;
}
.method-detail span { width: 22px; height: 22px; font-size: 11px; }
.method-detail h3 { margin: 6px 0 5px; font-size: 11px; line-height: 1.18; }
.method-detail b, .method-detail p { font-size: 10px; line-height: 1.3; }
.method-detail p { margin-top: 4px; }

.method-footnote { font-size: 11.5px; margin-top: 2px; }

/* Layar < 1400px: 5 kolom × 2 baris untuk alur dan detail */
@media (max-width: 1400px) {
  .method-flow-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 22px; }
  .method-flow-cards::before { display: none; }
  .method-detail-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .method-middle { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 120px 1fr; }
}
@media (max-width: 720px) {
  .method-flow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   TEORI & KONSEP - tombol expand + modal fullscreen
   ================================================================ */
.theory-support-col h3,
.theory-position-col h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.theory-col-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.theory-expand-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 28, 53, 0.78);
  color: #cfe1f6;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.theory-expand-btn:hover {
  background: rgba(22, 132, 238, 0.18);
  border-color: rgba(22, 132, 238, 0.55);
  color: #fff;
}
.theory-expand-btn svg { width: 14px; height: 14px; }

body.modal-open { overflow: hidden; }

.theory-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: stretch;
}
.theory-modal[hidden] { display: none; }
.theory-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, 0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.theory-modal-card {
  position: relative;
  z-index: 1;
  margin: 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #2f85d8;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: theoryModalIn 0.22s ease;
}
@keyframes theoryModalIn {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.theory-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.55);
}
.theory-modal-head h2 {
  margin: 0;
  color: #f6fbff;
  font-size: 18px;
  font-weight: 800;
}
.theory-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
}
.theory-modal-close:hover {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.5);
  color: #fff;
}
.theory-modal-close svg { width: 16px; height: 16px; }
.theory-modal-body {
  padding: 22px 24px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.theory-modal-body::-webkit-scrollbar { width: 9px; }
.theory-modal-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.theory-modal-body::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

.theory-modal-support {
  display: grid;
  gap: 14px;
}
.theory-modal-support .support-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 28, 53, 0.72);
}
.theory-modal-support .support-num {
  width: 36px;
  height: 36px;
  font-size: 16px;
}
.theory-modal-support .support-item h4 {
  font-size: 17px;
  margin: 2px 0 6px;
}
.theory-modal-support .support-item p {
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 10px;
}
.theory-modal-support .support-item small {
  font-size: 13px;
  border-bottom-width: 1px;
}

.theory-modal-position {
  display: grid;
  gap: 14px;
}
.theory-modal-matrix table {
  width: 100%;
  font-size: 14px;
  border-collapse: collapse;
}
.theory-modal-matrix thead th {
  position: sticky;
  top: 0;
  background: rgba(7, 25, 47, 0.96);
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  color: #b9cbe0;
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.theory-modal-matrix thead th:first-child { color: #6fbfff; }
.theory-modal-matrix tbody th {
  padding: 14px 14px;
  text-align: left;
  font-weight: 800;
  color: #f3f9ff;
  font-size: 15px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
.theory-modal-matrix tbody td {
  padding: 14px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
}
.theory-modal-matrix .check {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(33, 212, 155, 0.2);
  border: 1px solid rgba(33, 212, 155, 0.45);
  color: #35e2a8;
  font-weight: 900;
  font-size: 14px;
}
.theory-modal-matrix .dash {
  color: #56708c;
  font-size: 16px;
}
.theory-modal-insight {
  padding: 16px 20px;
}
.theory-modal-insight b { font-size: 15px; }
.theory-modal-insight p { font-size: 14px; line-height: 1.6; margin-top: 8px; }
.theory-modal-insight small { font-size: 13px; margin-top: 10px; }

@media (max-width: 720px) {
  .theory-modal-card { margin: 12px; }
  .theory-modal-body { padding: 16px; }
  .theory-modal-support .support-item { grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 14px; }
}


/* ================================================================
   ANALISIS DATA - RAW Explorer kompak fit untuk zoom 100% laptop
   (setara tampilan zoom 90% sebelumnya tanpa user perlu zoom out)
   ================================================================ */
/* Filterbar lebih kompak: turunkan minimum width, tinggi field, font */
.raw-filterbar { padding: 10px 14px; gap: 10px; }
.raw-filter-row {
  grid-template-columns: minmax(150px, 1.3fr) repeat(6, minmax(0, 1fr)) auto;
  gap: 8px;
}
.raw-filter-row .raw-search-wrap { height: 32px; padding: 0 10px; }
.raw-filter-row .raw-search-wrap input { font-size: 12px; }
.raw-filter-row .select-control { height: 32px; padding: 0 8px; font-size: 12px; }
.raw-filter-row .action-btn { min-width: auto; padding: 0 12px; height: 32px; font-size: 12px; }

/* Summary pills kompak */
.raw-summary { gap: 8px; }
.raw-pill { flex: 1 1 110px; min-width: 110px; padding: 6px 12px; gap: 8px; }
.raw-pill b { font-size: 16px; }
.raw-pill small { font-size: 10.5px; }

/* Charts row kompak */
.raw-charts { gap: 10px; }
.raw-chart-panel { padding: 12px 14px 14px; gap: 8px; min-height: 280px; }
.raw-chart-panel h2 { font-size: 14px; }
.raw-chart-row { height: 240px; gap: 6px; }
.raw-donut { min-height: 200px; }
.raw-heatmap { height: 200px; min-height: 200px; }

/* Tabel responden kompak */
.raw-table-panel { padding: 12px 14px 12px; gap: 6px; }
.raw-table-head h2 { font-size: 14px; }
.raw-table-actions { gap: 10px; }
.raw-toggle { font-size: 11.5px; }
.raw-table-actions .action-btn { min-width: auto; padding: 0 12px; height: 32px; font-size: 12px; }
.raw-table-wrap { max-height: 360px; }
.raw-table { min-width: 800px; }
.raw-table thead th { padding: 8px 10px; font-size: 11.5px; }
.raw-table tbody td { padding: 7px 10px; font-size: 12px; }
.raw-id-cell b { font-size: 12px; }
.raw-id-cell small { font-size: 10.5px; }

/* Modal detail responden kompak */
.raw-detail-modal header { padding: 14px 18px; }
.raw-detail-modal header h3 { font-size: 16px; }
.raw-detail-modal header p { font-size: 12px; }
.raw-detail-avatar { width: 42px; height: 42px; font-size: 14px; }
.raw-detail-body { padding: 16px 18px 18px; gap: 12px; }
.raw-detail-context { gap: 8px; }
.raw-detail-context > div { padding: 8px 10px; }
.raw-detail-context b { font-size: 10.5px; }
.raw-detail-context span { font-size: 12px; }
.raw-detail-totals { gap: 8px; }
.raw-total-cell { padding: 10px 12px; }
.raw-total-cell strong { font-size: 19px; }
.raw-detail-chart { height: 240px; min-height: 220px; }

/* Layar < 1280px: filter 4 kolom × 2 baris */
@media (max-width: 1280px) {
  .raw-filter-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .raw-filter-row .raw-search-wrap { grid-column: 1 / -1; }
  .raw-filter-row .action-btn { grid-column: 1 / -1; justify-self: end; }
}


/* ================================================================
   ANALISIS DATA - tombol expand + modal fullscreen Tabel Responden
   ================================================================ */
.raw-table-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.raw-expand-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(8, 28, 53, 0.78);
  color: #cfe1f6;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.raw-expand-btn:hover {
  background: rgba(22, 132, 238, 0.18);
  border-color: rgba(22, 132, 238, 0.55);
  color: #fff;
}
.raw-expand-btn svg { width: 14px; height: 14px; }

.raw-table-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: stretch;
}
.raw-table-modal[hidden] { display: none; }
.raw-table-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, 0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.raw-table-modal-card {
  position: relative;
  z-index: 1;
  margin: 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #2f85d8;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: theoryModalIn 0.22s ease;
}
.raw-table-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.55);
}
.raw-table-modal-head h2 {
  margin: 0;
  color: #f6fbff;
  font-size: 18px;
  font-weight: 800;
}
.raw-table-modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.raw-table-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  flex: 0 0 auto;
}
.raw-table-modal-close:hover {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.5);
  color: #fff;
}
.raw-table-modal-close svg { width: 16px; height: 16px; }
.raw-table-modal-body {
  padding: 16px 22px 22px;
  overflow: hidden;
  min-height: 0;
}
.raw-table-modal-body .raw-table-wrap {
  max-height: 100%;
  height: 100%;
  border-radius: 12px;
}
.raw-table-modal-body .raw-table {
  font-size: 13.5px;
}
.raw-table-modal-body .raw-table thead th {
  padding: 12px 14px;
  font-size: 12.5px;
}
.raw-table-modal-body .raw-table tbody td {
  padding: 10px 14px;
  font-size: 13px;
}
.raw-table-modal-body .raw-id-cell b { font-size: 13px; }
.raw-table-modal-body .raw-id-cell small { font-size: 11.5px; }

@media (max-width: 720px) {
  .raw-table-modal-card { margin: 12px; }
  .raw-table-modal-body { padding: 12px; }
}


/* ================================================================
   IMPLIKASI & SARAN - perbaiki tumpang tindih, tinggi adaptif
   ================================================================ */
.implikasi-content { gap: 14px; }
.implikasi-topbar h1 { font-size: 21px; }
.implikasi-topbar p { font-size: 12.5px; }
.implikasi-content .analysis-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.implikasi-content .analysis-actions .action-btn { min-width: auto; padding: 0 12px; height: 34px; font-size: 12.5px; }

.implikasi-banner {
  grid-template-columns: 52px minmax(0, 1.4fr) auto;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
}
.implikasi-banner-icon { width: 44px; height: 44px; border-radius: 12px; }
.implikasi-banner-icon svg { width: 20px; height: 20px; }
.implikasi-banner b { font-size: 12.5px; }
.implikasi-banner p { font-size: 12.5px; line-height: 1.45; }
.implikasi-banner-stats { gap: 6px; }
.implikasi-stat-pill { padding: 6px 10px; min-width: 70px; }
.implikasi-stat-pill b { font-size: 13.5px; }
.implikasi-stat-pill small { font-size: 10px; letter-spacing: 0.2px; }

.implikasi-section { padding: 14px 16px 16px; gap: 10px; height: auto; }
.implikasi-section header { grid-template-columns: 40px 1fr; gap: 10px; }
.implikasi-section header h2 { font-size: 14.5px; line-height: 1.25; }
.implikasi-section header p { font-size: 12px; line-height: 1.4; }
.implikasi-icon { width: 36px; height: 36px; border-radius: 10px; }
.implikasi-icon svg { width: 18px; height: 18px; }

.implikasi-list { gap: 8px; }
.implikasi-list li { padding: 9px 12px; }
.implikasi-list li header { grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 2px; }
.implikasi-list li header b { font-size: 12.5px; }
.implikasi-list li p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; }
.implikasi-tag { font-size: 10px; padding: 3px 7px; }

.implikasi-numbered { gap: 8px; }
.implikasi-numbered li { grid-template-columns: 30px 1fr; gap: 9px; padding: 9px 12px; }
.implikasi-num { width: 26px; height: 26px; border-radius: 8px; font-size: 12.5px; }
.implikasi-numbered b { font-size: 13px; }
.implikasi-numbered p { font-size: 12px; line-height: 1.5; }
.implikasi-numbered small { margin-top: 6px; padding: 3px 9px; font-size: 10.5px; }
.implikasi-numbered small svg { width: 11px; height: 11px; }

.implikasi-warn-item, .implikasi-bulb-item { grid-template-columns: 26px 1fr; gap: 9px; }
.implikasi-warn-item span, .implikasi-bulb-item span { width: 24px; height: 24px; border-radius: 7px; }
.implikasi-warn-item svg, .implikasi-bulb-item svg { width: 12px; height: 12px; }
.implikasi-warn-item p, .implikasi-bulb-item p { font-size: 12px; line-height: 1.5; }

.implikasi-conclusion { padding: 12px 16px; grid-template-columns: 52px 1fr; gap: 14px; }
.implikasi-conclusion .implikasi-banner-icon { width: 44px; height: 44px; border-radius: 12px; }
.implikasi-conclusion .implikasi-banner-icon svg { width: 20px; height: 20px; }
.implikasi-conclusion b { font-size: 12.5px; }
.implikasi-conclusion p { font-size: 12.5px; line-height: 1.55; }

@media (max-width: 1180px) {
  .implikasi-banner { grid-template-columns: 52px 1fr; }
  .implikasi-banner-stats { grid-column: 1 / -1; justify-content: flex-start; }
  .implikasi-grid { grid-template-columns: 1fr; }
}


/* ================================================================
   IMPLIKASI & SARAN - fix banner & conclusion overlap
   ================================================================ */
.implikasi-banner {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.4fr) auto;
  grid-template-rows: auto;
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.implikasi-banner > div { min-width: 0; }
.implikasi-banner > div p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.implikasi-banner-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(58px, auto));
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: stretch;
}
.implikasi-stat-pill {
  padding: 5px 10px;
  min-width: 58px;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 1px;
}
.implikasi-stat-pill b { font-size: 13px; line-height: 1.1; }
.implikasi-stat-pill small { font-size: 9.5px; line-height: 1.2; letter-spacing: 0.2px; }

.implikasi-conclusion {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 16px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.implikasi-conclusion > div { min-width: 0; }
.implikasi-conclusion p { word-break: break-word; }

@media (max-width: 1280px) {
  .implikasi-banner { grid-template-columns: 48px minmax(0, 1fr); }
  .implikasi-banner-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-content: stretch;
  }
}
@media (max-width: 720px) {
  .implikasi-banner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ================================================================
   IMPLIKASI & SARAN - restore banner ke layout sebelumnya yang benar
   ================================================================ */
/* Banner: ikon kiri, klaim panjang di tengah, 6 stat pill di kanan */
.implikasi-banner {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  gap: 16px;
  padding: 14px 18px;
  align-items: center;
  min-width: 0;
  overflow: visible;
  min-height: 80px;
}
.implikasi-banner > div { min-width: 0; }
/* Hilangkan line-clamp agar klaim utuh */
.implikasi-banner > div p {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  text-overflow: clip;
  margin: 4px 0 0;
  color: #cfdcec;
  font-size: 12.5px;
  line-height: 1.5;
}
.implikasi-banner b { font-size: 13px; }

.implikasi-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}
.implikasi-banner-icon svg { width: 22px; height: 22px; }

.implikasi-banner-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: stretch;
  min-width: 320px;
}
.implikasi-stat-pill {
  padding: 6px 10px;
  min-width: 70px;
}
.implikasi-stat-pill b { font-size: 14px; line-height: 1.15; }
.implikasi-stat-pill small { font-size: 10.5px; line-height: 1.2; letter-spacing: 0.2px; }

.implikasi-conclusion {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px;
  align-items: center;
  min-width: 0;
  overflow: visible;
}
.implikasi-conclusion > div { min-width: 0; }

@media (max-width: 1280px) {
  .implikasi-banner { grid-template-columns: 48px minmax(0, 1fr); }
  .implikasi-banner-stats {
    grid-column: 1 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    min-width: 0;
    justify-content: stretch;
  }
}
@media (max-width: 720px) {
  .implikasi-banner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Stats: 6 pill = 4 di atas + 2 di bawah (kanan-bawah), seperti versi awal */
.implikasi-banner-stats {
  grid-template-columns: repeat(4, minmax(70px, 88px));
  grid-auto-rows: auto;
  justify-content: end;
}
.implikasi-stat-pill:nth-child(5) { grid-column: 3 / 4; }
.implikasi-stat-pill:nth-child(6) { grid-column: 4 / 5; }


/* ================================================================
   IMPLIKASI & SARAN - banner stats 2 baris tidak overlap ke grid
   ================================================================ */
.implikasi-banner {
  align-items: start;
  min-height: 0;
  padding: 14px 18px 14px;
}
.implikasi-banner > div:first-of-type {
  align-self: center;
}
.implikasi-banner-stats {
  align-self: stretch;
  align-items: stretch;
  align-content: start;
  row-gap: 6px;
}
.implikasi-stat-pill {
  min-height: 42px;
  padding: 4px 10px;
}


/* ================================================================
   IMPLIKASI & SARAN - FINAL OVERRIDE banner
   Menggantikan semua override sebelumnya. Layout:
   [icon 48px] [klaim 1fr] [stats 6 pill 3-cols x 2-rows]
   ================================================================ */
.implikasi-content > .implikasi-banner.panel {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  min-height: 100px !important;
  overflow: visible !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-icon {
  align-self: center !important;
}
.implikasi-content > .implikasi-banner.panel > div:not(.implikasi-banner-stats) {
  min-width: 0 !important;
  align-self: center !important;
}
.implikasi-content > .implikasi-banner.panel > div:not(.implikasi-banner-stats) p {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
}

.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(78px, auto)) !important;
  grid-auto-rows: auto !important;
  gap: 6px !important;
  align-self: center !important;
  justify-self: end !important;
  align-items: stretch !important;
  align-content: center !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill {
  min-width: 78px !important;
  min-height: 42px !important;
  padding: 5px 10px !important;
  display: grid !important;
  align-content: center !important;
  gap: 1px !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(1),
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(2),
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(3),
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(4),
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(5),
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill:nth-child(6) {
  grid-column: auto !important;
  grid-row: auto !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill b {
  font-size: 13px !important;
  line-height: 1.15 !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill small {
  font-size: 10px !important;
  line-height: 1.2 !important;
}

@media (max-width: 1180px) {
  .implikasi-content > .implikasi-banner.panel {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  .implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats {
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    justify-self: stretch !important;
  }
}
@media (max-width: 720px) {
  .implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ================================================================
   IMPLIKASI - polish banner stats: kompak dan rapat ke kanan
   ================================================================ */
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats {
  grid-template-columns: repeat(3, minmax(72px, 84px)) !important;
  gap: 5px !important;
  padding-right: 4px !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill {
  min-width: 72px !important;
  min-height: 38px !important;
  padding: 4px 8px !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill b {
  font-size: 12.5px !important;
}
.implikasi-content > .implikasi-banner.panel > .implikasi-banner-stats > .implikasi-stat-pill small {
  font-size: 9.5px !important;
}


/* ================================================================
   IMPLIKASI - polish FINAL conclusion (Pernyataan Penutup)
   ================================================================ */
.implikasi-content > .implikasi-conclusion.panel {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
.implikasi-content > .implikasi-conclusion.panel > .implikasi-banner-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  align-self: center !important;
}
.implikasi-content > .implikasi-conclusion.panel > .implikasi-banner-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.implikasi-content > .implikasi-conclusion.panel > div {
  min-width: 0 !important;
}
.implikasi-content > .implikasi-conclusion.panel > div b {
  display: block !important;
  color: #aef0d4 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  font-weight: 800 !important;
}
.implikasi-content > .implikasi-conclusion.panel > div p {
  margin: 4px 0 0 !important;
  color: #d6e4f4 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}


/* ================================================================
   IMPLIKASI - FINAL FIX Pernyataan Penutup (panel hijau)
   Hapus overflow:hidden, tinggi adaptif, ikon tetap tampil
   ================================================================ */
.implikasi-content > .implikasi-conclusion.panel {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  overflow: visible !important;
  min-width: 0 !important;
  min-height: auto !important;
  height: auto !important;
}
.implikasi-content > .implikasi-conclusion.panel > .implikasi-banner-icon {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: rgba(33, 212, 155, 0.16) !important;
  color: #35e2a8 !important;
  border: 1px solid rgba(33, 212, 155, 0.4) !important;
  align-self: center !important;
  flex: 0 0 auto !important;
}
.implikasi-content > .implikasi-conclusion.panel > .implikasi-banner-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.implikasi-content > .implikasi-conclusion.panel > div {
  min-width: 0 !important;
  align-self: center !important;
}
.implikasi-content > .implikasi-conclusion.panel > div b {
  display: block !important;
  color: #aef0d4 !important;
  font-size: 13px !important;
  letter-spacing: 0.3px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}
.implikasi-content > .implikasi-conclusion.panel > div p {
  display: block !important;
  margin: 0 !important;
  color: #d6e4f4 !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}


/* ================================================================
   PENYUSUN JAWABAN AMAN - FINAL polish komprehensif
   Audit penuh halaman: topbar, question card, 5 step card, sidebar
   panel (preview, confidence, tips, related). Kompres untuk laptop
   1366-1440 zoom 100%, hilangkan tumpang tindih dan overflow.
   ================================================================ */

/* Container utama: pakai pola scrollable seperti halaman implikasi */
.safe-builder-content {
  height: 100dvh !important;
  min-height: 760px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px 22px 18px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78) !important;
}
.safe-builder-content::-webkit-scrollbar { width: 9px; }
.safe-builder-content::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.safe-builder-content::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

/* Topbar kompak */
.safe-builder-content .detail-topbar {
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 4px;
  flex-wrap: wrap;
}
.safe-builder-content .detail-topbar h1 { font-size: 22px; margin: 4px 0 4px; }
.safe-builder-content .detail-topbar p { font-size: 12.5px; line-height: 1.4; margin: 0; }
.safe-builder-content .detail-kicker { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.safe-builder-content .analysis-actions { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.safe-builder-content .analysis-actions .action-btn { min-width: auto; padding: 0 12px; height: 34px; font-size: 12.5px; }
.safe-builder-content .analysis-actions .icon-only { width: 34px; height: 34px; }
.safe-builder-content .analysis-actions .user-chip { height: 34px; padding: 0 8px; gap: 8px; }
.safe-builder-content .analysis-actions .user-chip .avatar { width: 28px; height: 28px; font-size: 13px; }
.safe-builder-content .analysis-actions .user-chip small { font-size: 11px; }

/* Question card di atas: pertanyaan + picker */
.safe-question-card {
  padding: 14px 18px 16px;
  display: grid;
  gap: 10px;
}
.safe-question-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.safe-question-card h2 { font-size: 17px; line-height: 1.35; margin: 0; word-break: break-word; }
.safe-question-card .safe-question-basis { font-size: 12.5px; line-height: 1.5; margin: 0; }
.safe-picker-controls {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
}
.safe-picker-controls .search-wrap { width: 100%; height: 32px; padding: 0 10px; }
.safe-picker-controls .search-wrap input { font-size: 12px; }
.safe-picker-controls select { height: 32px; padding: 0 10px; font-size: 12px; }

/* Layout 2 kolom: 5 step di kiri, sidebar 4 panel di kanan */
.safe-builder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}
.safe-builder-main {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.safe-builder-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Step card kompak, header rapi tanpa tumpang tindih */
.safe-step-card {
  padding: 14px 16px 14px;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.safe-step-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}
.safe-step-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 800;
}
.safe-step-kicker { font-size: 10.5px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; }
.safe-step-head h2 { font-size: 14px; margin: 2px 0 4px; line-height: 1.3; word-break: break-word; }
.safe-step-head p { font-size: 12px; line-height: 1.5; margin: 0; word-break: break-word; }
.safe-step-fill {
  align-self: start;
  height: 30px;
  padding: 0 10px;
  font-size: 11.5px;
  border-radius: 7px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.safe-step-fill svg { width: 12px; height: 12px; }
.safe-step-input {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
  border-radius: 8px;
  resize: vertical;
}
.safe-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.safe-suggest-chip {
  padding: 6px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  border-radius: 999px;
  max-width: 100%;
  text-align: left;
}
.safe-suggest-chip svg { width: 11px; height: 11px; }

.safe-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}
.safe-data-cell { padding: 8px 10px; }
.safe-data-cell span { font-size: 9.5px; letter-spacing: 0.3px; }
.safe-data-cell strong { font-size: 14px; }
.safe-data-cell small { font-size: 9.5px; }

.safe-theory-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.safe-theory-chip {
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.4;
  word-break: break-word;
}
.safe-theory-chip b { font-size: 12px; }

.safe-warn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.safe-warn-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  font-size: 11.5px;
  line-height: 1.45;
  border-radius: 8px;
  background: rgba(244, 84, 84, 0.08);
  border: 1px solid rgba(244, 84, 84, 0.25);
  color: #ffd6d6;
}
.safe-warn-list li svg { width: 12px; height: 12px; color: #ff8c8c; margin-top: 2px; }

/* Sidebar panel: preview, confidence, tips, related */
.safe-preview-card {
  padding: 12px 14px 14px;
  display: grid;
  gap: 8px;
}
.safe-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.safe-preview-card h2 { font-size: 14px; margin: 0; }
.safe-preview-meta { font-size: 11px; color: var(--muted); }
.safe-preview-progress {
  height: 4px;
  border-radius: 999px;
  background: rgba(8, 28, 53, 0.85);
  overflow: hidden;
}
.safe-preview-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1684ee, #35e2a8);
  width: 0%;
  transition: width 0.25s ease;
}
.safe-preview-body {
  background: rgba(7, 25, 47, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: #cfdcec;
  min-height: 80px;
  word-break: break-word;
}
.safe-preview-empty { font-style: italic; color: var(--muted); margin: 0; }
.safe-preview-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.safe-preview-actions .action-btn { min-width: auto; padding: 0 8px; height: 30px; font-size: 11px; gap: 6px; }
.safe-preview-actions .action-btn svg { width: 12px; height: 12px; }

.safe-confidence-card { padding: 12px 14px 14px; display: grid; gap: 10px; }
.safe-confidence-card h2 { font-size: 14px; margin: 0; }
.safe-confidence-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.safe-confidence-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(8, 28, 53, 0.85);
  overflow: hidden;
}
.safe-confidence-track span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1684ee, #35e2a8);
  transition: width 0.25s ease;
}
.safe-confidence-card strong { font-size: 18px; color: #f6fbff; min-width: 48px; text-align: right; }
.safe-confidence-checks {
  display: grid;
  gap: 5px;
}
.safe-confidence-checks .safe-check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}
.safe-confidence-checks .safe-check.ok { color: #cfeede; }
.safe-confidence-checks .safe-check svg { width: 12px; height: 12px; margin-top: 2px; color: var(--muted); }
.safe-confidence-checks .safe-check.ok svg { color: #35e2a8; }

.safe-tips-card { padding: 12px 14px 14px; display: grid; gap: 8px; }
.safe-tips-card h2 { font-size: 14px; margin: 0; }
.safe-tips-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.safe-tips-card li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 11.5px;
  line-height: 1.5;
  color: #cfdcec;
}
.safe-tips-card li svg { width: 12px; height: 12px; margin-top: 2px; color: #35e2a8; }
.safe-tips-card li:last-child svg { color: #f4b52d; }

.safe-related-card { padding: 12px 14px 14px; display: grid; gap: 8px; }
.safe-related-card h2 { font-size: 14px; margin: 0; }
.safe-related-card .related-list {
  display: grid;
  gap: 6px;
}
.safe-related-card .related-list a {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  background: rgba(7, 25, 47, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.45;
  text-decoration: none;
  word-break: break-word;
}
.safe-related-card .related-list a:hover {
  background: rgba(22, 132, 238, 0.12);
  border-color: rgba(22, 132, 238, 0.45);
}
.safe-related-card .related-list a span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(22, 132, 238, 0.18);
  color: #6fbfff;
  font-weight: 800;
  font-size: 11px;
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .safe-builder-layout { grid-template-columns: 1fr; }
  .safe-picker-controls { grid-template-columns: 1fr 1fr; }
  .safe-picker-controls .search-wrap { grid-column: 1 / -1; }
  .safe-theory-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .safe-builder-content { padding: 14px 14px 18px; }
  .safe-step-head { grid-template-columns: 32px 1fr; }
  .safe-step-fill { grid-column: 1 / -1; justify-self: end; }
  .safe-picker-controls { grid-template-columns: 1fr; }
  .safe-preview-actions { grid-template-columns: 1fr; }
}


/* ================================================================
   PENYUSUN JAWABAN - aktifkan scroll vertikal yang nampak
   ================================================================ */
.safe-builder-content {
  height: 100dvh !important;
  grid-template-rows: auto auto auto !important;
  overflow-y: scroll !important;
}
.safe-builder-content::-webkit-scrollbar {
  width: 12px !important;
}
.safe-builder-content::-webkit-scrollbar-track {
  background: rgba(7, 26, 50, 0.78) !important;
  border-radius: 999px !important;
}
.safe-builder-content::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #2b8ce7, #105a9f) !important;
  min-height: 60px !important;
}
.safe-builder-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3aa3ff, #1771c8) !important;
}

/* Layout: hapus stretching agar konten panjang turun naturally */
.safe-builder-layout {
  align-items: start !important;
  min-height: 0 !important;
}
.safe-builder-main,
.safe-builder-side {
  min-height: 0 !important;
  height: auto !important;
}


/* ================================================================
   PENYUSUN JAWABAN - scrollbar lebih kontras dan selalu tampil
   ================================================================ */
.safe-builder-content {
  /* Force layout cukup tinggi sehingga selalu ada scroll */
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: scroll !important;
  /* Padding kanan extra agar scrollbar tidak nutup konten */
  padding-right: 18px !important;
  /* Firefox */
  scrollbar-width: auto !important;
  scrollbar-color: #4aa9ff #0a2340 !important;
}
.safe-builder-content::-webkit-scrollbar {
  width: 14px !important;
  background: #0a2340 !important;
}
.safe-builder-content::-webkit-scrollbar-track {
  background: #0a2340 !important;
  border-left: 1px solid #1c3f6b !important;
}
.safe-builder-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4aa9ff, #1f6dc4) !important;
  border-radius: 999px !important;
  border: 3px solid #0a2340 !important;
  min-height: 80px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}
.safe-builder-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6fbfff, #2f86dd) !important;
}

/* Pastikan total konten cukup panjang untuk scrollable di tampilan
   default (5 step card + 4 sidebar panel). Hapus min-height 0 yang
   memaksa konten ter-clip */
.safe-builder-layout {
  align-items: start !important;
  min-height: auto !important;
}
.safe-builder-main { min-height: auto !important; height: auto !important; }
.safe-builder-side { min-height: auto !important; height: auto !important; position: static !important; }


/* ================================================================
   PENYUSUN JAWABAN - FIX scroll: hapus overflow:auto pada child
   agar scroll naik ke .safe-builder-content (parent)
   ================================================================ */
.safe-builder-content {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.safe-builder-content > * {
  min-height: 0 !important;
  flex-shrink: 0;
}
/* HAPUS overflow auto pada anak: scroll harus pada parent saja */
.safe-builder-main,
.safe-builder-side {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  position: static !important;
  padding-right: 0 !important;
}
.safe-builder-main::-webkit-scrollbar,
.safe-builder-side::-webkit-scrollbar { display: none !important; }


/* ================================================================
   PENYUSUN JAWABAN - FORCE SCROLL pakai positioning absolut
   Fallback yang pasti bekerja di semua browser dan mode (fullscreen
   atau windowed). Wrap content dalam scroll container yang ukurannya
   pasti diketahui browser.
   ================================================================ */
.app-shell:has(.safe-builder-content) {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}
.app-shell:has(.safe-builder-content) > main.safe-builder-content {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: 14px 22px 22px !important;
  /* Force scrollbar nampak di Windows */
  scrollbar-gutter: stable !important;
}

/* Restore layout grid di dalam main yang sekarang display: block */
.safe-builder-content > .detail-topbar,
.safe-builder-content > .safe-question-card,
.safe-builder-content > .safe-builder-layout {
  display: grid !important;
}
.safe-builder-content > .detail-topbar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  flex-wrap: wrap !important;
}
.safe-builder-content > .safe-question-card {
  margin-bottom: 12px !important;
}
.safe-builder-content > .safe-builder-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
}

/* Scrollbar styling -- selalu tampak, kontras */
.safe-builder-content::-webkit-scrollbar {
  width: 14px !important;
}
.safe-builder-content::-webkit-scrollbar-track {
  background: rgba(7, 26, 50, 0.85) !important;
  border-left: 1px solid #1c3f6b !important;
}
.safe-builder-content::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4aa9ff, #1f6dc4) !important;
  border-radius: 999px !important;
  border: 3px solid rgba(7, 26, 50, 0.85) !important;
  min-height: 80px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18) !important;
}
.safe-builder-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6fbfff, #2f86dd) !important;
}


/* ================================================================
   Q&A MODAL - 125 pertanyaan kritis penguji tesis
   Dipanggil dari tombol topbar "Q&A" di halaman jawaban-aman.html
   ================================================================ */
.qa-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: stretch;
}
.qa-modal[hidden] { display: none; }
.qa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, 0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.qa-modal-card {
  position: relative;
  z-index: 1;
  margin: 24px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  border: 1px solid #2f85d8;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: theoryModalIn 0.22s ease;
}
.qa-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.55);
}
.qa-modal-head h2 {
  margin: 0;
  color: #f6fbff;
  font-size: 18px;
  font-weight: 800;
}
.qa-modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.qa-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  flex: 0 0 auto;
}
.qa-modal-close:hover {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.5);
  color: #fff;
}
.qa-modal-close svg { width: 16px; height: 16px; }

/* Toolbar: search + filter chips */
.qa-modal-toolbar {
  display: grid;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(7, 22, 42, 0.7);
}
.qa-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(3, 16, 32, 0.85);
  color: var(--text);
}
.qa-search svg {
  width: 16px;
  height: 16px;
  color: var(--muted);
  flex: 0 0 auto;
}
.qa-search input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.qa-search input::placeholder { color: var(--muted); }
.qa-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qa-filter-label {
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  flex: 0 0 auto;
}
.qa-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qa-chip {
  height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 28, 53, 0.78);
  color: #cfdcec;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.qa-chip:hover {
  background: rgba(22, 132, 238, 0.18);
  border-color: rgba(22, 132, 238, 0.45);
  color: #fff;
}
.qa-chip.active {
  background: linear-gradient(90deg, rgba(22, 132, 238, 0.32), rgba(22, 132, 238, 0.12));
  border-color: rgba(79, 156, 255, 0.55);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(79, 156, 255, 0.3);
}

/* Body: list accordion */
.qa-modal-body {
  padding: 14px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.qa-modal-body::-webkit-scrollbar { width: 9px; }
.qa-modal-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.qa-modal-body::-webkit-scrollbar-thumb { border: 2px solid rgba(7, 26, 50, 0.78); border-radius: 999px; background: linear-gradient(180deg, #2b8ce7, #105a9f); }

.qa-accordion-list {
  display: grid;
  gap: 8px;
}
.qa-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 28, 53, 0.55);
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.qa-item:hover {
  border-color: rgba(79, 156, 255, 0.45);
}
.qa-item.open {
  border-color: rgba(79, 156, 255, 0.55);
  background: rgba(8, 28, 53, 0.78);
}
.qa-item.danger {
  border-color: rgba(244, 84, 84, 0.45);
  background: rgba(56, 12, 16, 0.55);
}
.qa-item.danger.open {
  border-color: rgba(244, 84, 84, 0.65);
  background: rgba(56, 12, 16, 0.75);
}
.qa-item-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.qa-item-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(79, 156, 255, 0.35);
  color: #6fbfff;
  font-weight: 800;
  font-size: 12px;
}
.qa-item.danger .qa-item-num {
  background: rgba(244, 84, 84, 0.2);
  border-color: rgba(244, 84, 84, 0.45);
  color: #ff8c8c;
}
.qa-item-titles {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.qa-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.qa-tag {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(22, 132, 238, 0.18);
  color: #8fcaff;
  border: 1px solid rgba(79, 156, 255, 0.35);
  white-space: nowrap;
}
.qa-tag-group {
  background: rgba(33, 212, 155, 0.16);
  color: #6fdbb6;
  border-color: rgba(33, 212, 155, 0.4);
}
.qa-item.danger .qa-tag-cat {
  background: rgba(244, 84, 84, 0.2);
  color: #ff9f9f;
  border-color: rgba(244, 84, 84, 0.45);
}
.qa-item-question {
  margin: 0;
  color: #f3f9ff;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 600;
  word-break: break-word;
}
.qa-item-toggle {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.85);
  color: #cfe1f6;
  transition: transform 0.22s ease, background 0.18s ease;
}
.qa-item-toggle svg { width: 14px; height: 14px; }
.qa-item.open .qa-item-toggle { transform: rotate(180deg); }

.qa-item-body {
  padding: 4px 16px 16px 64px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 14px;
}
.qa-item-row {
  display: grid;
  gap: 4px;
}
.qa-item-key {
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}
.qa-item-val {
  margin: 0;
  color: #d6e4f4;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-word;
}
.qa-item-val strong { color: #f3f9ff; }
.qa-item-val em { color: #b9cbe0; }
.qa-item-answer {
  padding: 10px 12px;
  border: 1px solid rgba(33, 212, 155, 0.35);
  border-radius: 10px;
  background: rgba(33, 212, 155, 0.06);
}
.qa-item-answer .qa-item-key { color: #6fdbb6; }
.qa-item-example {
  padding: 10px 12px;
  border-left: 3px solid rgba(22, 132, 238, 0.55);
  border-radius: 4px;
  background: rgba(22, 132, 238, 0.08);
}
.qa-item-example .qa-item-key { color: #8fcaff; }
.qa-item-risk {
  padding: 10px 12px;
  border: 1px solid rgba(244, 84, 84, 0.35);
  border-radius: 10px;
  background: rgba(244, 84, 84, 0.06);
}
.qa-item-risk .qa-item-key { color: #ff8c8c; }

.qa-empty,
.qa-error {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 30px 20px;
  font-size: 13px;
}
.qa-error { color: #ff8c8c; font-style: normal; }

@media (max-width: 720px) {
  .qa-modal-card { margin: 12px; }
  .qa-modal-head { padding: 14px 16px; }
  .qa-modal-toolbar { padding: 12px 16px; }
  .qa-modal-body { padding: 12px 16px 16px; }
  .qa-item-head { padding: 10px 12px; grid-template-columns: 32px 1fr 24px; gap: 10px; }
  .qa-item-body { padding: 4px 12px 14px 12px; padding-top: 12px; }
  .qa-filter-label { font-size: 10px; }
}


/* ================================================================
   REPORT MODALS - Pengaturan Laporan, Periode Laporan, Riwayat
   Halaman: laporan-ekspor.html
   Pola visual identik dengan .qa-modal-card (backdrop blur + scale-in)
   ================================================================ */
body.modal-open { overflow: hidden; }

.report-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: stretch;
}
.report-modal[hidden] { display: none; }
.report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, 0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.report-modal-card {
  position: relative;
  z-index: 1;
  margin: 24px auto;
  width: min(960px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid #2f85d8;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: theoryModalIn 0.22s ease;
}
.report-modal-medium {
  width: min(720px, calc(100% - 48px));
}

/* Head */
.report-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.55);
}
.report-modal-head h2 {
  margin: 0;
  color: #f6fbff;
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.report-modal-head h2 svg {
  width: 18px;
  height: 18px;
  color: #6fbfff;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.report-modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.report-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  flex: 0 0 auto;
}
.report-modal-close:hover {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.5);
  color: #fff;
}
.report-modal-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Body (scrollable area) */
.report-modal-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.report-modal-body::-webkit-scrollbar { width: 9px; }
.report-modal-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.report-modal-body::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}

/* Footer */
.report-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line-soft);
  background: rgba(7, 22, 42, 0.7);
}
.report-modal-spacer { flex: 1 1 auto; }

/* ============== Form generic ============== */
.report-form {
  display: grid;
  gap: 16px;
}
.report-form fieldset {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0;
  background: rgba(8, 28, 53, 0.45);
}
.report-form legend {
  padding: 0 8px;
  color: #6fbfff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.report-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.report-form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-bottom: 10px;
}
.report-form-grid-2:last-child { margin-bottom: 0; }
.report-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.report-field span {
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.report-field input,
.report-field select {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(3, 16, 32, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}
.report-field input:focus,
.report-field select:focus {
  border-color: rgba(79, 156, 255, 0.7);
  box-shadow: 0 0 0 3px rgba(22, 132, 238, 0.18);
}
.report-field input[readonly] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Radio + checkbox toggle */
.report-form-row label:not(.report-toggle) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #d6e6f7;
  cursor: pointer;
}
.report-form-row label input[type="radio"] {
  accent-color: #2b8ce7;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.report-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 28, 53, 0.7);
  color: #cfdcec;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.report-toggle:hover {
  background: rgba(22, 132, 238, 0.16);
  border-color: rgba(22, 132, 238, 0.45);
  color: #fff;
}
.report-toggle input[type="checkbox"] {
  accent-color: #2b8ce7;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.report-toggle:has(input:checked) {
  background: linear-gradient(90deg, rgba(22, 132, 238, 0.32), rgba(22, 132, 238, 0.12));
  border-color: rgba(79, 156, 255, 0.55);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(79, 156, 255, 0.3);
}

/* ============== Buttons ============== */
.report-btn-primary {
  background: linear-gradient(180deg, #2b8ce7, #105a9f) !important;
  border-color: rgba(79, 156, 255, 0.55) !important;
  color: #fff !important;
  font-weight: 700;
}
.report-btn-primary:hover {
  background: linear-gradient(180deg, #4ea1ef, #1a6dba) !important;
  box-shadow: 0 8px 24px rgba(22, 132, 238, 0.32);
}
.report-btn-ghost {
  background: rgba(10, 35, 64, 0.7) !important;
  color: #cfe1f6 !important;
}
.report-btn-ghost:hover {
  background: rgba(22, 132, 238, 0.16) !important;
  border-color: rgba(22, 132, 238, 0.45) !important;
  color: #fff !important;
}
.report-btn-danger {
  background: linear-gradient(180deg, #d45454, #952a2a) !important;
  border-color: rgba(212, 84, 84, 0.6) !important;
  color: #fff !important;
  font-weight: 700;
}
.report-btn-danger:hover {
  background: linear-gradient(180deg, #e36e6e, #ac3434) !important;
  box-shadow: 0 8px 24px rgba(212, 84, 84, 0.3);
}

/* ============== Periode preview block ============== */
.report-period-preview {
  margin-top: 6px;
  padding: 14px 16px;
  border: 1px dashed rgba(79, 156, 255, 0.45);
  border-radius: 12px;
  background: rgba(22, 132, 238, 0.08);
  color: #d6e6f7;
}
.report-period-preview h3 {
  margin: 0 0 6px;
  color: #6fbfff;
  font-size: 11.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 800;
}
.report-period-preview p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.report-period-preview b { color: #fff; font-weight: 700; }

/* ============== History Table ============== */
.report-history-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(8, 28, 53, 0.45);
}
.report-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: #d6e6f7;
}
.report-history-table thead th {
  position: sticky;
  top: 0;
  background: rgba(7, 22, 42, 0.95);
  color: #6fbfff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 800;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.report-history-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(47, 133, 216, 0.12);
  vertical-align: middle;
}
.report-history-table tbody tr:last-child td { border-bottom: none; }
.report-history-table tbody tr:hover td { background: rgba(22, 132, 238, 0.07); }
.report-history-table td:first-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  width: 36px;
}
.report-history-actions {
  display: inline-flex;
  gap: 6px;
}
.report-row-btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.report-row-btn:hover {
  background: rgba(22, 132, 238, 0.2);
  border-color: rgba(22, 132, 238, 0.5);
  color: #fff;
}
.report-row-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.report-row-btn-danger:hover {
  background: rgba(212, 84, 84, 0.22);
  border-color: rgba(212, 84, 84, 0.55);
  color: #fff;
}

/* Format tag chips */
.report-format-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border: 1px solid transparent;
}
.report-format-tag.report-format-pdf {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.45);
  color: #ffb6b6;
}
.report-format-tag.report-format-html {
  background: rgba(22, 132, 238, 0.18);
  border-color: rgba(79, 156, 255, 0.45);
  color: #a8d4ff;
}
.report-format-tag.report-format-ppt {
  background: rgba(255, 176, 64, 0.18);
  border-color: rgba(255, 176, 64, 0.45);
  color: #ffd699;
}

/* Empty state */
.report-history-empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(8, 28, 53, 0.35);
  color: var(--muted);
}
.report-history-empty svg {
  width: 36px;
  height: 36px;
  color: rgba(111, 191, 255, 0.5);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 10px;
}
.report-history-empty p {
  margin: 0 0 6px;
  color: #d6e6f7;
  font-size: 14px;
  font-weight: 700;
}
.report-history-empty small {
  font-size: 12px;
  color: var(--muted);
  max-width: 460px;
  line-height: 1.5;
}

/* ============== Toast notification ============== */
.report-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 320;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(79, 156, 255, 0.55);
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  color: #f6fbff;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.report-toast.visible {
  opacity: 1;
  transform: translateY(0);
}



/* ============== Responsive: report modal ============== */
@media (max-width: 820px) {
  .report-modal-card,
  .report-modal-medium { margin: 12px; width: calc(100% - 24px); }
  .report-modal-head { padding: 14px 16px; }
  .report-modal-body { padding: 14px 16px 16px; }
  .report-modal-foot { padding: 12px 16px; flex-wrap: wrap; }
  .report-form-grid-2 { grid-template-columns: 1fr; }
  .report-toast { left: 12px; right: 12px; bottom: 12px; }
}


/* ================================================================
   CHAT HISTORY GRID - Riwayat Percakapan Chatbot (index.html)
   2 kolom sama lebar: Gen-Z (kiri) & Formal (kanan)
   - List sesi compact (button) -> klik buka modal thread
   - Tombol fullscreen di header -> modal panel besar (master/detail)
   ================================================================ */
.chat-history-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  min-height: 0;
}
.chat-history-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px 14px 14px;
  min-height: 0;
  max-height: 620px;
  overflow: hidden;
}

/* Header per panel */
.chat-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.chat-bot-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-bot-id-text { min-width: 0; }
.chat-bot-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.chat-bot-avatar.genz {
  background: linear-gradient(180deg, #ff7ab8 0%, #c63286 100%);
  box-shadow: 0 4px 14px rgba(198, 50, 134, 0.32);
}
.chat-bot-avatar.formal {
  background: linear-gradient(180deg, #4ea1ef 0%, #1769c0 100%);
  box-shadow: 0 4px 14px rgba(23, 105, 192, 0.32);
}
.chat-history-panel .chat-history-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f6fbff;
  line-height: 1.2;
}
.chat-history-panel .chat-history-head p {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.chat-history-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.chat-history-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}
.chat-stat {
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #cfdcec;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 28, 53, 0.7);
  font-weight: 700;
  white-space: nowrap;
}
.chat-fullscreen-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  flex: 0 0 auto;
}
.chat-fullscreen-btn:hover {
  background: rgba(22, 132, 238, 0.2);
  border-color: rgba(79, 156, 255, 0.55);
  color: #fff;
}
.chat-fullscreen-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Toolbar per panel */
.chat-history-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.chat-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(3, 16, 32, 0.85);
}
.chat-search-wrap svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.chat-search-wrap input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: #f6fbff;
  font: inherit;
  font-size: 12.5px;
}
.chat-search-wrap input::placeholder { color: var(--muted); }

/* Session list (scrollable) */
.chat-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
  min-height: 0;
}
.chat-session-list::-webkit-scrollbar { width: 9px; }
.chat-session-list::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.chat-session-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}

/* Session card (button) */
.chat-session-list .chat-session {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr 14px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 28, 53, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
}
.chat-session-list .chat-session:hover {
  border-color: rgba(79, 156, 255, 0.55);
  background: rgba(8, 28, 53, 0.78);
  transform: translateX(1px);
}
.chat-session-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(22, 132, 238, 0.18);
  color: #6fbfff;
  flex: 0 0 auto;
}
.chat-session-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chat-session-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.chat-session-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chat-session-top b {
  font-size: 12.5px;
  font-weight: 800;
  color: #f6fbff;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  letter-spacing: 0.4px;
}
.chat-session-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #a8d4ff;
  background: rgba(22, 132, 238, 0.18);
  border: 1px solid rgba(79, 156, 255, 0.35);
  white-space: nowrap;
}
.chat-session-preview {
  font-size: 11.5px;
  color: #c4d4e7;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-session-caret {
  font-size: 18px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}
.chat-history-panel[data-variant="genz"] .chat-session-icon {
  background: rgba(255, 122, 184, 0.18);
  color: #ffaad6;
}

/* Empty / error state */
.chat-history-empty {
  margin: 8px 0 0;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: rgba(8, 28, 53, 0.35);
}
.chat-history-error {
  padding: 12px;
  margin: 0;
  font-size: 12px;
  color: #ffb6b6;
  background: rgba(212, 84, 84, 0.12);
  border: 1px solid rgba(212, 84, 84, 0.4);
  border-radius: 8px;
}

/* ================================================================
   CHAT MODAL (thread popup + fullscreen)
   ================================================================ */
.chat-modal {
  position: fixed;
  inset: 0;
  z-index: 230;
  display: grid;
  place-items: stretch;
}
.chat-modal[hidden] { display: none; }
.chat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 10, 22, 0.78);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.chat-modal-card {
  position: relative;
  z-index: 1;
  margin: 24px auto;
  width: min(820px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #2f85d8;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(13, 44, 82, 0.98), rgba(5, 19, 37, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  animation: theoryModalIn 0.22s ease;
}
.chat-modal-card-full {
  width: min(1280px, calc(100% - 48px));
  height: calc(100vh - 48px);
}
.chat-modal-card[data-variant="genz"] {
  border-color: rgba(255, 122, 184, 0.55);
}

.chat-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.55);
}
.chat-modal-id {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chat-modal-id h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #f6fbff;
  line-height: 1.2;
}
.chat-modal-id p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.chat-modal-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(10, 35, 64, 0.9);
  color: #cfe1f6;
  cursor: pointer;
  flex: 0 0 auto;
}
.chat-modal-close:hover {
  background: rgba(212, 84, 84, 0.18);
  border-color: rgba(212, 84, 84, 0.5);
  color: #fff;
}
.chat-modal-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Body bubbles (thread modal) */
.chat-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.chat-modal-body::-webkit-scrollbar { width: 10px; }
.chat-modal-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.chat-modal-body::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}

/* Bubble (shared by thread + fullscreen) */
.chat-bubble {
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 85%;
  word-break: break-word;
}
.chat-bubble-role {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 4px;
  opacity: 0.85;
}
.chat-bubble p {
  margin: 0;
  color: #eef5ff;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-bubble-human {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(22, 132, 238, 0.26), rgba(22, 132, 238, 0.14));
  border: 1px solid rgba(79, 156, 255, 0.45);
}
.chat-bubble-human .chat-bubble-role { color: #a8d4ff; }
.chat-bubble-ai {
  align-self: flex-start;
  background: rgba(7, 22, 42, 0.85);
  border: 1px solid var(--line);
}
.chat-bubble-ai .chat-bubble-role { color: #6fbfff; }
.chat-modal-card[data-variant="genz"] .chat-bubble-ai,
.chat-fullscreen-thread-body[data-variant="genz"] .chat-bubble-ai {
  background: linear-gradient(180deg, rgba(255, 122, 184, 0.16), rgba(198, 50, 134, 0.1));
  border-color: rgba(255, 122, 184, 0.4);
}
.chat-modal-card[data-variant="genz"] .chat-bubble-ai .chat-bubble-role,
.chat-fullscreen-thread-body[data-variant="genz"] .chat-bubble-ai .chat-bubble-role {
  color: #ffaad6;
}

/* ================================================================
   CHAT FULLSCREEN modal (master/detail)
   ================================================================ */
.chat-modal-card-full .chat-fullscreen-body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}
.chat-fullscreen-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 16px;
  border-right: 1px solid var(--line-soft);
  background: rgba(7, 22, 42, 0.55);
  min-height: 0;
}
.chat-fullscreen-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
  min-height: 0;
}
.chat-fullscreen-list::-webkit-scrollbar { width: 9px; }
.chat-fullscreen-list::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.chat-fullscreen-list::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.chat-fullscreen-item {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 28, 53, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.chat-fullscreen-item .chat-session-icon {
  width: 26px;
  height: 26px;
}
.chat-fullscreen-item .chat-session-icon svg { width: 12px; height: 12px; }
.chat-fullscreen-item:hover {
  border-color: rgba(79, 156, 255, 0.55);
  background: rgba(22, 132, 238, 0.12);
}
.chat-fullscreen-item.is-active {
  border-color: rgba(79, 156, 255, 0.7);
  background: linear-gradient(90deg, rgba(22, 132, 238, 0.28), rgba(22, 132, 238, 0.08));
  box-shadow: inset 0 0 0 1px rgba(79, 156, 255, 0.3);
}
.chat-modal-card[data-variant="genz"] .chat-fullscreen-item.is-active {
  border-color: rgba(255, 122, 184, 0.7);
  background: linear-gradient(90deg, rgba(255, 122, 184, 0.28), rgba(255, 122, 184, 0.08));
  box-shadow: inset 0 0 0 1px rgba(255, 122, 184, 0.32);
}
.chat-modal-card[data-variant="genz"] .chat-fullscreen-item .chat-session-icon {
  background: rgba(255, 122, 184, 0.18);
  color: #ffaad6;
}

/* Thread side */
.chat-fullscreen-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.chat-fullscreen-thread-head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 28, 53, 0.5);
}
.chat-fullscreen-thread-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #f6fbff;
  font-family: "JetBrains Mono", "Consolas", ui-monospace, monospace;
  letter-spacing: 0.5px;
}
.chat-fullscreen-thread-head p {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}
.chat-fullscreen-thread-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #2473bd rgba(7, 26, 50, 0.78);
}
.chat-fullscreen-thread-body::-webkit-scrollbar { width: 10px; }
.chat-fullscreen-thread-body::-webkit-scrollbar-track { background: rgba(7, 26, 50, 0.78); border-radius: 999px; }
.chat-fullscreen-thread-body::-webkit-scrollbar-thumb {
  border: 2px solid rgba(7, 26, 50, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, #2b8ce7, #105a9f);
}
.chat-fullscreen-hint {
  margin: auto;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* Responsive */
@media (max-width: 1100px) {
  .chat-history-panel { max-height: 520px; }
}
@media (max-width: 900px) {
  .chat-history-grid { grid-template-columns: 1fr; }
  .chat-history-panel { max-height: 480px; }
  .chat-modal-card-full .chat-fullscreen-body { grid-template-columns: 1fr; }
  .chat-fullscreen-sidebar { border-right: none; border-bottom: 1px solid var(--line-soft); max-height: 200px; }
}