:root {
      --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', 'STSong', serif;
      --bg-main: #0a0f1e;
      --text-primary: #f3e2b3;
      --text-secondary: #ecc94b;
      --accent: #f59e0b;
      --scroll-bg: #e0d9c1;
      --rod-color: #c19a6b;
      --shadow-deep: rgba(0,0,0,0.5);
      --radius: 10px;
    }
    *, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
    html, body {
      height:100%;
      font-family: var(--font-serif);
      background: var(--bg-main);
      color: var(--text-primary);
      overflow-x: hidden;
    }
    body { display:flex; flex-direction:column; }

    header {
      position: relative;
      text-align:center;
      padding:24px 0;
      background: linear-gradient(135deg, #1e293b, #1f2041);
      box-shadow: 0 4px 16px var(--shadow-deep);
      overflow: visible;
    }
    header h1 {
      font-size: 3rem;
      background: linear-gradient(90deg, #ffd700, #ffa500, #ffd700);
      background-size:200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: hueShift 5s ease infinite;
      text-shadow: 0 0 8px rgba(255,200,0,0.7);
    }
    header p {
      margin-top:8px;
      font-size:1rem;
      opacity:0.8;
      letter-spacing:1px;
    }
    @keyframes hueShift {
      0%{background-position:0% 50%;}
      50%{background-position:100% 50%;}
      100%{background-position:0% 50%;}
    }

    main {
      flex:1;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px 16px;
    }
    .box {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius);
      box-shadow: 0 6px 20px var(--shadow-deep);
      width:100%;
      max-width:520px;
      padding:32px;
      position: relative;
    }

    .t-container {
      text-align:center;
      margin-bottom:24px;
    }
    .barrel-img {
      width:140px;
      cursor:pointer;
      transition: transform .3s, filter .3s;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
    }
    .barrel-img:hover {
      transform: rotate(-5deg) scale(1.05);
    }
    @keyframes shakeBarrel {
      0%,100%{transform:rotate(0deg);}
      20%{transform:rotate(12deg);}
      40%{transform:rotate(-10deg);}
      60%{transform:rotate(8deg);}
      80%{transform:rotate(-6deg);}
    }
    .shake {
      animation: shakeBarrel 1.2s ease-in-out both;
    }

    .form-title {
      text-align:center;
      font-size:1.8rem;
      color:var(--text-secondary);
      margin-bottom:24px;
      text-shadow:0 0 6px rgba(0,0,0,0.4);
    }
    .form-group { margin-bottom:24px; position:relative; }
    .form-group label {
      display:block;
      font-size:1rem;
      margin-bottom:8px;
      color:var(--text-primary);
    }
    .form-group input {
      width:100%;
      padding:14px;
      font-size:1rem;
      border:1px solid rgba(255,255,255,0.3);
      border-radius:6px;
      background:rgba(255,255,255,0.1);
      color:var(--text-primary);
      transition:border-color .3s, box-shadow .3s;
    }
    .form-group input:focus {
      outline:none;
      border-color:var(--accent);
      box-shadow:0 0 10px rgba(245,158,11,0.6);
    }
    .form-group input::placeholder {
      color:rgba(255,255,255,0.6);
    }
    .char-count {
      position:absolute;
      bottom:14px;
      right:16px;
      font-size:0.9rem;
      color:rgba(255,255,255,0.6);
    }
    .help-text {
      margin-top:6px;
      font-size:0.85rem;
      color:rgba(255,255,255,0.5);
    }

    .button {
      width:100%;
      padding:14px;
      font-size:1rem;
      font-weight:600;
      background: var(--accent);
      color: var(--bg-main);
      border:none;
      border-radius:6px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      position:relative;
      overflow:hidden;
      transition: background .3s, transform .2s, box-shadow .3s;
      box-shadow:0 4px 10px rgba(0,0,0,0.4);
    }
    .button .icon { margin-right:8px; font-size:1.2rem; }
    .button:hover:not(.disabled) {
      background: var(--text-secondary);
      transform: translateY(-2px);
      box-shadow:0 6px 14px rgba(0,0,0,0.6), 0 0 12px rgba(255,200,0,0.8);
    }
    .button.disabled {
      opacity:0.6;
      cursor:default;
    }
    .button.loading::after {
      content:'';
      width:20px;
      height:20px;
      border:3px solid var(--bg-main);
      border-top-color:transparent;
      border-radius:50%;
      position:absolute;
      right:16px;
      animation:spin 1s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }

    .hint {
      margin-top:16px;
      text-align:center;
      font-size:1.1rem;
      color:var(--text-secondary);
      font-weight:500;
    }
    .error {
      margin-top:12px;
      text-align:center;
      font-size:0.9rem;
      color:#ff6b6b;
    }

    .result {
      position: relative;
      margin-top:32px;
      padding:24px 20px;
      background: var(--scroll-bg);
      border-left:6px solid var(--rod-color);
      border-right:6px solid var(--rod-color);
      transform-origin: top;
      transform: scaleY(0);
      animation: unroll 0.8s ease-out forwards;
      box-shadow: 0 8px 20px var(--shadow-deep);
      overflow:hidden;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }
    @keyframes unroll {
      0% { transform: scaleY(0); opacity:0; }
      100% { transform: scaleY(1); opacity:1; }
    }
    .result::before, .result::after {
      content:'';
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      width:70%;
      height:12px;
      background: var(--rod-color);
      border-radius:6px;
    }
    .result::before { top:-10px; }
    .result::after { bottom:-10px; }

    .result h2 {
      font-size:2rem;
      text-align:center;
      margin-bottom:24px;
      color: var(--bg-main);
      text-shadow:0 0 4px rgba(0,0,0,0.3);
    }
    .field { margin-bottom:24px; }
    .field .label {
      font-size:1rem;
      font-weight:600;
      margin-bottom:8px;
      color: var(--bg-main);
      border-left:3px solid var(--rod-color);
      padding-left:10px;
    }
    .field .content {
      background:rgba(255,255,255,0.15);
      padding:18px 16px;
      border-radius:6px;
      font-size:1rem;
      line-height:2;
      white-space:pre-wrap;
      color:var(--bg-main);
      border:1px solid rgba(0,0,0,0.06);
    }
    .field .content strong,
    .field .content b { color:#8b4513; }
    .field-jie .content {
      border-left:4px solid #c19a6b;
    }
    .result .unlock-hint {
      text-align:center;
      margin-top:8px;
      font-size:0.9rem;
      color:#8b6914;
      opacity:0.8;
    }

    hr { margin:32px 0; border:none; border-top:1px solid rgba(255,255,255,0.2); }
    .instruction-title {
      font-size:1.2rem;
      margin-bottom:12px;
    }
    .instruction-title.clickable {
      color: var(--accent);
      cursor: pointer;
      transition: color .3s;
    }
    .instruction-title.clickable:hover {
      color: var(--text-secondary);
    }
    .instructions ul {
      list-style: disc inside;
      font-size:0.9rem;
      line-height:1.6;
    }

    footer {
      background: linear-gradient(135deg, #1e293b, #1f2041);
      text-align:center;
      padding:16px 0;
      font-size:0.85rem;
      color:rgba(255,255,255,0.8);
    }
    .footer-note {
      margin-top:6px;
      font-size:0.75rem;
      color:rgba(255,255,255,0.6);
    }

    #paymentModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      justify-content: center;
      align-items: center;
      z-index: 1100;
    }
    #paymentModal .modal-content {
      background: var(--scroll-bg);
      color: var(--bg-main);
      padding:24px;
      border-radius:8px;
      width:90%;
      max-width:480px;
      max-height:80%;
      overflow-y:auto;
      box-shadow:0 6px 20px var(--shadow-deep);
      position: relative;
    }
    #paymentModal .close {
      position:absolute;
      top:12px; right:14px;
      font-size:24px;
      cursor:pointer;
      color: var(--bg-main);
    }

    #introModal {
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,0.7);
      justify-content:center;
      align-items:center;
      z-index:1100;
    }
    #introModal .modal-content {
      background: var(--scroll-bg);
      color: var(--bg-main);
      padding:24px;
      border-radius:8px;
      width:90%;
      max-width:480px;
      max-height:80%;
      overflow-y:auto;
      box-shadow:0 6px 20px var(--shadow-deep);
      position:relative;
    }
    #introModal .close-intro {
      position:absolute;
      top:12px; right:14px;
      font-size:24px;
      cursor:pointer;
      color: var(--bg-main);
    }

    @media (max-width:480px) {
      .box { padding:24px 16px; }
      .form-title { font-size:1.6rem; }
      .button { padding:12px; font-size:0.95rem; }
      .barrel-img { width:120px; }
      header h1 { font-size:2.4rem; }
      .daily-sign { border-left:3px solid var(--accent); margin-bottom:12px; }
      .almanac { margin-bottom:12px; }
      .jie-tab { padding:8px 14px; font-size:0.9rem; margin-bottom:4px; }
      .jie-tab-desc { font-size:0.85rem; }
    }

    /* ========== 启动闪屏 ========== */
    #splashScreen {
      position:fixed; inset:0; z-index:9999; background:var(--bg-main);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      transition: opacity 0.5s, visibility 0.5s;
    }
    #splashScreen.hide { opacity:0; visibility:hidden; pointer-events:none; }
    #splashScreen .splash-logo { width:100px; margin-bottom:20px; }
    #splashScreen .splash-title {
      font-size:2rem; font-weight:600;
      background:linear-gradient(90deg,#ffd700,#ffa500,#ffd700);
      background-size:200% 200%; -webkit-background-clip:text;
      -webkit-text-fill-color:transparent; animation:hueShift 5s ease infinite;
    }
    #splashScreen .splash-sub { margin-top:12px; opacity:0.6; font-size:0.9rem; }

    /* ========== 底部导航 ========== */
    .bottom-nav {
      position:fixed; bottom:0; left:0; right:0; z-index:1000;
      display:flex; background:#1a1f2e; border-top:1px solid rgba(255,255,255,0.1);
      padding-bottom:env(safe-area-inset-bottom);
    }
    .bottom-nav .nav-item {
      flex:1; text-align:center; padding:10px 0 6px; cursor:pointer;
      color:rgba(255,255,255,0.5); font-size:0.75rem; transition:color .3s;
    }
    .bottom-nav .nav-item .nav-icon { font-size:1.3rem; display:block; margin-bottom:2px; }
    .bottom-nav .nav-item.active { color:var(--accent); }

    /* ========== Tab 面板 ========== */
    body { padding-bottom:60px; }

    /* ========== 历史面板 ========== */
    .history-list { padding:16px; max-width:520px; margin:0 auto; }
    .history-empty { text-align:center; padding:60px 20px; color:rgba(255,255,255,0.4); }
    .history-empty .empty-icon { font-size:3rem; margin-bottom:12px; }
    .history-item {
      background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
      border-radius:8px; padding:14px; margin-bottom:10px; cursor:pointer;
      transition:background .2s;
    }
    .history-item:hover { background:rgba(255,255,255,0.1); }
    .history-item .hi-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
    .history-item .hi-num { font-weight:bold; color:var(--accent); font-size:1.1rem; }
    .history-item .hi-chars { font-size:0.8rem; color:rgba(255,255,255,0.5); }
    .history-item .hi-title { color:var(--text-primary); margin-bottom:4px; }
    .history-item .hi-date { font-size:0.75rem; color:rgba(255,255,255,0.3); }
    .history-item .hi-delete {
      background:none; border:none; color:rgba(255,255,255,0.3); font-size:1rem;
      cursor:pointer; padding:4px 8px; float:right; margin-left:8px;
    }
    .history-item .hi-delete:hover { color:#ff6b6b; }

    /* ========== 关于面板 ========== */
    .about-content { padding:24px 16px; max-width:520px; margin:0 auto; text-align:center; }
    .about-content h2 { color:var(--text-secondary); margin-bottom:16px; }
    .about-content p { line-height:1.8; opacity:0.7; margin-bottom:16px; font-size:0.95rem; }
    .about-content .about-links { margin-top:24px; }
    .about-content .about-links a {
      display:block; padding:10px; color:var(--accent); text-decoration:none;
      border:1px solid rgba(255,255,255,0.15); border-radius:6px; margin-bottom:8px;
      transition:background .2s;
    }
    .about-content .about-links a:hover { background:rgba(255,255,255,0.05); }

    /* ========== 历史详情弹窗 ========== */
    #historyDetail { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:1500; justify-content:center; align-items:center; }
    #historyDetail .detail-content {
      background:var(--scroll-bg); color:var(--bg-main); padding:24px; border-radius:10px;
      width:90%; max-width:480px; max-height:85%; overflow-y:auto; position:relative;
    }
    #historyDetail .detail-close { position:absolute; top:12px; right:14px; font-size:24px; cursor:pointer; color:var(--bg-main); }

    /* ========== 分享图 Canvas（隐藏） ========== */
    #shareCanvas { display:none; }

    /* ========== Toast 提示 ========== */
    .toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.85); color:#fff; padding:12px 24px; border-radius:8px; z-index:9999; font-size:0.95rem; pointer-events:none; opacity:0; transition:opacity .3s; }
    .toast.show { opacity:1; }

    /* ========== 离线提示条 ========== */
    .offline-bar { display:none; background:#c62828; color:#fff; text-align:center; padding:6px; font-size:0.85rem; position:fixed; top:0; left:0; right:0; z-index:9998; }
    .offline-bar.show { display:block; }

    /* ========== 导航适配：底部留白 ========== */
    footer { padding-bottom:70px; }


    /* ========== 返回顶部按钮 (#6) ========== */
    .back-to-top { position:fixed; bottom:80px; right:16px; width:40px; height:40px; background:rgba(0,0,0,0.5); color:#f3e2b3; border:none; border-radius:50%; font-size:1.2rem; cursor:pointer; z-index:900; opacity:0; transition:opacity .3s; }
    .back-to-top.show { opacity:1; }

    /* ========== 历史搜索 (#3) ========== */
    .history-search { padding:12px 16px 4px; max-width:520px; margin:0 auto; }
    .history-search input { width:100%; padding:10px 14px 10px 36px; border:1px solid rgba(255,255,255,0.15); border-radius:20px; background:rgba(255,255,255,0.06) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='rgba(255,255,255,0.3)'><path d='M11.7 10.3l3.6 3.6a1 1 0 01-1.4 1.4l-3.6-3.6A6.5 6.5 0 1111.7 10.3zM6.5 11a4.5 4.5 0 100-9 4.5 4.5 0 000 9z'/></svg>") 12px center/16px no-repeat; color:var(--text-primary); font-size:0.9rem; outline:none; }
    .history-search input::placeholder { color:rgba(255,255,255,0.3); }

    /* ========== 收藏星标 (#12) ========== */
    .hi-star { background:none; border:none; color:rgba(255,255,255,0.2); font-size:1.2rem; cursor:pointer; padding:2px 6px; transition:color .2s; }
    .hi-star.starred { color:#ffd700; }
    .history-section-title { font-size:0.8rem; color:rgba(255,255,255,0.4); padding:8px 0 4px; margin:0 16px; border-bottom:1px solid rgba(255,255,255,0.08); }

    /* ========== 清空按钮 (#13) ========== */
    .history-actions { display:flex; justify-content:flex-end; padding:8px 16px; max-width:520px; margin:0 auto; }
    .history-actions button { background:none; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.5); padding:6px 14px; border-radius:14px; font-size:0.8rem; cursor:pointer; }

    /* ========== 随机提示词 (#14) ========== */
    .hint-words { margin-top:8px; font-size:0.85rem; color:rgba(255,255,255,0.35); text-align:center; min-height:1.5em; transition:opacity .5s; }

    /* ========== 下拉刷新 (#8) ========== */
    .pull-indicator { display:none; text-align:center; padding:0; color:rgba(255,255,255,0.3); font-size:0.8rem; height:0; }
    .pull-indicator.show { display:block; height:auto; padding:10px 0; }

    /* ========== PWA 安装提示 (#10) ========== */
    #pwaBanner { display:none !important; position:fixed; bottom:70px; left:16px; right:16px; z-index:2000; background:#1a1f2e; border:1px solid var(--accent); border-radius:10px; padding:14px 16px; color:var(--text-primary); font-size:0.9rem; }
    #pwaBanner.ios-show { display:block !important; }
    #pwaBanner .pwa-close { position:absolute; top:8px; right:12px; background:none; border:none; color:rgba(255,255,255,0.5); font-size:1.2rem; cursor:pointer; }
    #pwaBanner .pwa-install { margin-top:8px; padding:8px 20px; background:var(--accent); color:#0a0f1e; border:none; border-radius:6px; font-size:0.9rem; cursor:pointer; font-weight:600; }

    /* ========== 每日一签 ========== */
    .daily-sign {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
      border-radius:10px; padding:16px 18px; margin-bottom:14px; text-align:center;
    }
    .daily-sign-header { font-size:0.85rem; color:var(--text-secondary); margin-bottom:6px; }
    .daily-sign-content { font-size:1.1rem; font-weight:600; color:var(--text-primary); }
    .daily-sign-action {
      margin-top:8px; font-size:0.85rem; color:var(--accent); cursor:pointer;
      transition:color .2s;
    }
    .daily-sign-action:hover { color:var(--text-secondary); }

    /* ========== 黄历 ========== */
    .almanac {
      background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
      border-radius:10px; padding:14px 16px; margin-bottom:14px; font-size:0.85rem;
    }
    .almanac-row { display:flex; align-items:center; margin-bottom:8px; }
    .almanac-row:last-child { margin-bottom:0; }
    .almanac-label {
      display:inline-block; width:26px; height:26px; border-radius:50%; text-align:center;
      line-height:26px; font-size:0.8rem; font-weight:bold; margin-right:10px; flex-shrink:0;
    }
    .almanac-yi { background:#2e7d32; color:#fff; }
    .almanac-ji { background:#c62828; color:#fff; }
    .almanac-dir { background:#f59e0b; color:#0a0f1e; }

    /* ========== 摇一摇提示 ========== */
    .shake-hint { text-align:center; margin-top:10px; font-size:0.85rem; color:rgba(255,255,255,0.35); }
    .shake-hint.shaking { color:var(--accent); animation:pulse .5s infinite; }
    @keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

    /* ========== 解签分类Tab ========== */
    .jie-tabs { display:none; flex-wrap:wrap; gap:6px; }
    .field-jie .jie-tabs { display:flex; }
    .jie-tab {
      padding:8px 16px; border-radius:16px; font-size:0.9rem; cursor:pointer; font-weight:500;
      border:2px solid var(--rod-color); color:#5d4037; background:rgba(255,255,255,0.4); transition:all .2s;
    }
    .jie-tab.active { background:var(--rod-color); color:#fff; border-color:var(--rod-color); }
    .jie-tab:hover { background:rgba(193,154,107,0.3); }
    .jie-tab-desc { margin-top:10px; padding:12px; background:rgba(255,255,255,0.25); border-radius:6px; font-size:0.9rem; line-height:1.8; color:#4e342e; }
    /* ========== 黄历农历 ========== */
    .almanac-lunar { text-align:center; font-size:0.9rem; color:var(--text-secondary); margin-bottom:8px; padding-bottom:8px; border-bottom:1px dashed rgba(255,255,255,0.1); }

    /* ========== 结果卡片化 ========== */
    .result { border-radius:12px; }
    .result h2 { font-size:2.2rem; padding-bottom:16px; border-bottom:2px dashed var(--rod-color); }
    .result .sign-num { display:block; font-size:3.5rem; line-height:1; color:var(--rod-color); margin-bottom:4px; }

    /* ========== 历史全屏详情 ========== */
    #historyDetail { display:none; position:fixed; inset:0; background:var(--scroll-bg); z-index:1500; overflow-y:auto; }
    .detail-fullscreen { min-height:100vh; }
    .detail-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; padding:12px 16px; background:var(--scroll-bg); border-bottom:2px solid var(--rod-color); }
    .detail-back { background:none; border:none; color:var(--bg-main); font-size:1rem; cursor:pointer; padding:4px 0; }
    .detail-title { flex:1; text-align:center; font-weight:600; color:var(--bg-main); margin-right:32px; }
    .detail-body { padding:20px; color:var(--bg-main); }
    .detail-body h2 { font-size:1.8rem; text-align:center; margin-bottom:20px; }
    .detail-body .field { margin-bottom:20px; }
    .detail-body .label { font-weight:600; margin-bottom:6px; border-left:3px solid var(--rod-color); padding-left:10px; }
    .detail-body .content { background:rgba(255,255,255,0.15); padding:14px; border-radius:6px; line-height:1.8; white-space:pre-wrap; }

    /* ========== Tab 滑动动画 ========== */
    .tab-panel { display:none; }
    .tab-panel.active { display:block; animation:slideIn .3s ease; }
    @keyframes slideIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
    .tab-panel.slide-left { animation:slideLeft .3s ease; }
    .tab-panel.slide-right { animation:slideRight .3s ease; }
    @keyframes slideLeft { from{opacity:0;transform:translateX(-20px)} to{opacity:1;transform:translateX(0)} }
    @keyframes slideRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }

    /* ========== 结果情绪色 (#1) ========== */
    .result.good { border-left-color:#ffd700; border-right-color:#ffd700; box-shadow:0 8px 24px rgba(255,215,0,0.2); }
    .result.good::before, .result.good::after { background:#ffd700; }
    .result.great { border-left-color:#ffa000; border-right-color:#ffa000; box-shadow:0 8px 32px rgba(255,160,0,0.3); }
    .result.great::before, .result.great::after { background:#ffa000; }
    .result.bad { border-left-color:#888; border-right-color:#888; box-shadow:0 8px 20px rgba(0,0,0,0.3); }
    .result.bad::before, .result.bad::after { background:#999; }
/* ========== 新手引导蒙层 (#2) ========== */
.guide-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:5000; display:flex; align-items:center; justify-content:center; }
.guide-card { background:#1a1f2e; border:1px solid var(--accent); border-radius:16px; padding:32px 24px; width:90%; max-width:360px; text-align:center; color:var(--text-primary); }
.guide-card .guide-step { font-size:3rem; margin-bottom:8px; }
.guide-card h3 { font-size:1.4rem; margin-bottom:8px; color:var(--text-secondary); }
.guide-card p { font-size:0.95rem; opacity:0.7; margin-bottom:24px; line-height:1.6; }
.guide-card .guide-dots { display:flex; justify-content:center; gap:8px; margin-bottom:20px; }
.guide-card .guide-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.3); }
.guide-card .guide-dot.active { background:var(--accent); }
.guide-card .guide-btn { padding:12px 32px; background:var(--accent); color:#0a0f1e; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; }
.guide-card .guide-skip { margin-top:12px; background:none; border:none; color:rgba(255,255,255,0.4); font-size:0.85rem; cursor:pointer; }

/* ========== 历史空状态 (#3) ========== */
.history-empty { text-align:center; padding:80px 20px; }
.history-empty .empty-illust { font-size:4rem; margin-bottom:16px; opacity:0.6; animation:float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.history-empty p { color:rgba(255,255,255,0.4); font-size:1rem; margin-bottom:6px; }

/* ========== 黄历点击弹窗 (#4) ========== */
.almanac-tip { display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#1a1f2e; border:1px solid var(--accent); border-radius:12px; padding:20px; z-index:5001; width:85%; max-width:320px; text-align:center; }
.almanac-tip.show { display:block; animation:fadeIn .2s ease; }
.almanac-tip h4 { color:var(--text-secondary); margin-bottom:8px; font-size:1.1rem; }
.almanac-tip p { color:var(--text-primary); opacity:0.8; font-size:0.9rem; line-height:1.6; margin-bottom:16px; }
.almanac-tip .tip-close { padding:8px 24px; background:var(--accent); color:#0a0f1e; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
.almanac-item { cursor:pointer; transition:opacity .2s; }
.almanac-item:hover { opacity:0.7; }

/* ========== 签文已显 飞入动画 ========== */
#signReveal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: revealFadeIn 0.3s ease forwards;
  pointer-events: none;
}
@keyframes revealFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal-scroll {
  display: flex;
  align-items: center;
  gap: 0;
  animation: revealDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: top center;
}
@keyframes revealDrop {
  0% { transform: translateY(-120px) scale(0.6); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.reveal-rod {
  width: 12px;
  height: 120px;
  background: linear-gradient(180deg, #c19a6b, #8b6914, #c19a6b);
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(193,154,107,0.5);
}
.reveal-paper {
  background: #f5f0e1;
  color: #3e2723;
  padding: 28px 36px;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 20px rgba(193,154,107,0.15);
  text-align: center;
  position: relative;
  min-width: 200px;
  border: 2px solid #c19a6b;
}
.reveal-paper::before,
.reveal-paper::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 40%;
  height: 10px;
  background: #c19a6b;
  border-radius: 5px;
}
.reveal-paper::before { left: 10%; }
.reveal-paper::after { right: 10%; }
.reveal-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: revealBounce 0.8s ease infinite;
}
@keyframes revealBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.reveal-text {
  font-size: 2rem;
  font-weight: 700;
  color: #5d4037;
  letter-spacing: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.reveal-sub {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #8d6e63;
  letter-spacing: 2px;
}

/* 动画结束后隐藏 */
#signReveal.hide {
  animation: revealFadeOut 0.4s ease forwards;
}
@keyframes revealFadeOut {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* 手机端适配 */
@media (max-width:480px) {
  .reveal-paper {
    padding: 20px 24px;
    min-width: 160px;
  }
  .reveal-rod {
    width: 10px;
    height: 100px;
  }
  .reveal-icon { font-size: 2.4rem; }
  .reveal-text { font-size: 1.6rem; letter-spacing: 4px; }
  .reveal-sub { font-size: 0.8rem; }
}

/* ========== 撒花粒子 (#5) ========== */
.confetti-container { position:fixed; inset:0; pointer-events:none; z-index:4000; }
.confetti { position:absolute; width:10px; height:10px; border-radius:2px; animation:fall linear forwards; }
@keyframes fall { 0%{transform:translateY(-100px) rotate(0deg);opacity:1} 100%{transform:translateY(110vh) rotate(720deg);opacity:0} }

/* ========== 滑动删除 (#7) ========== */
.history-item { position:relative; overflow:hidden; }
.history-item .hi-inner { transition:transform .2s; }
.history-item .hi-delete-action { position:absolute; right:0; top:0; bottom:0; width:70px; background:#c62828; color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.85rem; cursor:pointer; transform:translateX(100%); transition:transform .2s; }
.history-item.swiped .hi-delete-action { transform:translateX(0); }

/* ========== 二维码层 (#6) ========== */
.share-watermark { text-align:center; margin-top:8px; font-size:0.8rem; opacity:0.5; }

/* ========== 设置面板 (#9) ========== */
.settings-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.08); }
.settings-row .set-label { font-size:0.9rem; opacity:0.8; }
.settings-row select, .settings-row .set-toggle { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:var(--text-primary); padding:6px 12px; border-radius:6px; font-size:0.85rem; cursor:pointer; }
.set-toggle { width:48px; height:26px; border-radius:13px; background:rgba(255,255,255,0.15); position:relative; transition:background .3s; }
.set-toggle.on { background:var(--accent); }
.set-toggle::after { content:""; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:2px; left:2px; transition:left .3s; }
.set-toggle.on::after { left:25px; }
body.font-sm { font-size:14px; }
body.font-lg { font-size:18px; }

/* ========== 解签引导文字 (#12) ========== */
.jie-disclaimer { text-align:center; margin-top:12px; font-size:0.8rem; color:var(--bg-main); opacity:0.5; padding-top:8px; border-top:1px dashed rgba(0,0,0,0.1); }



/* ========== 收藏导出按钮 (#11) ========== */
.export-btn { background:none; border:1px solid rgba(255,255,255,0.15); color:rgba(255,255,255,0.5); padding:6px 14px; border-radius:14px; font-size:0.8rem; cursor:pointer; margin-right:8px; }

/* ========== 结果情绪色 (#1) ========== */
.result.great { border-left-color:#ffd700;border-right-color:#ffd700;box-shadow:0 8px 28px rgba(255,215,0,0.25); }
.result.great::before,.result.great::after { background:#ffd700; }
.result.good { border-left-color:#daa520;border-right-color:#daa520; }
.result.good::before,.result.good::after { background:#daa520; }
.result.bad { border-left-color:#888;border-right-color:#888;box-shadow:0 6px 16px rgba(0,0,0,0.3); }
.result.bad::before,.result.bad::after { background:#999; }

/* ========== 新手引导 (#2) ========== */
.guide-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.88);z-index:5000;display:flex;align-items:center;justify-content:center}
.guide-card{background:#1a1f2e;border:1px solid #f59e0b;border-radius:16px;padding:32px 24px;width:90%;max-width:340px;text-align:center;color:#f3e2b3}
.guide-step{font-size:3.5rem;margin-bottom:10px}
.guide-card h3{font-size:1.3rem;color:#ecc94b;margin-bottom:8px}
.guide-card p{font-size:0.9rem;opacity:0.7;line-height:1.6;margin-bottom:20px}
.guide-dots{display:flex;justify-content:center;gap:8px;margin-bottom:16px}
.guide-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25)}
.guide-dot.active{background:#f59e0b}
.guide-btn{padding:10px 30px;background:#f59e0b;color:#0a0f1e;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer}
.guide-skip{margin-top:10px;background:none;border:none;color:rgba(255,255,255,0.35);font-size:0.8rem;cursor:pointer}

/* ========== 空状态 (#3) ========== */
.history-empty{text-align:center;padding:80px 20px}
.history-empty .empty-illust{font-size:4rem;margin-bottom:16px;opacity:0.5;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ========== 黄历弹窗 (#4) ========== */
.almanac-tip{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#1a1f2e;border:1px solid #f59e0b;border-radius:12px;padding:20px;z-index:5001;width:85%;max-width:300px;text-align:center}
.almanac-tip.show{display:block;animation:fadeIn .2s ease}
.almanac-tip h4{color:#ecc94b;margin-bottom:8px;font-size:1.1rem}
.almanac-tip p{color:#f3e2b3;opacity:0.8;font-size:0.9rem;line-height:1.6;margin-bottom:14px}
.almanac-tip .tip-close{padding:8px 24px;background:#f59e0b;color:#0a0f1e;border:none;border-radius:8px;cursor:pointer;font-weight:600}

/* ========== 撒花 (#5) ========== */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:4000}
.confetti{position:absolute;width:10px;height:10px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{0%{transform:translateY(-100px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ========== 滑动删除 (#7) ========== */
.history-item{position:relative;overflow:hidden}
.history-item.swiped .hi-inner{transform:translateX(-70px)}
.hi-delete-action{position:absolute;right:0;top:0;bottom:0;width:65px;background:#c62828;color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8rem;cursor:pointer}
.hi-delete-action:active{background:#b71c1c}

/* ========== 分享水印 (#6) ========== */
.share-watermark{text-align:center;margin-top:6px;font-size:0.75rem;opacity:0.4}

/* ========== 签文库 ========== */
.library-container{padding:16px;max-width:520px;margin:0 auto}
.library-tabs{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.lib-tab{padding:7px 14px;border-radius:14px;font-size:0.82rem;cursor:pointer;border:1px solid rgba(255,255,255,0.15);color:rgba(255,255,255,0.55);white-space:nowrap;transition:all .2s}
.lib-tab.active{background:var(--accent);color:#0a0f1e;border-color:var(--accent)}
.lib-grid{display:flex;flex-wrap:wrap}
.lib-sign{width:31.3%;margin:0 1% 8px;padding:10px 4px;text-align:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:8px;cursor:pointer;transition:all .2s}
.lib-sign:active{background:rgba(255,255,255,0.1);border-color:var(--accent)}
.lib-sign .ls-num{display:block;font-size:1.05rem;font-weight:bold;color:var(--accent)}
.lib-sign .ls-title{display:block;font-size:0.7rem;color:rgba(255,255,255,0.5);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ========== 我的 ========== */
.my-avatar{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.06);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-size:2.2rem;margin:0 auto 10px;cursor:pointer;transition:transform .15s}
.my-avatar:active{transform:scale(0.92)}
.my-nickname{font-size:1.05rem;font-weight:600;color:var(--text-primary);text-align:center;outline:none;padding:2px 12px;border-radius:6px;min-width:40px}
.my-nickname:focus{background:rgba(255,255,255,0.06)}
.my-grid{display:flex;gap:8px;margin:16px 0}
.my-card{flex:1;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .15s}
.my-card:active{background:rgba(255,255,255,0.08)}
.my-card .mc-num{display:block;font-size:1.4rem;font-weight:bold;color:var(--accent);margin-bottom:2px}
.my-card .mc-label{font-size:0.72rem;color:rgba(255,255,255,0.45)}

/* ========== 签文库搜索 ========== */
.lib-search{padding:0 0 12px}
.lib-search input{width:100%;padding:9px 14px;border:1px solid rgba(255,255,255,0.12);border-radius:18px;background:rgba(255,255,255,0.05);color:var(--text-primary);font-size:0.88rem;outline:none}

/* ========== 同类签推荐 ========== */
.related-signs{margin-top:12px;padding:12px;background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.06)}
.related-signs .rs-title{font-size:0.85rem;color:rgba(255,255,255,0.4);margin-bottom:8px}
.related-item{display:inline-block;padding:6px 12px;margin:2px 4px 2px 0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;font-size:0.82rem;cursor:pointer;color:rgba(255,255,255,0.7);transition:all .2s}
.related-item:hover{border-color:var(--accent);color:var(--accent)}

/* ========== 热门签文 ========== */
.hot-signs{margin-bottom:14px;padding:12px 14px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:10px}
.hot-signs .hs-title{font-size:0.82rem;color:var(--text-secondary);margin-bottom:8px}
.hot-item{display:flex;align-items:center;padding:7px 0;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.04);white-space:nowrap}
.hot-item:last-child{border-bottom:none}
.hot-item .hot-num{font-weight:bold;color:var(--accent);min-width:50px;font-size:0.9rem;flex-shrink:0}
.hot-item .hot-title{flex:1;font-size:0.85rem;color:rgba(255,255,255,0.7);overflow:hidden;text-overflow:ellipsis}
.hot-item .hot-count{font-size:0.75rem;color:rgba(255,255,255,0.35);flex-shrink:0;margin-left:8px}

/* ========== 签到 ========== */
.checkin-area{text-align:center;margin:16px 0}
.checkin-btn{padding:10px 28px;background:var(--accent);color:#0a0f1e;border:none;border-radius:20px;font-size:0.95rem;font-weight:600;cursor:pointer}
.checkin-btn.done{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);cursor:default}
.checkin-streak{display:flex;justify-content:center;gap:6px;margin-top:10px}
.checkin-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.1)}
.checkin-dot.done{background:var(--accent)}
.checkin-info{font-size:0.8rem;color:rgba(255,255,255,0.4);margin-top:6px}