* { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      height: 100%;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
    }
    body {
      font-family: ui-sans-serif, system-ui, sans-serif;
      background: #f9fafb;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 20px;
    }
    .container { text-align: center; max-width: 1200px; }
    h1 {
      color: #1f2937;
      font-size: 2.5rem;
      margin-bottom: 8px;
    }
    .subtitle {
      color: #6b7280;
      font-size: 1.1rem;
      margin-bottom: 30px;
    }
    .section-title {
      color: #374151;
      font-size: 1.4rem;
      margin: 30px 0 15px 0;
    }
    .section-title:first-of-type { margin-top: 0; }
    .patient-selector {
      display: inline-flex;
      gap: 12px;
      background: #e5e7eb;
      border-radius: 12px;
      padding: 10px 20px;
      align-items: center;
    }
    .selector-label {
      color: #374151;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .selector-radios {
      display: flex;
      gap: 12px;
    }
    .selector-radios label {
      display: flex;
      align-items: center;
      gap: 4px;
      color: #374151;
      font-size: 0.9rem;
      cursor: pointer;
    }
    .selector-radios input[type="radio"] {
      width: 16px;
      height: 16px;
      accent-color: #3B82F6;
    }
    .selector-divider {
      color: #9ca3af;
      font-size: 1.1rem;
    }
    .selector-row {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -8px;
      margin-bottom: 20px;
    }
    .style-selector {
      display: inline-flex;
      gap: 12px;
      background: #e5e7eb;
      border-radius: 12px;
      padding: 8px 16px;
      margin-left: 20px;
      margin-top: -18px;
      align-items: center;
    }
    .style-selector span {
      color: #374151;
      font-size: 0.9rem;
      font-weight: 500;
    }
    .style-selector label {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      font-size: 0.85rem;
      color: #374151;
    }
    body.dragging { cursor: grabbing; user-select: none; }
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .header-left {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-logo { height: 48px; width: auto; }
    .header-title {
      font-size: 33px;
      color: #B91C1C;
      margin: 0;
      line-height: 1;
    }
    .header-title em { font-style: italic; }
    .header-divider {
      opacity: 0.3;
      font-size: 30px;
      color: #666;
      line-height: 1;
    }
    .header-subtitle {
      font-size: 19px;
      color: #3B82F6;
      opacity: 0.9;
      margin: 0;
      line-height: 1;
    }
    .header-center { flex: 2; text-align: center; }
    .header-right { flex: 1; text-align: right; }

    /* Vitruvian Man View */
    .body-view {
      display: flex;
      justify-content: center;
      padding: 20px;
      transition: background-color 0.3s ease;
    }
    .body-view.trauma-mode {
      background-color: #fef2f2;
    }
    .body-view.local-trauma-mode {
      background-color: #fefce8;
    }
    .general-trauma-list {
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      z-index: 5;
    }
    .general-trauma-item {
      font-size: 16px;
      color: #1e40af;
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .general-trauma-item:hover {
      background: rgba(59, 130, 246, 0.2);
      color: #1e3a8a;
    }
    .top-level-links {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }
    .hand-link {
      position: absolute;
      z-index: 2;
      font-size: 15px;
      font-weight: 600;
      color: #1e40af;
      cursor: pointer;
      padding: 2px 5px;
      border-radius: 4px;
      background: transparent;
      border: none;
      text-align: center;
      pointer-events: auto;
    }
    .hand-link:hover {
      background: rgba(59, 130, 246, 0.25);
      color: #1e3a8a;
    }
    .hand-link-icon {
      background: transparent;
      border: none;
      padding: 0;
      border-radius: 6px;
      overflow: hidden;
    }
    .hand-link-icon img {
      height: 60px;
      display: block;
    }
    .hand-link-icon:hover {
      background: rgba(59, 130, 246, 0.15);
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
    }
    .trauma-mode .top-level-links {
      display: grid !important;
      grid-template-columns: repeat(2, auto);
      justify-content: center;
      align-content: start;
      gap: 6px 10px;
      padding-top: 70px;
      height: 100%;
      pointer-events: auto;
    }
    .trauma-mode .hand-link {
      position: static;
    }
    .shoulder-injury-link-left { left: 115px; top: 95px; }
    .shoulder-injury-link-right { right: 115px; top: 95px; }
    .elbow-injury-link-left { left: 55px; top: 180px; }
    .elbow-injury-link-right { right: 55px; top: 180px; }
    .hand-injury-link-left { left: 20px; top: 290px; }
    .hand-injury-link-right { right: 35px; top: 290px; }
    /* Override positions in /assets/template-picker-positions.css */
    .vitruvian-container {
      position: relative;
      width: 765px;
      max-width: 100%;
      opacity: 0;
      transition: opacity 0.15s ease-in;
    }
    .vitruvian-container.loaded {
      opacity: 1;
    }
    .vitruvian-image {
      width: 100%;
      height: auto;
      display: block;
      margin: 21px auto 0;
      opacity: 0.3;
      object-fit: contain;
      object-position: center top;
    }
    .body-region {
      position: absolute;
      z-index: 1;
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.2);
      border-radius: 6px;
      padding: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 2px;
      align-content: flex-start;
      justify-content: center;
    }
    .body-region:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(59, 130, 246, 0.5);
      z-index: 10;
    }
    .region-item {
      font-size: 15px;
      color: #1e40af;
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 4px;
      white-space: nowrap;
      visibility: hidden;
    }
    .body-region:hover .region-item {
      visibility: visible;
    }
    .region-item:hover {
      background: rgba(59, 130, 246, 0.2);
      color: #1e3a8a;
    }
    .region-label {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      pointer-events: none;
    }
    .labeled-region:hover .region-label {
      visibility: hidden;
    }
    .region-item.disabled {
      opacity: 0.4;
      cursor: default;
    }
    .region-item.disabled:hover {
      background: transparent;
      color: #1e40af;
    }
    .body-region-text {
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #3b82f6;
      border: 2px solid #3b82f6;
      border-radius: 6px;
      background: white;
    }
    .body-region-text:hover {
      background: #eff6ff;
      color: #1e40af;
      border-color: #1e40af;
    }
    .body-region-label {
      position: absolute;
      font-size: 11px;
      font-weight: 600;
      color: #5b21b6;
      pointer-events: none;
      text-shadow: 1px 1px 2px white, -1px -1px 2px white, 1px -1px 2px white, -1px 1px 2px white;
    }
    .section-label {
      position: absolute;
      text-align: left;
      font-weight: 600;
      color: #3b82f6;
      font-size: 17px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 30px;
    }
    .section-label .section-title {
      min-height: 80px;
    }
    .view-toggle {
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .view-toggle label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 19px;
      color: #374151;
    }
    .view-toggle input[type="radio"] {
      margin: 0;
      cursor: pointer;
      width: 20px;
      height: 20px;
    }

    /* Region Popup */
    .region-popup {
      position: fixed;
      background: white;
      border: 2px solid #7c3aed;
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.2);
      z-index: 1000;
      min-width: 200px;
      max-width: 300px;
      max-height: 400px;
      overflow-y: auto;
    }
    .popup-header {
      padding: 12px 16px;
      background: #f5f3ff;
      border-bottom: 1px solid #e5e7eb;
      font-weight: 600;
      color: #5b21b6;
      border-radius: 10px 10px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .popup-close {
      background: none;
      border: none;
      font-size: 15px;
      cursor: pointer;
      color: #6b7280;
      line-height: 1;
    }
    .popup-close:hover {
      color: #374151;
    }
    .popup-templates {
      padding: 8px 0;
    }
    .popup-template-item {
      padding: 10px 16px;
      cursor: pointer;
      transition: background 0.15s;
      color: #374151;
    }
    .popup-template-item:hover {
      background: #f5f3ff;
      color: #5b21b6;
    }
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
    }
  
    /* Style: classic */
    .body-view[data-style="classic"] .body-region { background: rgba(30, 64, 175, 0); border-color: rgba(30, 64, 175, 0); }
    .body-view[data-style="classic"] .body-region:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(30, 64, 175, 0.5); }
    .body-view[data-style="classic"] .region-item { color: #1e40af; }
    .body-view[data-style="classic"] .region-item:hover { background: rgba(30, 64, 175, 0.2); }
    .body-view[data-style="classic"] .region-label { color: #1e40af; }
    .body-view[data-style="classic"] .section-label { color: #1e40af; }
    .body-view[data-style="classic"] .trauma-switch-btn { color: #1e40af; border-color: rgba(30, 64, 175, 0.3); }
    .body-view[data-style="classic"] .hand-link { color: #1e40af; background: transparent; }
    .body-view[data-style="classic"] .hand-link:hover { background: rgba(30, 64, 175, 0.25); }
    .body-view[data-style="classic"] .general-trauma-item { color: #1e40af; }
    .body-view[data-style="classic"] .general-trauma-item:hover { background: rgba(30, 64, 175, 0.2); }
    /* Style: cosmo */
    .body-view[data-style="cosmo"] .body-region { background: rgba(91, 33, 182, 0); border-color: rgba(91, 33, 182, 0); }
    .body-view[data-style="cosmo"] .body-region:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(91, 33, 182, 0.5); }
    .body-view[data-style="cosmo"] .region-item { color: #5b21b6; }
    .body-view[data-style="cosmo"] .region-item:hover { background: rgba(91, 33, 182, 0.2); }
    .body-view[data-style="cosmo"] .region-label { color: #5b21b6; }
    .body-view[data-style="cosmo"] .section-label { color: #5b21b6; }
    .body-view[data-style="cosmo"] .trauma-switch-btn { color: #5b21b6; border-color: rgba(91, 33, 182, 0.3); }
    .body-view[data-style="cosmo"] .hand-link { color: #5b21b6; background: transparent; }
    .body-view[data-style="cosmo"] .hand-link:hover { background: rgba(91, 33, 182, 0.25); }
    .body-view[data-style="cosmo"] .general-trauma-item { color: #5b21b6; }
    .body-view[data-style="cosmo"] .general-trauma-item:hover { background: rgba(91, 33, 182, 0.2); }
    /* Style: stone */
    .body-view[data-style="stone"] .body-region { background: rgba(71, 85, 105, 0); border-color: rgba(71, 85, 105, 0); }
    .body-view[data-style="stone"] .body-region:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(71, 85, 105, 0.5); }
    .body-view[data-style="stone"] .region-item { color: #475569; }
    .body-view[data-style="stone"] .region-item:hover { background: rgba(71, 85, 105, 0.2); }
    .body-view[data-style="stone"] .region-label { color: #475569; }
    .body-view[data-style="stone"] .section-label { color: #475569; }
    .body-view[data-style="stone"] .trauma-switch-btn { color: #475569; border-color: rgba(71, 85, 105, 0.3); }
    .body-view[data-style="stone"] .hand-link { color: #475569; background: transparent; }
    .body-view[data-style="stone"] .hand-link:hover { background: rgba(71, 85, 105, 0.25); }
    .body-view[data-style="stone"] .general-trauma-item { color: #475569; }
    .body-view[data-style="stone"] .general-trauma-item:hover { background: rgba(71, 85, 105, 0.2); }
    /* Style: forest */
    .body-view[data-style="forest"] .body-region { background: rgba(22, 101, 52, 0); border-color: rgba(22, 101, 52, 0); }
    .body-view[data-style="forest"] .body-region:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(22, 101, 52, 0.5); }
    .body-view[data-style="forest"] .region-item { color: #166534; }
    .body-view[data-style="forest"] .region-item:hover { background: rgba(22, 101, 52, 0.2); }
    .body-view[data-style="forest"] .region-label { color: #166534; }
    .body-view[data-style="forest"] .section-label { color: #166534; }
    .body-view[data-style="forest"] .trauma-switch-btn { color: #166534; border-color: rgba(22, 101, 52, 0.3); }
    .body-view[data-style="forest"] .hand-link { color: #166534; background: transparent; }
    .body-view[data-style="forest"] .hand-link:hover { background: rgba(22, 101, 52, 0.25); }
    .body-view[data-style="forest"] .general-trauma-item { color: #166534; }
    .body-view[data-style="forest"] .general-trauma-item:hover { background: rgba(22, 101, 52, 0.2); }
    /* Style: ailacra */
    .body-view[data-style="ailacra"] .body-region { background: rgba(30, 64, 175, 0); border-color: rgba(30, 64, 175, 0); }
    .body-view[data-style="ailacra"] .body-region:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(30, 64, 175, 0.5); }
    .body-view[data-style="ailacra"] .region-item { color: #1e40af; }
    .body-view[data-style="ailacra"] .region-item:hover { background: rgba(30, 64, 175, 0.2); }
    .body-view[data-style="ailacra"] .region-label { color: #1e40af; }
    .body-view[data-style="ailacra"] .section-label { color: #1e40af; }
    .body-view[data-style="ailacra"] .trauma-switch-btn { color: #1e40af; border-color: rgba(30, 64, 175, 0.3); }
    .body-view[data-style="ailacra"] .hand-link { color: #1e40af; background: transparent; }
    .body-view[data-style="ailacra"] .hand-link:hover { background: rgba(30, 64, 175, 0.25); }
    .body-view[data-style="ailacra"] .general-trauma-item { color: #1e40af; }
    .body-view[data-style="ailacra"] .general-trauma-item:hover { background: rgba(30, 64, 175, 0.2); }
    .site-badge {
      position: absolute;
      top: 2px;
      right: 4px;
      font-size: 0.55rem;
      font-weight: 600;
      background: #e0f2fe;
      color: #0369a1;
      padding: 1px 4px;
      border-radius: 3px;
    }
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .user-badge {
      color: #374151;
      font-size: 0.85rem;
      padding: 4px 10px;
      background: #e5e7eb;
      border-radius: 12px;
    }
    .user-badge .role {
      font-size: 0.7rem;
      opacity: 0.7;
      margin-left: 4px;
    }
    .auth-btn {
      background: #3B82F6;
      border: none;
      color: white;
      padding: 8px 12px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.85rem;
    }
    .auth-btn:hover { background: #2563eb; }
    .style-dropdown {
      padding: 6px 10px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      font-size: 0.85rem;
      background: white;
      cursor: pointer;
    }
    .style-dropdown:focus { outline: none; border-color: #3b82f6; }