:root {
    --bg: #F7F3EE;
    --card: #FFFFFF;
    --tea: #C9B7A5;
    --green: #7E8F7C;
    --deep-green: #5F6F5D;
    --text: #3C3C3C;
    --muted: #8B857E;
    --line: #E8E0D8;
    --danger: #B46A5A;
    --yellow: #D6A84F;
    --blue: #6D8FA8;
    --gray: #A6A19A;
    --shadow: 0 10px 30px rgba(64, 56, 48, 0.08);
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }

  button {
    cursor: pointer;
  }

  .app-shell {
    width: 100%;
    max-width: 560px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 22px 18px 98px;
  }

  .loading-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    color: var(--deep-green);
  }

  .loading-title {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.03em;
  }

  .loading-text {
    margin-top: 8px;
    color: var(--muted);
    font-weight: 700;
  }

  .top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
  }

  .app-title {
    font-size: 25px;
    font-weight: 900;
    color: var(--deep-green);
    margin: 0;
  }

  .app-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }

  .hamburger-btn {
    border: none;
    background: var(--card);
    color: var(--deep-green);
    border-radius: 999px;
    width: 46px;
    height: 46px;
    font-size: 24px;
    font-weight: 900;
    box-shadow: var(--shadow);
  }

  .menu-panel {
    position: fixed;
    top: 20px;
    right: 18px;
    width: 230px;
    background: var(--card);
    border-radius: 22px;
    padding: 14px;
    box-shadow: 0 18px 44px rgba(64, 56, 48, 0.2);
    z-index: 50;
  }

  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(38, 42, 36, 0.12);
    z-index: 49;
  }

  .menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .menu-panel.hidden {
    display: none;
  }

  .menu-backdrop.hidden {
    display: none;
  }

  .menu-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--muted);
    margin: 0 0 0 6px;
  }

  .menu-close {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: #F4EFE8;
    color: var(--deep-green);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
  }

  .menu-item {
    width: 100%;
    border: none;
    background: #F4EFE8;
    color: var(--deep-green);
    border-radius: 16px;
    padding: 13px 14px;
    font-weight: 900;
    text-align: left;
    margin-bottom: 8px;
  }

  .search-box {
    margin-top: 18px;
  }

  .search-input {
    width: 100%;
    border: none;
    outline: none;
    border-radius: var(--radius-md);
    background: var(--card);
    padding: 15px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    box-shadow: var(--shadow);
  }

  .search-input::placeholder {
    color: #B4AAA0;
  }

  .chips {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 14px 2px 4px;
  }

  .chip {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 900;
    color: var(--deep-green);
    background: rgba(255, 255, 255, 0.72);
  }

  .chip.active {
    background: var(--deep-green);
    color: #FFFFFF;
  }

  .section-title {
    margin: 20px 0 10px;
    font-size: 17px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .summary-card {
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-md);
    padding: 14px;
    box-shadow: var(--shadow);
  }

  .summary-number {
    font-size: 22px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .summary-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 800;
  }

  .person-list,
  .water-list,
  .map-list,
  .tree-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .person-card,
  .water-card,
  .map-card,
  .info-card,
  .form-card,
  .settings-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 17px;
    box-shadow: var(--shadow);
  }

  .person-name,
  .water-title,
  .map-title,
  .tree-name {
    font-size: 20px;
    font-weight: 900;
    color: var(--text);
  }

  .person-meta,
  .water-meta,
  .map-meta,
  .tree-meta {
    margin-top: 5px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }

  .tag-row {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
    background: #F0E8DE;
    color: var(--deep-green);
  }

  .tag.green {
    background: rgba(126, 143, 124, 0.18);
  }

  .tag.tea {
    background: rgba(201, 183, 165, 0.28);
  }

  .tag.yellow {
    background: rgba(214, 168, 79, 0.18);
    color: #8A6425;
  }

  .tag.blue {
    background: rgba(109, 143, 168, 0.18);
    color: var(--blue);
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 900;
    background: #F0E8DE;
  }

  .status-green {
    color: var(--deep-green);
    background: rgba(126, 143, 124, 0.18);
  }

  .status-yellow {
    color: #8A6425;
    background: rgba(214, 168, 79, 0.18);
  }

  .status-red {
    color: var(--danger);
    background: rgba(180, 106, 90, 0.16);
  }

  .status-blue {
    color: var(--blue);
    background: rgba(109, 143, 168, 0.18);
  }

  .status-gray {
    color: var(--gray);
    background: rgba(166, 161, 154, 0.18);
  }

  .card-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn {
    border: none;
    border-radius: 999px;
    padding: 11px 15px;
    font-size: 14px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .btn.primary {
    background: var(--deep-green);
    color: #FFFFFF;
  }

  .btn.secondary {
    background: #EFE6DC;
    color: var(--deep-green);
  }

  .btn.danger {
    background: rgba(180, 106, 90, 0.15);
    color: var(--danger);
  }

  .btn.full {
    width: 100%;
  }

  .btn.mini {
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .btn:disabled,
  .nav-item:disabled,
  .chip:disabled,
  .menu-item:disabled {
    opacity: 0.55;
    cursor: wait;
  }

  .empty-card,
  .error-card {
    background: rgba(255, 255, 255, 0.78);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    color: var(--muted);
    font-weight: 800;
  }

  .error-card {
    color: var(--danger);
  }

  .back-row {
    margin-bottom: 16px;
  }

  .back-button {
    border: none;
    background: transparent;
    color: var(--deep-green);
    padding: 0;
    font-weight: 900;
    font-size: 15px;
  }

  .detail-title-card,
  .org-title-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(239,230,220,0.76));
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 16px;
  }

  .detail-name,
  .org-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .detail-subtitle,
  .org-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
  }

  .info-card {
    margin-top: 14px;
  }

  .info-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--deep-green);
    margin-bottom: 12px;
  }

  .info-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .info-row:last-child {
    border-bottom: none;
  }

  .info-label {
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
  }

  .info-value {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    word-break: break-word;
  }

  .note-box {
    white-space: pre-wrap;
    color: var(--text);
    font-weight: 700;
  }

  .form-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .form-section-title {
    margin: 20px 0 10px;
    font-size: 16px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .field {
    margin-bottom: 13px;
  }

  .field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 900;
    color: var(--muted);
  }

  .field input,
  .field select,
  .field textarea {
    width: 100%;
    border: 1px solid var(--line);
    outline: none;
    border-radius: var(--radius-sm);
    padding: 12px 13px;
    background: #FFFDFB;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
  }

  .field textarea {
    min-height: 110px;
    resize: vertical;
  }

  .checkbox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
  }

  .checkbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 9px 12px;
    background: #F0E8DE;
    color: var(--deep-green);
    font-weight: 900;
  }

  .form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
  }

  .tree-node {
    margin-left: calc(var(--depth) * 18px);
    position: relative;
  }

  .tree-node::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(126, 143, 124, 0.18);
    border-radius: 99px;
  }

  .tree-node[style*="--depth:0"]::before {
    display: none;
  }

  .tree-card {
    background: var(--card);
    border-radius: 18px;
    padding: 14px 15px;
    box-shadow: var(--shadow);
    border-left: 6px solid rgba(126, 143, 124, 0.55);
  }

  .tree-card.level-root {
    border-left-color: var(--deep-green);
    background: linear-gradient(135deg, #FFFFFF, #F2EADF);
  }

  .water-summary-item {
    border: 1px solid var(--line);
    background: #FFFDFB;
    border-radius: var(--radius-md);
    padding: 12px;
    margin-top: 10px;
  }

  .water-image-box {
    margin-top: 10px;
  }

  .water-card-images {
    margin: 4px 0 12px;
  }

  .water-image-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    background: #EFE6DC;
    color: var(--deep-green);
    padding: 9px 13px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
  }

  .water-image-toggle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #FFFFFF;
    color: var(--muted);
    font-size: 12px;
  }

  .water-card-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
  }

  .water-card-thumb {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: #EFE6DC;
    cursor: pointer;
  }

  .water-card-thumb img,
  .water-card-thumb span {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .water-thumbs-note {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .water-image-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .water-image-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #FFFDFB;
    overflow: hidden;
    color: var(--deep-green);
    text-align: left;
    font-weight: 900;
    cursor: pointer;
    padding: 0;
  }

  .water-image-item img,
  .water-image-item span {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFE6DC;
    color: var(--muted);
  }

  .water-image-item strong {
    display: block;
    padding: 9px;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .water-image-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(33, 36, 32, 0.72);
  }

  .water-image-viewer {
    width: min(920px, 100%);
    max-height: 90vh;
    border-radius: 22px;
    background: #FFFDFB;
    overflow: hidden;
    box-shadow: var(--shadow);
  }

  .water-image-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  .water-image-viewer-bar strong {
    min-width: 0;
    color: var(--deep-green);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .water-image-viewer-bar button,
  .water-image-viewer a {
    border: 0;
    border-radius: 999px;
    background: var(--green);
    color: #FFFFFF;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
  }

  .water-image-viewer img {
    display: block;
    width: 100%;
    max-height: calc(90vh - 106px);
    object-fit: contain;
    background: #1F211E;
  }

  .water-image-viewer a {
    display: block;
    width: fit-content;
    margin: 10px auto 12px;
  }

  details summary {
    list-style: none;
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  .map-box {
    height: 460px;
    width: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--card);
    margin-top: 14px;
  }

  .leaflet-container {
    font-family: "Noto Sans TC", system-ui, sans-serif;
  }

  .custom-marker {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0 6px 16px rgba(64, 56, 48, 0.2);
    font-size: 20px;
  }

  .custom-marker.group-marker {
    box-shadow: 0 8px 22px rgba(95, 111, 93, 0.32);
    border: 2px solid rgba(95, 111, 93, 0.28);
  }

  .map-box.map-loading::after {
    content: "?啣??湔銝?..";
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: rgba(255, 255, 255, 0.92);
    color: var(--deep-green);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: var(--shadow);
  }

  .map-box {
    position: relative;
  }

  .map-group-list {
    margin-top: 12px;
    border-top: 1px solid var(--line);
  }

  .map-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .map-group-item:last-child {
    border-bottom: none;
  }

  .map-popup-list {
    margin-top: 8px;
  }

  .map-popup-item {
    padding: 8px 0;
    border-bottom: 1px solid #E8E0D8;
  }

  .map-popup-item:last-child {
    border-bottom: none;
  }

  .settings-group {
    margin-top: 16px;
  }

  .settings-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .settings-group-header .info-title {
    margin-bottom: 0;
  }

  .settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .settings-item:last-child {
    border-bottom: none;
  }

  .settings-name {
    font-weight: 900;
    color: var(--text);
  }

  .bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 28px));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(232, 224, 216, 0.7);
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(64, 56, 48, 0.14);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    z-index: 10;
  }

  .nav-item {
    border: none;
    border-radius: 999px;
    background: transparent;
    padding: 10px 4px;
    font-weight: 900;
    font-size: 13px;
    color: var(--muted);
  }

  .nav-item.active {
    background: var(--deep-green);
    color: #FFFFFF;
  }

  .operation-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(248, 245, 239, 0.72);
    backdrop-filter: blur(8px);
  }

  .operation-progress-overlay.hidden {
    display: none;
  }

  .operation-progress-panel {
    width: min(360px, 100%);
    border-radius: 26px;
    padding: 26px 24px 24px;
    background: #FFFDFB;
    border: 1px solid rgba(232, 224, 216, 0.96);
    box-shadow: 0 22px 52px rgba(64, 56, 48, 0.18);
    color: var(--deep-green);
    text-align: center;
  }

  .operation-progress-label {
    min-height: 24px;
    color: var(--muted);
    font-size: 15px;
    font-weight: 900;
  }

  .operation-progress-percent {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    font-weight: 950;
  }

  .operation-progress-track {
    height: 12px;
    margin-top: 22px;
    overflow: hidden;
    border-radius: 999px;
    background: #E7E5DE;
    box-shadow: inset 0 1px 3px rgba(64, 56, 48, 0.12);
  }

  .operation-progress-bar {
    position: relative;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5F6F5D 0%, #8FA27B 55%, #D8B35A 100%);
    box-shadow: 0 0 12px rgba(95, 111, 93, 0.35);
    transition: width 220ms ease;
  }

  .operation-progress-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: translateX(-100%);
    animation: progressShimmer 1.25s infinite;
  }

  @keyframes progressShimmer {
    100% {
      transform: translateX(100%);
    }
  }

  .toast {
    position: fixed;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    background: var(--deep-green);
    color: #FFFFFF;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 900;
    box-shadow: var(--shadow);
    z-index: 80;
  }


  /* ===============================
   * v1.2 ?啣????典?閬賢??
   * =============================== */
  .app-shell {
    padding-bottom: calc(128px + env(safe-area-inset-bottom));
  }

  .bottom-nav {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(560px, 100%);
    background: #FFFDFB;
    backdrop-filter: none;
    border: 1px solid rgba(232, 224, 216, 0.9);
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 34px rgba(64, 56, 48, 0.16);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    z-index: 1200;
  }

  .bottom-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -32px;
    height: 36px;
    background: #FFFDFB;
  }

  .nav-item {
    position: relative;
    z-index: 1;
    font-size: 15px;
    padding: 12px 4px;
  }

  .nav-item.active {
    box-shadow: 0 6px 16px rgba(95, 111, 93, 0.22);
  }

  .toast {
    bottom: calc(108px + env(safe-area-inset-bottom));
    z-index: 1400;
  }

  .map-box {
    height: min(520px, 58vh);
    min-height: 390px;
    border-radius: 28px;
    background: linear-gradient(135deg, #F3EFE7, #EAF1E8);
    border: 1px solid rgba(232, 224, 216, 0.9);
    box-shadow: 0 16px 42px rgba(64, 56, 48, 0.12);
  }

  .leaflet-container {
    background: #F3EFE7;
    font-family: "Noto Sans TC", system-ui, sans-serif;
  }

  .leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 10px 24px rgba(64, 56, 48, 0.16) !important;
    border-radius: 18px !important;
    overflow: hidden;
  }

  .leaflet-control-zoom a {
    width: 42px !important;
    height: 42px !important;
    line-height: 40px !important;
    border: none !important;
    background: rgba(255, 253, 251, 0.96) !important;
    color: var(--deep-green) !important;
    font-weight: 900;
  }

  .leaflet-control-attribution {
    background: rgba(255, 253, 251, 0.72) !important;
    border-radius: 999px 0 0 0;
    color: rgba(60, 60, 60, 0.62) !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  .leaflet-popup-content-wrapper {
    border-radius: 20px !important;
    background: #FFFDFB !important;
    color: var(--text) !important;
    box-shadow: 0 14px 36px rgba(64, 56, 48, 0.18) !important;
  }

  .leaflet-popup-content {
    margin: 14px 16px !important;
    line-height: 1.55;
    font-size: 14px;
  }

  .leaflet-popup-tip {
    background: #FFFDFB !important;
  }

  .map-pin {
    width: 36px;
    height: 36px;
    border-radius: 18px 18px 18px 6px;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(64, 56, 48, 0.24);
    border: 2px solid rgba(255, 255, 255, 0.78);
  }

  .map-pin span {
    transform: rotate(45deg);
    color: #FFFFFF;
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
  }

  .map-pin-person {
    background: linear-gradient(135deg, #6F8668, #536B54);
  }

  .map-pin-water {
    background: linear-gradient(135deg, #75AFC7, #4F839D);
  }

  .map-pin-mixed {
    background: linear-gradient(135deg, #7E8F7C 0%, #7E8F7C 48%, #6D9CB5 52%, #6D9CB5 100%);
  }

  .map-pin-group {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    transform: none;
    background: linear-gradient(135deg, #5F6F5D, #D6A84F);
    border: 3px solid rgba(255, 253, 251, 0.92);
  }

  .map-pin-group span {
    transform: none;
    font-size: 15px;
  }

  .map-card {
    border: 1px solid rgba(232, 224, 216, 0.9);
  }

  .map-card.group-card {
    background: linear-gradient(135deg, #FFFDFB, #F2EADF);
    border-left: 6px solid rgba(95, 111, 93, 0.68);
  }

  .map-group-list {
    margin-top: 12px;
    border-top: 1px dashed rgba(95, 111, 93, 0.22);
  }

  .map-group-item {
    align-items: flex-start;
    padding: 12px 0;
  }

  .map-popup-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .map-popup-address {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 800;
  }

  .map-popup-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .map-popup-actions a,
  .map-popup-actions button {
    border: none;
    border-radius: 999px;
    background: #EFE6DC;
    color: var(--deep-green);
    padding: 7px 10px;
    font-weight: 900;
    text-decoration: none;
  }

  .map-popup-actions a.primary,
  .map-popup-actions button.primary {
    background: var(--deep-green);
    color: #FFFFFF;
  }

  .map-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .map-hint-card {
    margin-top: 10px;
    border-radius: 18px;
    padding: 12px 14px;
    background: rgba(255, 253, 251, 0.74);
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  @media (min-width: 680px) {
    .app-shell {
      max-width: 720px;
    }

    .bottom-nav {
      width: min(720px, 100%);
    }
  }



  /* ===============================
   * v1.4 ?啣?瘝絡撘?鈭?蝯???
   * =============================== */
  .map-page-shell {
    padding-top: 16px;
  }

  .map-page-shell .top-bar {
    margin-bottom: 10px;
  }

  .map-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255, 253, 251, 0.86);
    border: 1px solid rgba(232, 224, 216, 0.9);
    border-radius: 22px;
    padding: 14px 15px;
    box-shadow: var(--shadow);
  }

  .map-page-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .map-page-subtitle {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .map-refresh-btn {
    flex: 0 0 auto;
    border: none;
    border-radius: 999px;
    background: #EFE6DC;
    color: var(--deep-green);
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 900;
  }

  .map-mode-row {
    margin-top: 12px;
  }

  .map-mode-chips {
    padding: 0;
  }

  .map-search-card {
    margin-top: 12px;
    position: relative;
  }

  .map-search-card .search-input {
    padding: 13px 15px;
    box-shadow: var(--shadow);
  }

  .map-search-results,
  .org-search-results {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .map-search-result,
  .org-search-result {
    width: 100%;
    border: 1px solid rgba(232, 224, 216, 0.92);
    border-radius: 16px;
    background: rgba(255, 253, 251, 0.96);
    padding: 11px 13px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(64, 56, 48, 0.08);
  }

  .map-search-result strong,
  .org-search-result strong {
    display: block;
    color: var(--deep-green);
    font-size: 14px;
    font-weight: 900;
  }

  .map-search-result span,
  .org-search-result span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .small-empty {
    padding: 12px 14px;
    border-radius: 16px;
    font-size: 13px;
  }

  .map-box.map-box-large {
    height: clamp(520px, calc(100dvh - 300px), 760px);
    min-height: 520px;
    margin-top: 14px;
    border-radius: 30px;
    box-shadow: 0 18px 48px rgba(64, 56, 48, 0.13);
  }

  .leaflet-tile-pane {
    filter: saturate(1.08) contrast(0.96) sepia(0.04);
  }

  .map-popup-title {
    letter-spacing: 0.01em;
  }

  .org-summary-shell .settings-group {
    margin-top: 16px;
  }

  .org-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: linear-gradient(135deg, rgba(255,253,251,0.95), rgba(239,230,220,0.82));
    border: 1px solid rgba(232, 224, 216, 0.9);
    border-radius: 24px;
    padding: 18px;
    box-shadow: var(--shadow);
  }

  .org-kicker {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
  }

  .org-hero-title {
    margin-top: 2px;
    color: var(--deep-green);
    font-size: 26px;
    font-weight: 900;
  }

  .org-hero-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .org-summary-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .org-stat-card {
    background: rgba(255, 253, 251, 0.9);
    border: 1px solid rgba(232, 224, 216, 0.9);
    border-radius: 20px;
    padding: 14px;
    box-shadow: var(--shadow);
  }

  .org-stat-number {
    color: var(--deep-green);
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
  }

  .org-stat-label {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .org-quick-search-card {
    margin-top: 16px;
  }

  .org-branch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .org-branch-row:last-child {
    border-bottom: none;
  }

  .org-fullscreen-page {
    min-height: 100dvh;
    background: var(--bg);
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    overflow: hidden;
  }

  .org-fullscreen-header {
    height: 64px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
    background: rgba(255, 253, 251, 0.96);
    border-bottom: 1px solid rgba(232, 224, 216, 0.92);
    box-shadow: 0 8px 24px rgba(64, 56, 48, 0.08);
    z-index: 20;
  }

  .org-back-btn {
    border: none;
    border-radius: 999px;
    background: #EFE6DC;
    color: var(--deep-green);
    padding: 9px 12px;
    font-weight: 900;
  }

  .org-fullscreen-title {
    color: var(--deep-green);
    font-weight: 900;
    font-size: 16px;
    text-align: center;
  }

  .org-zoom-controls {
    display: flex;
    gap: 6px;
  }

  .org-zoom-controls button {
    min-width: 34px;
    border: none;
    border-radius: 999px;
    background: #F4EFE8;
    color: var(--deep-green);
    padding: 8px 9px;
    font-weight: 900;
  }

  .org-fullscreen-tools {
    position: relative;
    padding: 10px 12px;
    background: rgba(247, 243, 238, 0.95);
    z-index: 15;
  }

  .org-search-results.floating {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 64px;
    max-height: 260px;
    overflow: auto;
    z-index: 30;
  }

  .org-canvas-viewport {
    position: relative;
    overflow: auto;
    margin: 0 10px;
    border-radius: 28px;
    background: linear-gradient(135deg, #FFFDFB, #EFE8DC);
    border: 1px solid rgba(232, 224, 216, 0.95);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.52), var(--shadow);
    touch-action: pan-x pan-y;
  }

  .org-canvas-inner {
    position: relative;
    transform-origin: 0 0;
    transition: transform 0.15s ease;
  }

  .org-link-layer {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }

  .org-link-layer path {
    fill: none;
    stroke: rgba(95, 111, 93, 0.34);
    stroke-width: 2;
  }

  .org-chart-node {
    position: absolute;
    width: 84px;
    min-height: 112px;
    border: none;
    background: transparent;
    text-align: center;
    padding: 0;
  }

  .org-node-circle {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(64, 56, 48, 0.18);
    border: 3px solid rgba(255, 253, 251, 0.95);
  }

  .org-node-name {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  .org-node-meta {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .org-chart-node.depth-0 .org-node-circle {
    background: #FFFDFB;
    color: var(--deep-green);
    border-color: rgba(95, 111, 93, 0.56);
  }

  .org-chart-node.depth-1 .org-node-circle { background: #5F6F5D; }
  .org-chart-node.depth-2 .org-node-circle { background: #D78A3D; }
  .org-chart-node.depth-3 .org-node-circle { background: #D6A84F; }
  .org-chart-node.depth-4 .org-node-circle { background: #6D8FA8; }
  .org-chart-node.depth-5 .org-node-circle { background: #8B857E; }

  .org-chart-node.selected .org-node-circle {
    outline: 4px solid rgba(214, 168, 79, 0.38);
    transform: scale(1.06);
  }

  .org-collapse-badge {
    position: absolute;
    top: -4px;
    right: 5px;
    min-width: 25px;
    height: 25px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--deep-green);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 900;
    border: 2px solid #FFFDFB;
    box-shadow: 0 6px 14px rgba(64, 56, 48, 0.16);
  }

  .org-node-panel {
    margin: 10px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 253, 251, 0.96);
    border: 1px solid rgba(232, 224, 216, 0.9);
    box-shadow: 0 -8px 26px rgba(64, 56, 48, 0.08);
  }

  .org-node-panel.muted {
    color: var(--muted);
    font-weight: 800;
  }

  .org-panel-name {
    color: var(--deep-green);
    font-size: 17px;
    font-weight: 900;
  }

  .org-panel-meta {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
    font-size: 13px;
  }

  @media (max-width: 420px) {
    .map-box.map-box-large {
      height: clamp(500px, calc(100dvh - 285px), 720px);
      min-height: 500px;
      border-radius: 24px;
    }

    .org-hero-card {
      flex-direction: column;
      align-items: stretch;
    }

    .org-fullscreen-header {
      grid-template-columns: auto 1fr;
    }

    .org-zoom-controls {
      grid-column: 1 / -1;
      justify-content: center;
    }
  }



  /* ===============================
   * v1.5 ?瑕恥閮?€銵冽
   * =============================== */
  .bottom-nav {
    grid-template-columns: repeat(5, 1fr);
  }

  .nav-item {
    font-size: 13px;
    padding-left: 2px;
    padding-right: 2px;
  }

  .long-page-shell {
    max-width: 720px;
  }

  .long-control-card {
    background: linear-gradient(135deg, rgba(255,253,251,0.96), rgba(240,232,222,0.72));
    border: 1px solid rgba(232, 224, 216, 0.92);
    border-radius: 24px;
    padding: 16px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
  }

  .long-control-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .long-kicker {
    font-size: 11px;
    letter-spacing: 0.14em;
    color: var(--muted);
    font-weight: 900;
  }

  .long-title {
    margin-top: 2px;
    font-size: 26px;
    font-weight: 900;
    color: var(--deep-green);
  }

  .long-subtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
  }

  .long-month-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
  }

  .long-month-row label {
    color: var(--muted);
    font-weight: 900;
    font-size: 13px;
  }

  .long-month-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 11px 13px;
    color: var(--text);
    background: #FFFDFB;
    font-weight: 900;
    font-size: 15px;
  }

  .long-slider-wrap {
    margin-top: 16px;
    background: rgba(255, 255, 255, 0.66);
    border-radius: 18px;
    padding: 13px 14px 15px;
  }

  .long-slider-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 8px;
  }

  .long-slider-label strong {
    color: var(--deep-green);
    font-size: 17px;
  }

  .long-day-slider {
    width: 100%;
    accent-color: var(--deep-green);
  }

  .long-summary-grid {
    margin-top: 12px;
  }

  .long-summary-card .summary-number {
    font-size: 24px;
  }

  .long-card-subtext {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .long-tabs {
    margin-top: 6px;
    padding-bottom: 10px;
  }

  .long-list-card {
    margin-top: 6px;
  }

  .long-record-item,
  .long-rank-row,
  .long-anomaly-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--line);
    background: #FFFDFB;
    border-radius: 18px;
    padding: 13px;
    margin-top: 10px;
  }

  .long-anomaly-item {
    display: block;
    border-color: rgba(180, 106, 90, 0.24);
    background: rgba(180, 106, 90, 0.07);
  }

  .long-record-amount,
  .long-rank-amount {
    flex: 0 0 auto;
    color: var(--deep-green);
    font-weight: 900;
    font-size: 17px;
    white-space: nowrap;
  }

  .long-rank-index {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(126, 143, 124, 0.18);
    color: var(--deep-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
  }

  .long-rank-main {
    flex: 1;
    min-width: 0;
  }

  .long-rank-row.compact {
    align-items: center;
  }

  .long-data-note {
    margin-top: 14px;
  }

  @media (max-width: 430px) {
    .bottom-nav {
      padding-left: 8px;
      padding-right: 8px;
    }

    .nav-item {
      font-size: 12px;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .long-control-head,
    .long-record-item,
    .long-rank-row {
      flex-direction: column;
    }

    .long-month-row {
      grid-template-columns: 1fr;
    }

    .long-record-amount,
    .long-rank-amount {
      align-self: flex-end;
    }
  }


  .detail-title-card.compact {
    padding: 16px 18px;
  }

  .clean-dashboard-card {
    margin-top: 12px;
  }

  .icon-btn {
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: #F0E8DE;
    color: var(--deep-green);
    font-size: 20px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .long-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .compact-field {
    margin-bottom: 0;
  }

  .long-sponsor-select {
    width: 100%;
    border: 1px solid var(--line);
    outline: none;
    border-radius: var(--radius-sm);
    padding: 12px 13px;
    background: #FFFDFB;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
  }

  .long-current-date {
    font-size: 17px;
    font-weight: 900;
    color: var(--deep-green);
    margin-bottom: 4px;
  }

  .long-range-text {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
  }

  .compact-label strong {
    display: none;
  }

  .long-alert {
    margin-top: 14px;
    border-radius: 16px;
    background: rgba(214, 168, 79, 0.16);
    color: #8A6425;
    padding: 11px 13px;
    font-weight: 900;
    cursor: pointer;
  }

  .crm-card {
    border-left: 6px solid rgba(126, 143, 124, 0.28);
  }

  .crm-summary-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .crm-line {
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
  }

  .crm-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .followup-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #FFFDFB;
    padding: 12px;
    margin-bottom: 10px;
  }

  .person-link {
    border: none;
    background: transparent;
    color: var(--deep-green);
    padding: 0;
    font: inherit;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .network-card {
    border-left: 6px solid rgba(109, 143, 168, 0.24);
  }

  .mini-network-graph {
    min-height: 156px;
    border-radius: var(--radius-md);
    background: radial-gradient(circle at center, rgba(126, 143, 124, 0.16), rgba(255, 253, 251, 0.96) 64%);
    border: 1px solid var(--line);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .mini-network-node {
    border: none;
    background: transparent;
    width: 76px;
    min-height: 96px;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .mini-network-node span,
  .relationship-node span {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: var(--blue);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(64, 56, 48, 0.16);
  }

  .mini-network-node.center span,
  .relationship-node.center span {
    width: 66px;
    height: 66px;
    background: var(--deep-green);
  }

  .mini-network-node.sponsor span,
  .relationship-node.sponsor span {
    background: var(--yellow);
  }

  .mini-network-node.direct span,
  .relationship-node.direct span {
    background: #D78A3D;
  }

  .mini-network-node.custom span,
  .relationship-node.custom span {
    background: var(--blue);
  }

  .mini-network-node strong {
    max-width: 76px;
    font-size: 12px;
    line-height: 1.25;
    color: var(--deep-green);
    overflow-wrap: anywhere;
  }

  .network-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
  }

  .relation-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .relation-row {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #FFFDFB;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .relation-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
  }

  .relation-name {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 900;
  }

  .relation-editor-card {
    margin-top: 14px;
  }

  .relation-editor-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 16px;
  }

  .editable-relation-row,
  .embedded-relation-form {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #FFFDFB;
    padding: 13px;
  }

  .relation-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
  }

  .network-last-followup {
    margin-top: 12px;
    border-radius: var(--radius-sm);
    background: rgba(126, 143, 124, 0.12);
    color: var(--deep-green);
    padding: 11px 13px;
    font-weight: 900;
  }

  .small-empty {
    color: var(--muted);
    font-weight: 800;
    padding: 10px 0;
  }

  .preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
  }

  .preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(36, 34, 31, 0.32);
  }

  .person-preview-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(560px, 100%);
    transform: translateX(-50%);
    background: var(--card);
    border-radius: 24px 24px 0 0;
    padding: 12px 18px 22px;
    box-shadow: 0 -18px 42px rgba(64, 56, 48, 0.24);
  }

  .preview-grip {
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    margin: 0 auto 14px;
  }

  .preview-close {
    position: absolute;
    top: 12px;
    right: 16px;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #F0E8DE;
    color: var(--deep-green);
    font-size: 22px;
    font-weight: 900;
  }

  .preview-name {
    color: var(--deep-green);
    font-size: 24px;
    font-weight: 900;
    padding-right: 42px;
  }

  .preview-meta,
  .preview-lines {
    color: var(--muted);
    font-weight: 800;
  }

  .preview-lines {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .app-transition {
    animation: appFadeIn 0.16s ease-out;
  }

  @keyframes appFadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .graph-page-shell {
    max-width: 640px;
  }

  .graph-card {
    overflow: hidden;
  }

  .graph-loading {
    border-radius: var(--radius-md);
    background: #FFFDFB;
    border: 1px solid var(--line);
    padding: 28px;
    color: var(--muted);
    font-weight: 900;
    text-align: center;
  }

  .relationship-graph {
    position: relative;
    width: 100%;
    min-height: 360px;
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: radial-gradient(circle at center, rgba(109, 143, 168, 0.16), rgba(255, 253, 251, 0.98) 68%);
    border: 1px solid var(--line);
  }

  .relationship-link-layer {
    position: absolute;
    inset: 0;
    width: 520px;
    height: 100%;
    pointer-events: none;
  }

  .relationship-link-layer line {
    stroke: rgba(95, 111, 93, 0.34);
    stroke-width: 3;
    stroke-linecap: round;
  }

  .relationship-node {
    position: absolute;
    border: none;
    background: transparent;
    width: 84px;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .relationship-node strong {
    max-width: 84px;
    color: var(--deep-green);
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .relationship-node em {
    max-width: 84px;
    color: var(--muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .graph-edge-list {
    margin-top: 12px;
  }

  .graph-link-card {
    margin-top: 14px;
  }

  @media (max-width: 420px) {
    .long-filter-grid {
      grid-template-columns: 1fr;
    }

    .relation-row {
      align-items: flex-start;
      flex-direction: column;
    }

    .relation-row .btn {
      width: 100%;
    }

    .mini-network-graph {
      justify-content: flex-start;
    }

    .relationship-graph {
      margin-left: -2px;
      margin-right: -2px;
    }
  }

  .water-image-preview,
  .water-thumb-inline {
    width: 100%;
    margin: 0 0 12px;
    padding: 0;
    overflow: hidden;
    border: none;
    border-radius: var(--radius-sm);
    background: #F4EFE8;
  }

  .water-image-preview img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .water-thumb-inline img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
  }

  .followup-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }

  .followup-item:last-child {
    border-bottom: none;
  }

  .followup-date,
  .followup-next {
    color: var(--muted);
    font-size: 13px;
    font-weight: 900;
  }

  .followup-content {
    margin: 5px 0;
    color: var(--text);
    font-weight: 800;
    line-height: 1.55;
  }

  .tag.gray {
    background: rgba(166, 161, 154, 0.18);
    color: var(--gray);
  }