/* Color Palette */
      :root {
        --color-red: #fa5246;
        --color-white: #f2f7f5;
        --color-brown: #00473e;
        --color-pink: #ffa8ba;
        --color-brownDark: #00332c;
        --color-blue: #475d5b;
        --color-black: #00473e;
        --color-gray: #475d5b;
        --color-lightGray: #f2f7f5;
        --color-darkGray: #475d5b;
      }

      body {
        min-height: auto !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
        background: #f2f7f5;
        margin: 0;
        padding: 0;
        color: #475d5b;
      }

      body * {
        font-weight: bold;
      }

      .header {
        background: linear-gradient(135deg, #00473e 0%, #00332c 100%);
        color: #f2f7f5;
        padding: 1rem 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      }

      .header h1 {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
      }

      .btn-edit {
        background: rgba(242, 247, 245, 0.2);
        border: 1px solid rgba(242, 247, 245, 0.4);
        color: #f2f7f5;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
      }

      .btn-edit:hover {
        background: rgba(250, 174, 43, 0.35);
      }

      .header-icon-link {
        display: flex;
        align-items: center;
        cursor: pointer;
        opacity: 0.9;
        transition: opacity 0.3s;
      }

      .header-icon-link:hover {
        opacity: 1;
      }

      .header-icon-link img {
        width: 25px;
        height: 25px;
        filter: brightness(0) invert(1); /* 将图标变成白色 */
      }

      /* Home icon 按钮 */
      .home-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        width: 40px;
        height: 40px;
        background-color: #faae2b;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background-color 0.3s;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        padding: 0;
      }

      .home-btn:hover {
        background-color: #ffa8ba;
      }

      .home-btn img {
        width: 25px;
        height: 25px;
      }

      .character-selector {
        display: flex;
        align-items: center;
        padding: 0.5rem;
      }

      .character-selector select {
        background: #f2f7f5;
        border: 1px solid #00332c;
        color: #00473e;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
      }

      .main-container {
        display: flex;
        background-color: #f2f7f5;
      }

      .charts-container {
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
        padding-top: 0;
      }

      #charts-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        width: 100%;
        align-content: flex-start;
      }

      .chart-item-full:not(:first-child) {
        margin-top: 1rem;
      }
      .chart-item-half {
        margin-top: 0;
      }

      .chart-item {
        background: #f2f7f5;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 51, 44, 0.2);
        box-sizing: border-box;
        overflow: hidden;
      }

      .chart-item-full {
        width: 100%;
      }

      .charts-row {
        display: flex;
        gap: 1rem;
        width: 100%;
        flex-wrap: wrap;
      }

      .chart-item-half {
        width: calc(50% - 0.5rem);
        min-width: 0;
        flex-shrink: 0;
      }

      /* 确保 charts-row 内的 chart-item-half 也正确显示 */
      .charts-row .chart-item-half {
        width: calc(50% - 0.5rem);
      }

      .chart-item h3 {
        margin: 0;
        font-size: 1rem;
        color: #00473e;
      }

      .chart-container {
        width: 100%;
        max-width: 100%;
        height: 300px;
        overflow: hidden;
        box-sizing: border-box;
      }

      .chart-item-full .chart-container {
        height: 450px;
      }

      .progress-visualization-container {
        width: 400px;
        background: #f2f7f5;
        border-radius: 8px;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0, 51, 44, 0.2);
        display: flex;
        flex-direction: column;
      }

      .progress-visualization-wrapper {
        flex: 1;
        min-height: 500px;
        position: relative;
      }

      .progress-visualization-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 4px;
      }

      .progress-info {
        margin-top: 1rem;
        padding: 1rem;
        background: #f2f7f5;
        border-radius: 6px;
      }

      .progress-info h3 {
        margin: 0 0 0.5rem 0;
        font-size: 1.2rem;
        color: #00473e;
      }

      .progress-info .progress-value {
        font-size: 2rem;
        font-weight: bold;
        color: #faae2b;
        margin: 0.5rem 0;
      }

      .progress-info .next-milestone {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--color-gray);
      }

      .progress-info .next-milestone-title {
        font-size: 0.9rem;
        color: #475d5b;
        margin-bottom: 0.5rem;
      }

      .progress-info .next-milestone-name {
        font-size: 1rem;
        font-weight: 600;
        color: #00473e;
        margin-bottom: 0.25rem;
      }

      .progress-info .next-milestone-progress {
        font-size: 1.5rem;
        font-weight: bold;
        color: #faae2b;
      }

      /* Modal 样式 */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
      }

      .modal.active {
        display: flex;
      }

      .modal-content {
        background: #f2f7f5;
        border-radius: 8px;
        padding: 2rem;
        width: 90%;
        max-width: 800px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
      }

      .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
      }

      .modal-header h2 {
        margin: 0;
        font-size: 1.5rem;
        color: #00473e;
      }

      .modal-body {
        flex: 1;
        overflow-y: auto;
        margin-bottom: 1rem;
      }

      .modal-body textarea {
        width: 100%;
        min-height: 400px;
        font-family: "Courier New", monospace;
        font-size: 0.9rem;
        padding: 1rem;
        border: 1px solid #00332c;
        border-radius: 4px;
        resize: vertical;
        background: #f2f7f5;
        color: #475d5b;
      }

      .modal-footer {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
      }

      .btn {
        padding: 0.5rem 1.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.3s;
      }

      .btn-primary {
        background: #faae2b;
        color: #00473e;
      }

      .btn-primary:hover {
        background: #ffa8ba;
      }

      .btn-secondary {
        background: #475d5b;
        color: #f2f7f5;
      }

      .btn-secondary:hover {
        background: #00473e;
      }

      .btn-success {
        background: #faae2b;
        color: #00473e;
      }

      .btn-success:hover {
        background: #ffa8ba;
      }

      .error-message {
        color: #fa5246;
        font-size: 0.9rem;
        margin-top: 0.5rem;
      }

      .level-select {
        background: rgba(242, 247, 245, 0.2);
        border: 1px solid rgba(242, 247, 245, 0.4);
        color: #f2f7f5;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        margin-left: 1rem;
        outline: none;
      }

      .level-select option {
        background: #00473e;
        color: #f2f7f5;
      }

      .chart-item h3 a {
        text-decoration: none;
        margin-left: 0.5rem;
        font-size: 0.9rem;
        font-weight: normal;
        text-decoration: underline;
        font-style: italic;
      }

      .chart-item h3 a:hover {
        text-decoration: underline;
      }