:root {
       --bg: #0b0d12;
       --panel: #111520;
       --soft: #1a2130;
       --text: #e7ecf3;
       --muted: #a7b1c2;
       --brand: #6aa6ff;
       --accent: #8bd3ff;
       --line: #222a3a;
       --ok: #5ad47b;
       --warn: #ffd166;
       --danger: #ff6b6b;
       --chip: #1b2333;
       --shadow: 0 12px 30px rgba(0, 0, 0, .35);
       --radius: 18px;
   }

   @media (prefers-color-scheme: light) {
       :root {
           --bg: #f6f8fb;
           --panel: #ffffff;
           --soft: #f0f4fa;
           --text: #172033;
           --muted: #52607a;
           --brand: #1f75ff;
           --accent: #007acc;
           --line: #e6ecf5;
           --chip: #f3f6fc;
           --shadow: 0 8px 20px rgba(17, 34, 68, .08);
       }
   }

   * {
       box-sizing: border-box;
   }

   html,
   body {
       height: 100%;
   }

   body {
       margin: 0;
       font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Noto Sans CJK SC, Hiragino Sans GB, "Microsoft YaHei", Helvetica, Arial, sans-serif;
       background: radial-gradient(1200px 600px at 100% -10%, rgba(106, 166, 255, .12), transparent 50%), var(--bg);
       color: var(--text);
   }

   /* Page frame */
   .container {
       max-width: 1100px;
       margin: 4px auto;
       padding: 16px;
       padding-bottom: 80px;
   }

   .sheet {
       display: grid;
       grid-template-columns: 330px 1fr;
       gap: 20px;
       /* 关键：取消拉伸 */
       align-items: start;
   }

   @media (max-width: 960px) {
       .sheet {
           grid-template-columns: 1fr;
       }
   }

   .panel {
       background: linear-gradient(180deg, var(--panel), var(--soft));
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       overflow: clip;
   }

   /* Header / Hero */
   .hero {
       position: relative;
       padding: 22px;
       border-radius: var(--radius);
       overflow: hidden;
       background:
           radial-gradient(600px 200px at 80% -10%, rgba(139, 211, 255, .20), transparent 60%),
           linear-gradient(180deg, rgba(106, 166, 255, .18), transparent 40%),
           linear-gradient(180deg, var(--panel), var(--soft));
       border: 1px solid var(--line);
       box-shadow: var(--shadow);
   }

   .hero-inner {
       display: grid;
       grid-template-columns: 140px 1fr auto;
       gap: 18px;
       align-items: center;
   }

   @media (max-width: 720px) {
       .hero-inner {
           grid-template-columns: 100px 1fr;
           grid-auto-rows: minmax(0, auto);
       }

       .hero-cta {
           grid-column: 1 / -1;
       }
   }

   .avatar {
       width: 140px;
       height: 140px;
       border-radius: 24px;
       object-fit: cover;
       border: 1px solid var(--line);
       background: #0001;
       object-position: top;
       display: block;
   }

   .title {
       font-size: clamp(22px, 2.6vw, 34px);
       margin: 2px 0 6px;
       letter-spacing: 0.3px;
   }

   .subtitle {
       color: var(--muted);
       font-size: 14px;
       margin: 0;
   }

   .hero-tags {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-top: 10px;
   }

   .chip {
       padding: 6px 10px;
       border-radius: 999px;
       background: var(--chip);
       border: 1px solid var(--line);
       font-size: 12px;
   }

   .hero-cta {
       display: flex;
       gap: 10px;
   }

   .btn {
       appearance: none;
       border: 1px solid var(--line);
       background: linear-gradient(180deg, var(--chip), transparent);
       color: var(--text);
       padding: 10px 14px;
       border-radius: 12px;
       font-weight: 600;
       cursor: pointer;
       box-shadow: var(--shadow);
   }

   .btn.primary {
       background: linear-gradient(180deg, var(--brand), var(--accent));
       color: white;
       border: none;
   }

   /* Sidebar */
   .sidebar {
       padding: 18px;
       display: grid;
       gap: 16px;
   }

   .section-title {
       text-decoration: underline;
       font-weight: bolder;
       font-size: 15px;
       letter-spacing: .14em;
       text-transform: uppercase;
       color: black;
       margin: 0 0 10px;
   }

   .kv {
       display: grid;
       grid-template-columns: 1fr auto;
       gap: 8px 12px;
       font-size: 14px;
   }

   .kv div:nth-child(odd) {
       color: var(--muted);
   }

   .divider {
       height: 1px;
       background: var(--line);
       margin: 10px 0;
       border-radius: 2px;
   }

   .stat {
       display: grid;
       gap: 6px;
   }

   .bar {
       height: 10px;
       background: var(--chip);
       border: 1px solid var(--line);
       border-radius: 999px;
       overflow: hidden;
   }

   .bar>i {
       display: block;
       height: 100%;
       width: var(--v, 60%);
       background: linear-gradient(90deg, var(--brand), var(--accent));
   }

   .badges {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
   }

   .list {
       display: grid;
       gap: 10px;
   }

   .list-item {
       display: flex;
       align-items: flex-start;
       gap: 10px;
       padding: 10px;
       border: 1px solid var(--line);
       background: var(--chip);
       border-radius: 12px;
   }

   .emoji {
       width: 24px;
       height: 24px;
       display: grid;
       place-items: center;
       font-size: 14px;
       border-radius: 6px;
       background: var(--panel);
   }

   /* Main column */
   .main {
       padding: 18px;
       display: grid;
       gap: 18px;
   }

   .card {
       border: 1px solid var(--line);
       border-radius: 16px;
       background: linear-gradient(180deg, var(--panel), var(--soft));
       box-shadow: var(--shadow);
   }

   .card h3 {
       margin: 0;
       padding: 16px 16px 8px;
       font-size: 18px;
   }

   .card .content {
       padding: 0 16px 16px;
       color: var(--text);
   }

   .grid-2 {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 14px;
   }

   @media (max-width: 800px) {
       .grid-2 {
           grid-template-columns: 1fr;
       }
   }

   .timeline {
       position: relative;
       display: grid;
       gap: 16px;
       padding-left: 14px;
   }

   .timeline:before {
       content: "";
       position: absolute;
       left: 5px;
       top: 0;
       bottom: 0;
       width: 2px;
       background: var(--line);
       border-radius: 2px;
   }

   .event {
       position: relative;
       padding-left: 12px;
   }

   .event:before {
       content: "";
       position: absolute;
       left: -2px;
       top: 4px;
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: var(--brand);
       box-shadow: 0 0 0 3px color-mix(in oklch, var(--brand) 30%, transparent);
   }

   .event h4 {
       margin: 0 0 6px;
       font-size: 15px;
   }

   .event p {
       margin: 0;
       color: var(--muted);
       font-size: 14px;
   }

   .table {
       width: 100%;
       border-collapse: collapse;
       font-size: 14px;
   }

   .table th,
   .table td {
       padding: 10px 12px;
       border-bottom: 1px solid var(--line);
       text-align: left;
   }

   .table th {
       color: var(--muted);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: .06em;
       font-size: 12px;
   }

   .gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
       gap: 10px;
   }

   .gallery img {
       width: 100%;
       height: 540px;
       object-fit: cover;
       border-radius: 12px;
       border: 1px solid var(--line);
       object-position: top;
   }

   .note {
       font-size: 13px;
       color: var(--muted);
   }

   /* Print */
   @media print {
       body {
           background: white;
       }

       .container {
           margin: 0;
       }

       .btn,
       .hero-cta {
           display: none !important;
       }

       .sheet {
           grid-template-columns: 300px 1fr;
           gap: 14px;
       }

       .panel,
       .card,
       .hero {
           box-shadow: none;
       }
   }

   /* Responsive Adjustments */
   @media (max-width: 960px) {
       .hero-inner {
           grid-template-columns: 120px 1fr;
       }

       .main {
           padding: 1px;
       }

       .avatar {
           width: 120px;
           height: 120px;
       }
   }

   @media (max-width: 720px) {
       .hero-inner {
           grid-template-columns: 1fr;
           grid-template-rows: auto auto auto;
           text-align: center;
       }

       .avatar {
           width: 250px;
           height: 250px;
           margin: 0 auto;
       }

       .title {
           font-size: 20px;
       }

       .subtitle {
           font-size: 13px;
       }

       .hero-tags {
           justify-content: center;
       }

       .hero-cta {
           grid-column: 1 / -1;
           justify-content: center;
           flex-wrap: wrap;
       }

       .btn {
           flex: 1 1 auto;
           min-width: 120px;
       }

   }

   .chip.small {
       font-size: 0.8em;
       padding: 0.25em 0.5em;
       margin: 0 0.1em;
       display: inline-block;
   }

   /* 经典语录样式 */
   #quotesList {
       font-style: normal;
       line-height: 1.8;
   }

   .quote-item {
       margin-bottom: 1.2em;
       border-left: 3px solid var(--color-primary, #3366ff);
       padding-left: 1em;
       transition: opacity 0.2s;
   }

   .quote-item:last-child {
       margin-bottom: 0;
   }

   .quote-text {
       margin: 0;
       font-size: 1.1em;
       font-weight: 500;
       color: var(--text, #222);
   }

   .quote-source {
       margin: 0.4em 0 0;
       font-size: 0.9em;
       color: var(--text-light, #666);
       font-style: italic;
   }

   /* 小屏适配 */
   @media (max-width: 768px) {
       .quote-text {
           font-size: 1em;
       }

       .quote-source {
           font-size: 0.85em;
       }
   }

   /* Psychological Profile Styles */
   .psych-profile {

       background: linear-gradient(180deg, var(--panel), var(--soft));
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
   }

   .psych-profile .content.timeline {
       padding: 0 16px 16px;
   }

   .psych-profile .event {
       margin-bottom: 16px;
   }

   .psych-profile .event h4 {
       font-size: 15px;
       margin: 0 0 6px;
       color: var(--muted);
   }

   .psych-profile .event ul.list {
       font-size: 14px;
       padding: 0;
       margin: 0;
   }

   .psych-profile .event li {
       list-style-type: none;
       padding: 8px 0;
       border-bottom: 1px solid var(--line);
   }

   .psych-profile .event li:last-child {
       border-bottom: none;
   }

   .psych-profile .event li strong {
       font-size: 14px;
       color: var(--text);
   }

   .psych-profile .event li .desc {
       font-size: 14px;
       color: var(--muted);
   }


   /* Relationship Dynamics Styles */
   #rdcontainer {
       display: block;
   }

   .relationship-item {
       font-size: 14px;
       margin-bottom: 16px;
       padding: 16px;
       background: var(--chip);
       border: 1px solid var(--line);
       border-radius: 12px;
   }

   .item-header {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 16px;
   }

   .item-header h4 {
       font-size: 15px;
       margin: 0;
       color: var(--muted);
   }

   .trust-level {
       display: flex;
       align-items: center;
   }

   #rd .bar {
       height: 12px;
       background: var(--chip);
       border: 1px solid var(--line);
       border-radius: 999px;
       overflow: hidden;
       position: relative;
       margin-right: 16px;
       width: 360px;
       /* 添加固定宽度，确保比例正确 */
   }

   @media (max-width: 768px) {
       #rd .bar {
           width: 340px;
           /* 添加固定宽度，确保比例正确 */
       }
   }
   @media (max-width: 600px) {
       #rd .bar {
           width: 200px;
           /* 添加固定宽度，确保比例正确 */
       }
   }
   @media (max-width: 450px) {
       #rd .bar {
           width: 120px;
           /* 添加固定宽度，确保比例正确 */
       }
   }

   #rd .bar i {
       display: block;
       height: 100%;
       width: calc(var(--v, 60) * 1%);
       /* 关键修复：正确计算百分比 */
       background: linear-gradient(90deg, var(--brand), var(--accent));
       position: absolute;
       top: 0;
       left: 0;
   }

   #rd .kv {
       display: flex;
       flex-direction: column;
   }

   #rd .kv div:nth-child(odd) {
       color: var(--muted);
   }

   #rd .list {
       list-style: none;
       /* 移除默认列表样式 */
       padding: 0;
       /* 移除默认内边距 */
       margin: 0;
       /* 移除默认外边距 */
   }

   .item-body {
       margin-top: 16px;
   }

   .relationship-type {
       display: flex;
       align-items: center;
       margin-bottom: 16px;
   }

   .relationship-type div:first-child {
       width: 50px;
       font-weight: bold;
       color: var(--muted);
   }

   .key-moments ul {
       padding: 0;
       margin: 0;
   }

   .key-moments li {
       list-style-type: none;
       padding: 8px 0;
       border-bottom: 1px solid var(--line);
   }

   .key-moments li:last-child {
       border-bottom: none;
   }

   .key-moments li strong {
       font-size: 14px;
       color: var(--text);
   }

   .key-moments li .desc {
       font-size: 14px;
       color: var(--muted);
   }



   /* 导航样式 */

   /* Anchor Navigation Styles */
   .anchor-nav {
       margin: 16px 0;
       background: linear-gradient(180deg, var(--panel), var(--soft));
       border: 1px solid var(--line);
       border-radius: var(--radius);
       box-shadow: var(--shadow);
       overflow: hidden;
   }

   .anchor-list {
       display: flex;
       flex-wrap: wrap;
       gap: 4px;
       padding: 8px 12px;
       margin: 0;
       list-style: none;
   }

   .anchor-link {
       display: block;
       padding: 6px 12px;
       border-radius: 8px;
       font-size: 14px;
       color: var(--muted);
       text-decoration: none;
       transition: all 0.2s ease;
       white-space: nowrap;
   }

   .anchor-link:hover {
       background: var(--chip);
       color: var(--text);
   }

   .anchor-link.active {
       background: var(--brand);
       color: white;
       font-weight: 600;
   }

   /* For mobile responsiveness */
   @media (max-width: 768px) {
       .anchor-list {
           overflow-x: auto;
           padding: 8px;
           display: flex;
           gap: 6px;
       }

       .anchor-link {
           padding: 6px 10px;
           font-size: 13px;
       }
   }

   /* Smooth scrolling */
   html {
       scroll-behavior: smooth;
   }

   /* 反色模式 */
   .invert {
       filter: invert(1) hue-rotate(180deg);
   }

   .invert img,
   .invert video,
   .invert iframe,
   .invert canvas {
       filter: invert(1) hue-rotate(180deg);
   }

   /* 滑动到最上面样式 */
   .page-actions {
       position: fixed;
       z-index: 1000;
       right: 16px;
       bottom: max(16px, env(safe-area-inset-bottom) + 8px);
       /* 适配 iPhone 底部 */
       display: flex;
       flex-direction: column;
       gap: 12px;
       /* 按钮间距 */
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   /* 容器显示时 */
   .page-actions.show {
       opacity: 1;
   }

   .action-btn {
       width: 48px;
       height: 48px;
       border: none;
       border-radius: 50%;
       background-color: rgba(0, 0, 0, 0.8);
       color: white;
       font-size: 20px;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
       transition: transform 0.2s ease, background-color 0.2s ease;
   }

   .action-btn:hover {
       background-color: rgba(0, 0, 0, 0.95);
       transform: scale(1.1);
   }

   /* 移动端优化：稍大一点 */
   @media (max-width: 768px) {
       .page-actions {
           right: 12px;
           bottom: max(52px, env(safe-area-inset-bottom) + 6px);
           gap: 20px;
       }

       .action-btn {
           width: 32px;
           height: 32px;
           font-size: 22px;
       }
   }

   /* 桌面端：可增大或调整 */
   @media (min-width: 769px) {
       .page-actions {
           right: 20px;
           bottom: 60px;
           gap: 16px;
       }

       .action-btn {
           width: 32px;
           height: 32px;
           font-size: 18px;
       }
   }

   /* 滑动到上面结束 */