@font-face {
    font-family: 'PixelZh';
    src: url('pixel_zh.ttf') format('truetype');
  }
  :root {
    --bg: #16161c;
    --bg2: #1e1e28;
    --panel: #242430;
    --border: #3a3a4a;
    --text: #e8e8f0;
    --muted: #8a8a9a;
    --accent: #ffc84a;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background-color: var(--bg);
    background-image:
      radial-gradient(1100px 720px at 50% -12%, #2c2c3e 0%, rgba(22,22,28,0) 60%),
      radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 100% 100%, 22px 22px;
    background-attachment: fixed;
    color: var(--text);
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .view { width: 100%; max-width: 460px; }
  .hidden { display: none !important; }

  /* 首页 */
  .hero { text-align: center; margin-bottom: 26px; }
  .hero h1 {
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 32px; letter-spacing: 2px; color: var(--accent);
    text-shadow: 0 0 24px rgba(255,200,74,.35), 0 3px 0 rgba(0,0,0,.55);
  }
  .hero p { color: var(--muted); font-size: 14px; margin-top: 10px; line-height: 1.6; }
  .hero::after {
    content: ''; display: block; width: 46px; height: 3px; margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius: 2px;
  }

  .tags { display: flex; flex-wrap: wrap; gap: 9px; }
  .tags.folded { display: none; }
  .tags.unfold { animation: unfold .28s ease; }
  .tag {
    position: relative;
    padding: 10px 15px; border-radius: 6px; cursor: pointer; user-select: none;
    background: linear-gradient(180deg, #2a2a3a 0%, #1e1e28 100%);
    border: 2px solid var(--border); font-size: 14px;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 1px; color: var(--text);
    box-shadow: 0 2px 0 rgba(0,0,0,.45);
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease;
  }
  .tag:hover { transform: translateY(-2px); border-color: var(--cat, var(--accent)); box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 0 1px var(--cat, var(--accent)); }
  .tag.on {
    border-color: var(--cat, var(--accent)); color: var(--cat, var(--accent));
    background: linear-gradient(180deg, rgba(255,255,255,.05), transparent), #262640;
    box-shadow: 0 0 14px var(--cat-glow, rgba(255,200,74,.5));
    animation: pop .18s ease;
  }
  .tag.on::before {
    content: '◆'; position: absolute; top: 3px; right: 6px;
    font-size: 10px; line-height: 1; color: var(--cat, var(--accent));
    opacity: .95; text-shadow: 0 0 6px currentColor;
  }

  .btn {
    display: block; width: 100%; padding: 16px; margin-top: 8px;
    border: none; border-radius: 8px; cursor: pointer; font-size: 17px; font-weight: 600;
    letter-spacing: 1px;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
  }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn-primary {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, #ffdd82 0%, #ffc84a 46%, #ef9f26 100%);
    color: #1a1a1a; margin-top: 22px;
    border: 2px solid #8a5c14;
    box-shadow: 0 4px 0 #8a5c14, 0 10px 28px rgba(255,200,74,.28);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    animation: breathe 2.4s ease-in-out infinite;
  }
  .btn-primary:hover { filter: brightness(1.06); }
  .btn-primary:active { filter: brightness(.96); }
  .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    animation: shine 3.2s ease infinite;
  }
  .btn-primary.ready { animation: breathe 1.1s ease-in-out infinite; }
  .btn-primary.empty {
    filter: brightness(.72) saturate(.72);
    box-shadow: 0 4px 0 #6b4a12, 0 8px 18px rgba(255,200,74,.12);
    animation: none;
  }
  .btn-primary.empty::after { animation: none; }
  .btn-ghost { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
  .btn-sm { padding: 11px; font-size: 14px; }

  /* 结果页 */
  .result-wrap { display: flex; flex-direction: column; align-items: center; }
  #card-canvas { width: min(88vw, 420px); height: auto; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  .actions { width: min(88vw, 420px); margin-top: 18px; display: flex; gap: 10px; }
  .actions .btn { flex: 1; margin-top: 0; }

  /* 档案页 */
  .archive-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .archive-head h2 { font-size: 22px; letter-spacing: 1px; }
  .archive-list { display: flex; flex-direction: column; gap: 10px; }
  .archive-item {
    display: flex; align-items: center; gap: 12px; padding: 13px 14px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
  }
  .archive-item:hover { border-color: #5a5a72; }
  .dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
  .archive-main { flex: 1; min-width: 0; }
  .archive-name { font-size: 15px; font-weight: 600; }
  .archive-decl { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .archive-date { font-size: 12px; color: var(--muted); flex-shrink: 0; }
  .empty { color: var(--muted); text-align: center; padding: 40px 0; font-size: 14px; }

  /* 语言切换 */
  #lang-bar { position: fixed; top: 14px; right: 14px; z-index: 100; }
  .lang-btn {
    padding: 8px 14px; border-radius: 8px; cursor: pointer;
    background: var(--panel); border: 1px solid var(--border); color: var(--text);
    font-size: 13px; letter-spacing: 1px; transition: border-color .12s ease;
  }
  .lang-btn:hover { border-color: var(--accent); }
  .lang-menu {
    position: absolute; top: calc(100% + 6px); right: 0; width: 220px; max-height: 60vh;
    overflow-y: auto; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
    display: flex; flex-direction: column; gap: 2px;
  }
  .lang-item {
    text-align: left; padding: 9px 12px; border: none; border-radius: 6px;
    background: transparent; color: var(--text); font-size: 14px; cursor: pointer;
  }
  .lang-item:hover { background: #2f2f46; }
  .lang-item.on { background: #2f2f46; color: var(--accent); }

  /* 状态分类折叠 */
  .dim-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; margin: 18px 0 10px; }
  .dim-head:hover .dim-name { color: var(--cat, var(--accent)); }
  .dim-arrow { color: var(--cat, var(--accent)); width: 14px; font-size: 13px; line-height: 1; transition: transform .2s ease; }
  .dim-name {
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px; color: var(--muted); letter-spacing: 1px; transition: color .12s ease;
  }
  .dim-count { font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  .tag.shake { animation: shake .2s ease; }

  /* 选中计数槽 */
  .slot-meter { display: flex; gap: 9px; justify-content: center; margin-top: 20px; }
  .slot {
    width: 15px; height: 15px; border-radius: 4px;
    border: 2px solid var(--border); background: var(--bg2);
    transition: all .15s ease;
  }
  .slot.filled {
    border-color: var(--accent); background: var(--accent);
    box-shadow: 0 0 10px rgba(255,200,74,.65);
    animation: pop .2s ease;
  }

  @keyframes pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.18); }
    100% { transform: scale(1); }
  }
  @keyframes unfold {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes breathe {
    0%, 100% { box-shadow: 0 4px 0 #8a5c14, 0 10px 28px rgba(255,200,74,.28); }
    50% { box-shadow: 0 4px 0 #8a5c14, 0 12px 40px rgba(255,200,74,.6); }
  }
  @keyframes shine {
    0% { left: -130%; }
    45% { left: 150%; }
    100% { left: 150%; }
  }
  @keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -2px); }
    80% { transform: translate(2px, 2px); }
  }
  @keyframes holoShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }
  @keyframes dexFlip {
    0%   { transform: perspective(1000px) rotateY(78deg) scale(.82); opacity: 0; filter: brightness(2.4) saturate(.4); box-shadow: 0 0 0 rgba(0,0,0,0); }
    40%  { opacity: 1; filter: brightness(1.6) saturate(.7); box-shadow: 0 0 52px var(--cell-glow, rgba(255,200,74,.6)); }
    60%  { transform: perspective(1000px) rotateY(-8deg) scale(1.05); }
    80%  { filter: brightness(1.1); box-shadow: 0 0 30px var(--cell-glow, rgba(255,200,74,.35)); }
    100% { transform: perspective(1000px) rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  }
  @keyframes dexFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  body.shake { animation: screenShake .32s ease; }

  #fx-canvas {
    position: fixed; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 200;
  }

  /* 人设图鉴 */
  .dex-card, .tl-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px; margin-bottom: 16px;
  }
  .dex-head, .tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .dex-title, .tl-title, .snap-head {
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 16px; letter-spacing: 1px; color: var(--accent);
  }
  .dex-progress { font-size: 12px; color: var(--muted); }
  .dex-progress #dex-count { color: var(--accent); }
  .dex-bar {
    height: 6px; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 4px; overflow: hidden; margin-bottom: 14px;
  }
  .dex-bar-fill {
    height: 100%; width: 0%; border-radius: 4px;
    background: linear-gradient(90deg, #ef9f26, #ffc84a, #fff3c4);
    box-shadow: 0 0 8px rgba(255,200,74,.6);
    transition: width .45s cubic-bezier(.22,.61,.36,1);
  }
  .dex-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .dex-cell {
    position: relative; aspect-ratio: 5 / 7; border-radius: 7px;
    border: 2px solid var(--border);
    background:
      linear-gradient(160deg, rgba(255,255,255,.04), transparent 46%),
      repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 6px),
      #1b1b26;
    display: flex; align-items: center; justify-content: center;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 9px; color: #3c3c4e; text-align: center; line-height: 1.15;
    padding: 4px 3px; word-break: break-all; overflow: hidden;
    box-shadow: 0 2px 0 rgba(0,0,0,.45);
    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  }
  .dex-cell.on {
    border-color: var(--cell, var(--accent)); color: var(--cell, var(--accent));
    background:
      linear-gradient(180deg, rgba(255,255,255,.09), transparent 55%),
      linear-gradient(160deg, var(--cell-bg, rgba(255,200,74,.14)), transparent 72%),
      #1b1b26;
    box-shadow: 0 0 10px var(--cell-glow, rgba(255,200,74,.5)), 0 2px 0 rgba(0,0,0,.45);
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
  }
  .dex-cell.on:hover { transform: translateY(-3px); filter: brightness(1.18); }
  .dex-cell.on::before {
    content: attr(data-gem); position: absolute; top: 4px; left: 5px;
    font-size: 9px; line-height: 1; color: var(--cell, var(--accent));
    opacity: .95; text-shadow: 0 0 6px var(--cell-glow, rgba(255,200,74,.6));
  }
  .dex-cell.holo {
    animation: holoShift 3.4s linear infinite;
    box-shadow: 0 0 14px rgba(255,255,255,.5), 0 0 22px var(--cell-glow, rgba(255,200,74,.5));
  }

  /* 图鉴详情页 */
  #dex-card-canvas { width: min(88vw, 420px); height: auto; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  #dex-card-canvas.reveal { animation: dexFlip .62s cubic-bezier(.2,.85,.32,1.12); }
  #view-dex-detail:not(.hidden) .dex-detail { animation: dexFadeUp .5s ease .12s both; }
  .dex-detail { width: min(88vw, 420px); margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
  .dex-detail-section { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; }
  .dex-detail-label {
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px;
  }
  .dex-detail-intro { font-size: 14px; color: var(--text); line-height: 1.7; }
  .dex-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .dex-tag {
    padding: 6px 12px; border-radius: 6px; font-size: 13px; letter-spacing: 1px;
    background: var(--bg2); border: 1px solid var(--border); color: var(--text);
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  /* 四维时间线 */
  .tl-tabs { display: flex; gap: 6px; }
  .tl-tabs button {
    padding: 5px 14px; border-radius: 7px; cursor: pointer;
    background: linear-gradient(180deg, #2a2a3a 0%, #1e1e28 100%);
    border: 2px solid var(--border); color: var(--muted);
    font-size: 12px; letter-spacing: 1px;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    box-shadow: 0 2px 0 rgba(0,0,0,.45);
    transition: transform .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease;
  }
  .tl-tabs button:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
  .tl-tabs button.on {
    color: #1a1a1a;
    border-color: #8a5c14;
    background: linear-gradient(180deg, #ffdd82 0%, #ffc84a 46%, #ef9f26 100%);
    box-shadow: 0 3px 0 #8a5c14, 0 0 12px rgba(255,200,74,.4);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
  }
  .tl-charts { display: flex; flex-direction: column; gap: 10px; }
  .tl-stat {
    position: relative; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 9px; padding: 9px 10px 8px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 2px 0 rgba(0,0,0,.35);
  }
  .tl-stat::before {
    content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    border-radius: 2px; background: var(--sc, var(--accent));
    box-shadow: 0 0 8px var(--sc-glow, rgba(255,200,74,.5));
  }
  .tl-stat-head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; padding-left: 7px; }
  .tl-stat-gem { font-size: 10px; line-height: 1; color: var(--sc, var(--accent)); text-shadow: 0 0 6px var(--sc-glow, rgba(255,200,74,.6)); }
  .tl-stat-name {
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 13px; letter-spacing: 1px; color: var(--text);
  }
  .tl-stat-val {
    margin-left: auto; font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 14px; color: var(--sc, var(--accent)); text-shadow: 0 0 8px var(--sc-glow, rgba(255,200,74,.5));
    background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: 5px; padding: 1px 8px;
  }
  .tl-canvas { width: 100%; height: 66px; display: block; border-radius: 6px; background: rgba(0,0,0,.18); }

  /* 每日快照标题 */
  .snap-head { display: block; margin: 0 0 12px; }

  /* 存档管理 */
  .save-card { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); }
  .save-actions { display: flex; gap: 10px; }
  .save-actions .btn { flex: 1; margin-top: 0; width: auto; padding: 11px 8px; font-size: 13px; }
  .btn-danger { color: #ff6b5e; border-color: rgba(255,107,94,.45); }
  .btn-danger:hover { background: rgba(255,107,94,.12); border-color: #ff6b5e; }

  /* 存档栏目 */
  .save-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .save-title { font-size: 15px; letter-spacing: 1px; color: var(--accent); }
  .btn-gold-sm {
    display: inline-block; width: auto; padding: 8px 14px; margin: 0;
    font-size: 13px; font-weight: 600; letter-spacing: 1px; cursor: pointer;
    background: linear-gradient(180deg, #ffdd82 0%, #ffc84a 46%, #ef9f26 100%);
    color: #1a1a1a; border: 2px solid #8a5c14; border-radius: 8px;
    box-shadow: 0 3px 0 #8a5c14, 0 6px 16px rgba(255,200,74,.25);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: transform .1s ease, filter .1s ease;
  }
  .btn-gold-sm:hover { filter: brightness(1.06); }
  .btn-gold-sm:active { transform: translateY(1px); filter: brightness(.96); }
  .save-slots { display: flex; flex-direction: column; gap: 10px; }
  .save-slot {
    background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px;
  }
  .save-slot.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(255,200,74,.12); }
  .save-slot-name { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: 1px; }
  .save-badge {
    font-size: 10px; line-height: 1; color: #1a1a1a; background: var(--accent);
    border-radius: 8px; padding: 2px 8px; letter-spacing: 1px;
  }
  .save-slot-time { font-size: 11px; color: var(--muted); margin-top: 5px; }
  .save-slot-summary { font-size: 12px; color: var(--text); margin-top: 4px; opacity: .85; }
  .save-slot-empty { font-size: 12px; color: var(--muted); margin-top: 6px; }
  .save-slot-actions { display: flex; gap: 6px; margin-top: 11px; }
  .save-slot-actions button {
    flex: 1; padding: 7px 6px; font-size: 12px; border-radius: 6px; cursor: pointer;
    background: var(--panel); border: 1px solid var(--border); color: var(--text); letter-spacing: 1px;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: transform .1s ease, border-color .1s ease;
  }
  .save-slot-actions button:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
  .save-slot-actions button:disabled { opacity: .38; cursor: default; }
  .save-slot-actions button.danger { color: #ff6b5e; border-color: rgba(255,107,94,.45); }
  .save-slot-actions button.danger:hover:not(:disabled) { background: rgba(255,107,94,.12); border-color: #ff6b5e; }
  .save-backup { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--border); }
  .save-backup-title { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-bottom: 10px; }

  /* 非阻塞 toast */
  #toast-box {
    position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 999;
    pointer-events: none;
  }
  .toast {
    padding: 10px 18px; font-size: 14px; letter-spacing: 1px; color: #1a1a1a;
    background: linear-gradient(180deg, #ffdd82 0%, #ffc84a 55%, #ef9f26 100%);
    border: 2px solid #8a5c14; border-radius: 8px; box-shadow: 0 4px 0 #8a5c14, 0 8px 22px rgba(0,0,0,.4);
    opacity: 0; transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .toast.show { opacity: 1; transform: translateY(0); }

  /* 每日快照「展开全部/收起」 */
  .daily-more {
    display: block; width: 100%; padding: 9px; margin-top: 10px;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 8px;
    color: var(--muted); font-size: 13px; cursor: pointer; letter-spacing: 1px;
    font-family: 'PixelZh', -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    transition: border-color .1s ease, color .1s ease;
  }
  .daily-more:hover { border-color: var(--accent); color: var(--text); }