:root{
  /* Bright, modern theme */
  --bg: #f7f8ff;
  --bg2: #eef2ff;
  --panel: rgba(255,255,255,0.78);
  --panel2: rgba(255,255,255,0.92);
  --border: rgba(2,6,23,0.10);
  --text: rgba(2,6,23,0.92);
  --muted: rgba(2,6,23,0.64);
  --shadow: 0 18px 40px rgba(2,6,23,0.10);
  --shadow2: 0 10px 24px rgba(2,6,23,0.08);

  --red: #ff3154;
  --red2:#ff6b7d;
  --blue: #1976ff;
  --blue2:#4ea3ff;
  --amber:#ffb020;
  --green:#16a34a;

  --primary: #3b82f6;
  --primary2: #7c3aed;

  --radius: 16px;
  --radius2: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 10% 10%, rgba(59,130,246,0.16), transparent 58%),
    radial-gradient(900px 600px at 72% 18%, rgba(124,58,237,0.14), transparent 56%),
    radial-gradient(900px 900px at 65% 92%, rgba(255,49,84,0.10), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

.app-header{
  padding: 22px 18px 10px;
  max-width: 1200px;
  margin: 0 auto;
}

.brand{display:flex; gap:14px; align-items:flex-start}
.brand__mark{
  width:42px; height:42px; border-radius: 14px;
  background: conic-gradient(from 220deg, var(--red), var(--blue), var(--primary2), var(--red));
  box-shadow: var(--shadow2);
}
.brand__title{margin:0; font-size: 20px; letter-spacing:0.2px}
.brand__subtitle{margin:4px 0 0; color:var(--muted); font-size: 13px; max-width: 68ch}

.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.tab{
  appearance:none; border:1px solid var(--border);
  background: rgba(255,255,255,0.70);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.tab:hover{transform: translateY(-1px); background: rgba(255,255,255,0.88); box-shadow: 0 10px 22px rgba(2,6,23,0.10)}
.tab[aria-selected="true"]{background: rgba(255,255,255,0.92); border-color: rgba(59,130,246,0.40)}
.tab:focus{outline: 2px solid rgba(59,130,246,0.55); outline-offset: 2px}

.app-main{max-width: 1200px; margin: 0 auto; padding: 10px 18px 26px}

.panel{display:block}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap: 16px}
@media (max-width: 980px){
  .grid2{grid-template-columns: 1fr}
}

.card{
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card--wide{margin-top: 16px}
.card__header{padding: 16px 16px 10px}
.card__header h2{margin:0 0 6px; font-size: 16px}
.card__header h3{margin:0 0 6px; font-size: 15px}
.card__header p{margin:0; color: var(--muted); font-size: 13px}
.card__footer{padding: 12px 16px 16px; color: var(--muted); font-size: 12.5px}

.muted{color: var(--muted)}
.mono{font-family: var(--mono)}

.svg-wrap{padding: 0 12px 12px}

.vessel-picker{display:flex; gap:10px; padding: 0 16px 12px; flex-wrap:wrap}
.chip{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.78);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 999px;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(2,6,23,0.06);
}
.chip.is-active{background: rgba(255,255,255,0.96); border-color: rgba(59,130,246,0.45)}

.hint{padding: 0 16px 12px; color: rgba(2,6,23,0.62); font-size: 12.5px}

.controls-row{display:flex; gap:14px; padding: 0 16px 16px; align-items:center; flex-wrap:wrap}
.toggle{display:flex; gap:10px; align-items:center; color: var(--muted); font-size: 13px; user-select:none}
.toggle input{accent-color: rgba(59,130,246,0.95)}

.stats{display:grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px}
@media (max-width: 520px){.stats{grid-template-columns:1fr}}
.stat{
  border:1px solid rgba(2,6,23,0.10);
  background: rgba(255,255,255,0.78);
  border-radius: var(--radius2);
  padding: 10px 10px;
}
.stat__k{font-size: 11.5px; color: var(--muted)}
.stat__v{margin-top: 4px; font-size: 14px}

.table{padding: 10px 16px 16px}
.table table{width:100%; border-collapse:separate; border-spacing:0}
.table th, .table td{padding:10px 10px; border-bottom: 1px solid rgba(2,6,23,0.08); font-size: 13px}
.table th{color: rgba(2,6,23,0.78); text-align:left}
.table td{color: rgba(2,6,23,0.70)}

.btn-row{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  appearance:none;
  border: 1px solid rgba(2,6,23,0.12);
  background: linear-gradient(180deg, rgba(59,130,246,0.12), rgba(59,130,246,0.08));
  color: var(--text);
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(2,6,23,0.08);
}
.btn:hover{background: linear-gradient(180deg, rgba(59,130,246,0.18), rgba(59,130,246,0.10))}
.btn--ghost{background: rgba(255,255,255,0.65); box-shadow: 0 6px 14px rgba(2,6,23,0.06)}
.btn--ghost:hover{background: rgba(255,255,255,0.85)}

.app-footer{max-width: 1200px; margin: 0 auto; padding: 0 18px 26px; color: rgba(2,6,23,0.58); font-size: 12px}

/* Assessment */
.assessment{display:grid; grid-template-columns: 1fr 1.2fr; gap: 14px; padding: 0 16px 16px}
@media (max-width: 980px){.assessment{grid-template-columns:1fr}}

.h3{margin: 0 0 10px; font-size: 14px}
.pill-bank{display:flex; flex-wrap:wrap; gap: 10px}
.pill{
  border: 1px solid rgba(2,6,23,0.12);
  background: rgba(255,255,255,0.86);
  padding: 9px 10px;
  border-radius: 999px;
  cursor: grab;
  user-select:none;
  font-size: 13px;
  box-shadow: 0 10px 18px rgba(2,6,23,0.06);
  touch-action: none;
}

.dropzone.is-over {
  outline: 2px solid rgba(14, 165, 233, .55);
  outline-offset: 3px;
}
.pill:active{cursor:grabbing}

.pill.is-drag-source{opacity: 0.35}
.pill.is-picked{outline: 2px solid rgba(59,130,246,0.55); outline-offset: 2px}

.pill-ghost{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.92;
  transform: translate3d(0,0,0);
  box-shadow: 0 18px 40px rgba(2,6,23,0.18);
}

.dropzone{
  border: 1px dashed rgba(2,6,23,0.18);
  background: rgba(255,255,255,0.72);
  border-radius: var(--radius);
  overflow:hidden;
}
.dropzone__title{padding: 10px 12px; font-weight: 700; border-bottom: 1px solid rgba(2,6,23,0.08)}
.dropzone__body{min-height: 84px; padding: 10px 12px; display:flex; flex-wrap:wrap; gap: 10px}
.dropzone.is-over{background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.48)}
.dropzone.is-target{border-color: rgba(59,130,246,0.42)}

.assessment__bar{display:flex; justify-content:space-between; gap:12px; align-items:center; padding: 0 16px 16px; flex-wrap:wrap}
.score{color: rgba(2,6,23,0.78)}

.feedback{padding: 0 16px 16px; color: rgba(2,6,23,0.86); font-size: 13px}
.feedback .good{color: var(--green)}
.feedback .bad{color: #b45309}

.callouts{padding: 0 16px 16px; display:grid; gap: 10px}
.callout{border: 1px solid rgba(2,6,23,0.10); border-radius: var(--radius2); padding: 10px 10px; background: rgba(255,255,255,0.78)}
.callout strong{color: rgba(2,6,23,0.92)}
.callout p{margin: 6px 0 0; color: rgba(2,6,23,0.68); font-size: 13px}

/* Circulation */
.circ-frame{fill: rgba(241,245,249,0.95); stroke: rgba(2,6,23,0.16); stroke-width: 2}
.circ-paths path{fill:none; stroke:transparent; stroke-width: 10}

.circ-vessel{fill:none; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round}
.circ-vessel.arterial{stroke: rgba(255,49,84,0.88)}
.circ-vessel.venous{stroke: rgba(25,118,255,0.78)}
.circ-vessel.capillary{stroke: rgba(2,6,23,0.30); stroke-width: 7; stroke-dasharray: 2.2 6}

.circ-labels text{font-size: 12px; fill: rgba(2,6,23,0.72)}
.circ-labels .chipLabel{fill: rgba(255,255,255,0.92)}

.organ{cursor:pointer}
.organ:hover{filter: brightness(1.12)}

.controls{padding: 0 16px 16px; display:grid; gap: 14px}
.control{display:grid; grid-template-columns: 1fr; gap: 8px}
.control span{color: var(--muted); font-size: 13px}
.control input[type="range"]{width:100%}

/* SVG label helpers */
.svg-labels text{font-size: 12px; fill: rgba(2,6,23,0.70)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tab:hover{transform:none}
}