/* POCUS.pk IVC & Vascular Ultrasound Learning Module */
.piv-module {
  --piv-navy-950: #041321;
  --piv-navy-900: #071d31;
  --piv-navy-850: #0a2943;
  --piv-navy-800: #0c3559;
  --piv-navy-700: #164f73;
  --piv-teal-500: #3eb7bd;
  --piv-teal-400: #5fd1d1;
  --piv-teal-300: #8fe2df;
  --piv-gold-500: #e7ad3d;
  --piv-gold-300: #ffd57d;
  --piv-blue-100: #e8f4f7;
  --piv-text: #10293c;
  --piv-muted: #5a6d7b;
  --piv-border: #d8e4e9;
  --piv-surface: #ffffff;
  --piv-surface-2: #f4f8fa;
  --piv-success: #16835b;
  --piv-danger: #b73b4a;
  --piv-warning: #9a6400;
  --piv-shadow: 0 18px 55px rgba(7, 29, 49, .13);
  color: var(--piv-text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  margin: 28px auto;
  max-width: 1460px;
  position: relative;
}

.piv-module *, .piv-module *::before, .piv-module *::after { box-sizing: border-box; }
.piv-module button, .piv-module input, .piv-module select { font: inherit; }
.piv-module button, .piv-module a { -webkit-tap-highlight-color: transparent; }
.piv-module a { color: inherit; }
.piv-module h1, .piv-module h2, .piv-module h3, .piv-module h4, .piv-module p { margin-top: 0; }
.piv-module img, .piv-module svg, .piv-module canvas { max-width: 100%; }
.piv-module [hidden] { display: none !important; }

.piv-shell {
  background: var(--piv-surface-2);
  border: 1px solid rgba(40, 113, 139, .18);
  border-radius: 26px;
  box-shadow: var(--piv-shadow);
  overflow: hidden;
}

.piv-hero {
  background:
    radial-gradient(circle at 82% 16%, rgba(75, 199, 205, .17), transparent 29%),
    linear-gradient(135deg, var(--piv-navy-950) 0%, var(--piv-navy-900) 58%, #0a3654 100%);
  color: #fff;
  padding: 28px clamp(22px, 4vw, 58px) 24px;
  position: relative;
  isolation: isolate;
}

.piv-hero::before {
  background-image: radial-gradient(rgba(111, 222, 224, .14) 1px, transparent 1px);
  background-size: 18px 18px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
  opacity: .55;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.piv-hero__glow {
  background: rgba(68, 205, 210, .22);
  border-radius: 50%;
  filter: blur(80px);
  height: 210px;
  position: absolute;
  right: 7%;
  top: -100px;
  width: 300px;
  z-index: -1;
}

.piv-brand-row { align-items: center; display: flex; gap: 12px; }
.piv-brand-mark {
  align-items: center;
  background: rgba(72, 205, 209, .12);
  border: 1px solid rgba(104, 223, 225, .38);
  border-radius: 12px;
  color: var(--piv-teal-400);
  display: flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.piv-brand-mark svg { height: 30px; width: 30px; }
.piv-eyebrow { color: var(--piv-teal-300); font-size: 13px; font-weight: 800; letter-spacing: .09em; margin-bottom: 1px; text-transform: uppercase; }
.piv-kicker { color: rgba(255, 255, 255, .68); font-size: 13px; margin-bottom: 0; }

.piv-hero__content { align-items: center; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); margin-top: 26px; }
.piv-hero__copy h1 { color: #fff; font-size: clamp(34px, 5vw, 63px); letter-spacing: -.035em; line-height: 1.03; margin-bottom: 18px; max-width: 900px; }
.piv-hero__copy > p { color: rgba(255, 255, 255, .76); font-size: clamp(16px, 1.6vw, 20px); max-width: 800px; }
.piv-hero__visual { min-height: 250px; }
.piv-hero-svg { display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.25)); width: 100%; }
.piv-pulse-ring { animation: pivPulse 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pivPulse { 0% { opacity: .85; transform: scale(.7); } 75%, 100% { opacity: 0; transform: scale(1.8); } }

.piv-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.piv-badges span { background: rgba(255,255,255,.07); border: 1px solid rgba(121, 226, 226, .2); border-radius: 999px; color: rgba(255,255,255,.8); font-size: 13px; padding: 8px 13px; }
.piv-badges strong { color: var(--piv-gold-300); }

.piv-progress-wrap { margin-top: 25px; }
.piv-progress-meta { color: rgba(255,255,255,.72); display: flex; font-size: 12px; font-weight: 700; justify-content: space-between; margin-bottom: 8px; text-transform: uppercase; }
.piv-progress { background: rgba(255,255,255,.12); border-radius: 999px; height: 8px; overflow: hidden; }
.piv-progress span { background: linear-gradient(90deg, var(--piv-teal-400), var(--piv-gold-500)); border-radius: inherit; display: block; height: 100%; transition: width .45s ease; width: 0; }

.piv-layout { display: grid; grid-template-columns: 286px minmax(0, 1fr); min-height: 780px; }
.piv-sidebar { background: #f8fbfc; border-right: 1px solid var(--piv-border); padding: 20px 14px 16px; }
.piv-sidebar__head { align-items: center; color: var(--piv-navy-800); display: flex; font-size: 12px; font-weight: 900; justify-content: space-between; letter-spacing: .09em; padding: 4px 8px 13px; text-transform: uppercase; }
.piv-icon-button { background: transparent; border: 0; cursor: pointer; display: none; gap: 3px; padding: 8px; }
.piv-icon-button span { background: var(--piv-navy-700); border-radius: 2px; display: block; height: 2px; width: 18px; }
.piv-station-nav { display: grid; gap: 5px; }
.piv-nav-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #426072;
  cursor: pointer;
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) 18px;
  padding: 9px 9px;
  text-align: left;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  width: 100%;
}
.piv-nav-button:hover { background: #edf7f8; border-color: #d3e9eb; transform: translateX(2px); }
.piv-nav-button.is-active { background: #e5f4f5; border-color: #b9dfe1; color: var(--piv-navy-900); }
.piv-nav-button.is-complete .piv-nav-index { background: var(--piv-success); color: #fff; }
.piv-nav-index { align-items: center; background: #e8eef2; border-radius: 9px; color: #60798a; display: flex; font-size: 12px; font-weight: 900; height: 32px; justify-content: center; }
.piv-nav-label { font-size: 13px; font-weight: 720; line-height: 1.25; }
.piv-nav-state { color: var(--piv-success); font-size: 15px; font-weight: 900; }
.piv-sidebar__footer { border-top: 1px solid var(--piv-border); color: var(--piv-muted); font-size: 11px; margin: 18px 7px 0; padding-top: 15px; }
.piv-sidebar__footer p { margin-bottom: 0; }

.piv-main { background: #fff; min-width: 0; padding: clamp(22px, 3.6vw, 52px); }
.piv-live-region { height: 1px; overflow: hidden; position: absolute; width: 1px; clip-path: inset(50%); }
.piv-station { animation: pivStationIn .3s ease; }
@keyframes pivStationIn { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.piv-station-meta { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 13px; }
.piv-station-number { background: #dff4f4; border-radius: 999px; color: var(--piv-navy-800); font-size: 11px; font-weight: 900; letter-spacing: .08em; padding: 6px 10px; text-transform: uppercase; }
.piv-time { color: var(--piv-muted); font-size: 12px; font-weight: 700; }
.piv-station h2 { color: var(--piv-navy-900); font-size: clamp(27px, 3.5vw, 43px); letter-spacing: -.025em; line-height: 1.12; margin-bottom: 12px; }
.piv-lead { color: #506b7b; font-size: 17px; max-width: 920px; }
.piv-objectives { background: linear-gradient(135deg, #f2f9fa, #f8fbfc); border: 1px solid #d4eaec; border-radius: 16px; margin: 24px 0; padding: 18px 20px; }
.piv-objectives h3 { color: var(--piv-navy-800); font-size: 13px; letter-spacing: .06em; margin-bottom: 10px; text-transform: uppercase; }
.piv-objectives ul { display: grid; gap: 6px 28px; grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0; padding-left: 20px; }
.piv-objectives li { color: #3e5b6d; font-size: 14px; }

.piv-grid { display: grid; gap: 18px; }
.piv-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.piv-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.piv-card { background: #fff; border: 1px solid var(--piv-border); border-radius: 16px; box-shadow: 0 8px 24px rgba(12, 53, 89, .06); padding: 20px; }
.piv-card--dark { background: var(--piv-navy-900); border-color: #143f5f; color: #fff; }
.piv-card--soft { background: var(--piv-surface-2); box-shadow: none; }
.piv-card--gold { background: #fff8e8; border-color: #f0d797; box-shadow: none; }
.piv-card h3 { color: var(--piv-navy-800); font-size: 18px; margin-bottom: 8px; }
.piv-card--dark h3 { color: #fff; }
.piv-card p:last-child { margin-bottom: 0; }
.piv-callout { border-left: 4px solid var(--piv-teal-500); border-radius: 0 12px 12px 0; background: #eef9fa; color: #36576a; margin: 18px 0; padding: 15px 18px; }
.piv-callout--warning { background: #fff7e6; border-color: var(--piv-gold-500); color: #6e4b0b; }
.piv-callout--danger { background: #fff0f2; border-color: var(--piv-danger); color: #772834; }
.piv-callout strong { color: inherit; }

.piv-checklist { display: grid; gap: 10px; margin: 16px 0; }
.piv-check { align-items: flex-start; background: #fff; border: 1px solid var(--piv-border); border-radius: 11px; cursor: pointer; display: flex; gap: 10px; padding: 12px; }
.piv-check input { accent-color: var(--piv-teal-500); margin-top: 4px; }
.piv-check span { color: #385669; font-size: 14px; }

.piv-interaction { background: #f7fafb; border: 1px solid #d9e6eb; border-radius: 20px; margin-top: 24px; overflow: hidden; }
.piv-interaction__head { align-items: center; background: #eef5f7; border-bottom: 1px solid #d9e6eb; display: flex; justify-content: space-between; padding: 14px 18px; }
.piv-interaction__head h3 { color: var(--piv-navy-800); font-size: 15px; margin: 0; }
.piv-interaction__body { padding: 20px; }
.piv-status-pill { background: #d9edf0; border-radius: 999px; color: #20596d; font-size: 11px; font-weight: 900; padding: 5px 9px; text-transform: uppercase; }
.piv-status-pill.is-success { background: #dff3e9; color: #176847; }
.piv-status-pill.is-error { background: #fae3e6; color: #982f3e; }

.piv-choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.piv-choice {
  background: #fff;
  border: 1px solid var(--piv-border);
  border-radius: 14px;
  color: #29495d;
  cursor: pointer;
  min-height: 90px;
  padding: 14px;
  text-align: left;
  transition: .18s ease;
}
.piv-choice:hover { border-color: var(--piv-teal-500); transform: translateY(-2px); }
.piv-choice.is-selected { background: #e9f7f7; border-color: var(--piv-teal-500); box-shadow: inset 0 0 0 1px var(--piv-teal-500); }
.piv-choice.is-correct { background: #e7f6ed; border-color: #4eaf7c; }
.piv-choice.is-wrong { background: #fff0f2; border-color: #d66a76; }
.piv-choice strong { color: var(--piv-navy-800); display: block; margin-bottom: 4px; }
.piv-choice small { color: #6c808c; display: block; line-height: 1.35; }

.piv-feedback { border-radius: 12px; display: none; margin-top: 14px; padding: 12px 14px; }
.piv-feedback.is-visible { display: block; }
.piv-feedback.is-success { background: #e5f5ec; color: #176847; }
.piv-feedback.is-error { background: #fff0f2; color: #8c2c3a; }
.piv-feedback.is-info { background: #eaf4f8; color: #23566f; }

.piv-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 11px;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.piv-button:hover { transform: translateY(-1px); }
.piv-button:focus-visible, .piv-nav-button:focus-visible, .piv-choice:focus-visible, .piv-icon-button:focus-visible { outline: 3px solid rgba(62,183,189,.35); outline-offset: 2px; }
.piv-button--primary { background: linear-gradient(135deg, var(--piv-teal-500), #278f9e); box-shadow: 0 8px 18px rgba(51, 160, 170, .22); color: #fff; }
.piv-button--secondary { background: #fff; border-color: #bfd1d9; color: var(--piv-navy-800); }
.piv-button--ghost { background: transparent; color: #6a7f8b; }
.piv-button--gold { background: var(--piv-gold-500); color: #2f2103; }
.piv-button[disabled] { cursor: not-allowed; opacity: .5; transform: none; }
.piv-controls { align-items: center; border-top: 1px solid var(--piv-border); display: flex; gap: 10px; justify-content: space-between; margin-top: 34px; padding-top: 20px; }

.piv-sim-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); }
.piv-sim-stage { background: #061726; border: 1px solid #1b4a67; border-radius: 16px; min-height: 320px; overflow: hidden; position: relative; }
.piv-sim-stage canvas { display: block; height: 100%; min-height: 320px; width: 100%; }
.piv-sim-panel { display: grid; gap: 14px; align-content: start; }
.piv-control-group { background: #fff; border: 1px solid var(--piv-border); border-radius: 12px; padding: 13px; }
.piv-control-group label { color: #344f61; display: flex; font-size: 13px; font-weight: 800; justify-content: space-between; margin-bottom: 8px; }
.piv-control-group output { color: var(--piv-navy-800); }
.piv-control-group input[type="range"] { accent-color: var(--piv-teal-500); width: 100%; }
.piv-readout { background: var(--piv-navy-900); border-radius: 12px; color: #dbf8f7; display: grid; gap: 5px; padding: 14px; }
.piv-readout span { color: #83b8c5; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.piv-readout strong { font-size: 21px; }

.piv-body-map { aspect-ratio: 4 / 3; background: linear-gradient(180deg, #f6fbfc, #e6f0f4); border: 1px solid var(--piv-border); border-radius: 16px; min-height: 350px; overflow: hidden; position: relative; touch-action: none; }
.piv-body-map svg { height: 100%; width: 100%; }
.piv-draggable-probe { cursor: grab; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); position: absolute; touch-action: none; user-select: none; width: 70px; z-index: 4; }
.piv-draggable-probe:active { cursor: grabbing; }
.piv-target-zone { animation: pivTarget 1.7s ease-in-out infinite; }
@keyframes pivTarget { 50% { opacity: .35; } }

.piv-ultrasound-frame { background: #000; border: 8px solid #0d263a; border-radius: 16px; box-shadow: inset 0 0 0 1px #32617c; overflow: hidden; position: relative; }
.piv-ultrasound-frame canvas { display: block; min-height: 310px; width: 100%; }
.piv-ultrasound-overlay { color: #d6f4f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; inset: 10px; pointer-events: none; position: absolute; text-shadow: 0 1px 2px #000; }
.piv-ultrasound-overlay .right { position: absolute; right: 0; top: 0; }

.piv-anatomy-buttons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.piv-anatomy-buttons button { background: #fff; border: 1px solid var(--piv-border); border-radius: 999px; color: #2e5268; cursor: pointer; font-size: 12px; font-weight: 800; padding: 7px 11px; }
.piv-anatomy-buttons button.is-active { background: var(--piv-teal-500); border-color: var(--piv-teal-500); color: #fff; }

.piv-formula { align-items: center; background: #071d31; border-radius: 13px; color: #fff; display: flex; flex-wrap: wrap; font-size: 17px; gap: 9px; justify-content: center; margin: 16px 0; padding: 16px; text-align: center; }
.piv-formula .fraction { display: inline-grid; grid-template-rows: auto auto; }
.piv-formula .fraction span:first-child { border-bottom: 1px solid rgba(255,255,255,.65); padding: 0 5px 3px; }
.piv-formula .fraction span:last-child { padding-top: 3px; }

.piv-vessel-stage { align-items: center; background: radial-gradient(circle, #edf8fa, #dbe9ee); border: 1px solid var(--piv-border); border-radius: 16px; display: flex; justify-content: center; min-height: 330px; overflow: hidden; padding: 20px; position: relative; }
.piv-vessel-svg { max-height: 300px; width: 100%; }
.piv-vein-shape { transform-box: fill-box; transform-origin: center; transition: transform .15s linear; }
.piv-artery-shape { animation: pivArtery 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pivArtery { 50% { transform: scale(1.045); } }
.piv-thrombus { opacity: 0; transition: opacity .2s ease; }
.piv-vessel-stage.has-thrombus .piv-thrombus { opacity: 1; }

.piv-scan-map { background: #f4f9fa; border: 1px solid var(--piv-border); border-radius: 16px; display: grid; gap: 18px; grid-template-columns: minmax(240px, .75fr) minmax(280px, 1.25fr); padding: 20px; }
.piv-leg-map { min-height: 430px; position: relative; }
.piv-leg-map svg { height: 100%; width: 100%; }
.piv-hotspot { align-items: center; background: var(--piv-navy-800); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,.18); color: #fff; cursor: pointer; display: flex; font-size: 11px; font-weight: 900; height: 40px; justify-content: center; position: absolute; transform: translate(-50%, -50%); width: 40px; }
.piv-hotspot.is-done { background: var(--piv-success); }
.piv-hotspot.is-current { animation: pivHotspot 1.5s ease-in-out infinite; background: var(--piv-gold-500); color: #3c2800; }
@keyframes pivHotspot { 50% { box-shadow: 0 0 0 12px rgba(231,173,61,.13); } }
.piv-scan-screen { background: var(--piv-navy-950); border-radius: 14px; color: #fff; min-height: 390px; padding: 18px; }
.piv-scan-screen canvas { background: #000; border: 1px solid #285474; border-radius: 10px; height: 260px; width: 100%; }
.piv-scan-screen h4 { color: var(--piv-teal-300); margin-bottom: 7px; }

.piv-needle-stage { background: linear-gradient(180deg, #f3e7d8 0 44%, #c95858 44% 52%, #a9d8e8 52% 70%, #e6c7a4 70%); border: 1px solid var(--piv-border); border-radius: 16px; height: 360px; overflow: hidden; position: relative; }
.piv-needle-stage::after { background: radial-gradient(ellipse at center, #3d93af 0 48%, #1d5368 50% 65%, transparent 67%); content: ""; height: 86px; left: 55%; position: absolute; top: 70%; transform: translate(-50%, -50%); width: 155px; }
.piv-needle { background: linear-gradient(90deg, #d7dce0, #fff, #a9b4bb); height: 4px; left: 4%; position: absolute; top: 30%; transform-origin: left center; width: 48%; z-index: 4; }
.piv-needle::after { border-bottom: 4px solid transparent; border-left: 13px solid #dce5e8; border-top: 4px solid transparent; content: ""; position: absolute; right: -10px; top: -2px; }
.piv-needle-tip-marker { background: var(--piv-gold-500); border-radius: 50%; box-shadow: 0 0 0 6px rgba(231,173,61,.2); height: 11px; position: absolute; transform: translate(-50%,-50%); width: 11px; z-index: 6; }
.piv-probe-block { background: linear-gradient(90deg,#e9eff2,#b8c7cf); border: 2px solid #7793a1; border-radius: 7px 7px 12px 12px; height: 76px; left: 47%; position: absolute; top: 13px; width: 105px; z-index: 5; }
.piv-beam { border-left: 70px solid transparent; border-right: 70px solid transparent; border-top: 280px solid rgba(45, 190, 198, .14); left: calc(47% - 18px); position: absolute; top: 65px; z-index: 2; }
.piv-success-burst { align-items: center; background: rgba(15, 113, 78, .9); border-radius: 999px; color: #fff; display: none; font-weight: 900; inset: 50% auto auto 50%; justify-content: center; padding: 14px 20px; position: absolute; transform: translate(-50%,-50%); z-index: 10; }
.piv-success-burst.is-visible { display: flex; animation: pivBurst .5s ease; }
@keyframes pivBurst { from { opacity: 0; transform: translate(-50%,-50%) scale(.8); } }

.piv-case-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.piv-case { background: #fff; border: 1px solid var(--piv-border); border-radius: 14px; padding: 16px; }
.piv-case h4 { color: var(--piv-navy-800); font-size: 16px; margin-bottom: 7px; }
.piv-case .piv-case-data { color: #5b7281; font-size: 13px; margin-bottom: 12px; }
.piv-case select { background: #fff; border: 1px solid #bfcfd7; border-radius: 9px; color: #29495d; padding: 9px 10px; width: 100%; }
.piv-case.is-correct { background: #eff9f3; border-color: #69b98e; }
.piv-case.is-wrong { background: #fff2f4; border-color: #d77b86; }

.piv-quiz { display: grid; gap: 16px; }
.piv-question { background: #fff; border: 1px solid var(--piv-border); border-radius: 15px; padding: 18px; }
.piv-question h4 { color: var(--piv-navy-800); font-size: 16px; line-height: 1.45; margin-bottom: 12px; }
.piv-question-options { display: grid; gap: 8px; }
.piv-question label { align-items: flex-start; border: 1px solid #d9e4e9; border-radius: 10px; cursor: pointer; display: flex; gap: 9px; padding: 10px; }
.piv-question label:hover { background: #f4fafb; }
.piv-question input { accent-color: var(--piv-teal-500); margin-top: 4px; }
.piv-quiz-result { background: var(--piv-navy-900); border-radius: 16px; color: #fff; display: none; padding: 22px; text-align: center; }
.piv-quiz-result.is-visible { display: block; }
.piv-quiz-score { color: var(--piv-gold-300); font-size: 45px; font-weight: 900; line-height: 1; }

.piv-certificate { background: #fff; border: 10px double var(--piv-navy-800); display: none; margin-top: 20px; padding: 34px; position: relative; text-align: center; }
.piv-certificate.is-visible { display: block; }
.piv-certificate::before { border: 1px solid var(--piv-gold-500); content: ""; inset: 8px; pointer-events: none; position: absolute; }
.piv-certificate h3 { color: var(--piv-navy-900); font-family: Georgia, serif; font-size: 32px; }
.piv-certificate-name { border: 0; border-bottom: 2px solid var(--piv-navy-800); color: var(--piv-navy-900); font-family: Georgia, serif; font-size: 26px; margin: 12px auto 18px; max-width: 450px; padding: 8px; text-align: center; width: 100%; }
.piv-certificate small { color: #687c88; display: block; margin-top: 14px; }

.piv-resource-list { display: grid; gap: 9px; margin: 0; padding: 0; }
.piv-resource-list li { background: #fff; border: 1px solid var(--piv-border); border-radius: 10px; list-style: none; padding: 11px 12px; }
.piv-resource-list a { color: var(--piv-navy-700); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.piv-module-footer { align-items: center; background: #eaf3f5; border-top: 1px solid var(--piv-border); display: flex; gap: 20px; justify-content: space-between; padding: 22px clamp(22px, 4vw, 58px); }
.piv-module-footer strong { color: var(--piv-navy-800); }
.piv-module-footer p { color: #607783; font-size: 13px; margin-bottom: 0; }
.piv-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.piv-noscript { background: #fff0f2; border: 1px solid #d77b86; color: #8a2937; margin: 20px; padding: 16px; }

@media (max-width: 1050px) {
  .piv-hero__content { grid-template-columns: 1fr; }
  .piv-hero__visual { display: none; }
  .piv-layout { grid-template-columns: 245px minmax(0, 1fr); }
  .piv-grid--3, .piv-choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .piv-sim-layout, .piv-scan-map { grid-template-columns: 1fr; }
  .piv-leg-map { min-height: 360px; }
}

@media (max-width: 760px) {
  .piv-module { margin: 10px 0; }
  .piv-shell { border-radius: 0; }
  .piv-hero { padding: 22px 18px 20px; }
  .piv-hero__copy h1 { font-size: 35px; }
  .piv-layout { display: block; min-height: 0; }
  .piv-sidebar { border-bottom: 1px solid var(--piv-border); border-right: 0; padding: 10px 12px; }
  .piv-icon-button { display: grid; }
  .piv-station-nav { max-height: 380px; overflow: auto; }
  .piv-station-nav.is-collapsed { display: none; }
  .piv-sidebar__footer { display: none; }
  .piv-main { padding: 24px 16px; }
  .piv-objectives ul, .piv-grid--2, .piv-grid--3, .piv-choice-grid, .piv-case-grid { grid-template-columns: 1fr; }
  .piv-controls { flex-wrap: wrap; }
  .piv-controls .piv-button { flex: 1 1 42%; }
  .piv-controls .piv-button--ghost { order: 3; width: 100%; }
  .piv-sim-stage, .piv-sim-stage canvas { min-height: 270px; }
  .piv-body-map { min-height: 300px; }
  .piv-module-footer { align-items: stretch; flex-direction: column; }
  .piv-footer-actions { display: grid; }
  .piv-footer-actions .piv-button { width: 100%; }
  .piv-certificate { padding: 24px 15px; }
}

@media (max-width: 430px) {
  .piv-brand-row { align-items: flex-start; }
  .piv-badges span { flex: 1 1 100%; }
  .piv-station h2 { font-size: 28px; }
  .piv-interaction__body { padding: 14px; }
  .piv-controls .piv-button { flex-basis: 100%; }
  .piv-needle-stage { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .piv-module *, .piv-module *::before, .piv-module *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

@media print {
  body * { visibility: hidden !important; }
  .piv-certificate, .piv-certificate * { visibility: visible !important; }
  .piv-certificate { border: 8px double #123; display: block !important; left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
  .piv-certificate .piv-button { display: none !important; }
}