:root {
      --bg: #fdf5ec;
      --card: #fff9f3;
      --text-main: #42281b;
      --text-sub: #8b5e3c;
      --accent: #f59e0b;
      --accent-soft: #ffedd5;

      --shadow-strong: rgba(146, 64, 14, 0.16);
      --shadow-photo: rgba(180, 83, 9, 0.25);
      --shadow-photo-hover: rgba(146, 64, 14, 0.4);
      --shadow-chip: rgba(180, 83, 9, 0.18);

      --hero-overlay: linear-gradient(135deg, rgba(120,53,15,0.45), rgba(248,250,252,0.12));
      --hero-text: #fefce8;
      --hero-nav-bg: rgba(120,53,15,0.45);
      --hero-nav-border: rgba(254,243,199,0.55);

      --footer-border: #fed7aa;
      --photo-bg: #fed7aa;

      --lightbox-backdrop: rgba(15, 23, 42, 0.72);
      --lightbox-bg: radial-gradient(circle at top, #fef3c7 0, #1f2937 55%);
      --lightbox-caption: #fef9c3;
      --lightbox-counter: #e5e7eb;

      --btn-essay-bg: linear-gradient(135deg, #fed7aa, #ffedd5);
      --btn-essay-text: #92400e;

      --social-bg: rgba(251, 191, 36, 0.18);
      --social-bg-hover: #fed7aa;
      --social-text: #92400e;
      --social-text-hover: #7c2d12;

      --toast-bg: rgba(15, 23, 42, 0.72);
      --toast-text: #fefce8;

      --modal-backdrop: rgba(15, 23, 42, 0.72);
      --modal-bg: rgba(255, 249, 243, 0.98);
      --modal-border: rgba(254, 243, 199, 0.9);

      --record-bg: rgba(251, 191, 36, 0.14);
      --record-border: rgba(245, 158, 11, 0.25);
      --record-text: #92400e;
      --record-bg-hover: rgba(251, 191, 36, 0.22);
      --record-text-hover: #7c2d12;
    }

    :root[data-theme="dark"] {
      --bg: #020617;
      --card: #020617;
      --text-main: #e5e7eb;
      --text-sub: #9ca3af;
      --accent: #fbbf24;
      --accent-soft: #6b21a8;

      --shadow-strong: rgba(0, 0, 0, 0.7);
      --shadow-photo: rgba(15, 23, 42, 0.8);
      --shadow-photo-hover: rgba(15, 23, 42, 1);
      --shadow-chip: rgba(15, 23, 42, 0.8);

      --hero-overlay: linear-gradient(135deg, rgba(15,23,42,0.85), rgba(15,23,42,0.7));
      --hero-text: #fefce8;
      --hero-nav-bg: rgba(15,23,42,0.9);
      --hero-nav-border: rgba(248, 250, 252, 0.12);

      --footer-border: #4b5563;
      --photo-bg: #0f172a;

      --lightbox-backdrop: rgba(0, 0, 0, 0.88);
      --lightbox-bg: radial-gradient(circle at top, #0b1120 0, #020617 70%);
      --lightbox-caption: #e5e7eb;
      --lightbox-counter: #9ca3af;

      --btn-essay-bg: linear-gradient(135deg, #4b5563, #1f2937);
      --btn-essay-text: #e5e7eb;

      --social-bg: rgba(31, 41, 55, 0.9);
      --social-bg-hover: #111827;
      --social-text: #e5e7eb;
      --social-text-hover: #fbbf24;

      --toast-bg: rgba(0, 0, 0, 0.72);
      --toast-text: #f9fafb;

      --modal-bg: rgba(15, 23, 42, 0.96);
      --modal-border: rgba(55, 65, 81, 0.9);

      --record-bg: rgba(255,255,255,0.06);
      --record-border: rgba(255,255,255,0.10);
      --record-text: #e5e7eb;
      --record-bg-hover: rgba(255,255,255,0.10);
      --record-text-hover: #fbbf24;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; animation: none !important; }
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      background: radial-gradient(circle at top left, #fff7ed 0, #fef3c7 40%, #fdf5ec 100%);
      color: var(--text-main);
      line-height: 1.8;
      padding: 18px;
      transition: background 0.35s ease, color 0.35s ease;
    }

    :root[data-theme="dark"] body {
      background: radial-gradient(circle at top left, #020617 0, #020617 30%, #020617 100%);
    }

    :focus-visible {
      outline: 3px solid rgba(245, 158, 11, 0.55);
      outline-offset: 3px;
      border-radius: 10px;
    }

    .skip-link {
      position: absolute;
      left: -9999px;
      top: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.85);
      color: #fff;
      text-decoration: none;
      z-index: 999;
    }
    .skip-link:focus { left: 12px; }

    .page {
      max-width: 960px;
      margin: 0 auto 32px;
      background: rgba(255, 249, 243, 0.96);
      border-radius: 26px;
      overflow: hidden;
      box-shadow: 0 22px 60px var(--shadow-strong);
      border: 1px solid rgba(254, 243, 199, 0.9);
      backdrop-filter: blur(18px);
      transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    }

    :root[data-theme="dark"] .page {
      background: rgba(15, 23, 42, 0.95);
      border-color: rgba(55, 65, 81, 0.9);
    }

    .hero {
      position: relative;
      height: 260px;
      background-image: url("https://cdn.assets.net.cn/images/background/water-a1.avif");
      background-size: cover;
      background-position: center;
      transition: filter 0.35s ease, transform 0.35s ease;
    }

    :root[data-theme="dark"] .hero { filter: brightness(0.7) contrast(1.1); }

    .hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); transition: background 0.35s ease; }

    .hero-inner {
      position: relative;
      height: 100%;
      padding: 24px 30px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      color: var(--hero-text);
      z-index: 4;
    }

    .hero-title {
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
      text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }

    .hero-subtitle { font-size: 14px; opacity: 0.94; }

    .hero-nav {
      position: absolute;
      top: 16px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      z-index: 5;
      pointer-events: none;
    }

    .nav-inner {
      display: flex;
      gap: 18px;
      background: var(--hero-nav-bg);
      padding: 6px 18px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
      border: 1px solid var(--hero-nav-border);
      box-shadow: 0 4px 14px rgba(0,0,0,0.4);
      pointer-events: auto;
    }

    .nav-item {
      font-size: 13px;
      color: #fefce8;
      text-decoration: none;
      padding: 4px 8px;
      border-radius: 8px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .nav-item:hover { background: rgba(254,243,199,0.35); color: #fef3c7; }
    .nav-item.active { background: rgba(254,243,199,0.42); color: #fff7ed; }

    .theme-toggle {
      position: absolute;
      top: 16px;
      right: 18px;
      z-index: 6;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(15, 23, 42, 0.18);
      color: #fefce8;
      backdrop-filter: blur(6px);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
      transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.12s ease, color 0.2s ease;
    }

    .theme-toggle i { font-size: 15px; }

    .theme-toggle:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7);
      background: rgba(15, 23, 42, 0.4);
    }

    :root[data-theme="dark"] .theme-toggle {
      background: rgba(15, 23, 42, 0.85);
      color: #fbbf24;
    }

    .main { padding: 26px 28px 30px; transition: color 0.35s ease; }

    @media (min-width: 768px) {
      .main { padding: 30px 40px 34px; }
    }

    .top-row {
      display: flex;
      flex-wrap: wrap;
      gap: 22px;
      margin-bottom: 24px;
      align-items: center;
    }

    .profile {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 220px;
    }

    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 22px;
      background-image: url("https://cdn.assets.net.cn/images/avatar/wf1.png");
      background-size: cover;
      background-position: center;
      box-shadow: 0 12px 30px rgba(0,0,0,0.6);
      border: 2px solid rgba(254, 243, 199, 0.9);
      transition: border-color 0.35s ease, box-shadow 0.35s ease;
    }

    :root[data-theme="dark"] .avatar {
      border-color: rgba(55, 65, 81, 0.9);
      box-shadow: 0 12px 30px rgba(0,0,0,0.9);
    }

    .profile-text { font-size: 14px; }
    .profile-name { font-weight: 600; margin-bottom: 2px; }
    .profile-desc { color: var(--text-sub); font-size: 13px; }

    .social {
      flex: 1;
      min-width: 200px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      align-items: center;
    }

    .social-item {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--social-bg);
      color: var(--social-text);
      box-shadow: 0 2px 6px var(--shadow-chip);
      transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease, color 0.15s ease;
      font-size: 15px;
      border: none;
      cursor: pointer;
    }

    .social-item:hover {
      background: var(--social-bg-hover);
      color: var(--social-text-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px var(--shadow-chip);
    }

    .social-item:active { transform: translateY(0); box-shadow: 0 2px 5px var(--shadow-chip); }

    @media (max-width: 640px) { .social { justify-content: flex-start; } }

    .essay-card {
      margin-top: 8px;
      padding: 18px 20px 16px;
      border-radius: 18px;
      background: radial-gradient(circle at top left, #fff7ed 0, #fff 60%);
      border: 1px solid #fed7aa;
      position: relative;
      overflow: hidden;
      transition: background 0.35s ease, border-color 0.35s ease;
    }

    :root[data-theme="dark"] .essay-card {
      background: radial-gradient(circle at top left, #020617 0, #020617 60%);
      border-color: #4b5563;
    }

    .essay-label {
      position: absolute;
      right: -8px;
      top: 14px;
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(217,119,6,0.85);
      transform: rotate(10deg);
      opacity: 0.7;
    }

    .essay-content { margin-bottom: 10px; }
    .essay-text { font-size: 14px; color: #7c2d12; white-space: pre-line; display: none; }
    .essay-text.active { display: block; color: var(--text-main); }

    .essay-nav {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      font-size: 11px;
      color: #b45309;
      margin-top: 4px;
    }

    :root[data-theme="dark"] .essay-nav { color: #fbbf24; }

    .essay-btn {
      border: none;
      background: var(--btn-essay-bg);
      padding: 4px 9px;
      border-radius: 999px;
      font-size: 11px;
      color: var(--btn-essay-text);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 4px 10px var(--shadow-chip);
      transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
    }

    .essay-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 16px var(--shadow-chip);
      filter: brightness(1.02);
    }

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

    .section-title {
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #a16207;
    }

    :root[data-theme="dark"] .section-title { color: #fbbf24; }

    .section-actions { display: inline-flex; gap: 8px; align-items: center; }

    .section-btn {
      border-radius: 999px;
      border: none;
      padding: 4px 10px;
      font-size: 11px;
      line-height: 1.4;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--social-bg);
      color: var(--social-text);
      box-shadow: 0 2px 6px var(--shadow-chip);
      text-decoration: none;
      transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
      white-space: nowrap;
    }

    .section-btn:hover {
      background: var(--social-bg-hover);
      color: var(--social-text-hover);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px var(--shadow-chip);
    }

    .section-btn:active { transform: translateY(0); box-shadow: 0 2px 5px var(--shadow-chip); }

    .photo-grid {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-auto-rows: 120px;
      gap: 10px;
    }

    .photo-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: var(--photo-bg);
      box-shadow: 0 10px 26px var(--shadow-photo);
      cursor: zoom-in;
      transform: translateY(0);
      transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.35s ease;
    }

    .photo-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 40px var(--shadow-photo-hover);
      filter: brightness(1.03);
    }

    .photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

    .w-3 { grid-column: span 3; }
    .w-2 { grid-column: span 2; }
    .w-4 { grid-column: span 4; }
    .h-2 { grid-row: span 2; }

    .footer {
      margin-top: 26px;
      padding-top: 14px;
      border-top: 1px dashed var(--footer-border);
      display: flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      font-size: 11px;
      color: #a16207;
      opacity: 0.85;
      transition: border-color 0.35s ease, color 0.35s ease;
    }

    :root[data-theme="dark"] .footer { color: #9ca3af; }

    /* 备案链接行 */
    .footer-records {
      width: 100%;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(180, 83, 9, 0.22);
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    :root[data-theme="dark"] .footer-records {
      border-top-color: rgba(255,255,255,0.10);
    }

    .record-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--record-bg);
      border: 1px solid var(--record-border);
      color: var(--record-text);
      text-decoration: none;
      font-size: 11px;
      line-height: 1;
      transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
      white-space: nowrap;
    }

    .record-link:hover {
      background: var(--record-bg-hover);
      color: var(--record-text-hover);
      transform: translateY(-1px);
    }

    .record-link:active { transform: translateY(0); }

    .lightbox {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .lightbox.active { display: flex; }

    .lightbox-backdrop {
      position: absolute;
      inset: 0;
      background: var(--lightbox-backdrop);
      backdrop-filter: blur(4px);
      transition: background 0.35s ease;
    }

    .lightbox-inner {
      position: relative;
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 18px;
      background: var(--lightbox-bg);
      padding: 18px 18px 14px;
      box-shadow: 0 25px 80px rgba(0,0,0,0.9);
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
      transition: background 0.35s ease;
    }

    .lightbox-img-wrap {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 12px;
      overflow: hidden;
      background: #111827;
    }

    .lightbox-img-wrap img {
      display: block;
      max-width: 100%;
      max-height: 70vh;
      object-fit: contain;
    }

    .lightbox-caption {
      margin-top: 8px;
      font-size: 13px;
      color: var(--lightbox-caption);
      text-align: center;
      max-width: 70vw;
    }

    .lightbox-close {
      position: absolute;
      top: 10px;
      right: 14px;
      border: none;
      background: rgba(15,23,42,0.75);
      color: #fefce8;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: rgba(15,23,42,0.85);
      color: #fefce8;
      width: 32px;
      height: 32px;
      border-radius: 999px;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-arrow.left { left: 10px; }
    .lightbox-arrow.right { right: 10px; }

    .lightbox-counter {
      position: absolute;
      bottom: 8px;
      right: 12px;
      font-size: 11px;
      color: var(--lightbox-counter);
      opacity: 0.85;
      transition: color 0.35s ease;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      padding: 10px 12px;
      border-radius: 999px;
      background: var(--toast-bg);
      color: var(--toast-text);
      font-size: 12px;
      box-shadow: 0 18px 60px rgba(0,0,0,0.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
      z-index: 80;
      backdrop-filter: blur(10px);
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(-4px);
    }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 70;
      padding: 18px;
    }

    .modal.active { display: flex; }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: var(--modal-backdrop);
      backdrop-filter: blur(6px);
    }

    .modal-inner {
      position: relative;
      z-index: 2;
      width: min(440px, 100%);
      border-radius: 18px;
      background: var(--modal-bg);
      border: 1px solid var(--modal-border);
      box-shadow: 0 22px 80px rgba(0,0,0,0.5);
      padding: 16px 16px 14px;
    }

    .modal-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
      color: var(--text-main);
      font-weight: 700;
    }

    .modal-close {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      background: rgba(15,23,42,0.10);
      color: var(--text-main);
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    :root[data-theme="dark"] .modal-close {
      background: rgba(255,255,255,0.06);
      color: var(--text-main);
    }

    .modal-body { color: var(--text-sub); font-size: 13px; line-height: 1.7; }

    .modal-row {
      margin-top: 10px;
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .modal-pill {
      flex: 1;
      min-width: 220px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(251, 191, 36, 0.14);
      border: 1px solid rgba(245, 158, 11, 0.25);
      color: var(--text-main);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :root[data-theme="dark"] .modal-pill {
      background: rgba(255,255,255,0.06);
      border-color: rgba(255,255,255,0.10);
      color: var(--text-main);
    }

    .modal-btn {
      border: none;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 999px;
      font-size: 12px;
      background: var(--btn-essay-bg);
      color: var(--btn-essay-text);
      box-shadow: 0 4px 12px var(--shadow-chip);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      white-space: nowrap;
    }

    .modal-btn:active { transform: translateY(1px); }

    @media (max-width: 720px) {
      .photo-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 8px;
      }
      .photo-card { border-radius: 14px; }
      .w-2, .w-3, .w-4 { grid-column: span 2; }
      .h-2 { grid-row: span 1; }
    }